@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/utilities/Spacing/spacing.scss

@@ -19,26 +19,22 @@
 
             // If margin x property, set left and right margins
             @if $property == "mx" {
-              margin-right: #{$spacer-value};
-              margin-left: #{$spacer-value};
+              margin-inline: #{$spacer-value};
             }
 
             // If padding x property, set left and right padding
             @else if $property == "my" {
-              margin-top: #{$spacer-value};
-              margin-bottom: #{$spacer-value};
+              margin-block: #{$spacer-value};
             }
 
             // If margin y property, set top and bottom margins
             @else if $property == "px" {
-              padding-right: #{$spacer-value};
-              padding-left: #{$spacer-value};
+              padding-inline: #{$spacer-value};
             }
 
             // If padding y property, set top and bottom padding
             @else if $property == "py" {
-              padding-top: #{$spacer-value};
-              padding-bottom: #{$spacer-value};
+              padding-block: #{$spacer-value};
             }
 
             @else {

package/base/themes/dark/_variables.scss

@@ -1,102 +0,0 @@
-@import "../../../sass-utilities/themes/dark/all";
-
-@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};
-  --#{$pf-global}--palette--black-200: #{$pf-v5-color-black-200};
-  --#{$pf-global}--palette--black-300: #{$pf-v5-color-black-300};
-  --#{$pf-global}--palette--black-400: #{$pf-v5-color-black-400};
-  --#{$pf-global}--palette--black-500: #{$pf-v5-color-black-500};
-  --#{$pf-global}--palette--black-600: #{$pf-v5-color-black-600};
-  --#{$pf-global}--palette--black-700: #{$pf-v5-color-black-700};
-  --#{$pf-global}--palette--black-800: #{$pf-v5-color-black-800};
-  --#{$pf-global}--palette--black-900: #{$pf-v5-color-black-900};
-  --#{$pf-global}--palette--red-9999: #{$pf-v5-color-red-9999};
-  --#{$pf-global}--palette--red-8888: #{$pf-v5-color-red-8888};
-  --#{$pf-global}--palette--blue-300: #{$pf-v5-color-blue-300};
-
-  // background colors
-  --#{$pf-global}--BackgroundColor--100: #{$pf-v5-global--BackgroundColor--100};
-  --#{$pf-global}--BackgroundColor--150: #{$pf-v5-global--BackgroundColor--150};
-  --#{$pf-global}--BackgroundColor--200: #{$pf-v5-global--BackgroundColor--200};
-  --#{$pf-global}--BackgroundColor--300: #{$pf-v5-global--BackgroundColor--300};
-  --#{$pf-global}--BackgroundColor--400: #{$pf-v5-global--BackgroundColor--400};
-  --#{$pf-global}--BorderColor--100: #{$pf-v5-global--BorderColor--100};
-  --#{$pf-global}--BorderColor--200: #{$pf-v5-global--BorderColor--200};
-  --#{$pf-global}--BorderColor--300: #{$pf-v5-global--BorderColor--300};
-  --#{$pf-global}--BorderColor--400: #{$pf-v5-global--BorderColor--400};
-
-  // text colors
-  --#{$pf-global}--Color--100: #{$pf-v5-global--Color--100};
-  --#{$pf-global}--Color--200: #{$pf-v5-global--Color--200};
-  --#{$pf-global}--active-color--100: #{$pf-v5-global--active-color--100};
-  --#{$pf-global}--primary-color--100: #{$pf-v5-global--primary-color--100};
-  --#{$pf-global}--primary-color--300: #{$pf-v5-global--primary-color--300};
-  --#{$pf-global}--primary-color--400: #{$pf-v5-global--primary-color--400};
-  --#{$pf-global}--custom-color--200: #{$pf-v5-global--custom-color--200};
-  --#{$pf-global}--success-color--100: #{$pf-v5-global--success-color--100};
-  --#{$pf-global}--warning-color--100: #{$pf-v5-global--warning-color--100};
-  --#{$pf-global}--warning-color--200: #{$pf-v5-global--warning-color--200};
-  --#{$pf-global}--danger-color--100: #{$pf-v5-global--danger-color--100};
-  --#{$pf-global}--danger-color--200: #{$pf-v5-global--danger-color--200};
-  --#{$pf-global}--link--Color: #{$pf-v5-global--link--Color};
-  --#{$pf-global}--link--Color--hover: #{$pf-v5-global--link--Color--hover};
-  --#{$pf-global}--link--Color--visited: #{$pf-v5-global--link--Color--visited};
-  --#{$pf-global}--disabled-color--100: #{$pf-v5-global--disabled-color--100};
-  --#{$pf-global}--disabled-color--200: #{$pf-v5-global--disabled-color--200};
-  --#{$pf-global}--disabled-color--300: #{$pf-v5-global--disabled-color--300};
-
-  // icons
-  --#{$pf-global}--icon--Color--light: #{$pf-v5-global--icon--Color--light};
-  --#{$pf-global}--icon--Color--dark: #{$pf-v5-global--icon--Color--dark};
-
-  // theme color resets
-  --#{$pf-global}--Color--dark-100: #{$pf-v5-global--Color--dark-100};
-  --#{$pf-global}--Color--dark-200: #{$pf-v5-global--Color--dark-200};
-  --#{$pf-global}--Color--light-100: #{$pf-v5-global--Color--light-100};
-  --#{$pf-global}--Color--light-200: #{$pf-v5-global--Color--light-200};
-  --#{$pf-global}--Color--light-300: #{$pf-v5-global--Color--light-300};
-  --#{$pf-global}--BorderColor--dark-100: #{$pf-v5-global--BorderColor--dark-100};
-  --#{$pf-global}--BorderColor--light-100: #{$pf-v5-global--BorderColor--light-100};
-  --#{$pf-global}--primary-color--light-100: #{$pf-v5-global--primary-color--light-100};
-  --#{$pf-global}--primary-color--dark-100: #{$pf-v5-global--primary-color--dark-100};
-  --#{$pf-global}--link--Color--light: #{$pf-v5-global--link--Color--light};
-  --#{$pf-global}--link--Color--light--hover: #{$pf-v5-global--link--Color--light--hover};
-  --#{$pf-global}--link--Color--dark: #{$pf-v5-global--link--Color--dark};
-  --#{$pf-global}--link--Color--dark--hover: #{$pf-v5-global--link--Color--dark--hover};
-  --#{$pf-global}--icon--Color--light--light: #{$pf-v5-global--icon--Color--light};
-  --#{$pf-global}--icon--Color--dark--light: #{$pf-v5-global--icon--Color--dark};
-  --#{$pf-global}--icon--Color--light--dark: #{$pf-v5-global--icon--Color--light};
-  --#{$pf-global}--icon--Color--dark--dark: #{$pf-v5-global--icon--Color--dark};
-  --#{$pf-global}--BackgroundColor--light-100: #{$pf-v5-global--BackgroundColor--light-100};
-  --#{$pf-global}--BackgroundColor--light-200: #{$pf-v5-global--BackgroundColor--light-200};
-  --#{$pf-global}--BackgroundColor--light-300: #{$pf-v5-global--BackgroundColor--light-300};
-  --#{$pf-global}--BackgroundColor--dark-100: #{$pf-v5-global--BackgroundColor--dark-100};
-  --#{$pf-global}--BackgroundColor--dark-200: #{$pf-v5-global--BackgroundColor--dark-200};
-  --#{$pf-global}--BackgroundColor--dark-300: #{$pf-v5-global--BackgroundColor--dark-300};
-  --#{$pf-global}--BackgroundColor--dark-400: #{$pf-v5-global--BackgroundColor--dark-400};
-
-  // Shadows
-  --#{$pf-global}--BoxShadow--sm: #{$pf-v5-global--BoxShadow--sm};
-  --#{$pf-global}--BoxShadow--sm-top: #{$pf-v5-global--BoxShadow--sm-top};
-  --#{$pf-global}--BoxShadow--sm-right: #{$pf-v5-global--BoxShadow--sm-right};
-  --#{$pf-global}--BoxShadow--sm-bottom: #{$pf-v5-global--BoxShadow--sm-bottom};
-  --#{$pf-global}--BoxShadow--sm-left: #{$pf-v5-global--BoxShadow--sm-left};
-  --#{$pf-global}--BoxShadow--md: #{$pf-v5-global--BoxShadow--md};
-  --#{$pf-global}--BoxShadow--md-top: #{$pf-v5-global--BoxShadow--md-top};
-  --#{$pf-global}--BoxShadow--md-right: #{$pf-v5-global--BoxShadow--md-right};
-  --#{$pf-global}--BoxShadow--md-bottom: #{$pf-v5-global--BoxShadow--md-bottom};
-  --#{$pf-global}--BoxShadow--md-left: #{$pf-v5-global--BoxShadow--md-left};
-  --#{$pf-global}--BoxShadow--lg: #{$pf-v5-global--BoxShadow--lg};
-  --#{$pf-global}--BoxShadow--lg-top: #{$pf-v5-global--BoxShadow--lg-top};
-  --#{$pf-global}--BoxShadow--lg-right: #{$pf-v5-global--BoxShadow--lg-right};
-  --#{$pf-global}--BoxShadow--lg-bottom: #{$pf-v5-global--BoxShadow--lg-bottom};
-  --#{$pf-global}--BoxShadow--lg-left: #{$pf-v5-global--BoxShadow--lg-left};
-  --#{$pf-global}--BoxShadow--xl: #{$pf-v5-global--BoxShadow--xl};
-  --#{$pf-global}--BoxShadow--xl-top: #{$pf-v5-global--BoxShadow--xl-top};
-  --#{$pf-global}--BoxShadow--xl-right: #{$pf-v5-global--BoxShadow--xl-right};
-  --#{$pf-global}--BoxShadow--xl-bottom: #{$pf-v5-global--BoxShadow--xl-bottom};
-  --#{$pf-global}--BoxShadow--xl-left: #{$pf-v5-global--BoxShadow--xl-left};
-  --#{$pf-global}--BoxShadow--inset: #{$pf-v5-global--BoxShadow--inset};
-}

package/components/AboutModalBox/themes/dark/about-modal-box.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-about-modal-box() {
-  .#{$about-modal-box} {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/Accordion/themes/dark/accordion.scss

@@ -1,9 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-accordion() {
-  .#{$accordion} {
-    --#{$accordion}__toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$accordion}__toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$accordion}__toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Alert/themes/dark/alert.scss

@@ -1,17 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-alert() {
-  .#{$alert} {
-    --#{$alert}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-custom__title--Color: var(--#{$pf-global}--custom-color--200);
-    --#{$alert}--m-success__title--Color: var(--#{$pf-global}--success-color--100);
-    --#{$alert}--m-danger__title--Color: var(--#{$pf-global}--danger-color--100);
-    --#{$alert}--m-warning__title--Color: var(--#{$pf-global}--warning-color--100);
-    --#{$alert}--m-info__title--Color: var(--#{$pf-global}--info-color--100);
-    --#{$alert}--m-inline--m-custom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-success--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-danger--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-warning--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-info--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Badge/themes/dark/badge.scss

@@ -1,9 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-badge() {
-  .#{$badge} {
-    --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-  }
-}

package/components/Banner/themes/dark/banner.scss

@@ -1,14 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-banner() {
-  .#{$banner} {
-    &.pf-m-blue,
-    &.pf-m-red,
-    &.pf-m-green,
-    &.pf-m-gold {
-      --#{$banner}--Color: var(--#{$pf-global}--palette--black-900);
-    }
-
-    @include pf-v5-theme-dark--t-dark(false);
-  }
-}

package/components/Button/themes/dark/button.scss

@@ -1,51 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-button() {
-  .#{$button} {
-    --#{$button}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
-    --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-    --#{$button}--m-primary--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$button}--m-tertiary--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$button}--m-tertiary--Color: var(--#{$pf-global}--palette--black-100);
-    --#{$button}--m-tertiary--hover--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$button}--m-tertiary--hover--Color: var(--#{$pf-global}--palette--black-100);
-    --#{$button}--m-tertiary--focus--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$button}--m-tertiary--focus--Color: var(--#{$pf-global}--palette--black-100);
-    --#{$button}--m-tertiary--active--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$button}--m-tertiary--active--Color: var(--#{$pf-global}--palette--black-100);
-    --#{$button}--m-warning--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-warning--hover--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-warning--focus--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-warning--active--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-warning--hover--BackgroundColor: var(--#{$pf-global}--warning-color--200);
-    --#{$button}--m-warning--focus--BackgroundColor: var(--#{$pf-global}--warning-color--200);
-    --#{$button}--m-warning--active--BackgroundColor: var(--#{$pf-global}--warning-color--200);
-    --#{$button}--m-danger--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-danger--hover--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-danger--focus--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-danger--active--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$button}--m-link--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-    --#{$button}--m-control--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$button}--m-control--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$button}--m-control--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$button}--m-control--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$button}--m-control--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$button}--m-control--after--BorderTopColor: transparent;
-    --#{$button}--m-control--after--BorderRightColor: transparent;
-    --#{$button}--m-control--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
-    --#{$button}--m-control--after--BorderLeftColor: transparent;
-    --#{$button}--m-control--hover--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
-    --#{$button}--m-control--active--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
-    --#{$button}--m-control--focus--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
-    --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
-    --#{$button}--m-control--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-    --#{$button}--m-primary__c-badge--BorderColor: var(--#{$pf-global}--Color--100);
-
-    &.pf-m-control:disabled {
-      &::after {
-        border: 0;
-        border-bottom: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
-      }
-    }
-  }
-}

package/components/Card/themes/dark/card.scss

@@ -1,20 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-card() {
-  .#{$card},
-  .#{$card}.pf-m-non-selectable-raised {
-    --#{$card}--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-
-    // Selectable
-    --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--#{$pf-global}--palette--black-700);
-    --#{$card}--m-selectable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
-    --#{$card}--m-selectable--m-clickable--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
-    --#{$card}--m-selectable--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-600);
-
-    // Hoverable/selectable raised - deprecated
-    --#{$card}--m-hoverable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-    --#{$card}--m-selectable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-    --#{$card}--m-selectable-raised--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-    --#{$card}--m-selectable-raised--active--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-  }
-}

package/components/ClipboardCopy/themes/dark/clipboard-copy.scss

@@ -1,19 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-clipboard-copy() {
-  .#{$clipboard-copy} {
-    --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-  }
-
-  .#{$clipboard-copy}__group {
-    > * + * {
-      margin-left: 0;
-      // stylelint-disable-next-line
-      border-left: 1px solid var(--#{$pf-global}--palette--black-700) !important;
-    }
-  }
-
-  .#{$clipboard-copy}__expandable-content {
-    border: 0;
-  }
-}

package/components/DataList/themes/dark/data-list.scss

@@ -1,10 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-data-list() {
-  .#{$data-list} {
-    --#{$data-list}--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$data-list}--sm--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$data-list}__item--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$data-list}__item--sm--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-  }
-}

package/components/DragDrop/themes/dark/drag-drop.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-drag-drop() {
-  .#{$droppable} {
-    --#{$droppable}--m-dragging--before--Opacity: .2;
-  }
-}

package/components/Drawer/themes/dark/drawer.scss

@@ -1,13 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-drawer() {
-  .#{$drawer} {
-    --#{$drawer}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$drawer}__splitter--BackgroundColor: transparent;
-
-    &.pf-m-inline,
-    &.pf-m-static {
-      --#{$drawer}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-    }
-  }
-}

package/components/Form/themes/dark/form.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-form() {
-  .#{$form}{
-    --#{$form}__helper-text--m-success--Color: var(--#{$pf-global}--success-color--100);
-  }
-}

package/components/FormControl/themes/dark/form-control.scss

@@ -1,24 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-form-control() {
-  .#{$form-control} {
-    --#{$form-control}--before--BorderTopColor: transparent;
-    --#{$form-control}--before--BorderRightColor: transparent;
-    --#{$form-control}--before--BorderLeftColor: transparent;
-    --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
-    --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
-    --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-    --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-    --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
-    --#{$form-control}--m-readonly--focus--after--BorderBottomColor:var(--#{$pf-global}--BorderColor--400);
-    --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--300);
-
-    color: var(--#{$pf-global}--Color--100);
-
-    // chrome's calendar icon for type="date"
-    &::-webkit-calendar-picker-indicator {
-      filter: #{"invert(1)"};
-    }
-  }
-}

package/components/HelperText/themes/dark/helper-text.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-helper-text() {
-  .#{$helper-text} {
-    --#{$helper-text}__item-text--m-success--Color: var(--#{$pf-global}--success-color--100);
-  }
-}

package/components/Hint/themes/dark/hint.scss

@@ -1,8 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-hint() {
-  .#{$hint} {
-    --#{$hint}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$hint}--BorderColor: var(--#{$pf-global}--BorderColor--300);
-  }
-}

package/components/InputGroup/themes/dark/input-group.scss

@@ -1,22 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-input-group() {
-  .#{$input-group} {
-    --#{$input-group}__item--BorderLeftWidth: var(--#{$input-group}__item--BorderWidth--base);
-    --#{$input-group}__item--BorderLeftColor: var(--#{$pf-global}--palette--black-700);
-    --#{$input-group}__item--m-box--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$input-group}__item--m-box--BorderTopColor: transparent;
-    --#{$input-group}__item--m-box--BorderRightColor: transparent;
-    --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
-    --#{$input-group}__item--m-box--BorderLeftColor: transparent;
-    --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-    --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
-    --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300);
-
-    > * + * {
-      --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor);
-
-      border-left: var(--#{$input-group}__item--BorderLeftWidth) solid var(--#{$input-group}__item--BorderLeftColor);
-    }
-  }
-}

package/components/Label/themes/dark/label.scss

@@ -1,53 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-label() {
-  .#{$label} {
-    --#{$label}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-blue--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-green--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-orange--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$label}__content--before--BorderWidth: 0;
-    --#{$label}__content--before--BorderColor: transparent;
-    --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-    --#{$label}__content--link--focus--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-    --#{$label}--m-blue__content--Color: var(--#{$pf-global}--primary-color--100);
-    --#{$label}--m-outline--m-blue__content--before--BorderColor: var(--#{$pf-global}--active-color--200);
-    --#{$label}--m-outline--m-blue__content--link--hover--before--BorderColor: var(--#{$pf-global}--active-color--200);
-    --#{$label}--m-outline--m-blue__content--link--focus--before--BorderColor: var(--#{$pf-global}--active-color--200);
-    --#{$label}--m-green__content--Color: var(--#{$pf-global}--success-color--100);
-    --#{$label}--m-outline--m-green__content--before--BorderColor: var(--#{$pf-global}--palette--green-100);
-    --#{$label}--m-outline--m-green__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--green-100);
-    --#{$label}--m-outline--m-green__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--green-100);
-    --#{$label}--m-orange__content--Color: var(--#{$pf-global}--palette--orange-300);
-    --#{$label}--m-outline--m-orange__content--Color: var(--#{$pf-global}--palette--orange-300);
-    --#{$label}--m-outline--m-orange__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-    --#{$label}--m-outline--m-orange__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-    --#{$label}--m-outline--m-orange__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-    --#{$label}--m-red__content--Color: var(--#{$pf-global}--danger-color--100);
-    --#{$label}--m-outline--m-red__content--before--BorderColor: var(--#{$pf-global}--danger-color--100);
-    --#{$label}--m-outline--m-red__content--link--hover--before--BorderColor: var(--#{$pf-global}--danger-color--100);
-    --#{$label}--m-outline--m-red__content--link--focus--before--BorderColor: var(--#{$pf-global}--danger-color--100);
-    --#{$label}--m-purple__content--Color: var(--#{$pf-global}--palette--purple-300);
-    --#{$label}--m-purple__icon--Color: var(--#{$pf-global}--palette--purple-300);
-    --#{$label}--m-purple__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--purple-300);
-    --#{$label}--m-purple__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--purple-300);
-    --#{$label}--m-outline--m-purple__content--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
-    --#{$label}--m-outline--m-purple__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
-    --#{$label}--m-outline--m-purple__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
-    --#{$label}--m-outline--m-purple__content--Color: var(--#{$pf-global}--palette--purple-300);
-    --#{$label}--m-cyan__content--Color: var(--#{$pf-global}--custom-color--200);
-    --#{$label}--m-outline--m-cyan__content--Color: var(--#{$pf-global}--custom-color--200);
-    --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
-    --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
-    --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
-    --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
-    --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
-    --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-    --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-    --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
-  }
-}

package/components/Login/themes/dark/login.scss

@@ -1,12 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-login() {
-  .#{$login} {
-    --#{$login}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-
-  .#{$login}__header,
-  .#{$login}__footer {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/Masthead/themes/dark/masthead.scss

@@ -1,14 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-masthead() {
-  .#{$masthead} {
-    --#{$masthead}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-    --#{$masthead}--item-border-color--base: var(--#{$pf-global}--BorderColor--100);
-
-    .#{$toolbar} {
-      --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-    }
-
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/ModalBox/themes/dark/modal-box.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-modal-box() {
-  .#{$modal-box} {
-    --#{$modal-box}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -1,10 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-notification-badge() {
-  .#{$notification-badge} {
-    --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-    --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900);
-  }
-}

package/components/NotificationDrawer/themes/dark/notification-drawer.scss

@@ -1,14 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-notification-drawer() {
-  .#{$notification-drawer} {
-    --#{$notification-drawer}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$notification-drawer}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$notification-drawer}__list-item--BoxShadow: none;
-    --#{$notification-drawer}__list-item--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-    --#{$notification-drawer}__list-item--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-    --#{$notification-drawer}__list-item--list-item--m-read--BoxShadow: none;
-    --#{$notification-drawer}__group-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Page/themes/dark/page.scss

@@ -1,69 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-page() {
-  &:root {
-    --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-    --#{$page}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-  }
-
-  .#{$page}__header-tools-item {
-    &.pf-m-selected {
-      .#{$button} {
-        color: var(--#{$pf-global}--Color--100);
-
-        // stylelint-disable
-        .#{$notification-badge} {
-          &:hover {
-            &::before {
-              background-color: var(--#{$page}__header-tools--c-button--m-selected--before--BackgroundColor);
-            }
-          }
-        }
-        // stylelint-enable
-      }
-    }
-  }
-
-  .#{$page}__sidebar {
-    border-right: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--BorderColor--100);
-  }
-
-  .#{$page}__main-nav {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-breadcrumb {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-group {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-section--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-section {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__sidebar-body.pf-m-menu .#{$context-selector},
-  .#{$page}__main-section[class*="pf-m-dark-"],
-  .#{$page}__header {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/Pagination/themes/dark/pagination.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-pagination() {
-  .#{$pagination} {
-    --#{$pagination}--m-sticky--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Panel/themes/dark/panel.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-panel() {
-  .#{$panel} {
-    --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Popover/themes/dark/popover.scss

@@ -1,11 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-popover() {
-  .#{$popover} {
-    --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200);
-    --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100);
-    --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100);
-  }
-}

package/components/Progress/themes/dark/progress.scss

@@ -1,9 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-progress() {
-  .#{$progress} {
-    --#{$progress}--m-inside__measure--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$progress}--m-success--m-inside__measure--Color: var(--#{$pf-global}--palette--black-900);
-    --#{$progress}--m-warning--m-inside__measure--Color: var(--#{$pf-global}--palette--black-900);
-  }
-}