@patternfly/patternfly 4.196.0 → 4.196.3

package/assets/images/icon-github.hbs

@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <title>GitHub logo</title>
+  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+</svg>

package/assets/images/icon-google.hbs

@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#4285F4">
+  <title>Google logo</title>
+  <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
+</svg>

package/assets/images/icon-red-hat.hbs

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 145"><defs><style>.cls-1{fill:#e00;}</style></defs><title>RedHat-Logo-Hat-Color</title><path d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/></svg>

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

@@ -85,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};
@@ -307,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

@@ -81,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;
@@ -254,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

@@ -19,10 +19,10 @@
   --pf-c-calendar-month__header-year--Width: 8ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
   --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
@@ -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

@@ -11,10 +11,10 @@
   --pf-c-calendar-month__header-year--Width: 8ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0; // remove in breaking change
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0; // remove in breaking change
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0; // remove in breaking change
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0; // remove in breaking change
 
   // week days thead
   --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -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);