@patternfly/patternfly 5.0.0-alpha.66 → 5.0.0-alpha.68

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 (99) hide show
  1. package/base/_variables.scss +1 -1
  2. package/base/patternfly-globals.css +1 -1
  3. package/base/patternfly-variables.css +2 -2
  4. package/components/AboutModalBox/about-modal-box.css +2 -2
  5. package/components/Accordion/accordion.css +1 -1
  6. package/components/Alert/alert.css +1 -1
  7. package/components/AppLauncher/app-launcher.css +1 -1
  8. package/components/Badge/badge.css +1 -1
  9. package/components/Banner/banner.css +3 -3
  10. package/components/Button/button.css +2 -2
  11. package/components/CalendarMonth/calendar-month.css +3 -3
  12. package/components/Card/card.css +2 -2
  13. package/components/Chip/chip.css +1 -1
  14. package/components/ClipboardCopy/clipboard-copy.css +3 -3
  15. package/components/CodeEditor/code-editor.css +1 -1
  16. package/components/ContextSelector/context-selector.css +5 -5
  17. package/components/DataList/data-list.css +1 -1
  18. package/components/DatePicker/date-picker.css +1 -1
  19. package/components/DragDrop/drag-drop.css +1 -1
  20. package/components/Drawer/drawer.css +2 -2
  21. package/components/Dropdown/dropdown.css +3 -3
  22. package/components/DualListSelector/dual-list-selector.css +1 -1
  23. package/components/Form/form.css +1 -1
  24. package/components/FormControl/form-control.css +3 -3
  25. package/components/HelperText/helper-text.css +1 -1
  26. package/components/Hint/hint.css +1 -1
  27. package/components/InputGroup/input-group.css +2 -4
  28. package/components/InputGroup/input-group.scss +0 -4
  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/NumberInput/number-input.css +4 -2
  40. package/components/NumberInput/number-input.scss +5 -2
  41. package/components/OptionsMenu/options-menu.css +2 -2
  42. package/components/Page/page.css +14 -14
  43. package/components/Pagination/pagination.css +6 -4
  44. package/components/Pagination/pagination.scss +7 -1
  45. package/components/Panel/panel.css +1 -1
  46. package/components/Popover/popover.css +1 -1
  47. package/components/Progress/progress.css +1 -1
  48. package/components/Select/select.css +2 -2
  49. package/components/SimpleList/simple-list.css +1 -1
  50. package/components/Skeleton/skeleton.css +1 -1
  51. package/components/Switch/switch.css +1 -1
  52. package/components/Table/table.css +2 -2
  53. package/components/Tabs/tabs.css +1 -1
  54. package/components/TextInputGroup/text-input-group.css +1 -1
  55. package/components/Tile/tile.css +1 -1
  56. package/components/ToggleGroup/toggle-group.css +1 -1
  57. package/components/Tooltip/tooltip.css +1 -1
  58. package/components/TreeView/tree-view.css +1 -1
  59. package/components/Wizard/wizard.css +3 -3
  60. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +4 -4
  61. package/docs/components/DatePicker/examples/DatePicker.md +6 -1
  62. package/docs/components/FileUpload/examples/FileUpload.md +21 -16
  63. package/docs/components/Form/examples/Form.md +51 -31
  64. package/docs/components/FormControl/examples/FormControl.md +1 -1
  65. package/docs/components/InlineEdit/examples/InlineEdit.md +11 -156
  66. package/docs/components/InputGroup/examples/InputGroup.md +9 -4
  67. package/docs/components/Login/examples/Login.md +20 -17
  68. package/docs/components/NumberInput/examples/NumberInput.md +7 -2
  69. package/docs/components/Pagination/examples/Pagination.md +1 -1
  70. package/docs/components/Select/examples/Select.md +4 -2
  71. package/docs/components/Wizard/examples/Wizard.md +7 -70
  72. package/docs/demos/Alert/examples/Alert.md +26 -8
  73. package/docs/demos/Button/examples/Button.md +12 -12
  74. package/docs/demos/Form/examples/BasicForms.md +18 -18
  75. package/docs/demos/HelperText/examples/HelperText.md +18 -3
  76. package/docs/demos/Modal/examples/Modal.md +6 -6
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  79. package/docs/demos/Toolbar/examples/Toolbar.md +11 -1
  80. package/docs/demos/Wizard/examples/Wizard.md +0 -56
  81. package/package.json +1 -1
  82. package/patternfly-addons.css +78 -78
  83. package/patternfly-base-no-globals-theme-dark-unversioned.css +3 -3
  84. package/patternfly-base-no-globals.css +3 -3
  85. package/patternfly-base-theme-dark-unversioned.css +3 -3
  86. package/patternfly-base.css +3 -3
  87. package/patternfly-charts-theme-dark-unversioned.css +1 -1
  88. package/patternfly-charts-theme-dark.css +1 -1
  89. package/patternfly-charts.css +1 -1
  90. package/patternfly-charts.scss +1 -1
  91. package/patternfly-no-globals.css +314 -312
  92. package/patternfly-theme-dark-unversioned.css +314 -312
  93. package/patternfly.css +314 -312
  94. package/patternfly.min.css +1 -1
  95. package/patternfly.min.css.map +1 -1
  96. package/sass-utilities/_init.scss +2 -2
  97. package/themes/dark/_patternfly-charts-theme-dark.scss +1 -1
  98. package/utilities/BackgroundColor/BackgroundColor.css +30 -30
  99. package/utilities/Text/text.css +48 -48
package/patternfly-addons.css CHANGED
@@ -560,103 +560,103 @@
560
560
  background-color: var(--pf-v5-global--palette--red-50) !important;
561
561
  }
562
562
  }
563
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default {
563
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default {
564
564
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
565
565
  }
566
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success {
566
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success {
567
567
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
568
568
  }
569
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info {
569
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info {
570
570
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
571
571
  }
572
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning {
572
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning {
573
573
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
574
574
  }
575
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger {
575
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger {
576
576
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
577
577
  }
578
578
  @media screen and (min-width: 576px) {
579
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-sm {
579
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-sm {
580
580
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
581
581
  }
582
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-sm {
582
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-sm {
583
583
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
584
584
  }
585
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-sm {
585
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-sm {
586
586
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
587
587
  }
588
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-sm {
588
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-sm {
589
589
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
590
590
  }
591
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-sm {
591
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-sm {
592
592
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
593
593
  }
594
594
  }
595
595
  @media screen and (min-width: 768px) {
596
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-md {
596
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-md {
597
597
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
598
598
  }
599
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-md {
599
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-md {
600
600
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
601
601
  }
602
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-md {
602
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-md {
603
603
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
604
604
  }
605
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-md {
605
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-md {
606
606
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
607
607
  }
608
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-md {
608
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-md {
609
609
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
610
610
  }
611
611
  }
612
612
  @media screen and (min-width: 992px) {
613
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-lg {
613
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-lg {
614
614
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
615
615
  }
616
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-lg {
616
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-lg {
617
617
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
618
618
  }
619
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-lg {
619
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-lg {
620
620
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
621
621
  }
622
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-lg {
622
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-lg {
623
623
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
624
624
  }
625
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-lg {
625
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-lg {
626
626
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
627
627
  }
628
628
  }
629
629
  @media screen and (min-width: 1200px) {
630
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-xl {
630
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-xl {
631
631
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
632
632
  }
633
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-xl {
633
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-xl {
634
634
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
635
635
  }
636
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-xl {
636
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-xl {
637
637
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
638
638
  }
639
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-xl {
639
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-xl {
640
640
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
641
641
  }
642
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-xl {
642
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-xl {
643
643
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
644
644
  }
645
645
  }
646
646
  @media screen and (min-width: 1450px) {
647
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-2xl {
647
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-2xl {
648
648
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
649
649
  }
650
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-2xl {
650
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-2xl {
651
651
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
652
652
  }
653
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-2xl {
653
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-2xl {
654
654
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
655
655
  }
656
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-2xl {
656
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-2xl {
657
657
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
658
658
  }
659
- :root:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-2xl {
659
+ :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-2xl {
660
660
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
661
661
  }
662
662
  }
@@ -8476,157 +8476,157 @@
8476
8476
  white-space: nowrap !important;
8477
8477
  }
8478
8478
 
8479
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300 {
8479
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300 {
8480
8480
  color: var(--pf-v5-global--Color--100) !important;
8481
8481
  }
8482
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100 {
8482
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100 {
8483
8483
  color: var(--pf-v5-global--Color-100) !important;
8484
8484
  }
8485
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200 {
8485
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200 {
8486
8486
  color: var(--pf-v5-global--Color-200) !important;
8487
8487
  }
8488
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300 {
8488
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300 {
8489
8489
  color: var(--pf-v5-global--custom-color--100) !important;
8490
8490
  }
8491
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200 {
8491
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200 {
8492
8492
  color: var(--pf-v5-global--success-color--100) !important;
8493
8493
  }
8494
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200 {
8494
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200 {
8495
8495
  color: var(--pf-v5-global--info-color--100) !important;
8496
8496
  }
8497
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300 {
8497
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300 {
8498
8498
  color: var(--pf-v5-global--danger-color--100) !important;
8499
8499
  }
8500
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark {
8500
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark {
8501
8501
  color: var(--pf-v5-global--icon--Color--dark) !important;
8502
8502
  }
8503
8503
  @media screen and (min-width: 576px) {
8504
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-sm {
8504
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-sm {
8505
8505
  color: var(--pf-v5-global--Color--100) !important;
8506
8506
  }
8507
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-sm {
8507
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-sm {
8508
8508
  color: var(--pf-v5-global--Color-100) !important;
8509
8509
  }
8510
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-sm {
8510
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-sm {
8511
8511
  color: var(--pf-v5-global--Color-200) !important;
8512
8512
  }
8513
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-sm {
8513
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-sm {
8514
8514
  color: var(--pf-v5-global--custom-color--100) !important;
8515
8515
  }
8516
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-sm {
8516
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-sm {
8517
8517
  color: var(--pf-v5-global--success-color--100) !important;
8518
8518
  }
8519
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-sm {
8519
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-sm {
8520
8520
  color: var(--pf-v5-global--info-color--100) !important;
8521
8521
  }
8522
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-sm {
8522
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-sm {
8523
8523
  color: var(--pf-v5-global--danger-color--100) !important;
8524
8524
  }
8525
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-sm {
8525
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-sm {
8526
8526
  color: var(--pf-v5-global--icon--Color--dark) !important;
8527
8527
  }
8528
8528
  }
8529
8529
  @media screen and (min-width: 768px) {
8530
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-md {
8530
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-md {
8531
8531
  color: var(--pf-v5-global--Color--100) !important;
8532
8532
  }
8533
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-md {
8533
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-md {
8534
8534
  color: var(--pf-v5-global--Color-100) !important;
8535
8535
  }
8536
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-md {
8536
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-md {
8537
8537
  color: var(--pf-v5-global--Color-200) !important;
8538
8538
  }
8539
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-md {
8539
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-md {
8540
8540
  color: var(--pf-v5-global--custom-color--100) !important;
8541
8541
  }
8542
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-md {
8542
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-md {
8543
8543
  color: var(--pf-v5-global--success-color--100) !important;
8544
8544
  }
8545
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-md {
8545
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-md {
8546
8546
  color: var(--pf-v5-global--info-color--100) !important;
8547
8547
  }
8548
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-md {
8548
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-md {
8549
8549
  color: var(--pf-v5-global--danger-color--100) !important;
8550
8550
  }
8551
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-md {
8551
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-md {
8552
8552
  color: var(--pf-v5-global--icon--Color--dark) !important;
8553
8553
  }
8554
8554
  }
8555
8555
  @media screen and (min-width: 992px) {
8556
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-lg {
8556
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-lg {
8557
8557
  color: var(--pf-v5-global--Color--100) !important;
8558
8558
  }
8559
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-lg {
8559
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-lg {
8560
8560
  color: var(--pf-v5-global--Color-100) !important;
8561
8561
  }
8562
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-lg {
8562
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-lg {
8563
8563
  color: var(--pf-v5-global--Color-200) !important;
8564
8564
  }
8565
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-lg {
8565
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-lg {
8566
8566
  color: var(--pf-v5-global--custom-color--100) !important;
8567
8567
  }
8568
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-lg {
8568
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-lg {
8569
8569
  color: var(--pf-v5-global--success-color--100) !important;
8570
8570
  }
8571
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-lg {
8571
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-lg {
8572
8572
  color: var(--pf-v5-global--info-color--100) !important;
8573
8573
  }
8574
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-lg {
8574
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-lg {
8575
8575
  color: var(--pf-v5-global--danger-color--100) !important;
8576
8576
  }
8577
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-lg {
8577
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-lg {
8578
8578
  color: var(--pf-v5-global--icon--Color--dark) !important;
8579
8579
  }
8580
8580
  }
8581
8581
  @media screen and (min-width: 1200px) {
8582
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-xl {
8582
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-xl {
8583
8583
  color: var(--pf-v5-global--Color--100) !important;
8584
8584
  }
8585
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-xl {
8585
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-xl {
8586
8586
  color: var(--pf-v5-global--Color-100) !important;
8587
8587
  }
8588
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-xl {
8588
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-xl {
8589
8589
  color: var(--pf-v5-global--Color-200) !important;
8590
8590
  }
8591
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-xl {
8591
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-xl {
8592
8592
  color: var(--pf-v5-global--custom-color--100) !important;
8593
8593
  }
8594
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-xl {
8594
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-xl {
8595
8595
  color: var(--pf-v5-global--success-color--100) !important;
8596
8596
  }
8597
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-xl {
8597
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-xl {
8598
8598
  color: var(--pf-v5-global--info-color--100) !important;
8599
8599
  }
8600
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-xl {
8600
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-xl {
8601
8601
  color: var(--pf-v5-global--danger-color--100) !important;
8602
8602
  }
8603
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-xl {
8603
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-xl {
8604
8604
  color: var(--pf-v5-global--icon--Color--dark) !important;
8605
8605
  }
8606
8606
  }
8607
8607
  @media screen and (min-width: 1450px) {
8608
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-2xl {
8608
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-300-on-2xl {
8609
8609
  color: var(--pf-v5-global--Color--100) !important;
8610
8610
  }
8611
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-2xl {
8611
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-100-on-2xl {
8612
8612
  color: var(--pf-v5-global--Color-100) !important;
8613
8613
  }
8614
- :root:where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-2xl {
8614
+ :where(.pf-v5-theme-dark) .pf-v5-u-color-light-200-on-2xl {
8615
8615
  color: var(--pf-v5-global--Color-200) !important;
8616
8616
  }
8617
- :root:where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-2xl {
8617
+ :where(.pf-v5-theme-dark) .pf-v5-u-custom-color-300-on-2xl {
8618
8618
  color: var(--pf-v5-global--custom-color--100) !important;
8619
8619
  }
8620
- :root:where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-2xl {
8620
+ :where(.pf-v5-theme-dark) .pf-v5-u-success-color-200-on-2xl {
8621
8621
  color: var(--pf-v5-global--success-color--100) !important;
8622
8622
  }
8623
- :root:where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-2xl {
8623
+ :where(.pf-v5-theme-dark) .pf-v5-u-info-color-200-on-2xl {
8624
8624
  color: var(--pf-v5-global--info-color--100) !important;
8625
8625
  }
8626
- :root:where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-2xl {
8626
+ :where(.pf-v5-theme-dark) .pf-v5-u-danger-color-300-on-2xl {
8627
8627
  color: var(--pf-v5-global--danger-color--100) !important;
8628
8628
  }
8629
- :root:where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-2xl {
8629
+ :where(.pf-v5-theme-dark) .pf-v5-u-icon-color-dark-on-2xl {
8630
8630
  color: var(--pf-v5-global--icon--Color--dark) !important;
8631
8631
  }
8632
8632
  }
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
20
 
21
- :root {
21
+ :where(:root) {
22
22
  --pf-v5-global--palette--black-100: #fafafa;
23
23
  --pf-v5-global--palette--black-150: #f5f5f5;
24
24
  --pf-v5-global--palette--black-200: #f0f0f0;
@@ -256,7 +256,7 @@
256
256
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
257
  }
258
258
 
259
- :root:where(.pf-theme-dark) {
259
+ :where(.pf-theme-dark) {
260
260
  --pf-v5-global--palette--black-50: #e0e0e0;
261
261
  --pf-v5-global--palette--black-100: #c6c7c8;
262
262
  --pf-v5-global--palette--black-200: #aaabac;
@@ -475,7 +475,7 @@
475
475
  font-variant-numeric: tabular-nums;
476
476
  }
477
477
 
478
- :root:where(.pf-theme-dark) {
478
+ :where(.pf-theme-dark) {
479
479
  color-scheme: dark;
480
480
  }
481
481
 
package/patternfly-base-no-globals.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
20
 
21
- :root {
21
+ :where(:root) {
22
22
  --pf-v5-global--palette--black-100: #fafafa;
23
23
  --pf-v5-global--palette--black-150: #f5f5f5;
24
24
  --pf-v5-global--palette--black-200: #f0f0f0;
@@ -256,7 +256,7 @@
256
256
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
257
  }
258
258
 
259
- :root:where(.pf-v5-theme-dark) {
259
+ :where(.pf-v5-theme-dark) {
260
260
  --pf-v5-global--palette--black-50: #e0e0e0;
261
261
  --pf-v5-global--palette--black-100: #c6c7c8;
262
262
  --pf-v5-global--palette--black-200: #aaabac;
@@ -475,7 +475,7 @@
475
475
  font-variant-numeric: tabular-nums;
476
476
  }
477
477
 
478
- :root:where(.pf-v5-theme-dark) {
478
+ :where(.pf-v5-theme-dark) {
479
479
  color-scheme: dark;
480
480
  }
481
481
 
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
20
 
21
- :root {
21
+ :where(:root) {
22
22
  --pf-v5-global--palette--black-100: #fafafa;
23
23
  --pf-v5-global--palette--black-150: #f5f5f5;
24
24
  --pf-v5-global--palette--black-200: #f0f0f0;
@@ -256,7 +256,7 @@
256
256
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
257
  }
258
258
 
259
- :root:where(.pf-theme-dark) {
259
+ :where(.pf-theme-dark) {
260
260
  --pf-v5-global--palette--black-50: #e0e0e0;
261
261
  --pf-v5-global--palette--black-100: #c6c7c8;
262
262
  --pf-v5-global--palette--black-200: #aaabac;
@@ -592,7 +592,7 @@ button) {
592
592
  cursor: pointer;
593
593
  }
594
594
 
595
- :root:where(.pf-theme-dark) {
595
+ :where(.pf-theme-dark) {
596
596
  color-scheme: dark;
597
597
  }
598
598
 
package/patternfly-base.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
20
 
21
- :root {
21
+ :where(:root) {
22
22
  --pf-v5-global--palette--black-100: #fafafa;
23
23
  --pf-v5-global--palette--black-150: #f5f5f5;
24
24
  --pf-v5-global--palette--black-200: #f0f0f0;
@@ -256,7 +256,7 @@
256
256
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
257
  }
258
258
 
259
- :root:where(.pf-v5-theme-dark) {
259
+ :where(.pf-v5-theme-dark) {
260
260
  --pf-v5-global--palette--black-50: #e0e0e0;
261
261
  --pf-v5-global--palette--black-100: #c6c7c8;
262
262
  --pf-v5-global--palette--black-200: #aaabac;
@@ -592,7 +592,7 @@ button) {
592
592
  cursor: pointer;
593
593
  }
594
594
 
595
- :root:where(.pf-v5-theme-dark) {
595
+ :where(.pf-v5-theme-dark) {
596
596
  color-scheme: dark;
597
597
  }
598
598
 
package/patternfly-charts-theme-dark-unversioned.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :where(.pf-theme-dark) .pf-v5-c-chart svg g[clip-path] {
2
2
  mix-blend-mode: normal;
3
3
  }
4
- :root:where(.pf-theme-dark) {
4
+ :where(.pf-theme-dark) {
5
5
  --pf-v5-c-chart-color-blue-100: #add6ff;
6
6
  --pf-v5-c-chart-color-blue-200: #85c2ff;
7
7
  --pf-v5-c-chart-color-blue-300: #47a3ff;
package/patternfly-charts-theme-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :where(.pf-v5-theme-dark) .pf-v5-c-chart svg g[clip-path] {
2
2
  mix-blend-mode: normal;
3
3
  }
4
- :root:where(.pf-v5-theme-dark) {
4
+ :where(.pf-v5-theme-dark) {
5
5
  --pf-v5-c-chart-color-blue-100: #add6ff;
6
6
  --pf-v5-c-chart-color-blue-200: #85c2ff;
7
7
  --pf-v5-c-chart-color-blue-300: #47a3ff;
package/patternfly-charts.css CHANGED
@@ -2,7 +2,7 @@
2
2
  mix-blend-mode: multiply;
3
3
  }
4
4
 
5
- :root {
5
+ :where(:root) {
6
6
  --pf-v5-chart-color-blue-100: #8bc1f7;
7
7
  --pf-v5-chart-color-blue-200: #519de9;
8
8
  --pf-v5-chart-color-blue-300: #06c;
package/patternfly-charts.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
  }
10
10
 
11
- :root {
11
+ :where(:root) {
12
12
  // Chart colors
13
13
  // blue
14
14
  --#{$chart}-color-blue-100: #{$pf-v5-chart-color-blue-100};