@patternfly/patternfly 4.176.3 → 4.179.0

package/UPGRADE-GUIDE.md

@@ -3,6 +3,9 @@ id: Upgrade guide
 section: developer-resources
 ---
 
+**Note:** this guide details upgrading from PatternFly v3 to v4, and references [major release 2020.07](/developer-resources/release-notes/html/#2020.07-release-notes-2020-06-05) from 2020-06-05.
+<hr/>
+
 Hey, Flyers! We've been busy for the past 12 weeks working on significant changes to PatternFly's HTML and CSS. We made our components mobile-first and changed colors and the default font. This upgrade guide details **what** was broken and **how** to fix it. To learn **why** a change was made, check out the linked pull requests.
 
 ## Global

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

@@ -0,0 +1,9 @@
+@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);
+
+    @include pf-t-dark();
+  }
+}

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

@@ -0,0 +1,7 @@
+@mixin 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);
+    --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

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

@@ -0,0 +1,15 @@
+@mixin 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);
+    --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/AppLauncher/themes/dark/app-launcher.scss

@@ -0,0 +1,13 @@
+@mixin app-launcher() {
+  .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); // question should we have a global var for this
+    --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/Avatar/avatar.css

@@ -4,6 +4,14 @@
   --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-avatar--Width: 2.25rem;
   --pf-c-avatar--Height: 2.25rem;
+  --pf-c-avatar--m-sm--Width: 1.5rem;
+  --pf-c-avatar--m-sm--Height: 1.5rem;
+  --pf-c-avatar--m-md--Width: 2.25rem;
+  --pf-c-avatar--m-md--Height: 2.25rem;
+  --pf-c-avatar--m-lg--Width: 4.5rem;
+  --pf-c-avatar--m-lg--Height: 4.5rem;
+  --pf-c-avatar--m-xl--Width: 8rem;
+  --pf-c-avatar--m-xl--Height: 8rem;
   --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
   --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
@@ -20,4 +28,220 @@
 .pf-c-avatar.pf-m-dark {
   --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
   --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
+}
+.pf-c-avatar.pf-m-sm {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-2xl, var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-sm {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-2xl, var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-md {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-2xl, var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-md {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-2xl, var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-lg {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-2xl, var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-lg {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
+  }
+}
+.pf-c-avatar.pf-m-xl {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-avatar.pf-m-xl {
+    --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
+  }
 }

package/components/Avatar/avatar.scss

@@ -1,9 +1,20 @@
+$pf-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$sizes: "sm", "md", "lg", "xl";
+
 .pf-c-avatar {
   --pf-c-avatar--BorderColor: transparent;
   --pf-c-avatar--BorderWidth: 0;
   --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-avatar--Width: #{pf-size-prem(36px)};
   --pf-c-avatar--Height: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-sm--Width: #{pf-size-prem(24px)};
+  --pf-c-avatar--m-sm--Height: #{pf-size-prem(24px)};
+  --pf-c-avatar--m-md--Width: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-md--Height: #{pf-size-prem(36px)};
+  --pf-c-avatar--m-lg--Width: #{pf-size-prem(72px)};
+  --pf-c-avatar--m-lg--Height: #{pf-size-prem(72px)};
+  --pf-c-avatar--m-xl--Width: #{pf-size-prem(128px)};
+  --pf-c-avatar--m-xl--Height: #{pf-size-prem(128px)};
 
   // Light
   --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
@@ -27,4 +38,11 @@
     --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
     --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
   }
+
+  @each $size in $sizes {
+    &.pf-m-#{$size} {
+      @include pf-build-css-variable-stack("--pf-c-avatar--Width", "--pf-c-avatar--m-#{$size}--Width", $pf-c-avatar--breakpoint-map);
+      @include pf-build-css-variable-stack("--pf-c-avatar--Height", "--pf-c-avatar--m-#{$size}--Height", $pf-c-avatar--breakpoint-map);
+    }
+  }
 }

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

@@ -0,0 +1,6 @@
+@mixin 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/themes/dark/banner.scss

@@ -0,0 +1,12 @@
+@mixin banner() {
+  .pf-c-banner {
+    &.pf-m-info,
+    &.pf-m-danger,
+    &.pf-m-success,
+    &.pf-m-warning {
+      color: var(--pf-global--palette--black-900);
+    }
+
+    @include pf-t-dark;
+  }
+}

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

@@ -0,0 +1,5 @@
+@mixin breadcrumb() {
+  .pf-c-breadcrumb {
+    --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
+  }
+}

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

@@ -0,0 +1,42 @@
+@mixin 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?
+    --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-button--m-tertiary--Color: var(--pf-global--palette--black-100); // global variable for this?
+    --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);
+
+    &.pf-m-control:disabled {
+      &::after {
+        border: 0;
+        border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+@mixin 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);
+    --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;
+  }
+
+  .pf-c-calendar-month__date {
+    &:hover,
+    &.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);
+    }
+
+    &:focus,
+    &.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/Chip/themes/dark/chip.scss

@@ -0,0 +1,7 @@
+@mixin chip() {
+  .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/ClipboardCopy/themes/dark/clipboard-copy.scss

@@ -0,0 +1,17 @@
+@mixin clipboard-copy() {
+  .pf-c-clipboard-copy {
+    --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  }
+
+  .pf-c-clipboard-copy__group {
+    > * + * {
+      margin-left: 0;
+      // stylelint-disable-next-line
+      border-left: 1px solid var(--pf-global--palette--black-700) !important;
+    }
+  }
+
+  .pf-c-clipboard-copy__expandable-content {
+    border: 0;
+  }
+}

package/components/CodeEditor/code-editor.css

@@ -19,6 +19,8 @@
   --pf-c-code-editor__code--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
   --pf-c-code-editor__tab--PaddingTop: var(--pf-global--spacer--form-element);
@@ -67,6 +69,12 @@
   border-bottom-color: var(--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
 }
 
+.pf-c-code-editor__header-main {
+  flex-grow: 1;
+  padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
+  padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
+}
+
 .pf-c-code-editor__main {
   position: relative;
   background-color: var(--pf-c-code-editor__main--BackgroundColor);

package/components/CodeEditor/code-editor.scss

@@ -27,6 +27,10 @@
   --pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
 
+  // content
+  --pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
+
   // tab
   --pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
@@ -86,6 +90,12 @@
   }
 }
 
+.pf-c-code-editor__header-main {
+  flex-grow: 1;
+  padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
+  padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
+}
+
 .pf-c-code-editor__main {
   position: relative;
   background-color: var(--pf-c-code-editor__main--BackgroundColor);
@@ -142,7 +152,7 @@
   display: flex;
   align-items: center;
   padding: var(--pf-c-code-editor__tab--PaddingTop) var(--pf-c-code-editor__tab--PaddingRight) var(--pf-c-code-editor__tab--PaddingBottom) var(--pf-c-code-editor__tab--PaddingLeft);
-  margin-left: auto;
+  margin-left: auto; // remove at breaking change
   color: var(--pf-c-code-editor__tab--Color);
   background-color: var(--pf-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-c-code-editor__tab--BorderColor);

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

@@ -0,0 +1,7 @@
+@mixin code-editor() {
+  .pf-c-code-editor__controls {
+    > * + * {
+      border-left: 1px solid var(--pf-global--palette--black-700);
+    }
+  }
+}

package/components/ContextSelector/themes/dark/context-selector.scss

@@ -0,0 +1,22 @@
+@mixin context-selector() {
+  .pf-c-context-selector {
+    --pf-c-context-selector__menu--Top: 100%;
+    --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  }
+
+  .pf-c-context-selector__toggle {
+    background: var(--pf-global--BackgroundColor--400);
+
+    &.pf-m-plain {
+      background: transparent;
+    }
+  }
+
+  .pf-c-context-selector__menu {
+    background: var(--pf-global--BackgroundColor--300);
+  }
+
+  .pf-c-context-selector__menu-footer {
+    border-top: 1px solid var(--pf-global--BorderColor--300);
+  }
+}

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

@@ -0,0 +1,8 @@
+@mixin data-list() {
+  .pf-c-data-list {
+    --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
+    --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
+    --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
+    --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
+  }
+}

package/components/DatePicker/themes/dark/date-picker.scss

@@ -0,0 +1,6 @@
+@mixin date-picker() {
+  .pf-c-date-picker {
+    --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-date-picker__calendar--Top: 100%;
+  }
+}

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

@@ -0,0 +1,11 @@
+@mixin drawer() {
+  .pf-c-drawer {
+    --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-drawer__splitter--BackgroundColor: transparent;
+
+    &.pf-m-inline,
+    &.pf-m-static {
+      --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    }
+  }
+}

package/components/Dropdown/themes/dark/dropdown.scss

@@ -0,0 +1,30 @@
+@mixin dropdown() {
+  .pf-c-dropdown {
+    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-dropdown__toggle--before--BorderTopColor: transparent;
+    --pf-c-dropdown__toggle--before--BorderRightColor: transparent;
+    --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-dropdown__toggle--before--BorderLeftColor: transparent;
+    --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+    --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-dropdown__menu--Top: 100%;
+    --pf-c-dropdown--m-top__menu--TranslateY: -100%;
+    --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+    --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  }
+
+  .pf-c-dropdown__toggle {
+    &:not(.pf-m-plain) {
+      &:disabled,
+      &.pf-m-disabled {
+        color: var(--pf-global--palette--black-100); // should be a global var?
+      }
+    }
+
+    &.pf-m-plain {
+      background: transparent;
+    }
+  }
+}