@patternfly/patternfly 4.176.3 → 4.179.0

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/nav.css

@@ -868,6 +868,9 @@
 .pf-c-nav__section + .pf-c-nav__section {
   --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
 }
+.pf-c-nav__section.pf-m-no-title {
+  --pf-c-nav__section--MarginTop: 0;
+}
 
 .pf-c-nav__section-title {
   padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);

package/components/Nav/nav.scss

@@ -1077,6 +1077,10 @@
   & + & {
     --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
   }
+
+  &.pf-m-no-title {
+    --pf-c-nav__section--MarginTop: 0;
+  }
 }
 
 // Section title

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

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -0,0 +1,21 @@
+@mixin options-menu() {
+  .pf-c-options-menu {
+    --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-options-menu__toggle--BorderTopColor: transparent;
+    --pf-c-options-menu__toggle--BorderRightColor: transparent;
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-options-menu__toggle--BorderLeftColor: transparent;
+    --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+    --pf-c-options-menu__menu--Top: 100%;
+  }
+
+  .pf-c-options-menu__toggle {
+    &.pf-m-plain {
+      background: transparent;
+    }
+  }
+}

package/components/Page/themes/dark/page.scss

@@ -0,0 +1,62 @@
+@mixin page() {
+  .pf-c-page {
+    --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
+  }
+
+  .pf-c-page__header-tools-item {
+    &.pf-m-selected {
+      .pf-c-button {
+        color: var(--pf-global--Color--100);
+
+        // stylelint-disable
+        .pf-c-notification-badge {
+          &:hover {
+            &::before {
+              background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
+            }
+          }
+        }
+        // stylelint-enable
+      }
+    }
+  }
+
+  .pf-c-page__main-nav {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-breadcrumb {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-group {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-section {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+  .pf-c-page__main-section[class*="pf-m-dark-"],
+  .pf-c-page__header {
+    @include pf-t-dark;
+  }
+}

package/components/Pagination/themes/dark/pagination.scss

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

package/components/Popover/popover.scss

@@ -244,4 +244,3 @@
 .pf-c-popover__footer {
   margin-top: var(--pf-c-popover__footer--MarginTop);
 }
-

package/components/Popover/themes/dark/popover.scss

@@ -0,0 +1,15 @@
+@mixin popover() {
+  .pf-c-popover {
+    --pf-c-popover--BoxShadow: none;
+    --pf-c-popover__arrow--BoxShadow: none;
+    --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+    --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+    --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
+    --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
+
+    &,
+    .pf-c-popover__arrow {
+      border: 4px solid var(--pf-global--BorderColor--400);
+    }
+  }
+}

package/components/Progress/progress.scss

@@ -200,4 +200,3 @@
   height: var(--pf-c-progress__indicator--Height);
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
-

package/components/Progress/themes/dark/progress.scss

@@ -0,0 +1,7 @@
+@mixin progress() {
+  .pf-c-progress {
+    --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
+    --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);
+    --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  }
+}

package/components/SearchInput/themes/dark/search-input.scss

@@ -0,0 +1,14 @@
+@mixin search-input() {
+  .pf-c-search-input {
+    --pf-c-search-input__text--before--BorderColor: transparent;
+    --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+
+    background-color: var(--pf-global--BackgroundColor--400);
+  }
+
+  .pf-c-search-input__text {
+    &::before {
+      border-bottom-color: var(--pf-global--BorderColor--400);
+    }
+  }
+}

package/components/Select/themes/dark/select.scss

@@ -0,0 +1,21 @@
+@mixin select() {
+  .pf-c-select {
+    --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-select__toggle--before--BorderTopColor: transparent;
+    --pf-c-select__toggle--before--BorderRightColor: transparent;
+    --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-select__toggle--before--BorderLeftColor: transparent;
+    --pf-c-select__menu--Top: 100%;
+    --pf-c-select__menu--m-top--TranslateY: -100%;
+    --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+
+  .pf-c-select__toggle {
+    &:disabled,
+    &.pf-m-disabled {
+      color: var(--pf-global--palette--black-100);
+    }
+  }
+}

package/components/SimpleList/themes/dark/simple-list.scss

@@ -0,0 +1,12 @@
+@mixin simple-list() {
+  .pf-c-simple-list {
+    --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
+    --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  }
+}

package/components/Skeleton/themes/dark/skeleton.scss

@@ -0,0 +1,8 @@
+@mixin skeleton() {
+  .pf-c-skeleton {
+    --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
+    --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
+    --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
+  }
+}

package/components/Switch/themes/dark/switch.scss

@@ -0,0 +1,8 @@
+@mixin switch() {
+  .pf-c-switch {
+    --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+    --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+    --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+    --pf-c-switch__toggle--before--BoxShadow: none;
+  }
+}

package/components/Table/table.css

@@ -967,7 +967,8 @@
 .pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child {
   --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 }
-.pf-c-table.pf-m-compact thead th {
+.pf-c-table.pf-m-compact thead th,
+.pf-c-table.pf-m-compact thead .pf-c-table__toggle {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
   --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
 }

package/components/Table/table.scss

@@ -85,8 +85,8 @@
   // ============================================================ //
 
   // Table cell - toggle
-  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1);
-  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
+  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
+  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
   --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
   --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
@@ -1255,9 +1255,12 @@
   }
 
   // Thead only
-  thead th {
-    --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
-    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+  thead {
+    th,
+    .pf-c-table__toggle {
+      --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
+      --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+    }
   }
 
   .pf-c-table__action {

package/components/Table/themes/dark/table.scss

@@ -0,0 +1,10 @@
+@mixin table() {
+  .pf-c-table__favorite {
+    .pf-c-button {
+      &:hover,
+      &:focus {
+        --pf-c-button--m-plain--Color: var(--pf-global--palette--gold-100);
+      }
+    }
+  }
+}

package/components/Tabs/themes/dark/tabs.scss

@@ -0,0 +1,7 @@
+@mixin tabs() {
+  .pf-c-tabs {
+    --pf-c-tabs__scroll-button--BackgroundColor: transparent;
+    --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  }
+}

package/components/Tile/themes/dark/tile.scss

@@ -0,0 +1,8 @@
+@mixin tile() {
+  .pf-c-tile {
+    --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
+    --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
+    --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
+  }
+}