@patternfly/patternfly 4.178.0 → 4.179.0

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

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -0,0 +1,9 @@
+@mixin toggle-group() {
+  .pf-c-toggle-group {
+    --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
+  }
+}

package/components/Tooltip/themes/dark/tooltip.scss

@@ -0,0 +1,6 @@
+@mixin tooltip() {
+  .pf-c-tooltip {
+    --pf-c-tooltip--BoxShadow: none;
+    --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/TreeView/themes/dark/tree-view.scss

@@ -0,0 +1,6 @@
+@mixin tree-view() {
+  .pf-c-tree-view {
+    --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/Wizard/themes/dark/wizard.scss

@@ -0,0 +1,12 @@
+@mixin wizard() {
+  .pf-c-wizard {
+    --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+
+  .pf-c-wizard__header {
+    @include pf-t-dark;
+  }
+}

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -744,7 +744,7 @@ cssPrefix: pf-c-calendar-month
           >28</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-in-range pf-m-end-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-hover"
@@ -1001,7 +1001,7 @@ cssPrefix: pf-c-calendar-month
           >10</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-start-range pf-m-in-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-focus"