@patternfly/patternfly 6.0.0-alpha.44 → 6.0.0-alpha.45

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 (10) hide show
  1. package/components/Panel/panel.css +27 -23
  2. package/components/Panel/panel.scss +29 -26
  3. package/docs/components/Panel/examples/Panel.md +12 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +27 -27
  6. package/patternfly-theme-dark-unversioned.css +27 -27
  7. package/patternfly.css +27 -27
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/Panel/themes/dark/panel.scss +0 -7
package/components/Panel/panel.css CHANGED
@@ -1,34 +1,39 @@
1
+ :root,
1
2
  .pf-v5-c-panel {
2
3
  --pf-v5-c-panel--Width: auto;
3
4
  --pf-v5-c-panel--MinWidth: auto;
4
5
  --pf-v5-c-panel--MaxWidth: none;
5
6
  --pf-v5-c-panel--ZIndex: auto;
6
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
8
  --pf-v5-c-panel--BoxShadow: none;
8
9
  --pf-v5-c-panel--before--BorderWidth: 0;
9
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
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);
14
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
16
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
17
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
10
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
11
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
13
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
14
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
15
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
18
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
18
20
  --pf-v5-c-panel__main--MaxHeight: none;
19
21
  --pf-v5-c-panel__main--Overflow: visible;
20
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
24
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
23
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
24
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
25
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
26
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
27
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
28
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
29
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
28
30
  --pf-v5-c-panel__footer--BoxShadow: none;
29
31
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
30
32
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
31
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
33
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
34
+ }
35
+
36
+ .pf-v5-c-panel {
32
37
  position: relative;
33
38
  z-index: var(--pf-v5-c-panel--ZIndex);
34
39
  width: var(--pf-v5-c-panel--Width);
@@ -47,6 +52,9 @@
47
52
  .pf-v5-c-panel.pf-m-bordered {
48
53
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
49
54
  }
55
+ .pf-v5-c-panel.pf-m-secondary {
56
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
57
+ }
50
58
  .pf-v5-c-panel.pf-m-raised {
51
59
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
52
60
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -83,8 +91,4 @@
83
91
  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
84
92
  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
85
93
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
86
- }
87
-
88
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
89
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
90
94
  }
package/components/Panel/panel.scss CHANGED
@@ -1,53 +1,59 @@
1
1
  // @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$panel} {
4
5
  --#{$panel}--Width: auto;
5
6
  --#{$panel}--MinWidth: auto;
6
7
  --#{$panel}--MaxWidth: none;
7
8
  --#{$panel}--ZIndex: auto;
8
- --#{$panel}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
+ --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9
10
  --#{$panel}--BoxShadow: none;
10
11
 
11
12
  // border
12
13
  --#{$panel}--before--BorderWidth: 0;
13
- --#{$panel}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
14
+ --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--default);
15
+
16
+ // secondary modifier
17
+ --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14
18
 
15
19
  // bordered
16
- --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
20
+ --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
17
21
 
18
22
  // raised
19
- --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
20
- --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
21
- --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
23
+ --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
24
+ --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
25
+ --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22
26
 
23
27
  // header
24
- --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
25
- --#{$panel}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
26
- --#{$panel}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
27
- --#{$panel}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
28
+ --#{$panel}__header--PaddingTop: var(--pf-t--global--spacer--md);
29
+ --#{$panel}__header--PaddingRight: var(--pf-t--global--spacer--md);
30
+ --#{$panel}__header--PaddingBottom: var(--pf-t--global--spacer--md);
31
+ --#{$panel}__header--PaddingLeft: var(--pf-t--global--spacer--md);
28
32
 
29
33
  // main
30
34
  --#{$panel}__main--MaxHeight: none;
31
35
  --#{$panel}__main--Overflow: visible;
32
36
 
33
37
  // body
34
- --#{$panel}__main-body--PaddingTop: var(--#{$pf-global}--spacer--md);
35
- --#{$panel}__main-body--PaddingRight: var(--#{$pf-global}--spacer--md);
36
- --#{$panel}__main-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
37
- --#{$panel}__main-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
38
+ --#{$panel}__main-body--PaddingTop: var(--pf-t--global--spacer--md);
39
+ --#{$panel}__main-body--PaddingRight: var(--pf-t--global--spacer--md);
40
+ --#{$panel}__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
41
+ --#{$panel}__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
38
42
 
39
43
  // footer
40
- --#{$panel}__footer--PaddingTop: var(--#{$pf-global}--spacer--md);
41
- --#{$panel}__footer--PaddingRight: var(--#{$pf-global}--spacer--md);
42
- --#{$panel}__footer--PaddingBottom: var(--#{$pf-global}--spacer--md);
43
- --#{$panel}__footer--PaddingLeft: var(--#{$pf-global}--spacer--md);
44
+ --#{$panel}__footer--PaddingTop: var(--pf-t--global--spacer--md);
45
+ --#{$panel}__footer--PaddingRight: var(--pf-t--global--spacer--md);
46
+ --#{$panel}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
47
+ --#{$panel}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
44
48
  --#{$panel}__footer--BoxShadow: none;
45
49
 
46
50
  // scrollable
47
51
  --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
48
52
  --#{$panel}--m-scrollable__main--Overflow: auto;
49
- --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides
53
+ --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
54
+ }
50
55
 
56
+ .#{$panel} {
51
57
  position: relative;
52
58
  z-index: var(--#{$panel}--ZIndex);
53
59
  width: var(--#{$panel}--Width);
@@ -68,6 +74,10 @@
68
74
  --#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth);
69
75
  }
70
76
 
77
+ &.pf-m-secondary {
78
+ --#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor);
79
+ }
80
+
71
81
  &.pf-m-raised {
72
82
  --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
73
83
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
@@ -107,10 +117,3 @@
107
117
  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
108
118
  box-shadow: var(--#{$panel}__footer--BoxShadow);
109
119
  }
110
-
111
- // stylelint-disable no-invalid-position-at-import-rule
112
- @import "themes/dark/panel";
113
-
114
- @include pf-v5-theme-dark {
115
- @include pf-v5-theme-dark-panel;
116
- }
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -15,6 +15,17 @@ cssPrefix: pf-v5-c-panel
15
15
 
16
16
  ```
17
17
 
18
+ ### Secondary
19
+
20
+ ```html
21
+ <div class="pf-v5-c-panel pf-m-secondary">
22
+ <div class="pf-v5-c-panel__main">
23
+ <div class="pf-v5-c-panel__main-body">Main content with secondary styling</div>
24
+ </div>
25
+ </div>
26
+
27
+ ```
28
+
18
29
  ### Header
19
30
 
20
31
  ```html
@@ -160,3 +171,4 @@ cssPrefix: pf-v5-c-panel
160
171
  | `.pf-m-bordered` | `.pf-v5-c-panel` | Modifies the panel for bordered styles. |
161
172
  | `.pf-m-raised` | `.pf-v5-c-panel` | Modifies the panel for raised styles. |
162
173
  | `.pf-m-scrollable` | `.pf-v5-c-panel` | Modifies the panel for scrollable styles. |
174
+ | `.pf-m-secondary` | `.pf-v5-c-panel` | Modifies the panel for secondary styles. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.44",
4
+ "version": "6.0.0-alpha.45",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -22582,37 +22582,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22582
22582
  }
22583
22583
  }
22584
22584
 
22585
+ :root,
22585
22586
  .pf-v5-c-panel {
22586
22587
  --pf-v5-c-panel--Width: auto;
22587
22588
  --pf-v5-c-panel--MinWidth: auto;
22588
22589
  --pf-v5-c-panel--MaxWidth: none;
22589
22590
  --pf-v5-c-panel--ZIndex: auto;
22590
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22591
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22591
22592
  --pf-v5-c-panel--BoxShadow: none;
22592
22593
  --pf-v5-c-panel--before--BorderWidth: 0;
22593
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22594
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22595
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22596
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22597
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22598
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22599
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22600
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22601
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22594
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22595
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22596
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22597
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22598
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22599
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22600
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22601
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22602
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22603
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22602
22604
  --pf-v5-c-panel__main--MaxHeight: none;
22603
22605
  --pf-v5-c-panel__main--Overflow: visible;
22604
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22605
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22606
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22607
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22608
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22609
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22610
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22611
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22606
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22607
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22608
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22609
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22610
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22611
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22612
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22613
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22612
22614
  --pf-v5-c-panel__footer--BoxShadow: none;
22613
22615
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22614
22616
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22615
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22617
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22618
+ }
22619
+
22620
+ .pf-v5-c-panel {
22616
22621
  position: relative;
22617
22622
  z-index: var(--pf-v5-c-panel--ZIndex);
22618
22623
  width: var(--pf-v5-c-panel--Width);
@@ -22631,6 +22636,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22631
22636
  .pf-v5-c-panel.pf-m-bordered {
22632
22637
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22633
22638
  }
22639
+ .pf-v5-c-panel.pf-m-secondary {
22640
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22641
+ }
22634
22642
  .pf-v5-c-panel.pf-m-raised {
22635
22643
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22636
22644
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22669,14 +22677,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22669
22677
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22670
22678
  }
22671
22679
 
22672
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22673
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22674
- }
22675
-
22676
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
22677
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22678
- }
22679
-
22680
22680
  .pf-v5-c-popover {
22681
22681
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22682
22682
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -22699,37 +22699,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22699
22699
  }
22700
22700
  }
22701
22701
 
22702
+ :root,
22702
22703
  .pf-v5-c-panel {
22703
22704
  --pf-v5-c-panel--Width: auto;
22704
22705
  --pf-v5-c-panel--MinWidth: auto;
22705
22706
  --pf-v5-c-panel--MaxWidth: none;
22706
22707
  --pf-v5-c-panel--ZIndex: auto;
22707
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22708
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22708
22709
  --pf-v5-c-panel--BoxShadow: none;
22709
22710
  --pf-v5-c-panel--before--BorderWidth: 0;
22710
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22711
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22712
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22713
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22714
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22715
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22716
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22717
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22718
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22711
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22712
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22713
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22714
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22715
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22716
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22717
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22718
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22719
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22720
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22719
22721
  --pf-v5-c-panel__main--MaxHeight: none;
22720
22722
  --pf-v5-c-panel__main--Overflow: visible;
22721
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22722
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22723
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22724
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22725
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22726
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22727
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22728
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22723
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22724
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22725
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22726
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22727
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22728
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22729
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22730
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22729
22731
  --pf-v5-c-panel__footer--BoxShadow: none;
22730
22732
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22731
22733
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22732
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22734
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22735
+ }
22736
+
22737
+ .pf-v5-c-panel {
22733
22738
  position: relative;
22734
22739
  z-index: var(--pf-v5-c-panel--ZIndex);
22735
22740
  width: var(--pf-v5-c-panel--Width);
@@ -22748,6 +22753,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22748
22753
  .pf-v5-c-panel.pf-m-bordered {
22749
22754
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22750
22755
  }
22756
+ .pf-v5-c-panel.pf-m-secondary {
22757
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22758
+ }
22751
22759
  .pf-v5-c-panel.pf-m-raised {
22752
22760
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22753
22761
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22786,14 +22794,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22786
22794
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22787
22795
  }
22788
22796
 
22789
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22790
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22791
- }
22792
-
22793
- :where(.pf-theme-dark) .pf-v5-c-panel {
22794
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22795
- }
22796
-
22797
22797
  .pf-v5-c-popover {
22798
22798
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22799
22799
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
package/patternfly.css CHANGED
@@ -22699,37 +22699,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22699
22699
  }
22700
22700
  }
22701
22701
 
22702
+ :root,
22702
22703
  .pf-v5-c-panel {
22703
22704
  --pf-v5-c-panel--Width: auto;
22704
22705
  --pf-v5-c-panel--MinWidth: auto;
22705
22706
  --pf-v5-c-panel--MaxWidth: none;
22706
22707
  --pf-v5-c-panel--ZIndex: auto;
22707
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22708
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22708
22709
  --pf-v5-c-panel--BoxShadow: none;
22709
22710
  --pf-v5-c-panel--before--BorderWidth: 0;
22710
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22711
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22712
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22713
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22714
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22715
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22716
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22717
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22718
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22711
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22712
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22713
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22714
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22715
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22716
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22717
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22718
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22719
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22720
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22719
22721
  --pf-v5-c-panel__main--MaxHeight: none;
22720
22722
  --pf-v5-c-panel__main--Overflow: visible;
22721
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22722
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22723
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22724
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22725
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22726
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22727
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22728
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22723
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22724
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22725
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22726
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22727
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22728
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22729
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22730
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22729
22731
  --pf-v5-c-panel__footer--BoxShadow: none;
22730
22732
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22731
22733
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22732
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22734
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22735
+ }
22736
+
22737
+ .pf-v5-c-panel {
22733
22738
  position: relative;
22734
22739
  z-index: var(--pf-v5-c-panel--ZIndex);
22735
22740
  width: var(--pf-v5-c-panel--Width);
@@ -22748,6 +22753,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22748
22753
  .pf-v5-c-panel.pf-m-bordered {
22749
22754
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22750
22755
  }
22756
+ .pf-v5-c-panel.pf-m-secondary {
22757
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22758
+ }
22751
22759
  .pf-v5-c-panel.pf-m-raised {
22752
22760
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22753
22761
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22786,14 +22794,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22786
22794
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22787
22795
  }
22788
22796
 
22789
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22790
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22791
- }
22792
-
22793
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
22794
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22795
- }
22796
-
22797
22797
  .pf-v5-c-popover {
22798
22798
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22799
22799
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);