@patternfly/patternfly 4.202.2 → 4.203.2

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 (53) hide show
  1. package/base/_fonts.scss +10 -10
  2. package/base/_shield-inheritable.scss +1 -1
  3. package/base/patternfly-fonts.css +10 -10
  4. package/base/patternfly-shield-inheritable.css +1 -1
  5. package/components/AlertGroup/alert-group.css +1 -1
  6. package/components/Button/button.css +1 -1
  7. package/components/Button/button.scss +1 -1
  8. package/components/Divider/divider.css +12 -12
  9. package/components/Drawer/drawer.css +2 -35
  10. package/components/Drawer/drawer.scss +2 -2
  11. package/components/JumpLinks/jump-links.css +1 -1
  12. package/components/JumpLinks/jump-links.scss +1 -1
  13. package/components/MenuToggle/menu-toggle.css +1 -1
  14. package/components/MenuToggle/menu-toggle.scss +1 -1
  15. package/components/ProgressStepper/progress-stepper.css +1 -1
  16. package/components/Sidebar/sidebar.css +0 -30
  17. package/components/Spinner/spinner.css +2 -2
  18. package/components/Table/table.css +5 -5
  19. package/components/Table/table.scss +5 -5
  20. package/components/Tabs/tabs.css +1 -1
  21. package/components/Tabs/tabs.scss +1 -1
  22. package/components/TreeView/tree-view.css +29 -1
  23. package/components/TreeView/tree-view.scss +36 -2
  24. package/docs/components/TreeView/examples/TreeView.md +1077 -677
  25. package/package.json +8 -8
  26. package/patternfly-addons.css +322 -683
  27. package/patternfly-base-no-reset.css +10 -10
  28. package/patternfly-base.css +10 -10
  29. package/patternfly-no-reset.css +66 -101
  30. package/patternfly.css +66 -101
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/utilities/Alignment/alignment.css +0 -15
  34. package/utilities/BackgroundColor/BackgroundColor.css +100 -75
  35. package/utilities/BackgroundColor/BackgroundColor.scss +6 -0
  36. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  37. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +25 -0
  38. package/utilities/Display/display.css +0 -40
  39. package/utilities/Flex/flex.css +0 -140
  40. package/utilities/Float/float.css +0 -5
  41. package/utilities/Sizing/sizing.css +48 -198
  42. package/utilities/Text/text.css +173 -210
  43. package/utilities/Text/text.scss +6 -0
  44. package/utilities/Text/themes/dark/text.css +0 -0
  45. package/utilities/Text/themes/dark/text.scss +36 -0
  46. package/docs/pages/accessibility-guide.md +0 -161
  47. package/docs/pages/contribution.md +0 -109
  48. package/docs/pages/guidelines.md +0 -367
  49. package/docs/pages/icons.md +0 -129
  50. package/docs/pages/index.js +0 -13
  51. package/docs/pages/reference-docs/PF-quick-ref.key +0 -0
  52. package/docs/pages/reference-docs/PF-quick-ref.pdf +0 -0
  53. package/docs/pages/upgrade-guide.md +0 -188
package/utilities/Alignment/alignment.css CHANGED
@@ -18,15 +18,12 @@
18
18
  .pf-u-text-align-left-on-sm {
19
19
  text-align: left !important;
20
20
  }
21
-
22
21
  .pf-u-text-align-center-on-sm {
23
22
  text-align: center !important;
24
23
  }
25
-
26
24
  .pf-u-text-align-right-on-sm {
27
25
  text-align: right !important;
28
26
  }
29
-
30
27
  .pf-u-text-align-justify-on-sm {
31
28
  text-align: justify !important;
32
29
  }
@@ -35,15 +32,12 @@
35
32
  .pf-u-text-align-left-on-md {
36
33
  text-align: left !important;
37
34
  }
38
-
39
35
  .pf-u-text-align-center-on-md {
40
36
  text-align: center !important;
41
37
  }
42
-
43
38
  .pf-u-text-align-right-on-md {
44
39
  text-align: right !important;
45
40
  }
46
-
47
41
  .pf-u-text-align-justify-on-md {
48
42
  text-align: justify !important;
49
43
  }
@@ -52,15 +46,12 @@
52
46
  .pf-u-text-align-left-on-lg {
53
47
  text-align: left !important;
54
48
  }
55
-
56
49
  .pf-u-text-align-center-on-lg {
57
50
  text-align: center !important;
58
51
  }
59
-
60
52
  .pf-u-text-align-right-on-lg {
61
53
  text-align: right !important;
62
54
  }
63
-
64
55
  .pf-u-text-align-justify-on-lg {
65
56
  text-align: justify !important;
66
57
  }
@@ -69,15 +60,12 @@
69
60
  .pf-u-text-align-left-on-xl {
70
61
  text-align: left !important;
71
62
  }
72
-
73
63
  .pf-u-text-align-center-on-xl {
74
64
  text-align: center !important;
75
65
  }
76
-
77
66
  .pf-u-text-align-right-on-xl {
78
67
  text-align: right !important;
79
68
  }
80
-
81
69
  .pf-u-text-align-justify-on-xl {
82
70
  text-align: justify !important;
83
71
  }
@@ -86,15 +74,12 @@
86
74
  .pf-u-text-align-left-on-2xl {
87
75
  text-align: left !important;
88
76
  }
89
-
90
77
  .pf-u-text-align-center-on-2xl {
91
78
  text-align: center !important;
92
79
  }
93
-
94
80
  .pf-u-text-align-right-on-2xl {
95
81
  text-align: right !important;
96
82
  }
97
-
98
83
  .pf-u-text-align-justify-on-2xl {
99
84
  text-align: justify !important;
100
85
  }
package/utilities/BackgroundColor/BackgroundColor.css CHANGED
@@ -66,63 +66,48 @@
66
66
  .pf-u-background-color-100-on-sm {
67
67
  background-color: var(--pf-global--BackgroundColor--100) !important;
68
68
  }
69
-
70
69
  .pf-u-background-color-200-on-sm {
71
70
  background-color: var(--pf-global--BackgroundColor--200) !important;
72
71
  }
73
-
74
72
  .pf-u-background-color-active-color-100-on-sm {
75
73
  background-color: var(--pf-global--active-color--100) !important;
76
74
  }
77
-
78
75
  .pf-u-background-color-active-color-300-on-sm {
79
76
  background-color: var(--pf-global--active-color--300) !important;
80
77
  }
81
-
82
78
  .pf-u-background-color-primary-color-200-on-sm {
83
79
  background-color: var(--pf-global--primary-color--200) !important;
84
80
  }
85
-
86
81
  .pf-u-background-color-dark-100-on-sm {
87
82
  background-color: var(--pf-global--BackgroundColor--dark-100) !important;
88
83
  }
89
-
90
84
  .pf-u-background-color-dark-200-on-sm {
91
85
  background-color: var(--pf-global--BackgroundColor--dark-200) !important;
92
86
  }
93
-
94
87
  .pf-u-background-color-dark-300-on-sm {
95
88
  background-color: var(--pf-global--BackgroundColor--dark-300) !important;
96
89
  }
97
-
98
90
  .pf-u-background-color-dark-400-on-sm {
99
91
  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
100
92
  }
101
-
102
93
  .pf-u-background-color-disabled-color-200-on-sm {
103
94
  background-color: var(--pf-global--disabled-color--200) !important;
104
95
  }
105
-
106
96
  .pf-u-background-color-disabled-color-300-on-sm {
107
97
  background-color: var(--pf-global--disabled-color--300) !important;
108
98
  }
109
-
110
99
  .pf-u-background-color-default-on-sm {
111
100
  background-color: var(--pf-global--palette--cyan-50) !important;
112
101
  }
113
-
114
102
  .pf-u-background-color-success-on-sm {
115
103
  background-color: var(--pf-global--palette--green-50) !important;
116
104
  }
117
-
118
105
  .pf-u-background-color-info-on-sm {
119
106
  background-color: var(--pf-global--palette--blue-50) !important;
120
107
  }
121
-
122
108
  .pf-u-background-color-warning-on-sm {
123
109
  background-color: var(--pf-global--palette--gold-50) !important;
124
110
  }
125
-
126
111
  .pf-u-background-color-danger-on-sm {
127
112
  background-color: var(--pf-global--palette--red-50) !important;
128
113
  }
@@ -131,63 +116,48 @@
131
116
  .pf-u-background-color-100-on-md {
132
117
  background-color: var(--pf-global--BackgroundColor--100) !important;
133
118
  }
134
-
135
119
  .pf-u-background-color-200-on-md {
136
120
  background-color: var(--pf-global--BackgroundColor--200) !important;
137
121
  }
138
-
139
122
  .pf-u-background-color-active-color-100-on-md {
140
123
  background-color: var(--pf-global--active-color--100) !important;
141
124
  }
142
-
143
125
  .pf-u-background-color-active-color-300-on-md {
144
126
  background-color: var(--pf-global--active-color--300) !important;
145
127
  }
146
-
147
128
  .pf-u-background-color-primary-color-200-on-md {
148
129
  background-color: var(--pf-global--primary-color--200) !important;
149
130
  }
150
-
151
131
  .pf-u-background-color-dark-100-on-md {
152
132
  background-color: var(--pf-global--BackgroundColor--dark-100) !important;
153
133
  }
154
-
155
134
  .pf-u-background-color-dark-200-on-md {
156
135
  background-color: var(--pf-global--BackgroundColor--dark-200) !important;
157
136
  }
158
-
159
137
  .pf-u-background-color-dark-300-on-md {
160
138
  background-color: var(--pf-global--BackgroundColor--dark-300) !important;
161
139
  }
162
-
163
140
  .pf-u-background-color-dark-400-on-md {
164
141
  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
165
142
  }
166
-
167
143
  .pf-u-background-color-disabled-color-200-on-md {
168
144
  background-color: var(--pf-global--disabled-color--200) !important;
169
145
  }
170
-
171
146
  .pf-u-background-color-disabled-color-300-on-md {
172
147
  background-color: var(--pf-global--disabled-color--300) !important;
173
148
  }
174
-
175
149
  .pf-u-background-color-default-on-md {
176
150
  background-color: var(--pf-global--palette--cyan-50) !important;
177
151
  }
178
-
179
152
  .pf-u-background-color-success-on-md {
180
153
  background-color: var(--pf-global--palette--green-50) !important;
181
154
  }
182
-
183
155
  .pf-u-background-color-info-on-md {
184
156
  background-color: var(--pf-global--palette--blue-50) !important;
185
157
  }
186
-
187
158
  .pf-u-background-color-warning-on-md {
188
159
  background-color: var(--pf-global--palette--gold-50) !important;
189
160
  }
190
-
191
161
  .pf-u-background-color-danger-on-md {
192
162
  background-color: var(--pf-global--palette--red-50) !important;
193
163
  }
@@ -196,63 +166,48 @@
196
166
  .pf-u-background-color-100-on-lg {
197
167
  background-color: var(--pf-global--BackgroundColor--100) !important;
198
168
  }
199
-
200
169
  .pf-u-background-color-200-on-lg {
201
170
  background-color: var(--pf-global--BackgroundColor--200) !important;
202
171
  }
203
-
204
172
  .pf-u-background-color-active-color-100-on-lg {
205
173
  background-color: var(--pf-global--active-color--100) !important;
206
174
  }
207
-
208
175
  .pf-u-background-color-active-color-300-on-lg {
209
176
  background-color: var(--pf-global--active-color--300) !important;
210
177
  }
211
-
212
178
  .pf-u-background-color-primary-color-200-on-lg {
213
179
  background-color: var(--pf-global--primary-color--200) !important;
214
180
  }
215
-
216
181
  .pf-u-background-color-dark-100-on-lg {
217
182
  background-color: var(--pf-global--BackgroundColor--dark-100) !important;
218
183
  }
219
-
220
184
  .pf-u-background-color-dark-200-on-lg {
221
185
  background-color: var(--pf-global--BackgroundColor--dark-200) !important;
222
186
  }
223
-
224
187
  .pf-u-background-color-dark-300-on-lg {
225
188
  background-color: var(--pf-global--BackgroundColor--dark-300) !important;
226
189
  }
227
-
228
190
  .pf-u-background-color-dark-400-on-lg {
229
191
  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
230
192
  }
231
-
232
193
  .pf-u-background-color-disabled-color-200-on-lg {
233
194
  background-color: var(--pf-global--disabled-color--200) !important;
234
195
  }
235
-
236
196
  .pf-u-background-color-disabled-color-300-on-lg {
237
197
  background-color: var(--pf-global--disabled-color--300) !important;
238
198
  }
239
-
240
199
  .pf-u-background-color-default-on-lg {
241
200
  background-color: var(--pf-global--palette--cyan-50) !important;
242
201
  }
243
-
244
202
  .pf-u-background-color-success-on-lg {
245
203
  background-color: var(--pf-global--palette--green-50) !important;
246
204
  }
247
-
248
205
  .pf-u-background-color-info-on-lg {
249
206
  background-color: var(--pf-global--palette--blue-50) !important;
250
207
  }
251
-
252
208
  .pf-u-background-color-warning-on-lg {
253
209
  background-color: var(--pf-global--palette--gold-50) !important;
254
210
  }
255
-
256
211
  .pf-u-background-color-danger-on-lg {
257
212
  background-color: var(--pf-global--palette--red-50) !important;
258
213
  }
@@ -261,63 +216,48 @@
261
216
  .pf-u-background-color-100-on-xl {
262
217
  background-color: var(--pf-global--BackgroundColor--100) !important;
263
218
  }
264
-
265
219
  .pf-u-background-color-200-on-xl {
266
220
  background-color: var(--pf-global--BackgroundColor--200) !important;
267
221
  }
268
-
269
222
  .pf-u-background-color-active-color-100-on-xl {
270
223
  background-color: var(--pf-global--active-color--100) !important;
271
224
  }
272
-
273
225
  .pf-u-background-color-active-color-300-on-xl {
274
226
  background-color: var(--pf-global--active-color--300) !important;
275
227
  }
276
-
277
228
  .pf-u-background-color-primary-color-200-on-xl {
278
229
  background-color: var(--pf-global--primary-color--200) !important;
279
230
  }
280
-
281
231
  .pf-u-background-color-dark-100-on-xl {
282
232
  background-color: var(--pf-global--BackgroundColor--dark-100) !important;
283
233
  }
284
-
285
234
  .pf-u-background-color-dark-200-on-xl {
286
235
  background-color: var(--pf-global--BackgroundColor--dark-200) !important;
287
236
  }
288
-
289
237
  .pf-u-background-color-dark-300-on-xl {
290
238
  background-color: var(--pf-global--BackgroundColor--dark-300) !important;
291
239
  }
292
-
293
240
  .pf-u-background-color-dark-400-on-xl {
294
241
  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
295
242
  }
296
-
297
243
  .pf-u-background-color-disabled-color-200-on-xl {
298
244
  background-color: var(--pf-global--disabled-color--200) !important;
299
245
  }
300
-
301
246
  .pf-u-background-color-disabled-color-300-on-xl {
302
247
  background-color: var(--pf-global--disabled-color--300) !important;
303
248
  }
304
-
305
249
  .pf-u-background-color-default-on-xl {
306
250
  background-color: var(--pf-global--palette--cyan-50) !important;
307
251
  }
308
-
309
252
  .pf-u-background-color-success-on-xl {
310
253
  background-color: var(--pf-global--palette--green-50) !important;
311
254
  }
312
-
313
255
  .pf-u-background-color-info-on-xl {
314
256
  background-color: var(--pf-global--palette--blue-50) !important;
315
257
  }
316
-
317
258
  .pf-u-background-color-warning-on-xl {
318
259
  background-color: var(--pf-global--palette--gold-50) !important;
319
260
  }
320
-
321
261
  .pf-u-background-color-danger-on-xl {
322
262
  background-color: var(--pf-global--palette--red-50) !important;
323
263
  }
@@ -326,64 +266,149 @@
326
266
  .pf-u-background-color-100-on-2xl {
327
267
  background-color: var(--pf-global--BackgroundColor--100) !important;
328
268
  }
329
-
330
269
  .pf-u-background-color-200-on-2xl {
331
270
  background-color: var(--pf-global--BackgroundColor--200) !important;
332
271
  }
333
-
334
272
  .pf-u-background-color-active-color-100-on-2xl {
335
273
  background-color: var(--pf-global--active-color--100) !important;
336
274
  }
337
-
338
275
  .pf-u-background-color-active-color-300-on-2xl {
339
276
  background-color: var(--pf-global--active-color--300) !important;
340
277
  }
341
-
342
278
  .pf-u-background-color-primary-color-200-on-2xl {
343
279
  background-color: var(--pf-global--primary-color--200) !important;
344
280
  }
345
-
346
281
  .pf-u-background-color-dark-100-on-2xl {
347
282
  background-color: var(--pf-global--BackgroundColor--dark-100) !important;
348
283
  }
349
-
350
284
  .pf-u-background-color-dark-200-on-2xl {
351
285
  background-color: var(--pf-global--BackgroundColor--dark-200) !important;
352
286
  }
353
-
354
287
  .pf-u-background-color-dark-300-on-2xl {
355
288
  background-color: var(--pf-global--BackgroundColor--dark-300) !important;
356
289
  }
357
-
358
290
  .pf-u-background-color-dark-400-on-2xl {
359
291
  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
360
292
  }
361
-
362
293
  .pf-u-background-color-disabled-color-200-on-2xl {
363
294
  background-color: var(--pf-global--disabled-color--200) !important;
364
295
  }
365
-
366
296
  .pf-u-background-color-disabled-color-300-on-2xl {
367
297
  background-color: var(--pf-global--disabled-color--300) !important;
368
298
  }
369
-
370
299
  .pf-u-background-color-default-on-2xl {
371
300
  background-color: var(--pf-global--palette--cyan-50) !important;
372
301
  }
373
-
374
302
  .pf-u-background-color-success-on-2xl {
375
303
  background-color: var(--pf-global--palette--green-50) !important;
376
304
  }
377
-
378
305
  .pf-u-background-color-info-on-2xl {
379
306
  background-color: var(--pf-global--palette--blue-50) !important;
380
307
  }
381
-
382
308
  .pf-u-background-color-warning-on-2xl {
383
309
  background-color: var(--pf-global--palette--gold-50) !important;
384
310
  }
385
-
386
311
  .pf-u-background-color-danger-on-2xl {
387
312
  background-color: var(--pf-global--palette--red-50) !important;
388
313
  }
314
+ }
315
+ :where(.pf-theme-dark) .pf-u-background-color-default {
316
+ background-color: var(--pf-global--BackgroundColor--100) !important;
317
+ }
318
+ :where(.pf-theme-dark) .pf-u-background-color-success {
319
+ background-color: var(--pf-global--BackgroundColor--100) !important;
320
+ }
321
+ :where(.pf-theme-dark) .pf-u-background-color-info {
322
+ background-color: var(--pf-global--BackgroundColor--100) !important;
323
+ }
324
+ :where(.pf-theme-dark) .pf-u-background-color-warning {
325
+ background-color: var(--pf-global--BackgroundColor--100) !important;
326
+ }
327
+ :where(.pf-theme-dark) .pf-u-background-color-danger {
328
+ background-color: var(--pf-global--BackgroundColor--100) !important;
329
+ }
330
+ @media screen and (min-width: 576px) {
331
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-sm {
332
+ background-color: var(--pf-global--BackgroundColor--100) !important;
333
+ }
334
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-sm {
335
+ background-color: var(--pf-global--BackgroundColor--100) !important;
336
+ }
337
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-sm {
338
+ background-color: var(--pf-global--BackgroundColor--100) !important;
339
+ }
340
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-sm {
341
+ background-color: var(--pf-global--BackgroundColor--100) !important;
342
+ }
343
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-sm {
344
+ background-color: var(--pf-global--BackgroundColor--100) !important;
345
+ }
346
+ }
347
+ @media screen and (min-width: 768px) {
348
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-md {
349
+ background-color: var(--pf-global--BackgroundColor--100) !important;
350
+ }
351
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-md {
352
+ background-color: var(--pf-global--BackgroundColor--100) !important;
353
+ }
354
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-md {
355
+ background-color: var(--pf-global--BackgroundColor--100) !important;
356
+ }
357
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-md {
358
+ background-color: var(--pf-global--BackgroundColor--100) !important;
359
+ }
360
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-md {
361
+ background-color: var(--pf-global--BackgroundColor--100) !important;
362
+ }
363
+ }
364
+ @media screen and (min-width: 992px) {
365
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-lg {
366
+ background-color: var(--pf-global--BackgroundColor--100) !important;
367
+ }
368
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-lg {
369
+ background-color: var(--pf-global--BackgroundColor--100) !important;
370
+ }
371
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-lg {
372
+ background-color: var(--pf-global--BackgroundColor--100) !important;
373
+ }
374
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-lg {
375
+ background-color: var(--pf-global--BackgroundColor--100) !important;
376
+ }
377
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-lg {
378
+ background-color: var(--pf-global--BackgroundColor--100) !important;
379
+ }
380
+ }
381
+ @media screen and (min-width: 1200px) {
382
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-xl {
383
+ background-color: var(--pf-global--BackgroundColor--100) !important;
384
+ }
385
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-xl {
386
+ background-color: var(--pf-global--BackgroundColor--100) !important;
387
+ }
388
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-xl {
389
+ background-color: var(--pf-global--BackgroundColor--100) !important;
390
+ }
391
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-xl {
392
+ background-color: var(--pf-global--BackgroundColor--100) !important;
393
+ }
394
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-xl {
395
+ background-color: var(--pf-global--BackgroundColor--100) !important;
396
+ }
397
+ }
398
+ @media screen and (min-width: 1450px) {
399
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-2xl {
400
+ background-color: var(--pf-global--BackgroundColor--100) !important;
401
+ }
402
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-2xl {
403
+ background-color: var(--pf-global--BackgroundColor--100) !important;
404
+ }
405
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-2xl {
406
+ background-color: var(--pf-global--BackgroundColor--100) !important;
407
+ }
408
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-2xl {
409
+ background-color: var(--pf-global--BackgroundColor--100) !important;
410
+ }
411
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-2xl {
412
+ background-color: var(--pf-global--BackgroundColor--100) !important;
413
+ }
389
414
  }
package/utilities/BackgroundColor/BackgroundColor.scss CHANGED
@@ -54,5 +54,11 @@ $pf-u-background-color-options: (
54
54
 
55
55
  @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
56
56
 
57
+ @import "themes/dark/BackgroundColor";
58
+
59
+ @include pf-theme-dark {
60
+ @include pf-theme-dark-background-color;
61
+ }
62
+
57
63
  // stylelint-enable
58
64
 
package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss ADDED
@@ -0,0 +1,25 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-theme-dark-background-color() {
4
+ // Background color options to be redefined in theme
5
+ $pf-u-background-color-options: (
6
+ // Note that the status backgrounds are not intended to be used in dark theme; instead, a border or other indication would be used.
7
+ background-color-default: (
8
+ background-color var(--pf-global--BackgroundColor--100)
9
+ ),
10
+ background-color-success: (
11
+ background-color var(--pf-global--BackgroundColor--100)
12
+ ),
13
+ background-color-info: (
14
+ background-color var(--pf-global--BackgroundColor--100)
15
+ ),
16
+ background-color-warning: (
17
+ background-color var(--pf-global--BackgroundColor--100)
18
+ ),
19
+ background-color-danger: (
20
+ background-color var(--pf-global--BackgroundColor--100)
21
+ )
22
+ );
23
+
24
+ @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
25
+ }