@patternfly/patternfly 6.0.0-prerelease.7 → 6.0.0-prerelease.9

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 (18) 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/Drawer/drawer.css +5 -1
  8. package/components/Drawer/drawer.scss +4 -1
  9. package/components/FormControl/form-control.css +9 -5
  10. package/components/FormControl/form-control.scss +9 -5
  11. package/components/_index.css +14 -6
  12. package/package.json +5 -5
  13. package/patternfly-base-no-globals.css +14 -5
  14. package/patternfly-base.css +14 -5
  15. package/patternfly-no-globals.css +28 -11
  16. package/patternfly.css +28 -11
  17. package/patternfly.min.css +1 -1
  18. 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/Drawer/drawer.css CHANGED
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-drawer__panel--MinWidth: 50%;
11
11
  --pf-v6-c-drawer__panel--MaxHeight: auto;
12
12
  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
13
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
14
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14
15
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15
16
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
16
17
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -134,6 +135,9 @@
134
135
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
135
136
  }
136
137
 
138
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
139
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
140
+ }
137
141
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
138
142
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
139
143
  }
package/components/Drawer/drawer.scss CHANGED
@@ -21,7 +21,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
21
21
  --#{$drawer}__panel--MinWidth: 50%; // change to __panel--md--MinWidth at breaking change
22
22
  --#{$drawer}__panel--MaxHeight: auto;
23
23
  --#{$drawer}__panel--ZIndex: var(--pf-t--global--z-index--sm);
24
- --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24
+ --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
25
+ --#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25
26
  --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
26
27
  --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
27
28
  --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -172,6 +173,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
172
173
 
173
174
  &.pf-m-inline,
174
175
  &.pf-m-static {
176
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor);
177
+
175
178
  > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
176
179
  padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
177
180
  }
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/_index.css CHANGED
@@ -5166,7 +5166,8 @@ ul) {
5166
5166
  --pf-v6-c-drawer__panel--MinWidth: 50%;
5167
5167
  --pf-v6-c-drawer__panel--MaxHeight: auto;
5168
5168
  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
5169
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5169
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5170
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5170
5171
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5171
5172
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5172
5173
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -5290,6 +5291,9 @@ ul) {
5290
5291
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
5291
5292
  }
5292
5293
 
5294
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
5295
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
5296
+ }
5293
5297
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
5294
5298
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
5295
5299
  }
@@ -6800,9 +6804,11 @@ ul) {
6800
6804
  --pf-v6-c-form-control--OutlineOffset: -6px;
6801
6805
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
6802
6806
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
6807
+ --pf-v6-c-form-control--before--BorderStyle: solid;
6803
6808
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
6804
6809
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
6805
6810
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6811
+ --pf-v6-c-form-control--after--BorderStyle: solid;
6806
6812
  --pf-v6-c-form-control--after--BorderColor: transparent;
6807
6813
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
6808
6814
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -6824,10 +6830,11 @@ ul) {
6824
6830
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
6825
6831
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6826
6832
  --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
6827
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6828
- --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
6833
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
6834
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
6829
6835
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
6830
6836
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
6837
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6831
6838
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6832
6839
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6833
6840
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -6887,12 +6894,12 @@ ul) {
6887
6894
  }
6888
6895
  .pf-v6-c-form-control::before {
6889
6896
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
6890
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
6897
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
6891
6898
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
6892
6899
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
6893
6900
  }
6894
6901
  .pf-v6-c-form-control::after {
6895
- 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);
6902
+ 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);
6896
6903
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
6897
6904
  }
6898
6905
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -6920,7 +6927,7 @@ ul) {
6920
6927
  }
6921
6928
  .pf-v6-c-form-control.pf-m-readonly {
6922
6929
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
6923
- --pf-v6-c-form-control--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
6930
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
6924
6931
  }
6925
6932
  .pf-v6-c-form-control.pf-m-readonly:hover {
6926
6933
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -6930,6 +6937,7 @@ ul) {
6930
6937
  }
6931
6938
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
6932
6939
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
6940
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
6933
6941
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
6934
6942
  --pf-v6-c-form-control--before--BorderStyle: none;
6935
6943
  --pf-v6-c-form-control--after--BorderStyle: none;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-prerelease.7",
4
+ "version": "6.0.0-prerelease.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.0.0-alpha.92",
50
+ "@patternfly/documentation-framework": "6.0.0-alpha.94",
51
51
  "@patternfly/patternfly-a11y": "4.3.1",
52
- "@patternfly/react-code-editor": "6.0.0-prerelease.4",
53
- "@patternfly/react-core": "6.0.0-prerelease.4",
54
- "@patternfly/react-table": "6.0.0-prerelease.4",
52
+ "@patternfly/react-code-editor": "6.0.0-prerelease.9",
53
+ "@patternfly/react-core": "6.0.0-prerelease.9",
54
+ "@patternfly/react-table": "6.0.0-prerelease.9",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
package/patternfly-base-no-globals.css CHANGED
@@ -6351,17 +6351,17 @@
6351
6351
  --pf-t--global--font--size--300: 1rem;
6352
6352
  --pf-t--global--font--size--400: 1.125rem;
6353
6353
  --pf-t--global--font--size--500: 1.25rem;
6354
- --pf-t--global--font--size--600: 1.375rem;
6354
+ --pf-t--global--font--size--600: 1.5rem;
6355
6355
  --pf-t--global--font--size--700: 1.75rem;
6356
6356
  --pf-t--global--font--size--800: 2.25rem;
6357
6357
  --pf-t--global--font--weight--100: 400;
6358
6358
  --pf-t--global--font--weight--200: 500;
6359
- --pf-t--global--font--weight--300: 700;
6359
+ --pf-t--global--font--weight--300: 500;
6360
6360
  --pf-t--global--font--weight--400: 700;
6361
6361
  --pf-t--global--icon--size--100: 0.75rem;
6362
6362
  --pf-t--global--icon--size--200: 0.875rem;
6363
6363
  --pf-t--global--icon--size--250: 1rem;
6364
- --pf-t--global--icon--size--300: 1.375rem;
6364
+ --pf-t--global--icon--size--300: 1.5rem;
6365
6365
  --pf-t--global--icon--size--400: 3.5rem;
6366
6366
  --pf-t--global--icon--size--500: 6rem;
6367
6367
  --pf-t--global--spacer--100: 0.25rem;
@@ -6397,6 +6397,7 @@
6397
6397
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
6398
6398
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
6399
6399
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
6400
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
6400
6401
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
6401
6402
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
6402
6403
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -6598,6 +6599,7 @@
6598
6599
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
6599
6600
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
6600
6601
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
6602
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
6601
6603
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
6602
6604
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
6603
6605
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -6612,6 +6614,7 @@
6612
6614
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
6613
6615
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
6614
6616
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
6617
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
6615
6618
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
6616
6619
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
6617
6620
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -6755,8 +6758,11 @@
6755
6758
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
6756
6759
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
6757
6760
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
6758
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
6759
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
6761
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
6762
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
6763
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
6764
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
6765
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
6760
6766
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
6761
6767
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
6762
6768
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
@@ -7074,6 +7080,7 @@
7074
7080
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
7075
7081
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
7076
7082
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
7083
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
7077
7084
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
7078
7085
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
7079
7086
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -7140,6 +7147,7 @@
7140
7147
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
7141
7148
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
7142
7149
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
7150
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
7143
7151
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
7144
7152
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
7145
7153
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -7154,6 +7162,7 @@
7154
7162
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
7155
7163
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
7156
7164
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
7165
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
7157
7166
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
7158
7167
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
7159
7168
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
package/patternfly-base.css CHANGED
@@ -6472,17 +6472,17 @@ button) {
6472
6472
  --pf-t--global--font--size--300: 1rem;
6473
6473
  --pf-t--global--font--size--400: 1.125rem;
6474
6474
  --pf-t--global--font--size--500: 1.25rem;
6475
- --pf-t--global--font--size--600: 1.375rem;
6475
+ --pf-t--global--font--size--600: 1.5rem;
6476
6476
  --pf-t--global--font--size--700: 1.75rem;
6477
6477
  --pf-t--global--font--size--800: 2.25rem;
6478
6478
  --pf-t--global--font--weight--100: 400;
6479
6479
  --pf-t--global--font--weight--200: 500;
6480
- --pf-t--global--font--weight--300: 700;
6480
+ --pf-t--global--font--weight--300: 500;
6481
6481
  --pf-t--global--font--weight--400: 700;
6482
6482
  --pf-t--global--icon--size--100: 0.75rem;
6483
6483
  --pf-t--global--icon--size--200: 0.875rem;
6484
6484
  --pf-t--global--icon--size--250: 1rem;
6485
- --pf-t--global--icon--size--300: 1.375rem;
6485
+ --pf-t--global--icon--size--300: 1.5rem;
6486
6486
  --pf-t--global--icon--size--400: 3.5rem;
6487
6487
  --pf-t--global--icon--size--500: 6rem;
6488
6488
  --pf-t--global--spacer--100: 0.25rem;
@@ -6518,6 +6518,7 @@ button) {
6518
6518
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
6519
6519
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
6520
6520
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
6521
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
6521
6522
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
6522
6523
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
6523
6524
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -6719,6 +6720,7 @@ button) {
6719
6720
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
6720
6721
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
6721
6722
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
6723
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
6722
6724
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
6723
6725
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
6724
6726
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -6733,6 +6735,7 @@ button) {
6733
6735
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
6734
6736
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
6735
6737
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
6738
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
6736
6739
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
6737
6740
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
6738
6741
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -6876,8 +6879,11 @@ button) {
6876
6879
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
6877
6880
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
6878
6881
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
6879
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
6880
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
6882
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
6883
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
6884
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
6885
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
6886
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
6881
6887
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
6882
6888
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
6883
6889
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
@@ -7195,6 +7201,7 @@ button) {
7195
7201
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
7196
7202
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
7197
7203
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
7204
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
7198
7205
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
7199
7206
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
7200
7207
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -7261,6 +7268,7 @@ button) {
7261
7268
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
7262
7269
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
7263
7270
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
7271
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
7264
7272
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
7265
7273
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
7266
7274
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -7275,6 +7283,7 @@ button) {
7275
7283
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
7276
7284
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
7277
7285
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
7286
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
7278
7287
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
7279
7288
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
7280
7289
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);