@hpe-web/design-tokens 1.2.2 → 1.3.1

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 (17) hide show
  1. package/README.md +8 -6
  2. package/dist/css/locales/ja.tokens.css +5 -0
  3. package/dist/css/locales/ko.tokens.css +5 -0
  4. package/dist/css/locales/zh.tokens.css +12 -0
  5. package/dist/css/tokens.css +526 -252
  6. package/dist/css/tokens.dark.css +67 -66
  7. package/dist/css/tokens.md-lg.css +115 -24
  8. package/dist/css/tokens.xl.css +115 -24
  9. package/package.json +24 -2
  10. package/src/component/button.json +82 -373
  11. package/src/hpe.resolver.json +2 -2
  12. package/src/primitive/primitives.json +17 -17
  13. package/src/semantic/color.dark.json +1 -1
  14. package/src/semantic/color.light.json +1 -1
  15. package/src/semantic/dimension.md-lg.json +643 -12
  16. package/src/semantic/dimension.xl.json +643 -12
  17. package/src/semantic/dimension.xs-sm.json +642 -11
package/dist/css/tokens.dark.css CHANGED
@@ -3,71 +3,72 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"], .dark-theme {
6
- --hpe-web-color-background-back: #292d3a;
7
- --hpe-web-color-background-card: #292d3a;
8
- --hpe-web-color-background-carousel: #e6e8e9;
9
- --hpe-web-color-background-carousel-disabled: #b1b9be;
10
- --hpe-web-color-background-carousel-hover: #d4d8db;
11
- --hpe-web-color-background-contrast: #ffffff0f;
12
- --hpe-web-color-background-critical: #552120;
13
- --hpe-web-color-background-default: #1d1f27;
14
- --hpe-web-color-background-disabled: #ffffff12;
15
- --hpe-web-color-background-floating: #1d1f27;
16
- --hpe-web-color-background-neutral: #d4d8db;
17
- --hpe-web-color-background-neutral-strong: #ffffff;
18
- --hpe-web-color-background-neutral-weak: #7d8a92;
19
- --hpe-web-color-background-ok: #093d32;
20
- --hpe-web-color-background-primary: #01a982;
21
- --hpe-web-color-background-primary-strong: #068667;
22
- --hpe-web-color-background-sunken: #22252e;
23
- --hpe-web-color-background-warning: #3c361e;
24
- --hpe-web-color-border-critical: #fc6161;
25
- --hpe-web-color-border-default: #ffffff5c;
26
- --hpe-web-color-border-disabled: #ffffff1f;
27
- --hpe-web-color-border-ok: #00e0af;
28
- --hpe-web-color-border-primary: #01a982;
29
- --hpe-web-color-border-selected: #05cc93;
30
- --hpe-web-color-border-strong: #ffffffb8;
31
- --hpe-web-color-border-warning: #ec8c25;
32
- --hpe-web-color-border-weak: #ffffff1f;
33
- --hpe-web-color-decorative-black: #000000;
34
- --hpe-web-color-decorative-blue: #0070f8;
35
- --hpe-web-color-decorative-brand: #01a982;
36
- --hpe-web-color-decorative-cyan: #00a4b3;
37
- --hpe-web-color-decorative-green: #068667;
38
- --hpe-web-color-decorative-neutral: #b1b9be;
39
- --hpe-web-color-decorative-neutral-strong: #d4d8db;
40
- --hpe-web-color-decorative-purple: #7764fc;
41
- --hpe-web-color-decorative-white: #ffffff;
42
- --hpe-web-color-foreground-critical: #fc6161;
43
- --hpe-web-color-foreground-ok: #05cc93;
44
- --hpe-web-color-foreground-primary: #05cc93;
45
- --hpe-web-color-foreground-unknown: #7d8a92;
46
- --hpe-web-color-foreground-warning: #ec8c25;
47
- --hpe-web-color-icon-critical: #fc6161;
48
- --hpe-web-color-icon-default: #e6e8e9;
49
- --hpe-web-color-icon-disabled: #ffffff3d;
50
- --hpe-web-color-icon-info: #65aef9;
51
- --hpe-web-color-icon-neutral: #ffffff;
52
- --hpe-web-color-icon-ok: #05cc93;
53
- --hpe-web-color-icon-on-strong: #292d3a;
54
- --hpe-web-color-icon-primary: #01a982;
55
- --hpe-web-color-icon-primary-strong: #01a982;
56
- --hpe-web-color-icon-strong: #ffffff;
57
- --hpe-web-color-icon-warning: #ec8c25;
58
- --hpe-web-color-icon-weak: #b1b9be;
59
- --hpe-web-color-logo-element: #01a982;
60
- --hpe-web-color-logo-logo-text: #ffffff;
61
- --hpe-web-color-text-critical: #fc6161;
62
- --hpe-web-color-text-default: #e6e8e9;
63
- --hpe-web-color-text-disabled: #ffffff3d;
64
- --hpe-web-color-text-neutral-strong: #f7f7f7;
65
- --hpe-web-color-text-ok: #00e0af;
66
- --hpe-web-color-text-on-strong: #292d3a;
67
- --hpe-web-color-text-primary: #00e0af;
68
- --hpe-web-color-text-primary-strong: #01a982;
69
- --hpe-web-color-text-strong: #ffffff;
70
- --hpe-web-color-text-warning: #ec8c25;
71
- --hpe-web-color-text-weak: #b1b9be;
6
+ /* ── Semantic — purpose-based. Alias primitives where possible. ── */
7
+ --hpe-web-color-background-back: var(--hpe-web-base-color-grey-1000);
8
+ --hpe-web-color-background-card: var(--hpe-web-base-color-grey-1000);
9
+ --hpe-web-color-background-carousel: var(--hpe-web-base-color-grey-200);
10
+ --hpe-web-color-background-carousel-disabled: var(--hpe-web-base-color-grey-500);
11
+ --hpe-web-color-background-carousel-hover: var(--hpe-web-base-color-grey-400);
12
+ --hpe-web-color-background-contrast: var(--hpe-web-base-color-white-opacity6);
13
+ --hpe-web-color-background-critical: var(--hpe-web-base-color-red-1000);
14
+ --hpe-web-color-background-default: var(--hpe-web-base-color-grey-1300);
15
+ --hpe-web-color-background-disabled: var(--hpe-web-base-color-white-opacity7);
16
+ --hpe-web-color-background-floating: var(--hpe-web-base-color-grey-1300);
17
+ --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-400);
18
+ --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-white-100);
19
+ --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-600);
20
+ --hpe-web-color-background-ok: var(--hpe-web-base-color-green-1000);
21
+ --hpe-web-color-background-primary: var(--hpe-web-base-color-green-600);
22
+ --hpe-web-color-background-primary-strong: var(--hpe-web-base-color-green-700);
23
+ --hpe-web-color-background-sunken: var(--hpe-web-base-color-grey-1200);
24
+ --hpe-web-color-background-warning: var(--hpe-web-base-color-orange-1000);
25
+ --hpe-web-color-border-critical: var(--hpe-web-color-foreground-critical);
26
+ --hpe-web-color-border-default: var(--hpe-web-base-color-white-opacity36);
27
+ --hpe-web-color-border-disabled: var(--hpe-web-base-color-white-opacity12);
28
+ --hpe-web-color-border-ok: var(--hpe-web-base-color-green-400);
29
+ --hpe-web-color-border-primary: var(--hpe-web-base-color-green-600);
30
+ --hpe-web-color-border-selected: var(--hpe-web-color-foreground-primary);
31
+ --hpe-web-color-border-strong: var(--hpe-web-base-color-white-opacity72);
32
+ --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
33
+ --hpe-web-color-border-weak: var(--hpe-web-base-color-white-opacity12);
34
+ --hpe-web-color-decorative-black: var(--hpe-web-base-color-black-opacity100);
35
+ --hpe-web-color-decorative-blue: var(--hpe-web-base-color-blue-500);
36
+ --hpe-web-color-decorative-brand: var(--hpe-web-base-color-green-600);
37
+ --hpe-web-color-decorative-cyan: var(--hpe-web-base-color-cyan-400);
38
+ --hpe-web-color-decorative-green: var(--hpe-web-base-color-green-700);
39
+ --hpe-web-color-decorative-neutral: var(--hpe-web-base-color-grey-500);
40
+ --hpe-web-color-decorative-neutral-strong: var(--hpe-web-base-color-grey-400);
41
+ --hpe-web-color-decorative-purple: var(--hpe-web-base-color-purple-400);
42
+ --hpe-web-color-decorative-white: var(--hpe-web-base-color-white-100);
43
+ --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-500);
44
+ --hpe-web-color-foreground-ok: var(--hpe-web-base-color-green-550);
45
+ --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-550);
46
+ --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
47
+ --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-500);
48
+ --hpe-web-color-icon-critical: var(--hpe-web-color-foreground-critical);
49
+ --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
50
+ --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
51
+ --hpe-web-color-icon-info: var(--hpe-web-base-color-blue-200);
52
+ --hpe-web-color-icon-neutral: var(--hpe-web-base-color-white-100);
53
+ --hpe-web-color-icon-ok: var(--hpe-web-base-color-green-550);
54
+ --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-grey-1000);
55
+ --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
56
+ --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-600);
57
+ --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
58
+ --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-500);
59
+ --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
60
+ --hpe-web-color-logo-element: var(--hpe-web-base-color-green-600);
61
+ --hpe-web-color-logo-logo-text: var(--hpe-web-base-color-white-100);
62
+ --hpe-web-color-text-critical: var(--hpe-web-base-color-red-500);
63
+ --hpe-web-color-text-default: var(--hpe-web-base-color-grey-200);
64
+ --hpe-web-color-text-disabled: var(--hpe-web-base-color-white-opacity24);
65
+ --hpe-web-color-text-neutral-strong: var(--hpe-web-base-color-grey-50);
66
+ --hpe-web-color-text-ok: var(--hpe-web-base-color-green-400);
67
+ --hpe-web-color-text-on-strong: var(--hpe-web-base-color-grey-1000);
68
+ --hpe-web-color-text-primary: var(--hpe-web-base-color-green-400);
69
+ --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-600);
70
+ --hpe-web-color-text-strong: var(--hpe-web-base-color-white-100);
71
+ --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-500);
72
+ --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-500);
72
73
  --hpe-web-color-transparent: #ffffff00;
73
74
  }
package/dist/css/tokens.md-lg.css CHANGED
@@ -4,34 +4,35 @@
4
4
 
5
5
  @media (min-width: 992px) {
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: 5rem;
14
- --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
+ --hpe-web-heading-h1-condensed-bold-font-weight: 700;
15
16
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
16
17
  --hpe-web-heading-h1-condensed-bold-line-height: 1;
17
18
  --hpe-web-heading-h1-condensed-light-font-size: 5rem;
18
- --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
+ --hpe-web-heading-h1-condensed-light-font-weight: 300;
19
20
  --hpe-web-heading-h1-condensed-light-letter-spacing: 0.02em;
20
21
  --hpe-web-heading-h1-condensed-light-line-height: 1;
21
22
  --hpe-web-heading-h1-condensed-medium-font-size: 5rem;
22
- --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
+ --hpe-web-heading-h1-condensed-medium-font-weight: 500;
23
24
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
24
25
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
25
26
  --hpe-web-heading-h1-default-font-size: 3.5rem;
26
- --hpe-web-heading-h1-default-font-weight: 400;
27
+ --hpe-web-heading-h1-default-font-weight: 500;
27
28
  --hpe-web-heading-h1-default-letter-spacing: -0.03em;
28
29
  --hpe-web-heading-h1-default-line-height: 1.107;
29
30
  --hpe-web-heading-h1-large-condensed-bold-font-size: 6rem;
30
- --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
31
32
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.0208em;
32
33
  --hpe-web-heading-h1-large-condensed-bold-line-height: 1;
33
34
  --hpe-web-heading-h1-large-condensed-light-font-size: 6rem;
34
- --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 300;
35
36
  --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.0208em;
36
37
  --hpe-web-heading-h1-large-condensed-light-line-height: 1;
37
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 6rem;
@@ -39,35 +40,125 @@
39
40
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.0208em;
40
41
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
41
42
  --hpe-web-heading-h1-large-default-font-size: 4.25rem;
42
- --hpe-web-heading-h1-large-default-font-weight: 400;
43
+ --hpe-web-heading-h1-large-default-font-weight: 500;
43
44
  --hpe-web-heading-h1-large-default-letter-spacing: -0.0401em;
44
45
  --hpe-web-heading-h1-large-default-line-height: 1.088;
45
46
  --hpe-web-heading-h2-default-font-size: 2.5rem;
46
- --hpe-web-heading-h2-default-font-weight: 400;
47
+ --hpe-web-heading-h2-default-font-weight: 500;
47
48
  --hpe-web-heading-h2-default-letter-spacing: -0.02em;
48
49
  --hpe-web-heading-h2-default-line-height: 1.15;
49
50
  --hpe-web-heading-h3-default-font-size: 2rem;
50
- --hpe-web-heading-h3-default-font-weight: 400;
51
+ --hpe-web-heading-h3-default-font-weight: 500;
51
52
  --hpe-web-heading-h3-default-letter-spacing: -0.01em;
52
53
  --hpe-web-heading-h3-default-line-height: 1.188;
53
54
  --hpe-web-heading-h4-default-font-size: 1.5rem;
54
- --hpe-web-heading-h4-default-font-weight: 400;
55
+ --hpe-web-heading-h4-default-font-weight: 500;
55
56
  --hpe-web-heading-h4-default-letter-spacing: 0em;
56
57
  --hpe-web-heading-h4-default-line-height: 1.25;
57
58
  --hpe-web-heading-h5-default-font-size: 1.125rem;
58
- --hpe-web-heading-h5-default-font-weight: 400;
59
+ --hpe-web-heading-h5-default-font-weight: 500;
59
60
  --hpe-web-heading-h5-default-letter-spacing: 0em;
60
61
  --hpe-web-heading-h5-default-line-height: 1.333;
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-font-weight: 500;
63
64
  --hpe-web-heading-h6-default-letter-spacing: 0em;
64
65
  --hpe-web-heading-h6-default-line-height: 1.375;
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;
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.25rem;
75
+ --hpe-web-multi-mode-button-link-large-gap-x: 0.75rem;
76
+ --hpe-web-multi-mode-button-link-large-icon-height: 1.25rem;
77
+ --hpe-web-multi-mode-button-link-large-icon-width: 1.25rem;
78
+ --hpe-web-multi-mode-button-link-large-line-height: 1.4;
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.125rem;
85
+ --hpe-web-multi-mode-button-link-medium-gap-x: 0.75rem;
86
+ --hpe-web-multi-mode-button-link-medium-icon-height: 1rem;
87
+ --hpe-web-multi-mode-button-link-medium-icon-width: 1rem;
88
+ --hpe-web-multi-mode-button-link-medium-line-height: 1.333;
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.25rem;
105
+ --hpe-web-multi-mode-button-primary-large-gap-x: 0.75rem;
106
+ --hpe-web-multi-mode-button-primary-large-icon-height: 1.25rem;
107
+ --hpe-web-multi-mode-button-primary-large-icon-width: 1.25rem;
108
+ --hpe-web-multi-mode-button-primary-large-line-height: 1.4;
109
+ --hpe-web-multi-mode-button-primary-large-min-height: 3.75rem;
110
+ --hpe-web-multi-mode-button-primary-large-padding-x: 2.25rem;
111
+ --hpe-web-multi-mode-button-primary-large-padding-y: 1rem;
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.125rem;
115
+ --hpe-web-multi-mode-button-primary-medium-gap-x: 0.75rem;
116
+ --hpe-web-multi-mode-button-primary-medium-icon-height: 1rem;
117
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 1rem;
118
+ --hpe-web-multi-mode-button-primary-medium-line-height: 1.333;
119
+ --hpe-web-multi-mode-button-primary-medium-min-height: 3.25rem;
120
+ --hpe-web-multi-mode-button-primary-medium-padding-x: 1.75rem;
121
+ --hpe-web-multi-mode-button-primary-medium-padding-y: 0.875rem;
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: 3rem;
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.25rem;
135
+ --hpe-web-multi-mode-button-secondary-large-gap-x: 0.75rem;
136
+ --hpe-web-multi-mode-button-secondary-large-icon-height: 1.25rem;
137
+ --hpe-web-multi-mode-button-secondary-large-icon-width: 1.25rem;
138
+ --hpe-web-multi-mode-button-secondary-large-line-height: 1.4;
139
+ --hpe-web-multi-mode-button-secondary-large-min-height: 3.75rem;
140
+ --hpe-web-multi-mode-button-secondary-large-padding-x: 2.25rem;
141
+ --hpe-web-multi-mode-button-secondary-large-padding-y: 1rem;
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.125rem;
145
+ --hpe-web-multi-mode-button-secondary-medium-gap-x: 0.75rem;
146
+ --hpe-web-multi-mode-button-secondary-medium-icon-height: 1rem;
147
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 1rem;
148
+ --hpe-web-multi-mode-button-secondary-medium-line-height: 1.333;
149
+ --hpe-web-multi-mode-button-secondary-medium-min-height: 3.25rem;
150
+ --hpe-web-multi-mode-button-secondary-medium-padding-x: 1.75rem;
151
+ --hpe-web-multi-mode-button-secondary-medium-padding-y: 0.875rem;
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: 3rem;
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.125rem;
72
163
  --hpe-web-paragraph-body-copy-font-weight: 400;
73
164
  --hpe-web-paragraph-body-copy-letter-spacing: 0em;
package/dist/css/tokens.xl.css CHANGED
@@ -4,34 +4,35 @@
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-font-weight: 700;
15
16
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
16
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-font-weight: 300;
19
20
  --hpe-web-heading-h1-condensed-light-letter-spacing: 0.02em;
20
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-font-weight: 500;
23
24
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
24
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-font-weight: 500;
27
28
  --hpe-web-heading-h1-default-letter-spacing: -0.04em;
28
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-font-weight: 700;
31
32
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.0179em;
32
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-font-weight: 300;
35
36
  --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.0179em;
36
37
  --hpe-web-heading-h1-large-condensed-light-line-height: 1;
37
38
  --hpe-web-heading-h1-large-condensed-medium-font-size: 7rem;
@@ -39,35 +40,125 @@
39
40
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.0179em;
40
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-font-weight: 500;
43
44
  --hpe-web-heading-h1-large-default-letter-spacing: -0.04em;
44
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-font-weight: 500;
47
48
  --hpe-web-heading-h2-default-letter-spacing: -0.02em;
48
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-font-weight: 500;
51
52
  --hpe-web-heading-h3-default-letter-spacing: -0.01em;
52
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-font-weight: 500;
55
56
  --hpe-web-heading-h4-default-letter-spacing: -0.01em;
56
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-font-weight: 500;
59
60
  --hpe-web-heading-h5-default-letter-spacing: 0em;
60
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-font-weight: 500;
63
64
  --hpe-web-heading-h6-default-letter-spacing: 0em;
64
65
  --hpe-web-heading-h6-default-line-height: 1.375;
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;
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
164
  --hpe-web-paragraph-body-copy-letter-spacing: -0.01em;
package/package.json CHANGED
@@ -1,7 +1,26 @@
1
1
  {
2
2
  "name": "@hpe-web/design-tokens",
3
- "version": "1.2.2",
4
- "description": "HPE Design System — design tokens (CSS, JSON)",
3
+ "version": "1.3.1",
4
+ "description": "HPE Design System design tokens — CSS custom properties, DTCG 2025.10 source, locale overrides, and Style Dictionary transforms. Three-tier aliased architecture (primitive → semantic → component) preserved end-to-end as CSS var() chains.",
5
+ "keywords": [
6
+ "design-tokens",
7
+ "design-system",
8
+ "hpe",
9
+ "css-variables",
10
+ "custom-properties",
11
+ "dtcg",
12
+ "w3c-dtcg",
13
+ "style-dictionary",
14
+ "tokens",
15
+ "theming",
16
+ "dark-mode"
17
+ ],
18
+ "homepage": "https://github.com/HPE-EMU/design-system/tree/main/packages/tokens#readme",
19
+ "bugs": {
20
+ "url": "https://github.com/HPE-EMU/design-system/issues"
21
+ },
22
+ "author": "HPE Digital Design System",
23
+ "license": "UNLICENSED",
5
24
  "type": "module",
6
25
  "repository": {
7
26
  "type": "git",
@@ -21,6 +40,9 @@
21
40
  "src/",
22
41
  "transforms.mjs"
23
42
  ],
43
+ "sideEffects": [
44
+ "dist/css/*.css"
45
+ ],
24
46
  "scripts": {
25
47
  "build": "node sd.config.mjs"
26
48
  },