@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
@@ -72,8 +72,6 @@
72
72
  --#{$log-viewer}__main--BorderWidth: var(--#{$log-viewer}--m-dark__main--BorderWidth);
73
73
 
74
74
  .#{$log-viewer}__main {
75
- @include pf-v6-t-dark;
76
-
77
75
  --#{$log-viewer}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
78
76
  --#{$log-viewer}__main--BorderColor: var(--#{$pf-global}--BorderColor--100);
79
77
  --#{$log-viewer}__text--Color: var(--#{$pf-global}--Color--100);
@@ -217,10 +215,3 @@
217
215
  .#{$log-viewer}__timestamp {
218
216
  font-weight: var(--#{$log-viewer}__timestamp--FontWeight);
219
217
  }
220
-
221
- // stylelint-disable no-invalid-position-at-import-rule
222
- @import "themes/dark/log-viewer";
223
-
224
- @include pf-v6-theme-dark {
225
- @include pf-v6-theme-dark-log-viewer;
226
- }
@@ -1,64 +1,3 @@
1
- .pf-v6-c-menu__item, .pf-v6-c-menu__list,
2
- .pf-v6-c-menu__group {
3
- --pf-v6-hidden-visible--hidden--Display: none;
4
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5
- display: var(--pf-v6-hidden-visible--Display);
6
- }
7
- .pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
8
- .pf-m-hidden.pf-v6-c-menu__group {
9
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10
- }
11
- @media screen and (min-width: 576px) {
12
- .pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
13
- .pf-m-hidden-on-sm.pf-v6-c-menu__group {
14
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
15
- }
16
- .pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
17
- .pf-m-visible-on-sm.pf-v6-c-menu__group {
18
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
19
- }
20
- }
21
- @media screen and (min-width: 768px) {
22
- .pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
23
- .pf-m-hidden-on-md.pf-v6-c-menu__group {
24
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
25
- }
26
- .pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
27
- .pf-m-visible-on-md.pf-v6-c-menu__group {
28
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
29
- }
30
- }
31
- @media screen and (min-width: 992px) {
32
- .pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
33
- .pf-m-hidden-on-lg.pf-v6-c-menu__group {
34
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
- }
36
- .pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
37
- .pf-m-visible-on-lg.pf-v6-c-menu__group {
38
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
- }
40
- }
41
- @media screen and (min-width: 1200px) {
42
- .pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
43
- .pf-m-hidden-on-xl.pf-v6-c-menu__group {
44
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
45
- }
46
- .pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
47
- .pf-m-visible-on-xl.pf-v6-c-menu__group {
48
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
- }
50
- }
51
- @media screen and (min-width: 1450px) {
52
- .pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
53
- .pf-m-hidden-on-2xl.pf-v6-c-menu__group {
54
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
55
- }
56
- .pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
57
- .pf-m-visible-on-2xl.pf-v6-c-menu__group {
58
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
59
- }
60
- }
61
-
62
1
  :where(:root),
63
2
  :where(.pf-v6-c-menu) {
64
3
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
@@ -165,6 +104,63 @@
165
104
  .pf-v6-c-menu__list,
166
105
  .pf-v6-c-menu__group {
167
106
  --pf-v6-hidden-visible--visible--Display: grid;
107
+ --pf-v6-hidden-visible--hidden--Display: none;
108
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
109
+ display: var(--pf-v6-hidden-visible--Display);
110
+ }
111
+ .pf-v6-c-menu__list.pf-m-hidden,
112
+ .pf-v6-c-menu__group.pf-m-hidden {
113
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
114
+ }
115
+ @media screen and (min-width: 576px) {
116
+ .pf-v6-c-menu__list.pf-m-hidden-on-sm,
117
+ .pf-v6-c-menu__group.pf-m-hidden-on-sm {
118
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
119
+ }
120
+ .pf-v6-c-menu__list.pf-m-visible-on-sm,
121
+ .pf-v6-c-menu__group.pf-m-visible-on-sm {
122
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
123
+ }
124
+ }
125
+ @media screen and (min-width: 768px) {
126
+ .pf-v6-c-menu__list.pf-m-hidden-on-md,
127
+ .pf-v6-c-menu__group.pf-m-hidden-on-md {
128
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
129
+ }
130
+ .pf-v6-c-menu__list.pf-m-visible-on-md,
131
+ .pf-v6-c-menu__group.pf-m-visible-on-md {
132
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
133
+ }
134
+ }
135
+ @media screen and (min-width: 992px) {
136
+ .pf-v6-c-menu__list.pf-m-hidden-on-lg,
137
+ .pf-v6-c-menu__group.pf-m-hidden-on-lg {
138
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
139
+ }
140
+ .pf-v6-c-menu__list.pf-m-visible-on-lg,
141
+ .pf-v6-c-menu__group.pf-m-visible-on-lg {
142
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
143
+ }
144
+ }
145
+ @media screen and (min-width: 1200px) {
146
+ .pf-v6-c-menu__list.pf-m-hidden-on-xl,
147
+ .pf-v6-c-menu__group.pf-m-hidden-on-xl {
148
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
149
+ }
150
+ .pf-v6-c-menu__list.pf-m-visible-on-xl,
151
+ .pf-v6-c-menu__group.pf-m-visible-on-xl {
152
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
153
+ }
154
+ }
155
+ @media screen and (min-width: 1450px) {
156
+ .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
157
+ .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
158
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
159
+ }
160
+ .pf-v6-c-menu__list.pf-m-visible-on-2xl,
161
+ .pf-v6-c-menu__group.pf-m-visible-on-2xl {
162
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
163
+ }
168
164
  }
169
165
 
170
166
  .pf-v6-c-menu__list,
@@ -426,6 +422,52 @@
426
422
  border: 0;
427
423
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
428
424
  --pf-v6-hidden-visible--visible--Display: flex;
425
+ --pf-v6-hidden-visible--hidden--Display: none;
426
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
427
+ display: var(--pf-v6-hidden-visible--Display);
428
+ }
429
+ .pf-v6-c-menu__item.pf-m-hidden {
430
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
431
+ }
432
+ @media screen and (min-width: 576px) {
433
+ .pf-v6-c-menu__item.pf-m-hidden-on-sm {
434
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
435
+ }
436
+ .pf-v6-c-menu__item.pf-m-visible-on-sm {
437
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
438
+ }
439
+ }
440
+ @media screen and (min-width: 768px) {
441
+ .pf-v6-c-menu__item.pf-m-hidden-on-md {
442
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
443
+ }
444
+ .pf-v6-c-menu__item.pf-m-visible-on-md {
445
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
446
+ }
447
+ }
448
+ @media screen and (min-width: 992px) {
449
+ .pf-v6-c-menu__item.pf-m-hidden-on-lg {
450
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
451
+ }
452
+ .pf-v6-c-menu__item.pf-m-visible-on-lg {
453
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
454
+ }
455
+ }
456
+ @media screen and (min-width: 1200px) {
457
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
458
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
459
+ }
460
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
461
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
462
+ }
463
+ }
464
+ @media screen and (min-width: 1450px) {
465
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
466
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
467
+ }
468
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
469
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
470
+ }
429
471
  }
430
472
  :where(label).pf-v6-c-menu__item {
431
473
  cursor: pointer;
@@ -1,11 +1,3 @@
1
- .pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
2
- appearance: textfield;
3
- }
4
- .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
5
- margin: 0;
6
- appearance: none;
7
- }
8
-
9
1
  :root,
10
2
  .pf-v6-c-number-input {
11
3
  --pf-v6-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
@@ -30,6 +22,11 @@
30
22
  }
31
23
  .pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
32
24
  text-align: end;
25
+ appearance: textfield;
26
+ }
27
+ .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
28
+ margin: 0;
29
+ appearance: none;
33
30
  }
34
31
 
35
32
  .pf-v6-c-input-group + .pf-v6-c-number-input__unit,
@@ -30,7 +30,7 @@
30
30
  > :is(input) {
31
31
  text-align: end;
32
32
 
33
- @extend %pf-v6-remove-num-arrows;
33
+ @include pf-v6-remove-num-arrows;
34
34
  }
35
35
  }
36
36
  }
@@ -261,19 +261,4 @@
261
261
  font-size: var(--pf-v6-c-options-menu__group-title--FontSize);
262
262
  font-weight: var(--pf-v6-c-options-menu__group-title--FontWeight);
263
263
  color: var(--pf-v6-c-options-menu__group-title--Color);
264
- }
265
-
266
- :where(.pf-v6-theme-dark) .pf-v6-c-options-menu {
267
- --pf-v6-c-options-menu__toggle--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
268
- --pf-v6-c-options-menu__toggle--BorderTopColor: transparent;
269
- --pf-v6-c-options-menu__toggle--BorderRightColor: transparent;
270
- --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-global--BorderColor--400);
271
- --pf-v6-c-options-menu__toggle--BorderLeftColor: transparent;
272
- --pf-v6-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-v6-global--palette--black-500);
273
- --pf-v6-c-options-menu__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--300);
274
- --pf-v6-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
275
- --pf-v6-c-options-menu__menu--Top: 100%;
276
- }
277
- :where(.pf-v6-theme-dark) .pf-v6-c-options-menu__toggle.pf-m-plain {
278
- background: transparent;
279
264
  }
@@ -323,10 +323,3 @@
323
323
  font-weight: var(--#{$options-menu}__group-title--FontWeight);
324
324
  color: var(--#{$options-menu}__group-title--Color);
325
325
  }
326
-
327
- // stylelint-disable no-invalid-position-at-import-rule
328
- @import "themes/dark/options-menu";
329
-
330
- @include pf-v6-theme-dark {
331
- @include pf-v6-theme-dark-options-menu;
332
- }
@@ -1,67 +1,3 @@
1
- .pf-v6-c-page__sidebar-body.pf-m-menu .pf-v6-c-context-selector {
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-page__sidebar-body.pf-m-menu .pf-v6-c-context-selector .pf-v6-c-button {
13
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
14
- }
15
-
16
- .pf-v6-c-page__header-tools-item, .pf-v6-c-page__header-tools-group {
17
- --pf-v6-hidden-visible--hidden--Display: none;
18
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
19
- display: var(--pf-v6-hidden-visible--Display);
20
- }
21
- .pf-m-hidden.pf-v6-c-page__header-tools-item, .pf-m-hidden.pf-v6-c-page__header-tools-group {
22
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
23
- }
24
- @media screen and (min-width: 576px) {
25
- .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-group {
26
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
27
- }
28
- .pf-m-visible-on-sm.pf-v6-c-page__header-tools-item, .pf-m-visible-on-sm.pf-v6-c-page__header-tools-group {
29
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
30
- }
31
- }
32
- @media screen and (min-width: 768px) {
33
- .pf-m-hidden-on-md.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-md.pf-v6-c-page__header-tools-group {
34
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
- }
36
- .pf-m-visible-on-md.pf-v6-c-page__header-tools-item, .pf-m-visible-on-md.pf-v6-c-page__header-tools-group {
37
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
38
- }
39
- }
40
- @media screen and (min-width: 992px) {
41
- .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-group {
42
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
43
- }
44
- .pf-m-visible-on-lg.pf-v6-c-page__header-tools-item, .pf-m-visible-on-lg.pf-v6-c-page__header-tools-group {
45
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
46
- }
47
- }
48
- @media screen and (min-width: 1200px) {
49
- .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-group {
50
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
51
- }
52
- .pf-m-visible-on-xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-xl.pf-v6-c-page__header-tools-group {
53
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
54
- }
55
- }
56
- @media screen and (min-width: 1450px) {
57
- .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-group {
58
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
59
- }
60
- .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-group {
61
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
62
- }
63
- }
64
-
65
1
  :root {
66
2
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
67
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
@@ -307,14 +243,106 @@
307
243
 
308
244
  .pf-v6-c-page__header-tools-group {
309
245
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
246
+ --pf-v6-hidden-visible--hidden--Display: none;
247
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
248
+ display: var(--pf-v6-hidden-visible--Display);
310
249
  align-items: center;
311
250
  }
251
+ .pf-v6-c-page__header-tools-group.pf-m-hidden {
252
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
253
+ }
254
+ @media screen and (min-width: 576px) {
255
+ .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
256
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
257
+ }
258
+ .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
259
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
260
+ }
261
+ }
262
+ @media screen and (min-width: 768px) {
263
+ .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
264
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
265
+ }
266
+ .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
267
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
268
+ }
269
+ }
270
+ @media screen and (min-width: 992px) {
271
+ .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
272
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
273
+ }
274
+ .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
275
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
276
+ }
277
+ }
278
+ @media screen and (min-width: 1200px) {
279
+ .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
280
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
281
+ }
282
+ .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
283
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
284
+ }
285
+ }
286
+ @media screen and (min-width: 1450px) {
287
+ .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
288
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
289
+ }
290
+ .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
291
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
292
+ }
293
+ }
312
294
  .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
313
295
  margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginLeft);
314
296
  }
315
297
 
316
298
  .pf-v6-c-page__header-tools-item {
317
299
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
300
+ --pf-v6-hidden-visible--hidden--Display: none;
301
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
302
+ display: var(--pf-v6-hidden-visible--Display);
303
+ }
304
+ .pf-v6-c-page__header-tools-item.pf-m-hidden {
305
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
306
+ }
307
+ @media screen and (min-width: 576px) {
308
+ .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
309
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
310
+ }
311
+ .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
312
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
313
+ }
314
+ }
315
+ @media screen and (min-width: 768px) {
316
+ .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
317
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
318
+ }
319
+ .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
320
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
321
+ }
322
+ }
323
+ @media screen and (min-width: 992px) {
324
+ .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
325
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
326
+ }
327
+ .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
328
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
329
+ }
330
+ }
331
+ @media screen and (min-width: 1200px) {
332
+ .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
333
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
334
+ }
335
+ .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
336
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
337
+ }
338
+ }
339
+ @media screen and (min-width: 1450px) {
340
+ .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
341
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
342
+ }
343
+ .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
344
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
345
+ }
318
346
  }
319
347
 
320
348
  .pf-v6-c-page__sidebar {
@@ -388,7 +416,6 @@
388
416
  --pf-v6-c-context-selector__toggle--BorderBottomColor: var(--pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
389
417
  --pf-v6-c-context-selector__toggle--BorderLeftColor: transparent;
390
418
  --pf-v6-c-context-selector__menu--Top: 100%;
391
- color: var(--pf-v6-global--Color--100);
392
419
  width: 100%;
393
420
  }
394
421
  .pf-v6-c-page__sidebar-body.pf-m-page-insets {
@@ -393,8 +393,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
393
393
  --#{$context-selector}__toggle--BorderLeftColor: transparent;
394
394
  --#{$context-selector}__menu--Top: 100%;
395
395
 
396
- @include pf-v6-t-dark;
397
-
398
396
  width: 100%;
399
397
  }
400
398
  }
@@ -1,11 +1,3 @@
1
- .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
2
- appearance: textfield;
3
- }
4
- .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
5
- margin: 0;
6
- appearance: none;
7
- }
8
-
9
1
  :where(:root),
10
2
  :where(.pf-v6-c-pagination) {
11
3
  --pf-v6-c-pagination--inset: 0;
@@ -162,6 +154,14 @@
162
154
  .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control {
163
155
  width: var(--pf-v6-c-pagination__nav-page-select--c-form-control--Width);
164
156
  }
157
+ .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
158
+ appearance: textfield;
159
+ }
160
+ .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
161
+ margin: 0;
162
+ appearance: none;
163
+ }
164
+
165
165
  .pf-v6-c-pagination__total-items {
166
166
  display: var(--pf-v6-c-pagination__total-items--Display);
167
167
  }
@@ -189,7 +189,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
189
189
  width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
190
190
 
191
191
  > :is(input) {
192
- @extend %pf-v6-remove-num-arrows;
192
+ @include pf-v6-remove-num-arrows;
193
193
  }
194
194
  }
195
195
  }
@@ -1,17 +1,4 @@
1
1
  .pf-v6-c-select {
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
- .pf-v6-c-select {
14
- color: var(--pf-v6-global--Color--100);
15
2
  --pf-v6-c-select__toggle--PaddingTop: var(--pf-v6-global--spacer--form-element);
16
3
  --pf-v6-c-select__toggle--PaddingRight: var(--pf-v6-global--spacer--sm);
17
4
  --pf-v6-c-select__toggle--PaddingBottom: var(--pf-v6-global--spacer--form-element);
@@ -580,20 +567,4 @@
580
567
  margin-block-start: var(--pf-v6-c-select__menu-footer--MarginTop);
581
568
  margin-block-end: var(--pf-v6-c-select__menu-footer--MarginBottom);
582
569
  box-shadow: var(--pf-v6-c-select__menu-footer--BoxShadow);
583
- }
584
-
585
- :where(.pf-v6-theme-dark) .pf-v6-c-select {
586
- --pf-v6-c-select__toggle--disabled--BackgroundColor: var(--pf-v6-global--palette--black-500);
587
- --pf-v6-c-select__toggle--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
588
- --pf-v6-c-select__toggle--before--BorderTopColor: transparent;
589
- --pf-v6-c-select__toggle--before--BorderRightColor: transparent;
590
- --pf-v6-c-select__toggle--before--BorderBottomColor: var(--pf-v6-global--BorderColor--400);
591
- --pf-v6-c-select__toggle--before--BorderLeftColor: transparent;
592
- --pf-v6-c-select__menu--Top: 100%;
593
- --pf-v6-c-select__menu--m-top--TranslateY: -100%;
594
- --pf-v6-c-select__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
595
- --pf-v6-c-select__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--300);
596
- }
597
- :where(.pf-v6-theme-dark) .pf-v6-c-select__toggle:disabled, :where(.pf-v6-theme-dark) .pf-v6-c-select__toggle.pf-m-disabled {
598
- color: var(--pf-v6-global--palette--black-100);
599
570
  }
@@ -1,8 +1,6 @@
1
1
  // @debug $select; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
3
  .#{$select} {
4
- @include pf-v6-t-light; // force the container follow the light theme
5
-
6
4
  // Toggle
7
5
  --#{$select}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
8
6
  --#{$select}__toggle--PaddingRight: var(--#{$pf-global}--spacer--sm);
@@ -704,10 +702,3 @@
704
702
  margin-block-end: var(--#{$select}__menu-footer--MarginBottom);
705
703
  box-shadow: var(--#{$select}__menu-footer--BoxShadow);
706
704
  }
707
-
708
- // stylelint-disable no-invalid-position-at-import-rule
709
- @import "themes/dark/select";
710
-
711
- @include pf-v6-theme-dark {
712
- @include pf-v6-theme-dark-select;
713
- }
@@ -1,52 +1,3 @@
1
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden:where(th, td) {
7
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
- }
9
- @media screen and (min-width: 576px) {
10
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-sm:where(th, td) {
11
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
- }
13
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-sm:where(th, td) {
14
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
- }
16
- }
17
- @media screen and (min-width: 768px) {
18
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-md:where(th, td) {
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
- }
21
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-md:where(th, td) {
22
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
- }
24
- }
25
- @media screen and (min-width: 992px) {
26
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-lg:where(th, td) {
27
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
- }
29
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-lg:where(th, td) {
30
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
- }
32
- }
33
- @media screen and (min-width: 1200px) {
34
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-xl:where(th, td) {
35
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
- }
37
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-xl:where(th, td) {
38
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
- }
40
- }
41
- @media screen and (min-width: 1450px) {
42
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-2xl:where(th, td) {
43
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
- }
45
- .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-2xl:where(th, td) {
46
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
- }
48
- }
49
-
50
1
  :where(:root),
51
2
  :where(.pf-v6-c-table) {
52
3
  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -239,6 +190,9 @@
239
190
  }
240
191
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
241
192
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display);
193
+ --pf-v6-hidden-visible--hidden--Display: none;
194
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
195
+ display: var(--pf-v6-hidden-visible--Display);
242
196
  position: relative;
243
197
  width: var(--pf-v6-c-table--cell--Width);
244
198
  min-width: var(--pf-v6-c-table--cell--MinWidth);
@@ -256,6 +210,49 @@
256
210
  word-break: var(--pf-v6-c-table--cell--WordBreak);
257
211
  white-space: var(--pf-v6-c-table--cell--WhiteSpace);
258
212
  }
213
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
214
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
215
+ }
216
+ @media screen and (min-width: 576px) {
217
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-sm {
218
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
219
+ }
220
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-sm {
221
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
222
+ }
223
+ }
224
+ @media screen and (min-width: 768px) {
225
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-md {
226
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
227
+ }
228
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-md {
229
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
230
+ }
231
+ }
232
+ @media screen and (min-width: 992px) {
233
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-lg {
234
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
235
+ }
236
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-lg {
237
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
238
+ }
239
+ }
240
+ @media screen and (min-width: 1200px) {
241
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-xl {
242
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
243
+ }
244
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-xl {
245
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
246
+ }
247
+ }
248
+ @media screen and (min-width: 1450px) {
249
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-2xl {
250
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
251
+ }
252
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-2xl {
253
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
254
+ }
255
+ }
259
256
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
260
257
  padding-inline-start: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingLeft));
261
258
  }