@patternfly/patternfly 6.0.0-alpha.57 → 6.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 (22) hide show
  1. package/components/CodeBlock/code-block.css +18 -9
  2. package/components/CodeBlock/code-block.scss +18 -10
  3. package/components/DescriptionList/description-list.css +9 -9
  4. package/components/DescriptionList/description-list.scss +3 -3
  5. package/components/FileUpload/file-upload.css +28 -34
  6. package/components/FileUpload/file-upload.scss +30 -42
  7. package/components/Icon/icon.css +154 -18
  8. package/components/Icon/icon.scss +187 -20
  9. package/components/Sidebar/sidebar.css +20 -9
  10. package/components/Sidebar/sidebar.scss +23 -11
  11. package/components/ToggleGroup/toggle-group.css +34 -47
  12. package/components/ToggleGroup/toggle-group.scss +34 -45
  13. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  14. package/docs/components/Icon/examples/Icon.md +82 -11
  15. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  16. package/package.json +1 -1
  17. package/patternfly-no-globals.css +263 -130
  18. package/patternfly-theme-dark-unversioned.css +263 -130
  19. package/patternfly.css +263 -130
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
  22. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
package/components/Icon/icon.scss CHANGED
@@ -1,17 +1,48 @@
1
1
  // @debug $icon; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$icon} {
3
+ :root,
4
+ :where(.#{$icon}) {
4
5
  // Sizes
5
6
  --#{$icon}--Width: 1em;
6
7
  --#{$icon}--Height: 1em;
7
- --#{$icon}--m-sm--Width: var(--#{$pf-global}--icon--FontSize--sm);
8
- --#{$icon}--m-sm--Height: var(--#{$pf-global}--icon--FontSize--sm);
9
- --#{$icon}--m-md--Width: var(--#{$pf-global}--icon--FontSize--md);
10
- --#{$icon}--m-md--Height: var(--#{$pf-global}--icon--FontSize--md);
11
- --#{$icon}--m-lg--Width: var(--#{$pf-global}--icon--FontSize--lg);
12
- --#{$icon}--m-lg--Height: var(--#{$pf-global}--icon--FontSize--lg);
13
- --#{$icon}--m-xl--Width: var(--#{$pf-global}--icon--FontSize--xl);
14
- --#{$icon}--m-xl--Height: var(--#{$pf-global}--icon--FontSize--xl);
8
+
9
+ // Standalone icon sizes
10
+ --#{$icon}--m-sm--Width: var(--pf-t--global--icon--size--sm);
11
+ --#{$icon}--m-sm--Height: var(--pf-t--global--icon--size--sm);
12
+ --#{$icon}--m-md--Width: var(--pf-t--global--icon--size--md);
13
+ --#{$icon}--m-md--Height: var(--pf-t--global--icon--size--md);
14
+ --#{$icon}--m-lg--Width: var(--pf-t--global--icon--size--lg);
15
+ --#{$icon}--m-lg--Height: var(--pf-t--global--icon--size--lg);
16
+ --#{$icon}--m-xl--Width: var(--pf-t--global--icon--size--xl);
17
+ --#{$icon}--m-xl--Height: var(--pf-t--global--icon--size--xl);
18
+ --#{$icon}--m-2xl--Width: var(--pf-t--global--icon--size--2xl);
19
+ --#{$icon}--m-2xl--Height: var(--pf-t--global--icon--size--2xl);
20
+ --#{$icon}--m-3xl--Width: var(--pf-t--global--icon--size--3xl);
21
+ --#{$icon}--m-3xl--Height: var(--pf-t--global--icon--size--3xl);
22
+
23
+ // Body sizes
24
+ --#{$icon}--m-body-sm--Width: var(--pf-t--global--icon--size--body--sm);
25
+ --#{$icon}--m-body-sm--Height: var(--pf-t--global--icon--size--body--sm);
26
+ --#{$icon}--m-body-default--Width: var(--pf-t--global--icon--size--body--default);
27
+ --#{$icon}--m-body-default--Height: var(--pf-t--global--icon--size--body--default);
28
+ --#{$icon}--m-body-lg--Width: var(--pf-t--global--icon--size--body--lg);
29
+ --#{$icon}--m-body-lg--Height: var(--pf-t--global--icon--size--body--lg);
30
+
31
+ // Heading sizes
32
+ --#{$icon}--m-heading-sm--Width: var(--pf-t--global--icon--size--heading--h6);
33
+ --#{$icon}--m-heading-sm--Height: var(--pf-t--global--icon--size--heading--h6);
34
+ --#{$icon}--m-heading-md--Width: var(--pf-t--global--icon--size--heading--h5);
35
+ --#{$icon}--m-heading-md--Height: var(--pf-t--global--icon--size--heading--h5);
36
+ --#{$icon}--m-heading-lg--Width: var(--pf-t--global--icon--size--heading--h4);
37
+ --#{$icon}--m-heading-lg--Height: var(--pf-t--global--icon--size--heading--h4);
38
+ --#{$icon}--m-heading-xl--Width: var(--pf-t--global--icon--size--heading--h3);
39
+ --#{$icon}--m-heading-xl--Height: var(--pf-t--global--icon--size--heading--h3);
40
+ --#{$icon}--m-heading-2xl--Width: var(--pf-t--global--icon--size--heading--h2);
41
+ --#{$icon}--m-heading-2xl--Height: var(--pf-t--global--icon--size--heading--h2);
42
+ --#{$icon}--m-heading-3xl--Width: var(--pf-t--global--icon--size--heading--h1);
43
+ --#{$icon}--m-heading-3xl--Height: var(--pf-t--global--icon--size--heading--h1);
44
+
45
+ // Inline sizes
15
46
  --#{$icon}--m-inline--Width: 1em;
16
47
  --#{$icon}--m-inline--Height: 1em;
17
48
 
@@ -20,21 +51,42 @@
20
51
 
21
52
  // Content color
22
53
  --#{$icon}__content--Color: initial;
23
- --#{$icon}__content--m-danger--Color: var(--#{$pf-global}--danger-color--100);
24
- --#{$icon}__content--m-warning--Color: var(--#{$pf-global}--warning-color--100);
25
- --#{$icon}__content--m-success--Color: var(--#{$pf-global}--success-color--100);
26
- --#{$icon}__content--m-info--Color: var(--#{$pf-global}--info-color--100);
27
- --#{$icon}__content--m-custom--Color: var(--#{$pf-global}--custom-color--100);
54
+ --#{$icon}__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
55
+ --#{$icon}__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
56
+ --#{$icon}__content--m-success--Color: var(--pf-t--global--color--status--success--default);
57
+ --#{$icon}__content--m-info--Color: var(--pf-t--global--color--status--info--default);
58
+ --#{$icon}__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
28
59
  --#{$icon}--m-inline__content--Color: initial;
29
60
 
30
61
  // Content sizes
31
62
  --#{$icon}__content--FontSize: 1em;
32
- --#{$icon}--m-sm__content--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
33
- --#{$icon}--m-md__content--FontSize: var(--#{$pf-global}--icon--FontSize--md);
34
- --#{$icon}--m-lg__content--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
35
- --#{$icon}--m-xl__content--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
63
+
64
+ // Standalone content sizes
65
+ --#{$icon}--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
66
+ --#{$icon}--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
67
+ --#{$icon}--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
68
+ --#{$icon}--m-xl__content--FontSize: var(--pf-t--global--icon--size--xl);
69
+ --#{$icon}--m-2xl__content--FontSize: var(--pf-t--global--icon--size--2xl);
70
+ --#{$icon}--m-3xl__content--FontSize: var(--pf-t--global--icon--size--3xl);
71
+
72
+ // Body content sizes
73
+ --#{$icon}--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--body--sm);
74
+ --#{$icon}--m-body-default__content--FontSize: var(--pf-t--global--icon--size--body--default);
75
+ --#{$icon}--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--body--lg);
76
+
77
+ // Heading content sizes
78
+ --#{$icon}--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--heading--h6);
79
+ --#{$icon}--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--heading--h5);
80
+ --#{$icon}--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--heading--h4);
81
+ --#{$icon}--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--heading--h3);
82
+ --#{$icon}--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--heading--h2);
83
+ --#{$icon}--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--heading--h1);
84
+
85
+ // Inline sizes
36
86
  --#{$icon}--m-inline__content--FontSize: 1em;
87
+ }
37
88
 
89
+ .#{$icon} {
38
90
  position: relative;
39
91
  display: inline-flex;
40
92
  align-items: center;
@@ -56,7 +108,7 @@
56
108
  }
57
109
  }
58
110
 
59
- // Size modifiers
111
+ // Standalone size modifiers
60
112
  &.pf-m-sm {
61
113
  --#{$icon}--Width: var(--#{$icon}--m-sm--Width);
62
114
  --#{$icon}--Height: var(--#{$icon}--m-sm--Height);
@@ -81,6 +133,75 @@
81
133
  --#{$icon}__content--FontSize: var(--#{$icon}--m-xl__content--FontSize);
82
134
  }
83
135
 
136
+ &.pf-m-2xl {
137
+ --#{$icon}--Width: var(--#{$icon}--m-2xl--Width);
138
+ --#{$icon}--Height: var(--#{$icon}--m-2xl--Height);
139
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-2xl__content--FontSize);
140
+ }
141
+
142
+ &.pf-m-3xl {
143
+ --#{$icon}--Width: var(--#{$icon}--m-3xl--Width);
144
+ --#{$icon}--Height: var(--#{$icon}--m-3xl--Height);
145
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-3xl__content--FontSize);
146
+ }
147
+
148
+ // Body size modifiers
149
+ &.pf-m-body-sm {
150
+ --#{$icon}--Width: var(--#{$icon}--m-body-sm--Width);
151
+ --#{$icon}--Height: var(--#{$icon}--m-body-sm--Height);
152
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-body-sm__content--FontSize);
153
+ }
154
+
155
+ &.pf-m-body-default {
156
+ --#{$icon}--Width: var(--#{$icon}--m-body-default--Width);
157
+ --#{$icon}--Height: var(--#{$icon}--m-body-default--Height);
158
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-body-default__content--FontSize);
159
+ }
160
+
161
+ &.pf-m-body-lg {
162
+ --#{$icon}--Width: var(--#{$icon}--m-body-lg--Width);
163
+ --#{$icon}--Height: var(--#{$icon}--m-body-lg--Height);
164
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-lg__content--FontSize);
165
+ }
166
+
167
+ // Heading size modifiers
168
+ &.pf-m-heading-sm {
169
+ --#{$icon}--Width: var(--#{$icon}--m-heading-sm--Width);
170
+ --#{$icon}--Height: var(--#{$icon}--m-heading-sm--Height);
171
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-sm__content--FontSize);
172
+ }
173
+
174
+ &.pf-m-heading-md {
175
+ --#{$icon}--Width: var(--#{$icon}--m-heading-md--Width);
176
+ --#{$icon}--Height: var(--#{$icon}--m-heading-md--Height);
177
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-md__content--FontSize);
178
+ }
179
+
180
+ &.pf-m-heading-lg {
181
+ --#{$icon}--Width: var(--#{$icon}--m-heading-lg--Width);
182
+ --#{$icon}--Height: var(--#{$icon}--m-heading-lg--Height);
183
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-lg__content--FontSize);
184
+ }
185
+
186
+ &.pf-m-heading-xl {
187
+ --#{$icon}--Width: var(--#{$icon}--m-heading-xl--Width);
188
+ --#{$icon}--Height: var(--#{$icon}--m-heading-xl--Height);
189
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-xl__content--FontSize);
190
+ }
191
+
192
+ &.pf-m-heading-2xl {
193
+ --#{$icon}--Width: var(--#{$icon}--m-heading-2xl--Width);
194
+ --#{$icon}--Height: var(--#{$icon}--m-heading-2xl--Height);
195
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-2xl__content--FontSize);
196
+ }
197
+
198
+ &.pf-m-heading-3xl {
199
+ --#{$icon}--Width: var(--#{$icon}--m-heading-3xl--Width);
200
+ --#{$icon}--Height: var(--#{$icon}--m-heading-3xl--Height);
201
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-3xl__content--FontSize);
202
+ }
203
+
204
+ // Progress modifier
84
205
  &.pf-m-in-progress {
85
206
  --#{$icon}__content--Opacity: 0;
86
207
  --#{$icon}__progress--Opacity: 1;
@@ -96,7 +217,7 @@
96
217
  vertical-align: var(--#{$icon}__content--svg--VerticalAlign);
97
218
  }
98
219
 
99
- // Size modifiers
220
+ // Standalone font size modifiers
100
221
  &.pf-m-sm {
101
222
  --#{$icon}__content--FontSize: var(--#{$icon}--m-sm__content--FontSize);
102
223
  }
@@ -112,6 +233,52 @@
112
233
  &.pf-m-xl {
113
234
  --#{$icon}__content--FontSize: var(--#{$icon}--m-xl__content--FontSize);
114
235
  }
236
+
237
+ &.pf-m-2xl {
238
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-2xl__content--FontSize);
239
+ }
240
+
241
+ &.pf-m-3xl {
242
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-3xl__content--FontSize);
243
+ }
244
+
245
+ // Body font size modifiers
246
+ &.pf-m-body-sm {
247
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-body-sm__content--FontSize);
248
+ }
249
+
250
+ &.pf-m-body-default {
251
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-md__content--FontSize);
252
+ }
253
+
254
+ &.pf-m-body-lg {
255
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-lg__content--FontSize);
256
+ }
257
+
258
+ // Heading font size modifiers
259
+ &.pf-m-heading-sm {
260
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-sm__content--FontSize);
261
+ }
262
+
263
+ &.pf-m-heading-md {
264
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-md__content--FontSize);
265
+ }
266
+
267
+ &.pf-m-heading-lg {
268
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-lg__content--FontSize);
269
+ }
270
+
271
+ &.pf-m-heading-xl {
272
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-xl__content--FontSize);
273
+ }
274
+
275
+ &.pf-m-heading-2xl {
276
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-2xl__content--FontSize);
277
+ }
278
+
279
+ &.pf-m-heading-3xl {
280
+ --#{$icon}__content--FontSize: var(--#{$icon}--m-heading-3xl__content--FontSize);
281
+ }
115
282
  }
116
283
 
117
284
  // Content element
package/components/Sidebar/sidebar.css CHANGED
@@ -1,9 +1,9 @@
1
- .pf-v5-c-sidebar {
2
- --pf-v5-c-sidebar--inset: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-sidebar--xl--inset: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5
- --pf-v5-c-sidebar--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
6
- --pf-v5-c-sidebar--BorderColor--base: var(--pf-v5-global--BorderColor--100);
1
+ :root,
2
+ :where(.pf-v5-c-sidebar) {
3
+ --pf-v5-c-sidebar--inset: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
6
+ --pf-v5-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
7
7
  --pf-v5-c-sidebar__panel--PaddingTop: 0;
8
8
  --pf-v5-c-sidebar__panel--PaddingRight: 0;
9
9
  --pf-v5-c-sidebar__panel--PaddingBottom: 0;
@@ -59,11 +59,16 @@
59
59
  --pf-v5-c-sidebar__panel--md--FlexBasis: 15.625rem;
60
60
  --pf-v5-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
61
61
  --pf-v5-c-sidebar__panel--m-stack--FlexBasis: auto;
62
- --pf-v5-c-sidebar__panel--ZIndex: var(--pf-v5-global--ZIndex--xs);
63
- --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
64
- --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
62
+ --pf-v5-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
63
+ --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
+ --pf-v5-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
65
+ --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
66
+ --pf-v5-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
65
67
  --pf-v5-c-sidebar__panel--m-sticky--Top: 0;
66
68
  --pf-v5-c-sidebar__panel--m-sticky--Position: sticky;
69
+ }
70
+
71
+ .pf-v5-c-sidebar {
67
72
  height: 100%;
68
73
  }
69
74
  @media (min-width: 768px) {
@@ -157,6 +162,9 @@
157
162
  --pf-v5-c-sidebar__panel--Position: static;
158
163
  --pf-v5-c-sidebar__panel--Top: auto;
159
164
  }
165
+ .pf-v5-c-sidebar__panel.pf-m-secondary {
166
+ --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-c-sidebar__panel--m-secondary--BackgroundColor);
167
+ }
160
168
 
161
169
  .pf-v5-c-sidebar__content {
162
170
  flex-grow: 1;
@@ -176,6 +184,9 @@
176
184
  .pf-v5-c-sidebar__content.pf-m-no-background {
177
185
  --pf-v5-c-sidebar__content--BackgroundColor: transparent;
178
186
  }
187
+ .pf-v5-c-sidebar__content.pf-m-secondary {
188
+ --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-c-sidebar__content--m-secondary--BackgroundColor);
189
+ }
179
190
  .pf-v5-c-sidebar__content + .pf-v5-c-sidebar__panel {
180
191
  --pf-v5-c-sidebar__panel--Order: 1;
181
192
  }
package/components/Sidebar/sidebar.scss CHANGED
@@ -2,12 +2,12 @@
2
2
  $pf-v5-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
  $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
4
4
 
5
- .#{$sidebar} {
6
- --#{$sidebar}--inset: var(--#{$pf-global}--spacer--md);
7
- --#{$sidebar}--xl--inset: var(--#{$pf-global}--spacer--lg);
8
- --#{$sidebar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
- --#{$sidebar}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
10
- --#{$sidebar}--BorderColor--base: var(--#{$pf-global}--BorderColor--100);
5
+ :root,
6
+ :where(.#{$sidebar}) {
7
+ --#{$sidebar}--inset: var(--pf-t--global--spacer--md);
8
+ --#{$sidebar}--xl--inset: var(--pf-t--global--spacer--lg);
9
+ --#{$sidebar}--BorderWidth--base: var(--pf-t--global--border--width--regular);
10
+ --#{$sidebar}--BorderColor--base: var(--pf-t--global--border--color--default);
11
11
 
12
12
  // Panel
13
13
  --#{$sidebar}__panel--PaddingTop: 0;
@@ -85,15 +85,21 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
85
85
  --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
86
86
  --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
87
87
  --#{$sidebar}__panel--m-stack--FlexBasis: auto;
88
- --#{$sidebar}__panel--ZIndex: var(--#{$pf-global}--ZIndex--xs);
89
- --#{$sidebar}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
88
+ --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
89
+ --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
90
+ --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
90
91
 
91
92
  // Content
92
- --#{$sidebar}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
93
+ --#{$sidebar}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
94
+ --#{$sidebar}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
93
95
 
94
96
  // Sticky
95
97
  --#{$sidebar}__panel--m-sticky--Top: 0;
96
98
  --#{$sidebar}__panel--m-sticky--Position: sticky;
99
+ }
100
+
101
+ .#{$sidebar} {
102
+ height: 100%;
97
103
 
98
104
  @media (min-width: $pf-v5-global--breakpoint--md) {
99
105
  --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
@@ -144,8 +150,6 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
144
150
  --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
145
151
  --#{$sidebar}--m-panel-right__panel--Order: var(--#{$sidebar}--m-split--m-panel-right__panel--Order);
146
152
  }
147
-
148
- height: 100%;
149
153
  }
150
154
 
151
155
  .#{$sidebar}__main {
@@ -192,6 +196,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
192
196
  --#{$sidebar}__panel--Position: static;
193
197
  --#{$sidebar}__panel--Top: auto;
194
198
  }
199
+
200
+ &.pf-m-secondary {
201
+ --#{$sidebar}__panel--BackgroundColor: var(--#{$sidebar}__panel--m-secondary--BackgroundColor);
202
+ }
195
203
  }
196
204
 
197
205
  .#{$sidebar}__content {
@@ -214,6 +222,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
214
222
  --#{$sidebar}__content--BackgroundColor: transparent;
215
223
  }
216
224
 
225
+ &.pf-m-secondary {
226
+ --#{$sidebar}__content--BackgroundColor: var(--#{$sidebar}__content--m-secondary--BackgroundColor);
227
+ }
228
+
217
229
  & + .#{$sidebar}__panel {
218
230
  --#{$sidebar}__panel--Order: 1;
219
231
  }
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -1,38 +1,39 @@
1
- .pf-v5-c-toggle-group {
2
- --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
7
- --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
8
- --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1
+ :where(:root),
2
+ :where(.pf-v5-c-toggle-group) {
3
+ --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
8
+ --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
9
+ --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
10
+ --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10
11
  --pf-v5-c-toggle-group__button--ZIndex: auto;
11
- --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
12
- --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
13
- --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
14
- --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
15
- --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
16
- --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
17
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
19
- --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
20
- --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
21
- --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
22
- --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
23
- --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
24
- --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
25
- --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
26
- --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
27
- --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
28
- --pf-v5-c-toggle-group__button--m-selected--Color: initial;
29
- --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
30
- --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
12
+ --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
13
+ --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
14
+ --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
15
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
17
+ --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
18
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
20
+ --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
21
+ --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
22
+ --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
23
+ --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
24
+ --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
25
+ --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
26
+ --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
27
+ --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
28
+ --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
31
29
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
32
- --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
30
+ --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
33
31
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
34
- --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
35
- --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
32
+ --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
33
+ --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
34
+ }
35
+
36
+ .pf-v5-c-toggle-group {
36
37
  display: flex;
37
38
  }
38
39
  .pf-v5-c-toggle-group.pf-m-compact {
@@ -79,17 +80,12 @@
79
80
  content: "";
80
81
  border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
81
82
  }
82
- .pf-v5-c-toggle-group__button:hover {
83
+ .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
83
84
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
84
85
  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
85
86
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
86
87
  text-decoration: none;
87
88
  }
88
- .pf-v5-c-toggle-group__button:focus {
89
- --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
90
- --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
91
- --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
92
- }
93
89
  .pf-v5-c-toggle-group__button.pf-m-selected {
94
90
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
95
91
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -105,13 +101,4 @@
105
101
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
106
102
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
107
103
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
108
- }
109
-
110
- :where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
111
- --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
112
- --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
113
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
114
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
115
- --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
116
- --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
117
104
  }
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -1,50 +1,50 @@
1
1
  // @debug $toggle-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$toggle-group} {
3
+ :where(:root),
4
+ :where(.#{$toggle-group}) {
4
5
  // button
5
- --#{$toggle-group}__button--PaddingTop: var(--#{$pf-global}--spacer--form-element);
6
- --#{$toggle-group}__button--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$toggle-group}__button--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
8
- --#{$toggle-group}__button--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$toggle-group}__button--FontSize: var(--#{$pf-global}--FontSize--sm);
10
- --#{$toggle-group}__button--LineHeight: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
11
- --#{$toggle-group}__button--Color: var(--#{$pf-global}--Color--100);
12
- --#{$toggle-group}__button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
6
+ --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
7
+ --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
8
+ --#{$toggle-group}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
9
+ --#{$toggle-group}__button--PaddingLeft: var(--pf-t--global--spacer--md);
10
+ --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
11
+ --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
12
+ --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
13
+ --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
14
  --#{$toggle-group}__button--ZIndex: auto;
14
- --#{$toggle-group}__button--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$toggle-group}__button--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
16
- --#{$toggle-group}__button--hover--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
17
- --#{$toggle-group}__button--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
18
- --#{$toggle-group}__button--focus--ZIndex: var(--#{$pf-global}--ZIndex--xs);
19
- --#{$toggle-group}__button--focus--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
20
- --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
21
- --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--disabled-color--100);
22
- --#{$toggle-group}__button--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
23
- --#{$toggle-group}__button--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
15
+ --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
16
+ --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
17
+ --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
18
+ --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
+ --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20
+ --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21
+ --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
24
22
 
25
23
  // item
26
- --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
27
- --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
28
- --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
29
- --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--#{$pf-global}--BorderRadius--sm);
30
- --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--#{$pf-global}--BorderRadius--sm);
24
+ --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
25
+ --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
26
+ --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
27
+ --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
28
+ --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
31
29
 
32
30
  // icon
33
- --#{$toggle-group}__icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
31
+ --#{$toggle-group}__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
34
32
 
35
33
  // Selected
36
- --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
37
- --#{$toggle-group}__button--m-selected--Color: initial;
38
- --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
39
- --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
34
+ --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
35
+ --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
36
+ --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
37
+ --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
40
38
 
41
39
  // Compact
42
40
  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
43
- --#{$toggle-group}--m-compact__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
41
+ --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
44
42
  --#{$toggle-group}--m-compact__button--PaddingBottom: 0;
45
- --#{$toggle-group}--m-compact__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
46
- --#{$toggle-group}--m-compact__button--FontSize: var(--#{$pf-global}--FontSize--xs);
43
+ --#{$toggle-group}--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
44
+ --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
45
+ }
47
46
 
47
+ .#{$toggle-group} {
48
48
  display: flex;
49
49
 
50
50
  &.pf-m-compact {
@@ -107,7 +107,8 @@
107
107
  border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
108
108
  }
109
109
 
110
- &:hover {
110
+ &:hover,
111
+ &:focus {
111
112
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
112
113
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
113
114
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
@@ -115,12 +116,6 @@
115
116
  text-decoration: none;
116
117
  }
117
118
 
118
- &:focus {
119
- --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--focus--BackgroundColor);
120
- --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--focus--ZIndex);
121
- --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--focus--before--BorderColor);
122
- }
123
-
124
119
  &.pf-m-selected {
125
120
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
126
121
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
@@ -142,9 +137,3 @@
142
137
  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
143
138
  }
144
139
 
145
- // stylelint-disable no-invalid-position-at-import-rule
146
- @import "themes/dark/toggle-group";
147
-
148
- @include pf-v5-theme-dark {
149
- @include pf-v5-theme-dark-toggle-group;
150
- }