feat(side-navigation): rework selected state style for better a11y

lumapps · Dec 16, 2024 · 8f30f48 · 8f30f48
1 parent d9bb2e1
commit 8f30f48
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `Chip`: rework selected state style for better a11y
 -   `Navigation`: rework selected state style for better a11y
+-   `SideNavigationItem`: rework selected state style for better a11y
 
 ## [3.9.6][] - 2024-12-04
 

diff --git a/packages/lumx-core/src/css/design-tokens.css b/packages/lumx-core/src/css/design-tokens.css
@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 14:38:15 GMT
+ * Generated on Mon, 16 Dec 2024 14:39:28 GMT
  */
 
 :root {
@@ -253,15 +253,15 @@
     --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
     --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
     --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
-    --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0;
-    --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent;
-    --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
-    --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0;
-    --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent;
-    --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
-    --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0;
-    --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent;
-    --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
+    --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px;
+    --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
+    --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px;
+    --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
+    --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px;
+    --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
     --lumx-tabs-link-height: 48px;
     --lumx-tabs-link-border-radius: 0;
     --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;

diff --git a/packages/lumx-core/src/js/constants/design-tokens.ts b/packages/lumx-core/src/js/constants/design-tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 14:38:14 GMT
+ * Generated on Mon, 16 Dec 2024 14:39:29 GMT
  */
 
 export const DESIGN_TOKENS = {
@@ -935,35 +935,47 @@ export const DESIGN_TOKENS = {
         item: {
             'emphasis-selected': {
                 'state-default': {
-                    'border-width': { value: '0' },
+                    'border-width': { value: '1px' },
                     'theme-light': {
-                        'border-color': { value: 'transparent' },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
                         'background-color': {
-                            value: 'var(--lumx-color-primary-L5)',
-                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
-                            $aliasedFrom: 'color.primary.L5',
+                            value: 'var(--lumx-color-primary-L6)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
+                            $aliasedFrom: 'color.primary.L6',
                         },
                     },
                 },
                 'state-hover': {
-                    'border-width': { value: '0' },
+                    'border-width': { value: '1px' },
                     'theme-light': {
-                        'border-color': { value: 'transparent' },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
                         'background-color': {
-                            value: 'var(--lumx-color-primary-L4)',
-                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
-                            $aliasedFrom: 'color.primary.L4',
+                            value: 'var(--lumx-color-primary-L5)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
+                            $aliasedFrom: 'color.primary.L5',
                         },
                     },
                 },
                 'state-active': {
-                    'border-width': { value: '0' },
+                    'border-width': { value: '1px' },
                     'theme-light': {
-                        'border-color': { value: 'transparent' },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
                         'background-color': {
-                            value: 'var(--lumx-color-primary-L3)',
-                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
-                            $aliasedFrom: 'color.primary.L3',
+                            value: 'var(--lumx-color-primary-L4)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+                            $aliasedFrom: 'color.primary.L4',
                         },
                     },
                 },

diff --git a/packages/lumx-core/src/scss/_design-tokens.scss b/packages/lumx-core/src/scss/_design-tokens.scss
@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 14:38:14 GMT
+ * Generated on Mon, 16 Dec 2024 14:39:28 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -252,15 +252,15 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
-$lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0 !default;
-$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent !default;
-$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
-$lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0 !default;
-$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
-$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
-$lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0 !default;
-$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent !default;
-$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
+$lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px !default;
+$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
+$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
+$lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px !default;
+$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
+$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
+$lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px !default;
+$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
+$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
 $lumx-tabs-link-height: 48px !default;
 $lumx-tabs-link-border-radius: 0 !default;
 $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;

diff --git a/packages/lumx-core/style-dictionary/properties/components/side-navigation.json b/packages/lumx-core/style-dictionary/properties/components/side-navigation.json
@@ -3,24 +3,24 @@
         "item": {
             "emphasis-selected": {
                 "state-default": {
-                    "border-width": { "value": "0" },
+                    "border-width": { "value": "1px" },
                     "theme-light": {
-                        "border-color": { "value": "transparent" },
-                        "background-color": "{color.primary.L5}"
+                        "border-color": "{color.primary.N}",
+                        "background-color": "{color.primary.L6}"
                     }
                 },
                 "state-hover": {
-                    "border-width": { "value": "0" },
+                    "border-width": { "value": "1px" },
                     "theme-light": {
-                        "border-color": { "value": "transparent" },
-                        "background-color": "{color.primary.L4}"
+                        "border-color": "{color.primary.N}",
+                        "background-color": "{color.primary.L5}"
                     }
                 },
                 "state-active": {
-                    "border-width": { "value": "0" },
+                    "border-width": { "value": "1px" },
                     "theme-light": {
-                        "border-color": { "value": "transparent" },
-                        "background-color": "{color.primary.L3}"
+                        "border-color": "{color.primary.N}",
+                        "background-color": "{color.primary.L4}"
                     }
                 }
             }