@hpe-web/design-tokens 1.3.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +33 -6
  2. package/dist/css/locales/de.tokens.css +42 -21
  3. package/dist/css/locales/es.tokens.css +42 -21
  4. package/dist/css/locales/fr.tokens.css +42 -21
  5. package/dist/css/locales/it.tokens.css +42 -21
  6. package/dist/css/locales/ja.tokens.css +41 -19
  7. package/dist/css/locales/ko.tokens.css +41 -19
  8. package/dist/css/locales/zh.tokens.css +3 -0
  9. package/dist/css/tokens.css +128 -36
  10. package/dist/css/tokens.dark.css +195 -2
  11. package/dist/css/tokens.md-lg.css +83 -29
  12. package/dist/css/tokens.xl.css +84 -30
  13. package/package.json +25 -3
  14. package/src/component/{button.json → component.json} +244 -6
  15. package/src/hpe.resolver.json +2 -2
  16. package/src/primitive/primitives.json +1 -1
  17. package/src/semantic/color.dark.json +48 -6
  18. package/src/semantic/color.light.json +48 -6
  19. package/src/semantic/dimension.md-lg.json +436 -49
  20. package/src/semantic/dimension.xl.json +439 -52
  21. package/src/semantic/dimension.xs-sm.json +435 -48
  22. package/src/snapshots/component/5fc94136d48c018dba9a72a28d52a9ff9f7b19b607453ecfddef7467ca039c9b.json +5580 -0
  23. package/src/snapshots/current.json +8 -0
  24. package/src/snapshots/primitive/7e878b4264ed525786e7a59d0e578dc1bcb9aefb149679741793c283c7e7918e.json +7234 -0
  25. package/src/snapshots/semantic/afc82e5feb03f3c4d976dff4bcd4cedd1a5c674198d7ae3b4b4164e8694e3fc6.json +9576 -0
package/README.md CHANGED
@@ -1,14 +1,20 @@
1
1
  # @hpe-web/design-tokens
2
2
 
3
- HPE Design System design tokens — CSS custom properties, DTCG source, locale overrides, and utilities.
3
+ HPE Design System design tokens — CSS custom properties, DTCG source, locale overrides, and Style Dictionary transforms. Three-tier token architecture (primitive → semantic → component) preserved end-to-end as CSS `var()` chains.
4
4
 
5
- ## What's new in v1.2.2
5
+ ## What's new
6
6
 
7
- **CSS consumers: no changes required.**
7
+ ### 2.0.0 — first release off the new Figma-REST pipeline
8
8
 
9
- - `line-height` now outputs correct unitless ratios for all heading and text tokens — was outputting raw px values due to a group ID fragmentation bug in the Supernova exporter
10
- - `letter-spacing` now outputs correct `em` values (e.g., `h1.default: -0.02em`) — same root cause
11
- - Deprecated token suppression working cleanly — no unresolved reference errors during builds
9
+ Token values now track current Figma directly (Supernova retired). Font sizes, line-heights, spacing, and non-heading vars from 1.3.1 are unchanged — but there are **breaking changes**, so review before upgrading:
10
+
11
+ - **⚠️ Breaking — heading `.default` removed.** All `--hpe-web-heading-h{1..6}-default-*` properties are gone; Figma split heading styles into light/medium. Migrate `--hpe-web-heading-h2-default-font-size` → `…-h2-light-font-size` (or `-medium-`).
12
+ - **All component families now ship.** `card`, `marquee`, `logo`, `live-player`, `content-block`, `global-nav` join `button` (23 new), e.g. `--hpe-web-card-layout-gap-x`, `--hpe-web-marquee-gap-y`.
13
+ - **Full dark-theme coverage** — `tokens.dark.css` grows 67 → 258 vars (component states, backgrounds, gradients now resolve in dark mode).
14
+ - **A few value updates** from current Figma: `critical` red and `primary-strong` green darkened a step; `button-link` rest/hover color states + hover weight refined; `radius-full` now aliases a static.
15
+ - **Token names lose spaces** (`content block` → `content-block`), and the DTCG **source path** `src/component/button.json` → `src/component/component.json`. CSS consumers are unaffected by both.
16
+
17
+ Font-size (rem), line-height (unitless ratio), letter-spacing (em), and spacing are emitted exactly as in 1.3.1.
12
18
 
13
19
  [Full changelog →](https://github.com/HPE-EMU/design-system/blob/main/packages/tokens/CHANGELOG.md)
14
20
 
@@ -72,6 +78,27 @@ No breakpoint logic needed in component CSS. Token values shift automatically as
72
78
  <html lang="de">…</html>
73
79
  ```
74
80
 
81
+ ## Token audit workflow (Figma parity + 1:1 mapping)
82
+
83
+ When auditing component styles against Figma, use this workflow to guarantee Light/Dark parity and one canonical mapping per variable.
84
+
85
+ 1. Start from Figma variables for both Light and Dark modes.
86
+ 2. Resolve each variable to DTCG source in `src/primitive`, `src/semantic`, or `src/component`.
87
+ 3. Validate the generated CSS property in `docs/tokens/token-mapping.doc.md`.
88
+ 4. Enforce canonical 1:1 mapping: one Figma variable maps to one CSS custom property.
89
+ 5. Enforce mode parity for colors: semantic aliases must exist in both `color.light.json` and `color.dark.json`.
90
+ 6. Record unresolved gaps in `docs/tokens/missing-tokens.doc.md` with:
91
+ - Light value
92
+ - Dark value
93
+ - Canonical target CSS property
94
+ - Mode coverage status (`Light only`, `Dark only`, `Light+Dark missing`)
95
+
96
+ Audit Definition of Done:
97
+ - Every Figma variable used by a component has exactly one canonical CSS property.
98
+ - Every color variable has Light and Dark semantic coverage.
99
+ - Component CSS uses canonical token variables only (no raw fallback values for tokenized properties).
100
+ - Missing token backlog has no unresolved rows for the audited component.
101
+
75
102
  ### Static metadata
76
103
 
77
104
  All three metadata files live in `static/`:
package/dist/css/locales/de.tokens.css CHANGED
@@ -7,16 +7,23 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.25rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.25rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.25rem;
10
- --hpe-web-heading-h1-default-font-size: 1.875rem;
10
+ --hpe-web-heading-h1-light-font-size: 1.875rem;
11
+ --hpe-web-heading-h1-medium-font-size: 1.875rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 2.8125rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 2.8125rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 2.8125rem;
14
- --hpe-web-heading-h1-large-default-font-size: 1.875rem;
15
- --hpe-web-heading-h2-default-font-size: 1.5rem;
16
- --hpe-web-heading-h3-default-font-size: 1.25rem;
17
- --hpe-web-heading-h4-default-font-size: 0.9375rem;
18
- --hpe-web-heading-h5-default-font-size: 0.75rem;
19
- --hpe-web-heading-h6-default-font-size: 0.6875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 1.875rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 1.875rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.5rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.5rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.25rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.25rem;
21
+ --hpe-web-heading-h4-light-font-size: 0.9375rem;
22
+ --hpe-web-heading-h4-medium-font-size: 0.9375rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.75rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.75rem;
25
+ --hpe-web-heading-h6-light-font-size: 0.6875rem;
26
+ --hpe-web-heading-h6-medium-font-size: 0.6875rem;
20
27
  }
21
28
 
22
29
  @media (min-width: 992px) {
@@ -24,16 +31,23 @@
24
31
  --hpe-web-heading-h1-condensed-bold-font-size: 3.75rem;
25
32
  --hpe-web-heading-h1-condensed-light-font-size: 3.75rem;
26
33
  --hpe-web-heading-h1-condensed-medium-font-size: 3.75rem;
27
- --hpe-web-heading-h1-default-font-size: 2.625rem;
34
+ --hpe-web-heading-h1-light-font-size: 2.625rem;
35
+ --hpe-web-heading-h1-medium-font-size: 2.625rem;
28
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.5rem;
29
37
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.5rem;
30
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.5rem;
31
- --hpe-web-heading-h1-large-default-font-size: 3.1875rem;
32
- --hpe-web-heading-h2-default-font-size: 1.875rem;
33
- --hpe-web-heading-h3-default-font-size: 1.5rem;
34
- --hpe-web-heading-h4-default-font-size: 1.125rem;
35
- --hpe-web-heading-h5-default-font-size: 0.875rem;
36
- --hpe-web-heading-h6-default-font-size: 0.75rem;
39
+ --hpe-web-heading-h1-large-light-font-size: 3.1875rem;
40
+ --hpe-web-heading-h1-large-medium-font-size: 3.1875rem;
41
+ --hpe-web-heading-h2-light-font-size: 1.875rem;
42
+ --hpe-web-heading-h2-medium-font-size: 1.875rem;
43
+ --hpe-web-heading-h3-light-font-size: 1.5rem;
44
+ --hpe-web-heading-h3-medium-font-size: 1.5rem;
45
+ --hpe-web-heading-h4-light-font-size: 1.125rem;
46
+ --hpe-web-heading-h4-medium-font-size: 1.125rem;
47
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
48
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
49
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
50
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
37
51
  }
38
52
  }
39
53
 
@@ -42,15 +56,22 @@
42
56
  --hpe-web-heading-h1-condensed-bold-font-size: 4.5rem;
43
57
  --hpe-web-heading-h1-condensed-light-font-size: 4.5rem;
44
58
  --hpe-web-heading-h1-condensed-medium-font-size: 4.5rem;
45
- --hpe-web-heading-h1-default-font-size: 3.1875rem;
59
+ --hpe-web-heading-h1-light-font-size: 3.1875rem;
60
+ --hpe-web-heading-h1-medium-font-size: 3.1875rem;
46
61
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.25rem;
47
62
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.25rem;
48
63
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.25rem;
49
- --hpe-web-heading-h1-large-default-font-size: 3.9375rem;
50
- --hpe-web-heading-h2-default-font-size: 2.4375rem;
51
- --hpe-web-heading-h3-default-font-size: 1.6875rem;
52
- --hpe-web-heading-h4-default-font-size: 1.3125rem;
53
- --hpe-web-heading-h5-default-font-size: 0.9375rem;
54
- --hpe-web-heading-h6-default-font-size: 0.75rem;
64
+ --hpe-web-heading-h1-large-light-font-size: 3.9375rem;
65
+ --hpe-web-heading-h1-large-medium-font-size: 3.9375rem;
66
+ --hpe-web-heading-h2-light-font-size: 2.4375rem;
67
+ --hpe-web-heading-h2-medium-font-size: 2.4375rem;
68
+ --hpe-web-heading-h3-light-font-size: 1.6875rem;
69
+ --hpe-web-heading-h3-medium-font-size: 1.6875rem;
70
+ --hpe-web-heading-h4-light-font-size: 1.3125rem;
71
+ --hpe-web-heading-h4-medium-font-size: 1.3125rem;
72
+ --hpe-web-heading-h5-light-font-size: 0.9375rem;
73
+ --hpe-web-heading-h5-medium-font-size: 0.9375rem;
74
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
75
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
55
76
  }
56
77
  }
package/dist/css/locales/es.tokens.css CHANGED
@@ -7,16 +7,23 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.25rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.25rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.25rem;
10
- --hpe-web-heading-h1-default-font-size: 1.875rem;
10
+ --hpe-web-heading-h1-light-font-size: 1.875rem;
11
+ --hpe-web-heading-h1-medium-font-size: 1.875rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 2.8125rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 2.8125rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 2.8125rem;
14
- --hpe-web-heading-h1-large-default-font-size: 1.875rem;
15
- --hpe-web-heading-h2-default-font-size: 1.5rem;
16
- --hpe-web-heading-h3-default-font-size: 1.25rem;
17
- --hpe-web-heading-h4-default-font-size: 0.9375rem;
18
- --hpe-web-heading-h5-default-font-size: 0.75rem;
19
- --hpe-web-heading-h6-default-font-size: 0.6875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 1.875rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 1.875rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.5rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.5rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.25rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.25rem;
21
+ --hpe-web-heading-h4-light-font-size: 0.9375rem;
22
+ --hpe-web-heading-h4-medium-font-size: 0.9375rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.75rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.75rem;
25
+ --hpe-web-heading-h6-light-font-size: 0.6875rem;
26
+ --hpe-web-heading-h6-medium-font-size: 0.6875rem;
20
27
  }
21
28
 
22
29
  @media (min-width: 992px) {
@@ -24,16 +31,23 @@
24
31
  --hpe-web-heading-h1-condensed-bold-font-size: 3.75rem;
25
32
  --hpe-web-heading-h1-condensed-light-font-size: 3.75rem;
26
33
  --hpe-web-heading-h1-condensed-medium-font-size: 3.75rem;
27
- --hpe-web-heading-h1-default-font-size: 2.625rem;
34
+ --hpe-web-heading-h1-light-font-size: 2.625rem;
35
+ --hpe-web-heading-h1-medium-font-size: 2.625rem;
28
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.5rem;
29
37
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.5rem;
30
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.5rem;
31
- --hpe-web-heading-h1-large-default-font-size: 3.1875rem;
32
- --hpe-web-heading-h2-default-font-size: 1.875rem;
33
- --hpe-web-heading-h3-default-font-size: 1.5rem;
34
- --hpe-web-heading-h4-default-font-size: 1.125rem;
35
- --hpe-web-heading-h5-default-font-size: 0.875rem;
36
- --hpe-web-heading-h6-default-font-size: 0.75rem;
39
+ --hpe-web-heading-h1-large-light-font-size: 3.1875rem;
40
+ --hpe-web-heading-h1-large-medium-font-size: 3.1875rem;
41
+ --hpe-web-heading-h2-light-font-size: 1.875rem;
42
+ --hpe-web-heading-h2-medium-font-size: 1.875rem;
43
+ --hpe-web-heading-h3-light-font-size: 1.5rem;
44
+ --hpe-web-heading-h3-medium-font-size: 1.5rem;
45
+ --hpe-web-heading-h4-light-font-size: 1.125rem;
46
+ --hpe-web-heading-h4-medium-font-size: 1.125rem;
47
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
48
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
49
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
50
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
37
51
  }
38
52
  }
39
53
 
@@ -42,15 +56,22 @@
42
56
  --hpe-web-heading-h1-condensed-bold-font-size: 4.5rem;
43
57
  --hpe-web-heading-h1-condensed-light-font-size: 4.5rem;
44
58
  --hpe-web-heading-h1-condensed-medium-font-size: 4.5rem;
45
- --hpe-web-heading-h1-default-font-size: 3.1875rem;
59
+ --hpe-web-heading-h1-light-font-size: 3.1875rem;
60
+ --hpe-web-heading-h1-medium-font-size: 3.1875rem;
46
61
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.25rem;
47
62
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.25rem;
48
63
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.25rem;
49
- --hpe-web-heading-h1-large-default-font-size: 3.9375rem;
50
- --hpe-web-heading-h2-default-font-size: 2.4375rem;
51
- --hpe-web-heading-h3-default-font-size: 1.6875rem;
52
- --hpe-web-heading-h4-default-font-size: 1.3125rem;
53
- --hpe-web-heading-h5-default-font-size: 0.9375rem;
54
- --hpe-web-heading-h6-default-font-size: 0.75rem;
64
+ --hpe-web-heading-h1-large-light-font-size: 3.9375rem;
65
+ --hpe-web-heading-h1-large-medium-font-size: 3.9375rem;
66
+ --hpe-web-heading-h2-light-font-size: 2.4375rem;
67
+ --hpe-web-heading-h2-medium-font-size: 2.4375rem;
68
+ --hpe-web-heading-h3-light-font-size: 1.6875rem;
69
+ --hpe-web-heading-h3-medium-font-size: 1.6875rem;
70
+ --hpe-web-heading-h4-light-font-size: 1.3125rem;
71
+ --hpe-web-heading-h4-medium-font-size: 1.3125rem;
72
+ --hpe-web-heading-h5-light-font-size: 0.9375rem;
73
+ --hpe-web-heading-h5-medium-font-size: 0.9375rem;
74
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
75
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
55
76
  }
56
77
  }
package/dist/css/locales/fr.tokens.css CHANGED
@@ -7,16 +7,23 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.25rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.25rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.25rem;
10
- --hpe-web-heading-h1-default-font-size: 1.875rem;
10
+ --hpe-web-heading-h1-light-font-size: 1.875rem;
11
+ --hpe-web-heading-h1-medium-font-size: 1.875rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 2.8125rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 2.8125rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 2.8125rem;
14
- --hpe-web-heading-h1-large-default-font-size: 1.875rem;
15
- --hpe-web-heading-h2-default-font-size: 1.5rem;
16
- --hpe-web-heading-h3-default-font-size: 1.25rem;
17
- --hpe-web-heading-h4-default-font-size: 0.9375rem;
18
- --hpe-web-heading-h5-default-font-size: 0.75rem;
19
- --hpe-web-heading-h6-default-font-size: 0.6875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 1.875rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 1.875rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.5rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.5rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.25rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.25rem;
21
+ --hpe-web-heading-h4-light-font-size: 0.9375rem;
22
+ --hpe-web-heading-h4-medium-font-size: 0.9375rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.75rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.75rem;
25
+ --hpe-web-heading-h6-light-font-size: 0.6875rem;
26
+ --hpe-web-heading-h6-medium-font-size: 0.6875rem;
20
27
  }
21
28
 
22
29
  @media (min-width: 992px) {
@@ -24,16 +31,23 @@
24
31
  --hpe-web-heading-h1-condensed-bold-font-size: 3.75rem;
25
32
  --hpe-web-heading-h1-condensed-light-font-size: 3.75rem;
26
33
  --hpe-web-heading-h1-condensed-medium-font-size: 3.75rem;
27
- --hpe-web-heading-h1-default-font-size: 2.625rem;
34
+ --hpe-web-heading-h1-light-font-size: 2.625rem;
35
+ --hpe-web-heading-h1-medium-font-size: 2.625rem;
28
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.5rem;
29
37
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.5rem;
30
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.5rem;
31
- --hpe-web-heading-h1-large-default-font-size: 3.1875rem;
32
- --hpe-web-heading-h2-default-font-size: 1.875rem;
33
- --hpe-web-heading-h3-default-font-size: 1.5rem;
34
- --hpe-web-heading-h4-default-font-size: 1.125rem;
35
- --hpe-web-heading-h5-default-font-size: 0.875rem;
36
- --hpe-web-heading-h6-default-font-size: 0.75rem;
39
+ --hpe-web-heading-h1-large-light-font-size: 3.1875rem;
40
+ --hpe-web-heading-h1-large-medium-font-size: 3.1875rem;
41
+ --hpe-web-heading-h2-light-font-size: 1.875rem;
42
+ --hpe-web-heading-h2-medium-font-size: 1.875rem;
43
+ --hpe-web-heading-h3-light-font-size: 1.5rem;
44
+ --hpe-web-heading-h3-medium-font-size: 1.5rem;
45
+ --hpe-web-heading-h4-light-font-size: 1.125rem;
46
+ --hpe-web-heading-h4-medium-font-size: 1.125rem;
47
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
48
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
49
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
50
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
37
51
  }
38
52
  }
39
53
 
@@ -42,15 +56,22 @@
42
56
  --hpe-web-heading-h1-condensed-bold-font-size: 4.5rem;
43
57
  --hpe-web-heading-h1-condensed-light-font-size: 4.5rem;
44
58
  --hpe-web-heading-h1-condensed-medium-font-size: 4.5rem;
45
- --hpe-web-heading-h1-default-font-size: 3.1875rem;
59
+ --hpe-web-heading-h1-light-font-size: 3.1875rem;
60
+ --hpe-web-heading-h1-medium-font-size: 3.1875rem;
46
61
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.25rem;
47
62
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.25rem;
48
63
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.25rem;
49
- --hpe-web-heading-h1-large-default-font-size: 3.9375rem;
50
- --hpe-web-heading-h2-default-font-size: 2.4375rem;
51
- --hpe-web-heading-h3-default-font-size: 1.6875rem;
52
- --hpe-web-heading-h4-default-font-size: 1.3125rem;
53
- --hpe-web-heading-h5-default-font-size: 0.9375rem;
54
- --hpe-web-heading-h6-default-font-size: 0.75rem;
64
+ --hpe-web-heading-h1-large-light-font-size: 3.9375rem;
65
+ --hpe-web-heading-h1-large-medium-font-size: 3.9375rem;
66
+ --hpe-web-heading-h2-light-font-size: 2.4375rem;
67
+ --hpe-web-heading-h2-medium-font-size: 2.4375rem;
68
+ --hpe-web-heading-h3-light-font-size: 1.6875rem;
69
+ --hpe-web-heading-h3-medium-font-size: 1.6875rem;
70
+ --hpe-web-heading-h4-light-font-size: 1.3125rem;
71
+ --hpe-web-heading-h4-medium-font-size: 1.3125rem;
72
+ --hpe-web-heading-h5-light-font-size: 0.9375rem;
73
+ --hpe-web-heading-h5-medium-font-size: 0.9375rem;
74
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
75
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
55
76
  }
56
77
  }
package/dist/css/locales/it.tokens.css CHANGED
@@ -7,16 +7,23 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.25rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.25rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.25rem;
10
- --hpe-web-heading-h1-default-font-size: 1.875rem;
10
+ --hpe-web-heading-h1-light-font-size: 1.875rem;
11
+ --hpe-web-heading-h1-medium-font-size: 1.875rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 2.8125rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 2.8125rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 2.8125rem;
14
- --hpe-web-heading-h1-large-default-font-size: 1.875rem;
15
- --hpe-web-heading-h2-default-font-size: 1.5rem;
16
- --hpe-web-heading-h3-default-font-size: 1.25rem;
17
- --hpe-web-heading-h4-default-font-size: 0.9375rem;
18
- --hpe-web-heading-h5-default-font-size: 0.75rem;
19
- --hpe-web-heading-h6-default-font-size: 0.6875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 1.875rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 1.875rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.5rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.5rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.25rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.25rem;
21
+ --hpe-web-heading-h4-light-font-size: 0.9375rem;
22
+ --hpe-web-heading-h4-medium-font-size: 0.9375rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.75rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.75rem;
25
+ --hpe-web-heading-h6-light-font-size: 0.6875rem;
26
+ --hpe-web-heading-h6-medium-font-size: 0.6875rem;
20
27
  }
21
28
 
22
29
  @media (min-width: 992px) {
@@ -24,16 +31,23 @@
24
31
  --hpe-web-heading-h1-condensed-bold-font-size: 3.75rem;
25
32
  --hpe-web-heading-h1-condensed-light-font-size: 3.75rem;
26
33
  --hpe-web-heading-h1-condensed-medium-font-size: 3.75rem;
27
- --hpe-web-heading-h1-default-font-size: 2.625rem;
34
+ --hpe-web-heading-h1-light-font-size: 2.625rem;
35
+ --hpe-web-heading-h1-medium-font-size: 2.625rem;
28
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.5rem;
29
37
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.5rem;
30
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.5rem;
31
- --hpe-web-heading-h1-large-default-font-size: 3.1875rem;
32
- --hpe-web-heading-h2-default-font-size: 1.875rem;
33
- --hpe-web-heading-h3-default-font-size: 1.5rem;
34
- --hpe-web-heading-h4-default-font-size: 1.125rem;
35
- --hpe-web-heading-h5-default-font-size: 0.875rem;
36
- --hpe-web-heading-h6-default-font-size: 0.75rem;
39
+ --hpe-web-heading-h1-large-light-font-size: 3.1875rem;
40
+ --hpe-web-heading-h1-large-medium-font-size: 3.1875rem;
41
+ --hpe-web-heading-h2-light-font-size: 1.875rem;
42
+ --hpe-web-heading-h2-medium-font-size: 1.875rem;
43
+ --hpe-web-heading-h3-light-font-size: 1.5rem;
44
+ --hpe-web-heading-h3-medium-font-size: 1.5rem;
45
+ --hpe-web-heading-h4-light-font-size: 1.125rem;
46
+ --hpe-web-heading-h4-medium-font-size: 1.125rem;
47
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
48
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
49
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
50
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
37
51
  }
38
52
  }
39
53
 
@@ -42,15 +56,22 @@
42
56
  --hpe-web-heading-h1-condensed-bold-font-size: 4.5rem;
43
57
  --hpe-web-heading-h1-condensed-light-font-size: 4.5rem;
44
58
  --hpe-web-heading-h1-condensed-medium-font-size: 4.5rem;
45
- --hpe-web-heading-h1-default-font-size: 3.1875rem;
59
+ --hpe-web-heading-h1-light-font-size: 3.1875rem;
60
+ --hpe-web-heading-h1-medium-font-size: 3.1875rem;
46
61
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.25rem;
47
62
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.25rem;
48
63
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.25rem;
49
- --hpe-web-heading-h1-large-default-font-size: 3.9375rem;
50
- --hpe-web-heading-h2-default-font-size: 2.4375rem;
51
- --hpe-web-heading-h3-default-font-size: 1.6875rem;
52
- --hpe-web-heading-h4-default-font-size: 1.3125rem;
53
- --hpe-web-heading-h5-default-font-size: 0.9375rem;
54
- --hpe-web-heading-h6-default-font-size: 0.75rem;
64
+ --hpe-web-heading-h1-large-light-font-size: 3.9375rem;
65
+ --hpe-web-heading-h1-large-medium-font-size: 3.9375rem;
66
+ --hpe-web-heading-h2-light-font-size: 2.4375rem;
67
+ --hpe-web-heading-h2-medium-font-size: 2.4375rem;
68
+ --hpe-web-heading-h3-light-font-size: 1.6875rem;
69
+ --hpe-web-heading-h3-medium-font-size: 1.6875rem;
70
+ --hpe-web-heading-h4-light-font-size: 1.3125rem;
71
+ --hpe-web-heading-h4-medium-font-size: 1.3125rem;
72
+ --hpe-web-heading-h5-light-font-size: 0.9375rem;
73
+ --hpe-web-heading-h5-medium-font-size: 0.9375rem;
74
+ --hpe-web-heading-h6-light-font-size: 0.75rem;
75
+ --hpe-web-heading-h6-medium-font-size: 0.75rem;
55
76
  }
56
77
  }
package/dist/css/locales/ja.tokens.css CHANGED
@@ -7,15 +7,21 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.375rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.375rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.375rem;
10
- --hpe-web-heading-h1-default-font-size: 2rem;
10
+ --hpe-web-heading-h1-light-font-size: 2rem;
11
+ --hpe-web-heading-h1-medium-font-size: 2rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 3rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 3rem;
14
- --hpe-web-heading-h1-large-default-font-size: 2rem;
15
- --hpe-web-heading-h2-default-font-size: 1.625rem;
16
- --hpe-web-heading-h3-default-font-size: 1.3125rem;
17
- --hpe-web-heading-h4-default-font-size: 1rem;
18
- --hpe-web-heading-h5-default-font-size: 0.875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 2rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 2rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.625rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.625rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.3125rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.3125rem;
21
+ --hpe-web-heading-h4-light-font-size: 1rem;
22
+ --hpe-web-heading-h4-medium-font-size: 1rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
19
25
  --hpe-web-paragraph-body-copy-font-size: 0.875rem;
20
26
  --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
21
27
  --hpe-web-paragraph-large-body-copy-font-size: 1rem;
@@ -27,6 +33,9 @@
27
33
  --hpe-web-base-font-family-noto-sans-kr: "Noto Sans JP", sans-serif;
28
34
  --hpe-web-base-font-family-noto-sans-tc: "Noto Sans JP", sans-serif;
29
35
  --hpe-web-base-font-family-primary: "Noto Sans JP", sans-serif;
36
+ --hpe-web-heading-font: "Noto Sans JP", sans-serif;
37
+ --hpe-web-paragraph-font: "Noto Sans JP", sans-serif;
38
+ --hpe-web-quote-font: "Noto Sans JP", sans-serif;
30
39
  }
31
40
 
32
41
  @media (min-width: 992px) {
@@ -34,15 +43,21 @@
34
43
  --hpe-web-heading-h1-condensed-bold-font-size: 4rem;
35
44
  --hpe-web-heading-h1-condensed-light-font-size: 4rem;
36
45
  --hpe-web-heading-h1-condensed-medium-font-size: 4rem;
37
- --hpe-web-heading-h1-default-font-size: 2.8125rem;
46
+ --hpe-web-heading-h1-light-font-size: 2.8125rem;
47
+ --hpe-web-heading-h1-medium-font-size: 2.8125rem;
38
48
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.8125rem;
39
49
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.8125rem;
40
50
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.8125rem;
41
- --hpe-web-heading-h1-large-default-font-size: 3.375rem;
42
- --hpe-web-heading-h2-default-font-size: 2rem;
43
- --hpe-web-heading-h3-default-font-size: 1.625rem;
44
- --hpe-web-heading-h4-default-font-size: 1.1875rem;
45
- --hpe-web-heading-h6-default-font-size: 0.875rem;
51
+ --hpe-web-heading-h1-large-light-font-size: 3.375rem;
52
+ --hpe-web-heading-h1-large-medium-font-size: 3.375rem;
53
+ --hpe-web-heading-h2-light-font-size: 2rem;
54
+ --hpe-web-heading-h2-medium-font-size: 2rem;
55
+ --hpe-web-heading-h3-light-font-size: 1.625rem;
56
+ --hpe-web-heading-h3-medium-font-size: 1.625rem;
57
+ --hpe-web-heading-h4-light-font-size: 1.1875rem;
58
+ --hpe-web-heading-h4-medium-font-size: 1.1875rem;
59
+ --hpe-web-heading-h6-light-font-size: 0.875rem;
60
+ --hpe-web-heading-h6-medium-font-size: 0.875rem;
46
61
  --hpe-web-paragraph-large-body-copy-font-size: 1.1875rem;
47
62
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
48
63
  --hpe-web-quote-large-font-size: 2.375rem;
@@ -56,16 +71,23 @@
56
71
  --hpe-web-heading-h1-condensed-bold-font-size: 4.8125rem;
57
72
  --hpe-web-heading-h1-condensed-light-font-size: 4.8125rem;
58
73
  --hpe-web-heading-h1-condensed-medium-font-size: 4.8125rem;
59
- --hpe-web-heading-h1-default-font-size: 3.375rem;
74
+ --hpe-web-heading-h1-light-font-size: 3.375rem;
75
+ --hpe-web-heading-h1-medium-font-size: 3.375rem;
60
76
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.625rem;
61
77
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.625rem;
62
78
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.625rem;
63
- --hpe-web-heading-h1-large-default-font-size: 4.1875rem;
64
- --hpe-web-heading-h2-default-font-size: 2.625rem;
65
- --hpe-web-heading-h3-default-font-size: 1.8125rem;
66
- --hpe-web-heading-h4-default-font-size: 1.375rem;
67
- --hpe-web-heading-h5-default-font-size: 1rem;
68
- --hpe-web-heading-h6-default-font-size: 0.875rem;
79
+ --hpe-web-heading-h1-large-light-font-size: 4.1875rem;
80
+ --hpe-web-heading-h1-large-medium-font-size: 4.1875rem;
81
+ --hpe-web-heading-h2-light-font-size: 2.625rem;
82
+ --hpe-web-heading-h2-medium-font-size: 2.625rem;
83
+ --hpe-web-heading-h3-light-font-size: 1.8125rem;
84
+ --hpe-web-heading-h3-medium-font-size: 1.8125rem;
85
+ --hpe-web-heading-h4-light-font-size: 1.375rem;
86
+ --hpe-web-heading-h4-medium-font-size: 1.375rem;
87
+ --hpe-web-heading-h5-light-font-size: 1rem;
88
+ --hpe-web-heading-h5-medium-font-size: 1rem;
89
+ --hpe-web-heading-h6-light-font-size: 0.875rem;
90
+ --hpe-web-heading-h6-medium-font-size: 0.875rem;
69
91
  --hpe-web-paragraph-body-copy-font-size: 1rem;
70
92
  --hpe-web-paragraph-large-body-copy-font-size: 1.375rem;
71
93
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
package/dist/css/locales/ko.tokens.css CHANGED
@@ -7,15 +7,21 @@
7
7
  --hpe-web-heading-h1-condensed-bold-font-size: 2.375rem;
8
8
  --hpe-web-heading-h1-condensed-light-font-size: 2.375rem;
9
9
  --hpe-web-heading-h1-condensed-medium-font-size: 2.375rem;
10
- --hpe-web-heading-h1-default-font-size: 2rem;
10
+ --hpe-web-heading-h1-light-font-size: 2rem;
11
+ --hpe-web-heading-h1-medium-font-size: 2rem;
11
12
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3rem;
12
13
  --hpe-web-heading-h1-large-condensed-light-font-size: 3rem;
13
14
  --hpe-web-heading-h1-large-condensed-medium-font-size: 3rem;
14
- --hpe-web-heading-h1-large-default-font-size: 2rem;
15
- --hpe-web-heading-h2-default-font-size: 1.625rem;
16
- --hpe-web-heading-h3-default-font-size: 1.3125rem;
17
- --hpe-web-heading-h4-default-font-size: 1rem;
18
- --hpe-web-heading-h5-default-font-size: 0.875rem;
15
+ --hpe-web-heading-h1-large-light-font-size: 2rem;
16
+ --hpe-web-heading-h1-large-medium-font-size: 2rem;
17
+ --hpe-web-heading-h2-light-font-size: 1.625rem;
18
+ --hpe-web-heading-h2-medium-font-size: 1.625rem;
19
+ --hpe-web-heading-h3-light-font-size: 1.3125rem;
20
+ --hpe-web-heading-h3-medium-font-size: 1.3125rem;
21
+ --hpe-web-heading-h4-light-font-size: 1rem;
22
+ --hpe-web-heading-h4-medium-font-size: 1rem;
23
+ --hpe-web-heading-h5-light-font-size: 0.875rem;
24
+ --hpe-web-heading-h5-medium-font-size: 0.875rem;
19
25
  --hpe-web-paragraph-body-copy-font-size: 0.875rem;
20
26
  --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
21
27
  --hpe-web-paragraph-large-body-copy-font-size: 1rem;
@@ -27,6 +33,9 @@
27
33
  --hpe-web-base-font-family-noto-sans-kr: "Noto Sans KR", sans-serif;
28
34
  --hpe-web-base-font-family-noto-sans-tc: "Noto Sans KR", sans-serif;
29
35
  --hpe-web-base-font-family-primary: "Noto Sans KR", sans-serif;
36
+ --hpe-web-heading-font: "Noto Sans KR", sans-serif;
37
+ --hpe-web-paragraph-font: "Noto Sans KR", sans-serif;
38
+ --hpe-web-quote-font: "Noto Sans KR", sans-serif;
30
39
  }
31
40
 
32
41
  @media (min-width: 992px) {
@@ -34,15 +43,21 @@
34
43
  --hpe-web-heading-h1-condensed-bold-font-size: 4rem;
35
44
  --hpe-web-heading-h1-condensed-light-font-size: 4rem;
36
45
  --hpe-web-heading-h1-condensed-medium-font-size: 4rem;
37
- --hpe-web-heading-h1-default-font-size: 2.8125rem;
46
+ --hpe-web-heading-h1-light-font-size: 2.8125rem;
47
+ --hpe-web-heading-h1-medium-font-size: 2.8125rem;
38
48
  --hpe-web-heading-h1-large-condensed-bold-font-size: 4.8125rem;
39
49
  --hpe-web-heading-h1-large-condensed-light-font-size: 4.8125rem;
40
50
  --hpe-web-heading-h1-large-condensed-medium-font-size: 4.8125rem;
41
- --hpe-web-heading-h1-large-default-font-size: 3.375rem;
42
- --hpe-web-heading-h2-default-font-size: 2rem;
43
- --hpe-web-heading-h3-default-font-size: 1.625rem;
44
- --hpe-web-heading-h4-default-font-size: 1.1875rem;
45
- --hpe-web-heading-h6-default-font-size: 0.875rem;
51
+ --hpe-web-heading-h1-large-light-font-size: 3.375rem;
52
+ --hpe-web-heading-h1-large-medium-font-size: 3.375rem;
53
+ --hpe-web-heading-h2-light-font-size: 2rem;
54
+ --hpe-web-heading-h2-medium-font-size: 2rem;
55
+ --hpe-web-heading-h3-light-font-size: 1.625rem;
56
+ --hpe-web-heading-h3-medium-font-size: 1.625rem;
57
+ --hpe-web-heading-h4-light-font-size: 1.1875rem;
58
+ --hpe-web-heading-h4-medium-font-size: 1.1875rem;
59
+ --hpe-web-heading-h6-light-font-size: 0.875rem;
60
+ --hpe-web-heading-h6-medium-font-size: 0.875rem;
46
61
  --hpe-web-paragraph-large-body-copy-font-size: 1.1875rem;
47
62
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
48
63
  --hpe-web-quote-large-font-size: 2.375rem;
@@ -56,16 +71,23 @@
56
71
  --hpe-web-heading-h1-condensed-bold-font-size: 4.8125rem;
57
72
  --hpe-web-heading-h1-condensed-light-font-size: 4.8125rem;
58
73
  --hpe-web-heading-h1-condensed-medium-font-size: 4.8125rem;
59
- --hpe-web-heading-h1-default-font-size: 3.375rem;
74
+ --hpe-web-heading-h1-light-font-size: 3.375rem;
75
+ --hpe-web-heading-h1-medium-font-size: 3.375rem;
60
76
  --hpe-web-heading-h1-large-condensed-bold-font-size: 5.625rem;
61
77
  --hpe-web-heading-h1-large-condensed-light-font-size: 5.625rem;
62
78
  --hpe-web-heading-h1-large-condensed-medium-font-size: 5.625rem;
63
- --hpe-web-heading-h1-large-default-font-size: 4.1875rem;
64
- --hpe-web-heading-h2-default-font-size: 2.625rem;
65
- --hpe-web-heading-h3-default-font-size: 1.8125rem;
66
- --hpe-web-heading-h4-default-font-size: 1.375rem;
67
- --hpe-web-heading-h5-default-font-size: 1rem;
68
- --hpe-web-heading-h6-default-font-size: 0.875rem;
79
+ --hpe-web-heading-h1-large-light-font-size: 4.1875rem;
80
+ --hpe-web-heading-h1-large-medium-font-size: 4.1875rem;
81
+ --hpe-web-heading-h2-light-font-size: 2.625rem;
82
+ --hpe-web-heading-h2-medium-font-size: 2.625rem;
83
+ --hpe-web-heading-h3-light-font-size: 1.8125rem;
84
+ --hpe-web-heading-h3-medium-font-size: 1.8125rem;
85
+ --hpe-web-heading-h4-light-font-size: 1.375rem;
86
+ --hpe-web-heading-h4-medium-font-size: 1.375rem;
87
+ --hpe-web-heading-h5-light-font-size: 1rem;
88
+ --hpe-web-heading-h5-medium-font-size: 1rem;
89
+ --hpe-web-heading-h6-light-font-size: 0.875rem;
90
+ --hpe-web-heading-h6-medium-font-size: 0.875rem;
69
91
  --hpe-web-paragraph-body-copy-font-size: 1rem;
70
92
  --hpe-web-paragraph-large-body-copy-font-size: 1.375rem;
71
93
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
package/dist/css/locales/zh.tokens.css CHANGED
@@ -9,4 +9,7 @@
9
9
  --hpe-web-base-font-family-noto-sans-kr: "Noto Sans TC", sans-serif;
10
10
  --hpe-web-base-font-family-noto-sans-tc: "Noto Sans TC", sans-serif;
11
11
  --hpe-web-base-font-family-primary: "Noto Sans TC", sans-serif;
12
+ --hpe-web-heading-font: "Noto Sans TC", sans-serif;
13
+ --hpe-web-paragraph-font: "Noto Sans TC", sans-serif;
14
+ --hpe-web-quote-font: "Noto Sans TC", sans-serif;
12
15
  }