Skip to content

Commit a15aad3

Browse files
gcornutgcornut
committed
feat(side-navigation): rework selected state style for better a11y
1 parent d258e4a commit a15aad3

File tree

5 files changed

+58
-45
lines changed

5 files changed

+58
-45
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1313
- `SlideShow`: rework control button color contrast for better a11y
1414
- `Chip`: rework selected state style for better a11y
1515
- `Navigation`: rework selected state style for better a11y
16+
- `SideNavigationItem`: rework selected state style for better a11y
1617

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

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

Lines changed: 10 additions & 10 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:22:35 GMT
5+
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
66
*/
77

88
:root {
@@ -253,15 +253,15 @@
253253
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
254254
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
255255
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
256-
--lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0;
257-
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent;
258-
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
259-
--lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0;
260-
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent;
261-
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
262-
--lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0;
263-
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent;
264-
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
256+
--lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px;
257+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
258+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
259+
--lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px;
260+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
261+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
262+
--lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px;
263+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
264+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
265265
--lumx-tabs-link-height: 48px;
266266
--lumx-tabs-link-border-radius: 0;
267267
--lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;

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

Lines changed: 28 additions & 16 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:22:35 GMT
3+
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
44
*/
55

66
export const DESIGN_TOKENS = {
@@ -939,35 +939,47 @@ export const DESIGN_TOKENS = {
939939
item: {
940940
'emphasis-selected': {
941941
'state-default': {
942-
'border-width': { value: '0' },
942+
'border-width': { value: '1px' },
943943
'theme-light': {
944-
'border-color': { value: 'transparent' },
944+
'border-color': {
945+
value: 'var(--lumx-color-primary-N)',
946+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
947+
$aliasedFrom: 'color.primary.N',
948+
},
945949
'background-color': {
946-
value: 'var(--lumx-color-primary-L5)',
947-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
948-
$aliasedFrom: 'color.primary.L5',
950+
value: 'var(--lumx-color-primary-L6)',
951+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
952+
$aliasedFrom: 'color.primary.L6',
949953
},
950954
},
951955
},
952956
'state-hover': {
953-
'border-width': { value: '0' },
957+
'border-width': { value: '1px' },
954958
'theme-light': {
955-
'border-color': { value: 'transparent' },
959+
'border-color': {
960+
value: 'var(--lumx-color-primary-N)',
961+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
962+
$aliasedFrom: 'color.primary.N',
963+
},
956964
'background-color': {
957-
value: 'var(--lumx-color-primary-L4)',
958-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
959-
$aliasedFrom: 'color.primary.L4',
965+
value: 'var(--lumx-color-primary-L5)',
966+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
967+
$aliasedFrom: 'color.primary.L5',
960968
},
961969
},
962970
},
963971
'state-active': {
964-
'border-width': { value: '0' },
972+
'border-width': { value: '1px' },
965973
'theme-light': {
966-
'border-color': { value: 'transparent' },
974+
'border-color': {
975+
value: 'var(--lumx-color-primary-N)',
976+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
977+
$aliasedFrom: 'color.primary.N',
978+
},
967979
'background-color': {
968-
value: 'var(--lumx-color-primary-L3)',
969-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
970-
$aliasedFrom: 'color.primary.L3',
980+
value: 'var(--lumx-color-primary-L4)',
981+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
982+
$aliasedFrom: 'color.primary.L4',
971983
},
972984
},
973985
},

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

Lines changed: 10 additions & 10 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:22:35 GMT
5+
* Generated on Mon, 13 Jan 2025 09:23:47 GMT
66
*/
77

88
$lumx-button-height: 36px !default;
@@ -252,15 +252,15 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(
252252
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
253253
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
254254
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
255-
$lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0 !default;
256-
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent !default;
257-
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
258-
$lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0 !default;
259-
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
260-
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
261-
$lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0 !default;
262-
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent !default;
263-
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
255+
$lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px !default;
256+
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
257+
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
258+
$lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px !default;
259+
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
260+
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
261+
$lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px !default;
262+
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
263+
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
264264
$lumx-tabs-link-height: 48px !default;
265265
$lumx-tabs-link-border-radius: 0 !default;
266266
$lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;

‎packages/lumx-core/style-dictionary/properties/components/side-navigation.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
"item": {
44
"emphasis-selected": {
55
"state-default": {
6-
"border-width": { "value": "0" },
6+
"border-width": { "value": "1px" },
77
"theme-light": {
8-
"border-color": { "value": "transparent" },
9-
"background-color": "{color.primary.L5}"
8+
"border-color": "{color.primary.N}",
9+
"background-color": "{color.primary.L6}"
1010
}
1111
},
1212
"state-hover": {
13-
"border-width": { "value": "0" },
13+
"border-width": { "value": "1px" },
1414
"theme-light": {
15-
"border-color": { "value": "transparent" },
16-
"background-color": "{color.primary.L4}"
15+
"border-color": "{color.primary.N}",
16+
"background-color": "{color.primary.L5}"
1717
}
1818
},
1919
"state-active": {
20-
"border-width": { "value": "0" },
20+
"border-width": { "value": "1px" },
2121
"theme-light": {
22-
"border-color": { "value": "transparent" },
23-
"background-color": "{color.primary.L3}"
22+
"border-color": "{color.primary.N}",
23+
"background-color": "{color.primary.L4}"
2424
}
2525
}
2626
}

0 commit comments

Comments
 (0)