@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.101

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 (52) hide show
  1. package/components/Table/table-scrollable.css +12 -15
  2. package/components/Table/table-scrollable.scss +33 -30
  3. package/components/Table/table-tree-view.css +0 -2
  4. package/components/Table/table-tree-view.scss +9 -11
  5. package/components/Table/table.css +118 -55
  6. package/components/Table/table.scss +182 -100
  7. package/docs/components/Table/examples/Table.css +6 -8
  8. package/docs/components/Table/examples/Table.md +79 -92
  9. package/docs/demos/Table/examples/Table.md +28 -28
  10. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  11. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  12. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  13. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  14. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  15. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  16. package/docs/utilities/Display/examples/Display.css +8 -8
  17. package/docs/utilities/Display/examples/Display.md +7 -7
  18. package/docs/utilities/Flex/examples/Flex.css +5 -5
  19. package/docs/utilities/Flex/examples/Flex.md +82 -40
  20. package/docs/utilities/Float/examples/Float.css +2 -2
  21. package/docs/utilities/Float/examples/Float.md +6 -6
  22. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  23. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  24. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  25. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  26. package/docs/utilities/Text/examples/Text.md +53 -53
  27. package/package.json +1 -1
  28. package/patternfly-addons.css +91 -371
  29. package/patternfly-no-globals.css +130 -72
  30. package/patternfly-theme-dark-unversioned.css +130 -72
  31. package/patternfly.css +130 -72
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/sass-utilities/mixins.scss +2 -2
  35. package/utilities/Alignment/alignment.css +24 -24
  36. package/utilities/Alignment/alignment.scss +4 -4
  37. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  38. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  39. package/utilities/BoxShadow/box-shadow.css +15 -39
  40. package/utilities/BoxShadow/box-shadow.scss +17 -27
  41. package/utilities/Display/display.scss +2 -2
  42. package/utilities/Flex/flex.scss +18 -18
  43. package/utilities/Float/float.css +24 -24
  44. package/utilities/Float/float.scss +4 -4
  45. package/utilities/Sizing/sizing.css +28 -28
  46. package/utilities/Sizing/sizing.scss +17 -17
  47. package/utilities/Text/text.css +0 -155
  48. package/utilities/Text/text.scss +10 -16
  49. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  50. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  51. package/utilities/Text/themes/dark/text.css +0 -0
  52. package/utilities/Text/themes/dark/text.scss +0 -33
package/utilities/Sizing/sizing.css CHANGED
@@ -627,121 +627,121 @@
627
627
  }
628
628
  }
629
629
  .pf-v6-u-min-width {
630
- --pf-v5-u-min-width--MinWidth: 0;
631
- min-width: var(--pf-v5-u-min-width--MinWidth) !important;
630
+ --pf-v6-u-min-width--MinWidth: 0;
631
+ min-width: var(--pf-v6-u-min-width--MinWidth) !important;
632
632
  }
633
633
  @media (min-width: 576px) {
634
634
  .pf-v6-u-min-width {
635
- min-width: var(--pf-v5-u-min-width--MinWidth-on-sm, var(--pf-v5-u-min-width--MinWidth)) !important;
635
+ min-width: var(--pf-v6-u-min-width--MinWidth-on-sm, var(--pf-v6-u-min-width--MinWidth)) !important;
636
636
  }
637
637
  }
638
638
  @media (min-width: 768px) {
639
639
  .pf-v6-u-min-width {
640
- min-width: var(--pf-v5-u-min-width--MinWidth-on-md, var(--pf-v5-u-min-width--MinWidth-on-sm, var(--pf-v5-u-min-width--MinWidth))) !important;
640
+ min-width: var(--pf-v6-u-min-width--MinWidth-on-md, var(--pf-v6-u-min-width--MinWidth-on-sm, var(--pf-v6-u-min-width--MinWidth))) !important;
641
641
  }
642
642
  }
643
643
  @media (min-width: 992px) {
644
644
  .pf-v6-u-min-width {
645
- min-width: var(--pf-v5-u-min-width--MinWidth-on-lg, var(--pf-v5-u-min-width--MinWidth-on-md, var(--pf-v5-u-min-width--MinWidth-on-sm, var(--pf-v5-u-min-width--MinWidth)))) !important;
645
+ min-width: var(--pf-v6-u-min-width--MinWidth-on-lg, var(--pf-v6-u-min-width--MinWidth-on-md, var(--pf-v6-u-min-width--MinWidth-on-sm, var(--pf-v6-u-min-width--MinWidth)))) !important;
646
646
  }
647
647
  }
648
648
  @media (min-width: 1200px) {
649
649
  .pf-v6-u-min-width {
650
- min-width: var(--pf-v5-u-min-width--MinWidth-on-xl, var(--pf-v5-u-min-width--MinWidth-on-lg, var(--pf-v5-u-min-width--MinWidth-on-md, var(--pf-v5-u-min-width--MinWidth-on-sm, var(--pf-v5-u-min-width--MinWidth))))) !important;
650
+ min-width: var(--pf-v6-u-min-width--MinWidth-on-xl, var(--pf-v6-u-min-width--MinWidth-on-lg, var(--pf-v6-u-min-width--MinWidth-on-md, var(--pf-v6-u-min-width--MinWidth-on-sm, var(--pf-v6-u-min-width--MinWidth))))) !important;
651
651
  }
652
652
  }
653
653
  @media (min-width: 1450px) {
654
654
  .pf-v6-u-min-width {
655
- min-width: var(--pf-v5-u-min-width--MinWidth-on-2xl, var(--pf-v5-u-min-width--MinWidth-on-xl, var(--pf-v5-u-min-width--MinWidth-on-lg, var(--pf-v5-u-min-width--MinWidth-on-md, var(--pf-v5-u-min-width--MinWidth-on-sm, var(--pf-v5-u-min-width--MinWidth)))))) !important;
655
+ min-width: var(--pf-v6-u-min-width--MinWidth-on-2xl, var(--pf-v6-u-min-width--MinWidth-on-xl, var(--pf-v6-u-min-width--MinWidth-on-lg, var(--pf-v6-u-min-width--MinWidth-on-md, var(--pf-v6-u-min-width--MinWidth-on-sm, var(--pf-v6-u-min-width--MinWidth)))))) !important;
656
656
  }
657
657
  }
658
658
 
659
659
  .pf-v6-u-max-width {
660
- --pf-v5-u-max-width--MaxWidth: auto;
661
- max-width: var(--pf-v5-u-max-width--MaxWidth) !important;
660
+ --pf-v6-u-max-width--MaxWidth: auto;
661
+ max-width: var(--pf-v6-u-max-width--MaxWidth) !important;
662
662
  }
663
663
  @media (min-width: 576px) {
664
664
  .pf-v6-u-max-width {
665
- max-width: var(--pf-v5-u-max-width--MaxWidth-on-sm, var(--pf-v5-u-max-width--MaxWidth)) !important;
665
+ max-width: var(--pf-v6-u-max-width--MaxWidth-on-sm, var(--pf-v6-u-max-width--MaxWidth)) !important;
666
666
  }
667
667
  }
668
668
  @media (min-width: 768px) {
669
669
  .pf-v6-u-max-width {
670
- max-width: var(--pf-v5-u-max-width--MaxWidth-on-md, var(--pf-v5-u-max-width--MaxWidth-on-sm, var(--pf-v5-u-max-width--MaxWidth))) !important;
670
+ max-width: var(--pf-v6-u-max-width--MaxWidth-on-md, var(--pf-v6-u-max-width--MaxWidth-on-sm, var(--pf-v6-u-max-width--MaxWidth))) !important;
671
671
  }
672
672
  }
673
673
  @media (min-width: 992px) {
674
674
  .pf-v6-u-max-width {
675
- max-width: var(--pf-v5-u-max-width--MaxWidth-on-lg, var(--pf-v5-u-max-width--MaxWidth-on-md, var(--pf-v5-u-max-width--MaxWidth-on-sm, var(--pf-v5-u-max-width--MaxWidth)))) !important;
675
+ max-width: var(--pf-v6-u-max-width--MaxWidth-on-lg, var(--pf-v6-u-max-width--MaxWidth-on-md, var(--pf-v6-u-max-width--MaxWidth-on-sm, var(--pf-v6-u-max-width--MaxWidth)))) !important;
676
676
  }
677
677
  }
678
678
  @media (min-width: 1200px) {
679
679
  .pf-v6-u-max-width {
680
- max-width: var(--pf-v5-u-max-width--MaxWidth-on-xl, var(--pf-v5-u-max-width--MaxWidth-on-lg, var(--pf-v5-u-max-width--MaxWidth-on-md, var(--pf-v5-u-max-width--MaxWidth-on-sm, var(--pf-v5-u-max-width--MaxWidth))))) !important;
680
+ max-width: var(--pf-v6-u-max-width--MaxWidth-on-xl, var(--pf-v6-u-max-width--MaxWidth-on-lg, var(--pf-v6-u-max-width--MaxWidth-on-md, var(--pf-v6-u-max-width--MaxWidth-on-sm, var(--pf-v6-u-max-width--MaxWidth))))) !important;
681
681
  }
682
682
  }
683
683
  @media (min-width: 1450px) {
684
684
  .pf-v6-u-max-width {
685
- max-width: var(--pf-v5-u-max-width--MaxWidth-on-2xl, var(--pf-v5-u-max-width--MaxWidth-on-xl, var(--pf-v5-u-max-width--MaxWidth-on-lg, var(--pf-v5-u-max-width--MaxWidth-on-md, var(--pf-v5-u-max-width--MaxWidth-on-sm, var(--pf-v5-u-max-width--MaxWidth)))))) !important;
685
+ max-width: var(--pf-v6-u-max-width--MaxWidth-on-2xl, var(--pf-v6-u-max-width--MaxWidth-on-xl, var(--pf-v6-u-max-width--MaxWidth-on-lg, var(--pf-v6-u-max-width--MaxWidth-on-md, var(--pf-v6-u-max-width--MaxWidth-on-sm, var(--pf-v6-u-max-width--MaxWidth)))))) !important;
686
686
  }
687
687
  }
688
688
 
689
689
  .pf-v6-u-min-height {
690
- --pf-v5-u-min-height--MinHeight: 0;
691
- min-height: var(--pf-v5-u-min-height--MinHeight) !important;
690
+ --pf-v6-u-min-height--MinHeight: 0;
691
+ min-height: var(--pf-v6-u-min-height--MinHeight) !important;
692
692
  }
693
693
  @media (min-width: 576px) {
694
694
  .pf-v6-u-min-height {
695
- min-height: var(--pf-v5-u-min-height--MinHeight-on-sm, var(--pf-v5-u-min-height--MinHeight)) !important;
695
+ min-height: var(--pf-v6-u-min-height--MinHeight-on-sm, var(--pf-v6-u-min-height--MinHeight)) !important;
696
696
  }
697
697
  }
698
698
  @media (min-width: 768px) {
699
699
  .pf-v6-u-min-height {
700
- min-height: var(--pf-v5-u-min-height--MinHeight-on-md, var(--pf-v5-u-min-height--MinHeight-on-sm, var(--pf-v5-u-min-height--MinHeight))) !important;
700
+ min-height: var(--pf-v6-u-min-height--MinHeight-on-md, var(--pf-v6-u-min-height--MinHeight-on-sm, var(--pf-v6-u-min-height--MinHeight))) !important;
701
701
  }
702
702
  }
703
703
  @media (min-width: 992px) {
704
704
  .pf-v6-u-min-height {
705
- min-height: var(--pf-v5-u-min-height--MinHeight-on-lg, var(--pf-v5-u-min-height--MinHeight-on-md, var(--pf-v5-u-min-height--MinHeight-on-sm, var(--pf-v5-u-min-height--MinHeight)))) !important;
705
+ min-height: var(--pf-v6-u-min-height--MinHeight-on-lg, var(--pf-v6-u-min-height--MinHeight-on-md, var(--pf-v6-u-min-height--MinHeight-on-sm, var(--pf-v6-u-min-height--MinHeight)))) !important;
706
706
  }
707
707
  }
708
708
  @media (min-width: 1200px) {
709
709
  .pf-v6-u-min-height {
710
- min-height: var(--pf-v5-u-min-height--MinHeight-on-xl, var(--pf-v5-u-min-height--MinHeight-on-lg, var(--pf-v5-u-min-height--MinHeight-on-md, var(--pf-v5-u-min-height--MinHeight-on-sm, var(--pf-v5-u-min-height--MinHeight))))) !important;
710
+ min-height: var(--pf-v6-u-min-height--MinHeight-on-xl, var(--pf-v6-u-min-height--MinHeight-on-lg, var(--pf-v6-u-min-height--MinHeight-on-md, var(--pf-v6-u-min-height--MinHeight-on-sm, var(--pf-v6-u-min-height--MinHeight))))) !important;
711
711
  }
712
712
  }
713
713
  @media (min-width: 1450px) {
714
714
  .pf-v6-u-min-height {
715
- min-height: var(--pf-v5-u-min-height--MinHeight-on-2xl, var(--pf-v5-u-min-height--MinHeight-on-xl, var(--pf-v5-u-min-height--MinHeight-on-lg, var(--pf-v5-u-min-height--MinHeight-on-md, var(--pf-v5-u-min-height--MinHeight-on-sm, var(--pf-v5-u-min-height--MinHeight)))))) !important;
715
+ min-height: var(--pf-v6-u-min-height--MinHeight-on-2xl, var(--pf-v6-u-min-height--MinHeight-on-xl, var(--pf-v6-u-min-height--MinHeight-on-lg, var(--pf-v6-u-min-height--MinHeight-on-md, var(--pf-v6-u-min-height--MinHeight-on-sm, var(--pf-v6-u-min-height--MinHeight)))))) !important;
716
716
  }
717
717
  }
718
718
 
719
719
  .pf-v6-u-max-height {
720
- --pf-v5-u-max-height--MaxHeight: auto;
721
- max-height: var(--pf-v5-u-max-height--MaxHeight) !important;
720
+ --pf-v6-u-max-height--MaxHeight: auto;
721
+ max-height: var(--pf-v6-u-max-height--MaxHeight) !important;
722
722
  }
723
723
  @media (min-width: 576px) {
724
724
  .pf-v6-u-max-height {
725
- max-height: var(--pf-v5-u-max-height--MaxHeight-on-sm, var(--pf-v5-u-max-height--MaxHeight)) !important;
725
+ max-height: var(--pf-v6-u-max-height--MaxHeight-on-sm, var(--pf-v6-u-max-height--MaxHeight)) !important;
726
726
  }
727
727
  }
728
728
  @media (min-width: 768px) {
729
729
  .pf-v6-u-max-height {
730
- max-height: var(--pf-v5-u-max-height--MaxHeight-on-md, var(--pf-v5-u-max-height--MaxHeight-on-sm, var(--pf-v5-u-max-height--MaxHeight))) !important;
730
+ max-height: var(--pf-v6-u-max-height--MaxHeight-on-md, var(--pf-v6-u-max-height--MaxHeight-on-sm, var(--pf-v6-u-max-height--MaxHeight))) !important;
731
731
  }
732
732
  }
733
733
  @media (min-width: 992px) {
734
734
  .pf-v6-u-max-height {
735
- max-height: var(--pf-v5-u-max-height--MaxHeight-on-lg, var(--pf-v5-u-max-height--MaxHeight-on-md, var(--pf-v5-u-max-height--MaxHeight-on-sm, var(--pf-v5-u-max-height--MaxHeight)))) !important;
735
+ max-height: var(--pf-v6-u-max-height--MaxHeight-on-lg, var(--pf-v6-u-max-height--MaxHeight-on-md, var(--pf-v6-u-max-height--MaxHeight-on-sm, var(--pf-v6-u-max-height--MaxHeight)))) !important;
736
736
  }
737
737
  }
738
738
  @media (min-width: 1200px) {
739
739
  .pf-v6-u-max-height {
740
- max-height: var(--pf-v5-u-max-height--MaxHeight-on-xl, var(--pf-v5-u-max-height--MaxHeight-on-lg, var(--pf-v5-u-max-height--MaxHeight-on-md, var(--pf-v5-u-max-height--MaxHeight-on-sm, var(--pf-v5-u-max-height--MaxHeight))))) !important;
740
+ max-height: var(--pf-v6-u-max-height--MaxHeight-on-xl, var(--pf-v6-u-max-height--MaxHeight-on-lg, var(--pf-v6-u-max-height--MaxHeight-on-md, var(--pf-v6-u-max-height--MaxHeight-on-sm, var(--pf-v6-u-max-height--MaxHeight))))) !important;
741
741
  }
742
742
  }
743
743
  @media (min-width: 1450px) {
744
744
  .pf-v6-u-max-height {
745
- max-height: var(--pf-v5-u-max-height--MaxHeight-on-2xl, var(--pf-v5-u-max-height--MaxHeight-on-xl, var(--pf-v5-u-max-height--MaxHeight-on-lg, var(--pf-v5-u-max-height--MaxHeight-on-md, var(--pf-v5-u-max-height--MaxHeight-on-sm, var(--pf-v5-u-max-height--MaxHeight)))))) !important;
745
+ max-height: var(--pf-v6-u-max-height--MaxHeight-on-2xl, var(--pf-v6-u-max-height--MaxHeight-on-xl, var(--pf-v6-u-max-height--MaxHeight-on-lg, var(--pf-v6-u-max-height--MaxHeight-on-md, var(--pf-v6-u-max-height--MaxHeight-on-sm, var(--pf-v6-u-max-height--MaxHeight)))))) !important;
746
746
  }
747
747
  }
package/utilities/Sizing/sizing.scss CHANGED
@@ -1,8 +1,8 @@
1
- $pf-v5-u-sizing--min-max--breakpoint-map: build-breakpoint-map();
1
+ $pf-v6-u-sizing--min-max--breakpoint-map: build-breakpoint-map();
2
2
  // stylelint-disable
3
3
 
4
4
  // Width options
5
- $pf-v5-u-width-options: (
5
+ $pf-v6-u-width-options: (
6
6
  w-auto: (width auto),
7
7
  w-initial: (width initial),
8
8
  w-inherit: (width inherit),
@@ -22,7 +22,7 @@ $pf-v5-u-width-options: (
22
22
  );
23
23
 
24
24
  // Height options
25
- $pf-v5-u-height-options: (
25
+ $pf-v6-u-height-options: (
26
26
  h-auto: (height auto),
27
27
  h-initial: (height initial),
28
28
  h-inherit: (height inherit),
@@ -41,49 +41,49 @@ $pf-v5-u-height-options: (
41
41
  h-100vh: (height 100vh)
42
42
  );
43
43
 
44
- @include pf-v5-utility-builder($pf-v5-u-width-options, $pf-v5-global--breakpoint-list);
45
- @include pf-v5-utility-builder($pf-v5-u-height-options, $pf-v5-global--breakpoint-list);
44
+ @include pf-v5-utility-builder($pf-v6-u-width-options, $pf-v5-global--breakpoint-list);
45
+ @include pf-v5-utility-builder($pf-v6-u-height-options, $pf-v5-global--breakpoint-list);
46
46
 
47
47
  .#{$pf-prefix}u-min-width {
48
- --pf-v5-u-min-width--MinWidth: 0;
48
+ --pf-v6-u-min-width--MinWidth: 0;
49
49
 
50
50
  @include pf-v5-build-css-variable-stack(
51
51
  "min-width",
52
- "--pf-v5-u-min-width--MinWidth",
53
- $pf-v5-u-sizing--min-max--breakpoint-map,
52
+ "--pf-v6-u-min-width--MinWidth",
53
+ $pf-v6-u-sizing--min-max--breakpoint-map,
54
54
  $important: true
55
55
  );
56
56
  }
57
57
 
58
58
  .#{$pf-prefix}u-max-width {
59
- --pf-v5-u-max-width--MaxWidth: auto;
59
+ --pf-v6-u-max-width--MaxWidth: auto;
60
60
 
61
61
  @include pf-v5-build-css-variable-stack(
62
62
  "max-width",
63
- "--pf-v5-u-max-width--MaxWidth",
64
- $pf-v5-u-sizing--min-max--breakpoint-map,
63
+ "--pf-v6-u-max-width--MaxWidth",
64
+ $pf-v6-u-sizing--min-max--breakpoint-map,
65
65
  $important: true
66
66
  );
67
67
  }
68
68
 
69
69
  .#{$pf-prefix}u-min-height {
70
- --pf-v5-u-min-height--MinHeight: 0;
70
+ --pf-v6-u-min-height--MinHeight: 0;
71
71
 
72
72
  @include pf-v5-build-css-variable-stack(
73
73
  "min-height",
74
- "--pf-v5-u-min-height--MinHeight",
75
- $pf-v5-u-sizing--min-max--breakpoint-map,
74
+ "--pf-v6-u-min-height--MinHeight",
75
+ $pf-v6-u-sizing--min-max--breakpoint-map,
76
76
  $important: true
77
77
  );
78
78
  }
79
79
 
80
80
  .#{$pf-prefix}u-max-height {
81
- --pf-v5-u-max-height--MaxHeight: auto;
81
+ --pf-v6-u-max-height--MaxHeight: auto;
82
82
 
83
83
  @include pf-v5-build-css-variable-stack(
84
84
  "max-height",
85
- "--pf-v5-u-max-height--MaxHeight",
86
- $pf-v5-u-sizing--min-max--breakpoint-map,
85
+ "--pf-v6-u-max-height--MaxHeight",
86
+ $pf-v6-u-sizing--min-max--breakpoint-map,
87
87
  $important: true
88
88
  );
89
89
  }
package/utilities/Text/text.css CHANGED
@@ -923,159 +923,4 @@
923
923
  overflow: hidden !important;
924
924
  text-overflow: ellipsis !important;
925
925
  white-space: nowrap !important;
926
- }
927
-
928
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300 {
929
- color: var(--pf-v6-global--Color--100) !important;
930
- }
931
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100 {
932
- color: var(--pf-v6-global--Color-100) !important;
933
- }
934
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200 {
935
- color: var(--pf-v6-global--Color-200) !important;
936
- }
937
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300 {
938
- color: var(--pf-v6-global--custom-color--100) !important;
939
- }
940
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200 {
941
- color: var(--pf-v6-global--success-color--100) !important;
942
- }
943
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200 {
944
- color: var(--pf-v6-global--info-color--100) !important;
945
- }
946
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300 {
947
- color: var(--pf-v6-global--danger-color--100) !important;
948
- }
949
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark {
950
- color: var(--pf-v6-global--icon--Color--dark) !important;
951
- }
952
- @media screen and (min-width: 576px) {
953
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300-on-sm {
954
- color: var(--pf-v6-global--Color--100) !important;
955
- }
956
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100-on-sm {
957
- color: var(--pf-v6-global--Color-100) !important;
958
- }
959
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200-on-sm {
960
- color: var(--pf-v6-global--Color-200) !important;
961
- }
962
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300-on-sm {
963
- color: var(--pf-v6-global--custom-color--100) !important;
964
- }
965
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200-on-sm {
966
- color: var(--pf-v6-global--success-color--100) !important;
967
- }
968
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200-on-sm {
969
- color: var(--pf-v6-global--info-color--100) !important;
970
- }
971
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300-on-sm {
972
- color: var(--pf-v6-global--danger-color--100) !important;
973
- }
974
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark-on-sm {
975
- color: var(--pf-v6-global--icon--Color--dark) !important;
976
- }
977
- }
978
- @media screen and (min-width: 768px) {
979
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300-on-md {
980
- color: var(--pf-v6-global--Color--100) !important;
981
- }
982
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100-on-md {
983
- color: var(--pf-v6-global--Color-100) !important;
984
- }
985
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200-on-md {
986
- color: var(--pf-v6-global--Color-200) !important;
987
- }
988
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300-on-md {
989
- color: var(--pf-v6-global--custom-color--100) !important;
990
- }
991
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200-on-md {
992
- color: var(--pf-v6-global--success-color--100) !important;
993
- }
994
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200-on-md {
995
- color: var(--pf-v6-global--info-color--100) !important;
996
- }
997
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300-on-md {
998
- color: var(--pf-v6-global--danger-color--100) !important;
999
- }
1000
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark-on-md {
1001
- color: var(--pf-v6-global--icon--Color--dark) !important;
1002
- }
1003
- }
1004
- @media screen and (min-width: 992px) {
1005
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300-on-lg {
1006
- color: var(--pf-v6-global--Color--100) !important;
1007
- }
1008
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100-on-lg {
1009
- color: var(--pf-v6-global--Color-100) !important;
1010
- }
1011
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200-on-lg {
1012
- color: var(--pf-v6-global--Color-200) !important;
1013
- }
1014
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300-on-lg {
1015
- color: var(--pf-v6-global--custom-color--100) !important;
1016
- }
1017
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200-on-lg {
1018
- color: var(--pf-v6-global--success-color--100) !important;
1019
- }
1020
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200-on-lg {
1021
- color: var(--pf-v6-global--info-color--100) !important;
1022
- }
1023
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300-on-lg {
1024
- color: var(--pf-v6-global--danger-color--100) !important;
1025
- }
1026
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark-on-lg {
1027
- color: var(--pf-v6-global--icon--Color--dark) !important;
1028
- }
1029
- }
1030
- @media screen and (min-width: 1200px) {
1031
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300-on-xl {
1032
- color: var(--pf-v6-global--Color--100) !important;
1033
- }
1034
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100-on-xl {
1035
- color: var(--pf-v6-global--Color-100) !important;
1036
- }
1037
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200-on-xl {
1038
- color: var(--pf-v6-global--Color-200) !important;
1039
- }
1040
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300-on-xl {
1041
- color: var(--pf-v6-global--custom-color--100) !important;
1042
- }
1043
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200-on-xl {
1044
- color: var(--pf-v6-global--success-color--100) !important;
1045
- }
1046
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200-on-xl {
1047
- color: var(--pf-v6-global--info-color--100) !important;
1048
- }
1049
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300-on-xl {
1050
- color: var(--pf-v6-global--danger-color--100) !important;
1051
- }
1052
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark-on-xl {
1053
- color: var(--pf-v6-global--icon--Color--dark) !important;
1054
- }
1055
- }
1056
- @media screen and (min-width: 1450px) {
1057
- :where(.pf-v6-theme-dark) .pf-v6-u-color-300-on-2xl {
1058
- color: var(--pf-v6-global--Color--100) !important;
1059
- }
1060
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-100-on-2xl {
1061
- color: var(--pf-v6-global--Color-100) !important;
1062
- }
1063
- :where(.pf-v6-theme-dark) .pf-v6-u-color-light-200-on-2xl {
1064
- color: var(--pf-v6-global--Color-200) !important;
1065
- }
1066
- :where(.pf-v6-theme-dark) .pf-v6-u-custom-color-300-on-2xl {
1067
- color: var(--pf-v6-global--custom-color--100) !important;
1068
- }
1069
- :where(.pf-v6-theme-dark) .pf-v6-u-success-color-200-on-2xl {
1070
- color: var(--pf-v6-global--success-color--100) !important;
1071
- }
1072
- :where(.pf-v6-theme-dark) .pf-v6-u-info-color-200-on-2xl {
1073
- color: var(--pf-v6-global--info-color--100) !important;
1074
- }
1075
- :where(.pf-v6-theme-dark) .pf-v6-u-danger-color-300-on-2xl {
1076
- color: var(--pf-v6-global--danger-color--100) !important;
1077
- }
1078
- :where(.pf-v6-theme-dark) .pf-v6-u-icon-color-dark-on-2xl {
1079
- color: var(--pf-v6-global--icon--Color--dark) !important;
1080
- }
1081
926
  }
package/utilities/Text/text.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // stylelint-disable
2
2
 
3
3
  // Font family options
4
- $pf-v5-u-font-family-options: (
4
+ $pf-v6-u-font-family-options: (
5
5
  font-family-text: (
6
6
  font-family var(--#{$pf-global}--FontFamily--text)
7
7
  ),
@@ -22,10 +22,10 @@ $pf-v5-u-font-family-options: (
22
22
  )
23
23
  );
24
24
 
25
- @include pf-v5-utility-builder($pf-v5-u-font-family-options);
25
+ @include pf-v5-utility-builder($pf-v6-u-font-family-options);
26
26
 
27
27
  // Font size options
28
- $pf-v5-u-font-size-options: (
28
+ $pf-v6-u-font-size-options: (
29
29
  font-size-xs: (
30
30
  font-size var(--#{$pf-global}--FontSize--xs)
31
31
  ),
@@ -52,10 +52,10 @@ $pf-v5-u-font-size-options: (
52
52
  )
53
53
  );
54
54
 
55
- @include pf-v5-utility-builder($pf-v5-u-font-size-options, $pf-v5-global--breakpoint-list);
55
+ @include pf-v5-utility-builder($pf-v6-u-font-size-options, $pf-v5-global--breakpoint-list);
56
56
 
57
57
  // Font weight options
58
- $pf-v5-u-font-weight-options: (
58
+ $pf-v6-u-font-weight-options: (
59
59
  font-weight-normal: (
60
60
  font-weight var(--#{$pf-global}--FontWeight--normal)
61
61
  ),
@@ -64,10 +64,10 @@ $pf-v5-u-font-weight-options: (
64
64
  )
65
65
  );
66
66
 
67
- @include pf-v5-utility-builder($pf-v5-u-font-weight-options, $pf-v5-global--breakpoint-list);
67
+ @include pf-v5-utility-builder($pf-v6-u-font-weight-options, $pf-v5-global--breakpoint-list);
68
68
 
69
69
  // Font color options
70
- $pf-v5-u-font-color-options: (
70
+ $pf-v6-u-font-color-options: (
71
71
  color-100: (
72
72
  color var(--#{$pf-global}--Color--100)
73
73
  ),
@@ -166,10 +166,10 @@ $pf-v5-u-font-color-options: (
166
166
  )
167
167
  );
168
168
 
169
- @include pf-v5-utility-builder($pf-v5-u-font-color-options, $pf-v5-global--breakpoint-list);
169
+ @include pf-v5-utility-builder($pf-v6-u-font-color-options, $pf-v5-global--breakpoint-list);
170
170
 
171
171
  // Font layout options
172
- $pf-v5-u-font-alignment-options: (
172
+ $pf-v6-u-font-alignment-options: (
173
173
  text-break-word: (
174
174
  word-break break-word
175
175
  ),
@@ -181,7 +181,7 @@ $pf-v5-u-font-alignment-options: (
181
181
  )
182
182
  );
183
183
 
184
- @include pf-v5-utility-builder($pf-v5-u-font-alignment-options, $pf-v5-global--breakpoint-list);
184
+ @include pf-v5-utility-builder($pf-v6-u-font-alignment-options, $pf-v5-global--breakpoint-list);
185
185
 
186
186
  .#{$pf-prefix}u-text-truncate {
187
187
  min-width: 0 !important;
@@ -191,10 +191,4 @@ $pf-v5-u-font-alignment-options: (
191
191
  white-space: nowrap !important;
192
192
  }
193
193
 
194
- @import "themes/dark/text";
195
-
196
- @include pf-v5-theme-dark {
197
- @include pf-v5-theme-dark-text;
198
- }
199
-
200
194
  // stylelint-enable
package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss DELETED
@@ -1,25 +0,0 @@
1
- @import "../../../../sass-utilities/themes/dark/all";
2
-
3
- @mixin pf-v5-theme-dark-background-color() {
4
- // Background color options to be redefined in theme
5
- $pf-v5-u-background-color-options: (
6
- // Note that the status backgrounds are not intended to be used in dark theme; instead, a border or other indication would be used.
7
- background-color-default: (
8
- background-color var(--#{$pf-global}--BackgroundColor--100)
9
- ),
10
- background-color-success: (
11
- background-color var(--#{$pf-global}--BackgroundColor--100)
12
- ),
13
- background-color-info: (
14
- background-color var(--#{$pf-global}--BackgroundColor--100)
15
- ),
16
- background-color-warning: (
17
- background-color var(--#{$pf-global}--BackgroundColor--100)
18
- ),
19
- background-color-danger: (
20
- background-color var(--#{$pf-global}--BackgroundColor--100)
21
- )
22
- );
23
-
24
- @include pf-v5-utility-builder($pf-v5-u-background-color-options, $pf-v5-global--breakpoint-list);
25
- }
package/utilities/Text/themes/dark/text.css DELETED
File without changes
package/utilities/Text/themes/dark/text.scss DELETED
@@ -1,33 +0,0 @@
1
- @import "../../../../sass-utilities/themes/dark/all";
2
-
3
- @mixin pf-v5-theme-dark-text() {
4
- // Font color options to be redefined in theme
5
- $pf-v5-u-font-color-options: (
6
- color-300: (
7
- color var(--#{$pf-global}--Color--100)
8
- ),
9
- color-light-100: (
10
- color var(--#{$pf-global}--Color-100)
11
- ),
12
- color-light-200: (
13
- color var(--#{$pf-global}--Color-200)
14
- ),
15
- custom-color-300: (
16
- color var(--#{$pf-global}--custom-color--100)
17
- ),
18
- success-color-200: (
19
- color var(--#{$pf-global}--success-color--100)
20
- ),
21
- info-color-200: (
22
- color var(--#{$pf-global}--info-color--100)
23
- ),
24
- danger-color-300: (
25
- color var(--#{$pf-global}--danger-color--100)
26
- ),
27
- icon-color-dark: (
28
- color var(--#{$pf-global}--icon--Color--dark)
29
- )
30
- );
31
-
32
- @include pf-v5-utility-builder($pf-v5-u-font-color-options, $pf-v5-global--breakpoint-list);
33
- }