@hpe-web/design-tokens 0.1.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 (56) hide show
  1. package/dist/css/fonts.css +132 -0
  2. package/dist/css/tokens.css +305 -0
  3. package/dist/css/tokens.dark.css +96 -0
  4. package/dist/css/tokens.sm-xs.css +93 -0
  5. package/dist/css/tokens.xl.css +100 -0
  6. package/dist/js/tokens.d.ts +307 -0
  7. package/dist/js/tokens.dark.d.ts +98 -0
  8. package/dist/js/tokens.dark.mjs +98 -0
  9. package/dist/js/tokens.mjs +307 -0
  10. package/dist/json/tokens.dark.json +92 -0
  11. package/dist/json/tokens.json +301 -0
  12. package/dist/json/tokens.sm-xs.json +87 -0
  13. package/dist/json/tokens.xl.json +94 -0
  14. package/dist/scss/_tokens.dark.scss +93 -0
  15. package/dist/scss/_tokens.scss +302 -0
  16. package/dist/scss/_tokens.sm-xs.scss +88 -0
  17. package/dist/scss/_tokens.xl.scss +95 -0
  18. package/dtcg/.gitkeep +0 -0
  19. package/dtcg/foundation/border-radius.tokens.json +239 -0
  20. package/dtcg/foundation/border-width.tokens.json +103 -0
  21. package/dtcg/foundation/color.tokens.json +2916 -0
  22. package/dtcg/foundation/dimension.tokens.json +258 -0
  23. package/dtcg/foundation/font-family.tokens.json +53 -0
  24. package/dtcg/foundation/font-size.tokens.json +408 -0
  25. package/dtcg/foundation/font-weight.tokens.json +214 -0
  26. package/dtcg/foundation/letter-spacing.tokens.json +203 -0
  27. package/dtcg/foundation/line-height.tokens.json +408 -0
  28. package/dtcg/foundation/size.tokens.json +191 -0
  29. package/dtcg/foundation/space.tokens.json +431 -0
  30. package/dtcg/hpe.resolver.json +163 -0
  31. package/dtcg/semantic/border-radius.tokens.json +149 -0
  32. package/dtcg/semantic/border-width.tokens.json +50 -0
  33. package/dtcg/semantic/font-family.tokens.json +42 -0
  34. package/dtcg/semantic/font-size.tokens.json +285 -0
  35. package/dtcg/semantic/font-weight.tokens.json +134 -0
  36. package/dtcg/semantic/letter-spacing.tokens.json +203 -0
  37. package/dtcg/semantic/line-height.tokens.json +285 -0
  38. package/dtcg/semantic/size.tokens.json +120 -0
  39. package/dtcg/semantic/space.tokens.json +275 -0
  40. package/dtcg/theme/dark/color.tokens.json +698 -0
  41. package/dtcg/theme/light/color.tokens.json +722 -0
  42. package/dtcg/viewport/sm-xs/border-radius.tokens.json +48 -0
  43. package/dtcg/viewport/sm-xs/border-width.tokens.json +15 -0
  44. package/dtcg/viewport/sm-xs/font-size.tokens.json +236 -0
  45. package/dtcg/viewport/sm-xs/font-weight.tokens.json +18 -0
  46. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +130 -0
  47. package/dtcg/viewport/sm-xs/line-height.tokens.json +236 -0
  48. package/dtcg/viewport/sm-xs/size.tokens.json +39 -0
  49. package/dtcg/viewport/sm-xs/space.tokens.json +46 -0
  50. package/dtcg/viewport/xl/border-radius.tokens.json +48 -0
  51. package/dtcg/viewport/xl/font-size.tokens.json +236 -0
  52. package/dtcg/viewport/xl/letter-spacing.tokens.json +122 -0
  53. package/dtcg/viewport/xl/line-height.tokens.json +178 -0
  54. package/dtcg/viewport/xl/size.tokens.json +84 -0
  55. package/dtcg/viewport/xl/space.tokens.json +68 -0
  56. package/package.json +36 -0
package/dist/css/tokens.xl.css ADDED
@@ -0,0 +1,100 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @media (min-width: 1600px) {
6
+ :root {
7
+ --hpe-web-multi-mode-button-anchor-large-font-size: 24px;
8
+ --hpe-web-multi-mode-button-anchor-large-icon-height: 24px;
9
+ --hpe-web-multi-mode-button-anchor-large-icon-width: 24px;
10
+ --hpe-web-multi-mode-button-anchor-medium-font-size: 20px;
11
+ --hpe-web-multi-mode-button-anchor-medium-icon-height: 20px;
12
+ --hpe-web-multi-mode-button-anchor-medium-icon-width: 20px;
13
+ --hpe-web-multi-mode-button-primary-large-font-size: 24px;
14
+ --hpe-web-multi-mode-button-primary-large-icon-height: 24px;
15
+ --hpe-web-multi-mode-button-primary-large-icon-width: 24px;
16
+ --hpe-web-multi-mode-button-primary-large-min-height: 72px;
17
+ --hpe-web-multi-mode-button-primary-large-padding-x: 40px;
18
+ --hpe-web-multi-mode-button-primary-large-padding-y: 22px;
19
+ --hpe-web-multi-mode-button-primary-medium-font-size: 20px;
20
+ --hpe-web-multi-mode-button-primary-medium-icon-height: 20px;
21
+ --hpe-web-multi-mode-button-primary-medium-icon-width: 20px;
22
+ --hpe-web-multi-mode-button-primary-medium-min-height: 64px;
23
+ --hpe-web-multi-mode-button-primary-medium-padding-x: 36px;
24
+ --hpe-web-multi-mode-button-primary-medium-padding-y: 20px;
25
+ --hpe-web-multi-mode-button-primary-small-min-height: 56px;
26
+ --hpe-web-multi-mode-button-secondary-large-font-size: 24px;
27
+ --hpe-web-multi-mode-button-secondary-large-icon-height: 24px;
28
+ --hpe-web-multi-mode-button-secondary-large-icon-width: 24px;
29
+ --hpe-web-multi-mode-button-secondary-large-min-height: 76px;
30
+ --hpe-web-multi-mode-button-secondary-large-padding-x: 40px;
31
+ --hpe-web-multi-mode-button-secondary-large-padding-y: 22px;
32
+ --hpe-web-multi-mode-button-secondary-medium-font-size: 20px;
33
+ --hpe-web-multi-mode-button-secondary-medium-icon-height: 20px;
34
+ --hpe-web-multi-mode-button-secondary-medium-icon-width: 20px;
35
+ --hpe-web-multi-mode-button-secondary-medium-min-height: 64px;
36
+ --hpe-web-multi-mode-button-secondary-medium-padding-x: 36px;
37
+ --hpe-web-multi-mode-button-secondary-medium-padding-y: 20px;
38
+ --hpe-web-multi-mode-button-secondary-small-min-height: 56px;
39
+ --hpe-web-radius-large: 16px;
40
+ --hpe-web-radius-medium: 12px;
41
+ --hpe-web-radius-small: 8px;
42
+ --hpe-web-radius-xlarge: 24px;
43
+ --hpe-web-radius-xsmall: 6px;
44
+ --hpe-web-radius-xxlarge: 32px;
45
+ --hpe-web-radius-xxsmall: 4px;
46
+ --hpe-web-display-bold-2xlarge-font-size: 168px;
47
+ --hpe-web-display-bold-2xlarge-line-height: 168px;
48
+ --hpe-web-display-bold-large-font-size: 96px;
49
+ --hpe-web-display-bold-large-letter-spacing: 1.92px;
50
+ --hpe-web-display-bold-large-line-height: 96px;
51
+ --hpe-web-display-bold-xlarge-font-size: 112px;
52
+ --hpe-web-display-bold-xlarge-line-height: 112px;
53
+ --hpe-web-display-light-2xlarge-font-size: 168px;
54
+ --hpe-web-display-light-2xlarge-line-height: 168px;
55
+ --hpe-web-display-light-large-font-size: 96px;
56
+ --hpe-web-display-light-large-letter-spacing: 1.92px;
57
+ --hpe-web-display-light-large-line-height: 96px;
58
+ --hpe-web-display-light-xlarge-font-size: 112px;
59
+ --hpe-web-display-light-xlarge-line-height: 112px;
60
+ --hpe-web-display-regular-2xlarge-font-size: 168px;
61
+ --hpe-web-display-regular-2xlarge-line-height: 168px;
62
+ --hpe-web-display-regular-large-font-size: 96px;
63
+ --hpe-web-display-regular-large-letter-spacing: 1.92px;
64
+ --hpe-web-display-regular-large-line-height: 96px;
65
+ --hpe-web-display-regular-xlarge-font-size: 112px;
66
+ --hpe-web-display-regular-xlarge-line-height: 112px;
67
+ --hpe-web-heading-large-font-size: 68px;
68
+ --hpe-web-heading-large-letter-spacing: -2.72px;
69
+ --hpe-web-heading-large-line-height: 74px;
70
+ --hpe-web-heading-medium-font-size: 52px;
71
+ --hpe-web-heading-medium-letter-spacing: -1.04px;
72
+ --hpe-web-heading-medium-line-height: 58px;
73
+ --hpe-web-heading-small-font-size: 36px;
74
+ --hpe-web-heading-small-letter-spacing: -0.36px;
75
+ --hpe-web-heading-small-line-height: 42px;
76
+ --hpe-web-heading-xlarge-font-size: 84px;
77
+ --hpe-web-heading-xlarge-letter-spacing: -3.36px;
78
+ --hpe-web-heading-xlarge-line-height: 90px;
79
+ --hpe-web-heading-xsmall-font-size: 28px;
80
+ --hpe-web-heading-xsmall-letter-spacing: -0.28px;
81
+ --hpe-web-heading-xsmall-line-height: 34px;
82
+ --hpe-web-heading-xxsmall-font-size: 20px;
83
+ --hpe-web-heading-xxsmall-line-height: 26px;
84
+ --hpe-web-quote-large-font-size: 52px;
85
+ --hpe-web-quote-large-letter-spacing: -2.08px;
86
+ --hpe-web-quote-large-line-height: 62px;
87
+ --hpe-web-quote-medium-font-size: 44px;
88
+ --hpe-web-quote-medium-letter-spacing: -1.32px;
89
+ --hpe-web-quote-medium-line-height: 54px;
90
+ --hpe-web-quote-small-font-size: 36px;
91
+ --hpe-web-quote-small-letter-spacing: -0.72px;
92
+ --hpe-web-quote-small-line-height: 46px;
93
+ --hpe-web-text-large-font-size: 28px;
94
+ --hpe-web-text-large-letter-spacing: -0.28px;
95
+ --hpe-web-text-large-line-height: 38px;
96
+ --hpe-web-text-medium-font-size: 20px;
97
+ --hpe-web-text-medium-letter-spacing: -0.2px;
98
+ --hpe-web-text-medium-line-height: 30px;
99
+ }
100
+ }
package/dist/js/tokens.d.ts ADDED
@@ -0,0 +1,307 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ declare const tokens: {
6
+ 'hpe-web-button-play-rest-icon-color': string;
7
+ 'hpe-web-multi-mode-button-anchor-large-border-radius': string;
8
+ 'hpe-web-multi-mode-button-anchor-large-font-size': string;
9
+ 'hpe-web-multi-mode-button-anchor-large-line-height': string;
10
+ 'hpe-web-multi-mode-button-anchor-large-border-width': string;
11
+ 'hpe-web-multi-mode-button-anchor-large-icon-height': string;
12
+ 'hpe-web-multi-mode-button-anchor-large-icon-width': string;
13
+ 'hpe-web-multi-mode-button-anchor-large-min-height': string;
14
+ 'hpe-web-multi-mode-button-anchor-large-gap-x': string;
15
+ 'hpe-web-multi-mode-button-anchor-large-padding-x': string;
16
+ 'hpe-web-multi-mode-button-anchor-large-padding-y': string;
17
+ 'hpe-web-multi-mode-button-anchor-medium-border-radius': string;
18
+ 'hpe-web-multi-mode-button-anchor-medium-border-width': string;
19
+ 'hpe-web-multi-mode-button-anchor-medium-font-size': string;
20
+ 'hpe-web-multi-mode-button-anchor-medium-line-height': string;
21
+ 'hpe-web-multi-mode-button-anchor-medium-icon-height': string;
22
+ 'hpe-web-multi-mode-button-anchor-medium-icon-width': string;
23
+ 'hpe-web-multi-mode-button-anchor-medium-min-height': string;
24
+ 'hpe-web-multi-mode-button-anchor-medium-gap-x': string;
25
+ 'hpe-web-multi-mode-button-anchor-medium-padding-x': string;
26
+ 'hpe-web-multi-mode-button-anchor-medium-padding-y': string;
27
+ 'hpe-web-multi-mode-button-anchor-small-border-radius': string;
28
+ 'hpe-web-multi-mode-button-anchor-small-border-width': string;
29
+ 'hpe-web-multi-mode-button-anchor-small-font-size': string;
30
+ 'hpe-web-multi-mode-button-anchor-small-line-height': string;
31
+ 'hpe-web-multi-mode-button-anchor-small-icon-height': string;
32
+ 'hpe-web-multi-mode-button-anchor-small-icon-width': string;
33
+ 'hpe-web-multi-mode-button-anchor-small-min-height': string;
34
+ 'hpe-web-multi-mode-button-anchor-small-gap-x': string;
35
+ 'hpe-web-multi-mode-button-anchor-small-padding-x': string;
36
+ 'hpe-web-multi-mode-button-anchor-small-padding-y': string;
37
+ 'hpe-web-multi-mode-button-primary-large-border-radius': string;
38
+ 'hpe-web-multi-mode-button-primary-large-font-size': string;
39
+ 'hpe-web-multi-mode-button-primary-large-line-height': string;
40
+ 'hpe-web-multi-mode-button-primary-large-border-width': string;
41
+ 'hpe-web-multi-mode-button-primary-large-icon-height': string;
42
+ 'hpe-web-multi-mode-button-primary-large-icon-width': string;
43
+ 'hpe-web-multi-mode-button-primary-large-min-height': string;
44
+ 'hpe-web-multi-mode-button-primary-large-gap-x': string;
45
+ 'hpe-web-multi-mode-button-primary-large-padding-x': string;
46
+ 'hpe-web-multi-mode-button-primary-large-padding-y': string;
47
+ 'hpe-web-multi-mode-button-primary-medium-border-radius': string;
48
+ 'hpe-web-multi-mode-button-primary-medium-border-width': string;
49
+ 'hpe-web-multi-mode-button-primary-medium-font-size': string;
50
+ 'hpe-web-multi-mode-button-primary-medium-line-height': string;
51
+ 'hpe-web-multi-mode-button-primary-medium-icon-height': string;
52
+ 'hpe-web-multi-mode-button-primary-medium-icon-width': string;
53
+ 'hpe-web-multi-mode-button-primary-medium-min-height': string;
54
+ 'hpe-web-multi-mode-button-primary-medium-gap-x': string;
55
+ 'hpe-web-multi-mode-button-primary-medium-padding-x': string;
56
+ 'hpe-web-multi-mode-button-primary-medium-padding-y': string;
57
+ 'hpe-web-multi-mode-button-primary-small-border-radius': string;
58
+ 'hpe-web-multi-mode-button-primary-small-border-width': string;
59
+ 'hpe-web-multi-mode-button-primary-small-font-size': string;
60
+ 'hpe-web-multi-mode-button-primary-small-line-height': string;
61
+ 'hpe-web-multi-mode-button-primary-small-icon-height': string;
62
+ 'hpe-web-multi-mode-button-primary-small-icon-width': string;
63
+ 'hpe-web-multi-mode-button-primary-small-min-height': string;
64
+ 'hpe-web-multi-mode-button-primary-small-gap-x': string;
65
+ 'hpe-web-multi-mode-button-primary-small-padding-x': string;
66
+ 'hpe-web-multi-mode-button-primary-small-padding-y': string;
67
+ 'hpe-web-multi-mode-button-secondary-large-border-radius': string;
68
+ 'hpe-web-multi-mode-button-secondary-large-border-width': string;
69
+ 'hpe-web-multi-mode-button-secondary-large-font-size': string;
70
+ 'hpe-web-multi-mode-button-secondary-large-line-height': string;
71
+ 'hpe-web-multi-mode-button-secondary-large-icon-height': string;
72
+ 'hpe-web-multi-mode-button-secondary-large-icon-width': string;
73
+ 'hpe-web-multi-mode-button-secondary-large-min-height': string;
74
+ 'hpe-web-multi-mode-button-secondary-large-gap-x': string;
75
+ 'hpe-web-multi-mode-button-secondary-large-padding-x': string;
76
+ 'hpe-web-multi-mode-button-secondary-large-padding-y': string;
77
+ 'hpe-web-multi-mode-button-secondary-medium-border-radius': string;
78
+ 'hpe-web-multi-mode-button-secondary-medium-border-width': string;
79
+ 'hpe-web-multi-mode-button-secondary-medium-font-size': string;
80
+ 'hpe-web-multi-mode-button-secondary-medium-line-height': string;
81
+ 'hpe-web-multi-mode-button-secondary-medium-icon-height': string;
82
+ 'hpe-web-multi-mode-button-secondary-medium-icon-width': string;
83
+ 'hpe-web-multi-mode-button-secondary-medium-min-height': string;
84
+ 'hpe-web-multi-mode-button-secondary-medium-gap-x': string;
85
+ 'hpe-web-multi-mode-button-secondary-medium-padding-x': string;
86
+ 'hpe-web-multi-mode-button-secondary-medium-padding-y': string;
87
+ 'hpe-web-multi-mode-button-secondary-small-border-radius': string;
88
+ 'hpe-web-multi-mode-button-secondary-small-border-width': string;
89
+ 'hpe-web-multi-mode-button-secondary-small-font-size': string;
90
+ 'hpe-web-multi-mode-button-secondary-small-line-height': string;
91
+ 'hpe-web-multi-mode-button-secondary-small-icon-height': string;
92
+ 'hpe-web-multi-mode-button-secondary-small-icon-width': string;
93
+ 'hpe-web-multi-mode-button-secondary-small-min-height': string;
94
+ 'hpe-web-multi-mode-button-secondary-small-gap-x': string;
95
+ 'hpe-web-multi-mode-button-secondary-small-padding-x': string;
96
+ 'hpe-web-multi-mode-button-secondary-small-padding-y': string;
97
+ 'hpe-web-radius-full': string;
98
+ 'hpe-web-radius-hair': string;
99
+ 'hpe-web-radius-large': string;
100
+ 'hpe-web-radius-medium': string;
101
+ 'hpe-web-radius-none': string;
102
+ 'hpe-web-radius-small': string;
103
+ 'hpe-web-radius-xlarge': string;
104
+ 'hpe-web-radius-xsmall': string;
105
+ 'hpe-web-radius-xxlarge': string;
106
+ 'hpe-web-radius-xxsmall': string;
107
+ 'hpe-web-color-background-card': string;
108
+ 'hpe-web-color-background-card-hover': string;
109
+ 'hpe-web-color-background-component': string;
110
+ 'hpe-web-color-background-component-disabled': string;
111
+ 'hpe-web-color-background-component-hover': string;
112
+ 'hpe-web-color-background-contrast': string;
113
+ 'hpe-web-color-background-critical': string;
114
+ 'hpe-web-color-background-default': string;
115
+ 'hpe-web-color-background-focus': string;
116
+ 'hpe-web-color-background-neutral': string;
117
+ 'hpe-web-color-background-neutral-strong': string;
118
+ 'hpe-web-color-background-neutral-weak': string;
119
+ 'hpe-web-color-background-ok': string;
120
+ 'hpe-web-color-background-primary': string;
121
+ 'hpe-web-color-background-primary-strong': string;
122
+ 'hpe-web-color-background-warning': string;
123
+ 'hpe-web-color-border-critical': string;
124
+ 'hpe-web-color-border-default': string;
125
+ 'hpe-web-color-border-focus': string;
126
+ 'hpe-web-color-border-ok': string;
127
+ 'hpe-web-color-border-primary': string;
128
+ 'hpe-web-color-border-primary-strong': string;
129
+ 'hpe-web-color-border-warning': string;
130
+ 'hpe-web-color-border-weak': string;
131
+ 'hpe-web-color-decorative-black': string;
132
+ 'hpe-web-color-decorative-blue': string;
133
+ 'hpe-web-color-decorative-brand': string;
134
+ 'hpe-web-color-decorative-cyan': string;
135
+ 'hpe-web-color-decorative-green': string;
136
+ 'hpe-web-color-decorative-neutral': string;
137
+ 'hpe-web-color-decorative-neutral-hover': string;
138
+ 'hpe-web-color-decorative-purple': string;
139
+ 'hpe-web-color-decorative-white': string;
140
+ 'hpe-web-color-gradient-element-green-stop0': string;
141
+ 'hpe-web-color-gradient-element-green-stop100': string;
142
+ 'hpe-web-color-gradient-element-neutral-stop0': string;
143
+ 'hpe-web-color-gradient-element-neutral-stop100': string;
144
+ 'hpe-web-color-gradient-element-neutral-stop15': string;
145
+ 'hpe-web-color-gradient-element-neutral-stop28': string;
146
+ 'hpe-web-color-gradient-element-neutral-stop38': string;
147
+ 'hpe-web-color-gradient-element-neutral-stop47': string;
148
+ 'hpe-web-color-gradient-element-neutral-stop54': string;
149
+ 'hpe-web-color-gradient-element-neutral-stop60': string;
150
+ 'hpe-web-color-gradient-element-neutral-stop65': string;
151
+ 'hpe-web-color-gradient-element-neutral-stop70': string;
152
+ 'hpe-web-color-gradient-element-neutral-stop73': string;
153
+ 'hpe-web-color-gradient-element-neutral-stop77': string;
154
+ 'hpe-web-color-gradient-element-neutral-stop80': string;
155
+ 'hpe-web-color-gradient-element-neutral-stop84': string;
156
+ 'hpe-web-color-gradient-element-neutral-stop88': string;
157
+ 'hpe-web-color-gradient-element-neutral-stop94': string;
158
+ 'hpe-web-color-gradient-neutral-stop0': string;
159
+ 'hpe-web-color-gradient-neutral-stop100': string;
160
+ 'hpe-web-color-gradient-video-overlay-stop0': string;
161
+ 'hpe-web-color-gradient-video-overlay-stop100': string;
162
+ 'hpe-web-color-icon-critical': string;
163
+ 'hpe-web-color-icon-default': string;
164
+ 'hpe-web-color-icon-disabled': string;
165
+ 'hpe-web-color-icon-focus': string;
166
+ 'hpe-web-color-icon-neutral': string;
167
+ 'hpe-web-color-icon-ok': string;
168
+ 'hpe-web-color-icon-primary': string;
169
+ 'hpe-web-color-icon-primary-strong': string;
170
+ 'hpe-web-color-icon-strong': string;
171
+ 'hpe-web-color-icon-warning': string;
172
+ 'hpe-web-color-icon-weak': string;
173
+ 'hpe-web-color-logo': string;
174
+ 'hpe-web-color-text-body': string;
175
+ 'hpe-web-color-text-critical': string;
176
+ 'hpe-web-color-text-disabled': string;
177
+ 'hpe-web-color-text-focus': string;
178
+ 'hpe-web-color-text-header': string;
179
+ 'hpe-web-color-text-neutral-strong': string;
180
+ 'hpe-web-color-text-ok': string;
181
+ 'hpe-web-color-text-on-neutral': string;
182
+ 'hpe-web-color-text-primary': string;
183
+ 'hpe-web-color-text-primary-strong': string;
184
+ 'hpe-web-color-text-warning': string;
185
+ 'hpe-web-color-text-weak': string;
186
+ 'hpe-web-color-transparent': string;
187
+ 'hpe-web-theme-button-carousel-disabled-background': string;
188
+ 'hpe-web-theme-button-carousel-disabled-border-color': string;
189
+ 'hpe-web-theme-button-carousel-disabled-icon-color': string;
190
+ 'hpe-web-theme-button-carousel-hover-background': string;
191
+ 'hpe-web-theme-button-carousel-hover-border-color': string;
192
+ 'hpe-web-theme-button-carousel-hover-icon-color': string;
193
+ 'hpe-web-theme-button-carousel-rest-background': string;
194
+ 'hpe-web-theme-button-carousel-rest-border-color': string;
195
+ 'hpe-web-theme-button-carousel-rest-icon-color': string;
196
+ 'hpe-web-display-font': string;
197
+ 'hpe-web-display-bold-2xlarge-font-size': string;
198
+ 'hpe-web-display-bold-2xlarge-font-weight': string;
199
+ 'hpe-web-display-bold-2xlarge-letter-spacing': string;
200
+ 'hpe-web-display-bold-2xlarge-line-height': string;
201
+ 'hpe-web-display-bold-large-font-size': string;
202
+ 'hpe-web-display-bold-large-font-weight': string;
203
+ 'hpe-web-display-bold-large-letter-spacing': string;
204
+ 'hpe-web-display-bold-large-line-height': string;
205
+ 'hpe-web-display-bold-xlarge-font-size': string;
206
+ 'hpe-web-display-bold-xlarge-font-weight': string;
207
+ 'hpe-web-display-bold-xlarge-letter-spacing': string;
208
+ 'hpe-web-display-bold-xlarge-line-height': string;
209
+ 'hpe-web-display-light-2xlarge-font-size': string;
210
+ 'hpe-web-display-light-2xlarge-font-weight': string;
211
+ 'hpe-web-display-light-2xlarge-letter-spacing': string;
212
+ 'hpe-web-display-light-2xlarge-line-height': string;
213
+ 'hpe-web-display-light-large-font-size': string;
214
+ 'hpe-web-display-light-large-font-weight': string;
215
+ 'hpe-web-display-light-large-letter-spacing': string;
216
+ 'hpe-web-display-light-large-line-height': string;
217
+ 'hpe-web-display-light-xlarge-font-size': string;
218
+ 'hpe-web-display-light-xlarge-font-weight': string;
219
+ 'hpe-web-display-light-xlarge-letter-spacing': string;
220
+ 'hpe-web-display-light-xlarge-line-height': string;
221
+ 'hpe-web-display-regular-2xlarge-font-size': string;
222
+ 'hpe-web-display-regular-2xlarge-font-weight': string;
223
+ 'hpe-web-display-regular-2xlarge-letter-spacing': string;
224
+ 'hpe-web-display-regular-2xlarge-line-height': string;
225
+ 'hpe-web-display-regular-large-font-size': string;
226
+ 'hpe-web-display-regular-large-font-weight': string;
227
+ 'hpe-web-display-regular-large-letter-spacing': string;
228
+ 'hpe-web-display-regular-large-line-height': string;
229
+ 'hpe-web-display-regular-xlarge-font-size': string;
230
+ 'hpe-web-display-regular-xlarge-font-weight': string;
231
+ 'hpe-web-display-regular-xlarge-letter-spacing': string;
232
+ 'hpe-web-display-regular-xlarge-line-height': string;
233
+ 'hpe-web-heading-font': string;
234
+ 'hpe-web-heading-3xsmall-font-size': string;
235
+ 'hpe-web-heading-3xsmall-font-weight': string;
236
+ 'hpe-web-heading-3xsmall-letter-spacing': string;
237
+ 'hpe-web-heading-3xsmall-line-height': string;
238
+ 'hpe-web-heading-large-font-size': string;
239
+ 'hpe-web-heading-large-font-weight': string;
240
+ 'hpe-web-heading-large-letter-spacing': string;
241
+ 'hpe-web-heading-large-line-height': string;
242
+ 'hpe-web-heading-medium-font-size': string;
243
+ 'hpe-web-heading-medium-font-weight': string;
244
+ 'hpe-web-heading-medium-letter-spacing': string;
245
+ 'hpe-web-heading-medium-line-height': string;
246
+ 'hpe-web-heading-small-font-size': string;
247
+ 'hpe-web-heading-small-font-weight': string;
248
+ 'hpe-web-heading-small-letter-spacing': string;
249
+ 'hpe-web-heading-small-line-height': string;
250
+ 'hpe-web-heading-xlarge-font-size': string;
251
+ 'hpe-web-heading-xlarge-font-weight': string;
252
+ 'hpe-web-heading-xlarge-letter-spacing': string;
253
+ 'hpe-web-heading-xlarge-line-height': string;
254
+ 'hpe-web-heading-xsmall-font-size': string;
255
+ 'hpe-web-heading-xsmall-font-weight': string;
256
+ 'hpe-web-heading-xsmall-letter-spacing': string;
257
+ 'hpe-web-heading-xsmall-line-height': string;
258
+ 'hpe-web-heading-xxsmall-font-size': string;
259
+ 'hpe-web-heading-xxsmall-font-weight': string;
260
+ 'hpe-web-heading-xxsmall-letter-spacing': string;
261
+ 'hpe-web-heading-xxsmall-line-height': string;
262
+ 'hpe-web-quote-font': string;
263
+ 'hpe-web-quote-large-font-size': string;
264
+ 'hpe-web-quote-large-font-weight': string;
265
+ 'hpe-web-quote-large-letter-spacing': string;
266
+ 'hpe-web-quote-large-line-height': string;
267
+ 'hpe-web-quote-medium-font-size': string;
268
+ 'hpe-web-quote-medium-font-weight': string;
269
+ 'hpe-web-quote-medium-letter-spacing': string;
270
+ 'hpe-web-quote-medium-line-height': string;
271
+ 'hpe-web-quote-small-font-size': string;
272
+ 'hpe-web-quote-small-font-weight': string;
273
+ 'hpe-web-quote-small-letter-spacing': string;
274
+ 'hpe-web-quote-small-line-height': string;
275
+ 'hpe-web-text-font': string;
276
+ 'hpe-web-text-large-font-size': string;
277
+ 'hpe-web-text-large-font-weight': string;
278
+ 'hpe-web-text-large-letter-spacing': string;
279
+ 'hpe-web-text-large-line-height': string;
280
+ 'hpe-web-text-medium-font-size': string;
281
+ 'hpe-web-text-medium-font-weight': string;
282
+ 'hpe-web-text-medium-letter-spacing': string;
283
+ 'hpe-web-text-medium-line-height': string;
284
+ 'hpe-web-text-small-font-size': string;
285
+ 'hpe-web-text-small-font-weight': string;
286
+ 'hpe-web-text-small-letter-spacing': string;
287
+ 'hpe-web-text-small-line-height': string;
288
+ 'hpe-web-text-xsmall-font-size': string;
289
+ 'hpe-web-text-xsmall-font-weight': string;
290
+ 'hpe-web-text-xsmall-letter-spacing': string;
291
+ 'hpe-web-text-xsmall-line-height': string;
292
+ 'hpe-web-spacing-3xlarge': string;
293
+ 'hpe-web-spacing-3xsmall': string;
294
+ 'hpe-web-spacing-4xlarge': string;
295
+ 'hpe-web-spacing-4xsmall': string;
296
+ 'hpe-web-spacing-hair': string;
297
+ 'hpe-web-spacing-large': string;
298
+ 'hpe-web-spacing-medium': string;
299
+ 'hpe-web-spacing-none': string;
300
+ 'hpe-web-spacing-small': string;
301
+ 'hpe-web-spacing-xlarge': string;
302
+ 'hpe-web-spacing-xsmall': string;
303
+ 'hpe-web-spacing-xxlarge': string;
304
+ 'hpe-web-spacing-xxsmall': string;
305
+ };
306
+
307
+ export default tokens;
package/dist/js/tokens.dark.d.ts ADDED
@@ -0,0 +1,98 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ declare const tokens: {
6
+ 'hpe-web-button-play-rest-icon-color': string;
7
+ 'hpe-web-color-background-card': string;
8
+ 'hpe-web-color-background-card-hover': string;
9
+ 'hpe-web-color-background-component': string;
10
+ 'hpe-web-color-background-component-disabled': string;
11
+ 'hpe-web-color-background-component-hover': string;
12
+ 'hpe-web-color-background-contrast': string;
13
+ 'hpe-web-color-background-critical': string;
14
+ 'hpe-web-color-background-default': string;
15
+ 'hpe-web-color-background-focus': string;
16
+ 'hpe-web-color-background-neutral': string;
17
+ 'hpe-web-color-background-neutral-strong': string;
18
+ 'hpe-web-color-background-neutral-weak': string;
19
+ 'hpe-web-color-background-ok': string;
20
+ 'hpe-web-color-background-primary': string;
21
+ 'hpe-web-color-background-primary-strong': string;
22
+ 'hpe-web-color-background-warning': string;
23
+ 'hpe-web-color-border-critical': string;
24
+ 'hpe-web-color-border-default': string;
25
+ 'hpe-web-color-border-focus': string;
26
+ 'hpe-web-color-border-ok': string;
27
+ 'hpe-web-color-border-primary': string;
28
+ 'hpe-web-color-border-primary-strong': string;
29
+ 'hpe-web-color-border-warning': string;
30
+ 'hpe-web-color-border-weak': string;
31
+ 'hpe-web-color-decorative-black': string;
32
+ 'hpe-web-color-decorative-blue': string;
33
+ 'hpe-web-color-decorative-brand': string;
34
+ 'hpe-web-color-decorative-cyan': string;
35
+ 'hpe-web-color-decorative-green': string;
36
+ 'hpe-web-color-decorative-neutral': string;
37
+ 'hpe-web-color-decorative-neutral-hover': string;
38
+ 'hpe-web-color-decorative-purple': string;
39
+ 'hpe-web-color-decorative-white': string;
40
+ 'hpe-web-color-gradient-element-green-stop0': string;
41
+ 'hpe-web-color-gradient-element-green-stop100': string;
42
+ 'hpe-web-color-gradient-element-neutral-stop0': string;
43
+ 'hpe-web-color-gradient-element-neutral-stop100': string;
44
+ 'hpe-web-color-gradient-element-neutral-stop15': string;
45
+ 'hpe-web-color-gradient-element-neutral-stop28': string;
46
+ 'hpe-web-color-gradient-element-neutral-stop38': string;
47
+ 'hpe-web-color-gradient-element-neutral-stop47': string;
48
+ 'hpe-web-color-gradient-element-neutral-stop54': string;
49
+ 'hpe-web-color-gradient-element-neutral-stop60': string;
50
+ 'hpe-web-color-gradient-element-neutral-stop65': string;
51
+ 'hpe-web-color-gradient-element-neutral-stop70': string;
52
+ 'hpe-web-color-gradient-element-neutral-stop73': string;
53
+ 'hpe-web-color-gradient-element-neutral-stop77': string;
54
+ 'hpe-web-color-gradient-element-neutral-stop80': string;
55
+ 'hpe-web-color-gradient-element-neutral-stop84': string;
56
+ 'hpe-web-color-gradient-element-neutral-stop88': string;
57
+ 'hpe-web-color-gradient-element-neutral-stop94': string;
58
+ 'hpe-web-color-gradient-neutral-stop0': string;
59
+ 'hpe-web-color-gradient-neutral-stop100': string;
60
+ 'hpe-web-color-gradient-video-overlay-stop0': string;
61
+ 'hpe-web-color-gradient-video-overlay-stop100': string;
62
+ 'hpe-web-color-icon-critical': string;
63
+ 'hpe-web-color-icon-default': string;
64
+ 'hpe-web-color-icon-disabled': string;
65
+ 'hpe-web-color-icon-focus': string;
66
+ 'hpe-web-color-icon-neutral': string;
67
+ 'hpe-web-color-icon-ok': string;
68
+ 'hpe-web-color-icon-primary': string;
69
+ 'hpe-web-color-icon-primary-strong': string;
70
+ 'hpe-web-color-icon-strong': string;
71
+ 'hpe-web-color-icon-warning': string;
72
+ 'hpe-web-color-icon-weak': string;
73
+ 'hpe-web-color-logo': string;
74
+ 'hpe-web-color-text-body': string;
75
+ 'hpe-web-color-text-critical': string;
76
+ 'hpe-web-color-text-disabled': string;
77
+ 'hpe-web-color-text-focus': string;
78
+ 'hpe-web-color-text-header': string;
79
+ 'hpe-web-color-text-neutral-strong': string;
80
+ 'hpe-web-color-text-ok': string;
81
+ 'hpe-web-color-text-on-neutral': string;
82
+ 'hpe-web-color-text-primary': string;
83
+ 'hpe-web-color-text-primary-strong': string;
84
+ 'hpe-web-color-text-warning': string;
85
+ 'hpe-web-color-text-weak': string;
86
+ 'hpe-web-color-transparent': string;
87
+ 'hpe-web-theme-button-carousel-disabled-background': string;
88
+ 'hpe-web-theme-button-carousel-disabled-border-color': string;
89
+ 'hpe-web-theme-button-carousel-disabled-icon-color': string;
90
+ 'hpe-web-theme-button-carousel-hover-background': string;
91
+ 'hpe-web-theme-button-carousel-hover-border-color': string;
92
+ 'hpe-web-theme-button-carousel-hover-icon-color': string;
93
+ 'hpe-web-theme-button-carousel-rest-background': string;
94
+ 'hpe-web-theme-button-carousel-rest-border-color': string;
95
+ 'hpe-web-theme-button-carousel-rest-icon-color': string;
96
+ };
97
+
98
+ export default tokens;
package/dist/js/tokens.dark.mjs ADDED
@@ -0,0 +1,98 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ const tokens = {
6
+ 'hpe-web-button-play-rest-icon-color': "#068667",
7
+ 'hpe-web-color-background-card': "#292d3a",
8
+ 'hpe-web-color-background-card-hover': "#21242e",
9
+ 'hpe-web-color-background-component': "#292d3a",
10
+ 'hpe-web-color-background-component-disabled': "#d4d8db",
11
+ 'hpe-web-color-background-component-hover': "#535c66",
12
+ 'hpe-web-color-background-contrast': "#0000000a",
13
+ 'hpe-web-color-background-critical': "#cc1f1a",
14
+ 'hpe-web-color-background-default': "#1d1f27",
15
+ 'hpe-web-color-background-focus': "#2ad2c9",
16
+ 'hpe-web-color-background-neutral': "#d4d8db",
17
+ 'hpe-web-color-background-neutral-strong': "#ffffff",
18
+ 'hpe-web-color-background-neutral-weak': "#d4d8db",
19
+ 'hpe-web-color-background-ok': "#1ed8ae",
20
+ 'hpe-web-color-background-primary': "#01a982",
21
+ 'hpe-web-color-background-primary-strong': "#068667",
22
+ 'hpe-web-color-background-warning': "#d36d00",
23
+ 'hpe-web-color-border-critical': "#cc1f1a",
24
+ 'hpe-web-color-border-default': "#7d8a92",
25
+ 'hpe-web-color-border-focus': "#2ad2c9",
26
+ 'hpe-web-color-border-ok': "#17eba0",
27
+ 'hpe-web-color-border-primary': "#01a982",
28
+ 'hpe-web-color-border-primary-strong': "#068667",
29
+ 'hpe-web-color-border-warning': "#d36d00",
30
+ 'hpe-web-color-border-weak': "#535c66",
31
+ 'hpe-web-color-decorative-black': "#000000",
32
+ 'hpe-web-color-decorative-blue': "#0070f8",
33
+ 'hpe-web-color-decorative-brand': "#01a982",
34
+ 'hpe-web-color-decorative-cyan': "#00a4b3",
35
+ 'hpe-web-color-decorative-green': "#068667",
36
+ 'hpe-web-color-decorative-neutral': "#b1b9be",
37
+ 'hpe-web-color-decorative-neutral-hover': "#d4d8db",
38
+ 'hpe-web-color-decorative-purple': "#7764fc",
39
+ 'hpe-web-color-decorative-white': "#ffffff",
40
+ 'hpe-web-color-gradient-element-green-stop0': "#05cc93",
41
+ 'hpe-web-color-gradient-element-green-stop100': "#0f101600",
42
+ 'hpe-web-color-gradient-element-neutral-stop0': "#5c667245",
43
+ 'hpe-web-color-gradient-element-neutral-stop100': "#5c667200",
44
+ 'hpe-web-color-gradient-element-neutral-stop15': "#5c6672fc",
45
+ 'hpe-web-color-gradient-element-neutral-stop28': "#5c6672f5",
46
+ 'hpe-web-color-gradient-element-neutral-stop38': "#5c6672e8",
47
+ 'hpe-web-color-gradient-element-neutral-stop47': "#5c6672d9",
48
+ 'hpe-web-color-gradient-element-neutral-stop54': "#5c6672c7",
49
+ 'hpe-web-color-gradient-element-neutral-stop60': "#5c6672b2",
50
+ 'hpe-web-color-gradient-element-neutral-stop65': "#5c66729e",
51
+ 'hpe-web-color-gradient-element-neutral-stop70': "#5c667285",
52
+ 'hpe-web-color-gradient-element-neutral-stop73': "#5c66726e",
53
+ 'hpe-web-color-gradient-element-neutral-stop77': "#5c667257",
54
+ 'hpe-web-color-gradient-element-neutral-stop80': "#5c667242",
55
+ 'hpe-web-color-gradient-element-neutral-stop84': "#5c66722e",
56
+ 'hpe-web-color-gradient-element-neutral-stop88': "#5c66721a",
57
+ 'hpe-web-color-gradient-element-neutral-stop94': "#5c66720d",
58
+ 'hpe-web-color-gradient-neutral-stop0': "#1d1f2700",
59
+ 'hpe-web-color-gradient-neutral-stop100': "#1d1f27",
60
+ 'hpe-web-color-gradient-video-overlay-stop0': "#00000000",
61
+ 'hpe-web-color-gradient-video-overlay-stop100': "#00000066",
62
+ 'hpe-web-color-icon-critical': "#cc1f1a",
63
+ 'hpe-web-color-icon-default': "#e5e5e5",
64
+ 'hpe-web-color-icon-disabled': "#bebebe",
65
+ 'hpe-web-color-icon-focus': "#2ad2c9",
66
+ 'hpe-web-color-icon-neutral': "#ffffff",
67
+ 'hpe-web-color-icon-ok': "#1ed8ae",
68
+ 'hpe-web-color-icon-primary': "#01a982",
69
+ 'hpe-web-color-icon-primary-strong': "#01a982",
70
+ 'hpe-web-color-icon-strong': "#ffffff",
71
+ 'hpe-web-color-icon-warning': "#d36d00",
72
+ 'hpe-web-color-icon-weak': "#ffffff9c",
73
+ 'hpe-web-color-logo': "#01a982",
74
+ 'hpe-web-color-text-body': "#e5e5e5",
75
+ 'hpe-web-color-text-critical': "#fc6161",
76
+ 'hpe-web-color-text-disabled': "#bebebe",
77
+ 'hpe-web-color-text-focus': "#2ad2c9",
78
+ 'hpe-web-color-text-header': "#ffffff",
79
+ 'hpe-web-color-text-neutral-strong': "#f7f7f7",
80
+ 'hpe-web-color-text-ok': "#17eba0",
81
+ 'hpe-web-color-text-on-neutral': "#292d3a",
82
+ 'hpe-web-color-text-primary': "#00e0af",
83
+ 'hpe-web-color-text-primary-strong': "#01a982",
84
+ 'hpe-web-color-text-warning': "#ec8c25",
85
+ 'hpe-web-color-text-weak': "#ffffff9c",
86
+ 'hpe-web-color-transparent': "#ffffff00",
87
+ 'hpe-web-theme-button-carousel-disabled-background': "#a5a5a9",
88
+ 'hpe-web-theme-button-carousel-disabled-border-color': "#00000000",
89
+ 'hpe-web-theme-button-carousel-disabled-icon-color': "#292d3a",
90
+ 'hpe-web-theme-button-carousel-hover-background': "#d4d4d4",
91
+ 'hpe-web-theme-button-carousel-hover-border-color': "#ffffff00",
92
+ 'hpe-web-theme-button-carousel-hover-icon-color': "#292d3a",
93
+ 'hpe-web-theme-button-carousel-rest-background': "#e6e8e9",
94
+ 'hpe-web-theme-button-carousel-rest-border-color': "#00000000",
95
+ 'hpe-web-theme-button-carousel-rest-icon-color': "#292d3a"
96
+ };
97
+
98
+ export default tokens;