@patternfly/patternfly 4.178.0 → 4.179.0

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

package/components/Nav/themes/dark/nav.scss

@@ -0,0 +1,42 @@
+@mixin nav() {
+  .pf-c-nav {
+    --pf-c-nav__item--item__link--after--Top: -1px;
+    --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
+    --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--active--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
+  }
+
+  .pf-c-nav__link {
+    &::before {
+      bottom: 0;
+    }
+
+    &::after {
+      top: var(--pf-c-nav__item--item__link--after--Top);
+    }
+  }
+
+  .pf-c-nav__item + .pf-c-nav__item {
+    --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
+  }
+
+  .pf-c-nav__subnav {
+    --pf-c-nav__item--item__link--after--Top: 0;
+  }
+
+  .pf-c-nav__section {
+    --pf-c-nav__item--item__link--after--Top: 0;
+  }
+}

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -0,0 +1,5 @@
+@mixin notification-badge() {
+  .pf-c-notification-badge {
+    --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
+  }
+}

package/components/NotificationDrawer/themes/dark/notification-drawer.scss

@@ -0,0 +1,12 @@
+@mixin notification-drawer() {
+  .pf-c-notification-drawer {
+    --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__list-item--BoxShadow: none;
+    --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
+    --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
+    --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}