@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/sass-utilities/mixins.scss

@@ -295,6 +295,24 @@
   }
 }
 
+// Build variable stack
+@mixin pf-v5-output-root-variables($css-var, $breakpoint-map: $pf-v5-global--breakpoint-map) {
+  $list: ();
+
+  @each $breakpoint, $breakpoint-value in $breakpoint-map {
+    // Build variable list
+    // stylelint-disable scss/at-if-no-null
+    @if $breakpoint-value {
+      $list: append($list, $css-var + "-on-" + $breakpoint);
+    }
+    // stylelint-enable
+  }
+
+  @each $item in $list {
+    #{$item}: inherit;
+  }
+}
+
 // Dark theme style block
 @mixin pf-v5-theme-dark($theme-dark-class: $pf-v5--theme-dark--class, $theme-dark-target: $pf-v5--theme-dark--target) {
   #{$theme-dark-target}:where(#{$theme-dark-class}) {

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-block-end: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
-      }
-    }
-  }
-}

package/components/CalendarMonth/themes/dark/calendar-month.scss

@@ -1,37 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-calendar-month() {
-  .#{$calendar-month} {
-    // calendar month background
-    --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-
-    // dates
-    --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-    --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--#{$pf-global}--palette--black-900);
-    --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-400);
-    --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$calendar-month}__date--focus--after--BorderColor: transparent;
-  }
-
-  .#{$calendar-month}__date {
-    &:hover,
-    &.pf-m-hover {
-      --#{$calendar-month}__date--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
-      --#{$calendar-month}__date--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-    }
-
-    &:focus,
-    &.pf-m-focus {
-      --#{$calendar-month}__date--after--BorderColor: var(--#{$pf-global}--active-color--100);
-      --#{$calendar-month}__date--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-      --#{$calendar-month}__date--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-      --#{$calendar-month}__date--Color: var(--#{$pf-global}--primary-color--400);
-    }
-  }
-}

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-inline-start: 0;
-      // stylelint-disable-next-line
-      border-inline-start: 1px solid var(--#{$pf-global}--palette--black-700) !important;
-    }
-  }
-
-  .#{$clipboard-copy}__expandable-content {
-    border: 0;
-  }
-}

package/components/CodeEditor/themes/dark/code-editor.scss

@@ -1,14 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-code-editor() {
-  .#{$code-editor} {
-    --#{$code-editor}--m-read-only__main--Color: var(--#{$pf-global}--disabled-color--300);
-    --#{$code-editor}--m-read-only__main--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-  }
-
-  .#{$code-editor}__controls {
-    > * + * {
-      border-inline-start: 1px solid var(--#{$pf-global}--palette--black-700);
-    }
-  }
-}

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/DatePicker/themes/dark/date-picker.scss

@@ -1,8 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-date-picker() {
-  .#{$date-picker} {
-    --#{$date-picker}__calendar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$date-picker}__calendar--Top: 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/DualListSelector/themes/dark/dual-list-selector.scss

@@ -1,9 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-dual-list-selector() {
-  .#{$dual-list-selector} {
-    --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-  }
-}

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-inline-start: 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);
-  }
-}