fix: forced color mode for side-nav-item base styles (#10118)

jouni · web-flow · commit c88726e2c9cf · 2025-09-03T16:30:36.000+03:00
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js
@@ -102,16 +102,21 @@ const sideNavItem = css`
   }
 
   @media (forced-colors: active) {
+    [part='content'] {
+      border: 1px solid Canvas !important;
+    }
+
     :host([current]) [part='content'] {
-      color: Highlight;
+      color: Highlight !important;
+      border-color: Highlight !important;
     }
 
     :host([disabled]) [part='content'] {
-      --vaadin-side-nav-item-color: GrayText;
+      --vaadin-side-nav-item-color: GrayText !important;
     }
 
     :host([disabled]) [part='toggle-button']::before {
-      background: GrayText;
+      background: GrayText !important;
     }
   }
 `;

Original file line number	Diff line number	Diff line change
@@ -102,16 +102,21 @@ const sideNavItem = css`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`@media (forced-colors: active) {`
	`105`	`+ [part='content'] {`
	`106`	`+ border: 1px solid Canvas !important;`
	`107`	`+ }`
	`108`	`+`
`105`	`109`	`:host([current]) [part='content'] {`
`106`		`- color: Highlight;`
	`110`	`+ color: Highlight !important;`
	`111`	`+ border-color: Highlight !important;`
`107`	`112`	`}`
`108`	`113`
`109`	`114`	`:host([disabled]) [part='content'] {`
`110`		`- --vaadin-side-nav-item-color: GrayText;`
	`115`	`+ --vaadin-side-nav-item-color: GrayText !important;`
`111`	`116`	`}`
`112`	`117`
`113`	`118`	`:host([disabled]) [part='toggle-button']::before {`
`114`		`- background: GrayText;`
	`119`	`+ background: GrayText !important;`
`115`	`120`	`}`
`116`	`121`	`}`
`117`	`122`	`;