@patternfly/patternfly 6.0.0-alpha.25 → 6.0.0-alpha.27

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 (13) hide show
  1. package/components/Accordion/accordion.css +81 -182
  2. package/components/Accordion/accordion.scss +89 -200
  3. package/components/SkipToContent/skip-to-content.css +6 -3
  4. package/components/SkipToContent/skip-to-content.scss +8 -6
  5. package/docs/components/Accordion/examples/Accordion.md +596 -493
  6. package/docs/demos/Card/examples/Card.md +2 -2
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +85 -175
  9. package/patternfly-theme-dark-unversioned.css +85 -175
  10. package/patternfly.css +85 -175
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/components/Accordion/themes/dark/accordion.scss +0 -9
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/SkipToContent/skip-to-content.css CHANGED
@@ -1,7 +1,10 @@
1
- .pf-v5-c-skip-to-content {
2
- --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
1
+ :root {
2
+ --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
3
3
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
4
- --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
4
+ --pf-v5-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
5
+ }
6
+
7
+ .pf-v5-c-skip-to-content {
5
8
  position: absolute;
6
9
  inset-block-start: var(--pf-v5-c-skip-to-content--Top);
7
10
  inset-inline-start: -300%;
package/components/SkipToContent/skip-to-content.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  // @debug $skip-to-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$skip-to-content} {
4
- --#{$skip-to-content}--Top: var(--#{$pf-global}--spacer--md);
3
+ :root {
4
+ --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
5
5
  --#{$skip-to-content}--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
6
- --#{$skip-to-content}--focus--Left: var(--#{$pf-global}--spacer--md);
6
+ --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
7
+ }
7
8
 
9
+ .#{$skip-to-content} {
8
10
  position: absolute;
9
- inset-block-start: var(--#{$skip-to-content}--Top);
10
- inset-inline-start: -300%; // moves off screen
11
+ inset-block-start: var(--#{$skip-to-content}--Top);
12
+ inset-inline-start: -300%; // moves off screen
11
13
  z-index: var(--#{$skip-to-content}--ZIndex);
12
14
 
13
15
  &:focus-within {
14
- inset-inline-start: var(--#{$skip-to-content}--focus--Left);
16
+ inset-inline-start: var(--#{$skip-to-content}--focus--Left);
15
17
  }
16
18
  }