@hpe-web/design-tokens 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +22 -13
  2. package/dist/css/fonts/de.css +0 -164
  3. package/dist/css/fonts/en.css +0 -164
  4. package/dist/css/fonts/es.css +0 -164
  5. package/dist/css/fonts/fr.css +0 -164
  6. package/dist/css/fonts/it.css +0 -164
  7. package/dist/css/fonts/zh.css +1 -1
  8. package/dist/css/tokens.css +343 -264
  9. package/dist/css/tokens.dark.css +46 -63
  10. package/dist/css/tokens.md-lg.css +113 -103
  11. package/dist/css/tokens.xl.css +109 -86
  12. package/package.json +4 -8
  13. package/src/breakpoints.json +14 -0
  14. package/src/component/button.json +1382 -0
  15. package/{static → src}/fonts.json +17 -17
  16. package/src/hpe.resolver.json +94 -0
  17. package/{static → src}/locales.json +6 -6
  18. package/{dtcg/foundation/color.tokens.json → src/primitive/primitives.json} +874 -1172
  19. package/src/semantic/color.dark.json +414 -0
  20. package/src/semantic/color.light.json +415 -0
  21. package/src/semantic/dimension.md-lg.json +764 -0
  22. package/src/semantic/dimension.xl.json +764 -0
  23. package/src/semantic/dimension.xs-sm.json +764 -0
  24. package/transforms.mjs +7 -7
  25. package/dist/css/locales/de.tokens.css +0 -65
  26. package/dist/css/locales/es.tokens.css +0 -65
  27. package/dist/css/locales/fr.tokens.css +0 -65
  28. package/dist/css/locales/it.tokens.css +0 -65
  29. package/dist/css/locales/ja.tokens.css +0 -84
  30. package/dist/css/locales/ko.tokens.css +0 -84
  31. package/dist/css/locales/zh.tokens.css +0 -11
  32. package/dtcg/foundation/border-radius.tokens.json +0 -239
  33. package/dtcg/foundation/border-width.tokens.json +0 -103
  34. package/dtcg/foundation/breakpoint.tokens.json +0 -27
  35. package/dtcg/foundation/dimension.tokens.json +0 -258
  36. package/dtcg/foundation/font-family.tokens.json +0 -53
  37. package/dtcg/foundation/font-size.tokens.json +0 -408
  38. package/dtcg/foundation/font-weight.tokens.json +0 -214
  39. package/dtcg/foundation/letter-spacing.tokens.json +0 -203
  40. package/dtcg/foundation/line-height.tokens.json +0 -408
  41. package/dtcg/foundation/size.tokens.json +0 -191
  42. package/dtcg/foundation/space.tokens.json +0 -431
  43. package/dtcg/foundation/typography.tokens.json +0 -625
  44. package/dtcg/hpe.resolver.json +0 -178
  45. package/dtcg/semantic/border-radius.tokens.json +0 -149
  46. package/dtcg/semantic/border-width.tokens.json +0 -50
  47. package/dtcg/semantic/font-family.tokens.json +0 -42
  48. package/dtcg/semantic/font-size.tokens.json +0 -285
  49. package/dtcg/semantic/font-weight.tokens.json +0 -134
  50. package/dtcg/semantic/letter-spacing.tokens.json +0 -203
  51. package/dtcg/semantic/line-height.tokens.json +0 -285
  52. package/dtcg/semantic/size.tokens.json +0 -120
  53. package/dtcg/semantic/space.tokens.json +0 -275
  54. package/dtcg/semantic/typography.tokens.json +0 -536
  55. package/dtcg/theme/dark/color.tokens.json +0 -698
  56. package/dtcg/theme/light/color.tokens.json +0 -722
  57. package/dtcg/viewport/md-lg/font-size.tokens.json +0 -189
  58. package/dtcg/viewport/md-lg/font-weight.tokens.json +0 -11
  59. package/dtcg/viewport/md-lg/letter-spacing.tokens.json +0 -88
  60. package/dtcg/viewport/md-lg/line-height.tokens.json +0 -125
  61. package/dtcg/viewport/md-lg/size.tokens.json +0 -20
  62. package/dtcg/viewport/md-lg/space.tokens.json +0 -36
  63. package/dtcg/viewport/sm-xs/border-radius.tokens.json +0 -48
  64. package/dtcg/viewport/sm-xs/border-width.tokens.json +0 -15
  65. package/dtcg/viewport/sm-xs/font-size.tokens.json +0 -236
  66. package/dtcg/viewport/sm-xs/font-weight.tokens.json +0 -18
  67. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +0 -130
  68. package/dtcg/viewport/sm-xs/line-height.tokens.json +0 -236
  69. package/dtcg/viewport/sm-xs/size.tokens.json +0 -39
  70. package/dtcg/viewport/sm-xs/space.tokens.json +0 -46
  71. package/dtcg/viewport/xl/border-radius.tokens.json +0 -48
  72. package/dtcg/viewport/xl/font-size.tokens.json +0 -236
  73. package/dtcg/viewport/xl/letter-spacing.tokens.json +0 -122
  74. package/dtcg/viewport/xl/line-height.tokens.json +0 -178
  75. package/dtcg/viewport/xl/size.tokens.json +0 -84
  76. package/dtcg/viewport/xl/space.tokens.json +0 -68
  77. package/static/breakpoints.json +0 -23
package/dist/css/tokens.css CHANGED
@@ -3,97 +3,134 @@
3
3
  */
4
4
 
5
5
  :root, [data-theme="light"], .light-theme {
6
- --hpe-web-button-play-rest-icon-color: #068667;
7
- --hpe-web-multi-mode-button-anchor-large-border-radius: 624.9375rem;
8
- --hpe-web-multi-mode-button-anchor-large-font-size: 1.125rem;
9
- --hpe-web-multi-mode-button-anchor-large-line-height: 1.3333;
10
- --hpe-web-multi-mode-button-anchor-large-border-width: 4px;
11
- --hpe-web-multi-mode-button-anchor-large-icon-height: 1.25rem;
12
- --hpe-web-multi-mode-button-anchor-large-icon-width: 1.25rem;
13
- --hpe-web-multi-mode-button-anchor-large-min-height: 1rem;
14
- --hpe-web-multi-mode-button-anchor-large-gap-x: 0.5rem;
15
- --hpe-web-multi-mode-button-anchor-large-padding-x: 0px;
16
- --hpe-web-multi-mode-button-anchor-large-padding-y: 0px;
17
- --hpe-web-multi-mode-button-anchor-medium-border-radius: 624.9375rem;
18
- --hpe-web-multi-mode-button-anchor-medium-border-width: 0px;
19
- --hpe-web-multi-mode-button-anchor-medium-font-size: 1.125rem;
20
- --hpe-web-multi-mode-button-anchor-medium-line-height: 1.3333;
21
- --hpe-web-multi-mode-button-anchor-medium-icon-height: 1rem;
22
- --hpe-web-multi-mode-button-anchor-medium-icon-width: 1rem;
23
- --hpe-web-multi-mode-button-anchor-medium-min-height: 1.5rem;
24
- --hpe-web-multi-mode-button-anchor-medium-gap-x: 0.75rem;
25
- --hpe-web-multi-mode-button-anchor-medium-padding-x: 0px;
26
- --hpe-web-multi-mode-button-anchor-medium-padding-y: 0px;
27
- --hpe-web-multi-mode-button-anchor-small-border-radius: 624.9375rem;
28
- --hpe-web-multi-mode-button-anchor-small-border-width: 4px;
29
- --hpe-web-multi-mode-button-anchor-small-font-size: 1rem;
30
- --hpe-web-multi-mode-button-anchor-small-line-height: 1.5;
31
- --hpe-web-multi-mode-button-anchor-small-icon-height: 1rem;
32
- --hpe-web-multi-mode-button-anchor-small-icon-width: 1rem;
33
- --hpe-web-multi-mode-button-anchor-small-min-height: 0.875rem;
34
- --hpe-web-multi-mode-button-anchor-small-gap-x: 0.5rem;
35
- --hpe-web-multi-mode-button-anchor-small-padding-x: 0.125rem;
36
- --hpe-web-multi-mode-button-anchor-small-padding-y: 0px;
37
- --hpe-web-multi-mode-button-primary-large-border-radius: 624.9375rem;
38
- --hpe-web-multi-mode-button-primary-large-font-size: 1.125rem;
39
- --hpe-web-multi-mode-button-primary-large-line-height: 1.3333;
40
- --hpe-web-multi-mode-button-primary-large-border-width: 0px;
41
- --hpe-web-multi-mode-button-primary-large-icon-height: 1.25rem;
42
- --hpe-web-multi-mode-button-primary-large-icon-width: 1.25rem;
43
- --hpe-web-multi-mode-button-primary-large-min-height: 3.5rem;
44
- --hpe-web-multi-mode-button-primary-large-gap-x: 0.5rem;
45
- --hpe-web-multi-mode-button-primary-large-padding-x: 2.25rem;
46
- --hpe-web-multi-mode-button-primary-large-padding-y: 1rem;
47
- --hpe-web-multi-mode-button-primary-medium-border-radius: 624.9375rem;
48
- --hpe-web-multi-mode-button-primary-medium-border-width: 0px;
49
- --hpe-web-multi-mode-button-primary-medium-font-size: 1.125rem;
50
- --hpe-web-multi-mode-button-primary-medium-line-height: 1.3333;
51
- --hpe-web-multi-mode-button-primary-medium-icon-height: 1rem;
52
- --hpe-web-multi-mode-button-primary-medium-icon-width: 1.25rem;
53
- --hpe-web-multi-mode-button-primary-medium-min-height: 3.25rem;
54
- --hpe-web-multi-mode-button-primary-medium-gap-x: 0.75rem;
55
- --hpe-web-multi-mode-button-primary-medium-padding-x: 1.75rem;
56
- --hpe-web-multi-mode-button-primary-medium-padding-y: 0.875rem;
57
- --hpe-web-multi-mode-button-primary-small-border-radius: 624.9375rem;
58
- --hpe-web-multi-mode-button-primary-small-border-width: 0px;
59
- --hpe-web-multi-mode-button-primary-small-font-size: 1rem;
60
- --hpe-web-multi-mode-button-primary-small-line-height: 1.5;
61
- --hpe-web-multi-mode-button-primary-small-icon-height: 1rem;
62
- --hpe-web-multi-mode-button-primary-small-icon-width: 1rem;
63
- --hpe-web-multi-mode-button-primary-small-min-height: 3rem;
64
- --hpe-web-multi-mode-button-primary-small-gap-x: 0.5rem;
65
- --hpe-web-multi-mode-button-primary-small-padding-x: 1.5rem;
66
- --hpe-web-multi-mode-button-primary-small-padding-y: 0.75rem;
67
- --hpe-web-multi-mode-button-secondary-large-border-radius: 624.9375rem;
68
- --hpe-web-multi-mode-button-secondary-large-border-width: 4px;
69
- --hpe-web-multi-mode-button-secondary-large-font-size: 1.125rem;
70
- --hpe-web-multi-mode-button-secondary-large-line-height: 1.3333;
71
- --hpe-web-multi-mode-button-secondary-large-icon-height: 1.25rem;
72
- --hpe-web-multi-mode-button-secondary-large-icon-width: 1.25rem;
73
- --hpe-web-multi-mode-button-secondary-large-min-height: 3.5rem;
74
- --hpe-web-multi-mode-button-secondary-large-gap-x: 0.5rem;
75
- --hpe-web-multi-mode-button-secondary-large-padding-x: 2.25rem;
76
- --hpe-web-multi-mode-button-secondary-large-padding-y: 1rem;
77
- --hpe-web-multi-mode-button-secondary-medium-border-radius: 624.9375rem;
78
- --hpe-web-multi-mode-button-secondary-medium-border-width: 4px;
79
- --hpe-web-multi-mode-button-secondary-medium-font-size: 1.125rem;
80
- --hpe-web-multi-mode-button-secondary-medium-line-height: 1.3333;
81
- --hpe-web-multi-mode-button-secondary-medium-icon-height: 1rem;
82
- --hpe-web-multi-mode-button-secondary-medium-icon-width: 1.25rem;
83
- --hpe-web-multi-mode-button-secondary-medium-min-height: 3.25rem;
84
- --hpe-web-multi-mode-button-secondary-medium-gap-x: 0.75rem;
85
- --hpe-web-multi-mode-button-secondary-medium-padding-x: 1.75rem;
86
- --hpe-web-multi-mode-button-secondary-medium-padding-y: 0.875rem;
87
- --hpe-web-multi-mode-button-secondary-small-border-radius: 624.9375rem;
88
- --hpe-web-multi-mode-button-secondary-small-border-width: 3px;
89
- --hpe-web-multi-mode-button-secondary-small-font-size: 1rem;
90
- --hpe-web-multi-mode-button-secondary-small-line-height: 1.5;
91
- --hpe-web-multi-mode-button-secondary-small-icon-height: 1rem;
92
- --hpe-web-multi-mode-button-secondary-small-icon-width: 1rem;
93
- --hpe-web-multi-mode-button-secondary-small-min-height: 3rem;
94
- --hpe-web-multi-mode-button-secondary-small-gap-x: 0.5rem;
95
- --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
96
- --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
6
+ --hpe-web-deprecated-deprecated-gradient-element-green-stop0: #05cc93;
7
+ --hpe-web-deprecated-deprecated-gradient-element-green-stop100: #ffffff00;
8
+ --hpe-web-deprecated-deprecated-gradient-element-neutral-stop0: #292d3a45;
9
+ --hpe-web-deprecated-deprecated-gradient-neutral-stop100: #1d1f27;
10
+ --hpe-web-deprecated-deprecated-gradient-video-overlay-stop0: #00000000;
11
+ --hpe-web-deprecated-deprecated-gradient-video-overlay-stop100: #00000066;
12
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-background: #a5a5a9;
13
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-border-color: #00000000;
14
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-disabled-icon-color: #292d3a;
15
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-background: #d4d4d4;
16
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-border-color: #00000000;
17
+ --hpe-web-deprecated-depreacted-multi-mode-button-carousel-hover-icon-color: #292d3a;
18
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-background: #e6e8e9;
19
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-border-color: #00000000;
20
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-background-front: #1d1f27;
21
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-border-focus: #2ad2c9;
22
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-component: #292d3a;
23
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-deprecated-component-hover: #535c66;
24
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-icon-color: #068667;
25
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-icon-color-2: #292d3a;
26
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop0: #1d1f2700;
27
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop100: #5c667200;
28
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop15: #5c6672fc;
29
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop28: #5c6672f5;
30
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop38: #5c6672e8;
31
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop47: #5c6672d9;
32
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop54: #5c6672c7;
33
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop60: #5c6672b3;
34
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop65: #5c66729e;
35
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop70: #5c667285;
36
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop73: #5c66726e;
37
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop77: #5c667257;
38
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop80: #5c667242;
39
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop84: #5c66722e;
40
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop88: #5c66721a;
41
+ --hpe-web-deprecated-depreacted-multi-mode-button-play-rest-stop94: #5c66720d;
42
+ --hpe-web-border-width-default: 0.0625rem;
43
+ --hpe-web-border-width-large: 0.375rem;
44
+ --hpe-web-border-width-medium: 0.25rem;
45
+ --hpe-web-border-width-none: 0px;
46
+ --hpe-web-border-width-small: 0.125rem;
47
+ --hpe-web-border-width-xsmall: 0.0625rem;
48
+ --hpe-web-heading-h1-condensed-bold-font-size: 3rem;
49
+ --hpe-web-heading-h1-condensed-bold-font-weight: 400;
50
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.06rem;
51
+ --hpe-web-heading-h1-condensed-bold-line-height: 48;
52
+ --hpe-web-heading-h1-condensed-light-font-size: 3rem;
53
+ --hpe-web-heading-h1-condensed-light-font-weight: 400;
54
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 0.06rem;
55
+ --hpe-web-heading-h1-condensed-light-line-height: 48;
56
+ --hpe-web-heading-h1-condensed-medium-font-size: 3rem;
57
+ --hpe-web-heading-h1-condensed-medium-font-weight: 400;
58
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.06rem;
59
+ --hpe-web-heading-h1-condensed-medium-line-height: 48;
60
+ --hpe-web-heading-h1-default-font-size: 2.5rem;
61
+ --hpe-web-heading-h1-default-font-weight: 400;
62
+ --hpe-web-heading-h1-default-letter-spacing: -0.05rem;
63
+ --hpe-web-heading-h1-default-line-height: 46;
64
+ --hpe-web-heading-h1-large-condensed-bold-font-size: 3.75rem;
65
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
66
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.075rem;
67
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 60;
68
+ --hpe-web-heading-h1-large-condensed-light-font-size: 3.75rem;
69
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
70
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
71
+ --hpe-web-heading-h1-large-condensed-light-line-height: 90;
72
+ --hpe-web-heading-h1-large-condensed-medium-font-size: 3.75rem;
73
+ --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
74
+ --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.075rem;
75
+ --hpe-web-heading-h1-large-condensed-medium-line-height: 60;
76
+ --hpe-web-heading-h1-large-default-font-size: 2.5rem;
77
+ --hpe-web-heading-h1-large-default-font-weight: 400;
78
+ --hpe-web-heading-h1-large-default-letter-spacing: -0.05rem;
79
+ --hpe-web-heading-h1-large-default-line-height: 46;
80
+ --hpe-web-heading-h2-default-font-size: 2rem;
81
+ --hpe-web-heading-h2-default-font-weight: 400;
82
+ --hpe-web-heading-h2-default-letter-spacing: -0.02rem;
83
+ --hpe-web-heading-h2-default-line-height: 38;
84
+ --hpe-web-heading-h3-default-font-size: 1.625rem;
85
+ --hpe-web-heading-h3-default-font-weight: 400;
86
+ --hpe-web-heading-h3-default-letter-spacing: 0px;
87
+ --hpe-web-heading-h3-default-line-height: 32;
88
+ --hpe-web-heading-h4-default-font-size: 1.25rem;
89
+ --hpe-web-heading-h4-default-font-weight: 400;
90
+ --hpe-web-heading-h4-default-letter-spacing: 0px;
91
+ --hpe-web-heading-h4-default-line-height: 26;
92
+ --hpe-web-heading-h5-default-font-size: 1rem;
93
+ --hpe-web-heading-h5-default-font-weight: 400;
94
+ --hpe-web-heading-h5-default-letter-spacing: 0px;
95
+ --hpe-web-heading-h5-default-line-height: 22;
96
+ --hpe-web-heading-h6-default-font-size: 0.875rem;
97
+ --hpe-web-heading-h6-default-font-weight: 400;
98
+ --hpe-web-heading-h6-default-letter-spacing: 0px;
99
+ --hpe-web-heading-h6-default-line-height: 20;
100
+ --hpe-web-icon-large-size: 1.375rem;
101
+ --hpe-web-icon-medium-size: 1.125rem;
102
+ --hpe-web-icon-small-size: 1rem;
103
+ --hpe-web-icon-xlarge-size: 1.5rem;
104
+ --hpe-web-icon-xsmall-size: 0.875rem;
105
+ --hpe-web-icon-xxlarge-size: 2.25rem;
106
+ --hpe-web-paragraph-body-copy-font-size: 1rem;
107
+ --hpe-web-paragraph-body-copy-font-weight: 400;
108
+ --hpe-web-paragraph-body-copy-letter-spacing: 0px;
109
+ --hpe-web-paragraph-body-copy-line-height: 24;
110
+ --hpe-web-paragraph-disclaimer-font-size: 0.75rem;
111
+ --hpe-web-paragraph-disclaimer-font-weight: 400;
112
+ --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
113
+ --hpe-web-paragraph-disclaimer-line-height: 18;
114
+ --hpe-web-paragraph-large-body-copy-font-size: 1.25rem;
115
+ --hpe-web-paragraph-large-body-copy-font-weight: 400;
116
+ --hpe-web-paragraph-large-body-copy-letter-spacing: -0.0125rem;
117
+ --hpe-web-paragraph-large-body-copy-line-height: 30;
118
+ --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
119
+ --hpe-web-paragraph-small-body-copy-font-weight: 400;
120
+ --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
121
+ --hpe-web-paragraph-small-body-copy-line-height: 20;
122
+ --hpe-web-quote-large-font-size: 2rem;
123
+ --hpe-web-quote-large-font-weight: 400;
124
+ --hpe-web-quote-large-letter-spacing: -0.04rem;
125
+ --hpe-web-quote-large-line-height: 42;
126
+ --hpe-web-quote-medium-font-size: 1.75rem;
127
+ --hpe-web-quote-medium-font-weight: 400;
128
+ --hpe-web-quote-medium-letter-spacing: -0.0175rem;
129
+ --hpe-web-quote-medium-line-height: 38;
130
+ --hpe-web-quote-small-font-size: 1.5rem;
131
+ --hpe-web-quote-small-font-weight: 400;
132
+ --hpe-web-quote-small-letter-spacing: -0.015rem;
133
+ --hpe-web-quote-small-line-height: 34;
97
134
  --hpe-web-radius-full: 624.9375rem;
98
135
  --hpe-web-radius-hair: 0.0625rem;
99
136
  --hpe-web-radius-large: 1rem;
@@ -104,207 +141,249 @@
104
141
  --hpe-web-radius-xsmall: 0.375rem;
105
142
  --hpe-web-radius-xxlarge: 2rem;
106
143
  --hpe-web-radius-xxsmall: 0.25rem;
107
- --hpe-web-breakpoint-xs: 1px;
108
- --hpe-web-breakpoint-sm: 768px;
109
- --hpe-web-breakpoint-md: 992px;
110
- --hpe-web-breakpoint-lg: 1200px;
111
- --hpe-web-breakpoint-xl: 1600px;
144
+ --hpe-web-spacing-3xlarge: 6rem;
145
+ --hpe-web-spacing-3xsmall: 0.5rem;
146
+ --hpe-web-spacing-4xlarge: 10rem;
147
+ --hpe-web-spacing-4xsmall: 0.25rem;
148
+ --hpe-web-spacing-hair: 0.0625rem;
149
+ --hpe-web-spacing-large: 2.5rem;
150
+ --hpe-web-spacing-medium: 2rem;
151
+ --hpe-web-spacing-none: 0px;
152
+ --hpe-web-spacing-small: 1.5rem;
153
+ --hpe-web-spacing-xlarge: 3rem;
154
+ --hpe-web-spacing-xsmall: 1rem;
155
+ --hpe-web-spacing-xxlarge: 4rem;
156
+ --hpe-web-spacing-xxsmall: 0.75rem;
157
+ --hpe-web-color-background-back: #f7f7f7;
112
158
  --hpe-web-color-background-card: #f7f7f7;
113
- --hpe-web-color-background-card-hover: #e6e8e9;
114
- --hpe-web-color-background-component: #e6e8e9;
115
- --hpe-web-color-background-component-disabled: #a5a5a9;
116
- --hpe-web-color-background-component-hover: #d4d4d4;
159
+ --hpe-web-color-background-carousel: #535c66;
160
+ --hpe-web-color-background-carousel-disabled: #b1b9be;
161
+ --hpe-web-color-background-carousel-hover: #606a70;
117
162
  --hpe-web-color-background-contrast: #0000000a;
118
- --hpe-web-color-background-critical: #cc1f1a;
163
+ --hpe-web-color-background-critical: #ffecec;
119
164
  --hpe-web-color-background-default: #ffffff;
120
- --hpe-web-color-background-focus: #2ad2c9;
165
+ --hpe-web-color-background-disabled: #0000000a;
166
+ --hpe-web-color-background-floating: #ffffff;
121
167
  --hpe-web-color-background-neutral: #535c66;
122
168
  --hpe-web-color-background-neutral-strong: #292d3a;
123
169
  --hpe-web-color-background-neutral-weak: #d4d8db;
124
- --hpe-web-color-background-ok: #009a71;
170
+ --hpe-web-color-background-ok: #d1ffee;
125
171
  --hpe-web-color-background-primary: #01a982;
126
172
  --hpe-web-color-background-primary-strong: #068667;
127
- --hpe-web-color-background-warning: #d36d00;
173
+ --hpe-web-color-background-sunken: #e6e8e9;
174
+ --hpe-web-color-background-warning: #fff3dd;
128
175
  --hpe-web-color-border-critical: #cc1f1a;
129
- --hpe-web-color-border-default: #a0a2a8;
130
- --hpe-web-color-border-focus: #2ad2c9;
176
+ --hpe-web-color-border-default: #b1b9be;
177
+ --hpe-web-color-border-disabled: #0000001f;
131
178
  --hpe-web-color-border-ok: #009a71;
132
179
  --hpe-web-color-border-primary: #01a982;
133
- --hpe-web-color-border-primary-strong: #068667;
180
+ --hpe-web-color-border-selected: #006750;
181
+ --hpe-web-color-border-strong: #535c66;
134
182
  --hpe-web-color-border-warning: #d36d00;
135
- --hpe-web-color-border-weak: #d1d1d1;
183
+ --hpe-web-color-border-weak: #d4d8db;
136
184
  --hpe-web-color-decorative-black: #000000;
137
185
  --hpe-web-color-decorative-blue: #0070f8;
138
186
  --hpe-web-color-decorative-brand: #01a982;
139
187
  --hpe-web-color-decorative-cyan: #62e5f6;
140
188
  --hpe-web-color-decorative-green: #05cc93;
141
189
  --hpe-web-color-decorative-neutral: #7d8a92;
142
- --hpe-web-color-decorative-neutral-hover: #606a70;
190
+ --hpe-web-color-decorative-neutral-strong: #606a70;
143
191
  --hpe-web-color-decorative-purple: #7764fc;
144
192
  --hpe-web-color-decorative-white: #ffffff;
145
- --hpe-web-color-gradient-element-green-stop0: #05cc93;
146
- --hpe-web-color-gradient-element-green-stop100: #ffffff00;
147
- --hpe-web-color-gradient-element-neutral-stop0: #292d3a45;
148
- --hpe-web-color-gradient-element-neutral-stop100: #ffffff00;
149
- --hpe-web-color-gradient-element-neutral-stop15: #393d4840;
150
- --hpe-web-color-gradient-element-neutral-stop28: #494e573d;
151
- --hpe-web-color-gradient-element-neutral-stop38: #5a5f6538;
152
- --hpe-web-color-gradient-element-neutral-stop47: #6a707333;
153
- --hpe-web-color-gradient-element-neutral-stop54: #7b818130;
154
- --hpe-web-color-gradient-element-neutral-stop60: #8c92902b;
155
- --hpe-web-color-gradient-element-neutral-stop65: #9da39e26;
156
- --hpe-web-color-gradient-element-neutral-stop70: #adb4ac21;
157
- --hpe-web-color-gradient-element-neutral-stop73: #bec5bb1f;
158
- --hpe-web-color-gradient-element-neutral-stop77: #cfd6c91a;
159
- --hpe-web-color-gradient-element-neutral-stop80: #e0e7d714;
160
- --hpe-web-color-gradient-element-neutral-stop84: #f0f8e512;
161
- --hpe-web-color-gradient-element-neutral-stop88: #fafff20d;
162
- --hpe-web-color-gradient-element-neutral-stop94: #ffffff08;
163
- --hpe-web-color-gradient-neutral-stop0: #1d1f2700;
164
- --hpe-web-color-gradient-neutral-stop100: #1d1f27;
165
- --hpe-web-color-gradient-video-overlay-stop0: #00000000;
166
- --hpe-web-color-gradient-video-overlay-stop100: #00000066;
193
+ --hpe-web-color-foreground-critical: #ec3331;
194
+ --hpe-web-color-foreground-ok: #009a71;
195
+ --hpe-web-color-foreground-primary: #006750;
196
+ --hpe-web-color-foreground-unknown: #7d8a92;
197
+ --hpe-web-color-foreground-warning: #d36d00;
167
198
  --hpe-web-color-icon-critical: #cc1f1a;
168
- --hpe-web-color-icon-default: #67686e;
169
- --hpe-web-color-icon-disabled: #a0a2ab;
170
- --hpe-web-color-icon-focus: #2ad2c9;
199
+ --hpe-web-color-icon-default: #3e4550;
200
+ --hpe-web-color-icon-disabled: #0000003d;
201
+ --hpe-web-color-icon-info: #0055da;
171
202
  --hpe-web-color-icon-neutral: #292d3a;
172
203
  --hpe-web-color-icon-ok: #009a71;
204
+ --hpe-web-color-icon-on-strong: #ffffff;
173
205
  --hpe-web-color-icon-primary: #01a982;
174
- --hpe-web-color-icon-primary-strong: #005f49;
206
+ --hpe-web-color-icon-primary-strong: #006750;
175
207
  --hpe-web-color-icon-strong: #292d3a;
176
208
  --hpe-web-color-icon-warning: #d36d00;
177
- --hpe-web-color-icon-weak: #676767;
178
- --hpe-web-color-logo: #01a982;
179
- --hpe-web-color-text-body: #67686e;
209
+ --hpe-web-color-icon-weak: #606a70;
210
+ --hpe-web-color-logo-element: #01a982;
211
+ --hpe-web-color-logo-logo-text: #000000;
180
212
  --hpe-web-color-text-critical: #cc1f1a;
181
- --hpe-web-color-text-disabled: #a0a2ab;
182
- --hpe-web-color-text-focus: #2ad2c9;
183
- --hpe-web-color-text-header: #292d3a;
184
- --hpe-web-color-text-neutral-strong: #21242e;
213
+ --hpe-web-color-text-default: #3e4550;
214
+ --hpe-web-color-text-disabled: #0000003d;
215
+ --hpe-web-color-text-neutral-strong: #292d3a;
185
216
  --hpe-web-color-text-ok: #009a71;
186
- --hpe-web-color-text-on-neutral: #ffffff;
187
- --hpe-web-color-text-primary: #068667;
188
- --hpe-web-color-text-primary-strong: #005f49;
217
+ --hpe-web-color-text-on-strong: #ffffff;
218
+ --hpe-web-color-text-primary: #01a982;
219
+ --hpe-web-color-text-primary-strong: #008567;
220
+ --hpe-web-color-text-strong: #292d3a;
189
221
  --hpe-web-color-text-warning: #d36d00;
190
- --hpe-web-color-text-weak: #676767;
222
+ --hpe-web-color-text-weak: #606a70;
191
223
  --hpe-web-color-transparent: #00000000;
192
- --hpe-web-theme-button-carousel-disabled-background: #b4b6ba;
193
- --hpe-web-theme-button-carousel-disabled-border-color: #00000000;
194
- --hpe-web-theme-button-carousel-disabled-icon-color: #ffffff;
195
- --hpe-web-theme-button-carousel-hover-background: #67686e;
196
- --hpe-web-theme-button-carousel-hover-border-color: #00000000;
197
- --hpe-web-theme-button-carousel-hover-icon-color: #ffffff;
198
- --hpe-web-theme-button-carousel-rest-background: #535c66;
199
- --hpe-web-theme-button-carousel-rest-border-color: #00000000;
200
- --hpe-web-theme-button-carousel-rest-icon-color: #ffffff;
201
- --hpe-web-display-font: "HPE Graphik XXCondensed", "Arial Narrow", Arial, sans-serif;
202
- --hpe-web-display-bold-2xlarge-font-size: 5.625rem;
203
- --hpe-web-display-bold-2xlarge-font-weight: 700;
204
- --hpe-web-display-bold-2xlarge-letter-spacing: 2px;
205
- --hpe-web-display-bold-2xlarge-line-height: 1;
206
- --hpe-web-display-bold-large-font-size: 3rem;
207
- --hpe-web-display-bold-large-font-weight: 700;
208
- --hpe-web-display-bold-large-letter-spacing: 0.96px;
209
- --hpe-web-display-bold-large-line-height: 1;
210
- --hpe-web-display-bold-xlarge-font-size: 3.75rem;
211
- --hpe-web-display-bold-xlarge-font-weight: 700;
212
- --hpe-web-display-bold-xlarge-letter-spacing: 1.2px;
213
- --hpe-web-display-bold-xlarge-line-height: 1;
214
- --hpe-web-display-light-2xlarge-font-size: 5.625rem;
215
- --hpe-web-display-light-2xlarge-font-weight: 300;
216
- --hpe-web-display-light-2xlarge-letter-spacing: 2px;
217
- --hpe-web-display-light-2xlarge-line-height: 1;
218
- --hpe-web-display-light-large-font-size: 3rem;
219
- --hpe-web-display-light-large-font-weight: 300;
220
- --hpe-web-display-light-large-letter-spacing: 0.96px;
221
- --hpe-web-display-light-large-line-height: 1;
222
- --hpe-web-display-light-xlarge-font-size: 3.75rem;
223
- --hpe-web-display-light-xlarge-font-weight: 300;
224
- --hpe-web-display-light-xlarge-letter-spacing: 1.2px;
225
- --hpe-web-display-light-xlarge-line-height: 1;
226
- --hpe-web-display-regular-2xlarge-font-size: 5.625rem;
227
- --hpe-web-display-regular-2xlarge-font-weight: 400;
228
- --hpe-web-display-regular-2xlarge-letter-spacing: 2px;
229
- --hpe-web-display-regular-2xlarge-line-height: 1;
230
- --hpe-web-display-regular-large-font-size: 3rem;
231
- --hpe-web-display-regular-large-font-weight: 400;
232
- --hpe-web-display-regular-large-letter-spacing: 0.96px;
233
- --hpe-web-display-regular-large-line-height: 1;
234
- --hpe-web-display-regular-xlarge-font-size: 3.75rem;
235
- --hpe-web-display-regular-xlarge-font-weight: 400;
236
- --hpe-web-display-regular-xlarge-letter-spacing: 1.2px;
237
- --hpe-web-display-regular-xlarge-line-height: 1;
238
- --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
239
- --hpe-web-heading-3xsmall-font-size: 0.875rem;
240
- --hpe-web-heading-3xsmall-font-weight: 500;
241
- --hpe-web-heading-3xsmall-letter-spacing: 0px;
242
- --hpe-web-heading-3xsmall-line-height: 1.4286;
243
- --hpe-web-heading-large-font-size: 2.5rem;
244
- --hpe-web-heading-large-font-weight: 500;
245
- --hpe-web-heading-large-letter-spacing: -0.8px;
246
- --hpe-web-heading-large-line-height: 1.15;
247
- --hpe-web-heading-medium-font-size: 2rem;
248
- --hpe-web-heading-medium-font-weight: 500;
249
- --hpe-web-heading-medium-letter-spacing: -0.32px;
250
- --hpe-web-heading-medium-line-height: 1.1875;
251
- --hpe-web-heading-small-font-size: 1.625rem;
252
- --hpe-web-heading-small-font-weight: 500;
253
- --hpe-web-heading-small-letter-spacing: 0px;
254
- --hpe-web-heading-small-line-height: 1.2308;
255
- --hpe-web-heading-xlarge-font-size: 2.5rem;
256
- --hpe-web-heading-xlarge-font-weight: 500;
257
- --hpe-web-heading-xlarge-letter-spacing: -0.8px;
258
- --hpe-web-heading-xlarge-line-height: 1.15;
259
- --hpe-web-heading-xsmall-font-size: 1.25rem;
260
- --hpe-web-heading-xsmall-font-weight: 500;
261
- --hpe-web-heading-xsmall-letter-spacing: 0px;
262
- --hpe-web-heading-xsmall-line-height: 1.3;
263
- --hpe-web-heading-xxsmall-font-size: 1rem;
264
- --hpe-web-heading-xxsmall-font-weight: 500;
265
- --hpe-web-heading-xxsmall-letter-spacing: 0px;
266
- --hpe-web-heading-xxsmall-line-height: 1.375;
267
- --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
268
- --hpe-web-quote-large-font-size: 2rem;
269
- --hpe-web-quote-large-font-weight: 400;
270
- --hpe-web-quote-large-letter-spacing: -0.64px;
271
- --hpe-web-quote-large-line-height: 1.3125;
272
- --hpe-web-quote-medium-font-size: 1.75rem;
273
- --hpe-web-quote-medium-font-weight: 400;
274
- --hpe-web-quote-medium-letter-spacing: -0.28px;
275
- --hpe-web-quote-medium-line-height: 1.3571;
276
- --hpe-web-quote-small-font-size: 1.5rem;
277
- --hpe-web-quote-small-font-weight: 400;
278
- --hpe-web-quote-small-letter-spacing: -0.24px;
279
- --hpe-web-quote-small-line-height: 1.4167;
280
- --hpe-web-text-font: "HPE Graphik", Arial, sans-serif;
281
- --hpe-web-text-large-font-size: 1.25rem;
282
- --hpe-web-text-large-font-weight: 400;
283
- --hpe-web-text-large-letter-spacing: -0.2px;
284
- --hpe-web-text-large-line-height: 1.5;
285
- --hpe-web-text-medium-font-size: 1rem;
286
- --hpe-web-text-medium-font-weight: 400;
287
- --hpe-web-text-medium-letter-spacing: 0px;
288
- --hpe-web-text-medium-line-height: 1.5;
289
- --hpe-web-text-small-font-size: 0.875rem;
290
- --hpe-web-text-small-font-weight: 400;
291
- --hpe-web-text-small-letter-spacing: 0px;
292
- --hpe-web-text-small-line-height: 1.4286;
293
- --hpe-web-text-xsmall-font-size: 0.75rem;
294
- --hpe-web-text-xsmall-font-weight: 400;
295
- --hpe-web-text-xsmall-letter-spacing: 0px;
296
- --hpe-web-text-xsmall-line-height: 1.5;
297
- --hpe-web-spacing-3xlarge: 6rem;
298
- --hpe-web-spacing-3xsmall: 0.5rem;
299
- --hpe-web-spacing-4xlarge: 10rem;
300
- --hpe-web-spacing-4xsmall: 0.25rem;
301
- --hpe-web-spacing-hair: 0.0625rem;
302
- --hpe-web-spacing-large: 2.5rem;
303
- --hpe-web-spacing-medium: 2rem;
304
- --hpe-web-spacing-none: 0px;
305
- --hpe-web-spacing-small: 1.5rem;
306
- --hpe-web-spacing-xlarge: 3rem;
307
- --hpe-web-spacing-xsmall: 1rem;
308
- --hpe-web-spacing-xxlarge: 4rem;
309
- --hpe-web-spacing-xxsmall: 0.75rem;
224
+ --hpe-web-button-carousel-disabled-background: #b1b9be;
225
+ --hpe-web-button-carousel-disabled-border-color: #00000000;
226
+ --hpe-web-button-carousel-disabled-icon-color: #ffffff;
227
+ --hpe-web-button-carousel-hover-background: #606a70;
228
+ --hpe-web-button-carousel-hover-border-color: #00000000;
229
+ --hpe-web-button-carousel-hover-icon-color: #ffffff;
230
+ --hpe-web-button-carousel-rest-background: #535c66;
231
+ --hpe-web-button-carousel-rest-border-color: #00000000;
232
+ --hpe-web-button-carousel-rest-icon-color: #ffffff;
233
+ --hpe-web-button-link-large-border-radius: 624.9375rem;
234
+ --hpe-web-button-link-large-border-width: 0.25rem;
235
+ --hpe-web-button-link-large-font-size: 1.25rem;
236
+ --hpe-web-button-link-large-gap-x: 0.75rem;
237
+ --hpe-web-button-link-large-icon-height: 1.25rem;
238
+ --hpe-web-button-link-large-icon-width: 1.25rem;
239
+ --hpe-web-button-link-large-line-height: 28;
240
+ --hpe-web-button-link-large-min-height: 1.25rem;
241
+ --hpe-web-button-link-large-padding-x: 0px;
242
+ --hpe-web-button-link-large-padding-y: 0px;
243
+ --hpe-web-button-link-medium-border-radius: 624.9375rem;
244
+ --hpe-web-button-link-medium-border-width: 0.25rem;
245
+ --hpe-web-button-link-medium-font-size: 1.125rem;
246
+ --hpe-web-button-link-medium-gap-x: 0.75rem;
247
+ --hpe-web-button-link-medium-icon-height: 1rem;
248
+ --hpe-web-button-link-medium-icon-width: 1rem;
249
+ --hpe-web-button-link-medium-line-height: 24;
250
+ --hpe-web-button-link-medium-min-height: 1.5rem;
251
+ --hpe-web-button-link-medium-padding-x: 0px;
252
+ --hpe-web-button-link-medium-padding-y: 0px;
253
+ --hpe-web-button-link-neutral-disabled-rest-background: #00000000;
254
+ --hpe-web-button-link-neutral-disabled-rest-border-color: #00000000;
255
+ --hpe-web-button-link-neutral-disabled-rest-font-weight: 400;
256
+ --hpe-web-button-link-neutral-disabled-rest-icon-color: #0000003d;
257
+ --hpe-web-button-link-neutral-disabled-rest-text-color: #0000003d;
258
+ --hpe-web-button-link-neutral-hover-background: #00000000;
259
+ --hpe-web-button-link-neutral-hover-border-color: #00000000;
260
+ --hpe-web-button-link-neutral-hover-font-weight: 400;
261
+ --hpe-web-button-link-neutral-hover-icon-color: #292d3a;
262
+ --hpe-web-button-link-neutral-hover-text-color: #292d3a;
263
+ --hpe-web-button-link-neutral-rest-background: #00000000;
264
+ --hpe-web-button-link-neutral-rest-border-color: #00000000;
265
+ --hpe-web-button-link-neutral-rest-font-weight: 400;
266
+ --hpe-web-button-link-neutral-rest-icon-color: #292d3a;
267
+ --hpe-web-button-link-neutral-rest-text-color: #292d3a;
268
+ --hpe-web-button-link-primary-disabled-rest-background: #00000000;
269
+ --hpe-web-button-link-primary-disabled-rest-border-color: #00000000;
270
+ --hpe-web-button-link-primary-disabled-rest-font-weight: 400;
271
+ --hpe-web-button-link-primary-disabled-rest-icon-color: #0000003d;
272
+ --hpe-web-button-link-primary-disabled-rest-text-color: #0000003d;
273
+ --hpe-web-button-link-primary-hover-background: #00000000;
274
+ --hpe-web-button-link-primary-hover-border-color: #00000000;
275
+ --hpe-web-button-link-primary-hover-font-weight: 400;
276
+ --hpe-web-button-link-primary-hover-icon-color: #008567;
277
+ --hpe-web-button-link-primary-hover-text-color: #008567;
278
+ --hpe-web-button-link-primary-rest-background: #00000000;
279
+ --hpe-web-button-link-primary-rest-border-color: #00000000;
280
+ --hpe-web-button-link-primary-rest-font-weight: 400;
281
+ --hpe-web-button-link-primary-rest-icon-color: #01a982;
282
+ --hpe-web-button-link-primary-rest-text-color: #01a982;
283
+ --hpe-web-button-link-small-border-radius: 624.9375rem;
284
+ --hpe-web-button-link-small-border-width: 0.25rem;
285
+ --hpe-web-button-link-small-font-size: 1rem;
286
+ --hpe-web-button-link-small-gap-x: 0.5rem;
287
+ --hpe-web-button-link-small-icon-height: 1rem;
288
+ --hpe-web-button-link-small-icon-width: 1rem;
289
+ --hpe-web-button-link-small-line-height: 24;
290
+ --hpe-web-button-link-small-min-height: 0.875rem;
291
+ --hpe-web-button-link-small-padding-x: 0px;
292
+ --hpe-web-button-link-small-padding-y: 0px;
293
+ --hpe-web-button-play-hover-background: #ffffff;
294
+ --hpe-web-button-play-hover-border-color: #00000000;
295
+ --hpe-web-button-play-hover-icon-color: #068667;
296
+ --hpe-web-button-play-rest-background: #ffffff;
297
+ --hpe-web-button-play-rest-border-color: #00000000;
298
+ --hpe-web-button-play-rest-icon-color: #068667;
299
+ --hpe-web-button-primary-disabled-rest-background: #d4d8db;
300
+ --hpe-web-button-primary-disabled-rest-border-color: #00000000;
301
+ --hpe-web-button-primary-disabled-rest-font-weight: 400;
302
+ --hpe-web-button-primary-disabled-rest-icon-color: #0000003d;
303
+ --hpe-web-button-primary-disabled-rest-text-color: #0000003d;
304
+ --hpe-web-button-primary-hover-background: #535c66;
305
+ --hpe-web-button-primary-hover-border-color: #00000000;
306
+ --hpe-web-button-primary-hover-font-weight: 400;
307
+ --hpe-web-button-primary-hover-icon-color: #ffffff;
308
+ --hpe-web-button-primary-hover-text-color: #ffffff;
309
+ --hpe-web-button-primary-large-border-radius: 624.9375rem;
310
+ --hpe-web-button-primary-large-border-width: 0px;
311
+ --hpe-web-button-primary-large-font-size: 1.25rem;
312
+ --hpe-web-button-primary-large-gap-x: 0.75rem;
313
+ --hpe-web-button-primary-large-icon-height: 1.25rem;
314
+ --hpe-web-button-primary-large-icon-width: 1.25rem;
315
+ --hpe-web-button-primary-large-line-height: 28;
316
+ --hpe-web-button-primary-large-min-height: 3.75rem;
317
+ --hpe-web-button-primary-large-padding-x: 2.25rem;
318
+ --hpe-web-button-primary-large-padding-y: 1rem;
319
+ --hpe-web-button-primary-medium-border-radius: 624.9375rem;
320
+ --hpe-web-button-primary-medium-border-width: 0px;
321
+ --hpe-web-button-primary-medium-font-size: 1.125rem;
322
+ --hpe-web-button-primary-medium-gap-x: 0.75rem;
323
+ --hpe-web-button-primary-medium-icon-height: 1rem;
324
+ --hpe-web-button-primary-medium-icon-width: 1rem;
325
+ --hpe-web-button-primary-medium-line-height: 24;
326
+ --hpe-web-button-primary-medium-min-height: 3.25rem;
327
+ --hpe-web-button-primary-medium-padding-x: 1.75rem;
328
+ --hpe-web-button-primary-medium-padding-y: 0.875rem;
329
+ --hpe-web-button-primary-rest-background: #292d3a;
330
+ --hpe-web-button-primary-rest-border-color: #00000000;
331
+ --hpe-web-button-primary-rest-font-weight: 400;
332
+ --hpe-web-button-primary-rest-icon-color: #ffffff;
333
+ --hpe-web-button-primary-rest-text-color: #ffffff;
334
+ --hpe-web-button-primary-small-border-radius: 624.9375rem;
335
+ --hpe-web-button-primary-small-border-width: 0px;
336
+ --hpe-web-button-primary-small-font-size: 1rem;
337
+ --hpe-web-button-primary-small-gap-x: 0.5rem;
338
+ --hpe-web-button-primary-small-icon-height: 1rem;
339
+ --hpe-web-button-primary-small-icon-width: 1rem;
340
+ --hpe-web-button-primary-small-line-height: 24;
341
+ --hpe-web-button-primary-small-min-height: 3rem;
342
+ --hpe-web-button-primary-small-padding-x: 1.5rem;
343
+ --hpe-web-button-primary-small-padding-y: 0.75rem;
344
+ --hpe-web-button-secondary-disabled-rest-background: #00000000;
345
+ --hpe-web-button-secondary-disabled-rest-border-color: #d4d8db;
346
+ --hpe-web-button-secondary-disabled-rest-font-weight: 400;
347
+ --hpe-web-button-secondary-disabled-rest-icon-color: #0000003d;
348
+ --hpe-web-button-secondary-disabled-rest-text-color: #0000003d;
349
+ --hpe-web-button-secondary-hover-background: #00000000;
350
+ --hpe-web-button-secondary-hover-border-color: #006750;
351
+ --hpe-web-button-secondary-hover-font-weight: 400;
352
+ --hpe-web-button-secondary-hover-icon-color: #292d3a;
353
+ --hpe-web-button-secondary-hover-text-color: #292d3a;
354
+ --hpe-web-button-secondary-large-border-radius: 624.9375rem;
355
+ --hpe-web-button-secondary-large-border-width: 0.25rem;
356
+ --hpe-web-button-secondary-large-font-size: 1.25rem;
357
+ --hpe-web-button-secondary-large-gap-x: 0.75rem;
358
+ --hpe-web-button-secondary-large-icon-height: 1.25rem;
359
+ --hpe-web-button-secondary-large-icon-width: 1.25rem;
360
+ --hpe-web-button-secondary-large-line-height: 28;
361
+ --hpe-web-button-secondary-large-min-height: 3.75rem;
362
+ --hpe-web-button-secondary-large-padding-x: 2.25rem;
363
+ --hpe-web-button-secondary-large-padding-y: 1rem;
364
+ --hpe-web-button-secondary-medium-border-radius: 624.9375rem;
365
+ --hpe-web-button-secondary-medium-border-width: 0.25rem;
366
+ --hpe-web-button-secondary-medium-font-size: 1.125rem;
367
+ --hpe-web-button-secondary-medium-gap-x: 0.75rem;
368
+ --hpe-web-button-secondary-medium-icon-height: 1rem;
369
+ --hpe-web-button-secondary-medium-icon-width: 1rem;
370
+ --hpe-web-button-secondary-medium-line-height: 24;
371
+ --hpe-web-button-secondary-medium-min-height: 3.25rem;
372
+ --hpe-web-button-secondary-medium-padding-x: 1.75rem;
373
+ --hpe-web-button-secondary-medium-padding-y: 0.875rem;
374
+ --hpe-web-button-secondary-rest-background: #00000000;
375
+ --hpe-web-button-secondary-rest-border-color: #01a982;
376
+ --hpe-web-button-secondary-rest-font-weight: 400;
377
+ --hpe-web-button-secondary-rest-icon-color: #292d3a;
378
+ --hpe-web-button-secondary-rest-text-color: #292d3a;
379
+ --hpe-web-button-secondary-small-border-radius: 624.9375rem;
380
+ --hpe-web-button-secondary-small-border-width: 0.1875rem;
381
+ --hpe-web-button-secondary-small-font-size: 1rem;
382
+ --hpe-web-button-secondary-small-gap-x: 0.5rem;
383
+ --hpe-web-button-secondary-small-icon-height: 1rem;
384
+ --hpe-web-button-secondary-small-icon-width: 1rem;
385
+ --hpe-web-button-secondary-small-line-height: 24;
386
+ --hpe-web-button-secondary-small-min-height: 3rem;
387
+ --hpe-web-button-secondary-small-padding-x: 1.5rem;
388
+ --hpe-web-button-secondary-small-padding-y: 0.75rem;
310
389
  }