From 47cce8e79ee38b83ccbddfb2fad2e34c19552fc8 Mon Sep 17 00:00:00 2001 From: Guillaume Cornut Date: Fri, 29 Nov 2024 14:57:32 +0100 Subject: [PATCH] feat(button): rework selected state style for better a11y --- CHANGELOG.md | 1 + packages/lumx-core/src/css/design-tokens.css | 32 ++++---- .../src/js/constants/design-tokens.ts | 80 ++++++++++++------- .../lumx-core/src/scss/_design-tokens.scss | 32 ++++---- .../src/scss/components/button/_index.scss | 12 ++- .../properties/components/button.json | 30 +++---- .../components/button/ButtonGroup.stories.tsx | 10 +-- 7 files changed, 112 insertions(+), 85 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13357b28d9..48ef4b8774 100644 --- 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.7][] - 2025-01-07 diff --git a/packages/lumx-core/src/css/design-tokens.css b/packages/lumx-core/src/css/design-tokens.css index 2373be27eb..4944dec3ea 100644 --- 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 Thu, 09 Jan 2025 16:44:59 GMT + * Generated on Thu, 09 Jan 2025 16:46:05 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 index 3362a7465a..f515f09a24 100644 --- 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 Thu, 09 Jan 2025 16:44:59 GMT + * Generated on Thu, 09 Jan 2025 16:46:06 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 index 3561e096da..abbe1850e3 100644 --- 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 Thu, 09 Jan 2025 16:44:59 GMT + * Generated on Thu, 09 Jan 2025 16:46:05 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 index 210dfb88a2..2895e29d97 100644 --- 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; + } } } } diff --git a/packages/lumx-core/style-dictionary/properties/components/button.json b/packages/lumx-core/style-dictionary/properties/components/button.json index 879b385f3b..781c69ff25 100644 --- 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}", + "background-color": "{color.light.L6}", "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}", + "background-color": "{color.light.L5}", "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}", + "background-color": "{color.light.L4}", "color": "{color.light.N}", - "border-color": { "value": "transparent" } + "border-color": "{color.light.N}" } } } diff --git a/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx b/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx index 56445ded06..bf5feb2df1 100644 --- a/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx +++ b/packages/lumx-react/src/components/button/ButtonGroup.stories.tsx @@ -14,12 +14,10 @@ export default { export const Variants = { render: ({ size, emphasis, theme }: any) => ( - Ignore me - Ignore me ), decorators: [ @@ -42,13 +40,13 @@ export const ManyButtons = { children: ( <> Ignore me - + Ignore me - + Ignore me - + Ignore me - + Ignore me ),