@hpe-web/design-tokens 1.0.0 → 1.2.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 (77) hide show
  1. package/README.md +22 -13
  2. package/dist/css/fonts/de.css +0 -164
  3. package/dist/css/fonts/en.css +0 -164
  4. package/dist/css/fonts/es.css +0 -164
  5. package/dist/css/fonts/fr.css +0 -164
  6. package/dist/css/fonts/it.css +0 -164
  7. package/dist/css/fonts/zh.css +1 -1
  8. package/dist/css/tokens.css +343 -264
  9. package/dist/css/tokens.dark.css +46 -63
  10. package/dist/css/tokens.md-lg.css +113 -103
  11. package/dist/css/tokens.xl.css +109 -86
  12. package/package.json +4 -8
  13. package/src/breakpoints.json +14 -0
  14. package/src/component/button.json +1382 -0
  15. package/{static → src}/fonts.json +17 -17
  16. package/src/hpe.resolver.json +94 -0
  17. package/{static → src}/locales.json +6 -6
  18. package/{dtcg/foundation/color.tokens.json → src/primitive/primitives.json} +874 -1172
  19. package/src/semantic/color.dark.json +414 -0
  20. package/src/semantic/color.light.json +415 -0
  21. package/src/semantic/dimension.md-lg.json +764 -0
  22. package/src/semantic/dimension.xl.json +764 -0
  23. package/src/semantic/dimension.xs-sm.json +764 -0
  24. package/transforms.mjs +7 -7
  25. package/dist/css/locales/de.tokens.css +0 -65
  26. package/dist/css/locales/es.tokens.css +0 -65
  27. package/dist/css/locales/fr.tokens.css +0 -65
  28. package/dist/css/locales/it.tokens.css +0 -65
  29. package/dist/css/locales/ja.tokens.css +0 -84
  30. package/dist/css/locales/ko.tokens.css +0 -84
  31. package/dist/css/locales/zh.tokens.css +0 -11
  32. package/dtcg/foundation/border-radius.tokens.json +0 -239
  33. package/dtcg/foundation/border-width.tokens.json +0 -103
  34. package/dtcg/foundation/breakpoint.tokens.json +0 -27
  35. package/dtcg/foundation/dimension.tokens.json +0 -258
  36. package/dtcg/foundation/font-family.tokens.json +0 -53
  37. package/dtcg/foundation/font-size.tokens.json +0 -408
  38. package/dtcg/foundation/font-weight.tokens.json +0 -214
  39. package/dtcg/foundation/letter-spacing.tokens.json +0 -203
  40. package/dtcg/foundation/line-height.tokens.json +0 -408
  41. package/dtcg/foundation/size.tokens.json +0 -191
  42. package/dtcg/foundation/space.tokens.json +0 -431
  43. package/dtcg/foundation/typography.tokens.json +0 -625
  44. package/dtcg/hpe.resolver.json +0 -178
  45. package/dtcg/semantic/border-radius.tokens.json +0 -149
  46. package/dtcg/semantic/border-width.tokens.json +0 -50
  47. package/dtcg/semantic/font-family.tokens.json +0 -42
  48. package/dtcg/semantic/font-size.tokens.json +0 -285
  49. package/dtcg/semantic/font-weight.tokens.json +0 -134
  50. package/dtcg/semantic/letter-spacing.tokens.json +0 -203
  51. package/dtcg/semantic/line-height.tokens.json +0 -285
  52. package/dtcg/semantic/size.tokens.json +0 -120
  53. package/dtcg/semantic/space.tokens.json +0 -275
  54. package/dtcg/semantic/typography.tokens.json +0 -536
  55. package/dtcg/theme/dark/color.tokens.json +0 -698
  56. package/dtcg/theme/light/color.tokens.json +0 -722
  57. package/dtcg/viewport/md-lg/font-size.tokens.json +0 -189
  58. package/dtcg/viewport/md-lg/font-weight.tokens.json +0 -11
  59. package/dtcg/viewport/md-lg/letter-spacing.tokens.json +0 -88
  60. package/dtcg/viewport/md-lg/line-height.tokens.json +0 -125
  61. package/dtcg/viewport/md-lg/size.tokens.json +0 -20
  62. package/dtcg/viewport/md-lg/space.tokens.json +0 -36
  63. package/dtcg/viewport/sm-xs/border-radius.tokens.json +0 -48
  64. package/dtcg/viewport/sm-xs/border-width.tokens.json +0 -15
  65. package/dtcg/viewport/sm-xs/font-size.tokens.json +0 -236
  66. package/dtcg/viewport/sm-xs/font-weight.tokens.json +0 -18
  67. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +0 -130
  68. package/dtcg/viewport/sm-xs/line-height.tokens.json +0 -236
  69. package/dtcg/viewport/sm-xs/size.tokens.json +0 -39
  70. package/dtcg/viewport/sm-xs/space.tokens.json +0 -46
  71. package/dtcg/viewport/xl/border-radius.tokens.json +0 -48
  72. package/dtcg/viewport/xl/font-size.tokens.json +0 -236
  73. package/dtcg/viewport/xl/letter-spacing.tokens.json +0 -122
  74. package/dtcg/viewport/xl/line-height.tokens.json +0 -178
  75. package/dtcg/viewport/xl/size.tokens.json +0 -84
  76. package/dtcg/viewport/xl/space.tokens.json +0 -68
  77. package/static/breakpoints.json +0 -23
package/transforms.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @hpe-emu/ds-tokens — Style Dictionary transforms and utilities
2
+ * @hpe-web/design-tokens — Style Dictionary transforms and utilities
3
3
  *
4
4
  * SD Transforms (register in your sd.config.mjs):
5
5
  * hpe/line-height/unitless — px line-height → unitless ratio (recommended by DTCG 2025.10)
@@ -9,19 +9,19 @@
9
9
  * applyLocale(tokenMap, localeCode) — apply HPE locale coefficients to a resolved token map
10
10
  *
11
11
  * @example SD consumer
12
- * import { lineHeightUnitless, letterSpacingEm } from '@hpe-emu/ds-tokens/transforms.mjs';
12
+ * import { lineHeightUnitless, letterSpacingEm } from '@hpe-web/design-tokens/transforms.mjs';
13
13
  * sd.registerTransform(lineHeightUnitless);
14
14
  * sd.registerTransform(letterSpacingEm);
15
15
  * // then include 'hpe/line-height/unitless' and 'hpe/letter-spacing/em' in your transforms array
16
16
  *
17
17
  * @example Post-build locale adjustment (custom SD pipeline)
18
18
  * // Build your own flat token map, then apply locale scaling:
19
- * import { applyLocale } from '@hpe-emu/ds-tokens/transforms.mjs';
19
+ * import { applyLocale } from '@hpe-web/design-tokens/transforms.mjs';
20
20
  * const deTokens = applyLocale(myResolvedTokenMap, 'de');
21
21
  * // For browser consumers, use the CSS locale files — no JS needed.
22
22
  */
23
23
 
24
- import locales from './static/locales.json' with { type: 'json' };
24
+ import locales from './src/locales.json' with { type: 'json' };
25
25
 
26
26
  // ─── Helpers ─────────────────────────────────────────────────────────────────
27
27
 
@@ -126,7 +126,7 @@ const FS_PATTERN = new RegExp(`-(${HPE_CATEGORIES.join('|')})-.*font-size$`);
126
126
  * @returns {Record<string, string>} New map with locale-adjusted values
127
127
  *
128
128
  * @example Custom SD pipeline — apply after you build your own flat token map
129
- * import { applyLocale } from '@hpe-emu/ds-tokens/transforms.mjs';
129
+ * import { applyLocale } from '@hpe-web/design-tokens/transforms.mjs';
130
130
  *
131
131
  * // German: display and heading scaled to 75%
132
132
  * const deTokens = applyLocale(myResolvedTokenMap, 'de');
@@ -135,14 +135,14 @@ const FS_PATTERN = new RegExp(`-(${HPE_CATEGORIES.join('|')})-.*font-size$`);
135
135
  * const jaTokens = applyLocale(myResolvedTokenMap, 'ja');
136
136
  *
137
137
  * // Browser consumers: use the CSS locale files instead — no JS needed.
138
- * // <link rel="stylesheet" href="@hpe-emu/ds-tokens/css/locales/de.tokens.css">
138
+ * // <link rel="stylesheet" href="@hpe-web/design-tokens/css/locales/de.tokens.css">
139
139
  */
140
140
  export function applyLocale(tokenMap, localeCode) {
141
141
  const locale = locales[localeCode];
142
142
  if (!locale) {
143
143
  const valid = Object.keys(locales).filter(k => k !== 'en').join(', ');
144
144
  throw new Error(
145
- `@hpe-emu/ds-tokens: unknown locale "${localeCode}". Valid: ${valid}`
145
+ `@hpe-web/design-tokens: unknown locale "${localeCode}". Valid: ${valid}`
146
146
  );
147
147
  }
148
148
 
package/dist/css/locales/de.tokens.css DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * German locale overrides
4
- */
5
-
6
- :root[lang="de"], [lang="de"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.25rem;
8
- --hpe-web-display-bold-large-font-size: 2.25rem;
9
- --hpe-web-display-bold-xlarge-font-size: 2.8125rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.25rem;
11
- --hpe-web-display-light-large-font-size: 2.25rem;
12
- --hpe-web-display-light-xlarge-font-size: 2.8125rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.25rem;
14
- --hpe-web-display-regular-large-font-size: 2.25rem;
15
- --hpe-web-display-regular-xlarge-font-size: 2.8125rem;
16
- --hpe-web-heading-3xsmall-font-size: 0.6875rem;
17
- --hpe-web-heading-large-font-size: 1.875rem;
18
- --hpe-web-heading-medium-font-size: 1.5rem;
19
- --hpe-web-heading-small-font-size: 1.25rem;
20
- --hpe-web-heading-xlarge-font-size: 1.875rem;
21
- --hpe-web-heading-xsmall-font-size: 0.9375rem;
22
- --hpe-web-heading-xxsmall-font-size: 0.75rem;
23
- }
24
-
25
- @media (min-width: 992px) {
26
- :root[lang="de"], [lang="de"] {
27
- --hpe-web-display-bold-2xlarge-font-size: 6.75rem;
28
- --hpe-web-display-bold-large-font-size: 3.75rem;
29
- --hpe-web-display-bold-xlarge-font-size: 4.5rem;
30
- --hpe-web-display-light-2xlarge-font-size: 6.75rem;
31
- --hpe-web-display-light-large-font-size: 3.75rem;
32
- --hpe-web-display-light-xlarge-font-size: 4.5rem;
33
- --hpe-web-display-regular-2xlarge-font-size: 6.75rem;
34
- --hpe-web-display-regular-large-font-size: 3.75rem;
35
- --hpe-web-display-regular-xlarge-font-size: 4.5rem;
36
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
37
- --hpe-web-heading-large-font-size: 2.625rem;
38
- --hpe-web-heading-medium-font-size: 1.875rem;
39
- --hpe-web-heading-small-font-size: 1.5rem;
40
- --hpe-web-heading-xlarge-font-size: 3.1875rem;
41
- --hpe-web-heading-xsmall-font-size: 1.125rem;
42
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
43
- }
44
- }
45
-
46
- @media (min-width: 1600px) {
47
- :root[lang="de"], [lang="de"] {
48
- --hpe-web-display-bold-2xlarge-font-size: 7.875rem;
49
- --hpe-web-display-bold-large-font-size: 4.5rem;
50
- --hpe-web-display-bold-xlarge-font-size: 5.25rem;
51
- --hpe-web-display-light-2xlarge-font-size: 7.875rem;
52
- --hpe-web-display-light-large-font-size: 4.5rem;
53
- --hpe-web-display-light-xlarge-font-size: 5.25rem;
54
- --hpe-web-display-regular-2xlarge-font-size: 7.875rem;
55
- --hpe-web-display-regular-large-font-size: 4.5rem;
56
- --hpe-web-display-regular-xlarge-font-size: 5.25rem;
57
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
58
- --hpe-web-heading-large-font-size: 3.1875rem;
59
- --hpe-web-heading-medium-font-size: 2.4375rem;
60
- --hpe-web-heading-small-font-size: 1.6875rem;
61
- --hpe-web-heading-xlarge-font-size: 3.9375rem;
62
- --hpe-web-heading-xsmall-font-size: 1.3125rem;
63
- --hpe-web-heading-xxsmall-font-size: 0.9375rem;
64
- }
65
- }
package/dist/css/locales/es.tokens.css DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Spanish locale overrides
4
- */
5
-
6
- :root[lang="es"], [lang="es"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.25rem;
8
- --hpe-web-display-bold-large-font-size: 2.25rem;
9
- --hpe-web-display-bold-xlarge-font-size: 2.8125rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.25rem;
11
- --hpe-web-display-light-large-font-size: 2.25rem;
12
- --hpe-web-display-light-xlarge-font-size: 2.8125rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.25rem;
14
- --hpe-web-display-regular-large-font-size: 2.25rem;
15
- --hpe-web-display-regular-xlarge-font-size: 2.8125rem;
16
- --hpe-web-heading-3xsmall-font-size: 0.6875rem;
17
- --hpe-web-heading-large-font-size: 1.875rem;
18
- --hpe-web-heading-medium-font-size: 1.5rem;
19
- --hpe-web-heading-small-font-size: 1.25rem;
20
- --hpe-web-heading-xlarge-font-size: 1.875rem;
21
- --hpe-web-heading-xsmall-font-size: 0.9375rem;
22
- --hpe-web-heading-xxsmall-font-size: 0.75rem;
23
- }
24
-
25
- @media (min-width: 992px) {
26
- :root[lang="es"], [lang="es"] {
27
- --hpe-web-display-bold-2xlarge-font-size: 6.75rem;
28
- --hpe-web-display-bold-large-font-size: 3.75rem;
29
- --hpe-web-display-bold-xlarge-font-size: 4.5rem;
30
- --hpe-web-display-light-2xlarge-font-size: 6.75rem;
31
- --hpe-web-display-light-large-font-size: 3.75rem;
32
- --hpe-web-display-light-xlarge-font-size: 4.5rem;
33
- --hpe-web-display-regular-2xlarge-font-size: 6.75rem;
34
- --hpe-web-display-regular-large-font-size: 3.75rem;
35
- --hpe-web-display-regular-xlarge-font-size: 4.5rem;
36
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
37
- --hpe-web-heading-large-font-size: 2.625rem;
38
- --hpe-web-heading-medium-font-size: 1.875rem;
39
- --hpe-web-heading-small-font-size: 1.5rem;
40
- --hpe-web-heading-xlarge-font-size: 3.1875rem;
41
- --hpe-web-heading-xsmall-font-size: 1.125rem;
42
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
43
- }
44
- }
45
-
46
- @media (min-width: 1600px) {
47
- :root[lang="es"], [lang="es"] {
48
- --hpe-web-display-bold-2xlarge-font-size: 7.875rem;
49
- --hpe-web-display-bold-large-font-size: 4.5rem;
50
- --hpe-web-display-bold-xlarge-font-size: 5.25rem;
51
- --hpe-web-display-light-2xlarge-font-size: 7.875rem;
52
- --hpe-web-display-light-large-font-size: 4.5rem;
53
- --hpe-web-display-light-xlarge-font-size: 5.25rem;
54
- --hpe-web-display-regular-2xlarge-font-size: 7.875rem;
55
- --hpe-web-display-regular-large-font-size: 4.5rem;
56
- --hpe-web-display-regular-xlarge-font-size: 5.25rem;
57
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
58
- --hpe-web-heading-large-font-size: 3.1875rem;
59
- --hpe-web-heading-medium-font-size: 2.4375rem;
60
- --hpe-web-heading-small-font-size: 1.6875rem;
61
- --hpe-web-heading-xlarge-font-size: 3.9375rem;
62
- --hpe-web-heading-xsmall-font-size: 1.3125rem;
63
- --hpe-web-heading-xxsmall-font-size: 0.9375rem;
64
- }
65
- }
package/dist/css/locales/fr.tokens.css DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * French locale overrides
4
- */
5
-
6
- :root[lang="fr"], [lang="fr"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.25rem;
8
- --hpe-web-display-bold-large-font-size: 2.25rem;
9
- --hpe-web-display-bold-xlarge-font-size: 2.8125rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.25rem;
11
- --hpe-web-display-light-large-font-size: 2.25rem;
12
- --hpe-web-display-light-xlarge-font-size: 2.8125rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.25rem;
14
- --hpe-web-display-regular-large-font-size: 2.25rem;
15
- --hpe-web-display-regular-xlarge-font-size: 2.8125rem;
16
- --hpe-web-heading-3xsmall-font-size: 0.6875rem;
17
- --hpe-web-heading-large-font-size: 1.875rem;
18
- --hpe-web-heading-medium-font-size: 1.5rem;
19
- --hpe-web-heading-small-font-size: 1.25rem;
20
- --hpe-web-heading-xlarge-font-size: 1.875rem;
21
- --hpe-web-heading-xsmall-font-size: 0.9375rem;
22
- --hpe-web-heading-xxsmall-font-size: 0.75rem;
23
- }
24
-
25
- @media (min-width: 992px) {
26
- :root[lang="fr"], [lang="fr"] {
27
- --hpe-web-display-bold-2xlarge-font-size: 6.75rem;
28
- --hpe-web-display-bold-large-font-size: 3.75rem;
29
- --hpe-web-display-bold-xlarge-font-size: 4.5rem;
30
- --hpe-web-display-light-2xlarge-font-size: 6.75rem;
31
- --hpe-web-display-light-large-font-size: 3.75rem;
32
- --hpe-web-display-light-xlarge-font-size: 4.5rem;
33
- --hpe-web-display-regular-2xlarge-font-size: 6.75rem;
34
- --hpe-web-display-regular-large-font-size: 3.75rem;
35
- --hpe-web-display-regular-xlarge-font-size: 4.5rem;
36
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
37
- --hpe-web-heading-large-font-size: 2.625rem;
38
- --hpe-web-heading-medium-font-size: 1.875rem;
39
- --hpe-web-heading-small-font-size: 1.5rem;
40
- --hpe-web-heading-xlarge-font-size: 3.1875rem;
41
- --hpe-web-heading-xsmall-font-size: 1.125rem;
42
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
43
- }
44
- }
45
-
46
- @media (min-width: 1600px) {
47
- :root[lang="fr"], [lang="fr"] {
48
- --hpe-web-display-bold-2xlarge-font-size: 7.875rem;
49
- --hpe-web-display-bold-large-font-size: 4.5rem;
50
- --hpe-web-display-bold-xlarge-font-size: 5.25rem;
51
- --hpe-web-display-light-2xlarge-font-size: 7.875rem;
52
- --hpe-web-display-light-large-font-size: 4.5rem;
53
- --hpe-web-display-light-xlarge-font-size: 5.25rem;
54
- --hpe-web-display-regular-2xlarge-font-size: 7.875rem;
55
- --hpe-web-display-regular-large-font-size: 4.5rem;
56
- --hpe-web-display-regular-xlarge-font-size: 5.25rem;
57
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
58
- --hpe-web-heading-large-font-size: 3.1875rem;
59
- --hpe-web-heading-medium-font-size: 2.4375rem;
60
- --hpe-web-heading-small-font-size: 1.6875rem;
61
- --hpe-web-heading-xlarge-font-size: 3.9375rem;
62
- --hpe-web-heading-xsmall-font-size: 1.3125rem;
63
- --hpe-web-heading-xxsmall-font-size: 0.9375rem;
64
- }
65
- }
package/dist/css/locales/it.tokens.css DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Italian locale overrides
4
- */
5
-
6
- :root[lang="it"], [lang="it"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.25rem;
8
- --hpe-web-display-bold-large-font-size: 2.25rem;
9
- --hpe-web-display-bold-xlarge-font-size: 2.8125rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.25rem;
11
- --hpe-web-display-light-large-font-size: 2.25rem;
12
- --hpe-web-display-light-xlarge-font-size: 2.8125rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.25rem;
14
- --hpe-web-display-regular-large-font-size: 2.25rem;
15
- --hpe-web-display-regular-xlarge-font-size: 2.8125rem;
16
- --hpe-web-heading-3xsmall-font-size: 0.6875rem;
17
- --hpe-web-heading-large-font-size: 1.875rem;
18
- --hpe-web-heading-medium-font-size: 1.5rem;
19
- --hpe-web-heading-small-font-size: 1.25rem;
20
- --hpe-web-heading-xlarge-font-size: 1.875rem;
21
- --hpe-web-heading-xsmall-font-size: 0.9375rem;
22
- --hpe-web-heading-xxsmall-font-size: 0.75rem;
23
- }
24
-
25
- @media (min-width: 992px) {
26
- :root[lang="it"], [lang="it"] {
27
- --hpe-web-display-bold-2xlarge-font-size: 6.75rem;
28
- --hpe-web-display-bold-large-font-size: 3.75rem;
29
- --hpe-web-display-bold-xlarge-font-size: 4.5rem;
30
- --hpe-web-display-light-2xlarge-font-size: 6.75rem;
31
- --hpe-web-display-light-large-font-size: 3.75rem;
32
- --hpe-web-display-light-xlarge-font-size: 4.5rem;
33
- --hpe-web-display-regular-2xlarge-font-size: 6.75rem;
34
- --hpe-web-display-regular-large-font-size: 3.75rem;
35
- --hpe-web-display-regular-xlarge-font-size: 4.5rem;
36
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
37
- --hpe-web-heading-large-font-size: 2.625rem;
38
- --hpe-web-heading-medium-font-size: 1.875rem;
39
- --hpe-web-heading-small-font-size: 1.5rem;
40
- --hpe-web-heading-xlarge-font-size: 3.1875rem;
41
- --hpe-web-heading-xsmall-font-size: 1.125rem;
42
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
43
- }
44
- }
45
-
46
- @media (min-width: 1600px) {
47
- :root[lang="it"], [lang="it"] {
48
- --hpe-web-display-bold-2xlarge-font-size: 7.875rem;
49
- --hpe-web-display-bold-large-font-size: 4.5rem;
50
- --hpe-web-display-bold-xlarge-font-size: 5.25rem;
51
- --hpe-web-display-light-2xlarge-font-size: 7.875rem;
52
- --hpe-web-display-light-large-font-size: 4.5rem;
53
- --hpe-web-display-light-xlarge-font-size: 5.25rem;
54
- --hpe-web-display-regular-2xlarge-font-size: 7.875rem;
55
- --hpe-web-display-regular-large-font-size: 4.5rem;
56
- --hpe-web-display-regular-xlarge-font-size: 5.25rem;
57
- --hpe-web-heading-3xsmall-font-size: 0.75rem;
58
- --hpe-web-heading-large-font-size: 3.1875rem;
59
- --hpe-web-heading-medium-font-size: 2.4375rem;
60
- --hpe-web-heading-small-font-size: 1.6875rem;
61
- --hpe-web-heading-xlarge-font-size: 3.9375rem;
62
- --hpe-web-heading-xsmall-font-size: 1.3125rem;
63
- --hpe-web-heading-xxsmall-font-size: 0.9375rem;
64
- }
65
- }
package/dist/css/locales/ja.tokens.css DELETED
@@ -1,84 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Japanese locale overrides
4
- */
5
-
6
- :root[lang="ja"], [lang="ja"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.5rem;
8
- --hpe-web-display-bold-large-font-size: 2.375rem;
9
- --hpe-web-display-bold-xlarge-font-size: 3rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.5rem;
11
- --hpe-web-display-light-large-font-size: 2.375rem;
12
- --hpe-web-display-light-xlarge-font-size: 3rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.5rem;
14
- --hpe-web-display-regular-large-font-size: 2.375rem;
15
- --hpe-web-display-regular-xlarge-font-size: 3rem;
16
- --hpe-web-heading-large-font-size: 2rem;
17
- --hpe-web-heading-medium-font-size: 1.625rem;
18
- --hpe-web-heading-small-font-size: 1.3125rem;
19
- --hpe-web-heading-xlarge-font-size: 2rem;
20
- --hpe-web-heading-xsmall-font-size: 1rem;
21
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
22
- --hpe-web-quote-large-font-size: 1.625rem;
23
- --hpe-web-quote-medium-font-size: 1.375rem;
24
- --hpe-web-quote-small-font-size: 1.1875rem;
25
- --hpe-web-text-large-font-size: 1rem;
26
- --hpe-web-text-medium-font-size: 0.875rem;
27
- --hpe-web-text-xsmall-font-size: 0.875rem;
28
- --hpe-web-display-font: "Noto Sans JP", sans-serif;
29
- --hpe-web-heading-font: "Noto Sans JP", sans-serif;
30
- --hpe-web-quote-font: "Noto Sans JP", sans-serif;
31
- --hpe-web-text-font: "Noto Sans JP", sans-serif;
32
- }
33
-
34
- @media (min-width: 992px) {
35
- :root[lang="ja"], [lang="ja"] {
36
- --hpe-web-display-bold-2xlarge-font-size: 7.1875rem;
37
- --hpe-web-display-bold-large-font-size: 4rem;
38
- --hpe-web-display-bold-xlarge-font-size: 4.8125rem;
39
- --hpe-web-display-light-2xlarge-font-size: 7.1875rem;
40
- --hpe-web-display-light-large-font-size: 4rem;
41
- --hpe-web-display-light-xlarge-font-size: 4.8125rem;
42
- --hpe-web-display-regular-2xlarge-font-size: 7.1875rem;
43
- --hpe-web-display-regular-large-font-size: 4rem;
44
- --hpe-web-display-regular-xlarge-font-size: 4.8125rem;
45
- --hpe-web-heading-3xsmall-font-size: 0.875rem;
46
- --hpe-web-heading-large-font-size: 2.8125rem;
47
- --hpe-web-heading-medium-font-size: 2rem;
48
- --hpe-web-heading-small-font-size: 1.625rem;
49
- --hpe-web-heading-xlarge-font-size: 3.375rem;
50
- --hpe-web-heading-xsmall-font-size: 1.1875rem;
51
- --hpe-web-quote-large-font-size: 2.375rem;
52
- --hpe-web-quote-medium-font-size: 2rem;
53
- --hpe-web-quote-small-font-size: 1.625rem;
54
- --hpe-web-text-large-font-size: 1.1875rem;
55
- --hpe-web-text-small-font-size: 0.875rem;
56
- }
57
- }
58
-
59
- @media (min-width: 1600px) {
60
- :root[lang="ja"], [lang="ja"] {
61
- --hpe-web-display-bold-2xlarge-font-size: 8.375rem;
62
- --hpe-web-display-bold-large-font-size: 4.8125rem;
63
- --hpe-web-display-bold-xlarge-font-size: 5.625rem;
64
- --hpe-web-display-light-2xlarge-font-size: 8.375rem;
65
- --hpe-web-display-light-large-font-size: 4.8125rem;
66
- --hpe-web-display-light-xlarge-font-size: 5.625rem;
67
- --hpe-web-display-regular-2xlarge-font-size: 8.375rem;
68
- --hpe-web-display-regular-large-font-size: 4.8125rem;
69
- --hpe-web-display-regular-xlarge-font-size: 5.625rem;
70
- --hpe-web-heading-3xsmall-font-size: 0.875rem;
71
- --hpe-web-heading-large-font-size: 3.375rem;
72
- --hpe-web-heading-medium-font-size: 2.625rem;
73
- --hpe-web-heading-small-font-size: 1.8125rem;
74
- --hpe-web-heading-xlarge-font-size: 4.1875rem;
75
- --hpe-web-heading-xsmall-font-size: 1.375rem;
76
- --hpe-web-heading-xxsmall-font-size: 1rem;
77
- --hpe-web-quote-large-font-size: 2.625rem;
78
- --hpe-web-quote-medium-font-size: 2.1875rem;
79
- --hpe-web-quote-small-font-size: 1.8125rem;
80
- --hpe-web-text-large-font-size: 1.375rem;
81
- --hpe-web-text-medium-font-size: 1rem;
82
- --hpe-web-text-small-font-size: 0.875rem;
83
- }
84
- }
package/dist/css/locales/ko.tokens.css DELETED
@@ -1,84 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Korean locale overrides
4
- */
5
-
6
- :root[lang="ko"], [lang="ko"] {
7
- --hpe-web-display-bold-2xlarge-font-size: 4.5rem;
8
- --hpe-web-display-bold-large-font-size: 2.375rem;
9
- --hpe-web-display-bold-xlarge-font-size: 3rem;
10
- --hpe-web-display-light-2xlarge-font-size: 4.5rem;
11
- --hpe-web-display-light-large-font-size: 2.375rem;
12
- --hpe-web-display-light-xlarge-font-size: 3rem;
13
- --hpe-web-display-regular-2xlarge-font-size: 4.5rem;
14
- --hpe-web-display-regular-large-font-size: 2.375rem;
15
- --hpe-web-display-regular-xlarge-font-size: 3rem;
16
- --hpe-web-heading-large-font-size: 2rem;
17
- --hpe-web-heading-medium-font-size: 1.625rem;
18
- --hpe-web-heading-small-font-size: 1.3125rem;
19
- --hpe-web-heading-xlarge-font-size: 2rem;
20
- --hpe-web-heading-xsmall-font-size: 1rem;
21
- --hpe-web-heading-xxsmall-font-size: 0.875rem;
22
- --hpe-web-quote-large-font-size: 1.625rem;
23
- --hpe-web-quote-medium-font-size: 1.375rem;
24
- --hpe-web-quote-small-font-size: 1.1875rem;
25
- --hpe-web-text-large-font-size: 1rem;
26
- --hpe-web-text-medium-font-size: 0.875rem;
27
- --hpe-web-text-xsmall-font-size: 0.875rem;
28
- --hpe-web-display-font: "Noto Sans KR", sans-serif;
29
- --hpe-web-heading-font: "Noto Sans KR", sans-serif;
30
- --hpe-web-quote-font: "Noto Sans KR", sans-serif;
31
- --hpe-web-text-font: "Noto Sans KR", sans-serif;
32
- }
33
-
34
- @media (min-width: 992px) {
35
- :root[lang="ko"], [lang="ko"] {
36
- --hpe-web-display-bold-2xlarge-font-size: 7.1875rem;
37
- --hpe-web-display-bold-large-font-size: 4rem;
38
- --hpe-web-display-bold-xlarge-font-size: 4.8125rem;
39
- --hpe-web-display-light-2xlarge-font-size: 7.1875rem;
40
- --hpe-web-display-light-large-font-size: 4rem;
41
- --hpe-web-display-light-xlarge-font-size: 4.8125rem;
42
- --hpe-web-display-regular-2xlarge-font-size: 7.1875rem;
43
- --hpe-web-display-regular-large-font-size: 4rem;
44
- --hpe-web-display-regular-xlarge-font-size: 4.8125rem;
45
- --hpe-web-heading-3xsmall-font-size: 0.875rem;
46
- --hpe-web-heading-large-font-size: 2.8125rem;
47
- --hpe-web-heading-medium-font-size: 2rem;
48
- --hpe-web-heading-small-font-size: 1.625rem;
49
- --hpe-web-heading-xlarge-font-size: 3.375rem;
50
- --hpe-web-heading-xsmall-font-size: 1.1875rem;
51
- --hpe-web-quote-large-font-size: 2.375rem;
52
- --hpe-web-quote-medium-font-size: 2rem;
53
- --hpe-web-quote-small-font-size: 1.625rem;
54
- --hpe-web-text-large-font-size: 1.1875rem;
55
- --hpe-web-text-small-font-size: 0.875rem;
56
- }
57
- }
58
-
59
- @media (min-width: 1600px) {
60
- :root[lang="ko"], [lang="ko"] {
61
- --hpe-web-display-bold-2xlarge-font-size: 8.375rem;
62
- --hpe-web-display-bold-large-font-size: 4.8125rem;
63
- --hpe-web-display-bold-xlarge-font-size: 5.625rem;
64
- --hpe-web-display-light-2xlarge-font-size: 8.375rem;
65
- --hpe-web-display-light-large-font-size: 4.8125rem;
66
- --hpe-web-display-light-xlarge-font-size: 5.625rem;
67
- --hpe-web-display-regular-2xlarge-font-size: 8.375rem;
68
- --hpe-web-display-regular-large-font-size: 4.8125rem;
69
- --hpe-web-display-regular-xlarge-font-size: 5.625rem;
70
- --hpe-web-heading-3xsmall-font-size: 0.875rem;
71
- --hpe-web-heading-large-font-size: 3.375rem;
72
- --hpe-web-heading-medium-font-size: 2.625rem;
73
- --hpe-web-heading-small-font-size: 1.8125rem;
74
- --hpe-web-heading-xlarge-font-size: 4.1875rem;
75
- --hpe-web-heading-xsmall-font-size: 1.375rem;
76
- --hpe-web-heading-xxsmall-font-size: 1rem;
77
- --hpe-web-quote-large-font-size: 2.625rem;
78
- --hpe-web-quote-medium-font-size: 2.1875rem;
79
- --hpe-web-quote-small-font-size: 1.8125rem;
80
- --hpe-web-text-large-font-size: 1.375rem;
81
- --hpe-web-text-medium-font-size: 1rem;
82
- --hpe-web-text-small-font-size: 0.875rem;
83
- }
84
- }
package/dist/css/locales/zh.tokens.css DELETED
@@ -1,11 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- * Chinese locale overrides
4
- */
5
-
6
- :root[lang="zh"], [lang="zh"] {
7
- --hpe-web-display-font: "Noto Sans TC", sans-serif;
8
- --hpe-web-heading-font: "Noto Sans TC", sans-serif;
9
- --hpe-web-quote-font: "Noto Sans TC", sans-serif;
10
- --hpe-web-text-font: "Noto Sans TC", sans-serif;
11
- }