Skip to content

Commit

Permalink
feat(button): rework selected state style for better a11y
Browse files Browse the repository at this point in the history
  • Loading branch information
@gcornut
gcornut committed Dec 16, 2024
1 parent 8f30f48 commit c209b7e
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 75 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
32 changes: 16 additions & 16 deletions packages/lumx-core/src/css/design-tokens.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

/**
* Do not edit directly
* Generated on Mon, 16 Dec 2024 14:39:28 GMT
* Generated on Mon, 16 Dec 2024 14:41:27 GMT
*/

:root {
Expand Down Expand Up @@ -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);
Expand Down
80 changes: 52 additions & 28 deletions packages/lumx-core/src/js/constants/design-tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 16 Dec 2024 14:39:29 GMT
* Generated on Mon, 16 Dec 2024 14:41:27 GMT
*/

export const DESIGN_TOKENS = {
Expand Down Expand Up @@ -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',
},
},
},
},
Expand Down
32 changes: 16 additions & 16 deletions packages/lumx-core/src/scss/_design-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

/**
* Do not edit directly
* Generated on Mon, 16 Dec 2024 14:39:28 GMT
* Generated on Mon, 16 Dec 2024 14:41:27 GMT
*/

$lumx-button-height: 36px !default;
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit c209b7e

Please sign in to comment.