@patternfly/design-tokens 1.14.9 → 1.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/build/css/tokens-dark.scss +16 -16
  2. package/build/css/tokens-default.scss +17 -15
  3. package/build/css/tokens-glass-dark.scss +21 -4
  4. package/build/css/tokens-glass.scss +17 -4
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/build/css/tokens-redhat-dark.scss +9 -2
  7. package/build/css/tokens-redhat-glass-dark.scss +27 -4
  8. package/build/css/tokens-redhat-glass.scss +17 -4
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +5 -4
  10. package/build/css/tokens-redhat-highcontrast.scss +2 -2
  11. package/build/css/tokens-redhat.scss +1 -1
  12. package/build.js +44 -1
  13. package/package.json +1 -1
  14. package/patternfly-docs/content/token-layers-glass-dark.json +497 -965
  15. package/patternfly-docs/content/token-layers-glass.json +12337 -991
  16. package/patternfly-docs/content/token-layers-highcontrast-dark.json +849 -553
  17. package/patternfly-docs/content/token-layers-highcontrast.json +1237 -927
  18. package/patternfly-docs/content/token-layers-redhat-dark.json +2731 -2662
  19. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1700 -2230
  20. package/patternfly-docs/content/token-layers-redhat-glass.json +12497 -1151
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +500 -373
  22. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +1304 -998
  23. package/patternfly-docs/content/token-layers-redhat.json +1650 -1340
  24. package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
  25. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
  26. package/tokens/default/dark/base.dark.json +5 -5
  27. package/tokens/default/dark/charts.dark.json +20 -20
  28. package/tokens/default/dark/semantic.dark.json +45 -36
  29. package/tokens/default/glass/base.dimension.json +16 -16
  30. package/tokens/default/glass/base.json +2 -2
  31. package/tokens/default/glass/semantic.dimension.glass.json +1109 -0
  32. package/tokens/default/glass/semantic.glass.json +49 -40
  33. package/tokens/default/glass-dark/base.dark.json +5 -5
  34. package/tokens/default/glass-dark/semantic.glass.dark.json +56 -47
  35. package/tokens/default/highcontrast/base.dimension.json +16 -16
  36. package/tokens/default/highcontrast/base.json +2 -2
  37. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +51 -39
  38. package/tokens/default/highcontrast/semantic.highcontrast.json +41 -32
  39. package/tokens/default/highcontrast-dark/base.dark.json +5 -5
  40. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +44 -35
  41. package/tokens/default/light/base.dimension.json +16 -16
  42. package/tokens/default/light/base.json +2 -2
  43. package/tokens/default/light/charts.json +20 -20
  44. package/tokens/default/light/semantic.dimension.json +51 -39
  45. package/tokens/default/light/semantic.json +41 -32
  46. package/tokens/default/light/semantic.motion.json +24 -24
  47. package/tokens/redhat/dark/redhat.color.dark.json +71 -24
  48. package/tokens/redhat/glass/redhat.color.glass.json +25 -25
  49. package/tokens/redhat/glass/redhat.dimension.glass.json +2 -0
  50. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
  51. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
  52. package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
  53. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
  54. package/tokens/redhat/light/redhat.color.json +25 -25
  55. package/tokens/redhat/light/redhat.dimension.json +6 -6
package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json CHANGED
@@ -1,12 +1,33 @@
1
1
 
2
2
  {
3
3
  "global": {
4
+ "color": {
5
+ "brand": {
6
+ "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.dark.color.brand.accent.400}"
11
+ },
12
+ "hover": {
13
+ "description": "Use as the hover state for elements that have a branded background color",
14
+ "type": "color",
15
+ "value": "{global.dark.color.brand.accent.350}"
16
+ },
17
+ "clicked": {
18
+ "description": "Use as the clicked state for elements that have a brand background color",
19
+ "type": "color",
20
+ "value": "{global.dark.color.brand.accent.350}"
21
+ }
22
+ }
23
+ }
24
+ },
4
25
  "border": {
5
26
  "color": {
6
27
  "brand": {
7
28
  "accent": {
8
- "clicked": {
9
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "default": {
30
+ "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
10
31
  "type": "color",
11
32
  "value": "{global.dark.color.brand.accent.400}"
12
33
  },
@@ -15,35 +36,14 @@
15
36
  "type": "color",
16
37
  "value": "{global.dark.color.brand.accent.400}"
17
38
  },
18
- "default": {
19
- "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
39
+ "clicked": {
40
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
20
41
  "type": "color",
21
42
  "value": "{global.dark.color.brand.accent.400}"
22
43
  }
23
44
  }
24
45
  }
25
46
  }
26
- },
27
- "color": {
28
- "brand": {
29
- "accent": {
30
- "hover": {
31
- "description": "Use as the hover state for elements that have a branded background color",
32
- "type": "color",
33
- "value": "{global.dark.color.brand.accent.350}"
34
- },
35
- "clicked": {
36
- "description": "Use as the clicked state for elements that have a brand background color",
37
- "type": "color",
38
- "value": "{global.dark.color.brand.accent.350}"
39
- },
40
- "default": {
41
- "description": "Use this color for elements that you want to reinforce your brand",
42
- "type": "color",
43
- "value": "{global.dark.color.brand.accent.300}"
44
- }
45
- }
46
- }
47
47
  }
48
48
  }
49
49
  }
package/tokens/redhat/light/redhat.color.json CHANGED
@@ -1,12 +1,33 @@
1
1
 
2
2
  {
3
3
  "global": {
4
+ "color": {
5
+ "brand": {
6
+ "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.color.brand.accent.100}"
11
+ },
12
+ "hover": {
13
+ "description": "Use as the hover state for elements that have a branded background color",
14
+ "type": "color",
15
+ "value": "{global.color.brand.accent.200}"
16
+ },
17
+ "clicked": {
18
+ "description": "Use as the clicked state for elements that have a brand background color",
19
+ "type": "color",
20
+ "value": "{global.color.brand.accent.200}"
21
+ }
22
+ }
23
+ }
24
+ },
4
25
  "border": {
5
26
  "color": {
6
27
  "brand": {
7
28
  "accent": {
8
- "clicked": {
9
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "default": {
30
+ "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
10
31
  "type": "color",
11
32
  "value": "{global.color.brand.accent.400}"
12
33
  },
@@ -15,35 +36,14 @@
15
36
  "type": "color",
16
37
  "value": "{global.color.brand.accent.400}"
17
38
  },
18
- "default": {
19
- "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
39
+ "clicked": {
40
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
20
41
  "type": "color",
21
42
  "value": "{global.color.brand.accent.400}"
22
43
  }
23
44
  }
24
45
  }
25
46
  }
26
- },
27
- "color": {
28
- "brand": {
29
- "accent": {
30
- "hover": {
31
- "description": "Use as the hover state for elements that have a branded background color",
32
- "type": "color",
33
- "value": "{global.color.brand.accent.200}"
34
- },
35
- "clicked": {
36
- "description": "Use as the clicked state for elements that have a brand background color",
37
- "type": "color",
38
- "value": "{global.color.brand.accent.200}"
39
- },
40
- "default": {
41
- "description": "Use this color for elements that you want to reinforce your brand",
42
- "type": "color",
43
- "value": "{global.color.brand.accent.100}"
44
- }
45
- }
46
- }
47
47
  }
48
48
  }
49
49
  }
package/tokens/redhat/light/redhat.dimension.json CHANGED
@@ -3,12 +3,6 @@
3
3
  "global": {
4
4
  "border": {
5
5
  "radius": {
6
- "control": {
7
- "default": {
8
- "type": "number",
9
- "value": "{global.border.radius.pill}"
10
- }
11
- },
12
6
  "action": {
13
7
  "plain": {
14
8
  "default": {
@@ -16,6 +10,12 @@
16
10
  "value": "{global.border.radius.pill}"
17
11
  }
18
12
  }
13
+ },
14
+ "control": {
15
+ "default": {
16
+ "type": "number",
17
+ "value": "{global.border.radius.pill}"
18
+ }
19
19
  }
20
20
  }
21
21
  }