@patternfly/patternfly 4.196.0 → 4.196.1

package/components/SimpleList/themes/dark/simple-list.scss

@@ -1,4 +1,6 @@
-@mixin simple-list() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-simple-list() {
   .pf-c-simple-list {
     --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
     --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/Skeleton/skeleton.css

@@ -159,4 +159,10 @@
   100% {
     transform: translateX(100%);
   }
+}
+:where(.pf-theme-dark) .pf-c-skeleton {
+  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
+  --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
 }

package/components/Skeleton/skeleton.scss

@@ -206,3 +206,10 @@
     transform: translateX(100%);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/skeleton";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-skeleton;
+}

package/components/Skeleton/themes/dark/skeleton.scss

@@ -1,4 +1,6 @@
-@mixin skeleton() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-skeleton() {
   .pf-c-skeleton {
     --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
     --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);

package/components/Switch/switch.css

@@ -134,4 +134,11 @@
   grid-column: 2;
   color: var(--pf-c-switch__label--Color);
   vertical-align: top;
+}
+
+:where(.pf-theme-dark) .pf-c-switch {
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+  --pf-c-switch__toggle--before--BoxShadow: none;
 }

package/components/Switch/switch.scss

@@ -170,3 +170,10 @@
   color: var(--pf-c-switch__label--Color);
   vertical-align: top;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/switch";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-switch;
+}

package/components/Switch/themes/dark/switch.scss

@@ -1,4 +1,6 @@
-@mixin switch() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-switch() {
   .pf-c-switch {
     --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
     --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);

package/components/Table/table.css

@@ -1059,4 +1059,11 @@
 
 .pf-c-table .pf-m-width-100 {
   --pf-c-table--cell--Width: 100%;
+}
+
+:where(.pf-theme-dark) .pf-c-table {
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--150);
+}
+:where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:hover, :where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:focus {
+  --pf-c-button--m-plain--Color: var(--pf-global--palette--gold-100);
 }

package/components/Table/table.scss

@@ -1366,3 +1366,10 @@
   --pf-c-table--cell--Width: 100%;
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/table";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-table;
+}

package/components/Table/themes/dark/table.scss

@@ -1,4 +1,10 @@
-@mixin table() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-table() {
+  .pf-c-table {
+    --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--150);
+  }
+
   .pf-c-table__favorite {
     .pf-c-button {
       &:hover,

package/components/Tabs/tabs.css

@@ -825,4 +825,10 @@
     --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
     --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-tabs {
+  --pf-c-tabs__scroll-button--BackgroundColor: transparent;
+  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }

package/components/Tabs/tabs.scss

@@ -755,3 +755,10 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tabs";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tabs;
+}

package/components/Tabs/themes/dark/tabs.scss

@@ -1,4 +1,6 @@
-@mixin tabs() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tabs() {
   .pf-c-tabs {
     --pf-c-tabs__scroll-button--BackgroundColor: transparent;
     --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);

package/components/Tile/themes/dark/tile.scss

@@ -1,4 +1,6 @@
-@mixin tile() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tile() {
   .pf-c-tile {
     --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
     --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);

package/components/Tile/tile.css

@@ -134,4 +134,11 @@
   margin-right: var(--pf-c-tile__icon--MarginRight);
   font-size: var(--pf-c-tile__icon--FontSize);
   color: var(--pf-c-tile__icon--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-tile {
+  --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
 }

package/components/Tile/tile.scss

@@ -172,3 +172,10 @@
   font-size: var(--pf-c-tile__icon--FontSize);
   color: var(--pf-c-tile__icon--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tile";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tile;
+}

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -1,4 +1,6 @@
-@mixin toggle-group() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-toggle-group() {
   .pf-c-toggle-group {
     --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
     --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);

package/components/ToggleGroup/toggle-group.css

@@ -100,4 +100,12 @@
 .pf-c-toggle-group__icon + .pf-c-toggle-group__text,
 .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
   margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-toggle-group {
+  --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -134,3 +134,10 @@
 .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
   margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/toggle-group";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-toggle-group;
+}

package/components/Tooltip/themes/dark/tooltip.scss

@@ -1,4 +1,6 @@
-@mixin tooltip() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tooltip() {
   .pf-c-tooltip {
     --pf-c-tooltip--BoxShadow: none;
     --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/Tooltip/tooltip.css

@@ -80,4 +80,17 @@
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-c-tooltip__content--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-tooltip {
+  --pf-c-tooltip--BoxShadow: none;
+  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-tooltip,
+:where(.pf-theme-dark) .pf-c-tooltip__arrow {
+  border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
+}
+:where(.pf-theme-dark) .pf-c-tooltip__arrow {
+  --pf-c-tooltip__arrow--Width: 0.9375rem;
+  --pf-c-tooltip__arrow--Height: 0.9375rem;
 }

package/components/Tooltip/tooltip.scss

@@ -124,3 +124,10 @@
   pointer-events: none;
   background-color: var(--pf-c-tooltip__content--BackgroundColor);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tooltip";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tooltip;
+}

package/components/TreeView/themes/dark/tree-view.scss

@@ -1,4 +1,6 @@
-@mixin tree-view() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tree-view() {
   .pf-c-tree-view {
     --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/TreeView/tree-view.css

@@ -425,4 +425,9 @@
   --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
   --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
   --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
+}
+
+:where(.pf-theme-dark) .pf-c-tree-view {
+  --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/TreeView/tree-view.scss

@@ -486,3 +486,10 @@ $pf-c-tree-view--MaxNesting: 10;
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tree-view";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tree-view;
+}

package/components/Wizard/themes/dark/wizard.scss

@@ -1,4 +1,6 @@
-@mixin wizard() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-wizard() {
   .pf-c-wizard {
     --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
     --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
@@ -7,6 +9,6 @@
   }
 
   .pf-c-wizard__header {
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Wizard/wizard.css

@@ -509,4 +509,38 @@
 
 .pf-c-wizard__footer-cancel {
   margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-wizard__header {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-wizard {
+  --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
+  --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
+  --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-wizard__header {
+  color: var(--pf-global--Color--100);
 }

package/components/Wizard/wizard.scss

@@ -557,3 +557,10 @@
 .pf-c-wizard__footer-cancel {
   margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/wizard";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-wizard;
+}