@patternfly/patternfly 6.0.0-prerelease.6 → 6.0.0-prerelease.8

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 (28) hide show
  1. package/base/patternfly-variables.css +14 -5
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +4 -1
  5. package/base/tokens/tokens-default.scss +12 -6
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Button/button.css +2 -2
  8. package/components/Button/button.scss +2 -2
  9. package/components/Check/check.css +2 -2
  10. package/components/Check/check.scss +2 -2
  11. package/components/FormControl/form-control.css +9 -5
  12. package/components/FormControl/form-control.scss +9 -5
  13. package/components/MenuToggle/menu-toggle.css +2 -2
  14. package/components/MenuToggle/menu-toggle.scss +2 -2
  15. package/components/Pagination/pagination.css +1 -1
  16. package/components/Pagination/pagination.scss +1 -1
  17. package/components/Radio/radio.css +2 -2
  18. package/components/Radio/radio.scss +2 -2
  19. package/components/Slider/slider.css +1 -1
  20. package/components/Slider/slider.scss +1 -1
  21. package/components/_index.css +19 -15
  22. package/package.json +4 -4
  23. package/patternfly-base-no-globals.css +14 -5
  24. package/patternfly-base.css +14 -5
  25. package/patternfly-no-globals.css +33 -20
  26. package/patternfly.css +33 -20
  27. package/patternfly.min.css +1 -1
  28. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -130,17 +130,17 @@
130
130
  --pf-t--global--font--size--300: 1rem;
131
131
  --pf-t--global--font--size--400: 1.125rem;
132
132
  --pf-t--global--font--size--500: 1.25rem;
133
- --pf-t--global--font--size--600: 1.375rem;
133
+ --pf-t--global--font--size--600: 1.5rem;
134
134
  --pf-t--global--font--size--700: 1.75rem;
135
135
  --pf-t--global--font--size--800: 2.25rem;
136
136
  --pf-t--global--font--weight--100: 400;
137
137
  --pf-t--global--font--weight--200: 500;
138
- --pf-t--global--font--weight--300: 700;
138
+ --pf-t--global--font--weight--300: 500;
139
139
  --pf-t--global--font--weight--400: 700;
140
140
  --pf-t--global--icon--size--100: 0.75rem;
141
141
  --pf-t--global--icon--size--200: 0.875rem;
142
142
  --pf-t--global--icon--size--250: 1rem;
143
- --pf-t--global--icon--size--300: 1.375rem;
143
+ --pf-t--global--icon--size--300: 1.5rem;
144
144
  --pf-t--global--icon--size--400: 3.5rem;
145
145
  --pf-t--global--icon--size--500: 6rem;
146
146
  --pf-t--global--spacer--100: 0.25rem;
@@ -176,6 +176,7 @@
176
176
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
177
177
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
178
178
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
179
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
179
180
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
180
181
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
181
182
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -377,6 +378,7 @@
377
378
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
378
379
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
379
380
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
381
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
380
382
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
381
383
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
382
384
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -391,6 +393,7 @@
391
393
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
392
394
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
393
395
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
396
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
394
397
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
395
398
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
396
399
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -534,8 +537,11 @@
534
537
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
535
538
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
536
539
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
537
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
538
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
540
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
541
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
542
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
543
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
544
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
539
545
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
540
546
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
541
547
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
@@ -853,6 +859,7 @@
853
859
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
854
860
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
855
861
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
862
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
856
863
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
857
864
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
858
865
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -919,6 +926,7 @@
919
926
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
920
927
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
921
928
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
929
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
922
930
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
923
931
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
924
932
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -933,6 +941,7 @@
933
941
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
934
942
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
935
943
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
944
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
936
945
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
937
946
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
938
947
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 15 Aug 2024 00:08:40 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 15 Aug 2024 00:08:40 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 15 Aug 2024 00:08:40 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -21,6 +21,7 @@
21
21
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
22
22
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
23
23
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
24
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
24
25
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
25
26
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
26
27
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -87,6 +88,7 @@
87
88
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
88
89
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
89
90
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
91
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
90
92
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
91
93
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
92
94
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -101,6 +103,7 @@
101
103
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
102
104
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
103
105
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
106
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
104
107
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
105
108
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
106
109
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 15 Aug 2024 00:08:40 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -65,17 +65,17 @@
65
65
  --pf-t--global--font--size--300: 1rem;
66
66
  --pf-t--global--font--size--400: 1.125rem;
67
67
  --pf-t--global--font--size--500: 1.25rem;
68
- --pf-t--global--font--size--600: 1.375rem;
68
+ --pf-t--global--font--size--600: 1.5rem;
69
69
  --pf-t--global--font--size--700: 1.75rem;
70
70
  --pf-t--global--font--size--800: 2.25rem;
71
71
  --pf-t--global--font--weight--100: 400;
72
72
  --pf-t--global--font--weight--200: 500;
73
- --pf-t--global--font--weight--300: 700;
73
+ --pf-t--global--font--weight--300: 500;
74
74
  --pf-t--global--font--weight--400: 700;
75
75
  --pf-t--global--icon--size--100: 0.75rem;
76
76
  --pf-t--global--icon--size--200: 0.875rem;
77
77
  --pf-t--global--icon--size--250: 1rem;
78
- --pf-t--global--icon--size--300: 1.375rem;
78
+ --pf-t--global--icon--size--300: 1.5rem;
79
79
  --pf-t--global--icon--size--400: 3.5rem;
80
80
  --pf-t--global--icon--size--500: 6rem;
81
81
  --pf-t--global--spacer--100: 0.25rem;
@@ -111,6 +111,7 @@
111
111
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
112
112
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
113
113
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
114
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
114
115
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
115
116
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
116
117
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -312,6 +313,7 @@
312
313
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
313
314
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
314
315
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
316
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
315
317
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
316
318
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
317
319
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -326,6 +328,7 @@
326
328
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
327
329
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
328
330
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
331
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
329
332
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
330
333
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
331
334
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -469,8 +472,11 @@
469
472
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
470
473
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
471
474
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
472
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
473
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
475
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
476
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
477
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
478
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
479
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
474
480
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
475
481
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
476
482
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 15 Aug 2024 00:08:40 GMT
3
+ // Generated on Fri, 13 Sep 2024 01:51:18 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/components/Button/button.css CHANGED
@@ -215,7 +215,7 @@
215
215
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
216
216
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
217
217
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
218
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
218
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
219
219
  --pf-v6-c-button__progress--Opacity: 0;
220
220
  --pf-v6-c-button__progress--TranslateY: -50%;
221
221
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -226,7 +226,7 @@
226
226
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
227
227
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
228
228
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
229
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
229
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
230
230
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
231
231
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
232
232
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
package/components/Button/button.scss CHANGED
@@ -260,7 +260,7 @@
260
260
  --#{$button}__icon--m-end--MarginInlineStart: 0;
261
261
 
262
262
  // Progress
263
- --#{$button}__progress--width: calc(var(--#{$spinner}--m-md--diameter) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
263
+ --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
264
264
  --#{$button}__progress--Opacity: 0;
265
265
  --#{$button}__progress--TranslateY: -50%;
266
266
  --#{$button}__progress--TranslateX: 0;
@@ -271,7 +271,7 @@
271
271
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
272
272
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
273
273
  --#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width));
274
- --#{$button}--m-in-progress--m-plain--Color: var(--#{$spinner}--Color);
274
+ --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
275
275
  --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
276
276
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
277
277
 
package/components/Check/check.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-check {
3
3
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
4
4
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
6
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -25,7 +25,7 @@
25
25
  .pf-v6-c-check.pf-m-standalone {
26
26
  display: inline-grid;
27
27
  grid-template-columns: auto;
28
- min-height: var(--pf-v6-c-check--MinHeight);
28
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
29
29
  }
30
30
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
31
31
  align-self: center;
package/components/Check/check.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @include pf-root($check) {
4
4
  --#{$check}--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
5
5
  --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
6
- --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
6
+ --#{$check}--m-standalone--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
7
7
 
8
8
  // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
9
9
  --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -33,7 +33,7 @@
33
33
  &.pf-m-standalone {
34
34
  display: inline-grid;
35
35
  grid-template-columns: auto;
36
- min-height: var(--#{$check}--MinHeight);
36
+ min-height: var(--#{$check}--m-standalone--MinHeight);
37
37
 
38
38
  .#{$check}__input {
39
39
  align-self: center;
package/components/FormControl/form-control.css CHANGED
@@ -8,9 +8,11 @@
8
8
  --pf-v6-c-form-control--OutlineOffset: -6px;
9
9
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
10
10
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11
+ --pf-v6-c-form-control--before--BorderStyle: solid;
11
12
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
12
13
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
13
14
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15
+ --pf-v6-c-form-control--after--BorderStyle: solid;
14
16
  --pf-v6-c-form-control--after--BorderColor: transparent;
15
17
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
16
18
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -32,10 +34,11 @@
32
34
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
33
35
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
34
36
  --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
35
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
36
- --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
37
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
38
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
37
39
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
38
40
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
41
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
39
42
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
40
43
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
41
44
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -95,12 +98,12 @@
95
98
  }
96
99
  .pf-v6-c-form-control::before {
97
100
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
98
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
101
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
99
102
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
100
103
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
101
104
  }
102
105
  .pf-v6-c-form-control::after {
103
- border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle, solid) var(--pf-v6-c-form-control--after--BorderColor);
106
+ border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
104
107
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
105
108
  }
106
109
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -128,7 +131,7 @@
128
131
  }
129
132
  .pf-v6-c-form-control.pf-m-readonly {
130
133
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
131
- --pf-v6-c-form-control--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
134
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
132
135
  }
133
136
  .pf-v6-c-form-control.pf-m-readonly:hover {
134
137
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -138,6 +141,7 @@
138
141
  }
139
142
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
140
143
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
144
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
141
145
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
142
146
  --pf-v6-c-form-control--before--BorderStyle: none;
143
147
  --pf-v6-c-form-control--after--BorderStyle: none;
package/components/FormControl/form-control.scss CHANGED
@@ -9,9 +9,11 @@
9
9
  --#{$form-control}--OutlineOffset: -6px;
10
10
  --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
11
11
  --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
12
+ --#{$form-control}--before--BorderStyle: solid;
12
13
  --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
13
14
  --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
14
15
  --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
16
+ --#{$form-control}--after--BorderStyle: solid;
15
17
  --#{$form-control}--after--BorderColor: transparent;
16
18
  --#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
17
19
  --#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -45,12 +47,13 @@
45
47
  --#{$form-control}--m-disabled--after--BorderColor: transparent;
46
48
 
47
49
  // readonly
48
- --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
49
- --#{$form-control}--m-readonly--BorderColor: transparent;
50
+ --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
51
+ --#{$form-control}--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
50
52
  --#{$form-control}--m-readonly--hover--after--BorderColor: revert;
51
53
 
52
54
  // readonly plain
53
55
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
56
+ --#{$form-control}--m-readonly--m-plain--BorderColor: transparent;
54
57
  --#{$form-control}--m-readonly--m-plain--inset--base: 0;
55
58
  --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
56
59
 
@@ -134,13 +137,13 @@
134
137
 
135
138
  &::before {
136
139
  border-color: var(--#{$form-control}--before--BorderColor);
137
- border-style: var(--#{$form-control}--before--BorderStyle, solid);
140
+ border-style: var(--#{$form-control}--before--BorderStyle);
138
141
  border-width: var(--#{$form-control}--before--BorderWidth);
139
142
  border-radius: var(--#{$form-control}--before--BorderRadius);
140
143
  }
141
144
 
142
145
  &::after {
143
- border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderColor);
146
+ border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle) var(--#{$form-control}--after--BorderColor);
144
147
  border-radius: var(--#{$form-control}--before--BorderRadius);
145
148
  }
146
149
 
@@ -176,7 +179,7 @@
176
179
 
177
180
  &.pf-m-readonly {
178
181
  --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-readonly--BackgroundColor);
179
- --#{$form-control}--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
182
+ --#{$form-control}--before--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
180
183
 
181
184
  &:hover {
182
185
  --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
@@ -189,6 +192,7 @@
189
192
 
190
193
  &.pf-m-plain {
191
194
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$form-control}--m-readonly--m-plain--BackgroundColor);
195
+ --#{$form-control}--m-readonly--BorderColor: var(--#{$form-control}--m-readonly--m-plain--BorderColor);
192
196
  --#{$form-control}--inset--base: var(--#{$form-control}--m-readonly--m-plain--inset--base);
193
197
  --#{$form-control}--before--BorderStyle: none;
194
198
  --#{$form-control}--after--BorderStyle: none;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -32,9 +32,9 @@
32
32
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
33
33
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
34
34
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
35
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
35
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
36
36
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
37
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
38
38
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
39
39
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
40
40
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -49,11 +49,11 @@
49
49
  --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
50
50
 
51
51
  // * Menu toggle icon
52
- --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
52
+ --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
53
53
  --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
54
54
 
55
55
  // * Menu toggle toggle icon
56
- --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
56
+ --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
57
57
  --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
58
58
 
59
59
  // * Menu toggle primary
package/components/Pagination/pagination.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
11
11
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
13
13
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
14
14
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
15
15
  --pf-v6-c-pagination__total-items--Display: block;
package/components/Pagination/pagination.scss CHANGED
@@ -19,7 +19,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
19
19
  // nav page select
20
20
  --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
21
21
  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
22
- --#{$pagination}__nav-page-select--c-form-control--width-base: calc((var(--#{$form-control}--PaddingInlineEnd) + var(--#{$form-control}--PaddingInlineStart)) + (var(--#{$form-control}--before--BorderWidth) * 2));
22
+ --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
23
23
  --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
24
24
  --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));
25
25
 
package/components/Radio/radio.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-radio {
3
3
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
5
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
5
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
6
6
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -26,7 +26,7 @@
26
26
  .pf-v6-c-radio.pf-m-standalone {
27
27
  display: inline-grid;
28
28
  grid-template-columns: auto;
29
- height: var(--pf-v6-c-check--Height);
29
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
30
30
  }
31
31
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
32
32
  align-self: center;
package/components/Radio/radio.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @include pf-root($radio) {
4
4
  --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
5
5
  --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
6
- --#{$radio}--Height: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));
6
+ --#{$radio}--m-standalone--MinHeight: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));
7
7
 
8
8
  // TODO: update to `--#{$radio}--FontSize` `--#{$radio}--LineHeight`
9
9
  --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -34,7 +34,7 @@
34
34
  &.pf-m-standalone {
35
35
  display: inline-grid;
36
36
  grid-template-columns: auto;
37
- height: var(--#{$check}--Height);
37
+ min-height: var(--#{$radio}--m-standalone--MinHeight);
38
38
 
39
39
  .#{$radio}__input {
40
40
  align-self: center;
package/components/Slider/slider.css CHANGED
@@ -46,7 +46,7 @@
46
46
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
47
47
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
48
48
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
49
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
49
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
50
50
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
51
51
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
52
52
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
package/components/Slider/slider.scss CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  // value
61
61
  --#{$slider}__value--MarginInlineStart: var(--pf-t--global--spacer--md);
62
- --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingInlineStart) + var(--#{$form-control}--PaddingInlineEnd) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
62
+ --#{$slider}__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
63
63
  --#{$slider}__value--c-form-control--width-chars: 3;
64
64
  --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
65
65
  --#{$slider}__value--m-floating--TranslateX: -50%;