@patternfly/patternfly 5.0.0-alpha.57 → 5.0.0-alpha.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/assets/images/pf_logo.svg +11 -11
  2. package/base/patternfly-variables.css +3 -1
  3. package/base/themes/dark/_variables.scss +2 -0
  4. package/components/Alert/alert.css +7 -7
  5. package/components/Alert/themes/dark/alert.scss +7 -7
  6. package/components/AppLauncher/app-launcher.css +1 -0
  7. package/components/AppLauncher/app-launcher.scss +1 -0
  8. package/components/Badge/badge.css +1 -0
  9. package/components/Badge/themes/dark/badge.scss +1 -0
  10. package/components/Banner/banner.css +6 -8
  11. package/components/Banner/banner.scss +5 -5
  12. package/components/Banner/themes/dark/banner.scss +2 -6
  13. package/components/Button/button.css +4 -0
  14. package/components/Button/button.scss +2 -0
  15. package/components/Button/themes/dark/button.scss +4 -2
  16. package/components/CalendarMonth/calendar-month.css +3 -3
  17. package/components/CalendarMonth/calendar-month.scss +1 -5
  18. package/components/CalendarMonth/themes/dark/calendar-month.scss +2 -0
  19. package/components/DragDrop/drag-drop.css +23 -7
  20. package/components/DragDrop/drag-drop.scss +36 -17
  21. package/components/DragDrop/themes/dark/drag-drop.scss +7 -0
  22. package/components/Dropdown/dropdown.css +2 -0
  23. package/components/Dropdown/themes/dark/dropdown.scss +2 -0
  24. package/components/DualListSelector/dual-list-selector.css +9 -3
  25. package/components/DualListSelector/dual-list-selector.scss +10 -3
  26. package/components/DualListSelector/themes/dark/dual-list-selector.scss +9 -0
  27. package/components/FormControl/form-control.css +1 -1
  28. package/components/FormControl/themes/dark/form-control.scss +1 -1
  29. package/components/InputGroup/input-group.css +1 -1
  30. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  31. package/components/Label/label.css +6 -0
  32. package/components/Label/themes/dark/label.scss +6 -0
  33. package/components/Menu/menu.css +0 -1
  34. package/components/Menu/themes/dark/menu.scss +0 -1
  35. package/components/MenuToggle/menu-toggle.css +7 -5
  36. package/components/MenuToggle/menu-toggle.scss +2 -3
  37. package/components/MenuToggle/themes/dark/menu-toggle.scss +17 -14
  38. package/components/Nav/nav.css +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/NotificationBadge/notification-badge.css +1 -0
  41. package/components/NotificationBadge/themes/dark/notification-badge.scss +1 -0
  42. package/components/Panel/panel.css +6 -0
  43. package/components/Panel/panel.scss +9 -0
  44. package/components/Panel/themes/dark/panel.scss +7 -0
  45. package/components/Popover/popover.css +1 -1
  46. package/components/Popover/themes/dark/popover.scss +1 -1
  47. package/components/ProgressStepper/progress-stepper.css +1 -0
  48. package/components/ProgressStepper/progress-stepper.scss +240 -239
  49. package/components/Tabs/tabs.css +1 -0
  50. package/components/Tabs/themes/dark/tabs.scss +1 -0
  51. package/components/TextInputGroup/text-input-group.css +8 -0
  52. package/components/TextInputGroup/text-input-group.scss +7 -0
  53. package/components/TextInputGroup/themes/dark/text-input-group.scss +11 -0
  54. package/components/ToggleGroup/themes/dark/toggle-group.scss +1 -0
  55. package/components/ToggleGroup/toggle-group.css +3 -0
  56. package/components/ToggleGroup/toggle-group.scss +2 -0
  57. package/components/Wizard/themes/dark/wizard.scss +0 -2
  58. package/components/Wizard/wizard.css +2 -4
  59. package/components/Wizard/wizard.scss +2 -2
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +1 -1
  61. package/docs/components/Slider/examples/Slider.md +15 -13
  62. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  63. package/package.json +2 -2
  64. package/patternfly-base-no-globals.css +3 -1
  65. package/patternfly-base.css +3 -1
  66. package/patternfly-no-globals.css +150 -43
  67. package/patternfly.css +150 -43
  68. package/patternfly.min.css +1 -1
  69. package/patternfly.min.css.map +1 -1
  70. package/sass-utilities/mixins.scss +3 -1
  71. package/sass-utilities/themes/dark/scss-variables.scss +7 -2
@@ -7,7 +7,7 @@
7
7
  --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
8
8
  --#{$form-control}--BorderLeftColor: transparent;
9
9
  --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
10
- --#{$form-control}--disabled--Color: var(--#{$pf-global}--palette--black-300);
10
+ --#{$form-control}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
11
11
  --#{$form-control}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
12
12
  --#{$form-control}--readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
13
13
 
@@ -77,7 +77,7 @@ label.pf-v5-c-input-group__text {
77
77
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
78
78
  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
79
79
  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
80
- --pf-v5-c-input-group__text--m-disabled--Color: var(--pf-v5-global--palette--black-100);
80
+ --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
81
81
  }
82
82
  :where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
83
83
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
@@ -11,7 +11,7 @@
11
11
  --#{$input-group}__item--m-box--BorderLeftColor: transparent;
12
12
  --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
13
13
  --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
14
- --#{$input-group}__text--m-disabled--Color: var(--#{$pf-global}--palette--black-100);
14
+ --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300);
15
15
 
16
16
  > * + * {
17
17
  --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor);
@@ -413,6 +413,7 @@ button.pf-v5-c-label__content:focus {
413
413
  --pf-v5-c-label--m-red--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
414
414
  --pf-v5-c-label--m-purple--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
415
415
  --pf-v5-c-label--m-cyan--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
416
+ --pf-v5-c-label--m-gold--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
416
417
  --pf-v5-c-label__content--before--BorderWidth: 0;
417
418
  --pf-v5-c-label__content--before--BorderColor: transparent;
418
419
  --pf-v5-c-label__content--link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -447,4 +448,9 @@ button.pf-v5-c-label__content:focus {
447
448
  --pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
448
449
  --pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
449
450
  --pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
451
+ --pf-v5-c-label--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
452
+ --pf-v5-c-label--m-outline--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
453
+ --pf-v5-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-v5-global--palette--gold-100);
454
+ --pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--gold-100);
455
+ --pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--gold-100);
450
456
  }
@@ -9,6 +9,7 @@
9
9
  --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
10
10
  --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
11
11
  --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
12
+ --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
12
13
  --#{$label}__content--before--BorderWidth: 0;
13
14
  --#{$label}__content--before--BorderColor: transparent;
14
15
  --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
@@ -43,5 +44,10 @@
43
44
  --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
44
45
  --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
45
46
  --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
47
+ --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
48
+ --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
49
+ --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
50
+ --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
51
+ --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
46
52
  }
47
53
  }
@@ -625,5 +625,4 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
625
625
  --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
626
626
  --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
627
627
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
628
- --pf-v5-c-menu__list-item--m-disabled__item--Color: var(--pf-v5-global--Color--200);
629
628
  }
@@ -5,6 +5,5 @@
5
5
  --#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
6
6
  --#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
7
7
  --#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
8
- --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--Color--200); // global var?
9
8
  }
10
9
  }
@@ -83,7 +83,7 @@
83
83
  --pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
84
84
  --pf-v5-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
85
85
  --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
86
- --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--Color--dark-200);
86
+ --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
87
87
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
88
88
  --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
89
89
  --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
@@ -271,6 +271,7 @@
271
271
  --pf-v5-c-menu-toggle--PaddingRight: 0;
272
272
  --pf-v5-c-check__input--MarginTop: 0;
273
273
  --pf-v5-c-check__label--Color: currentcolor;
274
+ --pf-v5-c-check__label--disabled--Color: currentcolor;
274
275
  align-items: center;
275
276
  align-self: stretch;
276
277
  }
@@ -337,8 +338,6 @@
337
338
  --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
338
339
  }
339
340
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-v5-c-menu-toggle.pf-m-split-button:disabled {
340
- --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
341
- --pf-v5-c-menu-toggle--m-split-button--child--Color: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color);
342
341
  --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
343
342
  }
344
343
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::after, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::after {
@@ -409,9 +408,12 @@
409
408
  --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
410
409
  --pf-v5-c-menu-toggle--before--BorderLeftColor: transparent;
411
410
  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
412
- --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
413
- --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--palette--black-100);
414
411
  --pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
412
+ --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
413
+ --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--300);
414
+ --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--300);
415
+ --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
416
+ --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
415
417
  }
416
418
  :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
417
419
  background: transparent;
@@ -120,7 +120,7 @@
120
120
 
121
121
  // Split button, child
122
122
  --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
123
- --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--Color--dark-200);
123
+ --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100);
124
124
  --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
125
125
  --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm);
126
126
  --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0;
@@ -363,6 +363,7 @@
363
363
  --#{$menu-toggle}--PaddingRight: 0;
364
364
  --#{$check}__input--MarginTop: 0;
365
365
  --#{$check}__label--Color: currentcolor;
366
+ --#{$check}__label--disabled--Color: currentcolor;
366
367
 
367
368
  align-items: center;
368
369
  align-self: stretch;
@@ -469,8 +470,6 @@
469
470
  // disable accent border
470
471
  &.pf-m-disabled,
471
472
  &:disabled {
472
- --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor);
473
- --#{$menu-toggle}--m-split-button--child--Color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color);
474
473
  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: transparent;
475
474
 
476
475
  &::before,
@@ -1,20 +1,23 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
3
  @mixin pf-v5-theme-dark-menu-toggle() {
4
- .#{$menu}-toggle {
5
- --#{$menu}-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
- --#{$menu}-toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
7
- --#{$menu}-toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
8
- --#{$menu}-toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
9
- --#{$menu}-toggle--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
10
- --#{$menu}-toggle--before--BorderTopColor: transparent;
11
- --#{$menu}-toggle--before--BorderRightColor: transparent;
12
- --#{$menu}-toggle--before--BorderBottomColor: transparent;
13
- --#{$menu}-toggle--before--BorderLeftColor: transparent;
14
- --#{$menu}-toggle--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
15
- --#{$menu}-toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500);
16
- --#{$menu}-toggle--disabled--Color: var(--#{$pf-global}--palette--black-100);
17
- --#{$menu}-toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
4
+ .#{$menu-toggle} {
5
+ --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
+ --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
7
+ --#{$menu-toggle}--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
8
+ --#{$menu-toggle}--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
9
+ --#{$menu-toggle}--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
10
+ --#{$menu-toggle}--before--BorderTopColor: transparent;
11
+ --#{$menu-toggle}--before--BorderRightColor: transparent;
12
+ --#{$menu-toggle}--before--BorderBottomColor: transparent;
13
+ --#{$menu-toggle}--before--BorderLeftColor: transparent;
14
+ --#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
15
+ --#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
16
+ --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
17
+ --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
18
+ --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300);
19
+ --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300);
20
+ --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
18
21
 
19
22
  &.pf-m-plain {
20
23
  background: transparent;
@@ -73,7 +73,7 @@
73
73
  --pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom: var(--pf-v5-global--spacer--lg);
74
74
  --pf-v5-c-nav--m-horizontal__link--Right: var(--pf-v5-global--spacer--md);
75
75
  --pf-v5-c-nav--m-horizontal__link--Left: var(--pf-v5-global--spacer--md);
76
- --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-300);
76
+ --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-200);
77
77
  --pf-v5-c-nav--m-horizontal__link--hover--Color: var(--pf-v5-global--active-color--400);
78
78
  --pf-v5-c-nav--m-horizontal__link--focus--Color: var(--pf-v5-global--active-color--400);
79
79
  --pf-v5-c-nav--m-horizontal__link--active--Color: var(--pf-v5-global--active-color--400);
@@ -91,7 +91,7 @@
91
91
  --#{$nav}--m-horizontal__link--lg--PaddingBottom: var(--#{$pf-global}--spacer--lg);
92
92
  --#{$nav}--m-horizontal__link--Right: var(--#{$pf-global}--spacer--md);
93
93
  --#{$nav}--m-horizontal__link--Left: var(--#{$pf-global}--spacer--md);
94
- --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-300);
94
+ --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-200);
95
95
  --#{$nav}--m-horizontal__link--hover--Color: var(--#{$pf-global}--active-color--400);
96
96
  --#{$nav}--m-horizontal__link--focus--Color: var(--#{$pf-global}--active-color--400);
97
97
  --#{$nav}--m-horizontal__link--active--Color: var(--#{$pf-global}--active-color--400);
@@ -100,6 +100,7 @@
100
100
 
101
101
  :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
102
102
  --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
103
+ --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
103
104
  --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
104
105
  --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
105
106
  }
@@ -3,6 +3,7 @@
3
3
  @mixin pf-v5-theme-dark-notification-badge() {
4
4
  .#{$notification-badge} {
5
5
  --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
+ --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
6
7
  --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300);
7
8
  --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900);
8
9
  }
@@ -10,6 +10,7 @@
10
10
  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11
11
  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
12
12
  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
13
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13
14
  --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
14
15
  --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
15
16
  --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -50,6 +51,7 @@
50
51
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
51
52
  }
52
53
  .pf-v5-c-panel.pf-m-raised {
54
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
53
55
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
54
56
  --pf-v5-c-panel--ZIndex: var(--pf-v5-c-panel--m-raised--ZIndex);
55
57
  }
@@ -75,4 +77,8 @@
75
77
  .pf-v5-c-panel__footer {
76
78
  padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
77
79
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
80
+ }
81
+
82
+ :where(.pf-v5-theme-dark) .pf-v5-c-panel {
83
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
78
84
  }
@@ -18,6 +18,7 @@
18
18
  // raised
19
19
  --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
20
20
  --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
21
+ --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
21
22
 
22
23
  // header
23
24
  --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -71,6 +72,7 @@
71
72
  }
72
73
 
73
74
  &.pf-m-raised {
75
+ --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
74
76
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
75
77
  --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
76
78
  }
@@ -99,3 +101,10 @@
99
101
  padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
100
102
  box-shadow: var(--#{$panel}__footer--BoxShadow);
101
103
  }
104
+
105
+ // stylelint-disable no-invalid-position-at-import-rule
106
+ @import "themes/dark/panel";
107
+
108
+ @include pf-v5-theme-dark {
109
+ @include pf-v5-theme-dark-panel;
110
+ }
@@ -0,0 +1,7 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-v5-theme-dark-panel() {
4
+ .#{$panel} {
5
+ --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
6
+ }
7
+ }
@@ -173,7 +173,7 @@
173
173
  :where(.pf-v5-theme-dark) .pf-v5-c-popover {
174
174
  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
175
175
  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
176
- --pf-v5-c-popover--m-default__title-text--Color: var(--pf-v5-global--custom-color--200);
176
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
177
177
  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
178
178
  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
179
179
  }
@@ -4,7 +4,7 @@
4
4
  .#{$popover} {
5
5
  --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
6
6
  --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
7
- --#{$popover}--m-default__title-text--Color: var(--#{$pf-global}--custom-color--200);
7
+ --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200);
8
8
  --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100);
9
9
  --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100);
10
10
  }
@@ -298,6 +298,7 @@
298
298
  font-weight: var(--pf-v5-c-progress-stepper__step-title--FontWeight);
299
299
  color: var(--pf-v5-c-progress-stepper__step-title--Color);
300
300
  text-align: var(--pf-v5-c-progress-stepper__step-title--TextAlign);
301
+ background: none;
301
302
  border: 0;
302
303
  }
303
304
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {