@hpe-web/design-tokens 1.2.1 → 1.3.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 (24) hide show
  1. package/README.md +5 -9
  2. package/dist/css/fonts/de.css +164 -0
  3. package/dist/css/fonts/en.css +164 -0
  4. package/dist/css/fonts/es.css +164 -0
  5. package/dist/css/fonts/fr.css +164 -0
  6. package/dist/css/fonts/it.css +164 -0
  7. package/dist/css/locales/ja.tokens.css +5 -0
  8. package/dist/css/locales/ko.tokens.css +5 -0
  9. package/dist/css/locales/zh.tokens.css +12 -0
  10. package/dist/css/tokens.css +566 -309
  11. package/dist/css/tokens.dark.css +67 -83
  12. package/dist/css/tokens.md-lg.css +155 -64
  13. package/dist/css/tokens.xl.css +155 -64
  14. package/package.json +1 -1
  15. package/src/breakpoints.json +9 -11
  16. package/src/component/button.json +112 -576
  17. package/src/fonts.json +1 -5
  18. package/src/hpe.resolver.json +2 -2
  19. package/src/primitive/primitives.json +18 -929
  20. package/src/semantic/color.dark.json +80 -450
  21. package/src/semantic/color.light.json +76 -470
  22. package/src/semantic/dimension.md-lg.json +698 -67
  23. package/src/semantic/dimension.xl.json +700 -69
  24. package/src/semantic/dimension.xs-sm.json +696 -65
package/dist/css/tokens.xl.css CHANGED
@@ -4,98 +4,189 @@
4
4
 
5
5
  @media (min-width: 1600px) {
6
6
  :root {
7
- --hpe-web-border-width-default: 1px;
8
- --hpe-web-border-width-large: 6px;
9
- --hpe-web-border-width-medium: 4px;
10
- --hpe-web-border-width-none: 0px;
11
- --hpe-web-border-width-small: 2px;
12
- --hpe-web-border-width-xsmall: 1px;
7
+ /* ── Semantic — purpose-based. Alias primitives where possible. ── */
8
+ --hpe-web-border-width-default: var(--hpe-web-static-border-width-xsmall);
9
+ --hpe-web-border-width-large: var(--hpe-web-static-border-width-large);
10
+ --hpe-web-border-width-medium: var(--hpe-web-static-border-width-medium);
11
+ --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
12
+ --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
13
+ --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
13
14
  --hpe-web-heading-h1-condensed-bold-font-size: 6rem;
14
- --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
- --hpe-web-heading-h1-condensed-bold-letter-spacing: 1.92px;
16
- --hpe-web-heading-h1-condensed-bold-line-height: 0.01;
15
+ --hpe-web-heading-h1-condensed-bold-font-weight: 700;
16
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
17
+ --hpe-web-heading-h1-condensed-bold-line-height: 1;
17
18
  --hpe-web-heading-h1-condensed-light-font-size: 6rem;
18
- --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
- --hpe-web-heading-h1-condensed-light-letter-spacing: 1.92px;
20
- --hpe-web-heading-h1-condensed-light-line-height: 0.01;
19
+ --hpe-web-heading-h1-condensed-light-font-weight: 300;
20
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 0.02em;
21
+ --hpe-web-heading-h1-condensed-light-line-height: 1;
21
22
  --hpe-web-heading-h1-condensed-medium-font-size: 6rem;
22
- --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
- --hpe-web-heading-h1-condensed-medium-letter-spacing: 1.92px;
24
- --hpe-web-heading-h1-condensed-medium-line-height: 0.01;
23
+ --hpe-web-heading-h1-condensed-medium-font-weight: 500;
24
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
25
+ --hpe-web-heading-h1-condensed-medium-line-height: 1;
25
26
  --hpe-web-heading-h1-default-font-size: 4.25rem;
26
- --hpe-web-heading-h1-default-font-weight: 400;
27
- --hpe-web-heading-h1-default-letter-spacing: -2.72px;
28
- --hpe-web-heading-h1-default-line-height: 0.016;
27
+ --hpe-web-heading-h1-default-font-weight: 500;
28
+ --hpe-web-heading-h1-default-letter-spacing: -0.04em;
29
+ --hpe-web-heading-h1-default-line-height: 1.088;
29
30
  --hpe-web-heading-h1-large-condensed-bold-font-size: 7rem;
30
- --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
- --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 2px;
32
- --hpe-web-heading-h1-large-condensed-bold-line-height: 0.009;
31
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
32
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.0179em;
33
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 1;
33
34
  --hpe-web-heading-h1-large-condensed-light-font-size: 7rem;
34
- --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
- --hpe-web-heading-h1-large-condensed-light-letter-spacing: 2px;
36
- --hpe-web-heading-h1-large-condensed-light-line-height: 0.009;
35
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 300;
36
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.0179em;
37
+ --hpe-web-heading-h1-large-condensed-light-line-height: 1;
37
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 7rem;
38
39
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
39
- --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 2px;
40
- --hpe-web-heading-h1-large-condensed-medium-line-height: 0.009;
40
+ --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.0179em;
41
+ --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
41
42
  --hpe-web-heading-h1-large-default-font-size: 5.25rem;
42
- --hpe-web-heading-h1-large-default-font-weight: 400;
43
- --hpe-web-heading-h1-large-default-letter-spacing: -3.36px;
44
- --hpe-web-heading-h1-large-default-line-height: 0.013;
43
+ --hpe-web-heading-h1-large-default-font-weight: 500;
44
+ --hpe-web-heading-h1-large-default-letter-spacing: -0.04em;
45
+ --hpe-web-heading-h1-large-default-line-height: 1.071;
45
46
  --hpe-web-heading-h2-default-font-size: 3.25rem;
46
- --hpe-web-heading-h2-default-font-weight: 400;
47
- --hpe-web-heading-h2-default-letter-spacing: -1.04px;
48
- --hpe-web-heading-h2-default-line-height: 0.021;
47
+ --hpe-web-heading-h2-default-font-weight: 500;
48
+ --hpe-web-heading-h2-default-letter-spacing: -0.02em;
49
+ --hpe-web-heading-h2-default-line-height: 1.115;
49
50
  --hpe-web-heading-h3-default-font-size: 2.25rem;
50
- --hpe-web-heading-h3-default-font-weight: 400;
51
- --hpe-web-heading-h3-default-letter-spacing: -0.36px;
52
- --hpe-web-heading-h3-default-line-height: 0.032;
51
+ --hpe-web-heading-h3-default-font-weight: 500;
52
+ --hpe-web-heading-h3-default-letter-spacing: -0.01em;
53
+ --hpe-web-heading-h3-default-line-height: 1.167;
53
54
  --hpe-web-heading-h4-default-font-size: 1.75rem;
54
- --hpe-web-heading-h4-default-font-weight: 400;
55
- --hpe-web-heading-h4-default-letter-spacing: -0.28px;
56
- --hpe-web-heading-h4-default-line-height: 0.043;
55
+ --hpe-web-heading-h4-default-font-weight: 500;
56
+ --hpe-web-heading-h4-default-letter-spacing: -0.01em;
57
+ --hpe-web-heading-h4-default-line-height: 1.214;
57
58
  --hpe-web-heading-h5-default-font-size: 1.25rem;
58
- --hpe-web-heading-h5-default-font-weight: 400;
59
- --hpe-web-heading-h5-default-letter-spacing: 0px;
60
- --hpe-web-heading-h5-default-line-height: 0.065;
59
+ --hpe-web-heading-h5-default-font-weight: 500;
60
+ --hpe-web-heading-h5-default-letter-spacing: 0em;
61
+ --hpe-web-heading-h5-default-line-height: 1.3;
61
62
  --hpe-web-heading-h6-default-font-size: 1rem;
62
- --hpe-web-heading-h6-default-font-weight: 400;
63
- --hpe-web-heading-h6-default-letter-spacing: 0px;
64
- --hpe-web-heading-h6-default-line-height: 0.086;
65
- --hpe-web-icon-large-size: 1.125rem;
66
- --hpe-web-icon-medium-size: 1rem;
67
- --hpe-web-icon-small-size: 0.875rem;
68
- --hpe-web-icon-xlarge-size: 1.25rem;
69
- --hpe-web-icon-xsmall-size: 0.75rem;
70
- --hpe-web-icon-xxlarge-size: 2rem;
63
+ --hpe-web-heading-h6-default-font-weight: 500;
64
+ --hpe-web-heading-h6-default-letter-spacing: 0em;
65
+ --hpe-web-heading-h6-default-line-height: 1.375;
66
+ --hpe-web-icon-large-size: var(--hpe-web-base-dimension-450);
67
+ --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-400);
68
+ --hpe-web-icon-small-size: var(--hpe-web-base-dimension-350);
69
+ --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-500);
70
+ --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-300);
71
+ --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-800);
72
+ --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
73
+ --hpe-web-multi-mode-button-link-large-border-width: 4px;
74
+ --hpe-web-multi-mode-button-link-large-font-size: 1.5rem;
75
+ --hpe-web-multi-mode-button-link-large-gap-x: 0.75rem;
76
+ --hpe-web-multi-mode-button-link-large-icon-height: 1.5rem;
77
+ --hpe-web-multi-mode-button-link-large-icon-width: 1.5rem;
78
+ --hpe-web-multi-mode-button-link-large-line-height: 1.167;
79
+ --hpe-web-multi-mode-button-link-large-min-height: 1.25rem;
80
+ --hpe-web-multi-mode-button-link-large-padding-x: 0px;
81
+ --hpe-web-multi-mode-button-link-large-padding-y: 0px;
82
+ --hpe-web-multi-mode-button-link-medium-border-radius: 9999px;
83
+ --hpe-web-multi-mode-button-link-medium-border-width: 4px;
84
+ --hpe-web-multi-mode-button-link-medium-font-size: 1.25rem;
85
+ --hpe-web-multi-mode-button-link-medium-gap-x: 0.75rem;
86
+ --hpe-web-multi-mode-button-link-medium-icon-height: 1.25rem;
87
+ --hpe-web-multi-mode-button-link-medium-icon-width: 1.25rem;
88
+ --hpe-web-multi-mode-button-link-medium-line-height: 1.2;
89
+ --hpe-web-multi-mode-button-link-medium-min-height: 1.5rem;
90
+ --hpe-web-multi-mode-button-link-medium-padding-x: 0px;
91
+ --hpe-web-multi-mode-button-link-medium-padding-y: 0px;
92
+ --hpe-web-multi-mode-button-link-small-border-radius: 9999px;
93
+ --hpe-web-multi-mode-button-link-small-border-width: 4px;
94
+ --hpe-web-multi-mode-button-link-small-font-size: 1rem;
95
+ --hpe-web-multi-mode-button-link-small-gap-x: 0.5rem;
96
+ --hpe-web-multi-mode-button-link-small-icon-height: 1rem;
97
+ --hpe-web-multi-mode-button-link-small-icon-width: 1rem;
98
+ --hpe-web-multi-mode-button-link-small-line-height: 1.5;
99
+ --hpe-web-multi-mode-button-link-small-min-height: 0.875rem;
100
+ --hpe-web-multi-mode-button-link-small-padding-x: 0px;
101
+ --hpe-web-multi-mode-button-link-small-padding-y: 0px;
102
+ --hpe-web-multi-mode-button-primary-large-border-radius: 9999px;
103
+ --hpe-web-multi-mode-button-primary-large-border-width: 0px;
104
+ --hpe-web-multi-mode-button-primary-large-font-size: 1.5rem;
105
+ --hpe-web-multi-mode-button-primary-large-gap-x: 0.75rem;
106
+ --hpe-web-multi-mode-button-primary-large-icon-height: 1.5rem;
107
+ --hpe-web-multi-mode-button-primary-large-icon-width: 1.5rem;
108
+ --hpe-web-multi-mode-button-primary-large-line-height: 1.167;
109
+ --hpe-web-multi-mode-button-primary-large-min-height: 4.5rem;
110
+ --hpe-web-multi-mode-button-primary-large-padding-x: 2.5rem;
111
+ --hpe-web-multi-mode-button-primary-large-padding-y: 1.375rem;
112
+ --hpe-web-multi-mode-button-primary-medium-border-radius: 9999px;
113
+ --hpe-web-multi-mode-button-primary-medium-border-width: 0px;
114
+ --hpe-web-multi-mode-button-primary-medium-font-size: 1.25rem;
115
+ --hpe-web-multi-mode-button-primary-medium-gap-x: 0.75rem;
116
+ --hpe-web-multi-mode-button-primary-medium-icon-height: 1.25rem;
117
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 1.25rem;
118
+ --hpe-web-multi-mode-button-primary-medium-line-height: 1.2;
119
+ --hpe-web-multi-mode-button-primary-medium-min-height: 4rem;
120
+ --hpe-web-multi-mode-button-primary-medium-padding-x: 2.25rem;
121
+ --hpe-web-multi-mode-button-primary-medium-padding-y: 1.25rem;
122
+ --hpe-web-multi-mode-button-primary-small-border-radius: 9999px;
123
+ --hpe-web-multi-mode-button-primary-small-border-width: 0px;
124
+ --hpe-web-multi-mode-button-primary-small-font-size: 1rem;
125
+ --hpe-web-multi-mode-button-primary-small-gap-x: 0.5rem;
126
+ --hpe-web-multi-mode-button-primary-small-icon-height: 1rem;
127
+ --hpe-web-multi-mode-button-primary-small-icon-width: 1rem;
128
+ --hpe-web-multi-mode-button-primary-small-line-height: 1.5;
129
+ --hpe-web-multi-mode-button-primary-small-min-height: 3.5rem;
130
+ --hpe-web-multi-mode-button-primary-small-padding-x: 1.5rem;
131
+ --hpe-web-multi-mode-button-primary-small-padding-y: 0.75rem;
132
+ --hpe-web-multi-mode-button-secondary-large-border-radius: 9999px;
133
+ --hpe-web-multi-mode-button-secondary-large-border-width: 4px;
134
+ --hpe-web-multi-mode-button-secondary-large-font-size: 1.5rem;
135
+ --hpe-web-multi-mode-button-secondary-large-gap-x: 0.75rem;
136
+ --hpe-web-multi-mode-button-secondary-large-icon-height: 1.5rem;
137
+ --hpe-web-multi-mode-button-secondary-large-icon-width: 1.5rem;
138
+ --hpe-web-multi-mode-button-secondary-large-line-height: 1.167;
139
+ --hpe-web-multi-mode-button-secondary-large-min-height: 4.75rem;
140
+ --hpe-web-multi-mode-button-secondary-large-padding-x: 2.5rem;
141
+ --hpe-web-multi-mode-button-secondary-large-padding-y: 1.375rem;
142
+ --hpe-web-multi-mode-button-secondary-medium-border-radius: 9999px;
143
+ --hpe-web-multi-mode-button-secondary-medium-border-width: 4px;
144
+ --hpe-web-multi-mode-button-secondary-medium-font-size: 1.25rem;
145
+ --hpe-web-multi-mode-button-secondary-medium-gap-x: 0.75rem;
146
+ --hpe-web-multi-mode-button-secondary-medium-icon-height: 1.25rem;
147
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 1.25rem;
148
+ --hpe-web-multi-mode-button-secondary-medium-line-height: 1.2;
149
+ --hpe-web-multi-mode-button-secondary-medium-min-height: 4rem;
150
+ --hpe-web-multi-mode-button-secondary-medium-padding-x: 2.25rem;
151
+ --hpe-web-multi-mode-button-secondary-medium-padding-y: 1.25rem;
152
+ --hpe-web-multi-mode-button-secondary-small-border-radius: 9999px;
153
+ --hpe-web-multi-mode-button-secondary-small-border-width: 3px;
154
+ --hpe-web-multi-mode-button-secondary-small-font-size: 1rem;
155
+ --hpe-web-multi-mode-button-secondary-small-gap-x: 0.5rem;
156
+ --hpe-web-multi-mode-button-secondary-small-icon-height: 1rem;
157
+ --hpe-web-multi-mode-button-secondary-small-icon-width: 1rem;
158
+ --hpe-web-multi-mode-button-secondary-small-line-height: 1.5;
159
+ --hpe-web-multi-mode-button-secondary-small-min-height: 3.5rem;
160
+ --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
161
+ --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
71
162
  --hpe-web-paragraph-body-copy-font-size: 1.25rem;
72
163
  --hpe-web-paragraph-body-copy-font-weight: 400;
73
- --hpe-web-paragraph-body-copy-letter-spacing: -0.2px;
74
- --hpe-web-paragraph-body-copy-line-height: 0.075;
164
+ --hpe-web-paragraph-body-copy-letter-spacing: -0.01em;
165
+ --hpe-web-paragraph-body-copy-line-height: 1.5;
75
166
  --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
76
167
  --hpe-web-paragraph-disclaimer-font-weight: 400;
77
- --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
78
- --hpe-web-paragraph-disclaimer-line-height: 0.102;
168
+ --hpe-web-paragraph-disclaimer-letter-spacing: 0em;
169
+ --hpe-web-paragraph-disclaimer-line-height: 1.429;
79
170
  --hpe-web-paragraph-large-body-copy-font-size: 1.75rem;
80
171
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
81
- --hpe-web-paragraph-large-body-copy-letter-spacing: -0.28px;
82
- --hpe-web-paragraph-large-body-copy-line-height: 0.048;
172
+ --hpe-web-paragraph-large-body-copy-letter-spacing: -0.01em;
173
+ --hpe-web-paragraph-large-body-copy-line-height: 1.357;
83
174
  --hpe-web-paragraph-small-body-copy-font-size: 1rem;
84
175
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
85
- --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
86
- --hpe-web-paragraph-small-body-copy-line-height: 0.094;
176
+ --hpe-web-paragraph-small-body-copy-letter-spacing: 0em;
177
+ --hpe-web-paragraph-small-body-copy-line-height: 1.5;
87
178
  --hpe-web-quote-large-font-size: 3.25rem;
88
179
  --hpe-web-quote-large-font-weight: 400;
89
- --hpe-web-quote-large-letter-spacing: -2.08px;
90
- --hpe-web-quote-large-line-height: 0.023;
180
+ --hpe-web-quote-large-letter-spacing: -0.04em;
181
+ --hpe-web-quote-large-line-height: 1.192;
91
182
  --hpe-web-quote-medium-font-size: 2.75rem;
92
183
  --hpe-web-quote-medium-font-weight: 400;
93
- --hpe-web-quote-medium-letter-spacing: -1.32px;
94
- --hpe-web-quote-medium-line-height: 0.028;
184
+ --hpe-web-quote-medium-letter-spacing: -0.03em;
185
+ --hpe-web-quote-medium-line-height: 1.227;
95
186
  --hpe-web-quote-small-font-size: 2.25rem;
96
187
  --hpe-web-quote-small-font-weight: 400;
97
- --hpe-web-quote-small-letter-spacing: -0.72px;
98
- --hpe-web-quote-small-line-height: 0.036;
188
+ --hpe-web-quote-small-letter-spacing: -0.02em;
189
+ --hpe-web-quote-small-line-height: 1.278;
99
190
  --hpe-web-radius-full: 9999px;
100
191
  --hpe-web-radius-hair: 1px;
101
192
  --hpe-web-radius-large: 16px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hpe-web/design-tokens",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "HPE Design System — design tokens (CSS, JSON)",
5
5
  "type": "module",
6
6
  "repository": {
package/src/breakpoints.json CHANGED
@@ -1,14 +1,12 @@
1
1
  {
2
- "breakpoint": {
3
- "xs": 1,
4
- "sm": 768,
5
- "md": 992,
6
- "lg": 1200,
7
- "xl": 1600
8
- },
9
- "range": {
10
- "xs-sm": { "min": 1, "mediaQuery": null },
11
- "md-lg": { "min": 992, "mediaQuery": "(min-width: 992px)" },
12
- "xl": { "min": 1600, "mediaQuery": "(min-width: 1600px)" }
2
+ "hpe-web": {
3
+ "breakpoint": {
4
+ "$type": "dimension",
5
+ "xs": { "$value": { "value": 1, "unit": "px" } },
6
+ "sm": { "$value": { "value": 768, "unit": "px" } },
7
+ "md": { "$value": { "value": 992, "unit": "px" } },
8
+ "lg": { "$value": { "value": 1200, "unit": "px" } },
9
+ "xl": { "$value": { "value": 1600, "unit": "px" } }
10
+ }
13
11
  }
14
12
  }