@patternfly/react-styles 6.0.0-alpha.16 → 6.0.0-alpha.18

Sign up to get free protection for your applications and to get access to all the features.
Files changed (135) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/Check/check.css +2 -2
  3. package/css/components/Divider/divider.css +42 -42
  4. package/css/components/Drawer/drawer.css +5 -4
  5. package/css/components/Drawer/drawer.d.ts +1 -0
  6. package/css/components/Drawer/drawer.js +1 -0
  7. package/css/components/Drawer/drawer.mjs +1 -0
  8. package/css/components/FormControl/form-control.css +2 -1
  9. package/css/components/Label/label.css +14 -0
  10. package/css/components/Label/label.d.ts +2 -1
  11. package/css/components/Label/label.js +2 -1
  12. package/css/components/Label/label.mjs +2 -1
  13. package/css/components/Masthead/masthead.css +70 -70
  14. package/css/components/MenuToggle/menu-toggle.css +24 -0
  15. package/css/components/MenuToggle/menu-toggle.d.ts +4 -0
  16. package/css/components/MenuToggle/menu-toggle.js +4 -0
  17. package/css/components/MenuToggle/menu-toggle.mjs +4 -0
  18. package/css/components/Nav/nav.css +3 -1
  19. package/css/components/Nav/nav.d.ts +1 -0
  20. package/css/components/Nav/nav.js +1 -0
  21. package/css/components/Nav/nav.mjs +1 -0
  22. package/css/components/Page/page.css +24 -23
  23. package/css/components/Page/page.d.ts +1 -0
  24. package/css/components/Page/page.js +1 -0
  25. package/css/components/Page/page.mjs +1 -0
  26. package/css/components/Pagination/pagination.css +30 -30
  27. package/css/components/Table/table-scrollable.css +12 -15
  28. package/css/components/Table/table-tree-view.css +0 -2
  29. package/css/components/Table/table.css +112 -86
  30. package/css/components/Table/table.d.ts +3 -1
  31. package/css/components/Table/table.js +3 -1
  32. package/css/components/Table/table.mjs +3 -1
  33. package/css/components/Tabs/tabs.css +90 -90
  34. package/css/components/TextInputGroup/text-input-group.css +42 -42
  35. package/css/components/Toolbar/toolbar.css +288 -288
  36. package/css/docs/components/Nav/examples/Navigation.css +2 -2
  37. package/css/docs/components/Table/examples/Table.css +6 -8
  38. package/css/docs/components/Table/examples/Table.d.ts +1 -1
  39. package/css/docs/components/Table/examples/Table.js +1 -1
  40. package/css/docs/components/Table/examples/Table.mjs +1 -1
  41. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -3
  42. package/css/docs/components/TextInputGroup/examples/TextInputGroup.d.ts +2 -2
  43. package/css/docs/components/TextInputGroup/examples/TextInputGroup.js +2 -2
  44. package/css/docs/components/TextInputGroup/examples/TextInputGroup.mjs +2 -2
  45. package/css/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  46. package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +2 -2
  47. package/css/docs/layouts/Bullseye/examples/Bullseye.js +2 -2
  48. package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +2 -2
  49. package/css/docs/layouts/Flex/examples/Flex.css +4 -4
  50. package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
  51. package/css/docs/layouts/Flex/examples/Flex.js +2 -2
  52. package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
  53. package/css/docs/layouts/Gallery/examples/Gallery.css +4 -4
  54. package/css/docs/layouts/Gallery/examples/Gallery.d.ts +2 -2
  55. package/css/docs/layouts/Gallery/examples/Gallery.js +2 -2
  56. package/css/docs/layouts/Gallery/examples/Gallery.mjs +2 -2
  57. package/css/docs/layouts/Grid/examples/Grid.css +3 -3
  58. package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
  59. package/css/docs/layouts/Grid/examples/Grid.js +1 -1
  60. package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
  61. package/css/docs/layouts/Level/examples/Level.css +5 -5
  62. package/css/docs/layouts/Level/examples/Level.d.ts +2 -2
  63. package/css/docs/layouts/Level/examples/Level.js +2 -2
  64. package/css/docs/layouts/Level/examples/Level.mjs +2 -2
  65. package/css/docs/layouts/Split/examples/Split.css +4 -4
  66. package/css/docs/layouts/Split/examples/Split.d.ts +2 -2
  67. package/css/docs/layouts/Split/examples/Split.js +2 -2
  68. package/css/docs/layouts/Split/examples/Split.mjs +2 -2
  69. package/css/docs/layouts/Stack/examples/Stack.css +5 -5
  70. package/css/docs/layouts/Stack/examples/Stack.d.ts +2 -2
  71. package/css/docs/layouts/Stack/examples/Stack.js +2 -2
  72. package/css/docs/layouts/Stack/examples/Stack.mjs +2 -2
  73. package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
  74. package/css/docs/utilities/Alignment/examples/Alignment.d.ts +4 -4
  75. package/css/docs/utilities/Alignment/examples/Alignment.js +4 -4
  76. package/css/docs/utilities/Alignment/examples/Alignment.mjs +4 -4
  77. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  78. package/css/docs/utilities/Display/examples/Display.css +8 -8
  79. package/css/docs/utilities/Display/examples/Display.d.ts +8 -8
  80. package/css/docs/utilities/Display/examples/Display.js +8 -8
  81. package/css/docs/utilities/Display/examples/Display.mjs +8 -8
  82. package/css/docs/utilities/Flex/examples/Flex.css +5 -5
  83. package/css/docs/utilities/Flex/examples/Flex.d.ts +2 -2
  84. package/css/docs/utilities/Flex/examples/Flex.js +2 -2
  85. package/css/docs/utilities/Flex/examples/Flex.mjs +2 -2
  86. package/css/docs/utilities/Float/examples/Float.css +2 -2
  87. package/css/docs/utilities/Float/examples/Float.d.ts +2 -2
  88. package/css/docs/utilities/Float/examples/Float.js +2 -2
  89. package/css/docs/utilities/Float/examples/Float.mjs +2 -2
  90. package/css/docs/utilities/Sizing/examples/Sizing.css +4 -4
  91. package/css/docs/utilities/Sizing/examples/Sizing.d.ts +4 -4
  92. package/css/docs/utilities/Sizing/examples/Sizing.js +4 -4
  93. package/css/docs/utilities/Sizing/examples/Sizing.mjs +4 -4
  94. package/css/docs/utilities/Spacing/examples/Spacing.css +1 -1
  95. package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
  96. package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
  97. package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
  98. package/css/layouts/Bullseye/bullseye.css +5 -1
  99. package/css/layouts/Flex/flex.css +207 -203
  100. package/css/layouts/Gallery/gallery.css +6 -2
  101. package/css/layouts/Grid/grid.css +6 -2
  102. package/css/layouts/Level/level.css +5 -1
  103. package/css/layouts/Split/split.css +5 -1
  104. package/css/layouts/Stack/stack.css +5 -1
  105. package/css/utilities/Alignment/alignment.css +24 -24
  106. package/css/utilities/Alignment/alignment.d.ts +12 -12
  107. package/css/utilities/Alignment/alignment.js +12 -12
  108. package/css/utilities/Alignment/alignment.mjs +12 -12
  109. package/css/utilities/BackgroundColor/BackgroundColor.css +0 -100
  110. package/css/utilities/BackgroundColor/BackgroundColor.d.ts +1 -2
  111. package/css/utilities/BackgroundColor/BackgroundColor.js +1 -2
  112. package/css/utilities/BackgroundColor/BackgroundColor.mjs +1 -2
  113. package/css/utilities/BoxShadow/box-shadow.css +15 -39
  114. package/css/utilities/BoxShadow/box-shadow.d.ts +1 -7
  115. package/css/utilities/BoxShadow/box-shadow.js +1 -7
  116. package/css/utilities/BoxShadow/box-shadow.mjs +1 -7
  117. package/css/utilities/Float/float.css +24 -24
  118. package/css/utilities/Float/float.d.ts +12 -12
  119. package/css/utilities/Float/float.js +12 -12
  120. package/css/utilities/Float/float.mjs +12 -12
  121. package/css/utilities/Sizing/sizing.css +28 -28
  122. package/css/utilities/Spacing/spacing.css +672 -672
  123. package/css/utilities/Text/text.css +0 -155
  124. package/css/utilities/Text/text.d.ts +0 -1
  125. package/css/utilities/Text/text.js +0 -1
  126. package/css/utilities/Text/text.mjs +0 -1
  127. package/package.json +3 -3
  128. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  129. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.d.ts +0 -3
  130. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.js +0 -4
  131. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.mjs +0 -2
  132. package/css/utilities/Text/themes/dark/text.css +0 -0
  133. package/css/utilities/Text/themes/dark/text.d.ts +0 -3
  134. package/css/utilities/Text/themes/dark/text.js +0 -4
  135. package/css/utilities/Text/themes/dark/text.mjs +0 -2
package/css/components/Tabs/tabs.css CHANGED
@@ -651,29 +651,29 @@
651
651
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
652
652
  }
653
653
  .pf-v6-c-tabs.pf-m-inset-sm {
654
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
655
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
656
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
654
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
655
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
656
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
657
657
  }
658
658
  .pf-v6-c-tabs.pf-m-inset-md {
659
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
660
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
661
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
659
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
660
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
661
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
662
662
  }
663
663
  .pf-v6-c-tabs.pf-m-inset-lg {
664
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
665
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
666
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
664
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
665
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
666
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
667
667
  }
668
668
  .pf-v6-c-tabs.pf-m-inset-xl {
669
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
670
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
671
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
669
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
670
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
671
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
672
672
  }
673
673
  .pf-v6-c-tabs.pf-m-inset-2xl {
674
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
675
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
676
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
674
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
675
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
676
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
677
677
  }
678
678
  @media (min-width: 576px) {
679
679
  .pf-v6-c-tabs.pf-m-inset-none-on-sm {
@@ -682,29 +682,29 @@
682
682
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
683
683
  }
684
684
  .pf-v6-c-tabs.pf-m-inset-sm-on-sm {
685
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
686
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
687
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
685
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
686
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
687
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
688
688
  }
689
689
  .pf-v6-c-tabs.pf-m-inset-md-on-sm {
690
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
691
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
692
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
690
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
691
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
692
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
693
693
  }
694
694
  .pf-v6-c-tabs.pf-m-inset-lg-on-sm {
695
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
696
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
697
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
695
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
696
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
697
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
698
698
  }
699
699
  .pf-v6-c-tabs.pf-m-inset-xl-on-sm {
700
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
701
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
702
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
700
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
701
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
702
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
703
703
  }
704
704
  .pf-v6-c-tabs.pf-m-inset-2xl-on-sm {
705
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
706
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
707
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
705
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
706
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
707
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
708
708
  }
709
709
  }
710
710
  @media (min-width: 768px) {
@@ -714,29 +714,29 @@
714
714
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
715
715
  }
716
716
  .pf-v6-c-tabs.pf-m-inset-sm-on-md {
717
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
718
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
719
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
717
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
718
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
719
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
720
720
  }
721
721
  .pf-v6-c-tabs.pf-m-inset-md-on-md {
722
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
723
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
724
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
722
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
723
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
724
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
725
725
  }
726
726
  .pf-v6-c-tabs.pf-m-inset-lg-on-md {
727
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
728
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
729
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
727
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
728
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
729
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
730
730
  }
731
731
  .pf-v6-c-tabs.pf-m-inset-xl-on-md {
732
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
733
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
734
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
732
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
733
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
734
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
735
735
  }
736
736
  .pf-v6-c-tabs.pf-m-inset-2xl-on-md {
737
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
738
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
739
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
737
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
738
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
739
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
740
740
  }
741
741
  }
742
742
  @media (min-width: 992px) {
@@ -746,29 +746,29 @@
746
746
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
747
747
  }
748
748
  .pf-v6-c-tabs.pf-m-inset-sm-on-lg {
749
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
750
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
751
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
749
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
750
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
751
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
752
752
  }
753
753
  .pf-v6-c-tabs.pf-m-inset-md-on-lg {
754
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
755
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
756
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
754
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
755
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
756
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
757
757
  }
758
758
  .pf-v6-c-tabs.pf-m-inset-lg-on-lg {
759
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
760
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
761
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
759
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
760
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
761
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
762
762
  }
763
763
  .pf-v6-c-tabs.pf-m-inset-xl-on-lg {
764
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
765
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
766
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
764
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
765
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
766
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
767
767
  }
768
768
  .pf-v6-c-tabs.pf-m-inset-2xl-on-lg {
769
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
770
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
771
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
769
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
770
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
771
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
772
772
  }
773
773
  }
774
774
  @media (min-width: 1200px) {
@@ -778,29 +778,29 @@
778
778
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
779
779
  }
780
780
  .pf-v6-c-tabs.pf-m-inset-sm-on-xl {
781
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
782
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
783
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
781
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
782
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
783
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
784
784
  }
785
785
  .pf-v6-c-tabs.pf-m-inset-md-on-xl {
786
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
787
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
788
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
786
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
787
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
788
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
789
789
  }
790
790
  .pf-v6-c-tabs.pf-m-inset-lg-on-xl {
791
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
792
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
793
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
791
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
792
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
793
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
794
794
  }
795
795
  .pf-v6-c-tabs.pf-m-inset-xl-on-xl {
796
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
797
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
798
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
796
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
797
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
798
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
799
799
  }
800
800
  .pf-v6-c-tabs.pf-m-inset-2xl-on-xl {
801
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
802
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
803
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
801
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
802
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
803
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
804
804
  }
805
805
  }
806
806
  @media (min-width: 1450px) {
@@ -810,28 +810,28 @@
810
810
  --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
811
811
  }
812
812
  .pf-v6-c-tabs.pf-m-inset-sm-on-2xl {
813
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--sm);
814
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--sm);
815
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--sm);
813
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
814
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
815
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
816
816
  }
817
817
  .pf-v6-c-tabs.pf-m-inset-md-on-2xl {
818
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--md);
819
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--md);
820
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--md);
818
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
819
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
820
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
821
821
  }
822
822
  .pf-v6-c-tabs.pf-m-inset-lg-on-2xl {
823
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--lg);
824
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--lg);
825
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--lg);
823
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
824
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
825
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
826
826
  }
827
827
  .pf-v6-c-tabs.pf-m-inset-xl-on-2xl {
828
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--xl);
829
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--xl);
830
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--xl);
828
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
829
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
830
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
831
831
  }
832
832
  .pf-v6-c-tabs.pf-m-inset-2xl-on-2xl {
833
- --pf-v6-c-tabs--inset: var(--pf-v6-global--spacer--2xl);
834
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-v6-global--spacer--2xl);
835
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-v6-global--spacer--2xl);
833
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
834
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
835
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
836
836
  }
837
837
  }
package/css/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,47 +1,56 @@
1
- .pf-v6-c-text-input-group {
2
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
3
- --pf-v6-c-text-input-group__text--before--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
4
- --pf-v6-c-text-input-group__text--before--BorderColor: var(--pf-v6-global--BorderColor--300);
5
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v6-global--BorderWidth--sm);
6
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-global--BorderColor--200);
7
- --pf-v6-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-v6-global--primary-color--100);
8
- --pf-v6-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-v6-global--BorderWidth--md);
9
- --pf-v6-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-v6-global--primary-color--100);
10
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-v6-global--spacer--sm);
11
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-v6-global--spacer--xl);
12
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-v6-global--spacer--xs);
13
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-v6-global--spacer--sm);
14
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-v6-global--spacer--xs);
15
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-v6-global--spacer--xs);
16
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-v6-global--spacer--xs);
17
- --pf-v6-c-text-input-group__text-input--PaddingTop: var(--pf-v6-global--spacer--form-element);
18
- --pf-v6-c-text-input-group__text-input--PaddingRight: var(--pf-v6-global--spacer--sm);
19
- --pf-v6-c-text-input-group__text-input--PaddingBottom: var(--pf-v6-global--spacer--form-element);
20
- --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-v6-global--spacer--sm);
1
+ :where(:root),
2
+ :where(.pf-v6-c-text-input-group) {
3
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
4
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
5
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
6
+ --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
7
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
8
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-t--global--spacer--xl);
10
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
11
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
12
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-t--global--spacer--xs);
14
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-t--global--spacer--xs);
15
+ --pf-v6-c-text-input-group__text-input--PaddingTop: var(--pf-t--global--spacer--sm);
16
+ --pf-v6-c-text-input-group__text-input--PaddingRight: var(--pf-t--global--spacer--sm);
17
+ --pf-v6-c-text-input-group__text-input--PaddingBottom: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-t--global--spacer--sm);
21
19
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
22
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-v6-global--Color--200);
23
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-global--Color--200);
20
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
21
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
24
22
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
25
- --pf-v6-c-text-input-group__icon--Left: var(--pf-v6-global--spacer--sm);
26
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-global--icon--Color--dark);
23
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
24
+ --pf-v6-c-text-input-group__icon--Left: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
27
26
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
28
- --pf-v6-c-text-input-group__utilities--child--MarginLeft: var(--pf-v6-global--spacer--xs);
29
- --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v6-global--spacer--xs);
30
- --pf-v6-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v6-global--spacer--xs);
31
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-v6-global--disabled-color--100);
32
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v6-global--disabled-color--300);
27
+ --pf-v6-c-text-input-group__utilities--child--MarginLeft: var(--pf-t--global--spacer--xs);
28
+ --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--xs);
29
+ --pf-v6-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-t--global--spacer--xs);
30
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
32
+ }
33
+
34
+ .pf-v6-c-text-input-group {
33
35
  position: relative;
34
36
  display: flex;
35
37
  width: 100%;
36
38
  color: var(--pf-v6-c-text-input-group--Color, inherit);
37
39
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
40
+ border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
41
+ }
42
+ .pf-v6-c-text-input-group::before {
43
+ position: absolute;
44
+ inset: 0;
45
+ pointer-events: none;
46
+ content: "";
47
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
48
+ border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
38
49
  }
39
50
  .pf-v6-c-text-input-group:hover {
40
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-c-text-input-group--hover__text--after--BorderBottomColor);
51
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
41
52
  }
42
53
  .pf-v6-c-text-input-group.pf-m-disabled {
43
- --pf-v6-c-text-input-group__text--before--BorderWidth: 0;
44
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: 0;
45
54
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
46
55
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
47
56
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
@@ -85,16 +94,6 @@
85
94
  pointer-events: none;
86
95
  content: "";
87
96
  }
88
- .pf-v6-c-text-input-group__text::before {
89
- border: var(--pf-v6-c-text-input-group__text--before--BorderWidth) solid var(--pf-v6-c-text-input-group__text--before--BorderColor);
90
- }
91
- .pf-v6-c-text-input-group__text::after {
92
- border-block-end: var(--pf-v6-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v6-c-text-input-group__text--after--BorderBottomColor);
93
- }
94
- .pf-v6-c-text-input-group__text:focus-within {
95
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v6-c-text-input-group__text--focus-within--after--BorderBottomWidth);
96
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-c-text-input-group__text--focus-within--after--BorderBottomColor);
97
- }
98
97
 
99
98
  .pf-v6-c-text-input-group__icon {
100
99
  position: absolute;
@@ -117,6 +116,7 @@
117
116
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingRight);
118
117
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
119
118
  border: 0;
119
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
120
120
  }
121
121
  .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
122
122
  grid-area: text-input;