feat(button): rework selected state style for better a11y

lumapps · Dec 11, 2024 · a67dfa4 · a67dfa4
1 parent 227edb6
commit a67dfa4
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,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
+-   `Button`: 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
@@ -81,29 +81,29 @@
     --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
     --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
     --lumx-button-emphasis-selected-state-default-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
-    --lumx-button-emphasis-selected-state-default-border-width: 0;
-    --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
+    --lumx-button-emphasis-selected-state-default-border-width: 1px;
+    --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
     --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
-    --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
     --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
-    --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
     --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
-    --lumx-button-emphasis-selected-state-hover-border-width: 0;
-    --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
+    --lumx-button-emphasis-selected-state-hover-border-width: 1px;
+    --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
     --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
-    --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
     --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
-    --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
     --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
-    --lumx-button-emphasis-selected-state-active-border-width: 0;
-    --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
+    --lumx-button-emphasis-selected-state-active-border-width: 1px;
+    --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
     --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
-    --lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
     --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
-    --lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
     --lumx-chip-emphasis-selected-state-default-border-width: 1px;
     --lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);

diff --git a/packages/lumx-core/src/js/constants/design-tokens.ts b/packages/lumx-core/src/js/constants/design-tokens.ts
@@ -284,19 +284,23 @@ export const DESIGN_TOKENS = {
         'emphasis-selected': {
             'state-default': {
                 padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
-                'border-width': { value: '0' },
+                'border-width': { value: '1px' },
                 'theme-light': {
                     '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',
                     },
                     color: {
                         value: 'var(--lumx-color-primary-D2)',
                         attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
                         $aliasedFrom: 'color.primary.D2',
                     },
-                    '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',
+                    },
                 },
                 'theme-dark': {
                     'background-color': {
@@ -309,24 +313,32 @@ export const DESIGN_TOKENS = {
                         attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
                         $aliasedFrom: 'color.light.N',
                     },
-                    'border-color': { value: 'transparent' },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
                 },
             },
             'state-hover': {
                 padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
-                'border-width': { value: '0' },
+                'border-width': { value: '1px' },
                 'theme-light': {
                     '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',
                     },
                     color: {
                         value: 'var(--lumx-color-primary-D2)',
                         attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
                         $aliasedFrom: 'color.primary.D2',
                     },
-                    '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',
+                    },
                 },
                 'theme-dark': {
                     'background-color': {
@@ -339,24 +351,32 @@ export const DESIGN_TOKENS = {
                         attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
                         $aliasedFrom: 'color.light.N',
                     },
-                    'border-color': { value: 'transparent' },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
                 },
             },
             'state-active': {
                 padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
-                'border-width': { value: '0' },
+                'border-width': { value: '1px' },
                 'theme-light': {
                     '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',
                     },
                     color: {
                         value: 'var(--lumx-color-primary-D2)',
                         attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
                         $aliasedFrom: 'color.primary.D2',
                     },
-                    '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',
+                    },
                 },
                 'theme-dark': {
                     'background-color': {
@@ -369,7 +389,11 @@ export const DESIGN_TOKENS = {
                         attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
                         $aliasedFrom: 'color.light.N',
                     },
-                    'border-color': { value: 'transparent' },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
                 },
             },
         },

diff --git a/packages/lumx-core/src/scss/_design-tokens.scss b/packages/lumx-core/src/scss/_design-tokens.scss
@@ -80,29 +80,29 @@ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-c
 $lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
 $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
-$lumx-button-emphasis-selected-state-default-border-width: 0 !default;
-$lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
+$lumx-button-emphasis-selected-state-default-border-width: 1px !default;
+$lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
 $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
-$lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
-$lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
-$lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
+$lumx-button-emphasis-selected-state-hover-border-width: 1px !default;
+$lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
-$lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
-$lumx-button-emphasis-selected-state-active-border-width: 0 !default;
-$lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
+$lumx-button-emphasis-selected-state-active-border-width: 1px !default;
+$lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
 $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
-$lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
 $lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
+$lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-chip-emphasis-selected-state-default-border-width: 1px !default;
 $lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;

diff --git a/packages/lumx-core/style-dictionary/properties/components/button.json b/packages/lumx-core/style-dictionary/properties/components/button.json
@@ -157,48 +157,48 @@
                 "padding": {
                     "horizontal": { "value": "{spacing.unit.big.value}", "comment": "deprecated (use base emphasis padding)" }
                 },
-                "border-width": { "value": "0" },
+                "border-width": { "value": "1px" },
                 "theme-light": {
-                    "background-color": "{color.primary.L5}",
+                    "background-color": "{color.primary.L6}",
                     "color": "{color.primary.D2}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.primary.N}"
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L3}",
                     "color": "{color.light.N}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.light.N}"
                 }
             },
             "state-hover": {
                 "padding": {
                     "horizontal": { "value": "{spacing.unit.big.value}", "comment":  "deprecated (use base emphasis padding)" }
                 },
-                "border-width": { "value": "0" },
+                "border-width": { "value": "1px" },
                 "theme-light": {
-                    "background-color": "{color.primary.L4}",
+                    "background-color": "{color.primary.L5}",
                     "color": "{color.primary.D2}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.primary.N}"
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L4}",
                     "color": "{color.light.N}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.light.N}"
                 }
             },
             "state-active": {
                 "padding": {
                     "horizontal": { "value": "{spacing.unit.big.value}", "comment":  "deprecated (use base emphasis padding)" }
                 },
-                "border-width": { "value": "0" },
+                "border-width": { "value": "1px" },
                 "theme-light": {
-                    "background-color": "{color.primary.L3}",
+                    "background-color": "{color.primary.L4}",
                     "color": "{color.primary.D2}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.primary.N}"
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L5}",
                     "color": "{color.light.N}",
-                    "border-color": { "value": "transparent" }
+                    "border-color": "{color.light.N}"
                 }
             }
         }