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

package/base/_globals.scss

@@ -142,6 +142,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "./themes/dark/globals";
 
-@include pf-v5-theme-dark($pf-v5-theme-dark-prefix: ":root") {
+@include pf-v5-theme-dark {
   @include pf-v5-theme-dark-globals;
 }

package/base/_themes.scss

@@ -1,4 +1,4 @@
-.pf-v5-t-dark {
+#{$pf-v5--theme-dark--placeholder--class} {
   @extend %pf-v5-t-dark;
 
   &.pf-m-transparent {
@@ -22,7 +22,7 @@
   }
 }
 
-.pf-v5-t-light {
+#{$pf-v5--theme-light--placeholder--class} {
   @extend %pf-v5-t-light;
 
   &.pf-m-transparent {

package/base/_variables.scss

@@ -290,6 +290,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "./themes/dark/variables";
 
-@include pf-v5-theme-dark($pf-v5-theme-dark-prefix: ":root") {
+@include pf-v5-theme-dark {
   @include pf-v5-theme-dark-variables;
 }

package/base/themes/dark/_variables.scss

@@ -1,6 +1,6 @@
 @import "../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-variables() {
+@mixin pf-v5-theme-dark-variables {
   // palette changes
   --#{$pf-global}--palette--black-50: #{$pf-v5-color-black-50};
   --#{$pf-global}--palette--black-100: #{$pf-v5-color-black-100};

package/components/AboutModalBox/about-modal-box.css

@@ -204,7 +204,7 @@
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -214,6 +214,6 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   color: var(--pf-v5-global--Color--100);
 }

package/components/Accordion/accordion.css

@@ -221,7 +221,7 @@
   --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-accordion {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-accordion {
   --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-accordion__toggle--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-accordion__toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/components/Alert/alert.css

@@ -208,7 +208,7 @@
   margin-right: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-alert {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-alert {
   --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--200);
   --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--100);

package/components/AppLauncher/app-launcher.css

@@ -224,7 +224,7 @@
   color: var(--pf-v5-c-app-launcher__group-title--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-app-launcher {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-app-launcher {
   --pf-v5-c-app-launcher__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-app-launcher__menu--Top: 100%;
   --pf-v5-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);

package/components/Badge/badge.css

@@ -30,7 +30,7 @@
   --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-badge {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-badge {
   --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
   --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
   --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);

package/components/Banner/banner.css

@@ -103,7 +103,7 @@
   cursor: not-allowed;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-banner {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-banner {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -113,9 +113,9 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-banner {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-banner {
   color: var(false);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :root:where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :root:where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :root:where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
   --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
 }

package/components/Button/button.css

@@ -503,7 +503,7 @@
   margin-left: var(--pf-v5-c-button__count--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-button {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-button {
   --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
   --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--primary-color--400);
@@ -543,7 +543,7 @@
   --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
   border: 0;
   border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
 }

package/components/CalendarMonth/calendar-month.css

@@ -196,7 +196,7 @@
   pointer-events: none;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
   --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
   --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
   --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
@@ -209,11 +209,11 @@
   --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-calendar-month__date--focus--after--BorderColor: transparent;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:hover, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-hover {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:hover, :root:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-hover {
   --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:focus, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-focus {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:focus, :root:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-focus {
   --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-global--primary-color--300);

package/components/Card/card.css

@@ -388,8 +388,8 @@
   border: var(--pf-v5-c-card__input--focus--BorderWidth) solid var(--pf-v5-c-card__input--focus--BorderColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-card,
-:where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-card,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
   --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
   --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
   --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);

package/components/Chip/chip.css

@@ -106,7 +106,7 @@
   line-height: 1;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-chip {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-chip {
   --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);

package/components/ClipboardCopy/clipboard-copy.css

@@ -88,13 +88,13 @@
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
   --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
   margin-left: 0;
   border-left: 1px solid var(--pf-v5-global--palette--black-700) !important;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
   border: 0;
 }

package/components/CodeEditor/code-editor.css

@@ -135,6 +135,6 @@
   margin-left: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
   border-left: 1px solid var(--pf-v5-global--palette--black-700);
 }

package/components/ContextSelector/context-selector.css

@@ -301,19 +301,19 @@
   pointer-events: none;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-context-selector {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-context-selector {
   --pf-v5-c-context-selector__menu--Top: 100%;
   --pf-v5-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle {
   background: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle.pf-m-plain {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__toggle.pf-m-plain {
   background: transparent;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu {
   background: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer {
   border-top: 1px solid var(--pf-v5-global--BorderColor--300);
 }

package/components/DataList/data-list.css

@@ -899,7 +899,7 @@
   padding: 0;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-data-list {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-data-list {
   --pf-v5-c-data-list--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-data-list--sm--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-data-list__item--BorderBottomColor: var(--pf-v5-global--BorderColor--100);

package/components/DatePicker/date-picker.css

@@ -53,7 +53,7 @@
   min-width: min-content;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-date-picker {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-date-picker {
   --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-date-picker__calendar--Top: 100%;
 }

package/components/DragDrop/drag-drop.css

@@ -66,6 +66,6 @@
   --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-droppable {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-droppable {
   --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
 }

package/components/Drawer/drawer.css

@@ -773,10 +773,10 @@
     display: none;
   }
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-drawer {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-drawer {
   --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-drawer__splitter--BackgroundColor: transparent;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-inline, :where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-static {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-inline, :root:where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-static {
   --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 }

package/components/Dropdown/dropdown.css

@@ -647,7 +647,7 @@
   color: var(--pf-v5-c-dropdown__group-title--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-dropdown {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-dropdown {
   --pf-v5-c-dropdown__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-dropdown__toggle--before--BorderTopColor: transparent;
   --pf-v5-c-dropdown__toggle--before--BorderRightColor: transparent;
@@ -662,9 +662,9 @@
   --pf-v5-c-dropdown--m-top__menu--TranslateY: -100%;
   --pf-v5-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain):disabled, :root:where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
   color: var(--pf-v5-global--palette--black-100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle.pf-m-plain {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-dropdown__toggle.pf-m-plain {
   background: transparent;
 }

package/components/DualListSelector/dual-list-selector.css

@@ -297,7 +297,7 @@
   --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
   --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);

package/components/Form/form.css

@@ -504,6 +504,6 @@
   margin-bottom: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-form {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-form {
   --pf-v5-c-form__helper-text--m-success--Color: var(--pf-v5-global--success-color--100);
 }

package/components/FormControl/form-control.css

@@ -269,7 +269,7 @@
   pointer-events: none;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-form-control {
   --pf-v5-c-form-control--BorderTopColor: transparent;
   --pf-v5-c-form-control--BorderRightColor: transparent;
   --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
@@ -280,9 +280,9 @@
   --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   color: var(--pf-v5-global--Color--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control.pf-m-readonly {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-form-control.pf-m-readonly {
   border-bottom-color: var(--pf-v5-global--palette--black-700);
 }

package/components/HelperText/helper-text.css

@@ -72,6 +72,6 @@
   color: var(--pf-v5-c-helper-text__item-text--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-helper-text {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-helper-text {
   --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--100);
 }

package/components/Hint/hint.css

@@ -59,7 +59,7 @@
   margin-right: var(--pf-v5-c-hint__footer--child--MarginRight);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-hint {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-hint {
   --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
 }

package/components/InputGroup/input-group.css

@@ -67,7 +67,7 @@ label.pf-v5-c-input-group__text {
   cursor: pointer;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-input-group {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-input-group {
   --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
   --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
   --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
@@ -79,7 +79,7 @@ label.pf-v5-c-input-group__text {
   --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
   --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
   border-left: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
 }

package/components/Label/label.css

@@ -405,7 +405,7 @@ button.pf-v5-c-label__content:focus {
   margin-bottom: var(--pf-v5-c-label__actions--c-button--MarginBottom);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-label {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-label {
   --pf-v5-c-label--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-label--m-blue--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-label--m-green--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/components/LogViewer/log-viewer.css

@@ -183,7 +183,7 @@
   font-weight: var(--pf-v5-c-log-viewer__timestamp--FontWeight);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -193,6 +193,6 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
   color: var(--pf-v5-global--Color--100);
 }

package/components/Login/login.css

@@ -272,8 +272,8 @@
   padding-top: var(--pf-v5-c-login__footer--c-list--PaddingTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-login__header,
-:where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-login__header,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -283,10 +283,10 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-login {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-login {
   --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-login__header,
-:where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-login__header,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
   color: var(--pf-v5-global--Color--100);
 }

package/components/Masthead/masthead.css

@@ -638,7 +638,7 @@
   }
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -648,10 +648,10 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
   --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   color: var(--pf-v5-global--Color--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
   --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--palette--black-1000);
 }

package/components/Menu/menu.css

@@ -621,7 +621,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   border-top: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-menu {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-menu {
   --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);

package/components/MenuToggle/menu-toggle.css

@@ -397,7 +397,7 @@
   color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
   --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-menu-toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
@@ -415,6 +415,6 @@
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
   background: transparent;
 }

package/components/ModalBox/modal-box.css

@@ -182,6 +182,6 @@
   }
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
   --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Nav/nav.css

@@ -940,7 +940,7 @@
   left: 0;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-nav {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav {
   --pf-v5-c-nav__item--item__link--after--Top: -1px;
   --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
@@ -958,18 +958,18 @@
   --pf-v5-c-nav__link--active--before--BorderBottomWidth: 0;
   --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-nav__link::before {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav__link::before {
   bottom: 0;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-nav__link::after {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav__link::after {
   top: var(--pf-v5-c-nav__item--item__link--after--Top);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-nav__item + .pf-v5-c-nav__item {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav__item + .pf-v5-c-nav__item {
   --pf-v5-c-nav__link--after--Top: var(--pf-v5-c-nav__item--item__link--after--Top);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-nav__subnav {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav__subnav {
   --pf-v5-c-nav__item--item__link--after--Top: 0;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-nav__section {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-nav__section {
   --pf-v5-c-nav__item--item__link--after--Top: 0;
 }

package/components/NotificationBadge/notification-badge.css

@@ -98,7 +98,7 @@
   margin-left: var(--pf-v5-c-notification-badge__count--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
   --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
   --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);

package/components/NotificationDrawer/notification-drawer.css

@@ -262,7 +262,7 @@
   transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-notification-drawer {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-notification-drawer {
   --pf-v5-c-notification-drawer--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-notification-drawer__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-notification-drawer__list-item--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/components/OptionsMenu/options-menu.css

@@ -251,7 +251,7 @@
   color: var(--pf-v5-c-options-menu__group-title--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-options-menu {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-options-menu {
   --pf-v5-c-options-menu__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-options-menu__toggle--BorderTopColor: transparent;
   --pf-v5-c-options-menu__toggle--BorderRightColor: transparent;
@@ -262,6 +262,6 @@
   --pf-v5-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-options-menu__menu--Top: 100%;
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-options-menu__toggle.pf-m-plain {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-options-menu__toggle.pf-m-plain {
   background: transparent;
 }

package/components/Page/page.css

@@ -949,9 +949,9 @@
   flex: 1 0 auto;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -961,38 +961,38 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
   color: var(--pf-v5-global--Color--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
   background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
   border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   color: var(--pf-v5-global--Color--100);
 }