@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.dark.css CHANGED
@@ -3,94 +3,77 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"], .dark-theme {
6
- --hpe-web-button-play-rest-icon-color: #068667;
6
+ --hpe-web-deprecated-deprecated-gradient-element-green-stop0: #05cc93;
7
+ --hpe-web-deprecated-deprecated-gradient-element-green-stop100: #0f101600;
8
+ --hpe-web-deprecated-deprecated-gradient-element-neutral-stop0: #5c667245;
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-color-background-back: #292d3a;
7
13
  --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-carousel: #e6e8e9;
15
+ --hpe-web-color-background-carousel-disabled: #b1b9be;
16
+ --hpe-web-color-background-carousel-hover: #d4d8db;
17
+ --hpe-web-color-background-contrast: #ffffff0f;
18
+ --hpe-web-color-background-critical: #552120;
14
19
  --hpe-web-color-background-default: #1d1f27;
15
- --hpe-web-color-background-focus: #2ad2c9;
20
+ --hpe-web-color-background-disabled: #ffffff12;
21
+ --hpe-web-color-background-floating: #1d1f27;
16
22
  --hpe-web-color-background-neutral: #d4d8db;
17
23
  --hpe-web-color-background-neutral-strong: #ffffff;
18
- --hpe-web-color-background-neutral-weak: #d4d8db;
19
- --hpe-web-color-background-ok: #1ed8ae;
24
+ --hpe-web-color-background-neutral-weak: #7d8a92;
25
+ --hpe-web-color-background-ok: #093d32;
20
26
  --hpe-web-color-background-primary: #01a982;
21
27
  --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;
28
+ --hpe-web-color-background-sunken: #22252e;
29
+ --hpe-web-color-background-warning: #3c361e;
30
+ --hpe-web-color-border-critical: #fc6161;
31
+ --hpe-web-color-border-default: #ffffff5c;
32
+ --hpe-web-color-border-disabled: #ffffff1f;
26
33
  --hpe-web-color-border-ok: #17eba0;
27
34
  --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;
35
+ --hpe-web-color-border-selected: #05cc93;
36
+ --hpe-web-color-border-strong: #ffffffb8;
37
+ --hpe-web-color-border-warning: #ec8c25;
38
+ --hpe-web-color-border-weak: #ffffff1f;
31
39
  --hpe-web-color-decorative-black: #000000;
32
40
  --hpe-web-color-decorative-blue: #0070f8;
33
41
  --hpe-web-color-decorative-brand: #01a982;
34
42
  --hpe-web-color-decorative-cyan: #00a4b3;
35
43
  --hpe-web-color-decorative-green: #068667;
36
44
  --hpe-web-color-decorative-neutral: #b1b9be;
37
- --hpe-web-color-decorative-neutral-hover: #d4d8db;
45
+ --hpe-web-color-decorative-neutral-strong: #d4d8db;
38
46
  --hpe-web-color-decorative-purple: #7764fc;
39
47
  --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;
48
+ --hpe-web-color-foreground-critical: #fc6161;
49
+ --hpe-web-color-foreground-ok: #05cc93;
50
+ --hpe-web-color-foreground-primary: #05cc93;
51
+ --hpe-web-color-foreground-unknown: #7d8a92;
52
+ --hpe-web-color-foreground-warning: #ec8c25;
53
+ --hpe-web-color-icon-critical: #fc6161;
54
+ --hpe-web-color-icon-default: #e6e8e9;
55
+ --hpe-web-color-icon-disabled: #ffffff3d;
56
+ --hpe-web-color-icon-info: #65aef9;
66
57
  --hpe-web-color-icon-neutral: #ffffff;
67
- --hpe-web-color-icon-ok: #1ed8ae;
58
+ --hpe-web-color-icon-ok: #05cc93;
59
+ --hpe-web-color-icon-on-strong: #292d3a;
68
60
  --hpe-web-color-icon-primary: #01a982;
69
61
  --hpe-web-color-icon-primary-strong: #01a982;
70
62
  --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;
63
+ --hpe-web-color-icon-warning: #ec8c25;
64
+ --hpe-web-color-icon-weak: #b1b9be;
65
+ --hpe-web-color-logo-element: #01a982;
66
+ --hpe-web-color-logo-logo-text: #ffffff;
75
67
  --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;
68
+ --hpe-web-color-text-default: #e6e8e9;
69
+ --hpe-web-color-text-disabled: #ffffff3d;
79
70
  --hpe-web-color-text-neutral-strong: #f7f7f7;
80
71
  --hpe-web-color-text-ok: #17eba0;
81
- --hpe-web-color-text-on-neutral: #292d3a;
72
+ --hpe-web-color-text-on-strong: #292d3a;
82
73
  --hpe-web-color-text-primary: #00e0af;
83
74
  --hpe-web-color-text-primary-strong: #01a982;
75
+ --hpe-web-color-text-strong: #ffffff;
84
76
  --hpe-web-color-text-warning: #ec8c25;
85
- --hpe-web-color-text-weak: #ffffff9c;
77
+ --hpe-web-color-text-weak: #b1b9be;
86
78
  --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
79
  }
package/dist/css/tokens.md-lg.css CHANGED
@@ -2,112 +2,122 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- @media (min-width: 992px) {
5
+ (min-width: 992px) {
6
6
  :root {
7
- --hpe-web-multi-mode-button-anchor-large-font-size: 1.25rem;
8
- --hpe-web-multi-mode-button-anchor-large-line-height: 1.4;
9
- --hpe-web-multi-mode-button-anchor-large-min-height: 1.25rem;
10
- --hpe-web-multi-mode-button-anchor-large-gap-x: 0.75rem;
11
- --hpe-web-multi-mode-button-anchor-medium-font-size: 1.125rem;
12
- --hpe-web-multi-mode-button-anchor-medium-line-height: 1.3333;
13
- --hpe-web-multi-mode-button-anchor-small-font-size: 1rem;
14
- --hpe-web-multi-mode-button-anchor-small-line-height: 1.5;
15
- --hpe-web-multi-mode-button-primary-large-font-size: 1.25rem;
16
- --hpe-web-multi-mode-button-primary-large-line-height: 1.4;
17
- --hpe-web-multi-mode-button-primary-large-min-height: 4.5rem;
18
- --hpe-web-multi-mode-button-primary-large-gap-x: 0.75rem;
19
- --hpe-web-multi-mode-button-primary-large-padding-x: 2.5rem;
20
- --hpe-web-multi-mode-button-primary-large-padding-y: 1.375rem;
21
- --hpe-web-multi-mode-button-primary-medium-font-size: 1.125rem;
22
- --hpe-web-multi-mode-button-primary-medium-line-height: 1.3333;
23
- --hpe-web-multi-mode-button-primary-medium-icon-width: 1.25rem;
24
- --hpe-web-multi-mode-button-primary-medium-padding-x: 2.25rem;
25
- --hpe-web-multi-mode-button-primary-medium-padding-y: 1.25rem;
26
- --hpe-web-multi-mode-button-primary-small-font-size: 1rem;
27
- --hpe-web-multi-mode-button-primary-small-line-height: 1.5;
28
- --hpe-web-multi-mode-button-secondary-large-font-size: 1.25rem;
29
- --hpe-web-multi-mode-button-secondary-large-line-height: 1.4;
30
- --hpe-web-multi-mode-button-secondary-large-min-height: 4.75rem;
31
- --hpe-web-multi-mode-button-secondary-large-gap-x: 0.75rem;
32
- --hpe-web-multi-mode-button-secondary-large-padding-x: 2.5rem;
33
- --hpe-web-multi-mode-button-secondary-large-padding-y: 1.375rem;
34
- --hpe-web-multi-mode-button-secondary-medium-font-size: 1.125rem;
35
- --hpe-web-multi-mode-button-secondary-medium-line-height: 1.3333;
36
- --hpe-web-multi-mode-button-secondary-medium-icon-width: 1.25rem;
37
- --hpe-web-multi-mode-button-secondary-medium-padding-x: 2.25rem;
38
- --hpe-web-multi-mode-button-secondary-medium-padding-y: 1.25rem;
39
- --hpe-web-multi-mode-button-secondary-small-font-size: 1rem;
40
- --hpe-web-multi-mode-button-secondary-small-line-height: 1.5;
41
- --hpe-web-display-bold-2xlarge-font-size: 9rem;
42
- --hpe-web-display-bold-2xlarge-letter-spacing: 2px;
43
- --hpe-web-display-bold-2xlarge-line-height: 1;
44
- --hpe-web-display-bold-large-font-size: 5rem;
45
- --hpe-web-display-bold-large-letter-spacing: 1.6px;
46
- --hpe-web-display-bold-large-line-height: 1;
47
- --hpe-web-display-bold-xlarge-font-size: 6rem;
48
- --hpe-web-display-bold-xlarge-letter-spacing: 2px;
49
- --hpe-web-display-bold-xlarge-line-height: 1;
50
- --hpe-web-display-light-2xlarge-font-size: 9rem;
51
- --hpe-web-display-light-2xlarge-letter-spacing: 2px;
52
- --hpe-web-display-light-2xlarge-line-height: 1;
53
- --hpe-web-display-light-large-font-size: 5rem;
54
- --hpe-web-display-light-large-letter-spacing: 1.6px;
55
- --hpe-web-display-light-large-line-height: 1;
56
- --hpe-web-display-light-xlarge-font-size: 6rem;
57
- --hpe-web-display-light-xlarge-letter-spacing: 2px;
58
- --hpe-web-display-light-xlarge-line-height: 1;
59
- --hpe-web-display-regular-2xlarge-font-size: 9rem;
60
- --hpe-web-display-regular-2xlarge-letter-spacing: 2px;
61
- --hpe-web-display-regular-2xlarge-line-height: 1;
62
- --hpe-web-display-regular-large-font-size: 5rem;
63
- --hpe-web-display-regular-large-font-weight: 500;
64
- --hpe-web-display-regular-large-letter-spacing: 1.6px;
65
- --hpe-web-display-regular-large-line-height: 1;
66
- --hpe-web-display-regular-xlarge-font-size: 6rem;
67
- --hpe-web-display-regular-xlarge-font-weight: 500;
68
- --hpe-web-display-regular-xlarge-letter-spacing: 2px;
69
- --hpe-web-display-regular-xlarge-line-height: 1;
70
- --hpe-web-heading-3xsmall-font-size: 1rem;
71
- --hpe-web-heading-3xsmall-letter-spacing: 0px;
72
- --hpe-web-heading-3xsmall-line-height: 1.375;
73
- --hpe-web-heading-large-font-size: 3.5rem;
74
- --hpe-web-heading-large-letter-spacing: -1.68px;
75
- --hpe-web-heading-large-line-height: 1.1071;
76
- --hpe-web-heading-medium-font-size: 2.5rem;
77
- --hpe-web-heading-medium-letter-spacing: -0.8px;
78
- --hpe-web-heading-medium-line-height: 1.15;
79
- --hpe-web-heading-small-font-size: 2rem;
80
- --hpe-web-heading-small-letter-spacing: -0.32px;
81
- --hpe-web-heading-small-line-height: 1.1875;
82
- --hpe-web-heading-xlarge-font-size: 4.25rem;
83
- --hpe-web-heading-xlarge-letter-spacing: -2.73px;
84
- --hpe-web-heading-xlarge-line-height: 1.0882;
85
- --hpe-web-heading-xsmall-font-size: 1.5rem;
86
- --hpe-web-heading-xsmall-letter-spacing: 0px;
87
- --hpe-web-heading-xsmall-line-height: 1.25;
88
- --hpe-web-heading-xxsmall-font-size: 1.125rem;
89
- --hpe-web-heading-xxsmall-letter-spacing: 0px;
90
- --hpe-web-heading-xxsmall-line-height: 1.3333;
7
+ --hpe-web-border-width-default: 0.0625rem;
8
+ --hpe-web-border-width-large: 0.375rem;
9
+ --hpe-web-border-width-medium: 0.25rem;
10
+ --hpe-web-border-width-none: 0px;
11
+ --hpe-web-border-width-small: 0.125rem;
12
+ --hpe-web-border-width-xsmall: 0.0625rem;
13
+ --hpe-web-heading-h1-condensed-bold-font-size: 5rem;
14
+ --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.1rem;
16
+ --hpe-web-heading-h1-condensed-bold-line-height: 80;
17
+ --hpe-web-heading-h1-condensed-light-font-size: 5rem;
18
+ --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 0.1rem;
20
+ --hpe-web-heading-h1-condensed-light-line-height: 80;
21
+ --hpe-web-heading-h1-condensed-medium-font-size: 5rem;
22
+ --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.1rem;
24
+ --hpe-web-heading-h1-condensed-medium-line-height: 80;
25
+ --hpe-web-heading-h1-default-font-size: 3.5rem;
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;
29
+ --hpe-web-heading-h1-large-condensed-bold-font-size: 6rem;
30
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.125rem;
32
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 96;
33
+ --hpe-web-heading-h1-large-condensed-light-font-size: 6rem;
34
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
36
+ --hpe-web-heading-h1-large-condensed-light-line-height: 96;
37
+ --hpe-web-heading-h1-large-condensed-medium-font-size: 6rem;
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;
41
+ --hpe-web-heading-h1-large-default-font-size: 4.25rem;
42
+ --hpe-web-heading-h1-large-default-font-weight: 400;
43
+ --hpe-web-heading-h1-large-default-letter-spacing: -0.1706rem;
44
+ --hpe-web-heading-h1-large-default-line-height: 74;
45
+ --hpe-web-heading-h2-default-font-size: 2.5rem;
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;
49
+ --hpe-web-heading-h3-default-font-size: 2rem;
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;
53
+ --hpe-web-heading-h4-default-font-size: 1.5rem;
54
+ --hpe-web-heading-h4-default-font-weight: 400;
55
+ --hpe-web-heading-h4-default-letter-spacing: 0px;
56
+ --hpe-web-heading-h4-default-line-height: 30;
57
+ --hpe-web-heading-h5-default-font-size: 1.125rem;
58
+ --hpe-web-heading-h5-default-font-weight: 400;
59
+ --hpe-web-heading-h5-default-letter-spacing: 0px;
60
+ --hpe-web-heading-h5-default-line-height: 24;
61
+ --hpe-web-heading-h6-default-font-size: 1rem;
62
+ --hpe-web-heading-h6-default-font-weight: 400;
63
+ --hpe-web-heading-h6-default-letter-spacing: 0px;
64
+ --hpe-web-heading-h6-default-line-height: 22;
65
+ --hpe-web-icon-large-size: 1.125rem;
66
+ --hpe-web-icon-medium-size: 1rem;
67
+ --hpe-web-icon-small-size: 0.875rem;
68
+ --hpe-web-icon-xlarge-size: 1.25rem;
69
+ --hpe-web-icon-xsmall-size: 0.75rem;
70
+ --hpe-web-icon-xxlarge-size: 2rem;
71
+ --hpe-web-paragraph-body-copy-font-size: 1.125rem;
72
+ --hpe-web-paragraph-body-copy-font-weight: 400;
73
+ --hpe-web-paragraph-body-copy-letter-spacing: 0px;
74
+ --hpe-web-paragraph-body-copy-line-height: 26;
75
+ --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
76
+ --hpe-web-paragraph-disclaimer-font-weight: 400;
77
+ --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
78
+ --hpe-web-paragraph-disclaimer-line-height: 20;
79
+ --hpe-web-paragraph-large-body-copy-font-size: 1.5rem;
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;
83
+ --hpe-web-paragraph-small-body-copy-font-size: 1rem;
84
+ --hpe-web-paragraph-small-body-copy-font-weight: 400;
85
+ --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
86
+ --hpe-web-paragraph-small-body-copy-line-height: 24;
91
87
  --hpe-web-quote-large-font-size: 3rem;
92
- --hpe-web-quote-large-letter-spacing: -1.92px;
93
- --hpe-web-quote-large-line-height: 1.2083;
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;
94
91
  --hpe-web-quote-medium-font-size: 2.5rem;
95
- --hpe-web-quote-medium-letter-spacing: -1.2px;
96
- --hpe-web-quote-medium-line-height: 1.25;
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;
97
95
  --hpe-web-quote-small-font-size: 2rem;
98
- --hpe-web-quote-small-letter-spacing: -0.64px;
99
- --hpe-web-quote-small-line-height: 1.3125;
100
- --hpe-web-text-large-font-size: 1.5rem;
101
- --hpe-web-text-large-letter-spacing: -0.24px;
102
- --hpe-web-text-large-line-height: 1.4167;
103
- --hpe-web-text-medium-font-size: 1.125rem;
104
- --hpe-web-text-medium-letter-spacing: 0px;
105
- --hpe-web-text-medium-line-height: 1.4444;
106
- --hpe-web-text-small-font-size: 1rem;
107
- --hpe-web-text-small-letter-spacing: 0px;
108
- --hpe-web-text-small-line-height: 1.5;
109
- --hpe-web-text-xsmall-font-size: 0.875rem;
110
- --hpe-web-text-xsmall-letter-spacing: 0px;
111
- --hpe-web-text-xsmall-line-height: 1.4286;
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;
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;
109
+ --hpe-web-spacing-3xlarge: 6rem;
110
+ --hpe-web-spacing-3xsmall: 0.5rem;
111
+ --hpe-web-spacing-4xlarge: 10rem;
112
+ --hpe-web-spacing-4xsmall: 0.25rem;
113
+ --hpe-web-spacing-hair: 0.0625rem;
114
+ --hpe-web-spacing-large: 2.5rem;
115
+ --hpe-web-spacing-medium: 2rem;
116
+ --hpe-web-spacing-none: 0px;
117
+ --hpe-web-spacing-small: 1.5rem;
118
+ --hpe-web-spacing-xlarge: 3rem;
119
+ --hpe-web-spacing-xsmall: 1rem;
120
+ --hpe-web-spacing-xxlarge: 4rem;
121
+ --hpe-web-spacing-xxsmall: 0.75rem;
112
122
  }
113
123
  }
package/dist/css/tokens.xl.css CHANGED
@@ -2,99 +2,122 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- @media (min-width: 1600px) {
5
+ (min-width: 1600px) {
6
6
  :root {
7
- --hpe-web-multi-mode-button-anchor-large-font-size: 1.5rem;
8
- --hpe-web-multi-mode-button-anchor-large-icon-height: 1.5rem;
9
- --hpe-web-multi-mode-button-anchor-large-icon-width: 1.5rem;
10
- --hpe-web-multi-mode-button-anchor-medium-font-size: 1.25rem;
11
- --hpe-web-multi-mode-button-anchor-medium-icon-height: 1.25rem;
12
- --hpe-web-multi-mode-button-anchor-medium-icon-width: 1.25rem;
13
- --hpe-web-multi-mode-button-primary-large-font-size: 1.5rem;
14
- --hpe-web-multi-mode-button-primary-large-icon-height: 1.5rem;
15
- --hpe-web-multi-mode-button-primary-large-icon-width: 1.5rem;
16
- --hpe-web-multi-mode-button-primary-large-min-height: 4.5rem;
17
- --hpe-web-multi-mode-button-primary-large-padding-x: 2.5rem;
18
- --hpe-web-multi-mode-button-primary-large-padding-y: 1.375rem;
19
- --hpe-web-multi-mode-button-primary-medium-font-size: 1.25rem;
20
- --hpe-web-multi-mode-button-primary-medium-icon-height: 1.25rem;
21
- --hpe-web-multi-mode-button-primary-medium-icon-width: 1.25rem;
22
- --hpe-web-multi-mode-button-primary-medium-min-height: 4rem;
23
- --hpe-web-multi-mode-button-primary-medium-padding-x: 2.25rem;
24
- --hpe-web-multi-mode-button-primary-medium-padding-y: 1.25rem;
25
- --hpe-web-multi-mode-button-primary-small-min-height: 3.5rem;
26
- --hpe-web-multi-mode-button-secondary-large-font-size: 1.5rem;
27
- --hpe-web-multi-mode-button-secondary-large-icon-height: 1.5rem;
28
- --hpe-web-multi-mode-button-secondary-large-icon-width: 1.5rem;
29
- --hpe-web-multi-mode-button-secondary-large-min-height: 4.75rem;
30
- --hpe-web-multi-mode-button-secondary-large-padding-x: 2.5rem;
31
- --hpe-web-multi-mode-button-secondary-large-padding-y: 1.375rem;
32
- --hpe-web-multi-mode-button-secondary-medium-font-size: 1.25rem;
33
- --hpe-web-multi-mode-button-secondary-medium-icon-height: 1.25rem;
34
- --hpe-web-multi-mode-button-secondary-medium-icon-width: 1.25rem;
35
- --hpe-web-multi-mode-button-secondary-medium-min-height: 4rem;
36
- --hpe-web-multi-mode-button-secondary-medium-padding-x: 2.25rem;
37
- --hpe-web-multi-mode-button-secondary-medium-padding-y: 1.25rem;
38
- --hpe-web-multi-mode-button-secondary-small-min-height: 3.5rem;
7
+ --hpe-web-border-width-default: 0.0625rem;
8
+ --hpe-web-border-width-large: 0.375rem;
9
+ --hpe-web-border-width-medium: 0.25rem;
10
+ --hpe-web-border-width-none: 0px;
11
+ --hpe-web-border-width-small: 0.125rem;
12
+ --hpe-web-border-width-xsmall: 0.0625rem;
13
+ --hpe-web-heading-h1-condensed-bold-font-size: 6rem;
14
+ --hpe-web-heading-h1-condensed-bold-font-weight: 400;
15
+ --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.12rem;
16
+ --hpe-web-heading-h1-condensed-bold-line-height: 96;
17
+ --hpe-web-heading-h1-condensed-light-font-size: 6rem;
18
+ --hpe-web-heading-h1-condensed-light-font-weight: 400;
19
+ --hpe-web-heading-h1-condensed-light-letter-spacing: 0.12rem;
20
+ --hpe-web-heading-h1-condensed-light-line-height: 96;
21
+ --hpe-web-heading-h1-condensed-medium-font-size: 6rem;
22
+ --hpe-web-heading-h1-condensed-medium-font-weight: 400;
23
+ --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.12rem;
24
+ --hpe-web-heading-h1-condensed-medium-line-height: 96;
25
+ --hpe-web-heading-h1-default-font-size: 4.25rem;
26
+ --hpe-web-heading-h1-default-font-weight: 400;
27
+ --hpe-web-heading-h1-default-letter-spacing: -0.17rem;
28
+ --hpe-web-heading-h1-default-line-height: 74;
29
+ --hpe-web-heading-h1-large-condensed-bold-font-size: 7rem;
30
+ --hpe-web-heading-h1-large-condensed-bold-font-weight: 400;
31
+ --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.125rem;
32
+ --hpe-web-heading-h1-large-condensed-bold-line-height: 112;
33
+ --hpe-web-heading-h1-large-condensed-light-font-size: 7rem;
34
+ --hpe-web-heading-h1-large-condensed-light-font-weight: 400;
35
+ --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.125rem;
36
+ --hpe-web-heading-h1-large-condensed-light-line-height: 112;
37
+ --hpe-web-heading-h1-large-condensed-medium-font-size: 7rem;
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;
41
+ --hpe-web-heading-h1-large-default-font-size: 5.25rem;
42
+ --hpe-web-heading-h1-large-default-font-weight: 400;
43
+ --hpe-web-heading-h1-large-default-letter-spacing: -0.21rem;
44
+ --hpe-web-heading-h1-large-default-line-height: 90;
45
+ --hpe-web-heading-h2-default-font-size: 3.25rem;
46
+ --hpe-web-heading-h2-default-font-weight: 400;
47
+ --hpe-web-heading-h2-default-letter-spacing: -0.065rem;
48
+ --hpe-web-heading-h2-default-line-height: 58;
49
+ --hpe-web-heading-h3-default-font-size: 2.25rem;
50
+ --hpe-web-heading-h3-default-font-weight: 400;
51
+ --hpe-web-heading-h3-default-letter-spacing: -0.0225rem;
52
+ --hpe-web-heading-h3-default-line-height: 42;
53
+ --hpe-web-heading-h4-default-font-size: 1.75rem;
54
+ --hpe-web-heading-h4-default-font-weight: 400;
55
+ --hpe-web-heading-h4-default-letter-spacing: -0.0175rem;
56
+ --hpe-web-heading-h4-default-line-height: 34;
57
+ --hpe-web-heading-h5-default-font-size: 1.25rem;
58
+ --hpe-web-heading-h5-default-font-weight: 400;
59
+ --hpe-web-heading-h5-default-letter-spacing: 0px;
60
+ --hpe-web-heading-h5-default-line-height: 26;
61
+ --hpe-web-heading-h6-default-font-size: 1rem;
62
+ --hpe-web-heading-h6-default-font-weight: 400;
63
+ --hpe-web-heading-h6-default-letter-spacing: 0px;
64
+ --hpe-web-heading-h6-default-line-height: 22;
65
+ --hpe-web-icon-large-size: 1.125rem;
66
+ --hpe-web-icon-medium-size: 1rem;
67
+ --hpe-web-icon-small-size: 0.875rem;
68
+ --hpe-web-icon-xlarge-size: 1.25rem;
69
+ --hpe-web-icon-xsmall-size: 0.75rem;
70
+ --hpe-web-icon-xxlarge-size: 2rem;
71
+ --hpe-web-paragraph-body-copy-font-size: 1.25rem;
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;
75
+ --hpe-web-paragraph-disclaimer-font-size: 0.875rem;
76
+ --hpe-web-paragraph-disclaimer-font-weight: 400;
77
+ --hpe-web-paragraph-disclaimer-letter-spacing: 0px;
78
+ --hpe-web-paragraph-disclaimer-line-height: 20;
79
+ --hpe-web-paragraph-large-body-copy-font-size: 1.75rem;
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;
83
+ --hpe-web-paragraph-small-body-copy-font-size: 1rem;
84
+ --hpe-web-paragraph-small-body-copy-font-weight: 400;
85
+ --hpe-web-paragraph-small-body-copy-letter-spacing: 0px;
86
+ --hpe-web-paragraph-small-body-copy-line-height: 24;
87
+ --hpe-web-quote-large-font-size: 3.25rem;
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;
91
+ --hpe-web-quote-medium-font-size: 2.75rem;
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;
95
+ --hpe-web-quote-small-font-size: 2.25rem;
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;
39
101
  --hpe-web-radius-large: 1rem;
40
102
  --hpe-web-radius-medium: 0.75rem;
103
+ --hpe-web-radius-none: 0px;
41
104
  --hpe-web-radius-small: 0.5rem;
42
105
  --hpe-web-radius-xlarge: 1.5rem;
43
106
  --hpe-web-radius-xsmall: 0.375rem;
44
107
  --hpe-web-radius-xxlarge: 2rem;
45
108
  --hpe-web-radius-xxsmall: 0.25rem;
46
- --hpe-web-display-bold-2xlarge-font-size: 10.5rem;
47
- --hpe-web-display-bold-2xlarge-line-height: 1;
48
- --hpe-web-display-bold-large-font-size: 6rem;
49
- --hpe-web-display-bold-large-letter-spacing: 1.92px;
50
- --hpe-web-display-bold-large-line-height: 1;
51
- --hpe-web-display-bold-xlarge-font-size: 7rem;
52
- --hpe-web-display-bold-xlarge-line-height: 1;
53
- --hpe-web-display-light-2xlarge-font-size: 10.5rem;
54
- --hpe-web-display-light-2xlarge-line-height: 1;
55
- --hpe-web-display-light-large-font-size: 6rem;
56
- --hpe-web-display-light-large-letter-spacing: 1.92px;
57
- --hpe-web-display-light-large-line-height: 1;
58
- --hpe-web-display-light-xlarge-font-size: 7rem;
59
- --hpe-web-display-light-xlarge-line-height: 1;
60
- --hpe-web-display-regular-2xlarge-font-size: 10.5rem;
61
- --hpe-web-display-regular-2xlarge-line-height: 1;
62
- --hpe-web-display-regular-large-font-size: 6rem;
63
- --hpe-web-display-regular-large-letter-spacing: 1.92px;
64
- --hpe-web-display-regular-large-line-height: 1;
65
- --hpe-web-display-regular-xlarge-font-size: 7rem;
66
- --hpe-web-display-regular-xlarge-line-height: 1;
67
- --hpe-web-heading-large-font-size: 4.25rem;
68
- --hpe-web-heading-large-letter-spacing: -2.72px;
69
- --hpe-web-heading-large-line-height: 1.0882;
70
- --hpe-web-heading-medium-font-size: 3.25rem;
71
- --hpe-web-heading-medium-letter-spacing: -1.04px;
72
- --hpe-web-heading-medium-line-height: 1.1154;
73
- --hpe-web-heading-small-font-size: 2.25rem;
74
- --hpe-web-heading-small-letter-spacing: -0.36px;
75
- --hpe-web-heading-small-line-height: 1.1667;
76
- --hpe-web-heading-xlarge-font-size: 5.25rem;
77
- --hpe-web-heading-xlarge-letter-spacing: -3.36px;
78
- --hpe-web-heading-xlarge-line-height: 1.0714;
79
- --hpe-web-heading-xsmall-font-size: 1.75rem;
80
- --hpe-web-heading-xsmall-letter-spacing: -0.28px;
81
- --hpe-web-heading-xsmall-line-height: 1.2143;
82
- --hpe-web-heading-xxsmall-font-size: 1.25rem;
83
- --hpe-web-heading-xxsmall-line-height: 1.3;
84
- --hpe-web-quote-large-font-size: 3.25rem;
85
- --hpe-web-quote-large-letter-spacing: -2.08px;
86
- --hpe-web-quote-large-line-height: 1.1923;
87
- --hpe-web-quote-medium-font-size: 2.75rem;
88
- --hpe-web-quote-medium-letter-spacing: -1.32px;
89
- --hpe-web-quote-medium-line-height: 1.2273;
90
- --hpe-web-quote-small-font-size: 2.25rem;
91
- --hpe-web-quote-small-letter-spacing: -0.72px;
92
- --hpe-web-quote-small-line-height: 1.2778;
93
- --hpe-web-text-large-font-size: 1.75rem;
94
- --hpe-web-text-large-letter-spacing: -0.28px;
95
- --hpe-web-text-large-line-height: 1.3571;
96
- --hpe-web-text-medium-font-size: 1.25rem;
97
- --hpe-web-text-medium-letter-spacing: -0.2px;
98
- --hpe-web-text-medium-line-height: 1.5;
109
+ --hpe-web-spacing-3xlarge: 6rem;
110
+ --hpe-web-spacing-3xsmall: 0.5rem;
111
+ --hpe-web-spacing-4xlarge: 10rem;
112
+ --hpe-web-spacing-4xsmall: 0.25rem;
113
+ --hpe-web-spacing-hair: 0.0625rem;
114
+ --hpe-web-spacing-large: 2.5rem;
115
+ --hpe-web-spacing-medium: 2rem;
116
+ --hpe-web-spacing-none: 0px;
117
+ --hpe-web-spacing-small: 1.5rem;
118
+ --hpe-web-spacing-xlarge: 3rem;
119
+ --hpe-web-spacing-xsmall: 1rem;
120
+ --hpe-web-spacing-xxlarge: 4rem;
121
+ --hpe-web-spacing-xxsmall: 0.75rem;
99
122
  }
100
123
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hpe-web/design-tokens",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "description": "HPE Design System — design tokens (CSS, JSON)",
5
5
  "type": "module",
6
6
  "repository": {
@@ -13,20 +13,16 @@
13
13
  },
14
14
  "exports": {
15
15
  "./css/*": "./dist/css/*",
16
- "./dtcg/*": "./dtcg/*",
17
- "./static/*": "./static/*",
16
+ "./src/*": "./src/*",
18
17
  "./transforms": "./transforms.mjs"
19
18
  },
20
19
  "files": [
21
20
  "dist/",
22
- "dtcg/",
23
- "static/",
21
+ "src/",
24
22
  "transforms.mjs"
25
23
  ],
26
24
  "scripts": {
27
- "convert": "node scripts/convert-to-dtcg.mjs raw dtcg",
28
- "build": "node sd.config.mjs",
29
- "pipeline": "node scripts/convert-to-dtcg.mjs raw dtcg && node sd.config.mjs"
25
+ "build": "node sd.config.mjs"
30
26
  },
31
27
  "devDependencies": {
32
28
  "style-dictionary": "^5.2.0"