@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.3

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/_globals.scss +14 -12
  2. package/base/_variables.scss +1 -0
  3. package/base/patternfly-globals.css +12 -12
  4. package/base/patternfly-variables.css +98 -46
  5. package/base/tokens/_tokens-default.scss +49 -48
  6. package/base/tokens/_tokens-font.scss +65 -0
  7. package/components/Button/button.css +137 -177
  8. package/components/Button/button.scss +157 -139
  9. package/package.json +1 -1
  10. package/patternfly-base-no-globals-theme-dark-unversioned.css +98 -46
  11. package/patternfly-base-no-globals.css +98 -46
  12. package/patternfly-base-theme-dark-unversioned.css +110 -58
  13. package/patternfly-base.css +110 -58
  14. package/patternfly-no-globals.css +235 -230
  15. package/patternfly-theme-dark-unversioned.css +247 -242
  16. package/patternfly.css +247 -242
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/patternfly-base-no-globals.css CHANGED
@@ -432,26 +432,27 @@
432
432
  */
433
433
  :root {
434
434
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
435
- --pf-t--global--spacer--800: 80;
436
- --pf-t--global--spacer--700: 64;
437
- --pf-t--global--spacer--600: 48;
438
- --pf-t--global--spacer--500: 32;
439
- --pf-t--global--spacer--400: 24;
440
- --pf-t--global--spacer--300: 16;
441
- --pf-t--global--spacer--200: 8;
442
- --pf-t--global--spacer--100: 4;
443
- --pf-t--global--icon--size--400: 56;
444
- --pf-t--global--icon--size--300: 24;
445
- --pf-t--global--icon--size--200: 16;
446
- --pf-t--global--icon--size--100: 12;
447
- --pf-t--global--border--width--300: 3;
448
- --pf-t--global--border--width--200: 2;
449
- --pf-t--global--border--width--100: 1;
450
- --pf-t--global--border--radius--500: 999;
451
- --pf-t--global--border--radius--400: 24;
452
- --pf-t--global--border--radius--300: 16;
453
- --pf-t--global--border--radius--200: 6;
454
- --pf-t--global--border--radius--100: 4;
435
+ --pf-t--global--spacer--800: 80px;
436
+ --pf-t--global--spacer--700: 64px;
437
+ --pf-t--global--spacer--600: 48px;
438
+ --pf-t--global--spacer--500: 32px;
439
+ --pf-t--global--spacer--400: 24px;
440
+ --pf-t--global--spacer--300: 16px;
441
+ --pf-t--global--spacer--200: 8px;
442
+ --pf-t--global--spacer--100: 4px;
443
+ --pf-t--global--icon--size--400: 56px;
444
+ --pf-t--global--icon--size--300: 24px;
445
+ --pf-t--global--icon--size--200: 16px;
446
+ --pf-t--global--icon--size--100: 12px;
447
+ --pf-t--global--border--width--300: 3px;
448
+ --pf-t--global--border--width--200: 2px;
449
+ --pf-t--global--border--width--100: 1px;
450
+ --pf-t--global--border--radius--500: 999px;
451
+ --pf-t--global--border--radius--400: 24px;
452
+ --pf-t--global--border--radius--300: 16px;
453
+ --pf-t--global--border--radius--200: 6px;
454
+ --pf-t--global--border--radius--100: 4px;
455
+ --pf-t--global--border--radius--000: 0px;
455
456
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
456
457
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
457
458
  --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
@@ -509,37 +510,38 @@
509
510
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
510
511
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
511
512
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
512
- --pf-t--global--spacer--sm: 8;
513
- --pf-t--global--spacer--xl: 32;
514
- --pf-t--global--spacer--xs: 4;
515
- --pf-t--global--spacer--2xl: 48;
516
- --pf-t--global--spacer--lg: 24;
517
- --pf-t--global--spacer--md: 16;
518
- --pf-t--global--spacer--3xl: 64;
519
- --pf-t--global--spacer--4xl: 80;
513
+ --pf-t--global--spacer--sm: 8px;
514
+ --pf-t--global--spacer--xl: 32px;
515
+ --pf-t--global--spacer--xs: 4px;
516
+ --pf-t--global--spacer--2xl: 48px;
517
+ --pf-t--global--spacer--lg: 24px;
518
+ --pf-t--global--spacer--md: 16px;
519
+ --pf-t--global--spacer--3xl: 64px;
520
+ --pf-t--global--spacer--4xl: 80px;
520
521
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
521
522
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
522
523
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
523
- --pf-t--global--icon--size--sm: 12;
524
- --pf-t--global--icon--size--md: 16;
525
- --pf-t--global--icon--size--lg: 24;
526
- --pf-t--global--icon--size--xl: 56;
524
+ --pf-t--global--icon--size--sm: 12px;
525
+ --pf-t--global--icon--size--md: 16px;
526
+ --pf-t--global--icon--size--lg: 24px;
527
+ --pf-t--global--icon--size--xl: 56px;
527
528
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
528
529
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
529
- --pf-t--global--border--width--divider--default: 1;
530
- --pf-t--global--border--width--divider--hover: 1;
531
- --pf-t--global--border--width--divider--active: 1;
532
- --pf-t--global--border--width--control--hover: 1;
533
- --pf-t--global--border--width--control--active: 2;
534
- --pf-t--global--border--width--control--default: 1;
535
- --pf-t--global--border--width--button--hover: 2;
536
- --pf-t--global--border--width--button--default: 1;
537
- --pf-t--global--border--width--button--active: 2;
538
- --pf-t--global--border--radius--pill: 999;
539
- --pf-t--global--border--radius--tiny: 4;
540
- --pf-t--global--border--radius--medium: 16;
541
- --pf-t--global--border--radius--large: 24;
542
- --pf-t--global--border--radius--small: 6;
530
+ --pf-t--global--border--width--divider--default: 1px;
531
+ --pf-t--global--border--width--divider--hover: 1px;
532
+ --pf-t--global--border--width--divider--active: 1px;
533
+ --pf-t--global--border--width--control--hover: 1px;
534
+ --pf-t--global--border--width--control--active: 2px;
535
+ --pf-t--global--border--width--control--default: 1px;
536
+ --pf-t--global--border--width--button--hover: 2px;
537
+ --pf-t--global--border--width--button--default: 1px;
538
+ --pf-t--global--border--width--button--active: 2px;
539
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
540
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
541
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
542
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
543
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
544
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000);
543
545
  --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
544
546
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
545
547
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
@@ -648,6 +650,7 @@
648
650
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
649
651
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
650
652
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
653
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
651
654
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
652
655
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
653
656
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -766,6 +769,55 @@
766
769
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
767
770
  }
768
771
 
772
+ :root {
773
+ --pf-t--global--font--family--100: redhattext;
774
+ --pf-t--global--font--family--200: redhatdisplay;
775
+ --pf-t--global--font--family--300: redhatmono;
776
+ --pf-t--global--font--line-height--100: 1.3;
777
+ --pf-t--global--font--line-height--200: 1.5;
778
+ --pf-t--global--font--weight--body--100: 400;
779
+ --pf-t--global--font--weight--body--200: 600;
780
+ --pf-t--global--font--weight--heading--100: 700;
781
+ --pf-t--global--font--weight--heading--200: 700;
782
+ --pf-t--global--font--size--body--100: 12px;
783
+ --pf-t--global--font--size--body--200: 14px;
784
+ --pf-t--global--font--size--body--300: 16px;
785
+ --pf-t--global--font--size--heading--100: 16px;
786
+ --pf-t--global--font--size--heading--200: 18px;
787
+ --pf-t--global--font--size--heading--300: 20px;
788
+ --pf-t--global--font--size--heading--400: 24px;
789
+ --pf-t--global--font--size--heading--500: 28px;
790
+ --pf-t--global--font--size--heading--600: 36px;
791
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
792
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
793
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
794
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
795
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
796
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
797
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
798
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
799
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
800
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
801
+ --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
802
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
803
+ --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
804
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
805
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
806
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
807
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
808
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
809
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
810
+ --pf-t--global--text-decoration--100: none;
811
+ --pf-t--global--text-decoration--200: underline;
812
+ --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
813
+ --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
814
+ --pf-t--global--mix-blend-mode--100: multiply;
815
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
816
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
817
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
818
+ --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
819
+ }
820
+
769
821
  /**
770
822
  * Do not edit directly
771
823
  * Generated on Mon, 14 Aug 2023 18:11:22 GMT
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -432,26 +432,27 @@
432
432
  */
433
433
  :root {
434
434
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
435
- --pf-t--global--spacer--800: 80;
436
- --pf-t--global--spacer--700: 64;
437
- --pf-t--global--spacer--600: 48;
438
- --pf-t--global--spacer--500: 32;
439
- --pf-t--global--spacer--400: 24;
440
- --pf-t--global--spacer--300: 16;
441
- --pf-t--global--spacer--200: 8;
442
- --pf-t--global--spacer--100: 4;
443
- --pf-t--global--icon--size--400: 56;
444
- --pf-t--global--icon--size--300: 24;
445
- --pf-t--global--icon--size--200: 16;
446
- --pf-t--global--icon--size--100: 12;
447
- --pf-t--global--border--width--300: 3;
448
- --pf-t--global--border--width--200: 2;
449
- --pf-t--global--border--width--100: 1;
450
- --pf-t--global--border--radius--500: 999;
451
- --pf-t--global--border--radius--400: 24;
452
- --pf-t--global--border--radius--300: 16;
453
- --pf-t--global--border--radius--200: 6;
454
- --pf-t--global--border--radius--100: 4;
435
+ --pf-t--global--spacer--800: 80px;
436
+ --pf-t--global--spacer--700: 64px;
437
+ --pf-t--global--spacer--600: 48px;
438
+ --pf-t--global--spacer--500: 32px;
439
+ --pf-t--global--spacer--400: 24px;
440
+ --pf-t--global--spacer--300: 16px;
441
+ --pf-t--global--spacer--200: 8px;
442
+ --pf-t--global--spacer--100: 4px;
443
+ --pf-t--global--icon--size--400: 56px;
444
+ --pf-t--global--icon--size--300: 24px;
445
+ --pf-t--global--icon--size--200: 16px;
446
+ --pf-t--global--icon--size--100: 12px;
447
+ --pf-t--global--border--width--300: 3px;
448
+ --pf-t--global--border--width--200: 2px;
449
+ --pf-t--global--border--width--100: 1px;
450
+ --pf-t--global--border--radius--500: 999px;
451
+ --pf-t--global--border--radius--400: 24px;
452
+ --pf-t--global--border--radius--300: 16px;
453
+ --pf-t--global--border--radius--200: 6px;
454
+ --pf-t--global--border--radius--100: 4px;
455
+ --pf-t--global--border--radius--000: 0px;
455
456
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
456
457
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
457
458
  --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
@@ -509,37 +510,38 @@
509
510
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
510
511
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
511
512
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
512
- --pf-t--global--spacer--sm: 8;
513
- --pf-t--global--spacer--xl: 32;
514
- --pf-t--global--spacer--xs: 4;
515
- --pf-t--global--spacer--2xl: 48;
516
- --pf-t--global--spacer--lg: 24;
517
- --pf-t--global--spacer--md: 16;
518
- --pf-t--global--spacer--3xl: 64;
519
- --pf-t--global--spacer--4xl: 80;
513
+ --pf-t--global--spacer--sm: 8px;
514
+ --pf-t--global--spacer--xl: 32px;
515
+ --pf-t--global--spacer--xs: 4px;
516
+ --pf-t--global--spacer--2xl: 48px;
517
+ --pf-t--global--spacer--lg: 24px;
518
+ --pf-t--global--spacer--md: 16px;
519
+ --pf-t--global--spacer--3xl: 64px;
520
+ --pf-t--global--spacer--4xl: 80px;
520
521
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
521
522
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
522
523
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
523
- --pf-t--global--icon--size--sm: 12;
524
- --pf-t--global--icon--size--md: 16;
525
- --pf-t--global--icon--size--lg: 24;
526
- --pf-t--global--icon--size--xl: 56;
524
+ --pf-t--global--icon--size--sm: 12px;
525
+ --pf-t--global--icon--size--md: 16px;
526
+ --pf-t--global--icon--size--lg: 24px;
527
+ --pf-t--global--icon--size--xl: 56px;
527
528
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
528
529
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
529
- --pf-t--global--border--width--divider--default: 1;
530
- --pf-t--global--border--width--divider--hover: 1;
531
- --pf-t--global--border--width--divider--active: 1;
532
- --pf-t--global--border--width--control--hover: 1;
533
- --pf-t--global--border--width--control--active: 2;
534
- --pf-t--global--border--width--control--default: 1;
535
- --pf-t--global--border--width--button--hover: 2;
536
- --pf-t--global--border--width--button--default: 1;
537
- --pf-t--global--border--width--button--active: 2;
538
- --pf-t--global--border--radius--pill: 999;
539
- --pf-t--global--border--radius--tiny: 4;
540
- --pf-t--global--border--radius--medium: 16;
541
- --pf-t--global--border--radius--large: 24;
542
- --pf-t--global--border--radius--small: 6;
530
+ --pf-t--global--border--width--divider--default: 1px;
531
+ --pf-t--global--border--width--divider--hover: 1px;
532
+ --pf-t--global--border--width--divider--active: 1px;
533
+ --pf-t--global--border--width--control--hover: 1px;
534
+ --pf-t--global--border--width--control--active: 2px;
535
+ --pf-t--global--border--width--control--default: 1px;
536
+ --pf-t--global--border--width--button--hover: 2px;
537
+ --pf-t--global--border--width--button--default: 1px;
538
+ --pf-t--global--border--width--button--active: 2px;
539
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
540
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
541
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
542
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
543
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
544
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000);
543
545
  --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
544
546
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
545
547
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
@@ -648,6 +650,7 @@
648
650
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
649
651
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
650
652
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
653
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
651
654
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
652
655
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
653
656
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -766,6 +769,55 @@
766
769
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
767
770
  }
768
771
 
772
+ :root {
773
+ --pf-t--global--font--family--100: redhattext;
774
+ --pf-t--global--font--family--200: redhatdisplay;
775
+ --pf-t--global--font--family--300: redhatmono;
776
+ --pf-t--global--font--line-height--100: 1.3;
777
+ --pf-t--global--font--line-height--200: 1.5;
778
+ --pf-t--global--font--weight--body--100: 400;
779
+ --pf-t--global--font--weight--body--200: 600;
780
+ --pf-t--global--font--weight--heading--100: 700;
781
+ --pf-t--global--font--weight--heading--200: 700;
782
+ --pf-t--global--font--size--body--100: 12px;
783
+ --pf-t--global--font--size--body--200: 14px;
784
+ --pf-t--global--font--size--body--300: 16px;
785
+ --pf-t--global--font--size--heading--100: 16px;
786
+ --pf-t--global--font--size--heading--200: 18px;
787
+ --pf-t--global--font--size--heading--300: 20px;
788
+ --pf-t--global--font--size--heading--400: 24px;
789
+ --pf-t--global--font--size--heading--500: 28px;
790
+ --pf-t--global--font--size--heading--600: 36px;
791
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
792
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
793
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
794
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
795
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
796
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
797
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
798
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
799
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
800
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
801
+ --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
802
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
803
+ --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
804
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
805
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
806
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
807
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
808
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
809
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
810
+ --pf-t--global--text-decoration--100: none;
811
+ --pf-t--global--text-decoration--200: underline;
812
+ --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
813
+ --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
814
+ --pf-t--global--mix-blend-mode--100: multiply;
815
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
816
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
817
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
818
+ --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
819
+ }
820
+
769
821
  /**
770
822
  * Do not edit directly
771
823
  * Generated on Mon, 14 Aug 2023 18:11:22 GMT
@@ -1238,10 +1290,10 @@ body) {
1238
1290
  }
1239
1291
 
1240
1292
  :where(body) {
1241
- font-family: var(--pf-v5-global--FontFamily--text);
1242
- font-size: var(--pf-v5-global--FontSize--md);
1243
- font-weight: var(--pf-v5-global--FontWeight--normal);
1244
- line-height: var(--pf-v5-global--LineHeight--md);
1293
+ font-family: var(--pf-t--global--font--family--body);
1294
+ font-size: var(--pf-t--global--font--size--body);
1295
+ font-weight: var(--pf-t--global--font--weight--body);
1296
+ line-height: var(--pf-t--global--font--line-height--body);
1245
1297
  }
1246
1298
 
1247
1299
  :where(h1,
@@ -1251,7 +1303,7 @@ h4,
1251
1303
  h5,
1252
1304
  h6) {
1253
1305
  font-size: 100%;
1254
- font-weight: var(--pf-v5-global--FontWeight--normal);
1306
+ font-weight: var(--pf-t--global--font--weight--body);
1255
1307
  }
1256
1308
 
1257
1309
  :where(ul) {
@@ -1266,8 +1318,8 @@ textarea) {
1266
1318
  margin: 0;
1267
1319
  font-family: inherit;
1268
1320
  font-size: 100%;
1269
- line-height: var(--pf-v5-global--LineHeight--md);
1270
- color: var(--pf-v5-global--Color--100);
1321
+ line-height: var(--pf-t--global--font--line-height--body);
1322
+ color: var(--pf-t--global--text--color--regular);
1271
1323
  }
1272
1324
 
1273
1325
  :where(img,
@@ -1297,18 +1349,18 @@ th) {
1297
1349
 
1298
1350
  :where(code,
1299
1351
  pre) {
1300
- font-family: var(--pf-v5-global--FontFamily--monospace);
1352
+ font-family: var(--pf-t--global--font--family--mono);
1301
1353
  }
1302
1354
 
1303
1355
  :where(a) {
1304
1356
  font-weight: var(--pf-v5-global--link--FontWeight);
1305
- color: var(--pf-v5-global--link--Color);
1306
- text-decoration: var(--pf-v5-global--link--TextDecoration);
1357
+ color: var(--pf-t--global--text--color--link--default);
1358
+ text-decoration: var(--pf-t--global--link--text-decoration);
1307
1359
  }
1308
1360
 
1309
1361
  :where(a:hover) {
1310
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
1311
- --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
1362
+ --pf-v5-global--link--Color: var(--pf-t--global--text--color--link--hover);
1363
+ --pf-v5-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
1312
1364
  }
1313
1365
 
1314
1366
  :where(a,
package/patternfly-base.css CHANGED
@@ -432,26 +432,27 @@
432
432
  */
433
433
  :root {
434
434
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
435
- --pf-t--global--spacer--800: 80;
436
- --pf-t--global--spacer--700: 64;
437
- --pf-t--global--spacer--600: 48;
438
- --pf-t--global--spacer--500: 32;
439
- --pf-t--global--spacer--400: 24;
440
- --pf-t--global--spacer--300: 16;
441
- --pf-t--global--spacer--200: 8;
442
- --pf-t--global--spacer--100: 4;
443
- --pf-t--global--icon--size--400: 56;
444
- --pf-t--global--icon--size--300: 24;
445
- --pf-t--global--icon--size--200: 16;
446
- --pf-t--global--icon--size--100: 12;
447
- --pf-t--global--border--width--300: 3;
448
- --pf-t--global--border--width--200: 2;
449
- --pf-t--global--border--width--100: 1;
450
- --pf-t--global--border--radius--500: 999;
451
- --pf-t--global--border--radius--400: 24;
452
- --pf-t--global--border--radius--300: 16;
453
- --pf-t--global--border--radius--200: 6;
454
- --pf-t--global--border--radius--100: 4;
435
+ --pf-t--global--spacer--800: 80px;
436
+ --pf-t--global--spacer--700: 64px;
437
+ --pf-t--global--spacer--600: 48px;
438
+ --pf-t--global--spacer--500: 32px;
439
+ --pf-t--global--spacer--400: 24px;
440
+ --pf-t--global--spacer--300: 16px;
441
+ --pf-t--global--spacer--200: 8px;
442
+ --pf-t--global--spacer--100: 4px;
443
+ --pf-t--global--icon--size--400: 56px;
444
+ --pf-t--global--icon--size--300: 24px;
445
+ --pf-t--global--icon--size--200: 16px;
446
+ --pf-t--global--icon--size--100: 12px;
447
+ --pf-t--global--border--width--300: 3px;
448
+ --pf-t--global--border--width--200: 2px;
449
+ --pf-t--global--border--width--100: 1px;
450
+ --pf-t--global--border--radius--500: 999px;
451
+ --pf-t--global--border--radius--400: 24px;
452
+ --pf-t--global--border--radius--300: 16px;
453
+ --pf-t--global--border--radius--200: 6px;
454
+ --pf-t--global--border--radius--100: 4px;
455
+ --pf-t--global--border--radius--000: 0px;
455
456
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
456
457
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
457
458
  --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
@@ -509,37 +510,38 @@
509
510
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
510
511
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
511
512
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
512
- --pf-t--global--spacer--sm: 8;
513
- --pf-t--global--spacer--xl: 32;
514
- --pf-t--global--spacer--xs: 4;
515
- --pf-t--global--spacer--2xl: 48;
516
- --pf-t--global--spacer--lg: 24;
517
- --pf-t--global--spacer--md: 16;
518
- --pf-t--global--spacer--3xl: 64;
519
- --pf-t--global--spacer--4xl: 80;
513
+ --pf-t--global--spacer--sm: 8px;
514
+ --pf-t--global--spacer--xl: 32px;
515
+ --pf-t--global--spacer--xs: 4px;
516
+ --pf-t--global--spacer--2xl: 48px;
517
+ --pf-t--global--spacer--lg: 24px;
518
+ --pf-t--global--spacer--md: 16px;
519
+ --pf-t--global--spacer--3xl: 64px;
520
+ --pf-t--global--spacer--4xl: 80px;
520
521
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
521
522
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
522
523
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
523
- --pf-t--global--icon--size--sm: 12;
524
- --pf-t--global--icon--size--md: 16;
525
- --pf-t--global--icon--size--lg: 24;
526
- --pf-t--global--icon--size--xl: 56;
524
+ --pf-t--global--icon--size--sm: 12px;
525
+ --pf-t--global--icon--size--md: 16px;
526
+ --pf-t--global--icon--size--lg: 24px;
527
+ --pf-t--global--icon--size--xl: 56px;
527
528
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
528
529
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
529
- --pf-t--global--border--width--divider--default: 1;
530
- --pf-t--global--border--width--divider--hover: 1;
531
- --pf-t--global--border--width--divider--active: 1;
532
- --pf-t--global--border--width--control--hover: 1;
533
- --pf-t--global--border--width--control--active: 2;
534
- --pf-t--global--border--width--control--default: 1;
535
- --pf-t--global--border--width--button--hover: 2;
536
- --pf-t--global--border--width--button--default: 1;
537
- --pf-t--global--border--width--button--active: 2;
538
- --pf-t--global--border--radius--pill: 999;
539
- --pf-t--global--border--radius--tiny: 4;
540
- --pf-t--global--border--radius--medium: 16;
541
- --pf-t--global--border--radius--large: 24;
542
- --pf-t--global--border--radius--small: 6;
530
+ --pf-t--global--border--width--divider--default: 1px;
531
+ --pf-t--global--border--width--divider--hover: 1px;
532
+ --pf-t--global--border--width--divider--active: 1px;
533
+ --pf-t--global--border--width--control--hover: 1px;
534
+ --pf-t--global--border--width--control--active: 2px;
535
+ --pf-t--global--border--width--control--default: 1px;
536
+ --pf-t--global--border--width--button--hover: 2px;
537
+ --pf-t--global--border--width--button--default: 1px;
538
+ --pf-t--global--border--width--button--active: 2px;
539
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
540
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
541
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
542
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
543
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
544
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000);
543
545
  --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
544
546
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
545
547
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
@@ -648,6 +650,7 @@
648
650
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
649
651
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
650
652
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
653
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
651
654
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
652
655
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
653
656
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -766,6 +769,55 @@
766
769
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
767
770
  }
768
771
 
772
+ :root {
773
+ --pf-t--global--font--family--100: redhattext;
774
+ --pf-t--global--font--family--200: redhatdisplay;
775
+ --pf-t--global--font--family--300: redhatmono;
776
+ --pf-t--global--font--line-height--100: 1.3;
777
+ --pf-t--global--font--line-height--200: 1.5;
778
+ --pf-t--global--font--weight--body--100: 400;
779
+ --pf-t--global--font--weight--body--200: 600;
780
+ --pf-t--global--font--weight--heading--100: 700;
781
+ --pf-t--global--font--weight--heading--200: 700;
782
+ --pf-t--global--font--size--body--100: 12px;
783
+ --pf-t--global--font--size--body--200: 14px;
784
+ --pf-t--global--font--size--body--300: 16px;
785
+ --pf-t--global--font--size--heading--100: 16px;
786
+ --pf-t--global--font--size--heading--200: 18px;
787
+ --pf-t--global--font--size--heading--300: 20px;
788
+ --pf-t--global--font--size--heading--400: 24px;
789
+ --pf-t--global--font--size--heading--500: 28px;
790
+ --pf-t--global--font--size--heading--600: 36px;
791
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
792
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
793
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
794
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
795
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
796
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
797
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
798
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
799
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
800
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
801
+ --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
802
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
803
+ --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
804
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
805
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
806
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
807
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
808
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
809
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
810
+ --pf-t--global--text-decoration--100: none;
811
+ --pf-t--global--text-decoration--200: underline;
812
+ --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
813
+ --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
814
+ --pf-t--global--mix-blend-mode--100: multiply;
815
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
816
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
817
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
818
+ --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
819
+ }
820
+
769
821
  /**
770
822
  * Do not edit directly
771
823
  * Generated on Mon, 14 Aug 2023 18:11:22 GMT
@@ -1238,10 +1290,10 @@ body) {
1238
1290
  }
1239
1291
 
1240
1292
  :where(body) {
1241
- font-family: var(--pf-v5-global--FontFamily--text);
1242
- font-size: var(--pf-v5-global--FontSize--md);
1243
- font-weight: var(--pf-v5-global--FontWeight--normal);
1244
- line-height: var(--pf-v5-global--LineHeight--md);
1293
+ font-family: var(--pf-t--global--font--family--body);
1294
+ font-size: var(--pf-t--global--font--size--body);
1295
+ font-weight: var(--pf-t--global--font--weight--body);
1296
+ line-height: var(--pf-t--global--font--line-height--body);
1245
1297
  }
1246
1298
 
1247
1299
  :where(h1,
@@ -1251,7 +1303,7 @@ h4,
1251
1303
  h5,
1252
1304
  h6) {
1253
1305
  font-size: 100%;
1254
- font-weight: var(--pf-v5-global--FontWeight--normal);
1306
+ font-weight: var(--pf-t--global--font--weight--body);
1255
1307
  }
1256
1308
 
1257
1309
  :where(ul) {
@@ -1266,8 +1318,8 @@ textarea) {
1266
1318
  margin: 0;
1267
1319
  font-family: inherit;
1268
1320
  font-size: 100%;
1269
- line-height: var(--pf-v5-global--LineHeight--md);
1270
- color: var(--pf-v5-global--Color--100);
1321
+ line-height: var(--pf-t--global--font--line-height--body);
1322
+ color: var(--pf-t--global--text--color--regular);
1271
1323
  }
1272
1324
 
1273
1325
  :where(img,
@@ -1297,18 +1349,18 @@ th) {
1297
1349
 
1298
1350
  :where(code,
1299
1351
  pre) {
1300
- font-family: var(--pf-v5-global--FontFamily--monospace);
1352
+ font-family: var(--pf-t--global--font--family--mono);
1301
1353
  }
1302
1354
 
1303
1355
  :where(a) {
1304
1356
  font-weight: var(--pf-v5-global--link--FontWeight);
1305
- color: var(--pf-v5-global--link--Color);
1306
- text-decoration: var(--pf-v5-global--link--TextDecoration);
1357
+ color: var(--pf-t--global--text--color--link--default);
1358
+ text-decoration: var(--pf-t--global--link--text-decoration);
1307
1359
  }
1308
1360
 
1309
1361
  :where(a:hover) {
1310
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
1311
- --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
1362
+ --pf-v5-global--link--Color: var(--pf-t--global--text--color--link--hover);
1363
+ --pf-v5-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
1312
1364
  }
1313
1365
 
1314
1366
  :where(a,