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

lumapps · Jan 16, 2025 · 5cef4dc · 5cef4dc
1 parent a15aad3
commit 5cef4dc
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,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.8][] - 2025-01-10
 

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, 13 Jan 2025 09:23:47 GMT
+ * Generated on Mon, 13 Jan 2025 09:24:38 GMT
  */
 
 :root {
@@ -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-dark-background-color: var(--lumx-color-light-L3);
+    --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-L6);
     --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-dark-background-color: var(--lumx-color-light-L4);
+    --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-L5);
     --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-dark-background-color: var(--lumx-color-light-L5);
+    --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-L4);
     --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
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 09:23:47 GMT
+ * Generated on Mon, 13 Jan 2025 09:24:38 GMT
  */
 
 export const DESIGN_TOKENS = {
@@ -284,92 +284,116 @@ 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': {
-                        value: 'var(--lumx-color-light-L3)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
-                        $aliasedFrom: 'color.light.L3',
+                        value: 'var(--lumx-color-light-L6)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
+                        $aliasedFrom: 'color.light.L6',
                     },
                     color: {
                         value: 'var(--lumx-color-light-N)',
                         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': {
-                        value: 'var(--lumx-color-light-L4)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
-                        $aliasedFrom: 'color.light.L4',
+                        value: 'var(--lumx-color-light-L5)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                        $aliasedFrom: 'color.light.L5',
                     },
                     color: {
                         value: 'var(--lumx-color-light-N)',
                         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': {
-                        value: 'var(--lumx-color-light-L5)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                        $aliasedFrom: 'color.light.L5',
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
                     },
                     color: {
                         value: 'var(--lumx-color-light-N)',
                         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
@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 09:23:47 GMT
+ * Generated on Mon, 13 Jan 2025 09:24:38 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -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-dark-background-color: var(--lumx-color-light-L3) !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-L6) !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-dark-background-color: var(--lumx-color-light-L4) !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-L5) !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-dark-background-color: var(--lumx-color-light-L5) !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-L4) !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/src/scss/components/button/_index.scss b/packages/lumx-core/src/scss/components/button/_index.scss
@@ -158,14 +158,18 @@
     .#{$lumx-base-prefix}-button {
         // Remove border radius on the right on the first button (if not hidden and not also the last button)
         &:not(:last-of-type:not(.visually-hidden)) {
-            border-top-right-radius: 0 !important;
-            border-bottom-right-radius: 0 !important;
+            &, &::before {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
         }
 
         // Remove border radius on the left on the last button (if not hidden and not also the first button)
         &:not(:first-of-type:not(.visually-hidden)) {
-            border-top-left-radius: 0 !important;
-            border-bottom-left-radius: 0 !important;
+            &, &::before {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
         }
     }
 }