Skip to content

Commit 9dea463

Browse files
booc0mtacobooc0mtaco
authored
feat!: update tier 1 and 2 typography tokens (#1969)
- add new tokens - headline-secondary-lg-* - headline-secondary-md-* - headline-secondary-sm-* - update existing tokens - preset-secondary-001-light - preset-secondary-001 - preset-secondary-001-bold - preset-secondary-mobile-002-light - preset-secondary-mobile-002 - preset-secondary-mobile-002-bold - preset-secondary-003-light - preset-secondary-003 - preset-secondary-003-bold - update mobile headline token mappings
1 parent 641e569 commit 9dea463

File tree

5 files changed

+112
-46
lines changed

5 files changed

+112
-46
lines changed

‎.storybook/data/tokens.json

+19-10
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
"eds-typography-preset-002": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary)",
1414
"eds-typography-preset-002-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
1515
"eds-typography-preset-002-bold": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)",
16-
"eds-typography-preset-002-mobile": "var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary)",
17-
"eds-typography-preset-003": "var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary)",
18-
"eds-typography-preset-003-light": "var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary)",
19-
"eds-typography-preset-003-bold": "var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary)",
16+
"eds-typography-preset-002-mobile": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary)",
17+
"eds-typography-preset-003": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-primary)",
18+
"eds-typography-preset-003-light": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-primary)",
19+
"eds-typography-preset-003-bold": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary)",
2020
"eds-typography-preset-003-mobile": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)",
2121
"eds-typography-preset-004": "var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary)",
2222
"eds-typography-preset-004-light": "var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary)",
@@ -45,12 +45,14 @@
4545
"eds-typography-preset-012": "var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
4646
"eds-typography-preset-012-light": "var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
4747
"eds-typography-preset-012-bold": "var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary)",
48-
"eds-typography-preset-secondary-001": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)",
49-
"eds-typography-preset-secondary-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)",
48+
"eds-typography-preset-secondary-001": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-secondary)",
49+
"eds-typography-preset-secondary-001-light": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-secondary)",
50+
"eds-typography-preset-secondary-001-bold": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-secondary)",
5051
"eds-typography-preset-secondary-002": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
5152
"eds-typography-preset-secondary-002-light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
52-
"eds-typography-preset-secondary-003": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)",
53-
"eds-typography-preset-secondary-003-light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)",
53+
"eds-typography-preset-secondary-003": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
54+
"eds-typography-preset-secondary-003-light": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
55+
"eds-typography-preset-secondary-003-bold": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
5456
"eds-typography-preset-secondary-004": "var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary)",
5557
"eds-typography-preset-secondary-004-light": "var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary)",
5658
"eds-typography-preset-secondary-005": "var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary)",
@@ -63,8 +65,9 @@
6365
"eds-typography-preset-secondary-008-light": "var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary)",
6466
"eds-typography-preset-secondary-mobile-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)",
6567
"eds-typography-preset-secondary-mobile-001": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)",
66-
"eds-typography-preset-secondary-mobile-002-light": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
67-
"eds-typography-preset-secondary-mobile-002": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)",
68+
"eds-typography-preset-secondary-mobile-002-light": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
69+
"eds-typography-preset-secondary-mobile-002": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
70+
"eds-typography-preset-secondary-mobile-002-bold": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary)",
6871
"eds-typography-preset-secondary-mobile-003-light": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)",
6972
"eds-typography-preset-secondary-mobile-003": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)",
7073
"eds-typography-preset-mobile-001-light": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary)",
@@ -90,10 +93,16 @@
9093
"eds-theme-typography-headline-sm-mobile": "var(--eds-typography-preset-mobile-003-light)",
9194
"eds-theme-typography-headline-secondary-lg": "var(--eds-typography-preset-secondary-001-light)",
9295
"eds-theme-typography-headline-secondary-lg-bold": "var(--eds-typography-preset-secondary-001)",
96+
"eds-theme-typography-headline-secondary-lg-bold-mobile": "var(--eds-typography-preset-secondary-mobile-001-bold)",
97+
"eds-theme-typography-headline-secondary-lg-mobile": "var(--eds-typography-preset-secondary-mobile-001-light)",
9398
"eds-theme-typography-headline-secondary-md": "var(--eds-typography-preset-secondary-002-light)",
9499
"eds-theme-typography-headline-secondary-md-bold": "var(--eds-typography-preset-secondary-002)",
100+
"eds-theme-typography-headline-secondary-md-bold-mobile": "var(--eds-typography-secondary-mobile-002-bold)",
101+
"eds-theme-typography-headline-secondary-md-mobile": "var(--eds-typography-preset-mobile-002-light)",
95102
"eds-theme-typography-headline-secondary-sm": "var(--eds-typography-preset-secondary-003-light)",
96103
"eds-theme-typography-headline-secondary-sm-bold": "var(--eds-typography-preset-secondary-003)",
104+
"eds-theme-typography-headline-secondary-sm-bold-mobile": "var(--eds-typography-preset-secondary-mobile-003-bold)",
105+
"eds-theme-typography-headline-secondary-sm-mobile": "var(--eds-typography-preset-secondary-mobile-003-light)",
97106
"eds-theme-typography-title-lg": "var(--eds-typography-preset-004)",
98107
"eds-theme-typography-title-lg-bold": "var(--eds-typography-preset-004-bold)",
99108
"eds-theme-typography-title-md": "var(--eds-typography-preset-004)",

‎src/design-tokens/tier-1-definitions/typography.json

+19-10
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@
5959
"value": "var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary)"
6060
},
6161
"mobile": {
62-
"value": "var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary)",
62+
"value": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary)",
6363
"comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
6464
}
6565
},
6666
"003": {
6767
"@": {
68-
"value": "var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary)"
68+
"value": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-primary)"
6969
},
7070
"light": {
71-
"value": "var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary)"
71+
"value": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-primary)"
7272
},
7373
"bold": {
74-
"value": "var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary)"
74+
"value": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary)"
7575
},
7676
"mobile": {
7777
"value": "var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary)",
@@ -186,10 +186,13 @@
186186
"secondary": {
187187
"001": {
188188
"@": {
189-
"value": "var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary)"
189+
"value": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-secondary)"
190190
},
191191
"light": {
192-
"value": "var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary)"
192+
"value": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-secondary)"
193+
},
194+
"bold": {
195+
"value": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-secondary)"
193196
}
194197
},
195198
"002": {
@@ -202,10 +205,13 @@
202205
},
203206
"003": {
204207
"@": {
205-
"value": "var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary)"
208+
"value": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
206209
},
207210
"light": {
208-
"value": "var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary)"
211+
"value": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
212+
},
213+
"bold": {
214+
"value": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
209215
}
210216
},
211217
"004": {
@@ -259,10 +265,13 @@
259265
},
260266
"002": {
261267
"light": {
262-
"value": "var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
268+
"value": "var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
263269
},
264270
"@": {
265-
"value": "var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary)"
271+
"value": "var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
272+
},
273+
"bold": {
274+
"value": "var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary)"
266275
}
267276
},
268277
"003": {

‎src/design-tokens/tier-2-usage/typography.json

+27-3
Original file line numberDiff line numberDiff line change
@@ -57,23 +57,47 @@
5757
"value": "var(--eds-typography-preset-secondary-001-light)"
5858
},
5959
"bold": {
60-
"value": "var(--eds-typography-preset-secondary-001)"
60+
"@": {
61+
"value": "var(--eds-typography-preset-secondary-001)"
62+
},
63+
"mobile": {
64+
"value": "var(--eds-typography-preset-secondary-mobile-001-bold)"
65+
}
66+
},
67+
"mobile": {
68+
"value": "var(--eds-typography-preset-secondary-mobile-001-light)"
6169
}
6270
},
6371
"md": {
6472
"@": {
6573
"value": "var(--eds-typography-preset-secondary-002-light)"
6674
},
6775
"bold": {
68-
"value": "var(--eds-typography-preset-secondary-002)"
76+
"@": {
77+
"value": "var(--eds-typography-preset-secondary-002)"
78+
},
79+
"mobile": {
80+
"value": "var(--eds-typography-secondary-mobile-002-bold)"
81+
}
82+
},
83+
"mobile": {
84+
"value": "var(--eds-typography-preset-mobile-002-light)"
6985
}
7086
},
7187
"sm": {
7288
"@": {
7389
"value": "var(--eds-typography-preset-secondary-003-light)"
7490
},
7591
"bold": {
76-
"value": "var(--eds-typography-preset-secondary-003)"
92+
"@": {
93+
"value": "var(--eds-typography-preset-secondary-003)"
94+
},
95+
"mobile": {
96+
"value": "var(--eds-typography-preset-secondary-mobile-003-bold)"
97+
}
98+
},
99+
"mobile": {
100+
"value": "var(--eds-typography-preset-secondary-mobile-003-light)"
77101
}
78102
}
79103
}

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

+19-10
Original file line numberDiff line numberDiff line change
@@ -314,10 +314,16 @@
314314
--eds-theme-typography-title-md: var(--eds-typography-preset-004);
315315
--eds-theme-typography-title-lg-bold: var(--eds-typography-preset-004-bold);
316316
--eds-theme-typography-title-lg: var(--eds-typography-preset-004);
317+
--eds-theme-typography-headline-secondary-sm-mobile: var(--eds-typography-preset-secondary-mobile-003-light);
318+
--eds-theme-typography-headline-secondary-sm-bold-mobile: var(--eds-typography-preset-secondary-mobile-003-bold);
317319
--eds-theme-typography-headline-secondary-sm-bold: var(--eds-typography-preset-secondary-003);
318320
--eds-theme-typography-headline-secondary-sm: var(--eds-typography-preset-secondary-003-light);
321+
--eds-theme-typography-headline-secondary-md-mobile: var(--eds-typography-preset-mobile-002-light);
322+
--eds-theme-typography-headline-secondary-md-bold-mobile: var(--eds-typography-secondary-mobile-002-bold);
319323
--eds-theme-typography-headline-secondary-md-bold: var(--eds-typography-preset-secondary-002);
320324
--eds-theme-typography-headline-secondary-md: var(--eds-typography-preset-secondary-002-light);
325+
--eds-theme-typography-headline-secondary-lg-mobile: var(--eds-typography-preset-secondary-mobile-001-light);
326+
--eds-theme-typography-headline-secondary-lg-bold-mobile: var(--eds-typography-preset-secondary-mobile-001-bold);
321327
--eds-theme-typography-headline-secondary-lg-bold: var(--eds-typography-preset-secondary-001);
322328
--eds-theme-typography-headline-secondary-lg: var(--eds-typography-preset-secondary-001-light);
323329
--eds-theme-typography-headline-sm-mobile: var(--eds-typography-preset-mobile-003-light);
@@ -343,8 +349,9 @@
343349
--eds-typography-preset-mobile-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary);
344350
--eds-typography-preset-secondary-mobile-003: var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary);
345351
--eds-typography-preset-secondary-mobile-003-light: var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary);
346-
--eds-typography-preset-secondary-mobile-002: var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary);
347-
--eds-typography-preset-secondary-mobile-002-light: var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary);
352+
--eds-typography-preset-secondary-mobile-002-bold: var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary);
353+
--eds-typography-preset-secondary-mobile-002: var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary);
354+
--eds-typography-preset-secondary-mobile-002-light: var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary);
348355
--eds-typography-preset-secondary-mobile-001: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary);
349356
--eds-typography-preset-secondary-mobile-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary);
350357
--eds-typography-preset-secondary-008-light: var(--eds-font-weight-light) 0.75rem/1.33333333 var(--eds-font-family-secondary);
@@ -357,12 +364,14 @@
357364
--eds-typography-preset-secondary-005: var(--eds-font-weight-medium) 0.875rem/1.57142857 var(--eds-font-family-secondary);
358365
--eds-typography-preset-secondary-004-light: var(--eds-font-weight-light) 1rem/1.5 var(--eds-font-family-secondary);
359366
--eds-typography-preset-secondary-004: var(--eds-font-weight-medium) 1rem/1.5 var(--eds-font-family-secondary);
360-
--eds-typography-preset-secondary-003-light: var(--eds-font-weight-light) 1.25rem/1.4 var(--eds-font-family-secondary);
361-
--eds-typography-preset-secondary-003: var(--eds-font-weight-medium) 1.25rem/1.4 var(--eds-font-family-secondary);
367+
--eds-typography-preset-secondary-003-bold: var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-secondary);
368+
--eds-typography-preset-secondary-003-light: var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-secondary);
369+
--eds-typography-preset-secondary-003: var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-secondary);
362370
--eds-typography-preset-secondary-002-light: var(--eds-font-weight-light) 1.75rem/1.28571429 var(--eds-font-family-secondary);
363371
--eds-typography-preset-secondary-002: var(--eds-font-weight-medium) 1.75rem/1.28571429 var(--eds-font-family-secondary);
364-
--eds-typography-preset-secondary-001-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-secondary);
365-
--eds-typography-preset-secondary-001: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-secondary);
372+
--eds-typography-preset-secondary-001-bold: var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-secondary);
373+
--eds-typography-preset-secondary-001-light: var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-secondary);
374+
--eds-typography-preset-secondary-001: var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-secondary);
366375
--eds-typography-preset-012-bold: var(--eds-font-weight-bold) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
367376
--eds-typography-preset-012-light: var(--eds-font-weight-light) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
368377
--eds-typography-preset-012: var(--eds-font-weight-medium) 0.6875rem/1.272727272 var(--eds-font-family-primary); /* For 012, add a text-transform treatment for uppercase (font-variant is limited to CSS 2.1 values) */
@@ -391,10 +400,10 @@
391400
--eds-typography-preset-004-light: var(--eds-font-weight-light) 1.125rem/1.55555556 var(--eds-font-family-primary);
392401
--eds-typography-preset-004: var(--eds-font-weight-medium) 1.125rem/1.55555556 var(--eds-font-family-primary);
393402
--eds-typography-preset-003-mobile: var(--eds-font-weight-bold) 1.25rem/1.4 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
394-
--eds-typography-preset-003-bold: var(--eds-font-weight-bold) 1.375rem/1.45454545 var(--eds-font-family-primary);
395-
--eds-typography-preset-003-light: var(--eds-font-weight-light) 1.375rem/1.45454545 var(--eds-font-family-primary);
396-
--eds-typography-preset-003: var(--eds-font-weight-medium) 1.375rem/1.45454545 var(--eds-font-family-primary);
397-
--eds-typography-preset-002-mobile: var(--eds-font-weight-bold) 1.75rem/1.2857 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
403+
--eds-typography-preset-003-bold: var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary);
404+
--eds-typography-preset-003-light: var(--eds-font-weight-light) 1.5rem/1.333333333 var(--eds-font-family-primary);
405+
--eds-typography-preset-003: var(--eds-font-weight-medium) 1.5rem/1.333333333 var(--eds-font-family-primary);
406+
--eds-typography-preset-002-mobile: var(--eds-font-weight-bold) 1.5rem/1.333333333 var(--eds-font-family-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
398407
--eds-typography-preset-002-bold: var(--eds-font-weight-bold) 2rem/1.25 var(--eds-font-family-primary);
399408
--eds-typography-preset-002-light: var(--eds-font-weight-light) 2rem/1.25 var(--eds-font-family-primary);
400409
--eds-typography-preset-002: var(--eds-font-weight-medium) 2rem/1.25 var(--eds-font-family-primary);

0 commit comments

Comments
 (0)