@patternfly/patternfly 5.0.0-prerelease.7 → 5.0.0-prerelease.8

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 (38) hide show
  1. package/base/_variables.scss +4 -0
  2. package/base/patternfly-themes.css +8 -0
  3. package/base/patternfly-variables.css +8 -0
  4. package/base/themes/dark/_variables.scss +4 -0
  5. package/components/AboutModalBox/about-modal-box.css +2 -9
  6. package/components/Accordion/accordion.css +2 -0
  7. package/components/Alert/alert.css +2 -0
  8. package/components/Banner/banner.css +4 -9
  9. package/components/CalendarMonth/calendar-month.css +2 -0
  10. package/components/Chip/chip-group.css +2 -0
  11. package/components/Chip/chip.css +2 -0
  12. package/components/ContextSelector/context-selector.css +2 -0
  13. package/components/DataList/data-list.css +2 -0
  14. package/components/FormControl/form-control.css +2 -0
  15. package/components/LogViewer/log-viewer.css +2 -9
  16. package/components/Login/login.css +2 -10
  17. package/components/Masthead/masthead.css +4 -9
  18. package/components/Menu/menu.css +2 -0
  19. package/components/Page/page.css +4 -11
  20. package/components/Select/select.css +2 -0
  21. package/components/Table/table.css +2 -0
  22. package/components/TextInputGroup/text-input-group.css +2 -2
  23. package/components/TextInputGroup/text-input-group.scss +2 -2
  24. package/components/Wizard/wizard.css +2 -9
  25. package/package.json +1 -1
  26. package/patternfly-base-no-globals-theme-dark-unversioned.css +12 -0
  27. package/patternfly-base-no-globals.css +12 -0
  28. package/patternfly-base-theme-dark-unversioned.css +12 -0
  29. package/patternfly-base.css +12 -0
  30. package/patternfly-no-globals.css +14 -638
  31. package/patternfly-theme-dark-unversioned.css +14 -638
  32. package/patternfly.css +14 -638
  33. package/patternfly.min.css +1 -1
  34. package/patternfly.min.css.map +1 -1
  35. package/sass-utilities/placeholders.scss +4 -0
  36. package/sass-utilities/scss-variables.scss +6 -2
  37. package/sass-utilities/themes/dark/placeholders.scss +0 -9
  38. package/sass-utilities/themes/dark/scss-variables.scss +6 -3
package/base/_variables.scss CHANGED
@@ -232,6 +232,10 @@
232
232
  // Icons
233
233
  --#{$pf-global}--icon--Color--light: #{$pf-v5-global--icon--Color--light};
234
234
  --#{$pf-global}--icon--Color--dark: #{$pf-v5-global--icon--Color--dark};
235
+ --#{$pf-global}--icon--Color--light--light: #{$pf-v5-global--icon--Color--light--light};
236
+ --#{$pf-global}--icon--Color--dark--light: #{$pf-v5-global--icon--Color--dark--light};
237
+ --#{$pf-global}--icon--Color--light--dark: #{$pf-v5-global--icon--Color--light--dark};
238
+ --#{$pf-global}--icon--Color--dark--dark: #{$pf-v5-global--icon--Color--dark--dark};
235
239
  --#{$pf-global}--icon--FontSize--sm: #{$pf-v5-global--icon--FontSize--sm};
236
240
  --#{$pf-global}--icon--FontSize--md: #{$pf-v5-global--icon--FontSize--md};
237
241
  --#{$pf-global}--icon--FontSize--lg: #{$pf-v5-global--icon--FontSize--lg};
package/base/patternfly-themes.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-t-dark {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-t-dark .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -29,6 +33,8 @@
29
33
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
30
34
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
31
35
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
36
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
37
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
32
38
  }
33
39
 
34
40
  .pf-v5-t-dark {
@@ -39,6 +45,8 @@
39
45
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
40
46
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
41
47
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
48
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
49
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
42
50
  }
43
51
  .pf-v5-t-dark .pf-v5-c-button {
44
52
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
package/base/patternfly-variables.css CHANGED
@@ -198,6 +198,10 @@
198
198
  --pf-v5-global--BorderRadius--lg: 30em;
199
199
  --pf-v5-global--icon--Color--light: #6a6e73;
200
200
  --pf-v5-global--icon--Color--dark: #151515;
201
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
202
+ --pf-v5-global--icon--Color--dark--light: #fff;
203
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
204
+ --pf-v5-global--icon--Color--dark--dark: #151515;
201
205
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
202
206
  --pf-v5-global--icon--FontSize--md: 1rem;
203
207
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -286,6 +290,10 @@
286
290
  --pf-v5-global--link--Color--light--hover: #73bcf7;
287
291
  --pf-v5-global--link--Color--dark: #1fa7f8;
288
292
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
293
+ --pf-v5-global--icon--Color--light--light: #aaabac;
294
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
295
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
296
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
289
297
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
290
298
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
291
299
  --pf-v5-global--BackgroundColor--light-300: #26292d;
package/base/themes/dark/_variables.scss CHANGED
@@ -65,6 +65,10 @@
65
65
  --#{$pf-global}--link--Color--light--hover: #{$pf-v5-global--link--Color--light--hover};
66
66
  --#{$pf-global}--link--Color--dark: #{$pf-v5-global--link--Color--dark};
67
67
  --#{$pf-global}--link--Color--dark--hover: #{$pf-v5-global--link--Color--dark--hover};
68
+ --#{$pf-global}--icon--Color--light--light: #{$pf-v5-global--icon--Color--light};
69
+ --#{$pf-global}--icon--Color--dark--light: #{$pf-v5-global--icon--Color--dark};
70
+ --#{$pf-global}--icon--Color--light--dark: #{$pf-v5-global--icon--Color--light};
71
+ --#{$pf-global}--icon--Color--dark--dark: #{$pf-v5-global--icon--Color--dark};
68
72
  --#{$pf-global}--BackgroundColor--light-100: #{$pf-v5-global--BackgroundColor--light-100};
69
73
  --#{$pf-global}--BackgroundColor--light-200: #{$pf-v5-global--BackgroundColor--light-200};
70
74
  --#{$pf-global}--BackgroundColor--light-300: #{$pf-v5-global--BackgroundColor--light-300};
package/components/AboutModalBox/about-modal-box.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
9
11
  }
10
12
  .pf-v5-c-about-modal-box .pf-v5-c-button {
11
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -207,15 +209,6 @@
207
209
  --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
208
210
  }
209
211
 
210
- :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
211
- --pf-v5-global--Color--100: #e0e0e0;
212
- --pf-v5-global--Color--200: #aaabac;
213
- --pf-v5-global--BorderColor--100: #444548;
214
- --pf-v5-global--primary-color--100: #1fa7f8;
215
- --pf-v5-global--link--Color: #1fa7f8;
216
- --pf-v5-global--link--Color--hover: #73bcf7;
217
- --pf-v5-global--BackgroundColor--100: #1b1d21;
218
- }
219
212
  :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
220
213
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
221
214
  }
package/components/Accordion/accordion.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-accordion {
package/components/Alert/alert.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-alert {
package/components/Banner/banner.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-banner {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-c-banner .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -106,15 +110,6 @@
106
110
  cursor: not-allowed;
107
111
  }
108
112
 
109
- :where(.pf-v5-theme-dark) .pf-v5-c-banner {
110
- --pf-v5-global--Color--100: #e0e0e0;
111
- --pf-v5-global--Color--200: #aaabac;
112
- --pf-v5-global--BorderColor--100: #444548;
113
- --pf-v5-global--primary-color--100: #1fa7f8;
114
- --pf-v5-global--link--Color: #1fa7f8;
115
- --pf-v5-global--link--Color--hover: #73bcf7;
116
- --pf-v5-global--BackgroundColor--100: #1b1d21;
117
- }
118
113
  :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
119
114
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
120
115
  }
package/components/CalendarMonth/calendar-month.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-calendar-month {
package/components/Chip/chip-group.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-chip-group {
package/components/Chip/chip.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-chip {
package/components/ContextSelector/context-selector.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-context-selector {
package/components/DataList/data-list.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-data-list__item-action {
package/components/FormControl/form-control.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-form-control {
package/components/LogViewer/log-viewer.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
9
11
  }
10
12
  .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -186,15 +188,6 @@
186
188
  font-weight: var(--pf-v5-c-log-viewer__timestamp--FontWeight);
187
189
  }
188
190
 
189
- :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
190
- --pf-v5-global--Color--100: #e0e0e0;
191
- --pf-v5-global--Color--200: #aaabac;
192
- --pf-v5-global--BorderColor--100: #444548;
193
- --pf-v5-global--primary-color--100: #1fa7f8;
194
- --pf-v5-global--link--Color: #1fa7f8;
195
- --pf-v5-global--link--Color--hover: #73bcf7;
196
- --pf-v5-global--BackgroundColor--100: #1b1d21;
197
- }
198
191
  :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
199
192
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
200
193
  }
package/components/Login/login.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
9
11
  }
10
12
  .pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button {
11
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -275,16 +277,6 @@
275
277
  padding-top: var(--pf-v5-c-login__footer--c-list--PaddingTop);
276
278
  }
277
279
 
278
- :where(.pf-v5-theme-dark) .pf-v5-c-login__header,
279
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
280
- --pf-v5-global--Color--100: #e0e0e0;
281
- --pf-v5-global--Color--200: #aaabac;
282
- --pf-v5-global--BorderColor--100: #444548;
283
- --pf-v5-global--primary-color--100: #1fa7f8;
284
- --pf-v5-global--link--Color: #1fa7f8;
285
- --pf-v5-global--link--Color--hover: #73bcf7;
286
- --pf-v5-global--BackgroundColor--100: #1b1d21;
287
- }
288
280
  :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
289
281
  :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button {
290
282
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
package/components/Masthead/masthead.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -650,15 +654,6 @@
650
654
  }
651
655
  }
652
656
 
653
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
654
- --pf-v5-global--Color--100: #e0e0e0;
655
- --pf-v5-global--Color--200: #aaabac;
656
- --pf-v5-global--BorderColor--100: #444548;
657
- --pf-v5-global--primary-color--100: #1fa7f8;
658
- --pf-v5-global--link--Color: #1fa7f8;
659
- --pf-v5-global--link--Color--hover: #73bcf7;
660
- --pf-v5-global--BackgroundColor--100: #1b1d21;
661
- }
662
657
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
663
658
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
664
659
  }
package/components/Menu/menu.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-menu__group, .pf-v5-c-menu__list-item, .pf-v5-c-menu__list {
package/components/Page/page.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -955,17 +959,6 @@
955
959
  flex: 1 0 auto;
956
960
  }
957
961
 
958
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
959
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
960
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header {
961
- --pf-v5-global--Color--100: #e0e0e0;
962
- --pf-v5-global--Color--200: #aaabac;
963
- --pf-v5-global--BorderColor--100: #444548;
964
- --pf-v5-global--primary-color--100: #1fa7f8;
965
- --pf-v5-global--link--Color: #1fa7f8;
966
- --pf-v5-global--link--Color--hover: #73bcf7;
967
- --pf-v5-global--BackgroundColor--100: #1b1d21;
968
- }
969
962
  :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
970
963
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
971
964
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
package/components/Select/select.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-select {
package/components/Table/table.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > * {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -19,8 +19,8 @@
19
19
  --pf-v5-c-text-input-group__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
20
20
  --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-global--spacer--sm);
21
21
  --pf-v5-c-text-input-group__text-input--MinWidth: 12ch;
22
- --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--dark-200);
23
- --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--dark-200);
22
+ --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--200);
23
+ --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--200);
24
24
  --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
25
25
  --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
26
26
  --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -31,8 +31,8 @@
31
31
  --#{$text-input-group}__text-input--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
32
32
  --#{$text-input-group}__text-input--PaddingLeft: var(--#{$pf-global}--spacer--sm);
33
33
  --#{$text-input-group}__text-input--MinWidth: 12ch;
34
- --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--dark-200); // matches placeholder text color
35
- --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--dark-200);
34
+ --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--200); // matches placeholder text color
35
+ --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--200);
36
36
  --#{$text-input-group}__text-input--BackgroundColor: transparent;
37
37
 
38
38
  // Icon
package/components/Wizard/wizard.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
9
11
  }
10
12
  .pf-v5-c-wizard__header .pf-v5-c-button {
11
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -500,15 +502,6 @@
500
502
  margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
501
503
  }
502
504
 
503
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
504
- --pf-v5-global--Color--100: #e0e0e0;
505
- --pf-v5-global--Color--200: #aaabac;
506
- --pf-v5-global--BorderColor--100: #444548;
507
- --pf-v5-global--primary-color--100: #1fa7f8;
508
- --pf-v5-global--link--Color: #1fa7f8;
509
- --pf-v5-global--link--Color--hover: #73bcf7;
510
- --pf-v5-global--BackgroundColor--100: #1b1d21;
511
- }
512
505
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
513
506
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
514
507
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-prerelease.7",
4
+ "version": "5.0.0-prerelease.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-t-dark {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-t-dark .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -221,6 +225,10 @@
221
225
  --pf-v5-global--BorderRadius--lg: 30em;
222
226
  --pf-v5-global--icon--Color--light: #6a6e73;
223
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
224
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
225
233
  --pf-v5-global--icon--FontSize--md: 1rem;
226
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -309,6 +317,10 @@
309
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
310
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
311
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
312
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
313
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
314
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
package/patternfly-base-no-globals.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-t-dark {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-t-dark .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -221,6 +225,10 @@
221
225
  --pf-v5-global--BorderRadius--lg: 30em;
222
226
  --pf-v5-global--icon--Color--light: #6a6e73;
223
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
224
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
225
233
  --pf-v5-global--icon--FontSize--md: 1rem;
226
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -309,6 +317,10 @@
309
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
310
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
311
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
312
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
313
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
314
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-t-dark {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-t-dark .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -221,6 +225,10 @@
221
225
  --pf-v5-global--BorderRadius--lg: 30em;
222
226
  --pf-v5-global--icon--Color--light: #6a6e73;
223
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
224
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
225
233
  --pf-v5-global--icon--FontSize--md: 1rem;
226
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -309,6 +317,10 @@
309
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
310
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
311
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
312
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
313
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
314
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
package/patternfly-base.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-t-dark {
@@ -16,6 +18,8 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
19
23
  }
20
24
  .pf-v5-t-dark .pf-v5-c-button {
21
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -221,6 +225,10 @@
221
225
  --pf-v5-global--BorderRadius--lg: 30em;
222
226
  --pf-v5-global--icon--Color--light: #6a6e73;
223
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
224
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
225
233
  --pf-v5-global--icon--FontSize--md: 1rem;
226
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -309,6 +317,10 @@
309
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
310
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
311
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
312
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
313
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
314
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;