@patternfly/patternfly 6.0.0-prerelease.7 → 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 (16) 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/FormControl/form-control.css +9 -5
  8. package/components/FormControl/form-control.scss +9 -5
  9. package/components/_index.css +9 -5
  10. package/package.json +4 -4
  11. package/patternfly-base-no-globals.css +14 -5
  12. package/patternfly-base.css +14 -5
  13. package/patternfly-no-globals.css +23 -10
  14. package/patternfly.css +23 -10
  15. package/patternfly.min.css +1 -1
  16. 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);
@@ -14231,9 +14240,11 @@ ul) {
14231
14240
  --pf-v6-c-form-control--OutlineOffset: -6px;
14232
14241
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
14233
14242
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
14243
+ --pf-v6-c-form-control--before--BorderStyle: solid;
14234
14244
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
14235
14245
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14236
14246
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14247
+ --pf-v6-c-form-control--after--BorderStyle: solid;
14237
14248
  --pf-v6-c-form-control--after--BorderColor: transparent;
14238
14249
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14239
14250
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -14255,10 +14266,11 @@ ul) {
14255
14266
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
14256
14267
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
14257
14268
  --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;
14269
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
14270
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
14260
14271
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
14261
14272
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14273
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
14262
14274
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
14263
14275
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14264
14276
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -14318,12 +14330,12 @@ ul) {
14318
14330
  }
14319
14331
  .pf-v6-c-form-control::before {
14320
14332
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
14321
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
14333
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
14322
14334
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
14323
14335
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14324
14336
  }
14325
14337
  .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);
14338
+ 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
14339
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14328
14340
  }
14329
14341
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -14351,7 +14363,7 @@ ul) {
14351
14363
  }
14352
14364
  .pf-v6-c-form-control.pf-m-readonly {
14353
14365
  --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);
14366
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14355
14367
  }
14356
14368
  .pf-v6-c-form-control.pf-m-readonly:hover {
14357
14369
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -14361,6 +14373,7 @@ ul) {
14361
14373
  }
14362
14374
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
14363
14375
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
14376
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
14364
14377
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
14365
14378
  --pf-v6-c-form-control--before--BorderStyle: none;
14366
14379
  --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);
@@ -14352,9 +14361,11 @@ ul) {
14352
14361
  --pf-v6-c-form-control--OutlineOffset: -6px;
14353
14362
  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
14354
14363
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
14364
+ --pf-v6-c-form-control--before--BorderStyle: solid;
14355
14365
  --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
14356
14366
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14357
14367
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14368
+ --pf-v6-c-form-control--after--BorderStyle: solid;
14358
14369
  --pf-v6-c-form-control--after--BorderColor: transparent;
14359
14370
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
14360
14371
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -14376,10 +14387,11 @@ ul) {
14376
14387
  --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
14377
14388
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
14378
14389
  --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;
14390
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
14391
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
14381
14392
  --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
14382
14393
  --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14394
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
14383
14395
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
14384
14396
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14385
14397
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -14439,12 +14451,12 @@ ul) {
14439
14451
  }
14440
14452
  .pf-v6-c-form-control::before {
14441
14453
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
14442
- border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
14454
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
14443
14455
  border-width: var(--pf-v6-c-form-control--before--BorderWidth);
14444
14456
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14445
14457
  }
14446
14458
  .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);
14459
+ 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
14460
  border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
14449
14461
  }
14450
14462
  .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -14472,7 +14484,7 @@ ul) {
14472
14484
  }
14473
14485
  .pf-v6-c-form-control.pf-m-readonly {
14474
14486
  --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);
14487
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
14476
14488
  }
14477
14489
  .pf-v6-c-form-control.pf-m-readonly:hover {
14478
14490
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -14482,6 +14494,7 @@ ul) {
14482
14494
  }
14483
14495
  .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
14484
14496
  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
14497
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
14485
14498
  --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
14486
14499
  --pf-v6-c-form-control--before--BorderStyle: none;
14487
14500
  --pf-v6-c-form-control--after--BorderStyle: none;