@patternfly/design-tokens 1.14.9 → 1.15.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 (52) hide show
  1. package/build/css/tokens-dark.scss +14 -15
  2. package/build/css/tokens-default.scss +10 -11
  3. package/build/css/tokens-glass-dark.scss +16 -3
  4. package/build/css/tokens-glass.scss +9 -3
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/build/css/tokens-redhat-dark.scss +4 -3
  7. package/build/css/tokens-redhat-glass-dark.scss +18 -4
  8. package/build/css/tokens-redhat-glass.scss +9 -3
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +10 -3
  10. package/build/css/tokens-redhat-highcontrast.scss +2 -2
  11. package/build/css/tokens-redhat.scss +1 -1
  12. package/package.json +1 -1
  13. package/patternfly-docs/content/token-layers-glass-dark.json +497 -1097
  14. package/patternfly-docs/content/token-layers-glass.json +332 -904
  15. package/patternfly-docs/content/token-layers-highcontrast-dark.json +410 -385
  16. package/patternfly-docs/content/token-layers-highcontrast.json +540 -519
  17. package/patternfly-docs/content/token-layers-redhat-dark.json +2555 -2592
  18. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1112 -1768
  19. package/patternfly-docs/content/token-layers-redhat-glass.json +327 -899
  20. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +443 -422
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +626 -609
  22. package/patternfly-docs/content/token-layers-redhat.json +692 -671
  23. package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
  24. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
  25. package/tokens/default/dark/base.dark.json +5 -5
  26. package/tokens/default/dark/charts.dark.json +18 -18
  27. package/tokens/default/dark/semantic.dark.json +34 -39
  28. package/tokens/default/glass/base.dimension.json +16 -16
  29. package/tokens/default/glass/base.json +2 -2
  30. package/tokens/default/glass/semantic.glass.json +33 -38
  31. package/tokens/default/glass-dark/base.dark.json +5 -5
  32. package/tokens/default/glass-dark/semantic.glass.dark.json +45 -50
  33. package/tokens/default/highcontrast/base.dimension.json +16 -16
  34. package/tokens/default/highcontrast/base.json +2 -2
  35. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +5 -5
  36. package/tokens/default/highcontrast/semantic.highcontrast.json +27 -32
  37. package/tokens/default/highcontrast-dark/base.dark.json +5 -5
  38. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +27 -32
  39. package/tokens/default/light/base.dimension.json +16 -16
  40. package/tokens/default/light/base.json +2 -2
  41. package/tokens/default/light/charts.json +18 -18
  42. package/tokens/default/light/semantic.dimension.json +5 -5
  43. package/tokens/default/light/semantic.json +27 -32
  44. package/tokens/default/light/semantic.motion.json +8 -8
  45. package/tokens/redhat/dark/redhat.color.dark.json +71 -24
  46. package/tokens/redhat/glass/redhat.color.glass.json +25 -25
  47. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
  48. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
  49. package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
  50. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
  51. package/tokens/redhat/light/redhat.color.json +25 -25
  52. 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
+ "hover": {
8
+ "description": "Use as the hover state for elements that have a branded background color",
9
+ "type": "color",
10
+ "value": "{global.dark.color.brand.accent.350}"
11
+ },
12
+ "default": {
13
+ "description": "Use this color for elements that you want to reinforce your brand",
14
+ "type": "color",
15
+ "value": "{global.dark.color.brand.accent.400}"
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
+ "hover": {
8
+ "description": "Use as the hover state for elements that have a branded background color",
9
+ "type": "color",
10
+ "value": "{global.color.brand.accent.200}"
11
+ },
12
+ "default": {
13
+ "description": "Use this color for elements that you want to reinforce your brand",
14
+ "type": "color",
15
+ "value": "{global.color.brand.accent.100}"
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
  }