Skip to content

Commit 5cef4dc

Browse files
gcornutgcornut
committed
feat(button): rework selected state style for better a11y
1 parent a15aad3 commit 5cef4dc

File tree

7 files changed

+112
-85
lines changed

7 files changed

+112
-85
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
- `Chip`: rework selected state style for better a11y
1515
- `Navigation`: rework selected state style for better a11y
1616
- `SideNavigationItem`: rework selected state style for better a11y
17+
- `Button`: rework selected state style for better a11y
1718

1819
## [3.9.8][] - 2025-01-10
1920

‎packages/lumx-core/src/css/design-tokens.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* Do not edit directly
5-
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
5+
* Generated on Mon, 13 Jan 2025 09:24:38 GMT
66
*/
77

88
:root {
@@ -81,29 +81,29 @@
8181
--lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
8282
--lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
8383
--lumx-button-emphasis-selected-state-default-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
84-
--lumx-button-emphasis-selected-state-default-border-width: 0;
85-
--lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
84+
--lumx-button-emphasis-selected-state-default-border-width: 1px;
85+
--lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
8686
--lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
87-
--lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
88-
--lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
87+
--lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
88+
--lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
8989
--lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
90-
--lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
90+
--lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
9191
--lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
92-
--lumx-button-emphasis-selected-state-hover-border-width: 0;
93-
--lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
92+
--lumx-button-emphasis-selected-state-hover-border-width: 1px;
93+
--lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
9494
--lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
95-
--lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
96-
--lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
95+
--lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
96+
--lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
9797
--lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
98-
--lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
98+
--lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
9999
--lumx-button-emphasis-selected-state-active-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
100-
--lumx-button-emphasis-selected-state-active-border-width: 0;
101-
--lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
100+
--lumx-button-emphasis-selected-state-active-border-width: 1px;
101+
--lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
102102
--lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
103-
--lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
104-
--lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
103+
--lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
104+
--lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
105105
--lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
106-
--lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
106+
--lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
107107
--lumx-chip-emphasis-selected-state-default-border-width: 1px;
108108
--lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
109109
--lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);

‎packages/lumx-core/src/js/constants/design-tokens.ts

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
3+
* Generated on Mon, 13 Jan 2025 09:24:38 GMT
44
*/
55

66
export const DESIGN_TOKENS = {
@@ -284,92 +284,116 @@ export const DESIGN_TOKENS = {
284284
'emphasis-selected': {
285285
'state-default': {
286286
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
287-
'border-width': { value: '0' },
287+
'border-width': { value: '1px' },
288288
'theme-light': {
289289
'background-color': {
290-
value: 'var(--lumx-color-primary-L5)',
291-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
292-
$aliasedFrom: 'color.primary.L5',
290+
value: 'var(--lumx-color-primary-L6)',
291+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
292+
$aliasedFrom: 'color.primary.L6',
293293
},
294294
color: {
295295
value: 'var(--lumx-color-primary-D2)',
296296
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
297297
$aliasedFrom: 'color.primary.D2',
298298
},
299-
'border-color': { value: 'transparent' },
299+
'border-color': {
300+
value: 'var(--lumx-color-primary-N)',
301+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
302+
$aliasedFrom: 'color.primary.N',
303+
},
300304
},
301305
'theme-dark': {
302306
'background-color': {
303-
value: 'var(--lumx-color-light-L3)',
304-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
305-
$aliasedFrom: 'color.light.L3',
307+
value: 'var(--lumx-color-light-L6)',
308+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
309+
$aliasedFrom: 'color.light.L6',
306310
},
307311
color: {
308312
value: 'var(--lumx-color-light-N)',
309313
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
310314
$aliasedFrom: 'color.light.N',
311315
},
312-
'border-color': { value: 'transparent' },
316+
'border-color': {
317+
value: 'var(--lumx-color-light-N)',
318+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
319+
$aliasedFrom: 'color.light.N',
320+
},
313321
},
314322
},
315323
'state-hover': {
316324
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
317-
'border-width': { value: '0' },
325+
'border-width': { value: '1px' },
318326
'theme-light': {
319327
'background-color': {
320-
value: 'var(--lumx-color-primary-L4)',
321-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
322-
$aliasedFrom: 'color.primary.L4',
328+
value: 'var(--lumx-color-primary-L5)',
329+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
330+
$aliasedFrom: 'color.primary.L5',
323331
},
324332
color: {
325333
value: 'var(--lumx-color-primary-D2)',
326334
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
327335
$aliasedFrom: 'color.primary.D2',
328336
},
329-
'border-color': { value: 'transparent' },
337+
'border-color': {
338+
value: 'var(--lumx-color-primary-N)',
339+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
340+
$aliasedFrom: 'color.primary.N',
341+
},
330342
},
331343
'theme-dark': {
332344
'background-color': {
333-
value: 'var(--lumx-color-light-L4)',
334-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
335-
$aliasedFrom: 'color.light.L4',
345+
value: 'var(--lumx-color-light-L5)',
346+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
347+
$aliasedFrom: 'color.light.L5',
336348
},
337349
color: {
338350
value: 'var(--lumx-color-light-N)',
339351
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
340352
$aliasedFrom: 'color.light.N',
341353
},
342-
'border-color': { value: 'transparent' },
354+
'border-color': {
355+
value: 'var(--lumx-color-light-N)',
356+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
357+
$aliasedFrom: 'color.light.N',
358+
},
343359
},
344360
},
345361
'state-active': {
346362
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
347-
'border-width': { value: '0' },
363+
'border-width': { value: '1px' },
348364
'theme-light': {
349365
'background-color': {
350-
value: 'var(--lumx-color-primary-L3)',
351-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
352-
$aliasedFrom: 'color.primary.L3',
366+
value: 'var(--lumx-color-primary-L4)',
367+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
368+
$aliasedFrom: 'color.primary.L4',
353369
},
354370
color: {
355371
value: 'var(--lumx-color-primary-D2)',
356372
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
357373
$aliasedFrom: 'color.primary.D2',
358374
},
359-
'border-color': { value: 'transparent' },
375+
'border-color': {
376+
value: 'var(--lumx-color-primary-N)',
377+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
378+
$aliasedFrom: 'color.primary.N',
379+
},
360380
},
361381
'theme-dark': {
362382
'background-color': {
363-
value: 'var(--lumx-color-light-L5)',
364-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
365-
$aliasedFrom: 'color.light.L5',
383+
value: 'var(--lumx-color-light-L4)',
384+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
385+
$aliasedFrom: 'color.light.L4',
366386
},
367387
color: {
368388
value: 'var(--lumx-color-light-N)',
369389
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
370390
$aliasedFrom: 'color.light.N',
371391
},
372-
'border-color': { value: 'transparent' },
392+
'border-color': {
393+
value: 'var(--lumx-color-light-N)',
394+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
395+
$aliasedFrom: 'color.light.N',
396+
},
373397
},
374398
},
375399
},

‎packages/lumx-core/src/scss/_design-tokens.scss

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* Do not edit directly
5-
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
5+
* Generated on Mon, 13 Jan 2025 09:24:38 GMT
66
*/
77

88
$lumx-button-height: 36px !default;
@@ -80,29 +80,29 @@ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-c
8080
$lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
8181
$lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
8282
$lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
83-
$lumx-button-emphasis-selected-state-default-border-width: 0 !default;
84-
$lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
83+
$lumx-button-emphasis-selected-state-default-border-width: 1px !default;
84+
$lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
8585
$lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
86-
$lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
87-
$lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
86+
$lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
87+
$lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6) !default;
8888
$lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
89-
$lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
89+
$lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
9090
$lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
91-
$lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
92-
$lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
91+
$lumx-button-emphasis-selected-state-hover-border-width: 1px !default;
92+
$lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
9393
$lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
94-
$lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
95-
$lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
94+
$lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
95+
$lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
9696
$lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
97-
$lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
97+
$lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
9898
$lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
99-
$lumx-button-emphasis-selected-state-active-border-width: 0 !default;
100-
$lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
99+
$lumx-button-emphasis-selected-state-active-border-width: 1px !default;
100+
$lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
101101
$lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
102-
$lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
103-
$lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
102+
$lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
103+
$lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
104104
$lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
105-
$lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
105+
$lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
106106
$lumx-chip-emphasis-selected-state-default-border-width: 1px !default;
107107
$lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
108108
$lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;

‎packages/lumx-core/src/scss/components/button/_index.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,14 +158,18 @@
158158
.#{$lumx-base-prefix}-button {
159159
// Remove border radius on the right on the first button (if not hidden and not also the last button)
160160
&:not(:last-of-type:not(.visually-hidden)) {
161-
border-top-right-radius: 0 !important;
162-
border-bottom-right-radius: 0 !important;
161+
&, &::before {
162+
border-top-right-radius: 0;
163+
border-bottom-right-radius: 0;
164+
}
163165
}
164166

165167
// Remove border radius on the left on the last button (if not hidden and not also the first button)
166168
&:not(:first-of-type:not(.visually-hidden)) {
167-
border-top-left-radius: 0 !important;
168-
border-bottom-left-radius: 0 !important;
169+
&, &::before {
170+
border-top-left-radius: 0;
171+
border-bottom-left-radius: 0;
172+
}
169173
}
170174
}
171175
}

0 commit comments

Comments
 (0)