From 5fc68d0ce8616f3132095a84796dd437d6fdba32 Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 5 May 2023 01:29:42 -0500 Subject: [PATCH 1/6] fix(theme): fix dark theme bugs --- src/patternfly/assets/images/pf_logo.svg | 22 +++++++------- .../components/Alert/themes/dark/alert.scss | 4 +-- .../components/AppLauncher/app-launcher.scss | 1 + .../components/Banner/themes/dark/banner.scss | 4 --- .../DualListSelector/dual-list-selector.scss | 13 ++++++-- .../examples/DualListSelector.md | 2 +- .../themes/dark/dual-list-selector.scss | 10 +++++++ .../components/Label/themes/dark/label.scss | 6 ++++ .../components/Menu/themes/dark/menu.scss | 2 +- .../components/MenuToggle/menu-toggle.scss | 9 +++--- .../MenuToggle/themes/dark/menu-toggle.scss | 30 ++++++++++--------- .../Popover/themes/dark/popover.scss | 2 +- .../components/Tabs/themes/dark/tabs.scss | 1 + .../themes/dark/scss-variables.scss | 7 +++-- 14 files changed, 69 insertions(+), 44 deletions(-) create mode 100644 src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss diff --git a/src/patternfly/assets/images/pf_logo.svg b/src/patternfly/assets/images/pf_logo.svg index efca381b55..c88664af40 100644 --- a/src/patternfly/assets/images/pf_logo.svg +++ b/src/patternfly/assets/images/pf_logo.svg @@ -3,31 +3,31 @@ - - - - - - + + + - - - - + + + - dual-list-selector-status}} {{#> dual-list-selector-status-text}} - 1 of 5 items selected + 3 of 5 items selected {{/dual-list-selector-status-text}} {{/dual-list-selector-status}} {{#> dual-list-selector-menu}} diff --git a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss new file mode 100644 index 0000000000..8724e94e3f --- /dev/null +++ b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss @@ -0,0 +1,10 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-theme-dark-dual-list-selector() { + .pf-c-dual-list-selector { + --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-global--BackgroundColor--400); + --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400); + --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--400); + --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--300); + } +} diff --git a/src/patternfly/components/Label/themes/dark/label.scss b/src/patternfly/components/Label/themes/dark/label.scss index 229aed627d..24b9899c48 100644 --- a/src/patternfly/components/Label/themes/dark/label.scss +++ b/src/patternfly/components/Label/themes/dark/label.scss @@ -9,6 +9,7 @@ --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}__content--before--BorderWidth: 0; --#{$label}__content--before--BorderColor: transparent; --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); @@ -43,5 +44,10 @@ --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); + --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300); + --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300); + --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100); + --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100); + --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100); } } diff --git a/src/patternfly/components/Menu/themes/dark/menu.scss b/src/patternfly/components/Menu/themes/dark/menu.scss index ee7dac37fe..5836923070 100644 --- a/src/patternfly/components/Menu/themes/dark/menu.scss +++ b/src/patternfly/components/Menu/themes/dark/menu.scss @@ -5,6 +5,6 @@ --#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--Color--200); // global var? + --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--disabled-color--300); } } diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss index dfcea2eca4..38f83345f2 100644 --- a/src/patternfly/components/MenuToggle/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/menu-toggle.scss @@ -360,9 +360,10 @@ } > .#{$check} { - --#{$menu-toggle}--PaddingRight: 0; - --#{$check}__input--MarginTop: 0; - --#{$check}__label--Color: currentcolor; + --pf-c-menu-toggle--PaddingRight: 0; + --pf-c-check__input--MarginTop: 0; + --pf-c-check__label--Color: currentcolor; + --pf-c-check__label--disabled--Color: currentcolor; align-items: center; align-self: stretch; @@ -469,8 +470,6 @@ // disable accent border &.pf-m-disabled, &:disabled { - --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor); - --#{$menu-toggle}--m-split-button--child--Color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color); --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: transparent; &::before, diff --git a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss index 83a19f0b85..4250d5250c 100644 --- a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss @@ -1,20 +1,22 @@ @import "../../../../sass-utilities/themes/dark/all"; @mixin pf-v5-theme-dark-menu-toggle() { - .#{$menu}-toggle { - --#{$menu}-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--before--BorderTopColor: transparent; - --#{$menu}-toggle--before--BorderRightColor: transparent; - --#{$menu}-toggle--before--BorderBottomColor: transparent; - --#{$menu}-toggle--before--BorderLeftColor: transparent; - --#{$menu}-toggle--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); - --#{$menu}-toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500); - --#{$menu}-toggle--disabled--Color: var(--#{$pf-global}--palette--black-100); - --#{$menu}-toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + .#{$menu-toggle} { + --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--before--BorderTopColor: transparent; + --#{$menu-toggle}--before--BorderRightColor: transparent; + --#{$menu-toggle}--before--BorderBottomColor: transparent; + --#{$menu-toggle}--before--BorderLeftColor: transparent; + --#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); + --#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); &.pf-m-plain { background: transparent; diff --git a/src/patternfly/components/Popover/themes/dark/popover.scss b/src/patternfly/components/Popover/themes/dark/popover.scss index b3bb62e08f..0df73ca3ec 100644 --- a/src/patternfly/components/Popover/themes/dark/popover.scss +++ b/src/patternfly/components/Popover/themes/dark/popover.scss @@ -4,7 +4,7 @@ .#{$popover} { --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); - --#{$popover}--m-default__title-text--Color: var(--#{$pf-global}--custom-color--200); + --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200); --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100); --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100); } diff --git a/src/patternfly/components/Tabs/themes/dark/tabs.scss b/src/patternfly/components/Tabs/themes/dark/tabs.scss index 87ce7c849d..0ee3d3a9e6 100644 --- a/src/patternfly/components/Tabs/themes/dark/tabs.scss +++ b/src/patternfly/components/Tabs/themes/dark/tabs.scss @@ -4,6 +4,7 @@ .#{$tabs} { --#{$tabs}__scroll-button--BackgroundColor: transparent; --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--300); --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); } } diff --git a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss index 724d58a120..748b6c757f 100644 --- a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss +++ b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss @@ -23,9 +23,12 @@ $pf-v5-global--danger-color--200: $pf-v5-color-red-8888; $pf-v5-global--link--Color: $pf-v5-color-blue-300; $pf-v5-global--link--Color--hover: $pf-v5-color-blue-200; $pf-v5-global--link--Color--visited: $pf-v5-color-purple-300; -$pf-v5-global--disabled-color--100: $pf-v5-color-black-400; // disabled text on regular background color +$pf-v5-global--disabled-color--100: $pf-v5-color-black-400; // disabled text on regular background color - this doesn't have enough contrast in most cases $pf-v5-global--disabled-color--200: $pf-v5-color-black-500; // disabled background color -$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled background color - except form elements +$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled or floating background color - except form elements + +// icons +$pf-v5-global--icon--Color--light: $pf-v5-color-black-300; // theme color resets $pf-v5-global--Color--dark-100: $pf-v5-global--Color--100; From ddd5063859535616517ee684a7314bd843ee8301 Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 5 May 2023 10:29:13 -0500 Subject: [PATCH 2/6] chore(theme): updates --- .../CalendarMonth/calendar-month.scss | 6 +- .../MenuToggle/themes/dark/menu-toggle.scss | 3 +- .../ProgressStepper/progress-stepper.scss | 487 +++++++++--------- 3 files changed, 251 insertions(+), 245 deletions(-) diff --git a/src/patternfly/components/CalendarMonth/calendar-month.scss b/src/patternfly/components/CalendarMonth/calendar-month.scss index 4a5987c759..bcbca1467a 100644 --- a/src/patternfly/components/CalendarMonth/calendar-month.scss +++ b/src/patternfly/components/CalendarMonth/calendar-month.scss @@ -1,7 +1,4 @@ -// @debug $calendar-month; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss - .#{$calendar-month} { - --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); --#{$calendar-month}--PaddingTop: var(--#{$pf-global}--spacer--lg); --#{$calendar-month}--PaddingRight: var(--#{$pf-global}--spacer--lg); --#{$calendar-month}--PaddingBottom: var(--#{$pf-global}--spacer--md); @@ -49,7 +46,7 @@ --#{$calendar-month}__dates-cell--m-in-range--m-end-range--before--Right: 50%; --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--#{$pf-global}--palette--blue-100); --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-100); - --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--#{$pf-global}--disabled-color--100); + --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--#{$pf-global}--Color--200); // date button --#{$calendar-month}__date--Width: 4ch; @@ -71,7 +68,6 @@ flex-direction: column; padding: var(--#{$calendar-month}--PaddingTop) var(--#{$calendar-month}--PaddingRight) var(--#{$calendar-month}--PaddingBottom) var(--#{$calendar-month}--PaddingLeft); font-size: var(--#{$calendar-month}--FontSize); - background-color: var(--#{$calendar-month}--BackgroundColor); } .#{$calendar-month}__header { diff --git a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss index 4250d5250c..e397b20edc 100644 --- a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss @@ -1,6 +1,6 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-v5-theme-dark-menu-toggle() { +@mixin pf-theme-dark-menu-toggle() { .#{$menu-toggle} { --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); @@ -15,6 +15,7 @@ --#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300); --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300); --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); diff --git a/src/patternfly/components/ProgressStepper/progress-stepper.scss b/src/patternfly/components/ProgressStepper/progress-stepper.scss index 17ce7420fe..621476f572 100644 --- a/src/patternfly/components/ProgressStepper/progress-stepper.scss +++ b/src/patternfly/components/ProgressStepper/progress-stepper.scss @@ -3,183 +3,183 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map(); // Default layout is vertical @mixin pf-v5-c-progress-stepper--m-vertical { - --#{$progress}-stepper--GridAutoFlow: var(--#{$progress}-stepper--m-vertical--GridAutoFlow); - --#{$progress}-stepper--GridTemplateColumns: var(--#{$progress}-stepper--m-vertical--GridTemplateColumns); - --#{$progress}-stepper__step-connector--before--Top: var(--#{$progress}-stepper--m-vertical__step-connector--before--Top); - --#{$progress}-stepper__step-connector--before--Left: var(--#{$progress}-stepper--m-vertical__step-connector--before--Left); - --#{$progress}-stepper__step-connector--before--Width: var(--#{$progress}-stepper--m-vertical__step-connector--before--Width); - --#{$progress}-stepper__step-connector--before--Height: var(--#{$progress}-stepper--m-vertical__step-connector--before--Height); - --#{$progress}-stepper__step-connector--before--BorderRightWidth: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderRightWidth); - --#{$progress}-stepper__step-connector--before--BorderRightColor: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderRightColor); - --#{$progress}-stepper__step-connector--before--BorderBottomWidth: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomWidth); - --#{$progress}-stepper__step-connector--before--BorderBottomColor: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomColor); - --#{$progress}-stepper__step-connector--before--Transform: var(--#{$progress}-stepper--m-vertical__step-connector--before--Transform); - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-vertical__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-vertical__step-main--MarginBottom); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical__step-main--MarginLeft); + --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-vertical--GridAutoFlow); + --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--GridTemplateColumns); + --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-vertical__step-connector--before--Top); + --#{$progress-stepper}__step-connector--before--Left: var(--#{$progress-stepper}--m-vertical__step-connector--before--Left); + --#{$progress-stepper}__step-connector--before--Width: var(--#{$progress-stepper}--m-vertical__step-connector--before--Width); + --#{$progress-stepper}__step-connector--before--Height: var(--#{$progress-stepper}--m-vertical__step-connector--before--Height); + --#{$progress-stepper}__step-connector--before--BorderRightWidth: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth); + --#{$progress-stepper}__step-connector--before--BorderRightColor: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor); + --#{$progress-stepper}__step-connector--before--BorderBottomWidth: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth); + --#{$progress-stepper}__step-connector--before--BorderBottomColor: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor); + --#{$progress-stepper}__step-connector--before--Transform: var(--#{$progress-stepper}--m-vertical__step-connector--before--Transform); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-vertical__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-vertical__step-main--MarginBottom); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical__step-main--MarginLeft); // Compact vertical - --#{$progress}-stepper--m-compact--GridTemplateColumns: var(--#{$progress}-stepper--m-vertical--m-compact--GridTemplateColumns); - --#{$progress}-stepper--m-compact__step-connector--GridRow: var(--#{$progress}-stepper--m-vertical--m-compact__step-connector--GridRow); - --#{$progress}-stepper--m-compact__step-connector--PaddingBottom: var(--#{$progress}-stepper--m-vertical--m-compact__step-connector--PaddingBottom); + --#{$progress-stepper}--m-compact--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns); + --#{$progress-stepper}--m-compact__step-connector--GridRow: var(--#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow); + --#{$progress-stepper}--m-compact__step-connector--PaddingBottom: var(--#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom); // Center - --#{$progress}-stepper--m-center__step-connector--before--Content: none; // border swap - --#{$progress}-stepper--m-center__step-main--before--Content: ""; // border swap + --#{$progress-stepper}--m-center__step-connector--before--Content: none; // border swap + --#{$progress-stepper}--m-center__step-main--before--Content: ""; // border swap } @mixin pf-v5-c-progress-stepper--m-horizontal { - --#{$progress}-stepper--GridAutoFlow: var(--#{$progress}-stepper--m-horizontal--GridAutoFlow); - --#{$progress}-stepper--GridTemplateColumns: var(--#{$progress}-stepper--m-horizontal--GridTemplateColumns); - --#{$progress}-stepper__step-connector--before--Top: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Top); - --#{$progress}-stepper__step-connector--before--Left: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Left); - --#{$progress}-stepper__step-connector--before--Width: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Width); - --#{$progress}-stepper__step-connector--before--Height: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Height); - --#{$progress}-stepper__step-connector--before--BorderRightWidth: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightWidth); - --#{$progress}-stepper__step-connector--before--BorderRightColor: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightColor); - --#{$progress}-stepper__step-connector--before--BorderBottomWidth: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomWidth); - --#{$progress}-stepper__step-connector--before--BorderBottomColor: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomColor); - --#{$progress}-stepper__step-connector--before--Transform: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Transform); - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-horizontal__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-horizontal__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-horizontal__step-main--MarginBottom); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-horizontal__step-main--MarginLeft); + --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-horizontal--GridAutoFlow); + --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--GridTemplateColumns); + --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Top); + --#{$progress-stepper}__step-connector--before--Left: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Left); + --#{$progress-stepper}__step-connector--before--Width: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Width); + --#{$progress-stepper}__step-connector--before--Height: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Height); + --#{$progress-stepper}__step-connector--before--BorderRightWidth: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth); + --#{$progress-stepper}__step-connector--before--BorderRightColor: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor); + --#{$progress-stepper}__step-connector--before--BorderBottomWidth: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth); + --#{$progress-stepper}__step-connector--before--BorderBottomColor: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor); + --#{$progress-stepper}__step-connector--before--Transform: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Transform); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-horizontal__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-horizontal__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-horizontal__step-main--MarginBottom); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-horizontal__step-main--MarginLeft); // Compact horizontal - --#{$progress}-stepper--m-compact--GridTemplateColumns: var(--#{$progress}-stepper--m-horizontal--m-compact--GridTemplateColumns); - --#{$progress}-stepper--m-compact__step-connector--GridRow: var(--#{$progress}-stepper--m-horizontal--m-compact__step-connector--GridRow); - --#{$progress}-stepper--m-compact__step-connector--PaddingBottom: var(--#{$progress}-stepper--m-horizontal--m-compact__step-connector--PaddingBottom); + --#{$progress-stepper}--m-compact--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--m-compact--GridTemplateColumns); + --#{$progress-stepper}--m-compact__step-connector--GridRow: var(--#{$progress-stepper}--m-horizontal--m-compact__step-connector--GridRow); + --#{$progress-stepper}--m-compact__step-connector--PaddingBottom: var(--#{$progress-stepper}--m-horizontal--m-compact__step-connector--PaddingBottom); // Center - --#{$progress}-stepper--m-center__step-connector--before--Content: ""; // border swap - --#{$progress}-stepper--m-center__step-main--before--Content: none; // border swap + --#{$progress-stepper}--m-center__step-connector--before--Content: ""; // border swap + --#{$progress-stepper}--m-center__step-main--before--Content: none; // border swap } // Progress stepper is vertically oriented by default -.#{$progress}-stepper { +.#{$progress-stepper} { // Vertical - these are the default settings - --#{$progress}-stepper--m-vertical--GridAutoFlow: row; - --#{$progress}-stepper--m-vertical--GridTemplateColumns: auto 1fr; - --#{$progress}-stepper--m-vertical__step-connector--before--Top: 0; - --#{$progress}-stepper--m-vertical__step-connector--before--Left: calc(var(--#{$progress}-stepper__step-icon--Width) / 2); - --#{$progress}-stepper--m-vertical__step-connector--before--Width: auto; - --#{$progress}-stepper--m-vertical__step-connector--before--Height: 100%; - --#{$progress}-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100); - --#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0; - --#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent; - --#{$progress}-stepper--m-vertical__step-connector--before--Transform: translateX(-50%); - --#{$progress}-stepper--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: 0; - --#{$progress}-stepper--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-vertical--GridAutoFlow: row; + --#{$progress-stepper}--m-vertical--GridTemplateColumns: auto 1fr; + --#{$progress-stepper}--m-vertical__step-connector--before--Top: 0; + --#{$progress-stepper}--m-vertical__step-connector--before--Left: calc(var(--#{$progress-stepper}__step-icon--Width) / 2); + --#{$progress-stepper}--m-vertical__step-connector--before--Width: auto; + --#{$progress-stepper}--m-vertical__step-connector--before--Height: 100%; + --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth: 0; + --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor: transparent; + --#{$progress-stepper}--m-vertical__step-connector--before--Transform: translateX(-50%); + --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); // Compact, vertical - --#{$progress}-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr; - --#{$progress}-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-vertical--m-compact__step-connector--GridRow: auto; - --#{$progress}-stepper--m-vertical--m-compact__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns: 1fr; + --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow: auto; + --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight: 0; // Center, vertical - --#{$progress}-stepper--m-vertical--m-center__step-main--MarginRight: 0; - --#{$progress}-stepper--m-vertical--m-center__step-main--MarginLeft: 0; + --#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical--m-center__step-main--MarginLeft: 0; // Horizontal - --#{$progress}-stepper--m-horizontal--GridAutoFlow: column; - --#{$progress}-stepper--m-horizontal--GridTemplateColumns: initial; - --#{$progress}-stepper--m-horizontal__step-connector--before--Top: calc(var(--#{$progress}-stepper__step-icon--Height) / 2); - --#{$progress}-stepper--m-horizontal__step-connector--before--Left: 0; - --#{$progress}-stepper--m-horizontal__step-connector--before--Width: 100%; - --#{$progress}-stepper--m-horizontal__step-connector--before--Height: auto; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightColor: unset; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100); - --#{$progress}-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%); - --#{$progress}-stepper--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-horizontal__step-main--MarginBottom: 0; - --#{$progress}-stepper--m-horizontal__step-main--MarginLeft: 0; + --#{$progress-stepper}--m-horizontal--GridAutoFlow: column; + --#{$progress-stepper}--m-horizontal--GridTemplateColumns: initial; + --#{$progress-stepper}--m-horizontal__step-connector--before--Top: calc(var(--#{$progress-stepper}__step-icon--Height) / 2); + --#{$progress-stepper}--m-horizontal__step-connector--before--Left: 0; + --#{$progress-stepper}--m-horizontal__step-connector--before--Width: 100%; + --#{$progress-stepper}--m-horizontal__step-connector--before--Height: auto; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth: 0; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor: unset; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}--m-horizontal__step-connector--before--Transform: translateY(-50%); + --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-horizontal__step-main--MarginBottom: 0; + --#{$progress-stepper}--m-horizontal__step-main--MarginLeft: 0; // Compact, horizontal - --#{$progress}-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)}); - --#{$progress}-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0; - --#{$progress}-stepper--m-horizontal--m-compact__step-connector--GridRow: 2; + --#{$progress-stepper}--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)}); + --#{$progress-stepper}--m-horizontal--m-compact__step-connector--PaddingBottom: 0; + --#{$progress-stepper}--m-horizontal--m-compact__step-connector--GridRow: 2; // Compact - --#{$progress}-stepper--m-compact--GridAutoFlow: row; - --#{$progress}-stepper--m-compact__step-main--MarginTop: 0; - --#{$progress}-stepper--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)}; - --#{$progress}-stepper--m-compact__step-icon--Width: #{pf-size-prem(18px)}; - --#{$progress}-stepper--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm); - --#{$progress}-stepper--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm); - --#{$progress}-stepper--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); - --#{$progress}-stepper--m-compact__pficon--MarginTop: 2px; - --#{$progress}-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px; + --#{$progress-stepper}--m-compact--GridAutoFlow: row; + --#{$progress-stepper}--m-compact__step-main--MarginTop: 0; + --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)}; + --#{$progress-stepper}--m-compact__step-icon--Width: #{pf-size-prem(18px)}; + --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm); + --#{$progress-stepper}--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm); + --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); + --#{$progress-stepper}--m-compact__pficon--MarginTop: 2px; + --#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop: -3px; // Center - --#{$progress}-stepper--m-center__step-connector--before--Left: 50%; - --#{$progress}-stepper--m-center--GridTemplateColumns: 1fr; - --#{$progress}-stepper--m-center__step-connector--JustifyContent: center; - --#{$progress}-stepper--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-center__step-main--TextAlign: center; - --#{$progress}-stepper--m-center__step-description--MarginRight: 0; - --#{$progress}-stepper--m-center__step-description--MarginLeft: 0; + --#{$progress-stepper}--m-center__step-connector--before--Left: 50%; + --#{$progress-stepper}--m-center--GridTemplateColumns: 1fr; + --#{$progress-stepper}--m-center__step-connector--JustifyContent: center; + --#{$progress-stepper}--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-center__step-main--TextAlign: center; + --#{$progress-stepper}--m-center__step-description--MarginRight: 0; + --#{$progress-stepper}--m-center__step-description--MarginLeft: 0; // Stepper variables - --#{$progress}-stepper--GridTemplateRows: auto 1fr; + --#{$progress-stepper}--GridTemplateRows: auto 1fr; // Step connector variables - --#{$progress}-stepper__step-connector--JustifyContent: start; + --#{$progress-stepper}__step-connector--JustifyContent: start; // Step icon variables - --#{$progress}-stepper__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs); - --#{$progress}-stepper__step-icon--Width: #{pf-size-prem(28px)}; - --#{$progress}-stepper__step-icon--Height: var(--#{$progress}-stepper__step-icon--Width); - --#{$progress}-stepper__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md); - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200); - --#{$progress}-stepper__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs); + --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(28px)}; + --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width); + --#{$progress-stepper}__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200); + --#{$progress-stepper}__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100); // Icon adjustments to fix differences in alignment - --#{$progress}-stepper__pficon--MarginTop: 3px; - --#{$progress}-stepper__fa-exclamation-triangle--MarginTop: -5px; + --#{$progress-stepper}__pficon--MarginTop: 3px; + --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -5px; // Step Title variables - --#{$progress}-stepper__step-title--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--TextAlign: left; - --#{$progress}-stepper__step-title--FontSize: var(--#{$pf-global}--FontSize--md); - --#{$progress}-stepper__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); - --#{$progress}-stepper__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold); - --#{$progress}-stepper__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200); - --#{$progress}-stepper__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step-title--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--TextAlign: left; + --#{$progress-stepper}__step-title--FontSize: var(--#{$pf-global}--FontSize--md); + --#{$progress-stepper}__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); + --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold); + --#{$progress-stepper}__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200); + --#{$progress-stepper}__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100); // Help text variables for the step title - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm); - --#{$progress}-stepper__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)}; - --#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm); + --#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)}; + --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100); // Help text variables the step title for failure state - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200); // Step Description variables - --#{$progress}-stepper__step-description--MarginTop: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper__step-description--FontSize: var(--#{$pf-global}--FontSize--sm); - --#{$progress}-stepper__step-description--Color: var(--#{$pf-global}--Color--200); - --#{$progress}-stepper__step-description--TextAlign: left; + --#{$progress-stepper}__step-description--MarginTop: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}__step-description--FontSize: var(--#{$pf-global}--FontSize--sm); + --#{$progress-stepper}__step-description--Color: var(--#{$pf-global}--Color--200); + --#{$progress-stepper}__step-description--TextAlign: left; // Vertical by default @include pf-v5-c-progress-stepper--m-vertical; @@ -191,236 +191,245 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map(); position: relative; display: grid; - grid-template-rows: var(--#{$progress}-stepper--GridTemplateRows); - grid-template-columns: var(--#{$progress}-stepper--GridTemplateColumns); + grid-template-rows: var(--#{$progress-stepper}--GridTemplateRows); + grid-template-columns: var(--#{$progress-stepper}--GridTemplateColumns); grid-auto-columns: 1fr; // gives even spacing between steps - grid-auto-flow: var(--#{$progress}-stepper--GridAutoFlow); + grid-auto-flow: var(--#{$progress-stepper}--GridAutoFlow); // Progress stepper Modifiers &.pf-m-center { - --#{$progress}-stepper__step-connector--JustifyContent: var(--#{$progress}-stepper--m-center__step-connector--JustifyContent); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-center__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-center__step-main--MarginLeft); - --#{$progress}-stepper--step-main--TextAlign: var(--#{$progress}-stepper--m-center__step-main--TextAlign, auto); - --#{$progress}-stepper__step-title--TextAlign: var(--#{$progress}-stepper--m-center__step-title--TextAlign, auto); - --#{$progress}-stepper__step-description--MarginRight: var(--#{$progress}-stepper--m-center__step-description--MarginRight); - --#{$progress}-stepper__step-description--MarginLeft: var(--#{$progress}-stepper--m-center__step-description--MarginLeft); - --#{$progress}-stepper__step-description--TextAlign: var(--#{$progress}-stepper--m-center__step-description--TextAlign, auto); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical--m-center__step-main--MarginRight); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical--m-center__step-main--MarginLeft); - - grid-template-columns: var(--#{$progress}-stepper--m-center--GridTemplateColumns); - - .#{$progress}-stepper__step-main { + --#{$progress-stepper}__step-connector--JustifyContent: var(--#{$progress-stepper}--m-center__step-connector--JustifyContent); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-center__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-center__step-main--MarginLeft); + --#{$progress-stepper}--step-main--TextAlign: var(--#{$progress-stepper}--m-center__step-main--TextAlign, auto); + --#{$progress-stepper}__step-title--TextAlign: var(--#{$progress-stepper}--m-center__step-title--TextAlign, auto); + --#{$progress-stepper}__step-description--MarginRight: var(--#{$progress-stepper}--m-center__step-description--MarginRight); + --#{$progress-stepper}__step-description--MarginLeft: var(--#{$progress-stepper}--m-center__step-description--MarginLeft); + --#{$progress-stepper}__step-description--TextAlign: var(--#{$progress-stepper}--m-center__step-description--TextAlign, auto); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-center__step-main--MarginLeft); + + grid-template-columns: var(--#{$progress-stepper}--m-center--GridTemplateColumns); + + .#{$progress-stepper}__step-main { position: relative; } - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-connector::before { - left: var(--#{$progress}-stepper--m-center__step-connector--before--Left); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before { + left: var(--#{$progress-stepper}--m-center__step-connector--before--Left); } // If not compact variant, swap borders from connector to main &:not(.pf-m-compact) { - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-main::before { - content: var(--#{$progress}-stepper--m-center__step-main--before--Content); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-main::before { + content: var(--#{$progress-stepper}--m-center__step-main--before--Content); } - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-connector::before { - content: var(--#{$progress}-stepper--m-center__step-connector--before--Content); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before { + content: var(--#{$progress-stepper}--m-center__step-connector--before--Content); } } } &.pf-m-compact { - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-compact__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-compact__step-main--MarginBottom); - --#{$progress}-stepper__step-icon--Width: var(--#{$progress}-stepper--m-compact__step-icon--Width); - --#{$progress}-stepper__step-icon--FontSize: var(--#{$progress}-stepper--m-compact__step-icon--FontSize); - --#{$progress}-stepper__step-title--FontSize: var(--#{$progress}-stepper--m-compact__step-title--FontSize); - --#{$progress}-stepper__step--m-current__step-title--FontWeight: var(--#{$progress}-stepper--m-compact__step-title--FontWeight); - --#{$progress}-stepper__pficon--MarginTop: var(--#{$progress}-stepper--m-compact__pficon--MarginTop); - --#{$progress}-stepper__fa-exclamation-triangle--MarginTop: var(--#{$progress}-stepper--m-compact__fa-exclamation-triangle--MarginTop); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical--m-compact__step-main--MarginLeft); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical--m-compact__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-compact__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom); + --#{$progress-stepper}__step-icon--Width: var(--#{$progress-stepper}--m-compact__step-icon--Width); + --#{$progress-stepper}__step-icon--FontSize: var(--#{$progress-stepper}--m-compact__step-icon--FontSize); + --#{$progress-stepper}__step-title--FontSize: var(--#{$progress-stepper}--m-compact__step-title--FontSize); + --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$progress-stepper}--m-compact__step-title--FontWeight); + --#{$progress-stepper}__pficon--MarginTop: var(--#{$progress-stepper}--m-compact__pficon--MarginTop); + --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: var(--#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight); display: inline-grid; - grid-template-columns: var(--#{$progress}-stepper--m-compact--GridTemplateColumns); - grid-auto-flow: var(--#{$progress}-stepper--m-compact--GridAutoFlow); + grid-template-columns: var(--#{$progress-stepper}--m-compact--GridTemplateColumns); + grid-auto-flow: var(--#{$progress-stepper}--m-compact--GridAutoFlow); - .#{$progress}-stepper__step-connector { - grid-row: var(--#{$progress}-stepper--m-compact__step-connector--GridRow); - min-width: var(--#{$progress}-stepper--m-compact__step-connector--MinWidth); - padding-bottom: var(--#{$progress}-stepper--m-compact__step-connector--PaddingBottom); + .#{$progress-stepper}__step-connector { + grid-row: var(--#{$progress-stepper}--m-compact__step-connector--GridRow); + min-width: var(--#{$progress-stepper}--m-compact__step-connector--MinWidth); + padding-bottom: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom); } - .#{$progress}-stepper__step-main { - margin-bottom: var(--#{$progress}-stepper--m-compact__step-main--MarginBottom); + .#{$progress-stepper}__step-main { + margin-bottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom); } - .#{$progress}-stepper__step:not(.pf-m-current) .#{$progress}-stepper__step-main { + .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main { @include pf-v5-u-screen-reader; } // For this compact variant only, move the main content for the current step to above the icons // stylelint-disable - .#{$progress}-stepper__step.pf-m-current .#{$progress}-stepper__step-main { + .#{$progress-stepper}__step.pf-m-current .#{$progress-stepper}__step-main { grid-column: 1/-1; grid-row: 1/2; } // stylelint-enable - .#{$progress}-stepper__step-description { + .#{$progress-stepper}__step-description { display: none; } } } // Step -.#{$progress}-stepper__step { +.#{$progress-stepper}__step { display: contents; // Step Modifiers &.pf-m-current { - --#{$progress}-stepper__step-title--FontWeight: var(--#{$progress}-stepper__step--m-current__step-title--FontWeight); - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-current__step-title--Color); + --#{$progress-stepper}__step-title--FontWeight: var(--#{$progress-stepper}__step--m-current__step-title--FontWeight); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-current__step-title--Color); } &.pf-m-pending { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-pending__step-title--Color); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-pending__step-title--Color); } &.pf-m-success { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--success-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--success-color--100); } &.pf-m-danger { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--danger-color--100); - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-danger__step-title--Color); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-danger__step-title--Color); // Help text variables for failure state - --#{$progress}-stepper__step-title--m-help-text--hover--Color: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--Color); - --#{$progress}-stepper__step-title--m-help-text--focus--Color: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor); - --#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor); - --#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color); + --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor); } &.pf-m-warning { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--warning-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--warning-color--100); } &.pf-m-info { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--info-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--info-color--100); } &:last-child { - --#{$progress}-stepper__step-main--MarginBottom: 0; + --#{$progress-stepper}__step-main--MarginBottom: 0; } } // The step icon wrapper provides a container on which to use the before for the line connecting the steps -.#{$progress}-stepper__step-connector { +.#{$progress-stepper}__step-connector { position: relative; display: flex; - justify-content: var(--#{$progress}-stepper__step-connector--JustifyContent); + justify-content: var(--#{$progress-stepper}__step-connector--JustifyContent); width: 100%; - .#{$progress}-stepper__step:not(:last-of-type) > &::before { + .#{$progress-stepper}__step:not(:last-of-type) > &::before { position: absolute; - top: var(--#{$progress}-stepper__step-connector--before--Top); // half the height - left: var(--#{$progress}-stepper__step-connector--before--Left); - width: var(--#{$progress}-stepper__step-connector--before--Width); - height: var(--#{$progress}-stepper__step-connector--before--Height); + top: var(--#{$progress-stepper}__step-connector--before--Top); // half the height + left: var(--#{$progress-stepper}__step-connector--before--Left); + width: var(--#{$progress-stepper}__step-connector--before--Width); + height: var(--#{$progress-stepper}__step-connector--before--Height); content: ""; - border-right: var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderRightColor); - border-bottom: var(--#{$progress}-stepper__step-connector--before--BorderBottomWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderBottomColor); - transform: var(--#{$progress}-stepper__step-connector--before--Transform); + border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor); + border-bottom: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor); + transform: var(--#{$progress-stepper}__step-connector--before--Transform); } } // Step icon -.#{$progress}-stepper__step-icon { - z-index: var(--#{$progress}-stepper__step-icon--ZIndex); +.#{$progress-stepper}__step-icon { + z-index: var(--#{$progress-stepper}__step-icon--ZIndex); display: flex; align-items: center; justify-content: center; - width: var(--#{$progress}-stepper__step-icon--Width); - height: var(--#{$progress}-stepper__step-icon--Height); - font-size: var(--#{$progress}-stepper__step-icon--FontSize); - color: var(--#{$progress}-stepper__step-icon--Color); - background-color: var(--#{$progress}-stepper__step-icon--BackgroundColor); - border: var(--#{$progress}-stepper__step-icon--BorderWidth) solid var(--#{$progress}-stepper__step-icon--BorderColor); + width: var(--#{$progress-stepper}__step-icon--Width); + height: var(--#{$progress-stepper}__step-icon--Height); + font-size: var(--#{$progress-stepper}__step-icon--FontSize); + color: var(--#{$progress-stepper}__step-icon--Color); + background-color: var(--#{$progress-stepper}__step-icon--BackgroundColor); + border: var(--#{$progress-stepper}__step-icon--BorderWidth) solid var(--#{$progress-stepper}__step-icon--BorderColor); border-radius: 50%; // Align pficons with the font awesome icons // stylelint-disable .pf-v5-pficon { - margin-top: var(--#{$progress}-stepper__pficon--MarginTop); + margin-top: var(--#{$progress-stepper}__pficon--MarginTop); } // Push the triangle up to fit inside the circle .fa-exclamation-triangle { - margin-top: var(--#{$progress}-stepper__fa-exclamation-triangle--MarginTop); + margin-top: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop); } // stylelint-enable } // Step main -.#{$progress}-stepper__step-main { +.#{$progress-stepper}__step-main { min-width: 0; - margin: var(--#{$progress}-stepper__step-main--MarginTop) var(--#{$progress}-stepper__step-main--MarginRight) var(--#{$progress}-stepper__step-main--MarginBottom) var(--#{$progress}-stepper__step-main--MarginLeft); - text-align: var(--#{$progress}-stepper--step-main--TextAlign, auto); + margin: var(--#{$progress-stepper}__step-main--MarginTop) var(--#{$progress-stepper}__step-main--MarginRight) var(--#{$progress-stepper}__step-main--MarginBottom) var(--#{$progress-stepper}__step-main--MarginLeft); + text-align: var(--#{$progress-stepper}--step-main--TextAlign, auto); overflow-wrap: anywhere; // Draw a new border for vertical alignment using step main - .#{$progress}-stepper__step:not(:last-of-type) > &::before { + .#{$progress-stepper}__step:not(:last-of-type) > &::before { position: absolute; - top: calc(100% + var(--#{$progress}-stepper__step-main--MarginTop)); - left: calc(50% - calc(var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) / 2)); + top: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop)); + left: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2)); width: auto; - height: calc(var(--#{$progress}-stepper__step-main--MarginTop) + var(--#{$progress}-stepper__step-main--MarginBottom)); - border-right: var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderRightColor); + height: calc(var(--#{$progress-stepper}__step-main--MarginTop) + var(--#{$progress-stepper}__step-main--MarginBottom)); + border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor); } } // Step title -.#{$progress}-stepper__step-title { - font-size: var(--#{$progress}-stepper__step-title--FontSize); - font-weight: var(--#{$progress}-stepper__step-title--FontWeight); - color: var(--#{$progress}-stepper__step-title--Color); - text-align: var(--#{$progress}-stepper__step-title--TextAlign); +<<<<<<< HEAD +.#{$progress-stepper}__step-title { + font-size: var(--#{$progress-stepper}__step-title--FontSize); + font-weight: var(--#{$progress-stepper}__step-title--FontWeight); + color: var(--#{$progress-stepper}__step-title--Color); + text-align: var(--#{$progress-stepper}__step-title--TextAlign); +======= +.#{$progress}__step-title { + font-size: var(--#{$progress}__step-title--FontSize); + font-weight: var(--#{$progress}__step-title--FontWeight); + color: var(--#{$progress}__step-title--Color); + text-align: var(--#{$progress}__step-title--TextAlign); + background:none; +>>>>>>> 27ae2e7d (chore(theme): updates) border: 0; &.pf-m-help-text { text-decoration: underline; - text-decoration-thickness: var(--#{$progress}-stepper__step-title--m-help-text--TextDecorationThickness); + text-decoration-thickness: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness); text-decoration-style: dashed; - text-decoration-color: var(--#{$progress}-stepper__step-title--m-help-text--TextDecorationColor); - text-underline-offset: var(--#{$progress}-stepper__step-title--m-help-text--TextUnderlineOffset); + text-decoration-color: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationColor); + text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset); cursor: pointer; &:hover { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step-title--m-help-text--hover--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor); } &:focus { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step-title--m-help-text--focus--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--focus--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor); } } } // Step description -.#{$progress}-stepper__step-description { - margin-top: var(--#{$progress}-stepper__step-description--MarginTop); - font-size: var(--#{$progress}-stepper__step-description--FontSize); - color: var(--#{$progress}-stepper__step-description--Color); - text-align: var(--#{$progress}-stepper__step-description--TextAlign); +.#{$progress-stepper}__step-description { + margin-top: var(--#{$progress-stepper}__step-description--MarginTop); + font-size: var(--#{$progress-stepper}__step-description--FontSize); + color: var(--#{$progress-stepper}__step-description--Color); + text-align: var(--#{$progress-stepper}__step-description--TextAlign); } // stylelint-disable no-duplicate-selectors -.#{$progress}-stepper { +.#{$progress-stepper} { @each $breakpoint, $breakpoint-value in $pf-v5-c-progress-stepper--breakpoint-map { $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, ""); From 444c3a2267e4fb4a8e58976d01b56a1bf5c0c6d4 Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 5 May 2023 17:42:42 -0500 Subject: [PATCH 3/6] chore(theme): updates --- .../base/themes/dark/_variables.scss | 2 + .../components/Alert/themes/dark/alert.scss | 12 ++--- .../components/Badge/themes/dark/badge.scss | 3 +- src/patternfly/components/Banner/banner.scss | 10 ++-- .../components/Banner/themes/dark/banner.scss | 4 +- .../components/Button/themes/dark/button.scss | 5 +- .../themes/dark/calendar-month.scss | 2 + .../components/DragDrop/drag-drop.scss | 53 +++++++++++++------ .../DragDrop/themes/dark/drag-drop.scss | 7 +++ .../Dropdown/themes/dark/dropdown.scss | 4 +- .../themes/dark/dual-list-selector.scss | 1 - .../FormControl/themes/dark/form-control.scss | 2 +- .../components/MenuToggle/menu-toggle.scss | 4 +- src/patternfly/components/Nav/nav.scss | 2 +- .../themes/dark/notification-badge.scss | 1 + .../ToggleGroup/themes/dark/toggle-group.scss | 1 + .../components/ToggleGroup/toggle-group.scss | 2 + src/patternfly/sass-utilities/mixins.scss | 4 +- .../themes/dark/scss-variables.scss | 4 +- 19 files changed, 82 insertions(+), 41 deletions(-) create mode 100644 src/patternfly/components/DragDrop/themes/dark/drag-drop.scss diff --git a/src/patternfly/base/themes/dark/_variables.scss b/src/patternfly/base/themes/dark/_variables.scss index e5fdbb9379..181766b61f 100644 --- a/src/patternfly/base/themes/dark/_variables.scss +++ b/src/patternfly/base/themes/dark/_variables.scss @@ -33,6 +33,8 @@ --#{$pf-global}--active-color--100: #{$pf-v5-global--active-color--100}; --#{$pf-global}--primary-color--100: #{$pf-v5-global--primary-color--100}; --#{$pf-global}--primary-color--300: #{$pf-v5-global--primary-color--300}; + --#{$pf-global}--primary-color--400: #{$pf-v5-global--primary-color--400}; + --#{$pf-global}--custom-color--200: #{$pf-v5-global--custom-color--200}; --#{$pf-global}--success-color--100: #{$pf-v5-global--success-color--100}; --#{$pf-global}--warning-color--100: #{$pf-v5-global--warning-color--100}; --#{$pf-global}--warning-color--200: #{$pf-v5-global--warning-color--200}; diff --git a/src/patternfly/components/Alert/themes/dark/alert.scss b/src/patternfly/components/Alert/themes/dark/alert.scss index 8c29764664..6a90f5d5a8 100644 --- a/src/patternfly/components/Alert/themes/dark/alert.scss +++ b/src/patternfly/components/Alert/themes/dark/alert.scss @@ -2,16 +2,16 @@ @mixin pf-v5-theme-dark-alert() { .#{$alert} { - --#{$alert}--BackgroundColor: var(--#{$pf-global}--palette--black-600); + --#{$alert}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$alert}--m-custom__title--Color: var(--#{$pf-global}--custom-color--200); --#{$alert}--m-success__title--Color: var(--#{$pf-global}--success-color--100); --#{$alert}--m-danger__title--Color: var(--#{$pf-global}--danger-color--100); --#{$alert}--m-warning__title--Color: var(--#{$pf-global}--warning-color--100); --#{$alert}--m-info__title--Color: var(--#{$pf-global}--info-color--100); - --#{$alert}--m-inline--m-custom--BackgroundColor: var(--#{$pf-global}--palette--black-600); - --#{$alert}--m-inline--m-success--BackgroundColor: var(--#{$pf-global}--palette--black-600); - --#{$alert}--m-inline--m-danger--BackgroundColor: var(--#{$pf-global}--palette--black-600); - --#{$alert}--m-inline--m-warning--BackgroundColor: var(--#{$pf-global}--palette--black-600); - --#{$alert}--m-inline--m-info--BackgroundColor: var(--#{$pf-global}--palette--black-600); + --#{$alert}--m-inline--m-custom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$alert}--m-inline--m-success--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$alert}--m-inline--m-danger--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$alert}--m-inline--m-warning--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$alert}--m-inline--m-info--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); } } diff --git a/src/patternfly/components/Badge/themes/dark/badge.scss b/src/patternfly/components/Badge/themes/dark/badge.scss index ca8046c606..5f54e9089f 100644 --- a/src/patternfly/components/Badge/themes/dark/badge.scss +++ b/src/patternfly/components/Badge/themes/dark/badge.scss @@ -1,8 +1,9 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-v5-theme-dark-badge() { +@mixin pf-theme-dark-badge() { .#{$badge} { --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--palette--black-500); + --#{$badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400); --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--300); } } diff --git a/src/patternfly/components/Banner/banner.scss b/src/patternfly/components/Banner/banner.scss index 438adb75d7..48a07962b9 100644 --- a/src/patternfly/components/Banner/banner.scss +++ b/src/patternfly/components/Banner/banner.scss @@ -26,9 +26,9 @@ // modifier variables --#{$banner}--m-blue--BackgroundColor: var(--#{$pf-global}--palette--blue-200); - --#{$banner}--m-red--BackgroundColor: var(--#{$pf-global}--palette--red-100); - --#{$banner}--m-green--BackgroundColor: var(--#{$pf-global}--palette--green-500); - --#{$banner}--m-gold--BackgroundColor: var(--#{$pf-global}--palette--gold-400); + --#{$banner}--m-red--BackgroundColor: var(--#{$pf-global}--danger-color--100); + --#{$banner}--m-green--BackgroundColor: var(--#{$pf-global}--success-color--100); + --#{$banner}--m-gold--BackgroundColor: var(--#{$pf-global}--warning-color--100); --#{$banner}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--md); --#{$banner}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom); @@ -43,7 +43,7 @@ background-color: var(--#{$banner}--BackgroundColor); &.pf-m-blue { - @include pf-v5-t-light; + @include pf-v5-t-light(false); --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor); } @@ -57,7 +57,7 @@ } &.pf-m-gold { - @include pf-v5-t-light; + @include pf-v5-t-light(false); --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor); } diff --git a/src/patternfly/components/Banner/themes/dark/banner.scss b/src/patternfly/components/Banner/themes/dark/banner.scss index 55652c4704..08db3a0085 100644 --- a/src/patternfly/components/Banner/themes/dark/banner.scss +++ b/src/patternfly/components/Banner/themes/dark/banner.scss @@ -6,9 +6,9 @@ &.pf-m-red, &.pf-m-green, &.pf-m-gold { - color: var(--#{$pf-global}--palette--black-900); + --#{$banner}--Color: var(--#{$pf-global}--palette--black-900); } - @include pf-v5-theme-dark--t-dark; + @include pf-v5-theme-dark--t-dark(false); } } diff --git a/src/patternfly/components/Button/themes/dark/button.scss b/src/patternfly/components/Button/themes/dark/button.scss index c64bf00ded..3ced21822f 100644 --- a/src/patternfly/components/Button/themes/dark/button.scss +++ b/src/patternfly/components/Button/themes/dark/button.scss @@ -3,9 +3,10 @@ @mixin pf-v5-theme-dark-button() { .#{$button} { --#{$button}--disabled--Color: var(--#{$pf-global}--disabled-color--300); - --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); // should blue-400 be a primary-color? + --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$button}--m-primary--Color: var(--#{$pf-global}--primary-color--400); --#{$button}--m-tertiary--after--BorderColor: var(--#{$pf-global}--BorderColor--100); - --#{$button}--m-tertiary--Color: var(--#{$pf-global}--palette--black-100); // global variable for this? + --#{$button}--m-tertiary--Color: var(--#{$pf-global}--palette--black-100); --#{$button}--m-tertiary--hover--after--BorderColor: var(--#{$pf-global}--BorderColor--100); --#{$button}--m-tertiary--hover--Color: var(--#{$pf-global}--palette--black-100); --#{$button}--m-tertiary--focus--after--BorderColor: var(--#{$pf-global}--BorderColor--100); diff --git a/src/patternfly/components/CalendarMonth/themes/dark/calendar-month.scss b/src/patternfly/components/CalendarMonth/themes/dark/calendar-month.scss index ed3388684b..ec4bde4867 100644 --- a/src/patternfly/components/CalendarMonth/themes/dark/calendar-month.scss +++ b/src/patternfly/components/CalendarMonth/themes/dark/calendar-month.scss @@ -4,6 +4,7 @@ .#{$calendar-month} { --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--#{$pf-global}--palette--black-500); --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--#{$pf-global}--primary-color--400); --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--#{$pf-global}--palette--black-900); --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-400); --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200); @@ -26,6 +27,7 @@ --#{$calendar-month}__date--after--BorderColor: var(--#{$pf-global}--active-color--100); --#{$calendar-month}__date--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); --#{$calendar-month}__date--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$calendar-month}__date--Color: var(--#{$pf-global}--primary-color--400); } } } diff --git a/src/patternfly/components/DragDrop/drag-drop.scss b/src/patternfly/components/DragDrop/drag-drop.scss index 709016e6db..7931b69cbd 100644 --- a/src/patternfly/components/DragDrop/drag-drop.scss +++ b/src/patternfly/components/DragDrop/drag-drop.scss @@ -36,34 +36,53 @@ } .#{$droppable} { - $pf-v5-global--BackgroundColor--100: #fff; - $pf-v5-c-droppable--m-dragging--after--BackgroundColor: rgba($pf-v5-global--BackgroundColor--100, .6); - - --#{$droppable}--m-dragging--after--BackgroundColor: #{$pf-v5-c-droppable--m-dragging--after--BackgroundColor}; // allows for rbga() so we can combine background and border in single element + --#{$droppable}--before--BackgroundColor: transparent; + --#{$droppable}--before--Opacity: 0; + --#{$droppable}--after--BorderWidth: 0; + --#{$droppable}--after--BorderColor: transparent; + --#{$droppable}--m-dragging--before--BackgroundColor: var(--#{$pf-global}--palette--white); + --#{$droppable}--m-dragging--before--Opacity: .6; --#{$droppable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); --#{$droppable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100); --#{$droppable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100); - &.pf-m-dragging { - position: relative; + &::before, + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + content: ""; + } - &::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ""; - } + &::before { + background-color: var(-#{$droppable}--before--BackgroundColor); + opacity: var(-#{$droppable}--before--Opacity); } &::after { - background-color: var(--#{$droppable}--m-dragging--after--BackgroundColor); - border: var(--#{$droppable}--m-dragging--after--BorderWidth) solid var(--#{$droppable}--m-dragging--after--BorderColor); + border: var(-#{$droppable}--after--BorderWidth, 0) solid var(-#{$droppable}--after--BorderColor, transparent); + } + + &.pf-m-dragging { + --#{$droppable}--before--BackgroundColor: var(-#{$droppable}--m-dragging--before--BackgroundColor); + --#{$droppable}--before--Opacity: var(-#{$droppable}--m-dragging--before--Opacity); + --#{$droppable}--after--BorderWidth: var(-#{$droppable}--m-dragging--after--BorderWidth); + --#{$droppable}--after--BorderColor: var(-#{$droppable}--m-dragging--after--BorderColor); + + position: relative; } &.pf-m-drag-outside { --#{$droppable}--m-dragging--after--BorderColor: var(--#{$droppable}--m-drag-outside--after--BorderColor); } } + +// stylelint-disable no-invalid-position-at-import-rule +@import "themes/dark/drag-drop"; + +@include pf-theme-dark { + @include pf-theme-dark-drag-drop; +} diff --git a/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss b/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss new file mode 100644 index 0000000000..188f21aeb9 --- /dev/null +++ b/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss @@ -0,0 +1,7 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-theme-dark-drag-drop() { + .pf-c-droppable { + --pf-c-droppable--m-dragging--before--Opacity: .2; + } +} diff --git a/src/patternfly/components/Dropdown/themes/dark/dropdown.scss b/src/patternfly/components/Dropdown/themes/dark/dropdown.scss index 3242eb8a28..d7f00ee9e0 100644 --- a/src/patternfly/components/Dropdown/themes/dark/dropdown.scss +++ b/src/patternfly/components/Dropdown/themes/dark/dropdown.scss @@ -1,6 +1,6 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-v5-theme-dark-dropdown() { +@mixin pf-theme-dark-dropdown() { .#{$dropdown} { --#{$dropdown}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$dropdown}__toggle--before--BorderTopColor: transparent; @@ -8,7 +8,9 @@ --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); --#{$dropdown}__toggle--before--BorderLeftColor: transparent; --#{$dropdown}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500); + --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300); --#{$dropdown}__toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$dropdown}__toggle--m-primary--Color: var(--#{$pf-global}--primary-color--400); --#{$dropdown}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$dropdown}__menu--Top: 100%; --#{$dropdown}--m-top__menu--TranslateY: -100%; diff --git a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss index 8724e94e3f..5c8969f30b 100644 --- a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss +++ b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss @@ -5,6 +5,5 @@ --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-global--BackgroundColor--400); --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400); --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--400); - --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--300); } } diff --git a/src/patternfly/components/FormControl/themes/dark/form-control.scss b/src/patternfly/components/FormControl/themes/dark/form-control.scss index ac96895350..83aaef5d9d 100644 --- a/src/patternfly/components/FormControl/themes/dark/form-control.scss +++ b/src/patternfly/components/FormControl/themes/dark/form-control.scss @@ -8,7 +8,7 @@ --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); --#{$form-control}--BorderLeftColor: transparent; --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$form-control}--disabled--Color: var(--#{$pf-global}--palette--black-300); + --#{$form-control}--disabled--Color: var(--#{$pf-global}--disabled-color--300); --#{$form-control}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); --#{$form-control}--readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200); diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss index 38f83345f2..16a9e7f5e9 100644 --- a/src/patternfly/components/MenuToggle/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/menu-toggle.scss @@ -120,7 +120,7 @@ // Split button, child --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); - --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--Color--dark-200); + --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300); --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm); --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0; @@ -360,7 +360,7 @@ } > .#{$check} { - --pf-c-menu-toggle--PaddingRight: 0; + --#{$menu-toggle}--PaddingRight: 0; --pf-c-check__input--MarginTop: 0; --pf-c-check__label--Color: currentcolor; --pf-c-check__label--disabled--Color: currentcolor; diff --git a/src/patternfly/components/Nav/nav.scss b/src/patternfly/components/Nav/nav.scss index 6c610f50fd..9842e05fa9 100644 --- a/src/patternfly/components/Nav/nav.scss +++ b/src/patternfly/components/Nav/nav.scss @@ -91,7 +91,7 @@ --#{$nav}--m-horizontal__link--lg--PaddingBottom: var(--#{$pf-global}--spacer--lg); --#{$nav}--m-horizontal__link--Right: var(--#{$pf-global}--spacer--md); --#{$nav}--m-horizontal__link--Left: var(--#{$pf-global}--spacer--md); - --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-300); + --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-200); --#{$nav}--m-horizontal__link--hover--Color: var(--#{$pf-global}--active-color--400); --#{$nav}--m-horizontal__link--focus--Color: var(--#{$pf-global}--active-color--400); --#{$nav}--m-horizontal__link--active--Color: var(--#{$pf-global}--active-color--400); diff --git a/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss b/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss index 36b58a879a..0159793b66 100644 --- a/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss +++ b/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss @@ -3,6 +3,7 @@ @mixin pf-v5-theme-dark-notification-badge() { .#{$notification-badge} { --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400); --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300); --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900); } diff --git a/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss b/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss index 3c73eb5d26..36819b4365 100644 --- a/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss +++ b/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss @@ -7,5 +7,6 @@ --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600); --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100); --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400); } } diff --git a/src/patternfly/components/ToggleGroup/toggle-group.scss b/src/patternfly/components/ToggleGroup/toggle-group.scss index fd40aa2eee..8b8f420403 100644 --- a/src/patternfly/components/ToggleGroup/toggle-group.scss +++ b/src/patternfly/components/ToggleGroup/toggle-group.scss @@ -34,6 +34,7 @@ // Selected --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50); + --#{$toggle-group}__button--m-selected--Color: initial; --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100); --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs); @@ -119,6 +120,7 @@ &.pf-m-selected { --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor); + --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit); --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex); --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor); } diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss index fe9da2463d..a5a766075e 100644 --- a/src/patternfly/sass-utilities/mixins.scss +++ b/src/patternfly/sass-utilities/mixins.scss @@ -168,7 +168,9 @@ } @mixin pf-v5-t-light($color: "--#{$pf-global}--Color--100") { - color: var(#{$color}); + @if $color { + color: var(#{$color}); + } @extend %pf-v5-t-light; } diff --git a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss index 748b6c757f..eb0c426b01 100644 --- a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss +++ b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss @@ -15,6 +15,8 @@ $pf-v5-global--Color--200: $pf-v5-color-black-200; // secondary text color $pf-v5-global--active-color--100: $pf-v5-color-blue-300; $pf-v5-global--primary-color--100: $pf-v5-color-blue-300; // primary blue against dark background - background, text, etc $pf-v5-global--primary-color--300: $pf-v5-color-blue-400; // primary blue with white text on top for contrast +$pf-v5-global--primary-color--400: $pf-v5-color-white; // text color on top of primary--300 +$pf-v5-global--custom-color--200: $pf-v5-color-cyan-200; $pf-v5-global--success-color--100: $pf-v5-color-green-400; $pf-v5-global--warning-color--100: $pf-v5-color-gold-400; $pf-v5-global--warning-color--200: $pf-v5-color-gold-300; @@ -23,7 +25,7 @@ $pf-v5-global--danger-color--200: $pf-v5-color-red-8888; $pf-v5-global--link--Color: $pf-v5-color-blue-300; $pf-v5-global--link--Color--hover: $pf-v5-color-blue-200; $pf-v5-global--link--Color--visited: $pf-v5-color-purple-300; -$pf-v5-global--disabled-color--100: $pf-v5-color-black-400; // disabled text on regular background color - this doesn't have enough contrast in most cases +$pf-v5-global--disabled-color--100: $pf-v5-color-black-300; // disabled text on regular background color $pf-v5-global--disabled-color--200: $pf-v5-color-black-500; // disabled background color $pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled or floating background color - except form elements From a26823dc1fda61f5b457d2369aa712a3938447df Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 5 May 2023 18:46:51 -0500 Subject: [PATCH 4/6] chore(theme): updates --- src/patternfly/components/Button/button.scss | 2 ++ .../components/Button/themes/dark/button.scss | 1 + .../InputGroup/input-group-item.hbs | 1 + .../InputGroup/input-group-text.hbs | 2 +- .../InputGroup/themes/dark/input-group.scss | 2 +- .../components/Menu/themes/dark/menu.scss | 1 - src/patternfly/components/Panel/panel.scss | 13 +++++++-- .../components/Panel/themes/dark/panel.scss | 7 +++++ .../components/Slider/examples/Slider.md | 28 ++++++++++--------- .../TextInputGroup/text-input-group.scss | 7 +++++ .../themes/dark/text-input-group.scss | 11 ++++++++ .../components/Wizard/themes/dark/wizard.scss | 2 -- src/patternfly/components/Wizard/wizard.scss | 4 +-- 13 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 src/patternfly/components/Panel/themes/dark/panel.scss create mode 100644 src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss index 51838c4253..cdfc120536 100644 --- a/src/patternfly/components/Button/button.scss +++ b/src/patternfly/components/Button/button.scss @@ -111,6 +111,7 @@ --#{$button}--m-link--active--BackgroundColor: transparent; --#{$button}--m-link--active--Color: var(--#{$pf-global}--link--Color--hover); --#{$button}--m-link--disabled--BackgroundColor: transparent; + --#{$button}--m-link--disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$button}--m-link--m-inline--FontSize: inherit; --#{$button}--m-link--m-inline--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover); --#{$button}--m-link--m-inline--hover--Color: var(--#{$pf-global}--link--Color--hover); @@ -352,6 +353,7 @@ // Link buttons &.pf-m-link { --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-link--disabled--BackgroundColor); + --#{$button}--disabled--Color: var(--#{$button}--m-link--disabled--Color); color: var(--#{$button}--m-link--Color); background-color: var(--#{$button}--m-link--BackgroundColor); diff --git a/src/patternfly/components/Button/themes/dark/button.scss b/src/patternfly/components/Button/themes/dark/button.scss index 3ced21822f..59e37c05f9 100644 --- a/src/patternfly/components/Button/themes/dark/button.scss +++ b/src/patternfly/components/Button/themes/dark/button.scss @@ -24,6 +24,7 @@ --#{$button}--m-danger--hover--Color: var(--#{$pf-global}--palette--black-900); --#{$button}--m-danger--focus--Color: var(--#{$pf-global}--palette--black-900); --#{$button}--m-danger--active--Color: var(--#{$pf-global}--palette--black-900); + --#{$button}--m-link--disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$button}--m-control--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$button}--m-control--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$button}--m-control--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); diff --git a/src/patternfly/components/InputGroup/input-group-item.hbs b/src/patternfly/components/InputGroup/input-group-item.hbs index 43223727c3..ee571c21ed 100644 --- a/src/patternfly/components/InputGroup/input-group-item.hbs +++ b/src/patternfly/components/InputGroup/input-group-item.hbs @@ -2,6 +2,7 @@ {{#if input-group-item--IsBox}} pf-m-box{{/if}} {{#if input-group-item--IsPlain}} pf-m-plain{{/if}} {{#if input-group-item--IsFill}} pf-m-fill{{/if}} + {{#if input-group-item--IsDisabled}} pf-m-disabled{{/if}} {{#if input-group-item--modifier}} {{input-group-item--modifier}}{{/if}}" {{#if input-group-item--attribute}} {{{input-group-item--attribute}}} diff --git a/src/patternfly/components/InputGroup/input-group-text.hbs b/src/patternfly/components/InputGroup/input-group-text.hbs index 201b39e547..3cb832780f 100644 --- a/src/patternfly/components/InputGroup/input-group-text.hbs +++ b/src/patternfly/components/InputGroup/input-group-text.hbs @@ -1,4 +1,4 @@ -<{{#if input-group-text--type}}{{input-group-text--type}}{{else}}span{{/if}} class="{{pfv}}input-group__text{{#if input-group-text--IsDisabled}} pf-m-disabled{{/if}}{{#if input-group-text--modifier}} {{input-group-text--modifier}}{{/if}}" +<{{#if input-group-text--type}}{{input-group-text--type}}{{else}}span{{/if}} class="{{pfv}}input-group__text{{#if input-group-text--modifier}} {{input-group-text--modifier}}{{/if}}" {{#if aria-label}} aria-label="{{aria-label}}" {{/if}} diff --git a/src/patternfly/components/InputGroup/themes/dark/input-group.scss b/src/patternfly/components/InputGroup/themes/dark/input-group.scss index 811ecdbe54..a9f0707900 100644 --- a/src/patternfly/components/InputGroup/themes/dark/input-group.scss +++ b/src/patternfly/components/InputGroup/themes/dark/input-group.scss @@ -11,7 +11,7 @@ --#{$input-group}__item--m-box--BorderLeftColor: transparent; --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); --#{$input-group}__item--m-disabled--BorderBottomColor: transparent; - --#{$input-group}__text--m-disabled--Color: var(--#{$pf-global}--palette--black-100); + --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300); > * + * { --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor); diff --git a/src/patternfly/components/Menu/themes/dark/menu.scss b/src/patternfly/components/Menu/themes/dark/menu.scss index 5836923070..420ad381ea 100644 --- a/src/patternfly/components/Menu/themes/dark/menu.scss +++ b/src/patternfly/components/Menu/themes/dark/menu.scss @@ -5,6 +5,5 @@ --#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--disabled-color--300); } } diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss index 2faf49cadc..5b337cd225 100644 --- a/src/patternfly/components/Panel/panel.scss +++ b/src/patternfly/components/Panel/panel.scss @@ -16,8 +16,9 @@ --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); // raised - --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md); - --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm); + --#{$panel}--m-raised--BoxShadow: var(#{$panel}--BoxShadow--md); + --#{$panel}--m-raised--ZIndex: var(#{$panel}--ZIndex--sm); + --#{$panel}--m-raised--BackgroundColor: var(#{$panel}--BackgroundColor--100); // header --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md); @@ -71,6 +72,7 @@ } &.pf-m-raised { + --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor); --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow); --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex); } @@ -99,3 +101,10 @@ padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft); box-shadow: var(--#{$panel}__footer--BoxShadow); } + +// stylelint-disable no-invalid-position-at-import-rule +@import "themes/dark/panel"; + +@include pf-theme-dark { + @include pf-theme-dark-panel; +} diff --git a/src/patternfly/components/Panel/themes/dark/panel.scss b/src/patternfly/components/Panel/themes/dark/panel.scss new file mode 100644 index 0000000000..f5189d7e7c --- /dev/null +++ b/src/patternfly/components/Panel/themes/dark/panel.scss @@ -0,0 +1,7 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-theme-dark-panel() { + .pf-c-panel { + --pf-c-panel--m-raised--BackgroundColor: var(--pf-global--BackgroundColor--300); + } +} diff --git a/src/patternfly/components/Slider/examples/Slider.md b/src/patternfly/components/Slider/examples/Slider.md index e8007a8656..3ddf355fff 100644 --- a/src/patternfly/components/Slider/examples/Slider.md +++ b/src/patternfly/components/Slider/examples/Slider.md @@ -114,7 +114,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -138,7 +138,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -158,12 +158,14 @@ cssPrefix: pf-v5-c-slider {{> slider-rail}} {{> slider-thumb}} {{#> slider-value slider-value--modifier="pf-m-floating"}} - {{#> input-group-item input-group-item--IsFill=true}} - {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} - {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%"}} - {{/input-group-item}} + {{#> input-group}} + {{#> input-group-item input-group-item--IsFill=true}} + {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} + {{/input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} + {{> input-group-text input-group-text--value="%"}} + {{/input-group-item}} + {{/input-group}} {{/slider-value}} {{/slider-main}} {{/slider}} @@ -209,8 +211,8 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'disabled type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%" input-group-text--IsDisabled="true"}} + {{#> input-group-item input-group-item--IsBox=true input-group-item--IsDisabled=true}} + {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} {{/slider-value}} @@ -238,7 +240,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -303,8 +305,8 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'disabled type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%" input-group-text--IsDisabled="true"}} + {{#> input-group-item input-group-item--IsBox=true input-group-item--IsDisabled=true}} + {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} {{/slider-value}} diff --git a/src/patternfly/components/TextInputGroup/text-input-group.scss b/src/patternfly/components/TextInputGroup/text-input-group.scss index 24934d2bcf..edb2af1333 100644 --- a/src/patternfly/components/TextInputGroup/text-input-group.scss +++ b/src/patternfly/components/TextInputGroup/text-input-group.scss @@ -188,3 +188,10 @@ .#{$text-input-group}__group { display: flex; } + +// stylelint-disable no-invalid-position-at-import-rule +@import "themes/dark/text-input-group"; + +@include pf-theme-dark { + @include pf-theme-dark-text-input-group; +} diff --git a/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss new file mode 100644 index 0000000000..68ff4a8586 --- /dev/null +++ b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss @@ -0,0 +1,11 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-theme-dark-text-input-group() { + .pf-c-text-input-group { + --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--400); + --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--300); + --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200); + --pf-c-text-input-group__text--before--BorderWidth: 0; + --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--400); + } +} diff --git a/src/patternfly/components/Wizard/themes/dark/wizard.scss b/src/patternfly/components/Wizard/themes/dark/wizard.scss index 86b1c5c4d1..dca07cb7b9 100644 --- a/src/patternfly/components/Wizard/themes/dark/wizard.scss +++ b/src/patternfly/components/Wizard/themes/dark/wizard.scss @@ -4,8 +4,6 @@ .#{$wizard} { --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000); --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--palette--black-500); - --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--300); - --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--300); } .#{$wizard}__header { diff --git a/src/patternfly/components/Wizard/wizard.scss b/src/patternfly/components/Wizard/wizard.scss index 7df3b23f1e..9d3b0333fd 100644 --- a/src/patternfly/components/Wizard/wizard.scss +++ b/src/patternfly/components/Wizard/wizard.scss @@ -57,7 +57,7 @@ --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color); --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color); --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change - --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--Color--dark-200); + --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change // Nav link toggle icon @@ -82,7 +82,7 @@ --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100); --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100); --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent; - --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--Color--dark-200); + --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100); // Toggle --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); From f24f85d8719713c3b7b36536fa41efe9988e94fc Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 11 May 2023 19:04:15 -0500 Subject: [PATCH 5/6] chore(theme): updates --- .../components/Badge/themes/dark/badge.scss | 2 +- .../components/DragDrop/drag-drop.scss | 18 +++++++++--------- .../DragDrop/themes/dark/drag-drop.scss | 6 +++--- .../Dropdown/themes/dark/dropdown.scss | 2 +- .../DualListSelector/dual-list-selector.scss | 4 ++-- .../themes/dark/dual-list-selector.scss | 10 +++++----- .../components/MenuToggle/menu-toggle.scss | 6 +++--- .../MenuToggle/themes/dark/menu-toggle.scss | 2 +- src/patternfly/components/Panel/panel.scss | 4 ++-- .../components/Panel/themes/dark/panel.scss | 6 +++--- .../ProgressStepper/progress-stepper.scss | 8 -------- .../TextInputGroup/text-input-group.scss | 4 ++-- .../themes/dark/text-input-group.scss | 14 +++++++------- 13 files changed, 39 insertions(+), 47 deletions(-) diff --git a/src/patternfly/components/Badge/themes/dark/badge.scss b/src/patternfly/components/Badge/themes/dark/badge.scss index 5f54e9089f..8772903ae0 100644 --- a/src/patternfly/components/Badge/themes/dark/badge.scss +++ b/src/patternfly/components/Badge/themes/dark/badge.scss @@ -1,6 +1,6 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-badge() { +@mixin pf-v5-theme-dark-badge() { .#{$badge} { --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--palette--black-500); --#{$badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400); diff --git a/src/patternfly/components/DragDrop/drag-drop.scss b/src/patternfly/components/DragDrop/drag-drop.scss index 7931b69cbd..7de6f5a1e2 100644 --- a/src/patternfly/components/DragDrop/drag-drop.scss +++ b/src/patternfly/components/DragDrop/drag-drop.scss @@ -58,19 +58,19 @@ } &::before { - background-color: var(-#{$droppable}--before--BackgroundColor); - opacity: var(-#{$droppable}--before--Opacity); + background-color: var(--#{$droppable}--before--BackgroundColor); + opacity: var(--#{$droppable}--before--Opacity); } &::after { - border: var(-#{$droppable}--after--BorderWidth, 0) solid var(-#{$droppable}--after--BorderColor, transparent); + border: var(--#{$droppable}--after--BorderWidth, 0) solid var(--#{$droppable}--after--BorderColor, transparent); } &.pf-m-dragging { - --#{$droppable}--before--BackgroundColor: var(-#{$droppable}--m-dragging--before--BackgroundColor); - --#{$droppable}--before--Opacity: var(-#{$droppable}--m-dragging--before--Opacity); - --#{$droppable}--after--BorderWidth: var(-#{$droppable}--m-dragging--after--BorderWidth); - --#{$droppable}--after--BorderColor: var(-#{$droppable}--m-dragging--after--BorderColor); + --#{$droppable}--before--BackgroundColor: var(--#{$droppable}--m-dragging--before--BackgroundColor); + --#{$droppable}--before--Opacity: var(--#{$droppable}--m-dragging--before--Opacity); + --#{$droppable}--after--BorderWidth: var(--#{$droppable}--m-dragging--after--BorderWidth); + --#{$droppable}--after--BorderColor: var(--#{$droppable}--m-dragging--after--BorderColor); position: relative; } @@ -83,6 +83,6 @@ // stylelint-disable no-invalid-position-at-import-rule @import "themes/dark/drag-drop"; -@include pf-theme-dark { - @include pf-theme-dark-drag-drop; +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-drag-drop; } diff --git a/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss b/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss index 188f21aeb9..5c9050bb25 100644 --- a/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss +++ b/src/patternfly/components/DragDrop/themes/dark/drag-drop.scss @@ -1,7 +1,7 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-drag-drop() { - .pf-c-droppable { - --pf-c-droppable--m-dragging--before--Opacity: .2; +@mixin pf-v5-theme-dark-drag-drop() { + .#{$droppable} { + --#{$droppable}--m-dragging--before--Opacity: .2; } } diff --git a/src/patternfly/components/Dropdown/themes/dark/dropdown.scss b/src/patternfly/components/Dropdown/themes/dark/dropdown.scss index d7f00ee9e0..6050d0c1c1 100644 --- a/src/patternfly/components/Dropdown/themes/dark/dropdown.scss +++ b/src/patternfly/components/Dropdown/themes/dark/dropdown.scss @@ -1,6 +1,6 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-dropdown() { +@mixin pf-v5-theme-dark-dropdown() { .#{$dropdown} { --#{$dropdown}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$dropdown}__toggle--before--BorderTopColor: transparent; diff --git a/src/patternfly/components/DualListSelector/dual-list-selector.scss b/src/patternfly/components/DualListSelector/dual-list-selector.scss index 9010c824bd..197bb13f80 100644 --- a/src/patternfly/components/DualListSelector/dual-list-selector.scss +++ b/src/patternfly/components/DualListSelector/dual-list-selector.scss @@ -336,6 +336,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10; // stylelint-disable no-invalid-position-at-import-rule @import "themes/dark/dual-list-selector"; -@include pf-theme-dark { - @include pf-theme-dark-dual-list-selector; +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-dual-list-selector; } diff --git a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss index 5c8969f30b..97b11910b5 100644 --- a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss +++ b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss @@ -1,9 +1,9 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-dual-list-selector() { - .pf-c-dual-list-selector { - --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-global--BackgroundColor--400); - --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400); - --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--400); +@mixin pf-v5-theme-dark-dual-list-selector() { + .#{$dual-list-selector} { + --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); } } diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss index 16a9e7f5e9..777986c9f1 100644 --- a/src/patternfly/components/MenuToggle/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/menu-toggle.scss @@ -361,9 +361,9 @@ > .#{$check} { --#{$menu-toggle}--PaddingRight: 0; - --pf-c-check__input--MarginTop: 0; - --pf-c-check__label--Color: currentcolor; - --pf-c-check__label--disabled--Color: currentcolor; + --#{$check}__input--MarginTop: 0; + --#{$check}__label--Color: currentcolor; + --#{$check}__label--disabled--Color: currentcolor; align-items: center; align-self: stretch; diff --git a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss index e397b20edc..29146cbade 100644 --- a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss @@ -1,6 +1,6 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-menu-toggle() { +@mixin pf-v5-theme-dark-menu-toggle() { .#{$menu-toggle} { --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss index 5b337cd225..4ff9353254 100644 --- a/src/patternfly/components/Panel/panel.scss +++ b/src/patternfly/components/Panel/panel.scss @@ -105,6 +105,6 @@ // stylelint-disable no-invalid-position-at-import-rule @import "themes/dark/panel"; -@include pf-theme-dark { - @include pf-theme-dark-panel; +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-panel; } diff --git a/src/patternfly/components/Panel/themes/dark/panel.scss b/src/patternfly/components/Panel/themes/dark/panel.scss index f5189d7e7c..c5667bbd0f 100644 --- a/src/patternfly/components/Panel/themes/dark/panel.scss +++ b/src/patternfly/components/Panel/themes/dark/panel.scss @@ -1,7 +1,7 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-panel() { - .pf-c-panel { - --pf-c-panel--m-raised--BackgroundColor: var(--pf-global--BackgroundColor--300); +@mixin pf-v5-theme-dark-panel() { + .#{$panel} { + --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); } } diff --git a/src/patternfly/components/ProgressStepper/progress-stepper.scss b/src/patternfly/components/ProgressStepper/progress-stepper.scss index 621476f572..aebc0146c9 100644 --- a/src/patternfly/components/ProgressStepper/progress-stepper.scss +++ b/src/patternfly/components/ProgressStepper/progress-stepper.scss @@ -384,20 +384,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map(); } // Step title -<<<<<<< HEAD .#{$progress-stepper}__step-title { font-size: var(--#{$progress-stepper}__step-title--FontSize); font-weight: var(--#{$progress-stepper}__step-title--FontWeight); color: var(--#{$progress-stepper}__step-title--Color); text-align: var(--#{$progress-stepper}__step-title--TextAlign); -======= -.#{$progress}__step-title { - font-size: var(--#{$progress}__step-title--FontSize); - font-weight: var(--#{$progress}__step-title--FontWeight); - color: var(--#{$progress}__step-title--Color); - text-align: var(--#{$progress}__step-title--TextAlign); background:none; ->>>>>>> 27ae2e7d (chore(theme): updates) border: 0; &.pf-m-help-text { diff --git a/src/patternfly/components/TextInputGroup/text-input-group.scss b/src/patternfly/components/TextInputGroup/text-input-group.scss index edb2af1333..888418cd99 100644 --- a/src/patternfly/components/TextInputGroup/text-input-group.scss +++ b/src/patternfly/components/TextInputGroup/text-input-group.scss @@ -192,6 +192,6 @@ // stylelint-disable no-invalid-position-at-import-rule @import "themes/dark/text-input-group"; -@include pf-theme-dark { - @include pf-theme-dark-text-input-group; +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-text-input-group; } diff --git a/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss index 68ff4a8586..86b85b3a7b 100644 --- a/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss +++ b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss @@ -1,11 +1,11 @@ @import "../../../../sass-utilities/themes/dark/all"; -@mixin pf-theme-dark-text-input-group() { - .pf-c-text-input-group { - --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--400); - --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--300); - --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200); - --pf-c-text-input-group__text--before--BorderWidth: 0; - --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--400); +@mixin pf-v5-theme-dark-text-input-group() { + .#{$text-input-group} { + --#{$text-input-group}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$text-input-group}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$text-input-group}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$text-input-group}__text--before--BorderWidth: 0; + --#{$text-input-group}__text--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); } } From f7e86dd4fc55f78cc77cb1bddcc431ff4ac809d8 Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 11 May 2023 19:24:51 -0500 Subject: [PATCH 6/6] chore(theme): cleanup --- src/patternfly/components/Panel/panel.scss | 6 +++--- .../components/TextInputGroup/examples/TextInputGroup.css | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss index 4ff9353254..9f61715342 100644 --- a/src/patternfly/components/Panel/panel.scss +++ b/src/patternfly/components/Panel/panel.scss @@ -16,9 +16,9 @@ --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); // raised - --#{$panel}--m-raised--BoxShadow: var(#{$panel}--BoxShadow--md); - --#{$panel}--m-raised--ZIndex: var(#{$panel}--ZIndex--sm); - --#{$panel}--m-raised--BackgroundColor: var(#{$panel}--BackgroundColor--100); + --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md); + --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm); + --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); // header --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md); diff --git a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css index d4fee994d3..4b9b1aa27f 100644 --- a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css +++ b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css @@ -8,3 +8,7 @@ top: 40px; width: 100%; } + +#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete { + height: 540px; +}