@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/patternfly-no-globals.css CHANGED
@@ -6352,17 +6352,17 @@
6352
6352
  --pf-t--global--font--size--300: 1rem;
6353
6353
  --pf-t--global--font--size--400: 1.125rem;
6354
6354
  --pf-t--global--font--size--500: 1.25rem;
6355
- --pf-t--global--font--size--600: 1.375rem;
6355
+ --pf-t--global--font--size--600: 1.5rem;
6356
6356
  --pf-t--global--font--size--700: 1.75rem;
6357
6357
  --pf-t--global--font--size--800: 2.25rem;
6358
6358
  --pf-t--global--font--weight--100: 400;
6359
6359
  --pf-t--global--font--weight--200: 500;
6360
- --pf-t--global--font--weight--300: 700;
6360
+ --pf-t--global--font--weight--300: 500;
6361
6361
  --pf-t--global--font--weight--400: 700;
6362
6362
  --pf-t--global--icon--size--100: 0.75rem;
6363
6363
  --pf-t--global--icon--size--200: 0.875rem;
6364
6364
  --pf-t--global--icon--size--250: 1rem;
6365
- --pf-t--global--icon--size--300: 1.375rem;
6365
+ --pf-t--global--icon--size--300: 1.5rem;
6366
6366
  --pf-t--global--icon--size--400: 3.5rem;
6367
6367
  --pf-t--global--icon--size--500: 6rem;
6368
6368
  --pf-t--global--spacer--100: 0.25rem;
@@ -6398,6 +6398,7 @@
6398
6398
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
6399
6399
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
6400
6400
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
6401
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
6401
6402
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
6402
6403
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
6403
6404
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -6599,6 +6600,7 @@
6599
6600
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
6600
6601
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
6601
6602
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
6603
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
6602
6604
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
6603
6605
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
6604
6606
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -6613,6 +6615,7 @@
6613
6615
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
6614
6616
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
6615
6617
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
6618
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
6616
6619
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
6617
6620
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
6618
6621
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -6756,8 +6759,11 @@
6756
6759
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
6757
6760
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
6758
6761
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
6759
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
6760
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
6762
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
6763
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
6764
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
6765
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
6766
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
6761
6767
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
6762
6768
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
6763
6769
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
@@ -7075,6 +7081,7 @@
7075
7081
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
7076
7082
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
7077
7083
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
7084
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
7078
7085
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
7079
7086
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
7080
7087
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -7141,6 +7148,7 @@
7141
7148
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
7142
7149
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
7143
7150
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
7151
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
7144
7152
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
7145
7153
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
7146
7154
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -7155,6 +7163,7 @@
7155
7163
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
7156
7164
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
7157
7165
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
7166
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
7158
7167
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
7159
7168
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
7160
7169
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
@@ -12597,7 +12606,8 @@ ul) {
12597
12606
  --pf-v6-c-drawer__panel--MinWidth: 50%;
12598
12607
  --pf-v6-c-drawer__panel--MaxHeight: auto;
12599
12608
  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
12600
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12609
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12610
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12601
12611
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12602
12612
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12603
12613
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12721,6 +12731,9 @@ ul) {
12721
12731
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
12722
12732
  }
12723
12733
 
12734
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
12735
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
12736
+ }
12724
12737
  .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) {
12725
12738
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
12726
12739
  }
@@ -14231,9 +14244,11 @@ ul) {
14231
14244
  --pf-v6-c-form-control--OutlineOffset: -6px;
14232
14245
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
14233
14246
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
14247
+ --pf-v6-c-form-control--before--BorderStyle: solid;
14234
14248
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
14235
14249
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14236
14250
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14251
+ --pf-v6-c-form-control--after--BorderStyle: solid;
14237
14252
  --pf-v6-c-form-control--after--BorderColor: transparent;
14238
14253
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14239
14254
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -14255,10 +14270,11 @@ ul) {
14255
14270
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
14256
14271
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
14257
14272
  --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
14258
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14259
- --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
14273
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
14274
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
14260
14275
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
14261
14276
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14277
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
14262
14278
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
14263
14279
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14264
14280
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -14318,12 +14334,12 @@ ul) {
14318
14334
  }
14319
14335
  .pf-v6-c-form-control::before {
14320
14336
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
14321
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
14337
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
14322
14338
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
14323
14339
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14324
14340
  }
14325
14341
  .pf-v6-c-form-control::after {
14326
- 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);
14342
+ 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);
14327
14343
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14328
14344
  }
14329
14345
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -14351,7 +14367,7 @@ ul) {
14351
14367
  }
14352
14368
  .pf-v6-c-form-control.pf-m-readonly {
14353
14369
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
14354
- --pf-v6-c-form-control--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14370
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14355
14371
  }
14356
14372
  .pf-v6-c-form-control.pf-m-readonly:hover {
14357
14373
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -14361,6 +14377,7 @@ ul) {
14361
14377
  }
14362
14378
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
14363
14379
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
14380
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
14364
14381
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
14365
14382
  --pf-v6-c-form-control--before--BorderStyle: none;
14366
14383
  --pf-v6-c-form-control--after--BorderStyle: none;
package/patternfly.css CHANGED
@@ -6473,17 +6473,17 @@ button) {
6473
6473
  --pf-t--global--font--size--300: 1rem;
6474
6474
  --pf-t--global--font--size--400: 1.125rem;
6475
6475
  --pf-t--global--font--size--500: 1.25rem;
6476
- --pf-t--global--font--size--600: 1.375rem;
6476
+ --pf-t--global--font--size--600: 1.5rem;
6477
6477
  --pf-t--global--font--size--700: 1.75rem;
6478
6478
  --pf-t--global--font--size--800: 2.25rem;
6479
6479
  --pf-t--global--font--weight--100: 400;
6480
6480
  --pf-t--global--font--weight--200: 500;
6481
- --pf-t--global--font--weight--300: 700;
6481
+ --pf-t--global--font--weight--300: 500;
6482
6482
  --pf-t--global--font--weight--400: 700;
6483
6483
  --pf-t--global--icon--size--100: 0.75rem;
6484
6484
  --pf-t--global--icon--size--200: 0.875rem;
6485
6485
  --pf-t--global--icon--size--250: 1rem;
6486
- --pf-t--global--icon--size--300: 1.375rem;
6486
+ --pf-t--global--icon--size--300: 1.5rem;
6487
6487
  --pf-t--global--icon--size--400: 3.5rem;
6488
6488
  --pf-t--global--icon--size--500: 6rem;
6489
6489
  --pf-t--global--spacer--100: 0.25rem;
@@ -6519,6 +6519,7 @@ button) {
6519
6519
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
6520
6520
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
6521
6521
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
6522
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
6522
6523
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
6523
6524
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
6524
6525
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -6720,6 +6721,7 @@ button) {
6720
6721
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
6721
6722
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
6722
6723
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
6724
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
6723
6725
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
6724
6726
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
6725
6727
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -6734,6 +6736,7 @@ button) {
6734
6736
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
6735
6737
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
6736
6738
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
6739
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
6737
6740
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
6738
6741
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
6739
6742
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -6877,8 +6880,11 @@ button) {
6877
6880
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
6878
6881
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
6879
6882
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
6880
- --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
6881
- --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
6883
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
6884
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
6885
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
6886
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
6887
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
6882
6888
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
6883
6889
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
6884
6890
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
@@ -7196,6 +7202,7 @@ button) {
7196
7202
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
7197
7203
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
7198
7204
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
7205
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
7199
7206
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
7200
7207
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
7201
7208
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -7262,6 +7269,7 @@ button) {
7262
7269
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
7263
7270
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
7264
7271
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
7272
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
7265
7273
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
7266
7274
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
7267
7275
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -7276,6 +7284,7 @@ button) {
7276
7284
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
7277
7285
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
7278
7286
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
7287
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
7279
7288
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
7280
7289
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
7281
7290
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
@@ -12718,7 +12727,8 @@ ul) {
12718
12727
  --pf-v6-c-drawer__panel--MinWidth: 50%;
12719
12728
  --pf-v6-c-drawer__panel--MaxHeight: auto;
12720
12729
  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
12721
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12730
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12731
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12722
12732
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12723
12733
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12724
12734
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12842,6 +12852,9 @@ ul) {
12842
12852
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
12843
12853
  }
12844
12854
 
12855
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
12856
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
12857
+ }
12845
12858
  .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) {
12846
12859
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
12847
12860
  }
@@ -14352,9 +14365,11 @@ ul) {
14352
14365
  --pf-v6-c-form-control--OutlineOffset: -6px;
14353
14366
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
14354
14367
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
14368
+ --pf-v6-c-form-control--before--BorderStyle: solid;
14355
14369
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
14356
14370
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14357
14371
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14372
+ --pf-v6-c-form-control--after--BorderStyle: solid;
14358
14373
  --pf-v6-c-form-control--after--BorderColor: transparent;
14359
14374
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14360
14375
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -14376,10 +14391,11 @@ ul) {
14376
14391
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
14377
14392
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
14378
14393
  --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
14379
- --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14380
- --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
14394
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
14395
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
14381
14396
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
14382
14397
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14398
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
14383
14399
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
14384
14400
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14385
14401
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -14439,12 +14455,12 @@ ul) {
14439
14455
  }
14440
14456
  .pf-v6-c-form-control::before {
14441
14457
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
14442
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
14458
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
14443
14459
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
14444
14460
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14445
14461
  }
14446
14462
  .pf-v6-c-form-control::after {
14447
- 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);
14463
+ 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);
14448
14464
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14449
14465
  }
14450
14466
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -14472,7 +14488,7 @@ ul) {
14472
14488
  }
14473
14489
  .pf-v6-c-form-control.pf-m-readonly {
14474
14490
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
14475
- --pf-v6-c-form-control--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14491
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14476
14492
  }
14477
14493
  .pf-v6-c-form-control.pf-m-readonly:hover {
14478
14494
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -14482,6 +14498,7 @@ ul) {
14482
14498
  }
14483
14499
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
14484
14500
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
14501
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
14485
14502
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
14486
14503
  --pf-v6-c-form-control--before--BorderStyle: none;
14487
14504
  --pf-v6-c-form-control--after--BorderStyle: none;