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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/base/patternfly-variables.css +14 -5
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +4 -1
  5. package/base/tokens/tokens-default.scss +12 -6
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Button/button.css +2 -2
  8. package/components/Button/button.scss +2 -2
  9. package/components/Check/check.css +2 -2
  10. package/components/Check/check.scss +2 -2
  11. package/components/FormControl/form-control.css +9 -5
  12. package/components/FormControl/form-control.scss +9 -5
  13. package/components/MenuToggle/menu-toggle.css +2 -2
  14. package/components/MenuToggle/menu-toggle.scss +2 -2
  15. package/components/Pagination/pagination.css +1 -1
  16. package/components/Pagination/pagination.scss +1 -1
  17. package/components/Radio/radio.css +2 -2
  18. package/components/Radio/radio.scss +2 -2
  19. package/components/Slider/slider.css +1 -1
  20. package/components/Slider/slider.scss +1 -1
  21. package/components/_index.css +19 -15
  22. package/package.json +4 -4
  23. package/patternfly-base-no-globals.css +14 -5
  24. package/patternfly-base.css +14 -5
  25. package/patternfly-no-globals.css +33 -20
  26. package/patternfly.css +33 -20
  27. package/patternfly.min.css +1 -1
  28. package/patternfly.min.css.map +1 -1
package/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);
@@ -9184,7 +9193,7 @@ button.pf-v6-c-breadcrumb__link {
9184
9193
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
9185
9194
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
9186
9195
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9187
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
9196
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9188
9197
  --pf-v6-c-button__progress--Opacity: 0;
9189
9198
  --pf-v6-c-button__progress--TranslateY: -50%;
9190
9199
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -9195,7 +9204,7 @@ button.pf-v6-c-breadcrumb__link {
9195
9204
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
9196
9205
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
9197
9206
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
9198
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
9207
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9199
9208
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9200
9209
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9201
9210
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -10100,7 +10109,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10100
10109
  .pf-v6-c-check {
10101
10110
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
10102
10111
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
10103
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10112
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10104
10113
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
10105
10114
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
10106
10115
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -10123,7 +10132,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10123
10132
  .pf-v6-c-check.pf-m-standalone {
10124
10133
  display: inline-grid;
10125
10134
  grid-template-columns: auto;
10126
- min-height: var(--pf-v6-c-check--MinHeight);
10135
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
10127
10136
  }
10128
10137
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
10129
10138
  align-self: center;
@@ -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;
@@ -17538,9 +17551,9 @@ ul.pf-v6-c-list {
17538
17551
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17539
17552
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17540
17553
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17541
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17554
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17542
17555
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
17543
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17556
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17544
17557
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17545
17558
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
17546
17559
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
@@ -19578,7 +19591,7 @@ ul.pf-v6-c-list {
19578
19591
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
19579
19592
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
19580
19593
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
19581
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
19594
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
19582
19595
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
19583
19596
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
19584
19597
  --pf-v6-c-pagination__total-items--Display: block;
@@ -20999,7 +21012,7 @@ ul.pf-v6-c-list {
20999
21012
  .pf-v6-c-radio {
21000
21013
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
21001
21014
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
21002
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
21015
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
21003
21016
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
21004
21017
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
21005
21018
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -21023,7 +21036,7 @@ ul.pf-v6-c-list {
21023
21036
  .pf-v6-c-radio.pf-m-standalone {
21024
21037
  display: inline-grid;
21025
21038
  grid-template-columns: auto;
21026
- height: var(--pf-v6-c-check--Height);
21039
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
21027
21040
  }
21028
21041
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
21029
21042
  align-self: center;
@@ -21724,7 +21737,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21724
21737
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
21725
21738
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
21726
21739
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
21727
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
21740
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
21728
21741
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
21729
21742
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
21730
21743
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;