Skip to content

Commit d35cfe4

Browse files
jinlee93Jin Leebooc0mtaco
authored
refactor(link)!: remove text-link tokens for link t3 tokens (#1639)
* refactor(link): add background t3 tokens * refactor(link): point t3 tokens to t2 temp * refactor(link)!: point t3 to t1 tokens * refactor!: remove deprecated tokens * fix(tabs): use correct color token * refactor(link): re-remove text-link tokens re-added in rebase * fix(tokens): point tier 3 tokens to relevant tier 2 token values --------- Co-authored-by: Jin Lee <[email protected]> Co-authored-by: Andrew Holloway <[email protected]>
1 parent 985b5f7 commit d35cfe4

File tree

9 files changed

+72
-92
lines changed

9 files changed

+72
-92
lines changed

‎.storybook/data/tokens.json

+10-14
Original file line numberDiff line numberDiff line change
@@ -210,8 +210,6 @@
210210
"eds-theme-color-background-grade-stop-default": "#D41E52",
211211
"eds-theme-color-background-grade-stop-subtle": "#FFF0F4",
212212
"eds-theme-color-background-disabled": "#C0C4C8",
213-
"eds-theme-color-border-link-neutral": "#21272D",
214-
"eds-theme-color-border-link-brand": "#5751D2",
215213
"eds-theme-color-border-neutral-subtle": "#E7E8EA",
216214
"eds-theme-color-border-neutral-subtle-hover": "#C0C4C8",
217215
"eds-theme-color-border-neutral-default": "#C0C4C8",
@@ -265,8 +263,6 @@
265263
"eds-theme-color-text-neutral-default-inverse": "#FFFFFF",
266264
"eds-theme-color-text-neutral-strong": "#21272D",
267265
"eds-theme-color-text-neutral-subtle": "#5D6369",
268-
"eds-theme-color-text-link-neutral": "#21272D",
269-
"eds-theme-color-text-link-brand": "#5751D2",
270266
"eds-theme-color-text-utility-success": "#007249",
271267
"eds-theme-color-text-utility-warning": "#AC3400",
272268
"eds-theme-color-text-utility-error": "#BD0044",
@@ -429,20 +425,20 @@
429425
"eds-theme-color-form-background": "#FFFFFF",
430426
"eds-theme-color-form-background-hover": "#F4F6F8",
431427
"eds-theme-color-form-label": "#383C43",
432-
"eds-theme-color-link-brand-text": "var(--eds-theme-color-text-link-neutral)",
433-
"eds-theme-color-link-brand-text-hover": "var(--eds-theme-color-text-link-brand)",
428+
"eds-theme-color-link-brand-text": "var(--eds-theme-color-text-neutral-strong)",
429+
"eds-theme-color-link-brand-text-hover": "var(--eds-theme-color-text-brand-default)",
434430
"eds-theme-color-link-brand-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
435-
"eds-theme-color-link-brand-text-decoration": "var(--eds-theme-color-border-link-brand)",
436-
"eds-theme-color-link-brand-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
431+
"eds-theme-color-link-brand-text-decoration": "var(--eds-theme-color-text-brand-default)",
432+
"eds-theme-color-link-brand-text-decoration-hover": "var(--eds-theme-color-text-brand-default)",
437433
"eds-theme-color-link-brand-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
438-
"eds-theme-color-link-brand-background-focus": "var(--eds-theme-color-border-link-brand)",
439-
"eds-theme-color-link-neutral-text": "var(--eds-theme-color-text-link-neutral)",
440-
"eds-theme-color-link-neutral-text-hover": "var(--eds-theme-color-text-link-brand)",
434+
"eds-theme-color-link-brand-background-focus": "var(--eds-theme-color-text-brand-default)",
435+
"eds-theme-color-link-neutral-text": "var(--eds-theme-color-text-neutral-strong)",
436+
"eds-theme-color-link-neutral-text-hover": "var(--eds-theme-color-text-brand-default)",
441437
"eds-theme-color-link-neutral-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
442-
"eds-theme-color-link-neutral-text-decoration": "var(--eds-theme-color-border-link-neutral)",
443-
"eds-theme-color-link-neutral-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
438+
"eds-theme-color-link-neutral-text-decoration": "var(--eds-theme-color-text-neutral-strong)",
439+
"eds-theme-color-link-neutral-text-decoration-hover": "var(--eds-theme-color-text-brand-default)",
444440
"eds-theme-color-link-neutral-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
445-
"eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-border-link-neutral)",
441+
"eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-text-neutral-default)",
446442
"eds-theme-color-modal-brand-header-background": "#8984E8",
447443
"eds-theme-color-progress-bar-background": "#E7E8EA",
448444
"eds-theme-color-progress-bar-border": "#E7E8EA",

‎.vscode/settings.json

+21-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,25 @@
1111
"typescript.validate.enable": true,
1212
"javascript.validate.enable": true,
1313
"editor.formatOnSave": true,
14-
"editor.defaultFormatter": "esbenp.prettier-vscode"
14+
"editor.defaultFormatter": "esbenp.prettier-vscode",
15+
"workbench.colorCustomizations": {
16+
"activityBar.activeBackground": "#93e6fc",
17+
"activityBar.background": "#93e6fc",
18+
"activityBar.foreground": "#15202b",
19+
"activityBar.inactiveForeground": "#15202b99",
20+
"activityBarBadge.background": "#fa45d4",
21+
"activityBarBadge.foreground": "#15202b",
22+
"commandCenter.border": "#15202b99",
23+
"sash.hoverBorder": "#93e6fc",
24+
"statusBar.background": "#61dafb",
25+
"statusBar.foreground": "#15202b",
26+
"statusBarItem.hoverBackground": "#2fcefa",
27+
"statusBarItem.remoteBackground": "#61dafb",
28+
"statusBarItem.remoteForeground": "#15202b",
29+
"titleBar.activeBackground": "#61dafb",
30+
"titleBar.activeForeground": "#15202b",
31+
"titleBar.inactiveBackground": "#61dafb99",
32+
"titleBar.inactiveForeground": "#15202b99"
33+
},
34+
"peacock.color": "#61dafb"
1535
}

‎src/components/Tabs/Tabs.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
* Tabs link within active tabs item
111111
*/
112112
.tabs__item.eds-is-active & {
113-
color: var(--eds-theme-color-text-link-brand);
113+
color: var(--eds-theme-color-text-brand-default);
114114
box-shadow: inset 0 calc(var(--eds-border-width-md) * -1) 0 0
115115
var(--eds-theme-color-border-brand-primary-strong);
116116
}

‎src/design-tokens/tier-2-usage/colors-border.json

-10
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,6 @@
33
"theme": {
44
"color": {
55
"border": {
6-
"link": {
7-
"neutral": {
8-
"value": "{eds.color.neutral.800}",
9-
"comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
10-
},
11-
"brand": {
12-
"value": "{eds.color.brand.grape.700}",
13-
"comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
14-
}
15-
},
166
"neutral": {
177
"subtle": {
188
"@": {

‎src/design-tokens/tier-2-usage/colors-text.json

-10
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,6 @@
1919
"value": "{eds.color.neutral.600}"
2020
}
2121
},
22-
"link": {
23-
"neutral": {
24-
"value": "{eds.color.neutral.800}",
25-
"comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead."
26-
},
27-
"brand": {
28-
"value": "{eds.color.brand.grape.700}",
29-
"comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead."
30-
}
31-
},
3222
"utility": {
3323
"success": { "value": "{eds.color.other.mint.700}" },
3424
"warning": { "value": "{eds.color.other.orange.700}" },

‎src/design-tokens/tier-3-component/link.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,58 @@
66
"brand": {
77
"text": {
88
"@": {
9-
"value": "var(--eds-theme-color-text-link-neutral)"
9+
"value": "var(--eds-theme-color-text-neutral-strong)"
1010
},
1111
"hover": {
12-
"value": "var(--eds-theme-color-text-link-brand)"
12+
"value": "var(--eds-theme-color-text-brand-default)"
1313
},
1414
"focus": {
1515
"value": "var(--eds-theme-color-text-neutral-default-inverse)"
1616
}
1717
},
1818
"text-decoration": {
1919
"@": {
20-
"value": "var(--eds-theme-color-border-link-brand)"
20+
"value": "var(--eds-theme-color-text-brand-default)"
2121
},
2222
"hover": {
23-
"value": "var(--eds-theme-color-border-link-brand)"
23+
"value": "var(--eds-theme-color-text-brand-default)"
2424
},
2525
"focus": {
2626
"value": "var(--eds-theme-color-text-neutral-default-inverse)"
2727
}
2828
},
2929
"background": {
3030
"focus": {
31-
"value": "var(--eds-theme-color-border-link-brand)"
31+
"value": "var(--eds-theme-color-text-brand-default)"
3232
}
3333
}
3434
},
3535
"neutral": {
3636
"text": {
3737
"@": {
38-
"value": "var(--eds-theme-color-text-link-neutral)"
38+
"value": "var(--eds-theme-color-text-neutral-strong)"
3939
},
4040
"hover": {
41-
"value": "var(--eds-theme-color-text-link-brand)"
41+
"value": "var(--eds-theme-color-text-brand-default)"
4242
},
4343
"focus": {
4444
"value": "var(--eds-theme-color-text-neutral-default-inverse)"
4545
}
4646
},
4747
"text-decoration": {
4848
"@": {
49-
"value": "var(--eds-theme-color-border-link-neutral)"
49+
"value": "var(--eds-theme-color-text-neutral-default)"
5050
},
5151
"hover": {
52-
"value": "var(--eds-theme-color-border-link-brand)"
52+
"value": "var(--eds-theme-color-text-brand-default)"
5353
},
5454
"focus": {
5555
"value": "var(--eds-theme-color-text-neutral-default-inverse)"
5656
}
5757
},
5858
"background": {
5959
"focus": {
60-
"value": "var(--eds-theme-color-border-link-neutral)"
60+
"value": "var(--eds-theme-color-text-neutral-default)"
6161
}
6262
}
6363
}

‎src/tokens-dist/css/variables.css

+10-14
Original file line numberDiff line numberDiff line change
@@ -210,8 +210,6 @@
210210
--eds-theme-color-background-grade-stop-default: #D41E52;
211211
--eds-theme-color-background-grade-stop-subtle: #FFF0F4;
212212
--eds-theme-color-background-disabled: #C0C4C8;
213-
--eds-theme-color-border-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
214-
--eds-theme-color-border-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
215213
--eds-theme-color-border-neutral-subtle: #E7E8EA;
216214
--eds-theme-color-border-neutral-subtle-hover: #C0C4C8;
217215
--eds-theme-color-border-neutral-default: #C0C4C8;
@@ -265,8 +263,6 @@
265263
--eds-theme-color-text-neutral-default-inverse: #FFFFFF;
266264
--eds-theme-color-text-neutral-strong: #21272D;
267265
--eds-theme-color-text-neutral-subtle: #5D6369;
268-
--eds-theme-color-text-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead. */
269-
--eds-theme-color-text-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead. */
270266
--eds-theme-color-text-utility-success: #007249;
271267
--eds-theme-color-text-utility-warning: #AC3400;
272268
--eds-theme-color-text-utility-error: #BD0044;
@@ -429,20 +425,20 @@
429425
--eds-theme-color-form-background: #FFFFFF;
430426
--eds-theme-color-form-background-hover: #F4F6F8;
431427
--eds-theme-color-form-label: #383C43;
432-
--eds-theme-color-link-brand-text: var(--eds-theme-color-text-link-neutral);
433-
--eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-link-brand);
428+
--eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong);
429+
--eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default);
434430
--eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
435-
--eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-border-link-brand);
436-
--eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-border-link-brand);
431+
--eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-text-brand-default);
432+
--eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-text-brand-default);
437433
--eds-theme-color-link-brand-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
438-
--eds-theme-color-link-brand-background-focus: var(--eds-theme-color-border-link-brand);
439-
--eds-theme-color-link-neutral-text: var(--eds-theme-color-text-link-neutral);
440-
--eds-theme-color-link-neutral-text-hover: var(--eds-theme-color-text-link-brand);
434+
--eds-theme-color-link-brand-background-focus: var(--eds-theme-color-text-brand-default);
435+
--eds-theme-color-link-neutral-text: var(--eds-theme-color-text-neutral-strong);
436+
--eds-theme-color-link-neutral-text-hover: var(--eds-theme-color-text-brand-default);
441437
--eds-theme-color-link-neutral-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
442-
--eds-theme-color-link-neutral-text-decoration: var(--eds-theme-color-border-link-neutral);
443-
--eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-border-link-brand);
438+
--eds-theme-color-link-neutral-text-decoration: var(--eds-theme-color-text-neutral-strong);
439+
--eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-text-brand-default);
444440
--eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
445-
--eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-border-link-neutral);
441+
--eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-text-neutral-default);
446442
--eds-theme-color-modal-brand-header-background: #8984E8;
447443
--eds-theme-color-progress-bar-background: #E7E8EA;
448444
--eds-theme-color-progress-bar-border: #E7E8EA;

‎src/tokens-dist/json/variables-nested.json

+10-18
Original file line numberDiff line numberDiff line change
@@ -354,10 +354,6 @@
354354
"disabled": "#C0C4C8"
355355
},
356356
"border": {
357-
"link": {
358-
"neutral": "#21272D",
359-
"brand": "#5751D2"
360-
},
361357
"neutral": {
362358
"subtle": {
363359
"@": "#E7E8EA",
@@ -475,10 +471,6 @@
475471
"strong": "#21272D",
476472
"subtle": "#5D6369"
477473
},
478-
"link": {
479-
"neutral": "#21272D",
480-
"brand": "#5751D2"
481-
},
482474
"utility": {
483475
"success": "#007249",
484476
"warning": "#AC3400",
@@ -791,32 +783,32 @@
791783
"link": {
792784
"brand": {
793785
"text": {
794-
"@": "var(--eds-theme-color-text-link-neutral)",
795-
"hover": "var(--eds-theme-color-text-link-brand)",
786+
"@": "var(--eds-theme-color-text-neutral-strong)",
787+
"hover": "var(--eds-theme-color-text-brand-default)",
796788
"focus": "var(--eds-theme-color-text-neutral-default-inverse)"
797789
},
798790
"text-decoration": {
799-
"@": "var(--eds-theme-color-border-link-brand)",
800-
"hover": "var(--eds-theme-color-border-link-brand)",
791+
"@": "var(--eds-theme-color-text-brand-default)",
792+
"hover": "var(--eds-theme-color-text-brand-default)",
801793
"focus": "var(--eds-theme-color-text-neutral-default-inverse)"
802794
},
803795
"background": {
804-
"focus": "var(--eds-theme-color-border-link-brand)"
796+
"focus": "var(--eds-theme-color-text-brand-default)"
805797
}
806798
},
807799
"neutral": {
808800
"text": {
809-
"@": "var(--eds-theme-color-text-link-neutral)",
810-
"hover": "var(--eds-theme-color-text-link-brand)",
801+
"@": "var(--eds-theme-color-text-neutral-strong)",
802+
"hover": "var(--eds-theme-color-text-brand-default)",
811803
"focus": "var(--eds-theme-color-text-neutral-default-inverse)"
812804
},
813805
"text-decoration": {
814-
"@": "var(--eds-theme-color-border-link-neutral)",
815-
"hover": "var(--eds-theme-color-border-link-brand)",
806+
"@": "var(--eds-theme-color-text-neutral-strong)",
807+
"hover": "var(--eds-theme-color-text-brand-default)",
816808
"focus": "var(--eds-theme-color-text-neutral-default-inverse)"
817809
},
818810
"background": {
819-
"focus": "var(--eds-theme-color-border-link-neutral)"
811+
"focus": "var(--eds-theme-color-text-neutral-default)"
820812
}
821813
}
822814
},

‎src/tokens-dist/ts/colors.ts

+10-14
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0';
7070
export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52';
7171
export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4';
7272
export const EdsThemeColorBackgroundDisabled = '#C0C4C8';
73-
export const EdsThemeColorBorderLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
74-
export const EdsThemeColorBorderLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
7573
export const EdsThemeColorBorderNeutralSubtle = '#E7E8EA';
7674
export const EdsThemeColorBorderNeutralSubtleHover = '#C0C4C8';
7775
export const EdsThemeColorBorderNeutralDefault = '#C0C4C8';
@@ -126,8 +124,6 @@ export const EdsThemeColorTextNeutralDefault = '#383C43';
126124
export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF';
127125
export const EdsThemeColorTextNeutralStrong = '#21272D';
128126
export const EdsThemeColorTextNeutralSubtle = '#5D6369';
129-
export const EdsThemeColorTextLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead.
130-
export const EdsThemeColorTextLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead.
131127
export const EdsThemeColorTextUtilitySuccess = '#007249';
132128
export const EdsThemeColorTextUtilityWarning = '#AC3400';
133129
export const EdsThemeColorTextUtilityError = '#BD0044';
@@ -292,33 +288,33 @@ export const EdsThemeColorFormBackground = '#FFFFFF';
292288
export const EdsThemeColorFormBackgroundHover = '#F4F6F8';
293289
export const EdsThemeColorFormLabel = '#383C43';
294290
export const EdsThemeColorLinkBrandText =
295-
'var(--eds-theme-color-text-link-neutral)';
291+
'var(--eds-theme-color-text-neutral-strong)';
296292
export const EdsThemeColorLinkBrandTextHover =
297-
'var(--eds-theme-color-text-link-brand)';
293+
'var(--eds-theme-color-text-brand-default)';
298294
export const EdsThemeColorLinkBrandTextFocus =
299295
'var(--eds-theme-color-text-neutral-default-inverse)';
300296
export const EdsThemeColorLinkBrandTextDecoration =
301-
'var(--eds-theme-color-border-link-brand)';
297+
'var(--eds-theme-color-text-brand-default)';
302298
export const EdsThemeColorLinkBrandTextDecorationHover =
303-
'var(--eds-theme-color-border-link-brand)';
299+
'var(--eds-theme-color-text-brand-default)';
304300
export const EdsThemeColorLinkBrandTextDecorationFocus =
305301
'var(--eds-theme-color-text-neutral-default-inverse)';
306302
export const EdsThemeColorLinkBrandBackgroundFocus =
307-
'var(--eds-theme-color-border-link-brand)';
303+
'var(--eds-theme-color-text-brand-default)';
308304
export const EdsThemeColorLinkNeutralText =
309-
'var(--eds-theme-color-text-link-neutral)';
305+
'var(--eds-theme-color-text-neutral-strong)';
310306
export const EdsThemeColorLinkNeutralTextHover =
311-
'var(--eds-theme-color-text-link-brand)';
307+
'var(--eds-theme-color-text-brand-default)';
312308
export const EdsThemeColorLinkNeutralTextFocus =
313309
'var(--eds-theme-color-text-neutral-default-inverse)';
314310
export const EdsThemeColorLinkNeutralTextDecoration =
315-
'var(--eds-theme-color-border-link-neutral)';
311+
'var(--eds-theme-color-text-neutral-strong)';
316312
export const EdsThemeColorLinkNeutralTextDecorationHover =
317-
'var(--eds-theme-color-border-link-brand)';
313+
'var(--eds-theme-color-text-brand-default)';
318314
export const EdsThemeColorLinkNeutralTextDecorationFocus =
319315
'var(--eds-theme-color-text-neutral-default-inverse)';
320316
export const EdsThemeColorLinkNeutralBackgroundFocus =
321-
'var(--eds-theme-color-border-link-neutral)';
317+
'var(--eds-theme-color-text-neutral-default)';
322318
export const EdsThemeColorModalBrandHeaderBackground = '#8984E8';
323319
export const EdsThemeColorProgressBarBackground = '#E7E8EA';
324320
export const EdsThemeColorProgressBarBorder = '#E7E8EA';

0 commit comments

Comments
 (0)