@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

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 (97) hide show
  1. package/CODE_OF_CONDUCT.md +2 -1
  2. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  3. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  4. package/base/_globals.scss +13 -13
  5. package/base/_variables.scss +5 -0
  6. package/base/patternfly-globals.css +12 -13
  7. package/base/patternfly-variables.css +860 -0
  8. package/base/tokens/_tokens-dark.scss +331 -0
  9. package/base/tokens/_tokens-default.scss +379 -0
  10. package/base/tokens/_tokens-font.scss +96 -0
  11. package/base/tokens/_tokens-palette.scss +75 -0
  12. package/components/Alert/alert-group.css +20 -16
  13. package/components/Alert/alert-group.scss +20 -16
  14. package/components/Alert/alert.css +57 -84
  15. package/components/Alert/alert.scss +60 -78
  16. package/components/Button/button.css +142 -179
  17. package/components/Button/button.scss +161 -141
  18. package/components/Check/check.css +8 -10
  19. package/components/Check/check.scss +10 -15
  20. package/components/Content/content.css +67 -67
  21. package/components/Content/content.scss +68 -68
  22. package/components/Dropdown/dropdown.css +3 -1
  23. package/components/Dropdown/dropdown.scss +6 -2
  24. package/components/Masthead/masthead.css +49 -103
  25. package/components/Masthead/masthead.scss +105 -132
  26. package/components/Menu/menu.css +0 -3
  27. package/components/Menu/menu.scss +3 -7
  28. package/components/MenuToggle/menu-toggle.css +59 -80
  29. package/components/MenuToggle/menu-toggle.scss +65 -89
  30. package/components/Nav/nav.css +42 -40
  31. package/components/Nav/nav.scss +42 -42
  32. package/components/NotificationBadge/notification-badge.css +56 -81
  33. package/components/NotificationBadge/notification-badge.scss +60 -97
  34. package/components/Page/page.css +80 -70
  35. package/components/Page/page.scss +80 -68
  36. package/components/Radio/radio.css +10 -13
  37. package/components/Radio/radio.scss +11 -17
  38. package/components/Switch/switch.css +1 -1
  39. package/components/Switch/switch.scss +1 -1
  40. package/components/Table/table-grid.css +8 -8
  41. package/components/Table/table-grid.scss +8 -8
  42. package/components/Table/table.css +92 -95
  43. package/components/Table/table.scss +94 -103
  44. package/components/Toolbar/toolbar.css +5 -11
  45. package/components/Toolbar/toolbar.scss +7 -19
  46. package/docs/components/Alert/examples/Alert.md +1 -1
  47. package/docs/components/Brand/examples/Brand.md +32 -75
  48. package/docs/components/Card/examples/Card.md +2 -110
  49. package/docs/components/Masthead/examples/masthead.md +7 -54
  50. package/docs/components/MenuToggle/examples/MenuToggle.md +42 -42
  51. package/docs/components/Nav/examples/Navigation.css +2 -1
  52. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  53. package/docs/components/Toolbar/examples/Toolbar.md +9 -11
  54. package/docs/demos/AboutModal/examples/AboutModal.md +83 -8
  55. package/docs/demos/Alert/examples/Alert.md +249 -24
  56. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  57. package/docs/demos/Banner/examples/Banner.md +168 -16
  58. package/docs/demos/CardView/examples/CardView.md +83 -8
  59. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  60. package/docs/demos/Dashboard/examples/Dashboard.md +83 -8
  61. package/docs/demos/DataList/examples/DataList.md +332 -32
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  63. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  65. package/docs/demos/Masthead/examples/Masthead.md +742 -67
  66. package/docs/demos/Modal/examples/Modal.md +498 -48
  67. package/docs/demos/Nav/examples/Nav.md +664 -64
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +415 -40
  69. package/docs/demos/Page/examples/Page.md +747 -72
  70. package/docs/demos/Page/examples/Penta.md +746 -0
  71. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +581 -56
  72. package/docs/demos/Skeleton/examples/Skeleton.md +83 -8
  73. package/docs/demos/Table/examples/Table.md +1245 -120
  74. package/docs/demos/Tabs/examples/Tabs.md +498 -48
  75. package/docs/demos/Toolbar/examples/Toolbar.md +166 -16
  76. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  77. package/package.json +4 -3
  78. package/patternfly-base-no-globals-theme-dark-unversioned.css +860 -0
  79. package/patternfly-base-no-globals.css +860 -0
  80. package/patternfly-base-theme-dark-unversioned.css +872 -13
  81. package/patternfly-base.css +872 -13
  82. package/patternfly-no-globals.css +1609 -897
  83. package/patternfly-theme-dark-unversioned.css +1621 -910
  84. package/patternfly.css +1621 -910
  85. package/patternfly.min.css +1 -1
  86. package/patternfly.min.css.map +1 -1
  87. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  88. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  89. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  90. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  91. package/assets/images/pf_logo_white.hbs +0 -35
  92. package/assets/images/pf_logo_white.svg +0 -38
  93. package/components/Alert/themes/dark/alert.scss +0 -17
  94. package/components/Masthead/themes/dark/masthead.scss +0 -14
  95. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  96. package/docs/components/Brand/examples/Brand.css +0 -12
  97. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
@@ -2,54 +2,14 @@
2
2
  $pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
3
3
  $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
4
4
 
5
- @mixin pf-v5-c-masthead--m-display-stack {
6
- --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
7
- --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
8
- --#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-stack__main--MinHeight);
9
- --#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
10
- --#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-stack__main--FlexBasis);
11
- --#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-stack__main--PaddingTop);
12
- --#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-stack__main--PaddingBottom);
13
- --#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-stack__main--MarginRight);
14
- --#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-stack__main--before--BorderBottom);
15
- --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
16
- --#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-stack__content--MinHeight);
17
- --#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
18
- --#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-stack__content--PaddingTop);
19
- --#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-stack__content--PaddingBottom);
20
- --#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-stack__content--MarginLeft);
21
- --#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight);
22
- --#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
23
- }
24
-
25
- @mixin pf-v5-c-masthead--m-display-inline {
26
- --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
27
- --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
28
- --#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-inline__main--MinHeight);
29
- --#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
30
- --#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-inline__main--FlexBasis);
31
- --#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-inline__main--PaddingTop);
32
- --#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-inline__main--PaddingBottom);
33
- --#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-inline__main--MarginRight);
34
- --#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-inline__main--BorderBottom);
35
- --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
36
- --#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-inline__content--MinHeight);
37
- --#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
38
- --#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-inline__content--PaddingTop);
39
- --#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-inline__content--PaddingBottom);
40
- --#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-inline__content--MarginLeft);
41
- --#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight);
42
- --#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
43
- }
44
-
45
- .#{$masthead} {
5
+ :root {
46
6
  --#{$masthead}--PaddingLeft: var(--#{$masthead}--inset);
47
7
  --#{$masthead}--PaddingRight: var(--#{$masthead}--inset);
48
- --#{$masthead}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
8
+ --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
49
9
 
50
10
  // Insets
51
- --#{$masthead}--inset: var(--#{$pf-global}--spacer--md); // match page insets
52
- --#{$masthead}--xl--inset: var(--#{$pf-global}--spacer--lg); // match page insets
11
+ --#{$masthead}--inset: var(--pf-t--global--spacer--md); // match page insets
12
+ --#{$masthead}--xl--inset: var(--pf-t--global--spacer--lg); // match page insets
53
13
 
54
14
  // Stack
55
15
  --#{$masthead}--m-display-stack--GridTemplateColumns: max-content 1fr;
@@ -57,16 +17,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
57
17
  --#{$masthead}--m-display-stack__main--MinHeight: #{pf-size-prem(70px)};
58
18
  --#{$masthead}--m-display-stack__main--Order: -1;
59
19
  --#{$masthead}--m-display-stack__main--FlexBasis: 100%;
60
- --#{$masthead}--m-display-stack__main--PaddingTop: var(--#{$pf-global}--spacer--sm);
61
- --#{$masthead}--m-display-stack__main--PaddingBottom: var(--#{$pf-global}--spacer--sm);
20
+ --#{$masthead}--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
21
+ --#{$masthead}--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
62
22
  --#{$masthead}--m-display-stack__main--MarginRight: 0;
63
23
  --#{$masthead}--m-display-stack__main--before--BorderBottom: var(--#{$masthead}__main--before--BorderBottomWidth) solid var(--#{$masthead}__main--before--BorderBottomColor);
64
24
  --#{$masthead}--m-display-stack__toggle--GridColumn: 1;
65
25
  --#{$masthead}--m-display-stack__content--GridColumn: 2;
66
26
  --#{$masthead}--m-display-stack__content--MinHeight: auto;
67
27
  --#{$masthead}--m-display-stack__content--Order: 1;
68
- --#{$masthead}--m-display-stack__content--PaddingTop: 0;
69
- --#{$masthead}--m-display-stack__content--PaddingBottom: 0;
28
+ --#{$masthead}--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
29
+ --#{$masthead}--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
70
30
  --#{$masthead}--m-display-stack__content--MarginLeft: 0;
71
31
  --#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--#{$masthead}--inset) * -1);
72
32
  --#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--#{$masthead}--inset) * -1);
@@ -79,7 +39,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
79
39
  --#{$masthead}--m-display-inline__main--FlexBasis: auto;
80
40
  --#{$masthead}--m-display-inline__main--PaddingTop: 0;
81
41
  --#{$masthead}--m-display-inline__main--PaddingBottom: 0;
82
- --#{$masthead}--m-display-inline__main--MarginRight: calc(var(--#{$pf-global}--spacer--lg) / 2); // split gutter
42
+ --#{$masthead}--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2); // split gutter
83
43
  --#{$masthead}--m-display-inline__main--BorderBottom: 0;
84
44
  --#{$masthead}--m-display-inline__toggle--GridColumn: 1;
85
45
  --#{$masthead}--m-display-inline__content--GridColumn: 3;
@@ -87,34 +47,29 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
87
47
  --#{$masthead}--m-display-inline__content--Order: 0;
88
48
  --#{$masthead}--m-display-inline__content--PaddingTop: 0;
89
49
  --#{$masthead}--m-display-inline__content--PaddingBottom: 0;
90
- --#{$masthead}--m-display-inline__content--MarginLeft: calc(var(--#{$pf-global}--spacer--lg) / 2); // split gutter
50
+ --#{$masthead}--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2); // split gutter
91
51
  --#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
92
52
  --#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
93
53
 
94
54
  // Main border
95
55
  --#{$masthead}__main--before--Right: calc(var(--#{$masthead}--inset) * -1);
96
56
  --#{$masthead}__main--before--Left: calc(var(--#{$masthead}--inset) * -1);
97
- --#{$masthead}__main--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
98
- --#{$masthead}__main--before--BorderBottomColor: var(--#{$pf-global}--palette--black-600);
57
+ --#{$masthead}__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
58
+ --#{$masthead}__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
99
59
 
100
- // Toggle
101
- --#{$masthead}__toggle--MarginRight: var(--#{$pf-global}--spacer--sm);
102
- --#{$masthead}__toggle--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1); // offset by button padding
103
- --#{$masthead}__toggle--c-button--FontSize: var(--#{$pf-global}--FontSize--2xl);
104
-
105
- // Light 100
106
- --#{$masthead}--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
107
- --#{$masthead}--m-light__main--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
60
+ // Content
61
+ --#{$masthead}__content--Gap: var(--pf-t--global--spacer--sm);
108
62
 
109
- // Light 200
110
- --#{$masthead}--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
111
- --#{$masthead}--m-light-200__main--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
63
+ // Toggle
64
+ --#{$masthead}__toggle--MarginRight: var(--pf-t--global--spacer--sm);
65
+ --#{$masthead}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset by button padding
66
+ --#{$masthead}__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
112
67
 
113
68
  // Toolbar item
114
69
  --#{$masthead}--c-toolbar__item--Display: flex;
115
70
 
116
71
  // Borders
117
- --#{$masthead}--item-border-color--base: var(--#{$pf-global}--palette--black-800);
72
+ --#{$masthead}--item-border-color--base: var(--pf-t--global--border--color--default);
118
73
 
119
74
  // Context selector
120
75
  --#{$masthead}--c-context-selector--Width: auto;
@@ -141,18 +96,87 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
141
96
  --#{$masthead}--c-toolbar--AlignItems--base: center;
142
97
  --#{$masthead}--c-toolbar__content--PaddingRight: 0;
143
98
  --#{$masthead}--c-toolbar__content--PaddingLeft: 0;
144
- --#{$masthead}--c-toolbar__expandable-content--PaddingTop: var(--#{$pf-global}--spacer--md);
99
+ --#{$masthead}--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
145
100
  --#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
146
- --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
101
+ --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
147
102
  --#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
148
- --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
103
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
149
104
  --#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
105
+ }
106
+
107
+ @mixin pf-v5-c-masthead--m-display-stack {
108
+ --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
109
+ --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
110
+ --#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-stack__main--MinHeight);
111
+ --#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
112
+ --#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-stack__main--FlexBasis);
113
+ --#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-stack__main--PaddingTop);
114
+ --#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-stack__main--PaddingBottom);
115
+ --#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-stack__main--MarginRight);
116
+ --#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-stack__main--before--BorderBottom);
117
+ --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
118
+ --#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-stack__content--MinHeight);
119
+ --#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
120
+ --#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-stack__content--PaddingTop);
121
+ --#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-stack__content--PaddingBottom);
122
+ --#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-stack__content--MarginLeft);
123
+ --#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginRight);
124
+ --#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
125
+ }
126
+
127
+ @mixin pf-v5-c-masthead--m-display-inline {
128
+ --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
129
+ --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
130
+ --#{$masthead}__main--MinHeight: var(--#{$masthead}--m-display-inline__main--MinHeight);
131
+ --#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
132
+ --#{$masthead}__main--FlexBasis: var(--#{$masthead}--m-display-inline__main--FlexBasis);
133
+ --#{$masthead}__main--PaddingTop: var(--#{$masthead}--m-display-inline__main--PaddingTop);
134
+ --#{$masthead}__main--PaddingBottom: var(--#{$masthead}--m-display-inline__main--PaddingBottom);
135
+ --#{$masthead}__main--MarginRight: var(--#{$masthead}--m-display-inline__main--MarginRight);
136
+ --#{$masthead}__main--before--BorderBottom: var(--#{$masthead}--m-display-inline__main--BorderBottom);
137
+ --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
138
+ --#{$masthead}__content--MinHeight: var(--#{$masthead}--m-display-inline__content--MinHeight);
139
+ --#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
140
+ --#{$masthead}__content--PaddingTop: var(--#{$masthead}--m-display-inline__content--PaddingTop);
141
+ --#{$masthead}__content--PaddingBottom: var(--#{$masthead}--m-display-inline__content--PaddingBottom);
142
+ --#{$masthead}__content--MarginLeft: var(--#{$masthead}--m-display-inline__content--MarginLeft);
143
+ --#{$masthead}__content--c-nav--m-horizontal--MarginRight: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginRight);
144
+ --#{$masthead}__content--c-nav--m-horizontal--MarginLeft: var(--#{$masthead}--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
145
+ }
146
+
147
+ .#{$masthead} {
148
+ // Toolbar
149
+ --#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
150
+ --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
151
+ --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
152
+ --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
153
+ --#{$toolbar}__expandable-content--PaddingTop: var(--#{$masthead}--c-toolbar__expandable-content--PaddingTop);
154
+ --#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--c-toolbar__expandable-content--PaddingRight);
155
+ --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$masthead}--c-toolbar__expandable-content--PaddingBottom);
156
+ --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--c-toolbar__expandable-content--PaddingLeft);
157
+
158
+ // Context selector
159
+ --#{$context-selector}--Width: var(--#{$masthead}--c-context-selector--Width);
160
+ --#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector__toggle--BorderTopColor);
161
+ --#{$context-selector}__toggle--BorderRightColor: var(--#{$masthead}--c-context-selector__toggle--BorderRightColor);
162
+ --#{$context-selector}__toggle--BorderLeftColor: var(--#{$masthead}--c-context-selector__toggle--BorderLeftColor);
163
+
164
+ // Dropdown
165
+ --#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderTopColor);
166
+ --#{$dropdown}__toggle--before--BorderRightColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderRightColor);
167
+ --#{$dropdown}__toggle--before--BorderLeftColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderLeftColor);
168
+
169
+ // Menu toggle
170
+ --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--before--BorderTopColor);
171
+ --#{$menu-toggle}--before--BorderRightColor: var(--#{$masthead}--c-menu-toggle--before--BorderRightColor);
172
+ --#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
173
+ --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
150
174
 
151
175
  // Set layout to stack by default
152
176
  @include pf-v5-c-masthead--m-display-stack;
153
177
 
154
178
  // Set layout to inline at medium breakpoint
155
- .#{$page}:where(:not(.pf-m-resize-observer)) & {
179
+ :where(:not(.pf-m-resize-observer)) & {
156
180
  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
157
181
  @include pf-v5-c-masthead--m-display-inline;
158
182
  }
@@ -162,8 +186,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
162
186
  --#{$masthead}--inset: var(--#{$masthead}--xl--inset);
163
187
  }
164
188
 
165
- @include pf-v5-t-dark; // force the container to follow the dark theme
166
-
167
189
  position: relative;
168
190
  display: grid;
169
191
  grid-template-columns: var(--#{$masthead}--GridTemplateColumns);
@@ -173,30 +195,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
173
195
  padding-inline-end: var(--#{$masthead}--PaddingRight);
174
196
  background-color: var(--#{$masthead}--BackgroundColor);
175
197
 
176
- &.pf-m-light {
177
- @include pf-v5-t-light;
178
-
179
- --#{$masthead}--BackgroundColor: var(--#{$masthead}--m-light--BackgroundColor);
180
- --#{$masthead}__main--BorderBottomColor: var(--#{$masthead}--m-light__main--BorderBottomColor);
181
- }
182
-
183
- &.pf-m-light-200 {
184
- @include pf-v5-t-light;
185
-
186
- --#{$masthead}--BackgroundColor: var(--#{$masthead}--m-light-200--BackgroundColor);
187
- --#{$masthead}__main--BorderBottomColor: var(--#{$masthead}--m-light-200__main--BorderBottomColor);
188
- }
189
-
190
198
  .#{$toolbar} {
191
- --#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
192
- --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
193
- --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
194
- --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
195
- --#{$toolbar}__expandable-content--PaddingTop: var(--#{$masthead}--c-toolbar__expandable-content--PaddingTop);
196
- --#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--c-toolbar__expandable-content--PaddingRight);
197
- --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$masthead}--c-toolbar__expandable-content--PaddingBottom);
198
- --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--c-toolbar__expandable-content--PaddingLeft);
199
-
200
199
  width: 100%;
201
200
  }
202
201
 
@@ -205,7 +204,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
205
204
  }
206
205
 
207
206
  .#{$toolbar}__expandable-content {
208
- inset-block-start: 100%;
207
+ inset-block-start: 100%;
209
208
 
210
209
  &::before {
211
210
  position: absolute;
@@ -216,43 +215,19 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
216
215
  }
217
216
  }
218
217
 
219
- .#{$menu-toggle} {
220
- --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--before--BorderTopColor);
221
- --#{$menu-toggle}--before--BorderRightColor: var(--#{$masthead}--c-menu-toggle--before--BorderRightColor);
222
- --#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
223
- --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
218
+ .#{$context-selector}.pf-m-full-height {
219
+ --#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderTopColor);
220
+ --#{$context-selector}__toggle--BorderBottomColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderBottomColor);
224
221
  }
225
222
 
226
- .#{$context-selector} {
227
- --#{$context-selector}--Width: var(--#{$masthead}--c-context-selector--Width);
228
- --#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector__toggle--BorderTopColor);
229
- --#{$context-selector}__toggle--BorderRightColor: var(--#{$masthead}--c-context-selector__toggle--BorderRightColor);
230
- --#{$context-selector}__toggle--BorderLeftColor: var(--#{$masthead}--c-context-selector__toggle--BorderLeftColor);
231
-
232
- &.pf-m-full-height {
233
- --#{$context-selector}__toggle--BorderTopColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderTopColor);
234
- --#{$context-selector}__toggle--BorderBottomColor: var(--#{$masthead}--c-context-selector--m-full-height__toggle--BorderBottomColor);
235
- }
236
- }
237
-
238
- .#{$dropdown} {
239
- --#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderTopColor);
240
- --#{$dropdown}__toggle--before--BorderRightColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderRightColor);
241
- --#{$dropdown}__toggle--before--BorderLeftColor: var(--#{$masthead}--c-dropdown__toggle--before--BorderLeftColor);
242
-
243
- &.pf-m-full-height {
244
- --#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderTopColor);
245
- --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
246
- }
223
+ .#{$dropdown}.pf-m-full-height {
224
+ --#{$dropdown}__toggle--before--BorderTopColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderTopColor);
225
+ --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$masthead}--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
247
226
  }
248
227
 
249
228
  .#{$nav} {
250
229
  align-self: stretch;
251
230
  }
252
-
253
- .#{$button}.pf-m-plain {
254
- @include pf-v5-t-dark(--#{$button}--m-plain--Color); // for all plain buttons, especially inside other components (.pf-v5-c-input-group), for dark mode
255
- }
256
231
  }
257
232
 
258
233
  // Main
@@ -283,6 +258,11 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
283
258
  }
284
259
  }
285
260
 
261
+ .#{$masthead}__logo {
262
+ display: flex;
263
+ gap: var(--pf-t--global--spacer--md);
264
+ }
265
+
286
266
  // Content
287
267
  .#{$masthead}__content {
288
268
  display: flex;
@@ -290,6 +270,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
290
270
  flex-shrink: 1;
291
271
  grid-column: var(--#{$masthead}__content--GridColumn);
292
272
  grid-column-end: -1; // force content to right edge or full available width
273
+ gap: var(--#{$masthead}__content--Gap);
293
274
  align-items: center;
294
275
  align-self: stretch;
295
276
  order: var(--#{$masthead}__content--Order);
@@ -360,11 +341,3 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
360
341
  }
361
342
  }
362
343
  }
363
- // stylelint-enable
364
-
365
- // stylelint-disable no-invalid-position-at-import-rule
366
- @import "themes/dark/masthead";
367
-
368
- @include pf-v5-theme-dark {
369
- @include pf-v5-theme-dark-masthead;
370
- }
@@ -571,9 +571,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
571
571
  align-items: center;
572
572
  margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
573
573
  }
574
- .pf-v5-c-menu__item-check .pf-v5-c-check {
575
- --pf-v5-c-check__input--TranslateY: none;
576
- }
577
574
 
578
575
  .pf-v5-c-menu__item-toggle-icon {
579
576
  padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
@@ -286,7 +286,7 @@
286
286
  $prop: transform,
287
287
  $ltr-val: translateX(-100%),
288
288
  $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
289
- );
289
+ );
290
290
  }
291
291
  // stylelint-enable
292
292
  }
@@ -569,7 +569,7 @@
569
569
  --#{$menu}__item--Color: var(--#{$menu}__list-item--m-disabled__item--Color);
570
570
  --#{$menu}__item-toggle-icon: var(--#{$menu}__list-item--m-disabled__item-toggle-icon--Color);
571
571
  }
572
-
572
+
573
573
  &.pf-m-disabled {
574
574
  --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
575
575
 
@@ -690,16 +690,12 @@
690
690
  display: flex;
691
691
  align-items: center;
692
692
  margin-inline-end: var(--#{$menu}__item-check--MarginRight);
693
-
694
- .#{$check} {
695
- --pf-v5-c-check__input--TranslateY: none;
696
- }
697
693
  }
698
694
 
699
695
  // Toggle icon
700
696
  .#{$menu}__item-toggle-icon {
701
697
  @include pf-v5-mirror-inline-on-rtl;
702
-
698
+
703
699
  padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
704
700
  padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
705
701
  color: var(--#{$menu}__item-toggle-icon, inherit);
@@ -1,36 +1,40 @@
1
1
  .pf-v5-c-menu-toggle {
2
- --pf-v5-c-menu-toggle--BorderRadius: 0;
3
- --pf-v5-c-menu-toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
4
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
5
- --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
6
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--md);
8
- --pf-v5-c-menu-toggle--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-menu-toggle--LineHeight: var(--pf-v5-global--LineHeight--md);
10
- --pf-v5-c-menu-toggle--BackgroundColor: transparent;
11
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
12
- --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
13
- --pf-v5-c-menu-toggle--before--BorderBottomWidth: 0;
14
- --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
15
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
16
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
17
- --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
18
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
19
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
20
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
2
+ --pf-v5-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
3
+ --pf-v5-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--md);
8
+ --pf-v5-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
9
+ --pf-v5-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
10
+ --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
11
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
12
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
13
+ --pf-v5-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
14
+ --pf-v5-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
15
+ --pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--active);
16
+ --pf-v5-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--active);
17
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
18
+ --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
19
+ --pf-v5-c-menu-toggle--before--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
20
+ --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
21
+ --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-t--global--border--color--default);
22
+ --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-t--global--border--color--default);
23
+ --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-t--global--border--color--default);
24
+ --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-t--global--border--color--default);
21
25
  --pf-v5-c-menu-toggle--hover--BackgroundColor: transparent;
22
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
23
- --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
26
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
27
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
24
28
  --pf-v5-c-menu-toggle--focus--BackgroundColor: transparent;
25
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
26
- --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
29
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
30
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
27
31
  --pf-v5-c-menu-toggle--active--BackgroundColor: transparent;
28
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
29
- --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
32
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
33
+ --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
30
34
  --pf-v5-c-menu-toggle--m-expanded--Color: var(--pf-v5-global--Color--100);
31
35
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: transparent;
32
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
33
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
36
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
37
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
34
38
  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--100);
35
39
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
36
40
  --pf-v5-c-menu-toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
@@ -63,20 +67,19 @@
63
67
  --pf-v5-c-menu-toggle--m-plain--active--Color: var(--pf-v5-global--Color--100);
64
68
  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
65
69
  --pf-v5-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-v5-global--Color--100);
66
- --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-v5-global--spacer--sm);
67
- --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-v5-global--spacer--sm);
68
- --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
70
+ --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
71
+ --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
72
+ --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-t--global--spacer--sm);
69
73
  --pf-v5-c-menu-toggle__controls--MarginLeft: auto;
70
74
  --pf-v5-c-menu-toggle__controls--MarginRight: 0;
71
- --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-v5-global--spacer--sm);
72
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200);
75
+ --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-t--global--spacer--sm);
76
+ --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
73
77
  --pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
74
78
  --pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-v5-global--Color--100);
75
79
  --pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-v5-global--Color--100);
76
80
  --pf-v5-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
77
81
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
78
82
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
79
- --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
80
83
  --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
81
84
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
82
85
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -86,7 +89,7 @@
86
89
  --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
87
90
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
88
91
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
89
- --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
92
+ --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-t--global--spacer--sm);
90
93
  --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
91
94
  --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
92
95
  --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
@@ -109,13 +112,13 @@
109
112
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
110
113
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
111
114
  --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
112
- --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
113
- --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
114
- --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
115
- --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
116
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
117
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
118
- --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
115
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-t--global--spacer--sm);
116
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-t--global--spacer--sm);
117
+ --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-t--global--spacer--sm);
118
+ --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-t--global--spacer--sm);
119
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
120
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
121
+ --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
119
122
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
120
123
  position: relative;
121
124
  display: inline-flex;
@@ -131,9 +134,11 @@
131
134
  cursor: pointer;
132
135
  background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
133
136
  border: 0;
137
+ }
138
+ .pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle::before {
134
139
  border-radius: var(--pf-v5-c-menu-toggle--BorderRadius);
135
140
  }
136
- .pf-v5-c-menu-toggle::before, .pf-v5-c-menu-toggle::after {
141
+ .pf-v5-c-menu-toggle::before {
137
142
  position: absolute;
138
143
  inset-block-start: 0;
139
144
  inset-block-end: 0;
@@ -141,20 +146,10 @@
141
146
  inset-inline-end: 0;
142
147
  pointer-events: none;
143
148
  content: "";
144
- }
145
- .pf-v5-c-menu-toggle::before {
146
- border-style: solid;
147
- border-block-start-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor);
148
- border-block-start-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth);
149
- border-block-end-color: var(--pf-v5-c-menu-toggle--before--BorderBottomColor);
150
- border-block-end-width: var(--pf-v5-c-menu-toggle--before--BorderBottomWidth);
151
- border-inline-start-color: var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
152
- border-inline-start-width: var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
153
- border-inline-end-color: var(--pf-v5-c-menu-toggle--before--BorderRightColor);
154
- border-inline-end-width: var(--pf-v5-c-menu-toggle--before--BorderRightWidth);
149
+ border: var(--pf-v5-c-menu-toggle--BorderWidth) solid var(--pf-v5-c-menu-toggle--BorderColor);
155
150
  }
156
151
  .pf-v5-c-menu-toggle::after {
157
- border-block-end: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
152
+ border-block-end: var(--pf-v5-c-menu-toggle--after--BorderWidth) solid var(--pf-v5-c-menu-toggle--after--BorderColor);
158
153
  }
159
154
  .pf-v5-c-menu-toggle.pf-m-primary {
160
155
  --pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
@@ -199,15 +194,11 @@
199
194
  --pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
200
195
  --pf-v5-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
201
196
  }
202
- .pf-v5-c-menu-toggle.pf-m-plain {
203
- --pf-v5-c-menu-toggle__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color);
204
- }
205
197
  .pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
206
198
  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-plain--PaddingRight);
207
199
  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-plain--PaddingLeft);
208
200
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: transparent;
209
201
  display: inline-block;
210
- color: var(--pf-v5-c-menu-toggle--m-plain--Color);
211
202
  }
212
203
  .pf-v5-c-menu-toggle.pf-m-full-height {
213
204
  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
@@ -222,25 +213,12 @@
222
213
  height: 100%;
223
214
  }
224
215
  .pf-v5-c-menu-toggle:hover {
225
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
226
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
227
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomColor);
228
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color);
229
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--hover--Color);
230
- }
231
- .pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:focus-within {
232
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--focus--BackgroundColor);
233
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth);
234
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomColor);
235
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color);
236
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--focus--Color);
237
- }
238
- .pf-v5-c-menu-toggle:active {
239
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--active--BackgroundColor);
240
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--active--after--BorderBottomWidth);
241
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--active--after--BorderBottomColor);
242
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color);
243
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--active--Color);
216
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--hover--BorderColor);
217
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--hover--BorderWidth);
218
+ }
219
+ .pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:active {
220
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--active--BorderColor);
221
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--active--BorderWidth);
244
222
  }
245
223
  .pf-v5-c-menu-toggle.pf-m-expanded {
246
224
  --pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--m-expanded--Color);
@@ -256,7 +234,7 @@
256
234
  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
257
235
  pointer-events: none;
258
236
  }
259
- .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
237
+ .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
260
238
  border: 0;
261
239
  }
262
240
  .pf-v5-c-menu-toggle.pf-m-typeahead {
@@ -295,7 +273,8 @@
295
273
  align-self: stretch;
296
274
  }
297
275
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
298
- align-self: center;
276
+ align-self: revert;
277
+ -moz-transform: none;
299
278
  }
300
279
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
301
280
  position: absolute;
@@ -418,7 +397,7 @@
418
397
 
419
398
  .pf-v5-c-menu-toggle__toggle-icon {
420
399
  margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
421
- color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
400
+ color: var(--pf-v5-c-menu-toggle__toggle-icon--Color);
422
401
  }
423
402
 
424
403
  :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {