@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.7

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 (19) hide show
  1. package/base/patternfly-variables.css +261 -188
  2. package/base/tokens/_tokens-dark.scss +117 -82
  3. package/base/tokens/_tokens-default.scss +145 -109
  4. package/base/tokens/_tokens-palette.scss +2 -4
  5. package/components/Masthead/masthead.css +13 -8
  6. package/components/Masthead/masthead.scss +13 -8
  7. package/components/Table/table-grid.css +8 -8
  8. package/components/Table/table-grid.scss +8 -8
  9. package/docs/demos/Page/examples/Penta.md +528 -500
  10. package/package.json +1 -1
  11. package/patternfly-base-no-globals-theme-dark-unversioned.css +261 -188
  12. package/patternfly-base-no-globals.css +261 -188
  13. package/patternfly-base-theme-dark-unversioned.css +261 -188
  14. package/patternfly-base.css +261 -188
  15. package/patternfly-no-globals.css +282 -204
  16. package/patternfly-theme-dark-unversioned.css +282 -204
  17. package/patternfly.css +282 -204
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/base/tokens/_tokens-default.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 14 Aug 2023 18:12:00 GMT
3
+ * Generated on Wed, 04 Oct 2023 12:58:15 GMT
4
4
  */
5
5
 
6
- :root {
6
+ :root {
7
7
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
8
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
8
9
  --pf-t--global--spacer--800: 80px;
9
10
  --pf-t--global--spacer--700: 64px;
10
11
  --pf-t--global--spacer--600: 48px;
@@ -14,8 +15,8 @@
14
15
  --pf-t--global--spacer--200: 8px;
15
16
  --pf-t--global--spacer--100: 4px;
16
17
  --pf-t--global--icon--size--400: 56px;
17
- --pf-t--global--icon--size--300: 24px;
18
- --pf-t--global--icon--size--200: 16px;
18
+ --pf-t--global--icon--size--300: 22px;
19
+ --pf-t--global--icon--size--200: 14px;
19
20
  --pf-t--global--icon--size--100: 12px;
20
21
  --pf-t--global--border--width--300: 3px;
21
22
  --pf-t--global--border--width--200: 2px;
@@ -25,19 +26,7 @@
25
26
  --pf-t--global--border--radius--300: 16px;
26
27
  --pf-t--global--border--radius--200: 6px;
27
28
  --pf-t--global--border--radius--100: 4px;
28
- --pf-t--global--border--radius--000: 0px;
29
- --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
30
- --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
31
- --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
32
- --pf-t--global--background--color--300: var(--pf-t--color--gray--200);
33
- --pf-t--global--background--color--200: var(--pf-t--color--gray--100);
34
- --pf-t--global--background--color--100: var(--pf-t--color--white);
35
- --pf-t--global--text--color--link--300: var(--pf-t--color--purple--400);
36
- --pf-t--global--text--color--link--200: var(--pf-t--color--blue--500);
37
- --pf-t--global--text--color--link--100: var(--pf-t--color--blue--400);
38
- --pf-t--global--text--color--300: var(--pf-t--color--white);
39
- --pf-t--global--text--color--200: var(--pf-t--color--gray--500);
40
- --pf-t--global--text--color--100: var(--pf-t--color--gray--900);
29
+ --pf-t--global--border--radius--0: 0px;
41
30
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--600);
42
31
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--500);
43
32
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--400);
@@ -83,7 +72,21 @@
83
72
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
84
73
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
85
74
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
86
- --pf-t--global--spacer--sm: 8px; // TODO these should be base values
75
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--400);
76
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--500);
77
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--400);
78
+ --pf-t--global--text--color--400: var(--pf-t--color--orangered--400);
79
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
80
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--500);
81
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--900);
82
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
83
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
84
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
85
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
86
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--200);
87
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--100);
88
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
89
+ --pf-t--global--spacer--sm: 8px;
87
90
  --pf-t--global--spacer--xl: 32px;
88
91
  --pf-t--global--spacer--xs: 4px;
89
92
  --pf-t--global--spacer--2xl: 48px;
@@ -95,8 +98,8 @@
95
98
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
96
99
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
97
100
  --pf-t--global--icon--size--sm: 12px;
98
- --pf-t--global--icon--size--md: 16px;
99
- --pf-t--global--icon--size--lg: 24px;
101
+ --pf-t--global--icon--size--md: 14px;
102
+ --pf-t--global--icon--size--lg: 22px;
100
103
  --pf-t--global--icon--size--xl: 56px;
101
104
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
102
105
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
@@ -109,35 +112,12 @@
109
112
  --pf-t--global--border--width--button--hover: 2px;
110
113
  --pf-t--global--border--width--button--default: 1px;
111
114
  --pf-t--global--border--width--button--active: 2px;
112
- --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); // changed to base value
113
- --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); // changed to base value
114
- --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); // changed to base value
115
- --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); // changed to base value
116
- --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); // changed to base value
117
- --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000); // changed to base value
118
- --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
119
- --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
120
- --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
121
- --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
122
- --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
123
- --pf-t--global--background--color--primary--selected: var(--pf-t--global--background--color--200);
124
- --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
125
- --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
126
- --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
127
- --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
128
- --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--200);
129
- --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200);
130
- --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
131
- --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
132
- --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200);
133
- --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
134
- --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
135
- --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
136
- --pf-t--global--text--color--disabled--default: var(--pf-t--global--color--disabled--300);
137
- --pf-t--global--text--color--disabled--light: var(--pf-t--global--color--disabled--100);
138
- --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
139
- --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
140
- --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
115
+ --pf-t--global--border--radius--pill: 999px;
116
+ --pf-t--global--border--radius--tiny: 4px;
117
+ --pf-t--global--border--radius--medium: 16px;
118
+ --pf-t--global--border--radius--large: 24px;
119
+ --pf-t--global--border--radius--small: 6px;
120
+ --pf-t--global--border--radius--sharp: 0px;
141
121
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
142
122
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
143
123
  --pf-t--global--color--brand--active: var(--pf-t--global--color--brand--300);
@@ -186,10 +166,37 @@
186
166
  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
187
167
  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
188
168
  --pf-t--global--color--favorite--active: var(--pf-t--global--color--favorite--200);
169
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
170
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
171
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
172
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
173
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
174
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
175
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
176
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
177
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
178
+ --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
179
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
180
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
181
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
182
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
183
+ --pf-t--global--background--color--primary--selected: var(--pf-t--global--background--color--200);
184
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
185
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
186
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
187
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
188
+ --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--200);
189
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200);
190
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
191
+ --pf-t--global--background--color--action--plain--alt--selected: var(--pf-t--global--background--color--100);
192
+ --pf-t--global--background--color--action--plain--selected: var(--pf-t--global--background--color--200);
193
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
194
+ --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200);
189
195
  --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
190
- --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--300);
196
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
191
197
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
192
198
  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
199
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
193
200
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
194
201
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
195
202
  --pf-t--global--border--color--active: var(--pf-t--global--color--brand--200);
@@ -220,10 +227,9 @@
220
227
  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
221
228
  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
222
229
  --pf-t--global--border--color--nonstatus--gray--active: var(--pf-t--global--color--nonstatus--gray--300);
223
- --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
224
- --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
225
- --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
226
- --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse); // added this
230
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
231
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
232
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--text--color--inverse);
227
233
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
228
234
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
229
235
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -231,19 +237,24 @@
231
237
  --pf-t--global--text--color--status--custom--active: var(--pf-t--global--color--status--custom--active);
232
238
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
233
239
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
234
- --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
235
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
236
- --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
237
- --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
238
240
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
239
241
  --pf-t--global--text--color--status--info--active: var(--pf-t--global--color--status--info--active);
240
242
  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
241
- --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
242
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
243
- --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
244
- --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
245
- --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
246
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
243
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
244
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
245
+ --pf-t--global--text--color--status--on-info--active: var(--pf-t--global--text--color--inverse);
246
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
247
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
248
+ --pf-t--global--text--color--status--on-danger--active: var(--pf-t--global--icon--color--inverse);
249
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
250
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
251
+ --pf-t--global--text--color--status--on-custom--active: var(--pf-t--global--text--color--inverse);
252
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
253
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
254
+ --pf-t--global--text--color--status--on-warning--active: var(--pf-t--global--text--color--inverse);
255
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
256
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
257
+ --pf-t--global--text--color--status--on-success--active: var(--pf-t--global--text--color--inverse);
247
258
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
248
259
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
249
260
  --pf-t--global--text--color--status--success--active: var(--pf-t--global--color--status--success--active);
@@ -253,38 +264,78 @@
253
264
  --pf-t--global--text--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
254
265
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
255
266
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
256
- --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
257
- --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
258
- --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
259
- --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
260
- --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
261
- --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
262
- --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
263
- --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
264
- --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
265
- --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
266
- --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
267
- --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
268
- --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
269
- --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
270
- --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
271
- --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
272
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
273
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
274
- --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
275
- --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
267
+ --pf-t--global--text--color--nonstatus--on-gold--active: var(--pf-t--global--text--color--regular);
268
+ --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--text--color--regular);
269
+ --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--text--color--regular);
270
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
271
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
272
+ --pf-t--global--text--color--nonstatus--on-green--active: var(--pf-t--global--text--color--regular);
273
+ --pf-t--global--text--color--nonstatus--on-blue--active: var(--pf-t--global--text--color--regular);
274
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
275
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
276
+ --pf-t--global--text--color--nonstatus--on-red--active: var(--pf-t--global--text--color--regular);
277
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
278
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
279
+ --pf-t--global--text--color--nonstatus--on-orangered--active: var(--pf-t--global--text--color--regular);
280
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
281
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
282
+ --pf-t--global--text--color--nonstatus--on-orange--active: var(--pf-t--global--text--color--regular);
283
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
284
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
285
+ --pf-t--global--text--color--nonstatus--on-cyan--active: var(--pf-t--global--text--color--regular);
286
+ --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--text--color--regular);
287
+ --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--text--color--regular);
288
+ --pf-t--global--text--color--nonstatus--on-purple--active: var(--pf-t--global--text--color--regular);
289
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
290
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
291
+ --pf-t--global--text--color--nonstatus--on-gray--active: var(--pf-t--global--text--color--regular);
292
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
293
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
294
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
276
295
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
277
296
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
278
297
  --pf-t--global--icon--color--brand--active: var(--pf-t--global--color--brand--active);
298
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
299
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
300
+ --pf-t--global--icon--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
301
+ --pf-t--global--icon--color--nonstatus--on-orange--active: var(--pf-t--global--icon--color--regular);
302
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
303
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
304
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
305
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
306
+ --pf-t--global--icon--color--nonstatus--on-orangered--active: var(--pf-t--global--icon--color--regular);
307
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
308
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
309
+ --pf-t--global--icon--color--nonstatus--on-blue--active: var(--pf-t--global--icon--color--regular);
310
+ --pf-t--global--icon--color--nonstatus--on-red--active: var(--pf-t--global--icon--color--regular);
311
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
312
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
313
+ --pf-t--global--icon--color--nonstatus--on-gold--active: var(--pf-t--global--icon--color--regular);
314
+ --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
315
+ --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
316
+ --pf-t--global--icon--color--nonstatus--on-green--active: var(--pf-t--global--icon--color--regular);
317
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
318
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
319
+ --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
320
+ --pf-t--global--icon--color--nonstatus--on-cyan--active: var(--pf-t--global--icon--color--regular);
321
+ --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
322
+ --pf-t--global--icon--color--nonstatus--on-gray--active: var(--pf-t--global--icon--color--regular);
323
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
324
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
325
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
326
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
327
+ --pf-t--global--icon--color--nonstatus--on-purple--active: var(--pf-t--global--icon--color--regular);
328
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
329
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
330
+ --pf-t--global--icon--color--favorite--active: var(--pf-t--global--color--favorite--active);
331
+ --pf-t--global--icon--color--status--on-danger--active: var(--pf-t--global--icon--color--inverse);
279
332
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
280
333
  --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
281
- --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
282
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
283
- --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
284
- --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
334
+ --pf-t--global--icon--color--status--on-custom--active: var(--pf-t--global--icon--color--inverse);
285
335
  --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
286
336
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
287
337
  --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
338
+ --pf-t--global--icon--color--status--on-info--active: var(--pf-t--global--icon--color--inverse);
288
339
  --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
289
340
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
290
341
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
@@ -301,27 +352,12 @@
301
352
  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
302
353
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
303
354
  --pf-t--global--icon--color--status--info--active: var(--pf-t--global--color--status--info--active);
304
- --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
305
- --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
306
- --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
307
- --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
308
- --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
309
- --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
310
- --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
311
- --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
312
- --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
313
- --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
314
- --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
315
- --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
316
- --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
317
- --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
318
- --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
319
- --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
320
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
321
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
322
- --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
323
- --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
324
- --pf-t--global--icon--color--favorite--active: var(--pf-t--global--color--favorite--active);
355
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
356
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
357
+ --pf-t--global--icon--color--status--on-success--active: var(--pf-t--global--icon--color--inverse);
358
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
359
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
360
+ --pf-t--global--icon--color--status--on-warning--active: var(--pf-t--global--icon--color--inverse);
325
361
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
326
362
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
327
363
  --pf-t--global--border--color--brand--active: var(--pf-t--global--color--brand--active);
package/base/tokens/_tokens-palette.scss CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 14 Aug 2023 18:10:37 GMT
3
+ * Generated on Wed, 04 Oct 2023 12:59:21 GMT
4
4
  */
5
5
 
6
- // stylelint-disable custom-property-pattern
7
- :root {
6
+ :root {
8
7
  --pf-t--color--white: #fff;
9
8
  --pf-t--color--black: #000;
10
9
  --pf-t--color--gray--1000: #151515;
@@ -74,4 +73,3 @@
74
73
  --pf-t--color--red--200: #f69f98;
75
74
  --pf-t--color--red--100: #ffdbd9;
76
75
  }
77
- // stylelint-enable custom-property-pattern
package/components/Masthead/masthead.css CHANGED
@@ -28,8 +28,8 @@
28
28
  .pf-v5-c-masthead {
29
29
  --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
30
30
  --pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
31
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
32
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
31
+ --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
32
+ --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--lg);
33
33
  --pf-v5-c-masthead--xl--inset: var(--pf-v5-global--spacer--lg);
34
34
  --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
35
35
  --pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
@@ -69,17 +69,17 @@
69
69
  --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
70
70
  --pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
71
71
  --pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
72
- --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
72
+ --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
73
73
  --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-v5-global--palette--black-600);
74
74
  --pf-v5-c-masthead__toggle--MarginRight: var(--pf-v5-global--spacer--sm);
75
75
  --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
76
76
  --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
77
- --pf-v5-c-masthead--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
77
+ --pf-v5-c-masthead--m-light--BackgroundColor: var(--pf-t--global--background--color--primary--default);
78
78
  --pf-v5-c-masthead--m-light__main--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
79
- --pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
80
- --pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
79
+ --pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
80
+ --pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-t--global--border--color--default);
81
81
  --pf-v5-c-masthead--c-toolbar__item--Display: flex;
82
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--palette--black-800);
82
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-t--global--border--color--default);
83
83
  --pf-v5-c-masthead--c-context-selector--Width: auto;
84
84
  --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
85
85
  --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
@@ -102,7 +102,7 @@
102
102
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
103
103
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
104
104
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
105
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
105
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
106
106
  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
107
107
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
108
108
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
@@ -251,6 +251,11 @@
251
251
  --pf-v5-c-masthead__main--MarginRight: 0;
252
252
  }
253
253
 
254
+ .pf-v5-c-masthead__logo {
255
+ display: flex;
256
+ gap: var(--pf-t--global--spacer--md);
257
+ }
258
+
254
259
  .pf-v5-c-masthead__content {
255
260
  display: flex;
256
261
  flex-grow: 1;
package/components/Masthead/masthead.scss CHANGED
@@ -45,10 +45,10 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
45
45
  .#{$masthead} {
46
46
  --#{$masthead}--PaddingLeft: var(--#{$masthead}--inset);
47
47
  --#{$masthead}--PaddingRight: var(--#{$masthead}--inset);
48
- --#{$masthead}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
48
+ --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
49
49
 
50
50
  // Insets
51
- --#{$masthead}--inset: var(--#{$pf-global}--spacer--md); // match page insets
51
+ --#{$masthead}--inset: var(--pf-t--global--spacer--lg); // match page insets
52
52
  --#{$masthead}--xl--inset: var(--#{$pf-global}--spacer--lg); // match page insets
53
53
 
54
54
  // Stack
@@ -94,7 +94,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
94
94
  // Main border
95
95
  --#{$masthead}__main--before--Right: calc(var(--#{$masthead}--inset) * -1);
96
96
  --#{$masthead}__main--before--Left: calc(var(--#{$masthead}--inset) * -1);
97
- --#{$masthead}__main--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
97
+ --#{$masthead}__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
98
98
  --#{$masthead}__main--before--BorderBottomColor: var(--#{$pf-global}--palette--black-600);
99
99
 
100
100
  // Toggle
@@ -103,18 +103,18 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
103
103
  --#{$masthead}__toggle--c-button--FontSize: var(--#{$pf-global}--FontSize--2xl);
104
104
 
105
105
  // Light 100
106
- --#{$masthead}--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
106
+ --#{$masthead}--m-light--BackgroundColor: var(--pf-t--global--background--color--primary--default);
107
107
  --#{$masthead}--m-light__main--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
108
108
 
109
109
  // Light 200
110
- --#{$masthead}--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
111
- --#{$masthead}--m-light-200__main--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
110
+ --#{$masthead}--m-light-200--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
111
+ --#{$masthead}--m-light-200__main--BorderBottomColor: var(--pf-t--global--border--color--default);
112
112
 
113
113
  // Toolbar item
114
114
  --#{$masthead}--c-toolbar__item--Display: flex;
115
115
 
116
116
  // Borders
117
- --#{$masthead}--item-border-color--base: var(--#{$pf-global}--palette--black-800);
117
+ --#{$masthead}--item-border-color--base: var(--pf-t--global--border--color--default);
118
118
 
119
119
  // Context selector
120
120
  --#{$masthead}--c-context-selector--Width: auto;
@@ -145,7 +145,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
145
145
  --#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
146
146
  --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
147
147
  --#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
148
- --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
148
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
149
149
  --#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
150
150
 
151
151
  // Set layout to stack by default
@@ -286,6 +286,11 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
286
286
  }
287
287
  }
288
288
 
289
+ .#{$masthead}__logo {
290
+ display: flex;
291
+ gap: var(--pf-t--global--spacer--md);
292
+ }
293
+
289
294
  // Content
290
295
  .#{$masthead}__content {
291
296
  display: flex;
package/components/Table/table-grid.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .pf-v5-c-table[class*=pf-m-grid] {
2
- --pf-v5-c-table--responsive--BorderColor: var(--pf-v5-global--BorderColor--300);
3
- --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
2
+ --pf-v5-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
4
4
  --pf-v5-c-table__tbody--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
5
5
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
6
- --pf-v5-c-table__tbody--after--BorderColor: var(--pf-v5-global--active-color--100);
7
- --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
6
+ --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
7
+ --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
8
8
  --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9
9
  --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-v5-global--spacer--sm);
10
+ --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
11
11
  --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
12
12
  --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
13
13
  --pf-v5-c-table__tr--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -23,7 +23,7 @@
23
23
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
24
24
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--400);
25
25
  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
26
- --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--100);
26
+ --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
27
27
  --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
28
28
  --pf-v5-c-table--m-grid--cell--PaddingTop: 0;
29
29
  --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
@@ -46,8 +46,8 @@
46
46
  --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
47
47
  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
48
48
  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
50
- --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-v5-global--spacer--sm);
49
+ --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
50
+ --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
51
51
  --pf-v5-c-table__check--responsive--MarginTop: 0.875rem;
52
52
  --pf-v5-c-table--m-grid__favorite--MarginTop: 0.5rem;
53
53
  --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-v5-global--spacer--xl);
package/components/Table/table-grid.scss CHANGED
@@ -38,19 +38,19 @@
38
38
  // ============================================================ //
39
39
 
40
40
  // Table
41
- --#{$table}--responsive--BorderColor: var(--#{$pf-global}--BorderColor--300);
41
+ --#{$table}--responsive--BorderColor: var(--pf-t--global--border--color--default);
42
42
 
43
43
  // Body
44
- --#{$table}__tbody--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
44
+ --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
45
45
  --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
46
46
  --#{$table}__tbody--after--BorderLeftWidth: 0;
47
- --#{$table}__tbody--after--BorderColor: var(--#{$pf-global}--active-color--100);
47
+ --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
48
48
 
49
49
  // Row
50
- --#{$table}__tr--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
50
+ --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
51
51
  --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
52
  --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
53
- --#{$table}__tr--responsive--MarginTop: var(--#{$pf-global}--spacer--sm);
53
+ --#{$table}__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
54
54
  --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
55
55
  --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
56
  --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
@@ -76,7 +76,7 @@
76
76
 
77
77
  // selected
78
78
  --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
79
- --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--100);
79
+ --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
80
80
 
81
81
  // Cell display
82
82
  --#{$table}--m-grid--cell--hidden-visible--Display: grid;
@@ -109,7 +109,7 @@
109
109
  --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
110
110
  --#{$table}__expandable-row-content--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
111
111
  --#{$table}__expandable-row-content--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
112
- --#{$table}__expandable-row-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
112
+ --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
113
113
 
114
114
  @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
115
115
  --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$table}__expandable-row-content--responsive--xl--PaddingRight);
@@ -117,7 +117,7 @@
117
117
  }
118
118
 
119
119
  // Check
120
- --#{$table}__check--responsive--MarginLeft: var(--#{$pf-global}--spacer--sm);
120
+ --#{$table}__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
121
121
  --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
122
122
 
123
123
  // Favorite