@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/{static → src}/fonts.json RENAMED
@@ -4,31 +4,31 @@
4
4
  "stretch": "normal",
5
5
  "basePath": "https://www.hpe.com/content/dam/hpe/fonts/graphik",
6
6
  "weights": {
7
- "100": { "normal": "HPEGraphik-Thin-Web.woff2", "italic": "HPEGraphik-ThinItalic-Web.woff2" },
7
+ "100": { "normal": "HPEGraphik-Thin-Web.woff2", "italic": "HPEGraphik-ThinItalic-Web.woff2" },
8
8
  "200": { "normal": "HPEGraphik-Extralight-Web.woff2", "italic": "HPEGraphik-ExtralightItalic-Web.woff2" },
9
- "300": { "normal": "HPEGraphik-Light-Web.woff2", "italic": "HPEGraphik-LightItalic-Web.woff2" },
10
- "400": { "normal": "HPEGraphik-Regular-Web.woff2", "italic": "HPEGraphik-RegularItalic-Web.woff2" },
11
- "500": { "normal": "HPEGraphik-Medium-Web.woff2", "italic": "HPEGraphik-MediumItalic-Web.woff2" },
12
- "600": { "normal": "HPEGraphik-Semibold-Web.woff2", "italic": "HPEGraphik-SemiboldItalic-Web.woff2" },
13
- "700": { "normal": "HPEGraphik-Bold-Web.woff2", "italic": "HPEGraphik-BoldItalic-Web.woff2" },
14
- "800": { "normal": "HPEGraphik-Black-Web.woff2", "italic": "HPEGraphik-BlackItalic-Web.woff2" },
15
- "900": { "normal": "HPEGraphik-Super-Web.woff2", "italic": "HPEGraphik-SuperItalic-Web.woff2" }
9
+ "300": { "normal": "HPEGraphik-Light-Web.woff2", "italic": "HPEGraphik-LightItalic-Web.woff2" },
10
+ "400": { "normal": "HPEGraphik-Regular-Web.woff2", "italic": "HPEGraphik-RegularItalic-Web.woff2" },
11
+ "500": { "normal": "HPEGraphik-Medium-Web.woff2", "italic": "HPEGraphik-MediumItalic-Web.woff2" },
12
+ "600": { "normal": "HPEGraphik-Semibold-Web.woff2", "italic": "HPEGraphik-SemiboldItalic-Web.woff2" },
13
+ "700": { "normal": "HPEGraphik-Bold-Web.woff2", "italic": "HPEGraphik-BoldItalic-Web.woff2" },
14
+ "800": { "normal": "HPEGraphik-Black-Web.woff2", "italic": "HPEGraphik-BlackItalic-Web.woff2" },
15
+ "900": { "normal": "HPEGraphik-Super-Web.woff2", "italic": "HPEGraphik-SuperItalic-Web.woff2" }
16
16
  }
17
17
  },
18
18
  "hpe-graphik-condensed": {
19
- "family": "HPE Graphik",
19
+ "family": "HPE Graphik XXCondensed",
20
20
  "stretch": "condensed",
21
21
  "basePath": "https://www.hpe.com/content/dam/hpe/fonts/graphik",
22
22
  "weights": {
23
- "100": { "normal": "HPEGraphikXXCondensed-Thin-Web.woff2", "italic": "HPEGraphikXXCondensed-ThinItalic-Web.woff2" },
23
+ "100": { "normal": "HPEGraphikXXCondensed-Thin-Web.woff2", "italic": "HPEGraphikXXCondensed-ThinItalic-Web.woff2" },
24
24
  "200": { "normal": "HPEGraphikXXCondensed-Extralight-Web.woff2", "italic": "HPEGraphikXXCondensed-ExtralightItalic-Web.woff2" },
25
- "300": { "normal": "HPEGraphikXXCondensed-Light-Web.woff2", "italic": "HPEGraphikXXCondensed-LightItalic-Web.woff2" },
26
- "400": { "normal": "HPEGraphikXXCondensed-Regular-Web.woff2", "italic": "HPEGraphikXXCondensed-RegularItalic-Web.woff2" },
27
- "500": { "normal": "HPEGraphikXXCondensed-Medium-Web.woff2", "italic": "HPEGraphikXXCondensed-MediumItalic-Web.woff2" },
28
- "600": { "normal": "HPEGraphikXXCondensed-Semibold-Web.woff2", "italic": "HPEGraphikXXCondensed-SemiboldItalic-Web.woff2" },
29
- "700": { "normal": "HPEGraphikXXCondensed-Bold-Web.woff2", "italic": "HPEGraphikXXCondensed-BoldItalic-Web.woff2" },
30
- "800": { "normal": "HPEGraphikXXCondensed-Black-Web.woff2", "italic": "HPEGraphikXXCondensed-BlackItalic-Web.woff2" },
31
- "900": { "normal": "HPEGraphikXXCondensed-Super-Web.woff2", "italic": "HPEGraphikXXCondensed-SuperItalic-Web.woff2" }
25
+ "300": { "normal": "HPEGraphikXXCondensed-Light-Web.woff2", "italic": "HPEGraphikXXCondensed-LightItalic-Web.woff2" },
26
+ "400": { "normal": "HPEGraphikXXCondensed-Regular-Web.woff2", "italic": "HPEGraphikXXCondensed-RegularItalic-Web.woff2" },
27
+ "500": { "normal": "HPEGraphikXXCondensed-Medium-Web.woff2", "italic": "HPEGraphikXXCondensed-MediumItalic-Web.woff2" },
28
+ "600": { "normal": "HPEGraphikXXCondensed-Semibold-Web.woff2", "italic": "HPEGraphikXXCondensed-SemiboldItalic-Web.woff2" },
29
+ "700": { "normal": "HPEGraphikXXCondensed-Bold-Web.woff2", "italic": "HPEGraphikXXCondensed-BoldItalic-Web.woff2" },
30
+ "800": { "normal": "HPEGraphikXXCondensed-Black-Web.woff2", "italic": "HPEGraphikXXCondensed-BlackItalic-Web.woff2" },
31
+ "900": { "normal": "HPEGraphikXXCondensed-Super-Web.woff2", "italic": "HPEGraphikXXCondensed-SuperItalic-Web.woff2" }
32
32
  }
33
33
  },
34
34
  "noto-sans-jp": {
package/src/hpe.resolver.json ADDED
@@ -0,0 +1,94 @@
1
+ {
2
+ "$schema": "https://www.designtokens.org/schemas/2025.10/resolver.json",
3
+ "version": "2025.10",
4
+ "name": "HPE Digital Design System",
5
+ "description": "Resolver for HPE design tokens across themes and viewports",
6
+ "sets": {
7
+ "primitive": {
8
+ "description": "Primitive tokens — anonymous color ramps and size scales",
9
+ "sources": [
10
+ {
11
+ "$ref": "primitive/primitives.json"
12
+ }
13
+ ]
14
+ },
15
+ "component": {
16
+ "description": "Component-scoped tokens",
17
+ "sources": [
18
+ {
19
+ "$ref": "component/button.json"
20
+ }
21
+ ]
22
+ },
23
+ "config": {
24
+ "description": "System-level config — breakpoints, font sources, locale settings",
25
+ "sources": [
26
+ {
27
+ "$ref": "breakpoints.json"
28
+ },
29
+ {
30
+ "$ref": "font.source.json"
31
+ },
32
+ {
33
+ "$ref": "font.locales.json"
34
+ }
35
+ ]
36
+ }
37
+ },
38
+ "modifiers": {
39
+ "theme": {
40
+ "description": "Color theme — light or dark",
41
+ "contexts": {
42
+ "light": [
43
+ {
44
+ "$ref": "semantic/color.light.json"
45
+ }
46
+ ],
47
+ "dark": [
48
+ {
49
+ "$ref": "semantic/color.dark.json"
50
+ }
51
+ ]
52
+ },
53
+ "default": "light"
54
+ },
55
+ "viewport": {
56
+ "description": "Viewport breakpoint — affects dimension and typography tokens",
57
+ "contexts": {
58
+ "xs-sm": [
59
+ {
60
+ "$ref": "semantic/dimension.xs-sm.json"
61
+ }
62
+ ],
63
+ "md-lg": [
64
+ {
65
+ "$ref": "semantic/dimension.md-lg.json"
66
+ }
67
+ ],
68
+ "xl": [
69
+ {
70
+ "$ref": "semantic/dimension.xl.json"
71
+ }
72
+ ]
73
+ },
74
+ "default": "md-lg"
75
+ }
76
+ },
77
+ "resolutionOrder": [
78
+ {
79
+ "$ref": "#/sets/primitive"
80
+ },
81
+ {
82
+ "$ref": "#/modifiers/theme"
83
+ },
84
+ {
85
+ "$ref": "#/modifiers/viewport"
86
+ },
87
+ {
88
+ "$ref": "#/sets/component"
89
+ },
90
+ {
91
+ "$ref": "#/sets/config"
92
+ }
93
+ ]
94
+ }
package/{static → src}/locales.json RENAMED
@@ -1,35 +1,35 @@
1
1
  {
2
2
  "de": {
3
3
  "name": "German",
4
- "fonts": ["hpe-graphik", "hpe-graphik-condensed"],
4
+ "fonts": ["hpe-graphik"],
5
5
  "fallback": ["Arial", "sans-serif"],
6
6
  "coefficient": { "display": 0.75, "heading": 0.75, "text": 1, "quote": 1 },
7
7
  "minFontSize": null
8
8
  },
9
9
  "en": {
10
10
  "name": "English",
11
- "fonts": ["hpe-graphik", "hpe-graphik-condensed"],
11
+ "fonts": ["hpe-graphik"],
12
12
  "fallback": ["Arial", "sans-serif"],
13
13
  "coefficient": { "display": 1, "heading": 1, "text": 1, "quote": 1 },
14
14
  "minFontSize": null
15
15
  },
16
16
  "es": {
17
17
  "name": "Spanish",
18
- "fonts": ["hpe-graphik", "hpe-graphik-condensed"],
18
+ "fonts": ["hpe-graphik"],
19
19
  "fallback": ["Arial", "sans-serif"],
20
20
  "coefficient": { "display": 0.75, "heading": 0.75, "text": 1, "quote": 1 },
21
21
  "minFontSize": null
22
22
  },
23
23
  "fr": {
24
24
  "name": "French",
25
- "fonts": ["hpe-graphik", "hpe-graphik-condensed"],
25
+ "fonts": ["hpe-graphik"],
26
26
  "fallback": ["Arial", "sans-serif"],
27
27
  "coefficient": { "display": 0.75, "heading": 0.75, "text": 1, "quote": 1 },
28
28
  "minFontSize": null
29
29
  },
30
30
  "it": {
31
31
  "name": "Italian",
32
- "fonts": ["hpe-graphik", "hpe-graphik-condensed"],
32
+ "fonts": ["hpe-graphik"],
33
33
  "fallback": ["Arial", "sans-serif"],
34
34
  "coefficient": { "display": 0.75, "heading": 0.75, "text": 1, "quote": 1 },
35
35
  "minFontSize": null
@@ -49,7 +49,7 @@
49
49
  "minFontSize": "14px"
50
50
  },
51
51
  "zh": {
52
- "name": "Chinese",
52
+ "name": "Chinese (Traditional)",
53
53
  "fonts": ["noto-sans-tc"],
54
54
  "fallback": ["sans-serif"],
55
55
  "coefficient": { "display": 1, "heading": 1, "text": 1, "quote": 1 },