@patternfly/patternfly 4.178.0 → 4.179.2

package/RELEASE-NOTES.md

@@ -3,6 +3,43 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.02 release notes (2022-02-17)
+Packages released:
+- [@patternfly/patternfly@v4.179.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.179.1)
+
+### Components
+- **Alert:** Added overflow alert button ([#4650](https://github.com/patternfly/patternfly/pull/4650))
+- **Avatar:** Added size variations ([#4648](https://github.com/patternfly/patternfly/pull/4648))
+- **Button:** Fixed primary toggle state styles ([#4662](https://github.com/patternfly/patternfly/pull/4662))
+- **Card:** Updated card demo select to be plain, fixed alignment ([#4667](https://github.com/patternfly/patternfly/pull/4667))
+- **Code editor:** Added header content section ([#4669](https://github.com/patternfly/patternfly/pull/4669))
+- **Label:** Improved click area of editable label ([#4653](https://github.com/patternfly/patternfly/pull/4653))
+- **Nav:**
+  - Added variation to fix section spacing ([#4649](https://github.com/patternfly/patternfly/pull/4649))
+  - Updated nav menu styling ([#4672](https://github.com/patternfly/patternfly/pull/4672))
+- **Pagination:** Removed number input arrow visibility ([#4641](https://github.com/patternfly/patternfly/pull/4641))
+- **Progress stepper:** Removed extra space below last step ([#4636](https://github.com/patternfly/patternfly/pull/4636))
+- **Table:**
+  - Updated tree table checkbox padding ([#4642](https://github.com/patternfly/patternfly/pull/4642))
+  - Removed unnecessary class from striped tr example ([#4644](https://github.com/patternfly/patternfly/pull/4644))
+  - Added overflow menu examples ([#4651](https://github.com/patternfly/patternfly/pull/4651))
+  - Fixed expand all button in compact table ([#4681](https://github.com/patternfly/patternfly/pull/4681))
+- **Text input group:** Added placeholder styling ([#4668](https://github.com/patternfly/patternfly/pull/4668))
+
+### Other
+- **Demos:**
+  - Removed bulk selector from demo headers ([#4640](https://github.com/patternfly/patternfly/pull/4640))
+  - Created common template for full page demos ([#4674](https://github.com/patternfly/patternfly/pull/4674))
+  - Added common masthead template ([#4683](https://github.com/patternfly/patternfly/pull/4683))
+  - Fixed context selector include paths ([#4689](https://github.com/patternfly/patternfly/pull/4689))
+- **Docs:**
+  - Added links to new breakpoint section ([#4675](https://github.com/patternfly/patternfly/pull/4675))
+  - Added version details to upgrade guide ([#4678](https://github.com/patternfly/patternfly/pull/4678))
+- **Repo:** Added bug and feature issue templates ([#4671](https://github.com/patternfly/patternfly/pull/4671))
+- **Theme:** Added dark theme ([#4654](https://github.com/patternfly/patternfly/pull/4654))
+  - **Note:** This is not production ready and we are not advising products to adopt the dark theme stylesheet at this time. This feature is being released to test in specific use cases to assess the feasibility of adding a dark theme to PatternFly.
+
+
 ## 2022.01 release notes (2022-01-25)
 Packages released:
 - [@patternfly/patternfly@v4.171.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.171.1)

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/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/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;
+    }
+  }
+}

package/components/Form/themes/dark/form.scss

@@ -0,0 +1,5 @@
+@mixin form() {
+  .pf-c-form {
+    --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
+  }
+}

package/components/FormControl/themes/dark/form-control.scss

@@ -0,0 +1,28 @@
+@mixin form-control() {
+  .pf-c-form-control {
+    --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+    --pf-c-form-control--BorderTopColor: transparent;
+    --pf-c-form-control--BorderRightColor: transparent;
+    --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-form-control--BorderLeftColor: transparent;
+    --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
+    --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
+
+    color: var(--pf-global--Color--100);
+
+    // chrome's calendar icon for type="date"
+    &::-webkit-calendar-picker-indicator {
+      filter: #{"invert(1)"};
+    }
+
+    &[readonly] {
+      border-bottom-color: var(--pf-global--palette--black-700); // should be a var?
+    }
+
+    &:disabled {
+      color: var(--pf-global--palette--black-100); // global var
+    }
+  }
+}

package/components/HelperText/themes/dark/helper-text.scss

@@ -0,0 +1,5 @@
+@mixin helper-text() {
+  .pf-c-helper-text {
+    --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
+  }
+}

package/components/Hint/themes/dark/hint.scss

@@ -0,0 +1,6 @@
+@mixin hint() {
+  .pf-c-hint {
+    --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
+  }
+}

package/components/InputGroup/themes/dark/input-group.scss

@@ -0,0 +1,26 @@
+@mixin input-group() {
+  .pf-c-input-group {
+    --pf-c-input-group--BackgroundColor: transparent;
+    --pf-c-input-group__text--BorderTopColor: transparent;
+    --pf-c-input-group__text--BorderRightColor: transparent;
+    --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-input-group__text--BorderLeftColor: transparent;
+    --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+
+    > * + * {
+      margin-left: 0;
+      border-left: 1px solid var(--pf-global--palette--black-700); // global var
+    }
+  }
+
+  .pf-c-input-group__text {
+    --pf-c-input-group__text--BorderTopColor: transparent;
+    --pf-c-input-group__text--BorderRightColor: transparent;
+    --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-input-group__text--BorderLeftColor: transparent;
+
+    &.pf-m-plain {
+      --pf-c-input-group__text--BackgroundColor: transparent;
+    }
+  }
+}

package/components/Label/themes/dark/label.scss

@@ -0,0 +1,45 @@
+@mixin label() {
+  .pf-c-label {
+    --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-label__content--before--BorderWidth: 0;
+    --pf-c-label__content--before--BorderColor: transparent;
+    --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+    --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+    --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
+    --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
+    --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
+    --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
+    --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
+    --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
+    --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
+    --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
+    --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
+    --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
+    --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
+    --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
+    --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
+    --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
+    --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
+    --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
+    --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
+    --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
+    --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
+    --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
+    --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
+    --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
+    --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
+    --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
+    --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
+    --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
+    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
+    --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
+    --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
+    --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
+  }
+}

package/components/LogViewer/themes/dark/log-viewer.scss

@@ -0,0 +1,5 @@
+@mixin log-viewer() {
+  .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+    @include pf-t-dark;
+  }
+}

package/components/Login/themes/dark/login.scss

@@ -0,0 +1,6 @@
+@mixin login() {
+  .pf-c-login__header,
+  .pf-c-login__footer {
+    @include pf-t-dark;
+  }
+}

package/components/Masthead/themes/dark/masthead.scss

@@ -0,0 +1,11 @@
+@mixin masthead() {
+  .pf-c-masthead {
+    --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
+
+    .pf-c-toolbar {
+      --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
+    }
+
+    @include pf-t-dark;
+  }
+}

package/components/Menu/themes/dark/menu.scss

@@ -0,0 +1,10 @@
+@mixin menu() {
+  .pf-c-menu {
+    --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200); // global var?
+    --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+    --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  }
+}

package/components/MenuToggle/themes/dark/menu-toggle.scss

@@ -0,0 +1,21 @@
+@mixin menu-toggle() {
+  .pf-c-menu-toggle {
+    --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu-toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu-toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-menu-toggle--before--BorderTopColor: transparent;
+    --pf-c-menu-toggle--before--BorderRightColor: transparent;
+    --pf-c-menu-toggle--before--BorderBottomColor: transparent;
+    --pf-c-menu-toggle--before--BorderLeftColor: transparent;
+    --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-menu-toggle--disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+
+    &.pf-m-plain {
+      background: transparent;
+    }
+  }
+}

package/components/ModalBox/modal-box.scss

@@ -216,4 +216,3 @@
     }
   }
 }
-

package/components/ModalBox/themes/dark/modal-box.scss

@@ -0,0 +1,5 @@
+@mixin modal-box() {
+  .pf-c-modal-box {
+    --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}