Skip to content

Commit 0fcdfbf

Browse files
AliKdhim87AliKdhim87
committed
fix: fix the mixins for link focus and focus-visible states in the navigation component
1 parent 9dfa9d5 commit 0fcdfbf

File tree

6 files changed

+106
-27
lines changed

6 files changed

+106
-27
lines changed

‎.changeset/strong-mugs-draw.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@utrecht/design-tokens": patch
3+
"@utrecht/navigation-css": patch
4+
---
5+
6+
Fix the mixins for link focus and focus-visible states in the navigation component to correctly reference the design tokens for background colors and text decorations.

‎components/navigation/src/_mixin.scss‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,6 @@
8282
}
8383

8484
@mixin utrecht-navigation__link {
85-
--utrecht-link-focus-text-decoration: underline;
86-
--utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
8785
--utrecht-link-text-decoration: none;
8886
--utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
8987
--utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
@@ -115,16 +113,35 @@
115113

116114
@mixin utrecht-navigation__link-focus {
117115
--utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
118-
--utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
116+
--utrecht-link-focus-background-color: var(--utrecht-navigation-link-focus-background-color);
119117
--utrecht-navigation-marker-color: currentColor;
120118
--utrecht-navigation-marker-outline-hover-fill: currentColor;
119+
--utrecht-link-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
120+
--utrecht-link-text-decoration: underline;
121121
}
122122

123-
@mixin utrecht-navigation__link-active-focus {
124-
--utrecht-link-focus-color: var(--utrecht-navigation-link-active-focus-color);
123+
@mixin utrecht-navigation__link-focus-visible {
124+
--utrecht-navigation-link-active-focus-color: var(--utrecht-navigation-link-focus-visible-color);
125+
--utrecht-link-focus-color: var(--utrecht-navigation-link-focus-visible-color);
126+
--utrecht-link-focus-background-color: var(--utrecht-navigation-link-focus-visible-background-color);
127+
--utrecht-navigation-link-focus-color: var(--utrecht-navigation-link-focus-visible-color);
128+
--utrecht-navigation-link-focus-background-color: var(--utrecht-navigation-link-focus-visible-background-color);
129+
--utrecht-link-focus-visible-text-decoration-thickness: var(
130+
--utrecht-navigation-link-focus-visible-text-decoration-thickness
131+
);
132+
--utrecht-link-focus-visible-text-decoration: underline;
133+
--utrecht-navigation-marker-color: currentColor;
134+
--utrecht-navigation-marker-outline-hover-fill: currentColor;
135+
}
136+
137+
@mixin utrecht-navigation__link-active {
138+
--utrecht-link-active-color: var(--utrecht-navigation-link-active-focus-color);
125139
}
126140

127141
@mixin utrecht-navigation__link--mobile {
142+
--utrecht-navigation-link-focus-color: var(--utrecht-navigation-link-mobile-focus-color);
143+
--utrecht-navigation-link-focus-background-color: var(--utrecht-navigation-link-mobile-focus-background-color);
144+
--utrecht-link-active-color: var(--utrecht-navigation-link-mobile-active-color);
128145
--_utrecht-navigation-link-align-items: center;
129146
--_utrecht-navigation-link-justify-content: normal;
130147
--utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
@@ -151,6 +168,7 @@
151168
}
152169

153170
@mixin utrecht-navigation__link--is-current {
171+
--utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
154172
--utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
155173
}
156174

‎components/navigation/src/index.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,19 @@
3535
.utrecht-navigation__link:hover {
3636
@include utrecht-navigation__link-hover;
3737
}
38-
.utrecht-navigation__link:focus {
38+
39+
.utrecht-link.utrecht-link--html-a.utrecht-navigation__link:focus-visible {
40+
@include utrecht-navigation__link-focus-visible;
41+
}
42+
43+
.utrecht-link.utrecht-link--html-a.utrecht-navigation__link:focus {
3944
@include utrecht-navigation__link-focus;
4045
}
4146

42-
.utrecht-navigation__link:active:focus {
43-
@include utrecht-navigation__link-active-focus;
47+
.utrecht-navigation__link:active {
48+
@include utrecht-navigation__link-active;
4449
}
50+
4551
.utrecht-navigation__link--mobile {
4652
@include utrecht-navigation__link--mobile;
4753
}

‎components/navigation/src/tokens.json‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -260,18 +260,6 @@
260260
"nl.nldesignsystem.figma.supports-token": false
261261
},
262262
"type": "color"
263-
},
264-
"focus": {
265-
"color": {
266-
"$extensions": {
267-
"nl.nldesignsystem.css.property": {
268-
"syntax": "<color>",
269-
"inherits": true
270-
},
271-
"nl.nldesignsystem.figma.supports-token": false
272-
},
273-
"type": "color"
274-
}
275263
}
276264
},
277265
"background-color": {
@@ -325,6 +313,48 @@
325313
},
326314
"type": "color"
327315
},
316+
"background-color": {
317+
"$extensions": {
318+
"nl.nldesignsystem.css.property": {
319+
"syntax": "<color>",
320+
"inherits": true
321+
},
322+
"nl.nldesignsystem.figma.supports-token": false
323+
},
324+
"type": "color"
325+
},
326+
"text-decoration-thickness": {
327+
"$extensions": {
328+
"nl.nldesignsystem.css.property": {
329+
"syntax": "<length>",
330+
"inherits": true
331+
},
332+
"nl.nldesignsystem.figma.supports-token": false
333+
},
334+
"type": "length"
335+
}
336+
},
337+
"focus-visible": {
338+
"color": {
339+
"$extensions": {
340+
"nl.nldesignsystem.css.property": {
341+
"syntax": "<color>",
342+
"inherits": true
343+
},
344+
"nl.nldesignsystem.figma.supports-token": false
345+
},
346+
"type": "color"
347+
},
348+
"background-color": {
349+
"$extensions": {
350+
"nl.nldesignsystem.css.property": {
351+
"syntax": "<color>",
352+
"inherits": true
353+
},
354+
"nl.nldesignsystem.figma.supports-token": false
355+
},
356+
"type": "color"
357+
},
328358
"text-decoration-thickness": {
329359
"$extensions": {
330360
"nl.nldesignsystem.css.property": {

‎packages/storybook-css/src/Navigation/NavigationIconLink.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.utrecht-navigation-icon-link {
22
--utrecht-navigation-icon-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
33
--utrecht-navigation-icon-link-column-gap: var(--utrecht-space-inline-xs);
4-
--utrecht-navigation-icon-link-compact-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
4+
--utrecht-navigation-icon-link-compact-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
55
--utrecht-navigation-icon-link-default-margin-block-start: var(--utrecht-space-block-md);
66
--utrecht-navigation-icon-link-default-padding-inline-start: var(--utrecht-space-inline-md);
77

‎proprietary/design-tokens/src/component/utrecht/navigation.tokens.json‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,6 @@
7070
"active": {
7171
"color": {
7272
"value": "{utrecht.color.white}"
73-
},
74-
"focus": {
75-
"color": {
76-
"value": "{utrecht.color.black}"
77-
}
7873
}
7974
},
8075
"background-color": {
@@ -90,6 +85,17 @@
9085
"value": "{utrecht.color.white}"
9186
},
9287
"focus": {
88+
"color": {
89+
"value": "{utrecht.color.white}"
90+
},
91+
"background-color": {
92+
"value": "{utrecht.color.black}"
93+
},
94+
"text-decoration-thickness": {
95+
"value": "3px"
96+
}
97+
},
98+
"focus-visible": {
9399
"color": {
94100
"value": "{utrecht.color.black}"
95101
},
@@ -137,7 +143,20 @@
137143
"value": "{utrecht.color.blue.35}"
138144
},
139145
"font-weight": {
140-
"value": "{utrecht.typography.weight-scale.bold.font-weight}"
146+
"value": "{utrecht.typography.weight-scale.normal.font-weight}"
147+
}
148+
},
149+
"active": {
150+
"color": {
151+
"value": "{utrecht.color.blue.35}"
152+
}
153+
},
154+
"focus": {
155+
"background-color": {
156+
"value": "{utrecht.color.white}"
157+
},
158+
"color": {
159+
"value": "{utrecht.color.blue.35}"
141160
}
142161
},
143162
"justify-content": {},

0 commit comments

Comments
 (0)
⚡