@patternfly/patternfly 4.194.4 → 4.196.1

package/base/_globals.scss

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

package/base/_variables.scss

@@ -59,6 +59,7 @@
   --pf-global--palette--light-green-500: #{$pf-color-light-green-500};
   --pf-global--palette--light-green-600: #{$pf-color-light-green-600};
   --pf-global--palette--light-green-700: #{$pf-color-light-green-700};
+  --pf-global--palette--orange-50: #{$pf-color-orange-50};
   --pf-global--palette--orange-100: #{$pf-color-orange-100};
   --pf-global--palette--orange-200: #{$pf-color-orange-200};
   --pf-global--palette--orange-300: #{$pf-color-orange-300};
@@ -84,6 +85,7 @@
 
   // Background color
   --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
+  --pf-global--BackgroundColor--150: #{$pf-global--BackgroundColor--150};
   --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
   --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
   --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
@@ -306,3 +308,10 @@
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "./themes/dark/variables";
+
+@include pf-theme-dark($pf-theme-dark-prefix: ":root") {
+  @include _variables;
+}

package/base/patternfly-globals.css

@@ -123,4 +123,8 @@ a {
 
 .pf-m-overpass-font a {
   font-weight: var(--pf-global--FontWeight--semi-bold);
+}
+
+:root:where(.pf-theme-dark) {
+  color-scheme: dark;
 }

package/base/patternfly-variables.css

@@ -57,6 +57,7 @@
   --pf-global--palette--light-green-500: #6ca100;
   --pf-global--palette--light-green-600: #486b00;
   --pf-global--palette--light-green-700: #253600;
+  --pf-global--palette--orange-50: #fff6ec;
   --pf-global--palette--orange-100: #f4b678;
   --pf-global--palette--orange-200: #ef9234;
   --pf-global--palette--orange-300: #ec7a08;
@@ -80,6 +81,7 @@
   --pf-global--palette--red-500: #2c0000;
   --pf-global--palette--white: #fff;
   --pf-global--BackgroundColor--100: #fff;
+  --pf-global--BackgroundColor--150: #fafafa;
   --pf-global--BackgroundColor--200: #f0f0f0;
   --pf-global--BackgroundColor--light-100: #fff;
   --pf-global--BackgroundColor--light-200: #fafafa;
@@ -253,4 +255,87 @@
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
+}
+
+:root:where(.pf-theme-dark) {
+  --pf-global--palette--black-50: #e0e0e0;
+  --pf-global--palette--black-100: #c6c7c8;
+  --pf-global--palette--black-200: #aaabac;
+  --pf-global--palette--black-300: #868789;
+  --pf-global--palette--black-400: #57585a;
+  --pf-global--palette--black-500: #444548;
+  --pf-global--palette--black-600: #36373a;
+  --pf-global--palette--black-700: #26292d;
+  --pf-global--palette--black-800: #1b1d21;
+  --pf-global--palette--black-900: #0f1214;
+  --pf-global--palette--red-9999: #fe5142;
+  --pf-global--palette--red-8888: #fe6a5d;
+  --pf-global--palette--blue-300: #1fa7f8;
+  --pf-global--BackgroundColor--100: #1b1d21;
+  --pf-global--BackgroundColor--150: #212427;
+  --pf-global--BackgroundColor--200: #0f1214;
+  --pf-global--BackgroundColor--300: #26292d;
+  --pf-global--BackgroundColor--400: #36373a;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--BorderColor--200: #444548;
+  --pf-global--BorderColor--300: #57585a;
+  --pf-global--BorderColor--400: #aaabac;
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--active-color--100: #1fa7f8;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--primary-color--300: #06c;
+  --pf-global--success-color--100: #5ba352;
+  --pf-global--warning-color--100: #f0ab00;
+  --pf-global--warning-color--200: #f4c145;
+  --pf-global--danger-color--100: #fe5142;
+  --pf-global--danger-color--200: #fe6a5d;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--disabled-color--100: #57585a;
+  --pf-global--disabled-color--200: #444548;
+  --pf-global--disabled-color--300: #aaabac;
+  --pf-global--icon--Color--light: #aaabac;
+  --pf-global--icon--Color--dark: #aaabac;
+  --pf-global--Color--dark-100: #fff;
+  --pf-global--Color--dark-200: #aaabac;
+  --pf-global--Color--light-100: #fff;
+  --pf-global--Color--light-200: #aaabac;
+  --pf-global--Color--light-300: #3c3f42;
+  --pf-global--BorderColor--dark-100: #444548;
+  --pf-global--BorderColor--light-100: #444548;
+  --pf-global--primary-color--light-100: #1fa7f8;
+  --pf-global--primary-color--dark-100: #1fa7f8;
+  --pf-global--link--Color--light: #1fa7f8;
+  --pf-global--link--Color--light--hover: #73bcf7;
+  --pf-global--link--Color--dark: #1fa7f8;
+  --pf-global--link--Color--dark--hover: #73bcf7;
+  --pf-global--BackgroundColor--light-100: #1b1d21;
+  --pf-global--BackgroundColor--light-200: #0f1214;
+  --pf-global--BackgroundColor--light-300: #26292d;
+  --pf-global--BackgroundColor--dark-100: #1b1d21;
+  --pf-global--BackgroundColor--dark-200: #0f1214;
+  --pf-global--BackgroundColor--dark-300: #26292d;
+  --pf-global--BackgroundColor--dark-400: #36373a;
+  --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
+  --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
+  --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
 }

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

@@ -260,4 +260,32 @@
     background-size: var(--pf-c-about-modal-box__hero--sm--BackgroundSize);
     grid-area: hero;
   }
+}
+
+:where(.pf-theme-dark) .pf-c-about-modal-box {
+  --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-about-modal-box .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-about-modal-box {
+  color: var(--pf-global--Color--100);
 }

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

@@ -254,3 +254,10 @@
     grid-area: hero;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/about-modal-box";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-about-modal-box;
+}

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

@@ -1,9 +1,7 @@
-@mixin about-modal-box() {
-  .pf-c-about-modal-box {
-    --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
-    --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
-    --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+@import "../../../../sass-utilities/themes/dark/all";
 
-    @include pf-t-dark();
+@mixin pf-theme-dark-about-modal-box() {
+  .pf-c-about-modal-box {
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Accordion/accordion.css

@@ -215,4 +215,10 @@
 }
 .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
   --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
+}
+
+:where(.pf-theme-dark) .pf-c-accordion {
+  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/Accordion/accordion.scss

@@ -256,3 +256,10 @@
     --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/accordion";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-accordion;
+}

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

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

package/components/Alert/alert.css

@@ -201,4 +201,18 @@
 
 .pf-m-overpass-font .pf-c-alert__title {
   --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
+}
+
+:where(.pf-theme-dark) .pf-c-alert {
+  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert__title--Color: var(--pf-global--default-color--200);
+  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
+  --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
+  --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
+  --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
 }

package/components/Alert/alert.scss

@@ -246,3 +246,10 @@
     --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/alert";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-alert;
+}

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

@@ -1,4 +1,6 @@
-@mixin alert() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-alert() {
   .pf-c-alert {
     --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
     --pf-c-alert__title--Color: var(--pf-global--default-color--200);

package/components/AppLauncher/app-launcher.css

@@ -209,4 +209,16 @@
   font-size: var(--pf-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
   color: var(--pf-c-app-launcher__group-title--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-app-launcher {
+  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-app-launcher__menu--Top: 100%;
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }

package/components/AppLauncher/app-launcher.scss

@@ -274,3 +274,10 @@
   font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
   color: var(--pf-c-app-launcher__group-title--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/app-launcher";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-app-launcher;
+}

package/components/AppLauncher/themes/dark/app-launcher.scss

@@ -1,4 +1,6 @@
-@mixin app-launcher() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-app-launcher() {
   .pf-c-app-launcher {
     --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-app-launcher__menu--Top: 100%;

package/components/Badge/badge.css

@@ -28,4 +28,9 @@
 .pf-c-badge.pf-m-unread {
   --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-badge {
+  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/components/Badge/badge.scss

@@ -35,3 +35,10 @@
     --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/badge";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-badge;
+}

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

@@ -1,4 +1,6 @@
-@mixin badge() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-badge() {
   .pf-c-badge {
     --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);

package/components/Banner/banner.css

@@ -124,4 +124,35 @@
 .pf-c-banner .pf-c-button.pf-m-inline:disabled, .pf-c-banner .pf-c-button.pf-m-inline.pf-m-disabled {
   --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
   cursor: not-allowed;
+}
+
+:where(.pf-theme-dark) .pf-c-banner {
+  --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-banner .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-banner {
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
+  color: var(--pf-global--palette--black-900);
 }

package/components/Banner/banner.scss

@@ -108,3 +108,10 @@
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/banner";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-banner;
+}

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

@@ -1,4 +1,6 @@
-@mixin banner() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-banner() {
   .pf-c-banner {
     &.pf-m-info,
     &.pf-m-danger,
@@ -7,6 +9,6 @@
       color: var(--pf-global--palette--black-900);
     }
 
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Breadcrumb/breadcrumb.css

@@ -93,4 +93,8 @@ button.pf-c-breadcrumb__link {
 .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
   display: none;
   visibility: hidden;
+}
+
+:where(.pf-theme-dark) .pf-c-breadcrumb {
+  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
 }

package/components/Breadcrumb/breadcrumb.scss

@@ -125,3 +125,10 @@
   display: none;
   visibility: hidden;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/breadcrumb";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-breadcrumb;
+}

package/components/Breadcrumb/themes/dark/breadcrumb.scss

@@ -1,4 +1,6 @@
-@mixin breadcrumb() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-breadcrumb() {
   .pf-c-breadcrumb {
     --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
   }

package/components/Button/button.css

@@ -474,4 +474,42 @@
 
 .pf-m-overpass-font .pf-c-button {
   --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
+}
+
+:where(.pf-theme-dark) .pf-c-button {
+  --pf-c-button--disabled--Color: var(--pf-global--disabled-color--300);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--hover--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-danger--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--hover--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--focus--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--active--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--after--BorderTopColor: transparent;
+  --pf-c-button--m-control--after--BorderRightColor: transparent;
+  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-button--m-control--after--BorderLeftColor: transparent;
+  --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+}
+:where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
+  border: 0;
+  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
 }

package/components/Button/button.scss

@@ -626,3 +626,10 @@
     --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/button";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-button;
+}

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

@@ -1,4 +1,6 @@
-@mixin button() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-button() {
   .pf-c-button {
     --pf-c-button--disabled--Color: var(--pf-global--disabled-color--300);
     --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300); // should blue-400 be a primary-color?

package/components/CalendarMonth/calendar-month.css

@@ -196,4 +196,26 @@
   pointer-events: none;
   --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
   --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
+}
+
+:where(.pf-theme-dark) .pf-c-calendar-month {
+  --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--palette--black-900);
+  --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--palette--blue-400);
+  --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--focus--after--BorderColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-calendar-month__date:hover, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-hover {
+  --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+}
+:where(.pf-theme-dark) .pf-c-calendar-month__date:focus, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-focus {
+  --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/components/CalendarMonth/calendar-month.scss

@@ -220,3 +220,10 @@
     --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/calendar-month";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-calendar-month;
+}

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

@@ -1,4 +1,6 @@
-@mixin calendar-month() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-calendar-month() {
   .pf-c-calendar-month {
     --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--primary-color--300);

package/components/Chip/chip.css

@@ -95,4 +95,10 @@
 .pf-c-chip__icon + .pf-c-chip__text,
 .pf-c-chip__text + .pf-c-chip__icon {
   margin-left: var(--pf-c-chip__icon--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-chip {
+  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
 }

package/components/Chip/chip.scss

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

package/components/Chip/themes/dark/chip.scss

@@ -1,4 +1,6 @@
-@mixin chip() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-chip() {
   .pf-c-chip {
     --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
     --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);

package/components/ClipboardCopy/clipboard-copy.css

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

package/components/ClipboardCopy/clipboard-copy.scss

@@ -106,3 +106,10 @@
     --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/clipboard-copy";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-clipboard-copy;
+}

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

@@ -1,4 +1,6 @@
-@mixin clipboard-copy() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-clipboard-copy() {
   .pf-c-clipboard-copy {
     --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
   }

package/components/CodeEditor/code-editor.css

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