@patternfly/design-tokens 1.13.1 → 1.14.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 (36) hide show
  1. package/build/css/tokens-charts-dark.scss +2 -2
  2. package/build/css/tokens-charts.scss +2 -2
  3. package/build/css/tokens-dark.scss +21 -5
  4. package/build/css/tokens-default.scss +90 -30
  5. package/build/css/tokens-highcontrast-dark.scss +392 -0
  6. package/build/css/tokens-highcontrast.scss +427 -0
  7. package/build/css/tokens-palette.scss +8 -2
  8. package/build.js +15 -1
  9. package/config.highcontrast.dark.json +23 -0
  10. package/config.highcontrast.json +24 -0
  11. package/config.palette-colors.json +1 -1
  12. package/package.json +1 -1
  13. package/patternfly-docs/content/token-layers-dark.json +4308 -966
  14. package/patternfly-docs/content/token-layers-default.json +4382 -1485
  15. package/patternfly-docs/content/tokensTable.css +16 -3
  16. package/patternfly-docs/content/tokensTable.js +7 -5
  17. package/plugins/export-patternfly-tokens/dist/code.js +87 -0
  18. package/plugins/export-patternfly-tokens/dist/ui.html +34212 -0
  19. package/plugins/export-patternfly-tokens/src/ui.tsx +12 -4
  20. package/tokens/dark/base.dark.json +36 -0
  21. package/tokens/dark/charts.dark.json +8 -8
  22. package/tokens/dark/palette.color.json +24 -0
  23. package/tokens/dark/semantic.dark.json +51 -9
  24. package/tokens/default/base.dimension.json +38 -6
  25. package/tokens/default/base.json +171 -3
  26. package/tokens/default/charts.json +8 -8
  27. package/tokens/default/palette.color.json +24 -0
  28. package/tokens/default/semantic.dimension.json +69 -48
  29. package/tokens/default/semantic.json +51 -9
  30. package/tokens/default/semantic.motion.json +28 -28
  31. package/tokens/highcontrast/base.json +559 -0
  32. package/tokens/highcontrast/palette.color.json +319 -0
  33. package/tokens/highcontrast/semantic.highcontrast.json +1758 -0
  34. package/tokens/highcontrast-dark/base.dark.json +421 -0
  35. package/tokens/highcontrast-dark/palette.color.json +319 -0
  36. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1758 -0
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
7
7
  --pf-t--chart--global--BorderWidth--sm: 2;
8
8
  --pf-t--chart--global--BorderWidth--xs: 1;
package/build/css/tokens-charts.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
7
7
  --pf-t--chart--global--BorderWidth--sm: 2;
8
8
  --pf-t--chart--global--BorderWidth--xs: 1;
package/build/css/tokens-dark.scss CHANGED
@@ -1,22 +1,29 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:28 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7
8
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
8
9
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
9
10
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
11
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
10
12
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
11
13
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
12
14
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
13
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
14
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
15
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
15
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
16
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
17
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
18
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
19
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
20
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
21
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
16
22
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
17
23
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
18
24
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
19
25
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
26
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
20
27
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
21
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
22
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -28,6 +35,7 @@
28
35
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
29
36
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
30
37
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
38
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
31
39
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
32
40
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
33
41
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
@@ -36,6 +44,7 @@
36
44
  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
37
45
  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
38
46
  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
47
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
39
48
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
40
49
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
41
50
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -58,6 +67,7 @@
58
67
  --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
59
68
  --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
60
69
  --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
70
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
61
71
  --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
62
72
  --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
63
73
  --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
@@ -65,14 +75,17 @@
65
75
  --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
66
76
  --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
67
77
  --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
78
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
68
79
  --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
69
80
  --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
70
81
  --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
71
82
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
72
83
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
73
84
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
85
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
74
86
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
75
87
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
88
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
76
89
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
77
90
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
78
91
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
@@ -85,6 +98,7 @@
85
98
  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
86
99
  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
87
100
  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
101
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
88
102
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
89
103
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
90
104
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
@@ -95,7 +109,9 @@
95
109
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
96
110
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
97
111
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
112
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
98
113
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
114
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
99
115
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
100
116
  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
101
117
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
package/build/css/tokens-default.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:28 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
9
10
  --pf-t--global--border--radius--0: 0px;
10
11
  --pf-t--global--border--radius--100: 4px;
11
12
  --pf-t--global--border--radius--200: 6px;
@@ -15,26 +16,34 @@
15
16
  --pf-t--global--border--width--100: 1px;
16
17
  --pf-t--global--border--width--200: 2px;
17
18
  --pf-t--global--border--width--300: 3px;
18
- --pf-t--global--box-shadow--X--100: -8px;
19
+ --pf-t--global--border--width--400: 4px;
20
+ --pf-t--global--box-shadow--X--100: -10px;
19
21
  --pf-t--global--box-shadow--X--200: -4px;
20
22
  --pf-t--global--box-shadow--X--300: -1px;
21
23
  --pf-t--global--box-shadow--X--400: 0px;
24
+ --pf-t--global--box-shadow--X--50: -20px;
22
25
  --pf-t--global--box-shadow--X--500: 1px;
23
26
  --pf-t--global--box-shadow--X--600: 4px;
24
- --pf-t--global--box-shadow--X--700: 8px;
25
- --pf-t--global--box-shadow--Y--100: -8px;
27
+ --pf-t--global--box-shadow--X--700: 10px;
28
+ --pf-t--global--box-shadow--X--800: 20px;
29
+ --pf-t--global--box-shadow--Y--100: -10px;
26
30
  --pf-t--global--box-shadow--Y--200: -4px;
27
31
  --pf-t--global--box-shadow--Y--300: -1px;
28
32
  --pf-t--global--box-shadow--Y--400: 0px;
33
+ --pf-t--global--box-shadow--Y--50: -20px;
29
34
  --pf-t--global--box-shadow--Y--500: 1px;
30
35
  --pf-t--global--box-shadow--Y--600: 4px;
31
- --pf-t--global--box-shadow--Y--700: 8px;
36
+ --pf-t--global--box-shadow--Y--700: 10px;
37
+ --pf-t--global--box-shadow--Y--800: 20px;
32
38
  --pf-t--global--box-shadow--blur--100: 4px;
33
- --pf-t--global--box-shadow--blur--200: 8px;
34
- --pf-t--global--box-shadow--blur--300: 24px;
35
- --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
36
- --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
39
+ --pf-t--global--box-shadow--blur--200: 9px;
40
+ --pf-t--global--box-shadow--blur--300: 20px;
41
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
42
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
37
43
  --pf-t--global--box-shadow--spread--100: 0px;
44
+ --pf-t--global--box-shadow--spread--200: -4px;
45
+ --pf-t--global--box-shadow--spread--300: -8px;
46
+ --pf-t--global--box-shadow--spread--400: -20px;
38
47
  --pf-t--global--breakpoint--100: 0rem;
39
48
  --pf-t--global--breakpoint--200: 36rem;
40
49
  --pf-t--global--breakpoint--250: 40rem;
@@ -44,6 +53,10 @@
44
53
  --pf-t--global--breakpoint--500: 75rem;
45
54
  --pf-t--global--breakpoint--550: 80rem;
46
55
  --pf-t--global--breakpoint--600: 90.625rem;
56
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
57
+ --pf-t--global--color--status--danger--300: #501600;
58
+ --pf-t--global--color--status--success--150: #3d7019;
59
+ --pf-t--global--color--status--success--300: #153300;
47
60
  --pf-t--global--delay--100: 0ms;
48
61
  --pf-t--global--delay--200: 50ms;
49
62
  --pf-t--global--delay--300: 100ms;
@@ -58,7 +71,7 @@
58
71
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
59
72
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
60
73
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
61
- --pf-t--global--font--line-height--100: 1.2999999523162842;
74
+ --pf-t--global--font--line-height--100: 1.3;
62
75
  --pf-t--global--font--line-height--200: 1.5;
63
76
  --pf-t--global--font--size--100: 0.75rem;
64
77
  --pf-t--global--font--size--200: 0.875rem;
@@ -103,14 +116,17 @@
103
116
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
104
117
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
105
118
  --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
119
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
106
120
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
107
121
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
108
122
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
109
123
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
110
124
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
125
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
111
126
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
112
127
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
113
128
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
129
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
114
130
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
115
131
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
116
132
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
@@ -137,43 +153,49 @@
137
153
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
138
154
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
139
155
  --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
140
- --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100);
141
- --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700);
156
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
157
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
142
158
  --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
143
159
  --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
144
160
  --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
145
- --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200);
146
- --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600);
161
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
162
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
147
163
  --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
148
164
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
149
165
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
150
- --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300);
151
- --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500);
166
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
167
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
152
168
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
153
- --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700);
169
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
154
170
  --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
155
171
  --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
156
172
  --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
157
- --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100);
158
- --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600);
173
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
174
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
159
175
  --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
160
176
  --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
161
177
  --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
162
- --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200);
163
- --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500);
178
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
179
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
164
180
  --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
165
181
  --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
166
182
  --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
167
- --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300);
183
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
168
184
  --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
169
185
  --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
170
186
  --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
171
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200);
172
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200);
173
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100);
174
- --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100);
175
- --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100);
176
- --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100);
187
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
188
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
189
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
190
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
191
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
192
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
193
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
194
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
195
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
196
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
197
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
198
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
177
199
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
178
200
  --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
179
201
  --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
@@ -188,56 +210,87 @@
188
210
  --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
189
211
  --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
190
212
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
213
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
214
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
191
215
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
192
216
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
193
217
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
194
218
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
195
219
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
220
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
221
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
196
222
  --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
197
223
  --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
198
224
  --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
225
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
226
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
199
227
  --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
200
228
  --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
201
229
  --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
230
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
231
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
232
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
202
233
  --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
203
234
  --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
204
235
  --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
236
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
205
237
  --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
206
238
  --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
207
239
  --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
240
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
241
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
208
242
  --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
209
243
  --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
210
244
  --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
245
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
246
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
211
247
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
212
248
  --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
213
249
  --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
250
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
251
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
214
252
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
215
253
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
216
254
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
255
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
256
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
217
257
  --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
218
258
  --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
219
259
  --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
260
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
261
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
220
262
  --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
221
263
  --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
222
264
  --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
265
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
266
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
223
267
  --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
224
268
  --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
269
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
225
270
  --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
271
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
226
272
  --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
273
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
227
274
  --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
275
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
228
276
  --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
277
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
229
278
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
230
279
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
280
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
231
281
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
232
282
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
233
- --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
234
283
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
235
284
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
285
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
236
286
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
237
287
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
238
288
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
239
289
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
240
290
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
291
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
292
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
293
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
241
294
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
242
295
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
243
296
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -256,6 +309,7 @@
256
309
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
257
310
  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
258
311
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
312
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
259
313
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
260
314
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
261
315
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
@@ -288,11 +342,15 @@
288
342
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
289
343
  --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
290
344
  --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
345
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
291
346
  --pf-t--global--text--color--300: var(--pf-t--color--white);
292
347
  --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
348
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
293
349
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
294
350
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
351
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
295
352
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
353
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
296
354
  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
297
355
  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
298
356
  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
@@ -320,7 +378,9 @@
320
378
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
321
379
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
322
380
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
381
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
323
382
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
383
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
324
384
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
325
385
  --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
326
386
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);