@patternfly/patternfly 5.0.0-alpha.63 → 5.0.0-alpha.65

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 (76) hide show
  1. package/base/_globals.scss +1 -1
  2. package/base/_themes.scss +2 -2
  3. package/base/_variables.scss +1 -1
  4. package/base/themes/dark/_variables.scss +1 -1
  5. package/components/AboutModalBox/about-modal-box.css +2 -2
  6. package/components/Accordion/accordion.css +1 -1
  7. package/components/Alert/alert.css +1 -1
  8. package/components/AppLauncher/app-launcher.css +1 -1
  9. package/components/Badge/badge.css +1 -1
  10. package/components/Banner/banner.css +3 -3
  11. package/components/Button/button.css +2 -2
  12. package/components/CalendarMonth/calendar-month.css +3 -3
  13. package/components/Card/card.css +2 -2
  14. package/components/Chip/chip.css +1 -1
  15. package/components/ClipboardCopy/clipboard-copy.css +3 -3
  16. package/components/CodeEditor/code-editor.css +1 -1
  17. package/components/ContextSelector/context-selector.css +5 -5
  18. package/components/DataList/data-list.css +1 -1
  19. package/components/DatePicker/date-picker.css +1 -1
  20. package/components/DragDrop/drag-drop.css +1 -1
  21. package/components/Drawer/drawer.css +2 -2
  22. package/components/Dropdown/dropdown.css +3 -3
  23. package/components/DualListSelector/dual-list-selector.css +1 -1
  24. package/components/Form/form.css +1 -1
  25. package/components/FormControl/form-control.css +3 -3
  26. package/components/HelperText/helper-text.css +1 -1
  27. package/components/Hint/hint.css +1 -1
  28. package/components/InputGroup/input-group.css +2 -2
  29. package/components/Label/label.css +1 -1
  30. package/components/LogViewer/log-viewer.css +2 -2
  31. package/components/Login/login.css +5 -5
  32. package/components/Masthead/masthead.css +3 -3
  33. package/components/Menu/menu.css +1 -1
  34. package/components/MenuToggle/menu-toggle.css +2 -2
  35. package/components/ModalBox/modal-box.css +1 -1
  36. package/components/Nav/nav.css +6 -6
  37. package/components/NotificationBadge/notification-badge.css +1 -1
  38. package/components/NotificationDrawer/notification-drawer.css +1 -1
  39. package/components/OptionsMenu/options-menu.css +2 -2
  40. package/components/Page/page.css +14 -14
  41. package/components/Pagination/pagination.css +1 -1
  42. package/components/Panel/panel.css +1 -1
  43. package/components/Popover/popover.css +1 -1
  44. package/components/Progress/progress.css +1 -1
  45. package/components/Select/select.css +2 -2
  46. package/components/SimpleList/simple-list.css +1 -1
  47. package/components/Skeleton/skeleton.css +1 -1
  48. package/components/Switch/switch.css +1 -1
  49. package/components/Table/table.css +2 -2
  50. package/components/Tabs/tabs.css +1 -1
  51. package/components/TextInputGroup/text-input-group.css +1 -1
  52. package/components/Tile/tile.css +1 -1
  53. package/components/ToggleGroup/toggle-group.css +1 -1
  54. package/components/Tooltip/tooltip.css +1 -1
  55. package/components/TreeView/tree-view.css +1 -1
  56. package/components/Wizard/wizard.css +3 -3
  57. package/layouts/Flex/flex.css +78 -18
  58. package/layouts/Flex/flex.scss +1 -1
  59. package/package.json +1 -1
  60. package/patternfly-addons.css +78 -78
  61. package/patternfly-base-no-globals-theme-dark-unversioned.css +5234 -0
  62. package/patternfly-base-no-globals-theme-dark-unversioned.scss +11 -0
  63. package/patternfly-base-theme-dark-unversioned.css +5351 -0
  64. package/patternfly-base-theme-dark-unversioned.scss +5 -0
  65. package/patternfly-charts-theme-dark-unversioned.css +70 -0
  66. package/patternfly-charts-theme-dark-unversioned.scss +8 -0
  67. package/patternfly-no-globals.css +382 -322
  68. package/patternfly-theme-dark-unversioned.css +34440 -0
  69. package/patternfly-theme-dark-unversioned.scss +6 -0
  70. package/patternfly.css +382 -322
  71. package/patternfly.min.css +1 -1
  72. package/patternfly.min.css.map +1 -1
  73. package/sass-utilities/_init.scss +20 -0
  74. package/sass-utilities/mixins.scss +2 -2
  75. package/utilities/BackgroundColor/BackgroundColor.css +30 -30
  76. package/utilities/Text/text.css +48 -48
package/sass-utilities/_init.scss CHANGED
@@ -11,3 +11,23 @@ $pf-prefix: #{$pf-global--namespace} + #{$pf-global--version} !default;
11
11
  // Global variable, namespace prefix and version
12
12
  $pf-global: #{$pf-prefix} + 'global' !default;
13
13
  // stylelint-enable
14
+
15
+ // Thematic variables
16
+ // stylelint-disable scss/dollar-variable-pattern
17
+ $pf-global--theme--namespace: $pf-global--namespace !default;
18
+ $pf-global--theme--version: $pf-global--version !default;
19
+ $pf-global--theme-dark--class: 'theme-dark' !default;
20
+ $pf-global--theme-dark--placeholder--class: 't-dark' !default;
21
+ $pf-global--theme-light--class: 'theme-light' !default;
22
+ $pf-global--theme-light--placeholder--class: 't-light' !default;
23
+ // stylelint-enable
24
+
25
+ // Dark theme versioned variables
26
+ $pf-v5--theme-dark--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--class} !default; // include the operator here
27
+ $pf-v5--theme-dark--target: ':root' !default; // include the operator here
28
+ $pf-v5--theme-dark--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--placeholder--class} !default; // include the operator here
29
+
30
+ // Light theme versioned variables
31
+ $pf-v5--theme-light--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--class} !default; // include the operator here
32
+ $pf-v5--theme-light--target: ':root' !default; // include the operator here
33
+ $pf-v5--theme-light--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--placeholder--class} !default; // include the operator here
package/sass-utilities/mixins.scss CHANGED
@@ -296,8 +296,8 @@
296
296
  }
297
297
 
298
298
  // Dark theme style block
299
- @mixin pf-v5-theme-dark($pf-v5-theme-dark-class: ".pf-v5-theme-dark", $pf-v5-theme-dark-prefix: "") {
300
- #{$pf-v5-theme-dark-prefix}:where(#{$pf-v5-theme-dark-class}) {
299
+ @mixin pf-v5-theme-dark($theme-dark-class: $pf-v5--theme-dark--class, $theme-dark-target: $pf-v5--theme-dark--target) {
300
+ #{$theme-dark-target}:where(#{$theme-dark-class}) {
301
301
  @content;
302
302
  }
303
303
  }
package/utilities/BackgroundColor/BackgroundColor.css CHANGED
@@ -312,103 +312,103 @@
312
312
  background-color: var(--pf-v5-global--palette--red-50) !important;
313
313
  }
314
314
  }
315
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default {
315
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default {
316
316
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
317
317
  }
318
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success {
318
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success {
319
319
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
320
320
  }
321
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info {
321
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info {
322
322
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
323
323
  }
324
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning {
324
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning {
325
325
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
326
326
  }
327
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger {
327
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger {
328
328
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
329
329
  }
330
330
  @media screen and (min-width: 576px) {
331
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-sm {
331
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-sm {
332
332
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
333
333
  }
334
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-sm {
334
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-sm {
335
335
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
336
336
  }
337
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-sm {
337
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-sm {
338
338
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
339
339
  }
340
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-sm {
340
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-sm {
341
341
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
342
342
  }
343
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-sm {
343
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-sm {
344
344
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
345
345
  }
346
346
  }
347
347
  @media screen and (min-width: 768px) {
348
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-md {
348
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-md {
349
349
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
350
350
  }
351
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-md {
351
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-md {
352
352
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
353
353
  }
354
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-md {
354
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-md {
355
355
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
356
356
  }
357
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-md {
357
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-md {
358
358
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
359
359
  }
360
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-md {
360
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-md {
361
361
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
362
362
  }
363
363
  }
364
364
  @media screen and (min-width: 992px) {
365
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-lg {
365
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-lg {
366
366
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
367
367
  }
368
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-lg {
368
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-lg {
369
369
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
370
370
  }
371
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-lg {
371
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-lg {
372
372
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
373
373
  }
374
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-lg {
374
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-lg {
375
375
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
376
376
  }
377
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-lg {
377
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-lg {
378
378
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
379
379
  }
380
380
  }
381
381
  @media screen and (min-width: 1200px) {
382
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-xl {
382
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-xl {
383
383
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
384
384
  }
385
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-xl {
385
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-xl {
386
386
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
387
387
  }
388
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-xl {
388
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-xl {
389
389
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
390
390
  }
391
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-xl {
391
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-xl {
392
392
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
393
393
  }
394
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-xl {
394
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-xl {
395
395
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
396
396
  }
397
397
  }
398
398
  @media screen and (min-width: 1450px) {
399
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-2xl {
399
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-2xl {
400
400
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
401
401
  }
402
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-2xl {
402
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-2xl {
403
403
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
404
404
  }
405
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-2xl {
405
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-2xl {
406
406
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
407
407
  }
408
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-2xl {
408
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-2xl {
409
409
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
410
410
  }
411
- :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-2xl {
411
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-2xl {
412
412
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
413
413
  }
414
414
  }
package/utilities/Text/text.css CHANGED
@@ -925,157 +925,157 @@
925
925
  white-space: nowrap !important;
926
926
  }
927
927
 
928
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300 {
928
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300 {
929
929
  color: var(--pf-v5-global--Color--100) !important;
930
930
  }
931
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100 {
931
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100 {
932
932
  color: var(--pf-v5-global--Color-100) !important;
933
933
  }
934
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200 {
934
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200 {
935
935
  color: var(--pf-v5-global--Color-200) !important;
936
936
  }
937
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300 {
937
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300 {
938
938
  color: var(--pf-v5-global--custom-color--100) !important;
939
939
  }
940
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200 {
940
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200 {
941
941
  color: var(--pf-v5-global--success-color--100) !important;
942
942
  }
943
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200 {
943
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200 {
944
944
  color: var(--pf-v5-global--info-color--100) !important;
945
945
  }
946
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300 {
946
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300 {
947
947
  color: var(--pf-v5-global--danger-color--100) !important;
948
948
  }
949
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark {
949
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark {
950
950
  color: var(--pf-v5-global--icon--Color--dark) !important;
951
951
  }
952
952
  @media screen and (min-width: 576px) {
953
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-sm {
953
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-sm {
954
954
  color: var(--pf-v5-global--Color--100) !important;
955
955
  }
956
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-sm {
956
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-sm {
957
957
  color: var(--pf-v5-global--Color-100) !important;
958
958
  }
959
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-sm {
959
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-sm {
960
960
  color: var(--pf-v5-global--Color-200) !important;
961
961
  }
962
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-sm {
962
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-sm {
963
963
  color: var(--pf-v5-global--custom-color--100) !important;
964
964
  }
965
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-sm {
965
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-sm {
966
966
  color: var(--pf-v5-global--success-color--100) !important;
967
967
  }
968
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-sm {
968
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-sm {
969
969
  color: var(--pf-v5-global--info-color--100) !important;
970
970
  }
971
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-sm {
971
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-sm {
972
972
  color: var(--pf-v5-global--danger-color--100) !important;
973
973
  }
974
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-sm {
974
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-sm {
975
975
  color: var(--pf-v5-global--icon--Color--dark) !important;
976
976
  }
977
977
  }
978
978
  @media screen and (min-width: 768px) {
979
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-md {
979
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-md {
980
980
  color: var(--pf-v5-global--Color--100) !important;
981
981
  }
982
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-md {
982
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-md {
983
983
  color: var(--pf-v5-global--Color-100) !important;
984
984
  }
985
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-md {
985
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-md {
986
986
  color: var(--pf-v5-global--Color-200) !important;
987
987
  }
988
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-md {
988
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-md {
989
989
  color: var(--pf-v5-global--custom-color--100) !important;
990
990
  }
991
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-md {
991
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-md {
992
992
  color: var(--pf-v5-global--success-color--100) !important;
993
993
  }
994
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-md {
994
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-md {
995
995
  color: var(--pf-v5-global--info-color--100) !important;
996
996
  }
997
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-md {
997
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-md {
998
998
  color: var(--pf-v5-global--danger-color--100) !important;
999
999
  }
1000
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-md {
1000
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-md {
1001
1001
  color: var(--pf-v5-global--icon--Color--dark) !important;
1002
1002
  }
1003
1003
  }
1004
1004
  @media screen and (min-width: 992px) {
1005
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-lg {
1005
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-lg {
1006
1006
  color: var(--pf-v5-global--Color--100) !important;
1007
1007
  }
1008
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-lg {
1008
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-lg {
1009
1009
  color: var(--pf-v5-global--Color-100) !important;
1010
1010
  }
1011
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-lg {
1011
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-lg {
1012
1012
  color: var(--pf-v5-global--Color-200) !important;
1013
1013
  }
1014
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-lg {
1014
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-lg {
1015
1015
  color: var(--pf-v5-global--custom-color--100) !important;
1016
1016
  }
1017
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-lg {
1017
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-lg {
1018
1018
  color: var(--pf-v5-global--success-color--100) !important;
1019
1019
  }
1020
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-lg {
1020
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-lg {
1021
1021
  color: var(--pf-v5-global--info-color--100) !important;
1022
1022
  }
1023
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-lg {
1023
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-lg {
1024
1024
  color: var(--pf-v5-global--danger-color--100) !important;
1025
1025
  }
1026
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-lg {
1026
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-lg {
1027
1027
  color: var(--pf-v5-global--icon--Color--dark) !important;
1028
1028
  }
1029
1029
  }
1030
1030
  @media screen and (min-width: 1200px) {
1031
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-xl {
1031
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-xl {
1032
1032
  color: var(--pf-v5-global--Color--100) !important;
1033
1033
  }
1034
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-xl {
1034
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-xl {
1035
1035
  color: var(--pf-v5-global--Color-100) !important;
1036
1036
  }
1037
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-xl {
1037
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-xl {
1038
1038
  color: var(--pf-v5-global--Color-200) !important;
1039
1039
  }
1040
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-xl {
1040
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-xl {
1041
1041
  color: var(--pf-v5-global--custom-color--100) !important;
1042
1042
  }
1043
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-xl {
1043
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-xl {
1044
1044
  color: var(--pf-v5-global--success-color--100) !important;
1045
1045
  }
1046
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-xl {
1046
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-xl {
1047
1047
  color: var(--pf-v5-global--info-color--100) !important;
1048
1048
  }
1049
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-xl {
1049
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-xl {
1050
1050
  color: var(--pf-v5-global--danger-color--100) !important;
1051
1051
  }
1052
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-xl {
1052
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-xl {
1053
1053
  color: var(--pf-v5-global--icon--Color--dark) !important;
1054
1054
  }
1055
1055
  }
1056
1056
  @media screen and (min-width: 1450px) {
1057
- :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-2xl {
1057
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-2xl {
1058
1058
  color: var(--pf-v5-global--Color--100) !important;
1059
1059
  }
1060
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-2xl {
1060
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-2xl {
1061
1061
  color: var(--pf-v5-global--Color-100) !important;
1062
1062
  }
1063
- :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-2xl {
1063
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-2xl {
1064
1064
  color: var(--pf-v5-global--Color-200) !important;
1065
1065
  }
1066
- :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-2xl {
1066
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-2xl {
1067
1067
  color: var(--pf-v5-global--custom-color--100) !important;
1068
1068
  }
1069
- :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-2xl {
1069
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-2xl {
1070
1070
  color: var(--pf-v5-global--success-color--100) !important;
1071
1071
  }
1072
- :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-2xl {
1072
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-2xl {
1073
1073
  color: var(--pf-v5-global--info-color--100) !important;
1074
1074
  }
1075
- :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-2xl {
1075
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-2xl {
1076
1076
  color: var(--pf-v5-global--danger-color--100) !important;
1077
1077
  }
1078
- :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-2xl {
1078
+ :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-2xl {
1079
1079
  color: var(--pf-v5-global--icon--Color--dark) !important;
1080
1080
  }
1081
1081
  }