feat(app-content): Revise sidebar selection and content edge styling

Main content now has a subtle left divider and rounded left edge next
to the navigation. Selected nav and list items use a softly tinted
pill instead of a solid primary fill.

Author: nfebe

src/assets/NcAppNavigationItem.scss

@@ -28,18 +28,18 @@
 		}
 	}
 
-	// When .active class is applied, change color background of link and utils. The
-	// !important prevents the focus state to override the active state.
+	// When .active class is applied, render a softly tinted "pill" highlight.
+	// The !important prevents the focus state to override the active state.
 	&.active {
-		background-color: var(--color-primary-element) !important;
+		background-color: var(--color-primary-element-light) !important;
 
 		&:hover {
-			background-color: var(--color-primary-element-hover) !important;
+			background-color: var(--color-primary-element-light-hover) !important;
 		}
 
 		// overwrite active text color
 		.app-navigation-entry-link, .app-navigation-entry-button {
-			color: var(--color-primary-element-text) !important;
+			color: var(--color-primary-element-light-text) !important;
 		}
 	}
 	&:focus-within,

src/components/NcAppContent/NcAppContent.vue

@@ -466,6 +466,14 @@ export default {
 	&:not(.app-content--has-list) {
 		overflow: auto;
 	}
+
+	// Subtle divider + rounded left edge when the navigation sits next to the content.
+	// Hidden on mobile where the navigation slides over the content.
+	@media only screen and (min-width: $breakpoint-mobile) {
+		border-inline-start: 1px solid var(--color-border);
+		border-start-start-radius: var(--body-container-radius);
+		border-end-start-radius: var(--body-container-radius);
+	}
 }
 
 .app-content-wrapper {

src/components/NcListItem/NcListItem.vue

@@ -854,22 +854,22 @@ export default {
 	&--active,
 	&.active {
 		.list-item {
-			background-color: var(--color-primary-element);
-			color: var(--color-primary-element-text) !important;
+			background-color: var(--color-primary-element-light);
+			color: var(--color-primary-element-light-text) !important;
 
 			&:hover,
 			&:focus-within,
 			&:has(:focus-visible),
 			&:has(:active) {
-				background-color: var(--color-primary-element-hover);
+				background-color: var(--color-primary-element-light-hover);
 			}
 		}
 
 		.list-item-content__name,
 		.list-item-content__subname,
 		.list-item-content__details,
 		.list-item-details__details {
-			color: var(--color-primary-element-text) !important;
+			color: var(--color-primary-element-light-text) !important;
 		}
 	}
 	.list-item-content__name,