@hpe-web/design-tokens 1.2.0 → 1.2.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 (19) hide show
  1. package/README.md +8 -3
  2. package/dist/css/locales/de.tokens.css +56 -0
  3. package/dist/css/locales/es.tokens.css +56 -0
  4. package/dist/css/locales/fr.tokens.css +56 -0
  5. package/dist/css/locales/it.tokens.css +56 -0
  6. package/dist/css/locales/ja.tokens.css +71 -0
  7. package/dist/css/locales/ko.tokens.css +71 -0
  8. package/dist/css/tokens.css +142 -161
  9. package/dist/css/tokens.dark.css +54 -43
  10. package/dist/css/tokens.md-lg.css +49 -49
  11. package/dist/css/tokens.xl.css +51 -51
  12. package/package.json +1 -1
  13. package/src/component/button.json +212 -422
  14. package/src/locales.json +8 -8
  15. package/src/semantic/color.dark.json +446 -161
  16. package/src/semantic/color.light.json +466 -158
  17. package/src/semantic/dimension.md-lg.json +21 -21
  18. package/src/semantic/dimension.xl.json +21 -21
  19. package/src/semantic/dimension.xs-sm.json +21 -21
package/dist/css/tokens.md-lg.css CHANGED
@@ -2,66 +2,66 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- (min-width: 992px) {
5
+ @media (min-width: 992px) {
6
6
  :root {
7
- --hpe-web-border-width-default: 0.0625rem;
8
- --hpe-web-border-width-large: 0.375rem;
9
- --hpe-web-border-width-medium: 0.25rem;
7
+ --hpe-web-border-width-default: 1px;
8
+ --hpe-web-border-width-large: 6px;
9
+ --hpe-web-border-width-medium: 4px;
10
10
  --hpe-web-border-width-none: 0px;
11
- --hpe-web-border-width-small: 0.125rem;
12
- --hpe-web-border-width-xsmall: 0.0625rem;
11
+ --hpe-web-border-width-small: 2px;
12
+ --hpe-web-border-width-xsmall: 1px;
13
13
  --hpe-web-heading-h1-condensed-bold-font-size: 5rem;
14
14
  --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
- --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.1rem;
16
- --hpe-web-heading-h1-condensed-bold-line-height: 80;
15
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 1.6px;
16
+ --hpe-web-heading-h1-condensed-bold-line-height: 0.013;
17
17
  --hpe-web-heading-h1-condensed-light-font-size: 5rem;
18
18
  --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
- --hpe-web-heading-h1-condensed-light-letter-spacing: 0.1rem;
20
- --hpe-web-heading-h1-condensed-light-line-height: 80;
19
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 1.6px;
20
+ --hpe-web-heading-h1-condensed-light-line-height: 0.013;
21
21
  --hpe-web-heading-h1-condensed-medium-font-size: 5rem;
22
22
  --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
- --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.1rem;
24
- --hpe-web-heading-h1-condensed-medium-line-height: 80;
23
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 1.6px;
24
+ --hpe-web-heading-h1-condensed-medium-line-height: 0.013;
25
25
  --hpe-web-heading-h1-default-font-size: 3.5rem;
26
26
  --hpe-web-heading-h1-default-font-weight: 400;
27
- --hpe-web-heading-h1-default-letter-spacing: -0.105rem;
28
- --hpe-web-heading-h1-default-line-height: 62;
27
+ --hpe-web-heading-h1-default-letter-spacing: -1.68px;
28
+ --hpe-web-heading-h1-default-line-height: 0.02;
29
29
  --hpe-web-heading-h1-large-condensed-bold-font-size: 6rem;
30
30
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
- --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.125rem;
32
- --hpe-web-heading-h1-large-condensed-bold-line-height: 96;
31
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 2px;
32
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 0.01;
33
33
  --hpe-web-heading-h1-large-condensed-light-font-size: 6rem;
34
34
  --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
- --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
36
- --hpe-web-heading-h1-large-condensed-light-line-height: 96;
35
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 2px;
36
+ --hpe-web-heading-h1-large-condensed-light-line-height: 0.01;
37
37
  --hpe-web-heading-h1-large-condensed-medium-font-size: 6rem;
38
38
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
39
- --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.125rem;
40
- --hpe-web-heading-h1-large-condensed-medium-line-height: 96;
39
+ --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 2px;
40
+ --hpe-web-heading-h1-large-condensed-medium-line-height: 0.01;
41
41
  --hpe-web-heading-h1-large-default-font-size: 4.25rem;
42
42
  --hpe-web-heading-h1-large-default-font-weight: 400;
43
- --hpe-web-heading-h1-large-default-letter-spacing: -0.1706rem;
44
- --hpe-web-heading-h1-large-default-line-height: 74;
43
+ --hpe-web-heading-h1-large-default-letter-spacing: -2.73px;
44
+ --hpe-web-heading-h1-large-default-line-height: 0.016;
45
45
  --hpe-web-heading-h2-default-font-size: 2.5rem;
46
46
  --hpe-web-heading-h2-default-font-weight: 400;
47
- --hpe-web-heading-h2-default-letter-spacing: -0.05rem;
48
- --hpe-web-heading-h2-default-line-height: 46;
47
+ --hpe-web-heading-h2-default-letter-spacing: -0.8px;
48
+ --hpe-web-heading-h2-default-line-height: 0.029;
49
49
  --hpe-web-heading-h3-default-font-size: 2rem;
50
50
  --hpe-web-heading-h3-default-font-weight: 400;
51
- --hpe-web-heading-h3-default-letter-spacing: -0.02rem;
52
- --hpe-web-heading-h3-default-line-height: 38;
51
+ --hpe-web-heading-h3-default-letter-spacing: -0.32px;
52
+ --hpe-web-heading-h3-default-line-height: 0.037;
53
53
  --hpe-web-heading-h4-default-font-size: 1.5rem;
54
54
  --hpe-web-heading-h4-default-font-weight: 400;
55
55
  --hpe-web-heading-h4-default-letter-spacing: 0px;
56
- --hpe-web-heading-h4-default-line-height: 30;
56
+ --hpe-web-heading-h4-default-line-height: 0.052;
57
57
  --hpe-web-heading-h5-default-font-size: 1.125rem;
58
58
  --hpe-web-heading-h5-default-font-weight: 400;
59
59
  --hpe-web-heading-h5-default-letter-spacing: 0px;
60
- --hpe-web-heading-h5-default-line-height: 24;
60
+ --hpe-web-heading-h5-default-line-height: 0.074;
61
61
  --hpe-web-heading-h6-default-font-size: 1rem;
62
62
  --hpe-web-heading-h6-default-font-weight: 400;
63
63
  --hpe-web-heading-h6-default-letter-spacing: 0px;
64
- --hpe-web-heading-h6-default-line-height: 22;
64
+ --hpe-web-heading-h6-default-line-height: 0.086;
65
65
  --hpe-web-icon-large-size: 1.125rem;
66
66
  --hpe-web-icon-medium-size: 1rem;
67
67
  --hpe-web-icon-small-size: 0.875rem;
@@ -71,41 +71,41 @@
71
71
  --hpe-web-paragraph-body-copy-font-size: 1.125rem;
72
72
  --hpe-web-paragraph-body-copy-font-weight: 400;
73
73
  --hpe-web-paragraph-body-copy-letter-spacing: 0px;
74
- --hpe-web-paragraph-body-copy-line-height: 26;
74
+ --hpe-web-paragraph-body-copy-line-height: 0.08;
75
75
  --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
76
76
  --hpe-web-paragraph-disclaimer-font-weight: 400;
77
77
  --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
78
- --hpe-web-paragraph-disclaimer-line-height: 20;
78
+ --hpe-web-paragraph-disclaimer-line-height: 0.102;
79
79
  --hpe-web-paragraph-large-body-copy-font-size: 1.5rem;
80
80
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
81
- --hpe-web-paragraph-large-body-copy-letter-spacing: -0.015rem;
82
- --hpe-web-paragraph-large-body-copy-line-height: 34;
81
+ --hpe-web-paragraph-large-body-copy-letter-spacing: -0.24px;
82
+ --hpe-web-paragraph-large-body-copy-line-height: 0.059;
83
83
  --hpe-web-paragraph-small-body-copy-font-size: 1rem;
84
84
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
85
85
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
86
- --hpe-web-paragraph-small-body-copy-line-height: 24;
86
+ --hpe-web-paragraph-small-body-copy-line-height: 0.094;
87
87
  --hpe-web-quote-large-font-size: 3rem;
88
88
  --hpe-web-quote-large-font-weight: 400;
89
- --hpe-web-quote-large-letter-spacing: -0.12rem;
90
- --hpe-web-quote-large-line-height: 58;
89
+ --hpe-web-quote-large-letter-spacing: -1.92px;
90
+ --hpe-web-quote-large-line-height: 0.025;
91
91
  --hpe-web-quote-medium-font-size: 2.5rem;
92
92
  --hpe-web-quote-medium-font-weight: 400;
93
- --hpe-web-quote-medium-letter-spacing: -0.075rem;
94
- --hpe-web-quote-medium-line-height: 50;
93
+ --hpe-web-quote-medium-letter-spacing: -1.2px;
94
+ --hpe-web-quote-medium-line-height: 0.031;
95
95
  --hpe-web-quote-small-font-size: 2rem;
96
96
  --hpe-web-quote-small-font-weight: 400;
97
- --hpe-web-quote-small-letter-spacing: -0.04rem;
98
- --hpe-web-quote-small-line-height: 42;
99
- --hpe-web-radius-full: 624.9375rem;
100
- --hpe-web-radius-hair: 0.0625rem;
101
- --hpe-web-radius-large: 1rem;
102
- --hpe-web-radius-medium: 0.75rem;
97
+ --hpe-web-quote-small-letter-spacing: -0.64px;
98
+ --hpe-web-quote-small-line-height: 0.041;
99
+ --hpe-web-radius-full: 9999px;
100
+ --hpe-web-radius-hair: 1px;
101
+ --hpe-web-radius-large: 16px;
102
+ --hpe-web-radius-medium: 12px;
103
103
  --hpe-web-radius-none: 0px;
104
- --hpe-web-radius-small: 0.5rem;
105
- --hpe-web-radius-xlarge: 1.5rem;
106
- --hpe-web-radius-xsmall: 0.375rem;
107
- --hpe-web-radius-xxlarge: 2rem;
108
- --hpe-web-radius-xxsmall: 0.25rem;
104
+ --hpe-web-radius-small: 8px;
105
+ --hpe-web-radius-xlarge: 24px;
106
+ --hpe-web-radius-xsmall: 6px;
107
+ --hpe-web-radius-xxlarge: 32px;
108
+ --hpe-web-radius-xxsmall: 4px;
109
109
  --hpe-web-spacing-3xlarge: 6rem;
110
110
  --hpe-web-spacing-3xsmall: 0.5rem;
111
111
  --hpe-web-spacing-4xlarge: 10rem;
package/dist/css/tokens.xl.css CHANGED
@@ -2,66 +2,66 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- (min-width: 1600px) {
5
+ @media (min-width: 1600px) {
6
6
  :root {
7
- --hpe-web-border-width-default: 0.0625rem;
8
- --hpe-web-border-width-large: 0.375rem;
9
- --hpe-web-border-width-medium: 0.25rem;
7
+ --hpe-web-border-width-default: 1px;
8
+ --hpe-web-border-width-large: 6px;
9
+ --hpe-web-border-width-medium: 4px;
10
10
  --hpe-web-border-width-none: 0px;
11
- --hpe-web-border-width-small: 0.125rem;
12
- --hpe-web-border-width-xsmall: 0.0625rem;
11
+ --hpe-web-border-width-small: 2px;
12
+ --hpe-web-border-width-xsmall: 1px;
13
13
  --hpe-web-heading-h1-condensed-bold-font-size: 6rem;
14
14
  --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
- --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.12rem;
16
- --hpe-web-heading-h1-condensed-bold-line-height: 96;
15
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 1.92px;
16
+ --hpe-web-heading-h1-condensed-bold-line-height: 0.01;
17
17
  --hpe-web-heading-h1-condensed-light-font-size: 6rem;
18
18
  --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
- --hpe-web-heading-h1-condensed-light-letter-spacing: 0.12rem;
20
- --hpe-web-heading-h1-condensed-light-line-height: 96;
19
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 1.92px;
20
+ --hpe-web-heading-h1-condensed-light-line-height: 0.01;
21
21
  --hpe-web-heading-h1-condensed-medium-font-size: 6rem;
22
22
  --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
- --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.12rem;
24
- --hpe-web-heading-h1-condensed-medium-line-height: 96;
23
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 1.92px;
24
+ --hpe-web-heading-h1-condensed-medium-line-height: 0.01;
25
25
  --hpe-web-heading-h1-default-font-size: 4.25rem;
26
26
  --hpe-web-heading-h1-default-font-weight: 400;
27
- --hpe-web-heading-h1-default-letter-spacing: -0.17rem;
28
- --hpe-web-heading-h1-default-line-height: 74;
27
+ --hpe-web-heading-h1-default-letter-spacing: -2.72px;
28
+ --hpe-web-heading-h1-default-line-height: 0.016;
29
29
  --hpe-web-heading-h1-large-condensed-bold-font-size: 7rem;
30
30
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
- --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.125rem;
32
- --hpe-web-heading-h1-large-condensed-bold-line-height: 112;
31
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 2px;
32
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 0.009;
33
33
  --hpe-web-heading-h1-large-condensed-light-font-size: 7rem;
34
34
  --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
- --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
36
- --hpe-web-heading-h1-large-condensed-light-line-height: 112;
35
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 2px;
36
+ --hpe-web-heading-h1-large-condensed-light-line-height: 0.009;
37
37
  --hpe-web-heading-h1-large-condensed-medium-font-size: 7rem;
38
38
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
39
- --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.125rem;
40
- --hpe-web-heading-h1-large-condensed-medium-line-height: 112;
39
+ --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 2px;
40
+ --hpe-web-heading-h1-large-condensed-medium-line-height: 0.009;
41
41
  --hpe-web-heading-h1-large-default-font-size: 5.25rem;
42
42
  --hpe-web-heading-h1-large-default-font-weight: 400;
43
- --hpe-web-heading-h1-large-default-letter-spacing: -0.21rem;
44
- --hpe-web-heading-h1-large-default-line-height: 90;
43
+ --hpe-web-heading-h1-large-default-letter-spacing: -3.36px;
44
+ --hpe-web-heading-h1-large-default-line-height: 0.013;
45
45
  --hpe-web-heading-h2-default-font-size: 3.25rem;
46
46
  --hpe-web-heading-h2-default-font-weight: 400;
47
- --hpe-web-heading-h2-default-letter-spacing: -0.065rem;
48
- --hpe-web-heading-h2-default-line-height: 58;
47
+ --hpe-web-heading-h2-default-letter-spacing: -1.04px;
48
+ --hpe-web-heading-h2-default-line-height: 0.021;
49
49
  --hpe-web-heading-h3-default-font-size: 2.25rem;
50
50
  --hpe-web-heading-h3-default-font-weight: 400;
51
- --hpe-web-heading-h3-default-letter-spacing: -0.0225rem;
52
- --hpe-web-heading-h3-default-line-height: 42;
51
+ --hpe-web-heading-h3-default-letter-spacing: -0.36px;
52
+ --hpe-web-heading-h3-default-line-height: 0.032;
53
53
  --hpe-web-heading-h4-default-font-size: 1.75rem;
54
54
  --hpe-web-heading-h4-default-font-weight: 400;
55
- --hpe-web-heading-h4-default-letter-spacing: -0.0175rem;
56
- --hpe-web-heading-h4-default-line-height: 34;
55
+ --hpe-web-heading-h4-default-letter-spacing: -0.28px;
56
+ --hpe-web-heading-h4-default-line-height: 0.043;
57
57
  --hpe-web-heading-h5-default-font-size: 1.25rem;
58
58
  --hpe-web-heading-h5-default-font-weight: 400;
59
59
  --hpe-web-heading-h5-default-letter-spacing: 0px;
60
- --hpe-web-heading-h5-default-line-height: 26;
60
+ --hpe-web-heading-h5-default-line-height: 0.065;
61
61
  --hpe-web-heading-h6-default-font-size: 1rem;
62
62
  --hpe-web-heading-h6-default-font-weight: 400;
63
63
  --hpe-web-heading-h6-default-letter-spacing: 0px;
64
- --hpe-web-heading-h6-default-line-height: 22;
64
+ --hpe-web-heading-h6-default-line-height: 0.086;
65
65
  --hpe-web-icon-large-size: 1.125rem;
66
66
  --hpe-web-icon-medium-size: 1rem;
67
67
  --hpe-web-icon-small-size: 0.875rem;
@@ -70,42 +70,42 @@
70
70
  --hpe-web-icon-xxlarge-size: 2rem;
71
71
  --hpe-web-paragraph-body-copy-font-size: 1.25rem;
72
72
  --hpe-web-paragraph-body-copy-font-weight: 400;
73
- --hpe-web-paragraph-body-copy-letter-spacing: -0.0125rem;
74
- --hpe-web-paragraph-body-copy-line-height: 30;
73
+ --hpe-web-paragraph-body-copy-letter-spacing: -0.2px;
74
+ --hpe-web-paragraph-body-copy-line-height: 0.075;
75
75
  --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
76
76
  --hpe-web-paragraph-disclaimer-font-weight: 400;
77
77
  --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
78
- --hpe-web-paragraph-disclaimer-line-height: 20;
78
+ --hpe-web-paragraph-disclaimer-line-height: 0.102;
79
79
  --hpe-web-paragraph-large-body-copy-font-size: 1.75rem;
80
80
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
81
- --hpe-web-paragraph-large-body-copy-letter-spacing: -0.0175rem;
82
- --hpe-web-paragraph-large-body-copy-line-height: 38;
81
+ --hpe-web-paragraph-large-body-copy-letter-spacing: -0.28px;
82
+ --hpe-web-paragraph-large-body-copy-line-height: 0.048;
83
83
  --hpe-web-paragraph-small-body-copy-font-size: 1rem;
84
84
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
85
85
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
86
- --hpe-web-paragraph-small-body-copy-line-height: 24;
86
+ --hpe-web-paragraph-small-body-copy-line-height: 0.094;
87
87
  --hpe-web-quote-large-font-size: 3.25rem;
88
88
  --hpe-web-quote-large-font-weight: 400;
89
- --hpe-web-quote-large-letter-spacing: -0.13rem;
90
- --hpe-web-quote-large-line-height: 62;
89
+ --hpe-web-quote-large-letter-spacing: -2.08px;
90
+ --hpe-web-quote-large-line-height: 0.023;
91
91
  --hpe-web-quote-medium-font-size: 2.75rem;
92
92
  --hpe-web-quote-medium-font-weight: 400;
93
- --hpe-web-quote-medium-letter-spacing: -0.0825rem;
94
- --hpe-web-quote-medium-line-height: 54;
93
+ --hpe-web-quote-medium-letter-spacing: -1.32px;
94
+ --hpe-web-quote-medium-line-height: 0.028;
95
95
  --hpe-web-quote-small-font-size: 2.25rem;
96
96
  --hpe-web-quote-small-font-weight: 400;
97
- --hpe-web-quote-small-letter-spacing: -0.045rem;
98
- --hpe-web-quote-small-line-height: 46;
99
- --hpe-web-radius-full: 624.9375rem;
100
- --hpe-web-radius-hair: 0.0625rem;
101
- --hpe-web-radius-large: 1rem;
102
- --hpe-web-radius-medium: 0.75rem;
97
+ --hpe-web-quote-small-letter-spacing: -0.72px;
98
+ --hpe-web-quote-small-line-height: 0.036;
99
+ --hpe-web-radius-full: 9999px;
100
+ --hpe-web-radius-hair: 1px;
101
+ --hpe-web-radius-large: 16px;
102
+ --hpe-web-radius-medium: 12px;
103
103
  --hpe-web-radius-none: 0px;
104
- --hpe-web-radius-small: 0.5rem;
105
- --hpe-web-radius-xlarge: 1.5rem;
106
- --hpe-web-radius-xsmall: 0.375rem;
107
- --hpe-web-radius-xxlarge: 2rem;
108
- --hpe-web-radius-xxsmall: 0.25rem;
104
+ --hpe-web-radius-small: 8px;
105
+ --hpe-web-radius-xlarge: 24px;
106
+ --hpe-web-radius-xsmall: 6px;
107
+ --hpe-web-radius-xxlarge: 32px;
108
+ --hpe-web-radius-xxsmall: 4px;
109
109
  --hpe-web-spacing-3xlarge: 6rem;
110
110
  --hpe-web-spacing-3xsmall: 0.5rem;
111
111
  --hpe-web-spacing-4xlarge: 10rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hpe-web/design-tokens",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "HPE Design System — design tokens (CSS, JSON)",
5
5
  "type": "module",
6
6
  "repository": {