@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.119

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 (82) hide show
  1. package/base/_fonts.scss +7 -95
  2. package/base/_variables.scss +7 -292
  3. package/base/patternfly-fonts.css +6 -76
  4. package/base/patternfly-variables.css +8 -241
  5. package/components/AppLauncher/app-launcher.css +0 -10
  6. package/components/AppLauncher/app-launcher.scss +0 -7
  7. package/components/Chip/chip-group.css +0 -13
  8. package/components/Chip/chip-group.scss +0 -2
  9. package/components/Chip/chip.css +0 -19
  10. package/components/Chip/chip.scss +0 -9
  11. package/components/Content/content.css +86 -60
  12. package/components/Content/content.scss +129 -40
  13. package/components/ContextSelector/context-selector.css +0 -30
  14. package/components/ContextSelector/context-selector.scss +0 -9
  15. package/components/DataList/data-list.css +46 -49
  16. package/components/Divider/divider.css +28 -31
  17. package/components/Dropdown/dropdown.css +0 -22
  18. package/components/Dropdown/dropdown.scss +0 -7
  19. package/components/LogViewer/log-viewer.css +0 -24
  20. package/components/LogViewer/log-viewer.scss +0 -9
  21. package/components/Menu/menu.css +103 -61
  22. package/components/NumberInput/number-input.css +5 -8
  23. package/components/NumberInput/number-input.scss +1 -1
  24. package/components/OptionsMenu/options-menu.css +0 -15
  25. package/components/OptionsMenu/options-menu.scss +0 -7
  26. package/components/Page/page.css +92 -65
  27. package/components/Page/page.scss +0 -2
  28. package/components/Pagination/pagination.css +8 -8
  29. package/components/Pagination/pagination.scss +1 -1
  30. package/components/Select/select.css +0 -29
  31. package/components/Select/select.scss +0 -9
  32. package/components/Table/table.css +46 -49
  33. package/components/Toolbar/toolbar.css +90 -75
  34. package/docs/components/Content/examples/Content.md +254 -61
  35. package/docs/components/Select/deprecated/Select.md +291 -263
  36. package/docs/components/TextInputGroup/examples/TextInputGroup.md +434 -392
  37. package/docs/components/Toolbar/examples/Toolbar.md +420 -378
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -4
  39. package/docs/demos/Toolbar/examples/Toolbar.css +1 -1
  40. package/docs/demos/Toolbar/examples/Toolbar.md +140 -126
  41. package/package.json +34 -35
  42. package/patternfly-base-no-globals.css +12 -315
  43. package/patternfly-base.css +12 -315
  44. package/patternfly-charts.css +0 -322
  45. package/patternfly-charts.scss +5 -409
  46. package/patternfly-no-globals.css +539 -748
  47. package/patternfly.css +539 -748
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/_all.scss +0 -2
  51. package/sass-utilities/functions.scss +0 -6
  52. package/sass-utilities/mixins.scss +42 -16
  53. package/sass-utilities/scss-variables.scss +0 -211
  54. package/base/_chart-globals.scss +0 -415
  55. package/base/themes/dark/_chart-globals.scss +0 -42
  56. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  57. package/components/Chip/themes/dark/chip.scss +0 -9
  58. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  59. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  60. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  61. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  62. package/components/Select/themes/dark/select.scss +0 -23
  63. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
  64. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  65. package/patternfly-base-theme-dark-unversioned.css +0 -6346
  66. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  67. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  68. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  69. package/patternfly-charts-theme-dark.css +0 -70
  70. package/patternfly-charts-theme-dark.scss +0 -8
  71. package/patternfly-theme-dark-unversioned.css +0 -35621
  72. package/patternfly-theme-dark-unversioned.scss +0 -6
  73. package/patternfly-theme-dark.css +0 -0
  74. package/patternfly-theme-dark.scss +0 -1
  75. package/sass-utilities/colors.scss +0 -82
  76. package/sass-utilities/placeholders.scss +0 -72
  77. package/sass-utilities/themes/dark/_all.scss +0 -4
  78. package/sass-utilities/themes/dark/colors.scss +0 -16
  79. package/sass-utilities/themes/dark/mixins.scss +0 -7
  80. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  81. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  82. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
@@ -1,6 +1,7 @@
1
1
  // @debug $content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$content} {
3
+ :where(:root),
4
+ :where(.#{$content}) {
4
5
  // Body
5
6
  --#{$content}--MarginBottom: var(--pf-t--global--spacer--md);
6
7
  --#{$content}--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -97,12 +98,17 @@
97
98
  // hr
98
99
  --#{$content}--hr--Height: var(--pf-t--global--border--width--divider--default);
99
100
  --#{$content}--hr--BackgroundColor: var(--pf-t--global--border--color--default);
101
+ }
100
102
 
103
+ .#{$content} {
101
104
  font-size: var(--#{$content}--FontSize);
102
105
  line-height: var(--#{$content}--LineHeight);
103
106
  color: var(--#{$content}--Color);
104
107
 
105
- a {
108
+ @at-root :is(
109
+ .#{$content}--a,
110
+ & a
111
+ ) {
106
112
  color: var(--#{$content}--a--Color);
107
113
  text-decoration: var(--#{$content}--a--TextDecoration);
108
114
 
@@ -113,39 +119,64 @@
113
119
  }
114
120
 
115
121
  // stylelint-disable selector-no-qualifying-type
116
- &.pf-m-visited a,
117
- a.pf-m-visited {
122
+ @at-root :is(
123
+ .#{$content}--a.pf-m-visited,
124
+ &.pf-m-visited a,
125
+ & a.pf-m-visited
126
+ ) {
118
127
  &:visited {
119
128
  color: var(--#{$content}--a--visited--Color);
120
129
  }
121
130
  }
122
131
  // stylelint-enable
123
132
 
124
- li + li {
133
+ @at-root :is(
134
+ .#{$content}--li + .#{$content}--li,
135
+ & li + li
136
+ ) {
125
137
  margin-block-start: var(--#{$content}--li--MarginTop);
126
138
  }
127
139
 
128
- p,
129
- dl,
130
- ol,
131
- ul,
132
- blockquote,
133
- small,
134
- pre,
135
- table,
136
- hr {
140
+ @at-root :is(
141
+ .#{$content}--p,
142
+ .#{$content}--dl,
143
+ .#{$content}--ol,
144
+ .#{$content}--ul,
145
+ .#{$content}--blockquote,
146
+ .#{$content}--small,
147
+ .#{$content}--pre,
148
+ .#{$content}--table,
149
+ .#{$content}--hr,
150
+ & p,
151
+ & dl,
152
+ & ol,
153
+ & ul,
154
+ & blockquote,
155
+ & small,
156
+ & pre,
157
+ & table,
158
+ & hr
159
+ ) {
137
160
  &:not(:last-child) {
138
161
  // This variable name doesn't reflect the selector, it's an excpection to the variable system.
139
162
  margin-block-end: var(--#{$content}--MarginBottom);
140
163
  }
141
164
  }
142
165
 
143
- h1,
144
- h2,
145
- h3,
146
- h4,
147
- h5,
148
- h6 {
166
+ @at-root :is(
167
+ .#{$content}--h1,
168
+ .#{$content}--h2,
169
+ .#{$content}--h3,
170
+ .#{$content}--h4,
171
+ .#{$content}--h5,
172
+ .#{$content}--h6,
173
+ & h1,
174
+ & h2,
175
+ & h3,
176
+ & h4,
177
+ & h5,
178
+ & h6
179
+ ) {
149
180
  margin: 0;
150
181
  font-family: var(--#{$content}--heading--FontFamily);
151
182
 
@@ -158,8 +189,12 @@
158
189
  }
159
190
  }
160
191
 
161
- ol,
162
- ul {
192
+ @at-root :is(
193
+ .#{$content}--ol,
194
+ .#{$content}--ul,
195
+ & ol,
196
+ & ul
197
+ ) {
163
198
  margin: 0;
164
199
 
165
200
  // stylelint-disable selector-no-qualifying-type
@@ -171,7 +206,10 @@
171
206
  // stylelint-enable
172
207
  }
173
208
 
174
- h1 {
209
+ @at-root :is(
210
+ .#{$content}--h1,
211
+ & h1
212
+ ) {
175
213
  margin-block-start: var(--#{$content}--h1--MarginTop);
176
214
  margin-block-end: var(--#{$content}--h1--MarginBottom);
177
215
  font-size: var(--#{$content}--h1--FontSize);
@@ -179,7 +217,10 @@
179
217
  line-height: var(--#{$content}--h1--LineHeight);
180
218
  }
181
219
 
182
- h2 {
220
+ @at-root :is(
221
+ .#{$content}--h2,
222
+ & h2
223
+ ) {
183
224
  margin-block-start: var(--#{$content}--h2--MarginTop);
184
225
  margin-block-end: var(--#{$content}--h2--MarginBottom);
185
226
  font-size: var(--#{$content}--h2--FontSize);
@@ -187,7 +228,10 @@
187
228
  line-height: var(--#{$content}--h2--LineHeight);
188
229
  }
189
230
 
190
- h3 {
231
+ @at-root :is(
232
+ .#{$content}--h3,
233
+ & h3
234
+ ) {
191
235
  margin-block-start: var(--#{$content}--h3--MarginTop);
192
236
  margin-block-end: var(--#{$content}--h3--MarginBottom);
193
237
  font-size: var(--#{$content}--h3--FontSize);
@@ -195,7 +239,10 @@
195
239
  line-height: var(--#{$content}--h3--LineHeight);
196
240
  }
197
241
 
198
- h4 {
242
+ @at-root :is(
243
+ .#{$content}--h4,
244
+ & h4
245
+ ) {
199
246
  margin-block-start: var(--#{$content}--h4--MarginTop);
200
247
  margin-block-end: var(--#{$content}--h4--MarginBottom);
201
248
  font-size: var(--#{$content}--h4--FontSize);
@@ -203,7 +250,10 @@
203
250
  line-height: var(--#{$content}--h4--LineHeight);
204
251
  }
205
252
 
206
- h5 {
253
+ @at-root :is(
254
+ .#{$content}--h5,
255
+ & h5
256
+ ) {
207
257
  margin-block-start: var(--#{$content}--h5--MarginTop);
208
258
  margin-block-end: var(--#{$content}--h5--MarginBottom);
209
259
  font-size: var(--#{$content}--h5--FontSize);
@@ -211,7 +261,10 @@
211
261
  line-height: var(--#{$content}--h5--LineHeight);
212
262
  }
213
263
 
214
- h6 {
264
+ @at-root :is(
265
+ .#{$content}--h6,
266
+ & h6
267
+ ) {
215
268
  margin-block-start: var(--#{$content}--h6--MarginTop);
216
269
  margin-block-end: var(--#{$content}--h6--MarginBottom);
217
270
  font-size: var(--#{$content}--h6--FontSize);
@@ -219,7 +272,10 @@
219
272
  line-height: var(--#{$content}--h6--LineHeight);
220
273
  }
221
274
 
222
- small {
275
+ @at-root :is(
276
+ .#{$content}--small,
277
+ & small
278
+ ) {
223
279
  display: block;
224
280
  font-size: var(--#{$content}--small--FontSize);
225
281
  line-height: var(--#{$content}--small--LineHeight);
@@ -230,7 +286,10 @@
230
286
  }
231
287
  }
232
288
 
233
- blockquote {
289
+ @at-root :is(
290
+ .#{$content}--blockquote,
291
+ & blockquote
292
+ ) {
234
293
  padding-block-start: var(--#{$content}--blockquote--PaddingTop);
235
294
  padding-block-end: var(--#{$content}--blockquote--PaddingBottom);
236
295
  padding-inline-start: var(--#{$content}--blockquote--PaddingLeft);
@@ -239,48 +298,72 @@
239
298
  border-inline-start: var(--#{$content}--blockquote--BorderLeftWidth) solid var(--#{$content}--blockquote--BorderLeftColor);
240
299
  }
241
300
 
242
- hr {
301
+ @at-root :is(
302
+ .#{$content}--hr,
303
+ & hr
304
+ ) {
243
305
  height: var(--#{$content}--hr--Height);
244
306
  background-color: var(--#{$content}--hr--BackgroundColor);
245
307
  border: none;
246
308
  }
247
309
 
248
- ol {
310
+ @at-root :is(
311
+ .#{$content}--ol,
312
+ & ol
313
+ ) {
249
314
  padding-inline-start: var(--#{$content}--ol--PaddingLeft);
250
315
  margin-inline-start: var(--#{$content}--ol--MarginLeft);
251
316
 
252
- ul {
317
+ :is(
318
+ .#{$content}--ul,
319
+ ul
320
+ ) {
253
321
  --#{$content}--ul--MarginLeft: var(--#{$content}--ul--nested--MarginLeft);
254
322
 
255
323
  margin-block-start: var(--#{$content}--ul--nested--MarginTop);
256
324
  }
257
325
 
258
- ol {
326
+ :is(
327
+ .#{$content}--ol,
328
+ ol
329
+ ) {
259
330
  --#{$content}--ol--MarginLeft: var(--#{$content}--ol--nested--MarginLeft);
260
331
 
261
332
  margin-block-start: var(--#{$content}--ol--nested--MarginTop);
262
333
  }
263
334
  }
264
335
 
265
- ul {
336
+ @at-root :is(
337
+ .#{$content}--ul,
338
+ & ul
339
+ ) {
266
340
  padding-inline-start: var(--#{$content}--ul--PaddingLeft);
267
341
  margin-inline-start: var(--#{$content}--ul--MarginLeft);
268
342
  list-style: var(--#{$content}--ul--ListStyle);
269
343
 
270
- ul {
344
+ :is(
345
+ .#{$content}--ul,
346
+ ul
347
+ ) {
271
348
  --#{$content}--ul--MarginLeft: var(--#{$content}--ul--nested--MarginLeft);
272
349
 
273
350
  margin-block-start: var(--#{$content}--ul--nested--MarginTop);
274
351
  }
275
352
 
276
- ol {
353
+ :is(
354
+ .#{$content}--ol,
355
+ ol
356
+ ) {
277
357
  --#{$content}--ol--MarginLeft: var(--#{$content}--ol--nested--MarginLeft);
278
358
 
279
359
  margin-block-start: var(--#{$content}--ol--nested--MarginTop);
280
360
  }
281
361
  }
282
362
 
283
- dl {
363
+ @at-root :is(
364
+ .#{$content}--dl,
365
+ & dl
366
+ ) {
284
367
  display: grid;
285
368
  grid-template-columns: 1fr;
286
369
 
@@ -291,7 +374,10 @@
291
374
  }
292
375
  }
293
376
 
294
- dt {
377
+ @at-root :is(
378
+ .#{$content}--dt,
379
+ & dt
380
+ ) {
295
381
  font-weight: var(--#{$content}--dt--FontWeight);
296
382
 
297
383
  &:not(:first-child) {
@@ -307,7 +393,10 @@
307
393
  }
308
394
  }
309
395
 
310
- dd {
396
+ @at-root :is(
397
+ .#{$content}--dd,
398
+ & dd
399
+ ) {
311
400
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
312
401
  grid-column: 2;
313
402
  }
@@ -1,15 +1,3 @@
1
- .pf-v6-c-context-selector__menu {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
1
  .pf-v6-c-context-selector {
14
2
  --pf-v6-c-context-selector--Width: 15.625rem;
15
3
  --pf-v6-c-context-selector__toggle--PaddingTop: var(--pf-v6-global--spacer--form-element);
@@ -253,7 +241,6 @@
253
241
  }
254
242
 
255
243
  .pf-v6-c-context-selector__menu {
256
- color: var(--pf-v6-global--Color--100);
257
244
  position: absolute;
258
245
  inset-block-start: var(--pf-v6-c-context-selector__menu--Top);
259
246
  z-index: var(--pf-v6-c-context-selector__menu--ZIndex);
@@ -316,21 +303,4 @@
316
303
  .pf-v6-c-context-selector__menu-list-item.pf-m-disabled, .pf-v6-c-context-selector__menu-list-item:disabled {
317
304
  --pf-v6-c-context-selector__menu-list-item--Color: var(--pf-v6-c-context-selector__menu-list-item--disabled--Color);
318
305
  pointer-events: none;
319
- }
320
-
321
- :where(.pf-v6-theme-dark) .pf-v6-c-context-selector {
322
- --pf-v6-c-context-selector__menu--Top: 100%;
323
- --pf-v6-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
324
- }
325
- :where(.pf-v6-theme-dark) .pf-v6-c-context-selector__toggle {
326
- background: var(--pf-v6-global--BackgroundColor--400);
327
- }
328
- :where(.pf-v6-theme-dark) .pf-v6-c-context-selector__toggle.pf-m-plain {
329
- background: transparent;
330
- }
331
- :where(.pf-v6-theme-dark) .pf-v6-c-context-selector__menu {
332
- background: var(--pf-v6-global--BackgroundColor--300);
333
- }
334
- :where(.pf-v6-theme-dark) .pf-v6-c-context-selector__menu-footer {
335
- border-block-start: 1px solid var(--pf-v6-global--BorderColor--300);
336
306
  }
@@ -303,8 +303,6 @@
303
303
  }
304
304
 
305
305
  .#{$context-selector}__menu {
306
- @include pf-v6-t-light;
307
-
308
306
  position: absolute;
309
307
  inset-block-start: var(--#{$context-selector}__menu--Top);
310
308
  z-index: var(--#{$context-selector}__menu--ZIndex);
@@ -375,10 +373,3 @@
375
373
  pointer-events: none;
376
374
  }
377
375
  }
378
-
379
- // stylelint-disable no-invalid-position-at-import-rule
380
- @import "themes/dark/context-selector";
381
-
382
- @include pf-v6-theme-dark {
383
- @include pf-v6-theme-dark-context-selector;
384
- }
@@ -1,52 +1,3 @@
1
- .pf-v6-c-data-list__item-action {
2
- --pf-v6-hidden-visible--hidden--Display: none;
3
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4
- display: var(--pf-v6-hidden-visible--Display);
5
- }
6
- .pf-m-hidden.pf-v6-c-data-list__item-action {
7
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
- }
9
- @media screen and (min-width: 576px) {
10
- .pf-m-hidden-on-sm.pf-v6-c-data-list__item-action {
11
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
- }
13
- .pf-m-visible-on-sm.pf-v6-c-data-list__item-action {
14
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
- }
16
- }
17
- @media screen and (min-width: 768px) {
18
- .pf-m-hidden-on-md.pf-v6-c-data-list__item-action {
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
- }
21
- .pf-m-visible-on-md.pf-v6-c-data-list__item-action {
22
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
- }
24
- }
25
- @media screen and (min-width: 992px) {
26
- .pf-m-hidden-on-lg.pf-v6-c-data-list__item-action {
27
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
- }
29
- .pf-m-visible-on-lg.pf-v6-c-data-list__item-action {
30
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
- }
32
- }
33
- @media screen and (min-width: 1200px) {
34
- .pf-m-hidden-on-xl.pf-v6-c-data-list__item-action {
35
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
- }
37
- .pf-m-visible-on-xl.pf-v6-c-data-list__item-action {
38
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
- }
40
- }
41
- @media screen and (min-width: 1450px) {
42
- .pf-m-hidden-on-2xl.pf-v6-c-data-list__item-action {
43
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
- }
45
- .pf-m-visible-on-2xl.pf-v6-c-data-list__item-action {
46
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
- }
48
- }
49
-
50
1
  @media screen and (min-width: 768px) {
51
2
  .pf-v6-c-data-list:not([class*=pf-m-grid]) {
52
3
  --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
@@ -731,12 +682,58 @@
731
682
 
732
683
  .pf-v6-c-data-list__item-action {
733
684
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
685
+ --pf-v6-hidden-visible--hidden--Display: none;
686
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
687
+ display: var(--pf-v6-hidden-visible--Display);
734
688
  align-content: flex-start;
735
689
  align-items: flex-start;
736
690
  padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingTop);
737
691
  padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBottom);
738
692
  margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginLeft);
739
693
  }
694
+ .pf-v6-c-data-list__item-action.pf-m-hidden {
695
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
696
+ }
697
+ @media screen and (min-width: 576px) {
698
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-sm {
699
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
700
+ }
701
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-sm {
702
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
703
+ }
704
+ }
705
+ @media screen and (min-width: 768px) {
706
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-md {
707
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
708
+ }
709
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-md {
710
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
711
+ }
712
+ }
713
+ @media screen and (min-width: 992px) {
714
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-lg {
715
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
716
+ }
717
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-lg {
718
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
719
+ }
720
+ }
721
+ @media screen and (min-width: 1200px) {
722
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-xl {
723
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
724
+ }
725
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-xl {
726
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
727
+ }
728
+ }
729
+ @media screen and (min-width: 1450px) {
730
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-2xl {
731
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
732
+ }
733
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-2xl {
734
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
735
+ }
736
+ }
740
737
  .pf-v6-c-data-list__item-action > *:not(:last-child) {
741
738
  margin-inline-end: var(--pf-v6-c-data-list__item-action--not-last-child--MarginRight);
742
739
  }
@@ -1,71 +1,68 @@
1
+ :root,
2
+ :where(.pf-v6-c-divider) {
3
+ --pf-v6-c-divider--Display: flex;
4
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
5
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
6
+ --pf-v6-c-divider--before--FlexBasis: 100%;
7
+ }
8
+
1
9
  .pf-v6-c-divider {
10
+ flex-direction: row;
11
+ width: 100%;
12
+ height: var(--pf-v6-c-divider--Size);
13
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2
14
  --pf-v6-hidden-visible--hidden--Display: none;
3
15
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4
16
  display: var(--pf-v6-hidden-visible--Display);
17
+ flex-shrink: 0;
18
+ align-items: stretch;
19
+ align-self: stretch;
20
+ justify-content: center;
21
+ border: 0;
5
22
  }
6
- .pf-m-hidden.pf-v6-c-divider {
23
+ .pf-v6-c-divider.pf-m-hidden {
7
24
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
25
  }
9
26
  @media screen and (min-width: 576px) {
10
- .pf-m-hidden-on-sm.pf-v6-c-divider {
27
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
11
28
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
29
  }
13
- .pf-m-visible-on-sm.pf-v6-c-divider {
30
+ .pf-v6-c-divider.pf-m-visible-on-sm {
14
31
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
32
  }
16
33
  }
17
34
  @media screen and (min-width: 768px) {
18
- .pf-m-hidden-on-md.pf-v6-c-divider {
35
+ .pf-v6-c-divider.pf-m-hidden-on-md {
19
36
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
37
  }
21
- .pf-m-visible-on-md.pf-v6-c-divider {
38
+ .pf-v6-c-divider.pf-m-visible-on-md {
22
39
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
40
  }
24
41
  }
25
42
  @media screen and (min-width: 992px) {
26
- .pf-m-hidden-on-lg.pf-v6-c-divider {
43
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
27
44
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
45
  }
29
- .pf-m-visible-on-lg.pf-v6-c-divider {
46
+ .pf-v6-c-divider.pf-m-visible-on-lg {
30
47
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
48
  }
32
49
  }
33
50
  @media screen and (min-width: 1200px) {
34
- .pf-m-hidden-on-xl.pf-v6-c-divider {
51
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
35
52
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
53
  }
37
- .pf-m-visible-on-xl.pf-v6-c-divider {
54
+ .pf-v6-c-divider.pf-m-visible-on-xl {
38
55
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
56
  }
40
57
  }
41
58
  @media screen and (min-width: 1450px) {
42
- .pf-m-hidden-on-2xl.pf-v6-c-divider {
59
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
43
60
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
61
  }
45
- .pf-m-visible-on-2xl.pf-v6-c-divider {
62
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
46
63
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
64
  }
48
65
  }
49
-
50
- :root,
51
- :where(.pf-v6-c-divider) {
52
- --pf-v6-c-divider--Display: flex;
53
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
54
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
55
- --pf-v6-c-divider--before--FlexBasis: 100%;
56
- }
57
-
58
- .pf-v6-c-divider {
59
- flex-direction: row;
60
- width: 100%;
61
- height: var(--pf-v6-c-divider--Size);
62
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
63
- flex-shrink: 0;
64
- align-items: stretch;
65
- align-self: stretch;
66
- justify-content: center;
67
- border: 0;
68
- }
69
66
  .pf-v6-c-divider::before {
70
67
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
71
68
  content: "";
@@ -661,26 +661,4 @@
661
661
  font-size: var(--pf-v6-c-dropdown__group-title--FontSize);
662
662
  font-weight: var(--pf-v6-c-dropdown__group-title--FontWeight);
663
663
  color: var(--pf-v6-c-dropdown__group-title--Color);
664
- }
665
-
666
- :where(.pf-v6-theme-dark) .pf-v6-c-dropdown {
667
- --pf-v6-c-dropdown__toggle--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
668
- --pf-v6-c-dropdown__toggle--before--BorderTopColor: transparent;
669
- --pf-v6-c-dropdown__toggle--before--BorderRightColor: transparent;
670
- --pf-v6-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v6-global--BorderColor--400);
671
- --pf-v6-c-dropdown__toggle--before--BorderLeftColor: transparent;
672
- --pf-v6-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-v6-global--palette--black-500);
673
- --pf-v6-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-global--primary-color--300);
674
- --pf-v6-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--300);
675
- --pf-v6-c-dropdown__toggle--m-primary--Color: var(--pf-v6-global--primary-color--400);
676
- --pf-v6-c-dropdown__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--300);
677
- --pf-v6-c-dropdown__menu--Top: 100%;
678
- --pf-v6-c-dropdown--m-top__menu--TranslateY: -100%;
679
- --pf-v6-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
680
- }
681
- :where(.pf-v6-theme-dark) .pf-v6-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-v6-theme-dark) .pf-v6-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
682
- color: var(--pf-v6-global--palette--black-100);
683
- }
684
- :where(.pf-v6-theme-dark) .pf-v6-c-dropdown__toggle.pf-m-plain {
685
- background: transparent;
686
664
  }
@@ -811,10 +811,3 @@ $pf-v6-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
811
811
  font-weight: var(--#{$dropdown}__group-title--FontWeight);
812
812
  color: var(--#{$dropdown}__group-title--Color);
813
813
  }
814
-
815
- // stylelint-disable no-invalid-position-at-import-rule
816
- @import "themes/dark/dropdown";
817
-
818
- @include pf-v6-theme-dark {
819
- @include pf-v6-theme-dark-dropdown;
820
- }
@@ -1,18 +1,3 @@
1
- .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
11
- }
12
- .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main .pf-v6-c-button {
13
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
14
- }
15
-
16
1
  .pf-v6-c-log-viewer {
17
2
  --pf-v6-c-log-viewer--Height: 100%;
18
3
  --pf-v6-c-log-viewer--MaxHeight: auto;
@@ -69,7 +54,6 @@
69
54
  --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth);
70
55
  }
71
56
  .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
72
- color: var(--pf-v6-global--Color--100);
73
57
  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
74
58
  --pf-v6-c-log-viewer__main--BorderColor: var(--pf-v6-global--BorderColor--100);
75
59
  --pf-v6-c-log-viewer__text--Color: var(--pf-v6-global--Color--100);
@@ -186,12 +170,4 @@
186
170
 
187
171
  .pf-v6-c-log-viewer__timestamp {
188
172
  font-weight: var(--pf-v6-c-log-viewer__timestamp--FontWeight);
189
- }
190
-
191
- :where(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main .pf-v6-c-button {
192
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--300);
193
- }
194
-
195
- :where(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
196
- color: var(--pf-v6-global--Color--100);
197
173
  }