@patternfly/patternfly 6.0.0-alpha.26 → 6.0.0-alpha.28

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 (15) hide show
  1. package/components/Accordion/accordion.css +81 -182
  2. package/components/Accordion/accordion.scss +89 -200
  3. package/components/Banner/banner.css +86 -64
  4. package/components/Banner/banner.scss +90 -32
  5. package/docs/components/Accordion/examples/Accordion.md +596 -493
  6. package/docs/components/Banner/examples/Banner.md +48 -25
  7. package/docs/demos/Card/examples/Card.md +2 -2
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +206 -250
  10. package/patternfly-theme-dark-unversioned.css +206 -250
  11. package/patternfly.css +206 -250
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/components/Accordion/themes/dark/accordion.scss +0 -9
  15. package/components/Banner/themes/dark/banner.scss +0 -14
package/components/Accordion/accordion.scss CHANGED
@@ -1,98 +1,80 @@
1
1
  // @debug $accordion; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$accordion} {
3
+ :root {
4
4
  // accordion
5
- --#{$accordion}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
5
+ --#{$accordion}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
+ --#{$accordion}--RowGap: var(--pf-t--global--spacer--xs);
7
+
8
+ // accordion item
9
+ --#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
10
+ --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
6
11
 
7
12
  // accordion toggle
8
- --#{$accordion}__toggle--PaddingTop: var(--#{$pf-global}--spacer--sm);
9
- --#{$accordion}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
10
- --#{$accordion}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--sm);
11
- --#{$accordion}__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
12
- --#{$accordion}__toggle--before--Top: 0;
13
- --#{$accordion}__toggle--after--Top: 0;
14
- --#{$accordion}__toggle--after--BackgroundColor: transparent;
15
- --#{$accordion}__toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
16
- --#{$accordion}__toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
17
- --#{$accordion}__toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
18
- --#{$accordion}__toggle--before--Width: var(--#{$pf-global}--BorderWidth--lg);
19
- --#{$accordion}__toggle--after--Width: var(--#{$pf-global}--BorderWidth--lg);
20
- --#{$accordion}__toggle--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
21
- --#{$accordion}__toggle--BackgroundColor: transparent;
22
- --#{$accordion}__toggle--JustifyContent: space-between;
23
- --#{$accordion}__toggle--ColumnGap: 0;
13
+ --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
14
+ --#{$accordion}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
15
+ --#{$accordion}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
16
+ --#{$accordion}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
17
+ --#{$accordion}__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
18
+ --#{$accordion}__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
19
+ --#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20
+ --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21
+ --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
24
22
 
25
23
  // Accordion toggle toggle-start modifier
26
- --#{$accordion}--m-toggle-start__toggle--JustifyContent: start;
27
- --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--#{$pf-global}--spacer--md);
24
+ --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
28
25
 
29
26
  // accordion toggle text
30
- --#{$accordion}__toggle-text--MaxWidth: calc(100% - var(--#{$pf-global}--spacer--lg));
31
- --#{$accordion}__toggle--hover__toggle-text--Color: var(--#{$pf-global}--link--Color);
32
- --#{$accordion}__toggle--active__toggle-text--Color: var(--#{$pf-global}--link--Color);
33
- --#{$accordion}__toggle--active__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
34
- --#{$accordion}__toggle--focus__toggle-text--Color: var(--#{$pf-global}--link--Color);
35
- --#{$accordion}__toggle--focus__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
36
- --#{$accordion}__toggle--m-expanded__toggle-text--Color: var(--#{$pf-global}--link--Color);
37
- --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
38
-
27
+ --#{$accordion}__toggle-text--Color: var(--pf-t--global--text--color--regular);
28
+ --#{$accordion}__toggle-text--FontWeight: var(--pf-t--global--font--weight--body);
29
+ --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
30
+
39
31
  // accordion toggle icon
40
32
  --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
41
33
  --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
42
-
43
- // accordion expanded content
44
- --#{$accordion}__expandable-content--Color: var(--#{$pf-global}--Color--200);
45
- --#{$accordion}__expandable-content--FontSize: var(--#{$pf-global}--FontSize--sm);
46
- --#{$accordion}__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
34
+
35
+ // accordion expandable content
36
+ --#{$accordion}__expandable-content--MarginRight: var(--pf-t--global--spacer--md);
37
+ --#{$accordion}__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
38
+ --#{$accordion}__expandable-content--MarginLeft: var(--pf-t--global--spacer--md);
39
+ --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
40
+ --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
41
+ --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
42
+ --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--md);
47
43
  --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
48
- --#{$accordion}__expandable-content-body--PaddingTop: var(--#{$pf-global}--spacer--sm);
49
- --#{$accordion}__expandable-content-body--PaddingRight: var(--#{$pf-global}--spacer--md);
50
- --#{$accordion}__expandable-content-body--PaddingBottom: var(--#{$pf-global}--spacer--sm);
51
- --#{$accordion}__expandable-content-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
52
- --#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop: 0;
53
- --#{$accordion}__expandable-content-body--after--BackgroundColor: transparent;
54
- --#{$accordion}__expandable-content-body--after--Width: var(--#{$pf-global}--BorderWidth--lg);
55
- --#{$accordion}__expandable-content-body--before--Top: 0;
56
44
 
45
+ // accordion expandable content body
46
+ --#{$accordion}__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
47
+ --#{$accordion}__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);
48
+ --#{$accordion}__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
49
+ --#{$accordion}__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
50
+ --#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop: 0;
51
+
57
52
  // large
58
- --#{$accordion}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
59
- --#{$accordion}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
60
- --#{$accordion}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
61
- --#{$accordion}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--lg);
62
- --#{$accordion}--m-display-lg__toggle--FontFamily: var(--#{$pf-global}--FontFamily--heading);
63
- --#{$accordion}--m-display-lg__toggle--FontSize: var(--#{$pf-global}--FontSize--xl);
64
- --#{$accordion}--m-display-lg__toggle--hover__toggle-text--Color: var(--#{$pf-global}--Color--100);
65
- --#{$accordion}--m-display-lg__toggle--active__toggle-text--Color: var(--#{$pf-global}--Color--100);
66
- --#{$accordion}--m-display-lg__toggle--active__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
67
- --#{$accordion}--m-display-lg__toggle--focus__toggle-text--Color: var(--#{$pf-global}--Color--100);
68
- --#{$accordion}--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
69
- --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--#{$pf-global}--Color--100);
70
- --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
71
- --#{$accordion}--m-display-lg__expandable-content--FontSize: var(--#{$pf-global}--FontSize--md);
72
- --#{$accordion}--m-display-lg__expandable-content--Color: var(--#{$pf-global}--Color--100);
73
- --#{$accordion}--m-display-lg__expandable-content-body--PaddingTop: 0;
74
- --#{$accordion}--m-display-lg__expandable-content-body--PaddingRight: var(--#{$pf-global}--spacer--md);
75
- --#{$accordion}--m-display-lg__expandable-content-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
76
- --#{$accordion}--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--#{$pf-global}--spacer--lg);
77
- --#{$accordion}--m-display-lg__expandable-content-body--PaddingLeft: var(--#{$pf-global}--spacer--lg);
78
-
53
+ --#{$accordion}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
54
+ --#{$accordion}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
55
+ --#{$accordion}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
56
+ --#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
57
+ --#{$accordion}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
58
+ --#{$accordion}--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
59
+ --#{$accordion}--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
60
+ --#{$accordion}--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading);
61
+ --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
62
+ --#{$accordion}--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
63
+ --#{$accordion}--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
64
+
79
65
  // bordered
80
- --#{$accordion}--m-bordered--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
81
- --#{$accordion}--m-bordered--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
82
- --#{$accordion}--m-bordered__toggle--after--Top: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
83
- --#{$accordion}--m-bordered__toggle--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
84
- --#{$accordion}--m-bordered__toggle--before--BorderTopWidth: 0;
85
- --#{$accordion}--m-bordered__toggle--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
86
- --#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
87
- --#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
88
-
89
- // This component always needs to be light
90
- @include pf-v5-t-light;
66
+ --#{$accordion}--m-bordered--RowGap: 0;
67
+ --#{$accordion}__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
68
+ --#{$accordion}__item--m-bordered--BorderBottomColor: var(--pf-t--global--border--color--default);
69
+ }
91
70
 
71
+ .#{$accordion} {
72
+ display: flex;
73
+ flex-direction: column;
74
+ row-gap: var(--#{$accordion}--RowGap);
92
75
  background-color: var(--#{$accordion}--BackgroundColor);
93
76
 
94
77
  &.pf-m-toggle-start {
95
- --#{$accordion}__toggle--JustifyContent: var(--#{$accordion}--m-toggle-start__toggle--JustifyContent);
96
78
  --#{$accordion}__toggle--ColumnGap: var(--#{$accordion}--m-toggle-start__toggle--ColumnGap);
97
79
  }
98
80
 
@@ -100,81 +82,46 @@
100
82
  --#{$accordion}__toggle--PaddingTop: var(--#{$accordion}--m-display-lg__toggle--PaddingTop);
101
83
  --#{$accordion}__toggle--PaddingRight: var(--#{$accordion}--m-display-lg__toggle--PaddingRight);
102
84
  --#{$accordion}__toggle--PaddingBottom: var(--#{$accordion}--m-display-lg__toggle--PaddingBottom);
85
+ --#{$accordion}__toggle--m-expanded--PaddingBottom: var(--#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBottom);
103
86
  --#{$accordion}__toggle--PaddingLeft: var(--#{$accordion}--m-display-lg__toggle--PaddingLeft);
104
87
  --#{$accordion}__toggle--FontFamily: var(--#{$accordion}--m-display-lg__toggle--FontFamily);
105
88
  --#{$accordion}__toggle--FontSize: var(--#{$accordion}--m-display-lg__toggle--FontSize);
106
- --#{$accordion}__toggle--hover__toggle-text--Color: var(--#{$accordion}--m-display-lg__toggle--hover__toggle-text--Color);
107
- --#{$accordion}__toggle--active__toggle-text--Color: var(--#{$accordion}--m-display-lg__toggle--active__toggle-text--Color);
108
- --#{$accordion}__toggle--active__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle--active__toggle-text--FontWeight);
109
- --#{$accordion}__toggle--focus__toggle-text--Color: var(--#{$accordion}--m-display-lg__toggle--focus__toggle-text--Color);
110
- --#{$accordion}__toggle--focus__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle--focus__toggle-text--FontWeight);
111
- --#{$accordion}__toggle--m-expanded__toggle-text--Color: var(--#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--Color);
89
+ --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle-text--FontWeight);
112
90
  --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
113
- --#{$accordion}__expandable-content-body--PaddingTop: var(--#{$accordion}--m-display-lg__expandable-content-body--PaddingTop);
114
- --#{$accordion}__expandable-content-body--PaddingRight: var(--#{$accordion}--m-display-lg__expandable-content-body--PaddingRight);
115
- --#{$accordion}__expandable-content-body--PaddingBottom: var(--#{$accordion}--m-display-lg__expandable-content-body--PaddingBottom);
116
- --#{$accordion}__expandable-content-body--PaddingLeft: var(--#{$accordion}--m-display-lg__expandable-content-body--PaddingLeft);
117
91
  --#{$accordion}__expandable-content--FontSize: var(--#{$accordion}--m-display-lg__expandable-content--FontSize);
118
92
  --#{$accordion}__expandable-content--Color: var(--#{$accordion}--m-display-lg__expandable-content--Color);
119
-
120
- .#{$accordion}__expandable-content-body:last-child {
121
- --#{$accordion}__expandable-content-body--PaddingBottom: var(--#{$accordion}--m-display-lg__expandable-content-body--last-child--PaddingBottom);
122
- }
123
93
  }
124
94
 
125
95
  &.pf-m-bordered {
126
- --#{$accordion}__toggle--after--Top: var(--#{$accordion}--m-bordered__toggle--after--Top);
96
+ --#{$accordion}--RowGap: var(--#{$accordion}--m-bordered--RowGap);
97
+ --#{$accordion}__item--BorderRadius: 0;
98
+ --#{$accordion}__toggle--BorderRadius: 0;
127
99
 
128
- border-block-start: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
129
-
130
- .#{$accordion}__toggle {
131
- &::before {
132
- position: absolute;
133
- inset-block-start: 0;
134
- inset-block-end: 0;
135
- inset-inline-start: 0;
136
- inset-inline-end: 0;
137
- content: "";
138
- border-color: var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
139
- border-style: solid;
140
- border-block-start-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth);
141
- border-block-end-width: var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
142
- border-inline-start-width: 0;
143
- border-inline-end-width: 0;
144
- }
145
-
146
- &.pf-m-expanded {
147
- --#{$accordion}--m-bordered__toggle--before--BorderBottomWidth: 0;
148
- }
100
+ .#{$accordion}__item {
101
+ border-block-end: var(--#{$accordion}__item--m-bordered--BorderBottomWidth) solid var(--#{$accordion}__item--m-bordered--BorderBottomColor);
149
102
  }
103
+ }
104
+ }
105
+
106
+ .#{$accordion}__item {
107
+ border-radius: var(--#{$accordion}__item--BorderRadius);
108
+
109
+ &.pf-m-expanded {
110
+ --#{$accordion}__toggle--PaddingBottom: var(--#{$accordion}__toggle--m-expanded--PaddingBottom);
111
+ --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
112
+
113
+ background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
150
114
 
151
- // stylelint-disable selector-max-class, max-nesting-depth
152
- .#{$accordion}__expandable-content {
153
- &.pf-m-expanded {
154
- .#{$accordion}__expandable-content-body:last-child {
155
- &::before {
156
- position: absolute;
157
- inset-block-start: 0;
158
- inset-block-end: 0;
159
- inset-inline-start: 0;
160
- inset-inline-end: 0;
161
- pointer-events: none;
162
- content: "";
163
- border-block-end: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
164
- }
165
- }
166
- }
115
+ .#{$accordion}__toggle-icon {
116
+ transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
167
117
  }
168
- // stylelint-enable
169
118
  }
170
119
  }
171
120
 
172
121
  .#{$accordion}__toggle {
173
- position: relative;
174
122
  display: flex;
175
123
  column-gap: var(--#{$accordion}__toggle--ColumnGap);
176
124
  align-items: center;
177
- justify-content: var(--#{$accordion}__toggle--JustifyContent);
178
125
  width: 100%;
179
126
  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
180
127
  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
@@ -182,63 +129,22 @@
182
129
  padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
183
130
  font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
184
131
  font-size: var(--#{$accordion}__toggle--FontSize, inherit);
132
+ text-align: start;
185
133
  background-color: var(--#{$accordion}__toggle--BackgroundColor);
186
134
  border: 0;
135
+ border-radius: var(--#{$accordion}__toggle--BorderRadius);
187
136
 
188
- &::after {
189
- position: absolute;
190
- inset-block-start: var(--#{$accordion}__toggle--after--Top);
191
- inset-block-end: 0;
192
- inset-inline-start: 0;
193
- width: var(--#{$accordion}__toggle--after--Width);
194
- content: "";
195
- background-color: var(--#{$accordion}__toggle--after--BackgroundColor);
196
- }
197
-
198
- &.pf-m-expanded {
199
- --#{$accordion}__toggle--after--BackgroundColor: var(--#{$accordion}__toggle--m-expanded--after--BackgroundColor);
200
-
201
- .#{$accordion}__toggle-text {
202
- font-weight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
203
- color: var(--#{$accordion}__toggle--m-expanded__toggle-text--Color);
204
- }
205
-
206
- .#{$accordion}__toggle-icon {
207
- transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
208
- }
209
- }
210
-
211
- &:hover {
212
- background-color: var(--#{$accordion}__toggle--hover--BackgroundColor);
213
-
214
- .#{$accordion}__toggle-text {
215
- color: var(--#{$accordion}__toggle--hover__toggle-text--Color);
216
- }
217
- }
218
-
219
- &:focus {
220
- background-color: var(--#{$accordion}__toggle--focus--BackgroundColor);
221
-
222
- .#{$accordion}__toggle-text {
223
- font-weight: var(--#{$accordion}__toggle--focus__toggle-text--FontWeight);
224
- color: var(--#{$accordion}__toggle--focus__toggle-text--Color);
225
- }
226
- }
227
-
228
- &:active {
229
- background-color: var(--#{$accordion}__toggle--active--BackgroundColor);
230
-
231
- .#{$accordion}__toggle-text {
232
- font-weight: var(--#{$accordion}__toggle--active__toggle-text--FontWeight);
233
- color: var(--#{$accordion}__toggle--active__toggle-text--Color);
234
- }
137
+ &:is(:hover, :focus) {
138
+ --#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);
235
139
  }
236
140
  }
237
141
 
238
142
  .#{$accordion}__toggle-text {
239
143
  @include pf-v5-text-overflow;
240
144
 
241
- max-width: var(--#{$accordion}__toggle-text--MaxWidth);
145
+ flex-grow: 1;
146
+ font-weight: var(--#{$accordion}__toggle-text--FontWeight);
147
+ color: var(--#{$accordion}__toggle-text--Color);
242
148
  }
243
149
 
244
150
  .#{$accordion}__toggle-icon {
@@ -248,44 +154,27 @@
248
154
  }
249
155
 
250
156
  .#{$accordion}__expandable-content {
157
+ margin-block-end: var(--#{$accordion}__expandable-content--MarginBottom);
158
+ margin-inline-start: var(--#{$accordion}__expandable-content--MarginLeft);
159
+ margin-inline-end: var(--#{$accordion}__expandable-content--MarginRight);
251
160
  font-size: var(--#{$accordion}__expandable-content--FontSize);
252
161
  color: var(--#{$accordion}__expandable-content--Color);
162
+ background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
163
+ border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
253
164
 
254
165
  &.pf-m-fixed {
255
166
  max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
256
167
  overflow-y: auto;
257
168
  }
258
-
259
- &.pf-m-expanded {
260
- --#{$accordion}__expandable-content-body--after--BackgroundColor: var(--#{$accordion}__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
261
- }
262
169
  }
263
170
 
264
171
  .#{$accordion}__expandable-content-body {
265
- position: relative;
266
172
  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
267
173
  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
268
174
  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
269
175
  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
270
176
 
271
- &::after {
272
- position: absolute;
273
- inset-block-start: 0;
274
- inset-block-end: 0;
275
- inset-inline-start: 0;
276
- width: var(--#{$accordion}__expandable-content-body--after--Width);
277
- content: "";
278
- background-color: var(--#{$accordion}__expandable-content-body--after--BackgroundColor);
279
- }
280
-
281
177
  & + & {
282
178
  --#{$accordion}__expandable-content-body--PaddingTop: var(--#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop);
283
179
  }
284
180
  }
285
-
286
- // stylelint-disable no-invalid-position-at-import-rule
287
- @import "themes/dark/accordion";
288
-
289
- @include pf-v5-theme-dark {
290
- @include pf-v5-theme-dark-accordion;
291
- }
package/components/Banner/banner.css CHANGED
@@ -1,56 +1,56 @@
1
- .pf-v5-c-banner.pf-m-gold, .pf-v5-c-banner.pf-m-blue {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-banner {
14
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
17
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
18
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
19
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
20
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
- }
24
- .pf-v5-c-banner .pf-v5-c-button {
25
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
- }
27
-
28
- .pf-v5-c-banner {
29
- --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
30
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-global--spacer--md);
31
- --pf-v5-c-banner--md--PaddingRight: var(--pf-v5-global--spacer--lg);
32
- --pf-v5-c-banner--PaddingBottom: var(--pf-v5-global--spacer--xs);
33
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-global--spacer--md);
34
- --pf-v5-c-banner--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
35
- --pf-v5-c-banner--FontSize: var(--pf-v5-global--FontSize--sm);
36
- --pf-v5-c-banner--Color: var(--pf-v5-global--Color--100);
37
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
1
+ :root {
2
+ --pf-v5-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
3
+ --pf-v5-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
6
+ --pf-v5-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
8
+ --pf-v5-c-banner--FontSize: var(--pf-t--global--font--size--body);
9
+ --pf-v5-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
10
+ --pf-v5-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
38
11
  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
39
12
  --pf-v5-c-banner--link--TextDecoration: underline;
40
13
  --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
41
- --pf-v5-c-banner--link--hover--FontWeight: var(--pf-v5-global--FontWeight--bold);
14
+ --pf-v5-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
42
15
  --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
43
16
  --pf-v5-c-banner--link--disabled--TextDecoration: none;
44
- --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-v5-global--palette--blue-200);
45
- --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
46
- --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
47
- --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-v5-global--warning-color--100);
48
17
  --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--md);
49
- --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
50
- color: var(--pf-v5-global--Color--100);
51
- overflow: hidden;
52
- text-overflow: ellipsis;
53
- white-space: nowrap;
18
+ --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
19
+ --pf-v5-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v5-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
21
+ --pf-v5-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
22
+ --pf-v5-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
23
+ --pf-v5-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
24
+ --pf-v5-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
25
+ --pf-v5-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
26
+ --pf-v5-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
27
+ --pf-v5-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
28
+ --pf-v5-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
29
+ --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
30
+ --pf-v5-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
31
+ --pf-v5-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
32
+ --pf-v5-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
33
+ --pf-v5-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
34
+ --pf-v5-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
35
+ --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
36
+ --pf-v5-c-banner--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
37
+ --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
38
+ --pf-v5-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
39
+ --pf-v5-c-banner--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
40
+ --pf-v5-c-banner--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
41
+ --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
42
+ --pf-v5-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
43
+ --pf-v5-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
44
+ --pf-v5-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
45
+ }
46
+ @media (min-width: 768px) {
47
+ :root {
48
+ --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
49
+ --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
50
+ }
51
+ }
52
+
53
+ .pf-v5-c-banner {
54
54
  flex-shrink: 0;
55
55
  padding-block-start: var(--pf-v5-c-banner--PaddingTop);
56
56
  padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
@@ -61,23 +61,53 @@
61
61
  white-space: nowrap;
62
62
  background-color: var(--pf-v5-c-banner--BackgroundColor);
63
63
  }
64
- @media (min-width: 768px) {
65
- .pf-v5-c-banner {
66
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
67
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
68
- }
64
+ .pf-v5-c-banner.pf-m-danger {
65
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-danger--BackgroundColor);
66
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-danger--Color);
69
67
  }
70
- .pf-v5-c-banner.pf-m-blue {
71
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
68
+ .pf-v5-c-banner.pf-m-success {
69
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-success--BackgroundColor);
70
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-success--Color);
71
+ }
72
+ .pf-v5-c-banner.pf-m-warning {
73
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-warning--BackgroundColor);
74
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-warning--Color);
75
+ }
76
+ .pf-v5-c-banner.pf-m-info {
77
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
78
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
72
79
  }
73
80
  .pf-v5-c-banner.pf-m-red {
74
81
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
82
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
75
83
  }
76
- .pf-v5-c-banner.pf-m-green {
77
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
84
+ .pf-v5-c-banner.pf-m-orangered {
85
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orangered--BackgroundColor);
86
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orangered--Color);
87
+ }
88
+ .pf-v5-c-banner.pf-m-orange {
89
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orange--BackgroundColor);
90
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orange--Color);
78
91
  }
79
92
  .pf-v5-c-banner.pf-m-gold {
80
93
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
94
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-gold--Color);
95
+ }
96
+ .pf-v5-c-banner.pf-m-green {
97
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
98
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-green--Color);
99
+ }
100
+ .pf-v5-c-banner.pf-m-cyan {
101
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-cyan--BackgroundColor);
102
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-cyan--Color);
103
+ }
104
+ .pf-v5-c-banner.pf-m-blue {
105
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
106
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-blue--Color);
107
+ }
108
+ .pf-v5-c-banner.pf-m-purple {
109
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-purple--BackgroundColor);
110
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-purple--Color);
81
111
  }
82
112
  .pf-v5-c-banner.pf-m-sticky {
83
113
  position: sticky;
@@ -111,12 +141,4 @@
111
141
  .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled, .pf-v5-c-banner .pf-v5-c-button.pf-m-inline.pf-m-disabled {
112
142
  --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
113
143
  cursor: not-allowed;
114
- }
115
-
116
- :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
117
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
118
- }
119
-
120
- :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
121
- --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
122
144
  }