@patternfly/patternfly 6.0.0-alpha.67 → 6.0.0-alpha.69

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 (17) hide show
  1. package/components/Label/label.css +140 -24
  2. package/components/Label/label.scss +161 -26
  3. package/components/Tabs/tabs.css +143 -175
  4. package/components/Tabs/tabs.scss +159 -217
  5. package/docs/components/Label/examples/Label.md +2377 -766
  6. package/docs/components/Tabs/examples/Tabs.css +1 -1
  7. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  8. package/docs/demos/Form/examples/BasicForms.md +5 -2
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -28
  10. package/docs/demos/Tabs/examples/Tabs.md +21 -17
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +283 -203
  13. package/patternfly-theme-dark-unversioned.css +283 -203
  14. package/patternfly.css +283 -203
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/components/Tabs/themes/dark/tabs.scss +0 -10
package/components/Tabs/tabs.scss CHANGED
@@ -2,70 +2,86 @@
2
2
  $pf-v5-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
  $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
4
4
 
5
- .#{$tabs} {
5
+ :where(:root),
6
+ :where(.#{$tabs}) {
6
7
  --#{$tabs}--inset: 0;
7
8
  --#{$tabs}--Width: auto;
8
- --#{$tabs}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
9
- --#{$tabs}--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
9
+ --#{$tabs}--before--BorderColor: var(--pf-t--global--border--color--default);
10
+ --#{$tabs}--before--border-width--base: var(--pf-t--global--border--width--regular);
10
11
  --#{$tabs}--before--BorderTopWidth: 0;
11
12
  --#{$tabs}--before--BorderRightWidth: 0;
12
13
  --#{$tabs}--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
13
14
  --#{$tabs}--before--BorderLeftWidth: 0;
14
- --#{$tabs}--m-vertical--inset: var(--#{$pf-global}--spacer--lg);
15
+ --#{$tabs}--m-vertical--inset: var(--pf-t--global--spacer--sm);
15
16
 
16
- // Page insets
17
- --#{$tabs}--m-page-insets--inset: var(--#{$pf-global}--spacer--md); // make this the default inset at breaking change
18
- --#{$tabs}--m-page-insets--xl--inset: var(--#{$pf-global}--spacer--lg); // make this the default inset at breaking change
17
+ // Tabs, Page insets modifier
18
+ --#{$tabs}--m-page-insets--inset: var(--pf-t--global--spacer--md);
19
19
 
20
- // Vertical
20
+ // Tabs, Vertical modifier
21
21
  --#{$tabs}--m-vertical--Width: 100%;
22
22
  --#{$tabs}--m-vertical--MaxWidth: #{pf-size-prem(250px)};
23
- --#{$tabs}--m-vertical--m-box--inset: var(--#{$pf-global}--spacer--xl);
23
+ --#{$tabs}--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
24
24
  --#{$tabs}--m-vertical__list--before--BorderColor: var(--#{$tabs}--before--BorderColor);
25
25
  --#{$tabs}--m-vertical__list--before--BorderTopWidth: 0;
26
26
  --#{$tabs}--m-vertical__list--before--BorderRightWidth: 0;
27
27
  --#{$tabs}--m-vertical__list--before--BorderBottomWidth: 0;
28
28
  --#{$tabs}--m-vertical__list--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
29
29
 
30
- // Box
30
+ // Tabs, Box modifier
31
31
  --#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
32
32
  --#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
33
33
 
34
- // Alt color scheme
35
- --#{$tabs}--m-color-scheme--light-300__link--BackgroundColor: transparent;
36
- --#{$tabs}--m-color-scheme--light-300__item--m-current__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
37
- --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-150);
38
-
39
- // List
34
+ // Tabs List
40
35
  --#{$tabs}__list--Display: flex;
41
36
 
42
- // Item
43
- --#{$tabs}__item--m-action--before--ZIndex: var(--#{$pf-global}--ZIndex--xs);
44
-
45
- // Tab link
46
- --#{$tabs}__link--Color: var(--#{$pf-global}--Color--200);
47
- --#{$tabs}__link--FontSize: var(--#{$pf-global}--FontSize--md);
48
- --#{$tabs}__link--BackgroundColor: transparent;
49
- --#{$tabs}__link--OutlineOffset: calc(-1 * #{pf-size-prem(6px)});
50
- --#{$tabs}__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
51
- --#{$tabs}__link--PaddingRight: var(--#{$pf-global}--spacer--md);
52
- --#{$tabs}__link--PaddingBottom: var(--#{$pf-global}--spacer--sm);
53
- --#{$tabs}__link--PaddingLeft: var(--#{$pf-global}--spacer--md);
54
- --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--100);
55
- --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-150);
56
- --#{$tabs}__item--m-current__link--Color: var(--#{$pf-global}--Color--100);
57
- --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
58
- --#{$tabs}--m-vertical__link--PaddingTop: var(--#{$pf-global}--spacer--md);
59
- --#{$tabs}--m-vertical__link--PaddingBottom: var(--#{$pf-global}--spacer--md);
60
- --#{$tabs}--m-box__link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
61
- --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
62
- --#{$tabs}--m-box__item-action--c-button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-400);
63
- --#{$tabs}--m-secondary__link--FontSize: var(--#{$pf-global}--FontSize--sm);
64
- --#{$tabs}__item--m-action__link--PaddingRight: var(--#{$pf-global}--spacer--xs);
37
+ // Tabs Item
38
+ --#{$tabs}__item--BackgroundColor: transparent;
39
+ --#{$tabs}__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
40
+ --#{$tabs}__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
41
+ --#{$tabs}__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
42
+ --#{$tabs}__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
43
+ --#{$tabs}__item--ColumnGap: var(--pf-t--global--spacer--xs);
44
+ --#{$tabs}--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
45
+ --#{$tabs}--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
46
+ --#{$tabs}__item--m-current--BackgroundColor: transparent;
47
+ --#{$tabs}--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
48
+ --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
49
+ --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
50
+ --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
51
+ --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
52
+
53
+ // Tabs link
54
+ --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);
55
+ --#{$tabs}__link--FontSize: var(--pf-t--global--font--size--sm);
56
+ --#{$tabs}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
57
+ --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--small);
58
+ --#{$tabs}__link--PaddingTop: var(--pf-t--global--spacer--xs);
59
+ --#{$tabs}__link--PaddingRight: var(--pf-t--global--spacer--sm);
60
+ --#{$tabs}__link--PaddingBottom: var(--pf-t--global--spacer--xs);
61
+ --#{$tabs}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
62
+ --#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
63
+ --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
64
+ --#{$tabs}__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
65
+ --#{$tabs}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
66
+ --#{$tabs}__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
67
+ --#{$tabs}__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
68
+ --#{$tabs}--m-vertical__link--PaddingLeft: var(--pf-t--global--spacer--sm);
69
+ --#{$tabs}--m-vertical__link--PaddingRight: var(--pf-t--global--spacer--sm);
70
+ --#{$tabs}--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
71
+ --#{$tabs}--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
72
+ --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
73
+ --#{$tabs}--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
+ --#{$tabs}--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
+ --#{$tabs}--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
76
+ --#{$tabs}--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
77
+ --#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
78
+ --#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
79
+ --#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
80
+ --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
65
81
 
66
82
  // Link before
67
- --#{$tabs}__link--before--border-color--base: var(--#{$pf-global}--BorderColor--100);
68
- --#{$tabs}__link--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
83
+ --#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
84
+ --#{$tabs}__link--before--border-width--base: var(--pf-t--global--border--width--regular);
69
85
  --#{$tabs}__link--before--BorderTopColor: var(--#{$tabs}__link--before--border-color--base);
70
86
  --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__link--before--border-color--base);
71
87
  --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
@@ -83,33 +99,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
83
99
  --#{$tabs}__link--after--Top: auto;
84
100
  --#{$tabs}__link--after--Right: 0;
85
101
  --#{$tabs}__link--after--Bottom: 0;
86
- --#{$tabs}__link--after--BorderColor: var(--#{$pf-global}--BorderColor--light-100);
102
+ --#{$tabs}__link--after--BorderColor: var(--pf-t--global--border--color--default);
87
103
  --#{$tabs}__link--after--BorderWidth: 0;
88
104
  --#{$tabs}__link--after--BorderTopWidth: 0;
89
105
  --#{$tabs}__link--after--BorderRightWidth: 0;
90
106
  --#{$tabs}__link--after--BorderLeftWidth: 0;
91
- --#{$tabs}__link--hover--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
92
- --#{$tabs}__link--focus--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
93
- --#{$tabs}__link--active--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
94
- --#{$tabs}__item--m-current__link--after--BorderColor: var(--#{$pf-global}--active-color--100);
95
- --#{$tabs}__item--m-current__link--after--BorderWidth: var(--#{$pf-global}--BorderWidth--lg);
96
- --#{$tabs}__link--child--MarginRight: var(--#{$pf-global}--spacer--md);
107
+ --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
108
+ --#{$tabs}__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
97
109
 
98
110
  // Scroll buttons
99
- --#{$tabs}__scroll-button--Color: var(--#{$pf-global}--Color--100);
100
- --#{$tabs}__scroll-button--hover--Color: var(--#{$pf-global}--active-color--100);
101
- --#{$tabs}__scroll-button--disabled--Color: var(--#{$pf-global}--disabled-color--200);
102
- --#{$tabs}__scroll-button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
103
- --#{$tabs}__scroll-button--Width: var(--#{$pf-global}--spacer--2xl);
104
- --#{$tabs}__scroll-button--xl--Width: var(--#{$pf-global}--spacer--3xl);
105
- --#{$tabs}__scroll-button--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
111
+ --#{$tabs}__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
112
+ --#{$tabs}__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
113
+ --#{$tabs}__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
114
+ --#{$tabs}__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
115
+ --#{$tabs}__scroll-button--Width: var(--pf-t--global--spacer--2xl);
106
116
  --#{$tabs}__scroll-button--TransitionDuration--margin: .125s;
107
117
  --#{$tabs}__scroll-button--TransitionDuration--transform: .125s;
108
118
  --#{$tabs}__scroll-button--TransitionDuration--opacity: .125s;
109
119
 
110
120
  // Scroll buttons before
111
121
  --#{$tabs}__scroll-button--before--BorderColor: var(--#{$tabs}--before--BorderColor);
112
- --#{$tabs}__scroll-button--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
122
+ --#{$tabs}__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
113
123
  --#{$tabs}__scroll-button--before--BorderRightWidth: 0;
114
124
  --#{$tabs}__scroll-button--before--BorderBottomWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
115
125
  --#{$tabs}__scroll-button--before--BorderLeftWidth: 0;
@@ -123,56 +133,44 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
123
133
 
124
134
  // Expandable
125
135
  --#{$tabs}__toggle--Display: flex;
126
- --#{$tabs}__toggle--MarginBottom: 0;
127
- --#{$tabs}--m-expanded__toggle--MarginBottom: var(--#{$pf-global}--spacer--md);
128
136
  --#{$tabs}__toggle-icon--Color: currentcolor;
129
- --#{$tabs}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
137
+ --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
130
138
  --#{$tabs}__toggle-icon--Rotate: 0;
131
139
  --#{$tabs}__toggle-text--MarginLeft: 0;
132
- --#{$tabs}__toggle-button__toggle-text--MarginLeft: var(--#{$pf-global}--spacer--md);
133
- --#{$tabs}__toggle-button__toggle-text--Color: var(--#{$pf-global}--Color--100);
134
- --#{$tabs}__toggle-button--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
135
- --#{$tabs}__toggle-button--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
136
- --#{$tabs}__toggle-button--MarginLeft: calc(-1 * var(--#{$pf-global}--spacer--md));
137
- --#{$tabs}--m-expanded__toggle-icon--Color: var(--#{$pf-global}--Color--100);
140
+ --#{$tabs}__toggle-button__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
141
+ --#{$tabs}__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
142
+ --#{$tabs}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
138
143
  --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
144
+ --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
145
+ --#{$tabs}--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
146
+ --#{$tabs}--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
147
+ --#{$tabs}--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
148
+ --#{$tabs}--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
139
149
 
140
150
  // Item action
141
- --#{$tabs}__item-action--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
142
- --#{$tabs}--m-secondary__item-action--c-button--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
143
- --#{$tabs}__item-action--c-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
144
- --#{$tabs}__item-action--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
145
- --#{$tabs}__item-action--c-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
146
- --#{$tabs}__item-action--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
147
- --#{$tabs}__item-action--last-child--c-button--PaddingRight: var(--#{$pf-global}--spacer--md);
148
- --#{$tabs}__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
151
+ --#{$tabs}__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
152
+ --#{$tabs}--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
149
153
  --#{$tabs}__item-action-icon--MarginTop: #{pf-size-prem(2px)};
150
154
 
151
155
  // Add button
152
156
  --#{$tabs}__add--before--BorderColor: var(--#{$tabs}__link--before--border-color--base);
153
157
  --#{$tabs}__add--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
154
- --#{$tabs}__add--c-button--FontSize: var(--#{$pf-global}--FontSize--sm);
155
- --#{$tabs}--m-secondary__add--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
156
- --#{$tabs}__add--c-button--PaddingTop: var(--#{$tabs}__link--PaddingTop);
157
- --#{$tabs}__add--c-button--PaddingBottom: var(--#{$tabs}__link--PaddingBottom);
158
- --#{$tabs}__add--c-button--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
158
+ --#{$tabs}__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
159
+ --#{$tabs}--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
160
+ --#{$tabs}__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
161
+ --#{$tabs}__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
162
+ --#{$tabs}__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
163
+ --#{$tabs}__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
159
164
 
160
165
  // Overflow menu toggle icon
161
- --#{$tabs}__link-toggle-icon--Color: var(--#{$pf-global}--Color--200);
166
+ --#{$tabs}__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
162
167
  --#{$tabs}__link-toggle-icon--Transition: .2s ease-in 0s;
163
168
  --#{$tabs}__link-toggle-icon--Rotate: 0;
164
- --#{$tabs}__link-toggle-icon--FontSize: var(--#{$pf-global}--FontSize--sm);
165
- --#{$tabs}__link--m-expanded__toggle-icon--Color: var(--#{$pf-global}--Color--100);
169
+ --#{$tabs}__link-toggle-icon--FontSize: var(--pf-t--global--FontSize--sm);
166
170
  --#{$tabs}__link--m-expanded__toggle-icon--Rotate: 90deg;
167
- --#{$tabs}__link--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
168
- --#{$tabs}__link--active__toggle-icon--Color: var(--#{$pf-global}--Color--100);
169
- --#{$tabs}__link--focus__toggle-icon--Color: var(--#{$pf-global}--Color--100);
170
-
171
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
172
- --#{$tabs}__scroll-button--Width: var(--#{$tabs}__scroll-button--xl--Width);
173
- --#{$tabs}--m-page-insets--inset: var(--#{$tabs}--m-page-insets--xl--inset);
174
- }
171
+ }
175
172
 
173
+ .#{$tabs} {
176
174
  position: relative;
177
175
  display: flex;
178
176
  width: var(--#{$tabs}--Width);
@@ -197,7 +195,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
197
195
  .#{$tabs}__list {
198
196
  flex-basis: 100%;
199
197
  }
200
-
198
+
201
199
  .#{$tabs}__item {
202
200
  flex-grow: 1;
203
201
 
@@ -249,15 +247,17 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
249
247
 
250
248
  // Box
251
249
  &.pf-m-box {
250
+ --#{$tabs}__item--BackgroundColor: var(--#{$tabs}--m-box__item--BackgroundColor);
251
+ --#{$tabs}__item--m-current--BackgroundColor: var(--#{$tabs}--m-box__item--m-current--BackgroundColor);
252
252
  --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-box__link--BackgroundColor);
253
+ --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-box__link--disabled--Color);
253
254
  --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-box__link--disabled--BackgroundColor);
255
+ --#{$tabs}__link--hover--BackgroundColor: var(--#{$tabs}--m-box__link--hover--BackgroundColor);
256
+ --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-box__item--m-current__link--BackgroundColor);
254
257
  --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--before--border-width--base);
255
- --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
256
- --#{$tabs}__link--disabled--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
257
258
  --#{$tabs}__link--after--Top: 0;
258
259
  --#{$tabs}__link--after--Bottom: auto;
259
260
 
260
- // Set hover on top border
261
261
  .#{$tabs}__link {
262
262
  --#{$tabs}__link--after--BorderTopWidth: var(--#{$tabs}__link--after--BorderWidth);
263
263
  }
@@ -301,14 +301,14 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
301
301
  }
302
302
  // stylelint-enable
303
303
 
304
- &.pf-m-color-scheme--light-300 {
305
- --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__link--BackgroundColor);
306
- --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
307
- --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor);
308
- }
309
-
310
- .#{$tabs}__item-action .#{$button} {
311
- --#{$button}--m-plain--disabled--Color: var(--#{$tabs}--m-box__item-action--c-button--disabled--BackgroundColor);
304
+ &.pf-m-secondary {
305
+ --#{$tabs}__item--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--BackgroundColor);
306
+ --#{$tabs}__item--m-current--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor);
307
+ --#{$tabs}__link--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--BackgroundColor);
308
+ --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-box--m-secondary__link--disabled--Color);
309
+ --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor);
310
+ --#{$tabs}__link--hover--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor);
311
+ --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor);
312
312
  }
313
313
  }
314
314
 
@@ -317,8 +317,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
317
317
  --#{$tabs}--Width: var(--#{$tabs}--m-vertical--Width);
318
318
  --#{$tabs}--inset: var(--#{$tabs}--m-vertical--inset);
319
319
  --#{$tabs}--before--BorderBottomWidth: 0;
320
- --#{$tabs}__link--PaddingTop: var(--#{$tabs}--m-vertical__link--PaddingTop);
321
- --#{$tabs}__link--PaddingBottom: var(--#{$tabs}--m-vertical__link--PaddingBottom);
320
+ --#{$tabs}__item--PaddingInlineStart: var(--#{$tabs}--m-vertical__item--PaddingInlineStart);
321
+ --#{$tabs}__item--PaddingInlineEnd: var(--#{$tabs}--m-vertical__item--PaddingInlineEnd);
322
+ --#{$tabs}__link--PaddingLeft: var(--#{$tabs}--m-vertical__link--PaddingLeft);
323
+ --#{$tabs}__link--PaddingRight: var(--#{$tabs}--m-vertical__link--PaddingRight);
322
324
  --#{$tabs}__link--before--Left: 0;
323
325
  --#{$tabs}__link--disabled--before--BorderBottomWidth: 0;
324
326
  --#{$tabs}__link--disabled--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
@@ -359,7 +361,6 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
359
361
  margin-block-end: var(--#{$tabs}--inset);
360
362
  }
361
363
 
362
- // Set hover on left border
363
364
  .#{$tabs}__link {
364
365
  --#{$tabs}__link--after--BorderTopWidth: 0;
365
366
  --#{$tabs}__link--after--BorderLeftWidth: var(--#{$tabs}__link--after--BorderWidth);
@@ -391,9 +392,16 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
391
392
  }
392
393
  }
393
394
 
395
+ &.pf-m-expandable {
396
+ row-gap: var(--#{$tabs}--m-expandable--RowGap);
397
+ padding-block-start: var(--#{$tabs}--m-expandable--PaddingBlockStart);
398
+ padding-block-end: var(--#{$tabs}--m-expandable--PaddingBlockEnd);
399
+ padding-inline-start: var(--#{$tabs}--m-expandable--PaddingInlineStart);
400
+ padding-inline-end: var(--#{$tabs}--m-expandable--PaddingInlineEnd);
401
+ }
402
+
394
403
  &.pf-m-expanded {
395
404
  --#{$tabs}__list--Display: flex;
396
- --#{$tabs}__toggle--MarginBottom: var(--#{$tabs}--m-expanded__toggle--MarginBottom);
397
405
  --#{$tabs}__toggle-icon--Color: var(--#{$tabs}--m-expanded__toggle-icon--Color);
398
406
  --#{$tabs}__toggle-icon--Rotate: var(--#{$tabs}--m-expanded__toggle-icon--Rotate);
399
407
  }
@@ -404,6 +412,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
404
412
  --#{$tabs}--inset: var(--#{$tabs}--m-vertical--m-box--inset);
405
413
  --#{$tabs}--m-vertical__list--before--BorderLeftWidth: 0;
406
414
  --#{$tabs}--m-vertical__list--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
415
+ --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
407
416
  --#{$tabs}__link--disabled--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
408
417
  --#{$tabs}__link--disabled--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
409
418
  --#{$tabs}__link--disabled--before--BorderLeftWidth: 0;
@@ -414,21 +423,17 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
414
423
  }
415
424
 
416
425
  // stylelint-disable selector-max-class
417
- // Remove border from last-child
418
426
  .#{$tabs}__item:last-child {
419
- --#{$tabs}__link--before--BorderBottomWidth: 0;
420
427
  --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
421
428
  }
429
+ .#{$tabs}__item:first-child {
430
+ --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
431
+ }
422
432
 
423
433
  // Add border right color and weight
424
434
  .#{$tabs}__item.pf-m-current {
425
435
  --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
426
436
  --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
427
- --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--before--border-width--base);
428
-
429
- &:first-child {
430
- --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
431
- }
432
437
  }
433
438
 
434
439
  // Add border right color and weight
@@ -444,15 +449,15 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
444
449
  // Undo offset to .pf-m-current adjacent item
445
450
  .#{$tabs}__item:first-child .#{$tabs}__link::after,
446
451
  .#{$tabs}__item.pf-m-current + .#{$tabs}__item .#{$tabs}__link::after {
447
- inset-block-start: 0;
452
+ inset-block-start: 0;
448
453
  }
449
454
  // stylelint-enable
450
455
  }
451
456
 
452
- &.pf-m-secondary {
453
- --#{$tabs}__link--FontSize: var(--#{$tabs}--m-secondary__link--FontSize);
454
- --#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-secondary__item-action--c-button--FontSize);
455
- --#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-secondary__add--c-button--FontSize);
457
+ &.pf-m-subtab {
458
+ --#{$tabs}__link--FontSize: var(--#{$tabs}--m-subtab__link--FontSize);
459
+ --#{$tabs}__item-action--c-button--FontSize: var(--#{$tabs}--m-subtab__item-action--c-button--FontSize);
460
+ --#{$tabs}__add--c-button--FontSize: var(--#{$tabs}--m-subtab__add--c-button--FontSize);
456
461
  }
457
462
 
458
463
  &.pf-m-page-insets {
@@ -471,17 +476,12 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
471
476
  .#{$tabs}__toggle {
472
477
  display: var(--#{$tabs}__toggle--Display);
473
478
  align-items: center;
474
- margin-block-end: var(--#{$tabs}__toggle--MarginBottom);
475
479
  }
476
480
 
477
481
  .#{$tabs}__toggle-button {
478
482
  --#{$tabs}__toggle-text--MarginLeft: var(--#{$tabs}__toggle-button__toggle-text--MarginLeft);
479
483
  --#{$tabs}__toggle-text--Color: var(--#{$tabs}__toggle-button__toggle-text--Color);
480
484
 
481
- margin-block-start: var(--#{$tabs}__toggle-button--MarginTop);
482
- margin-block-end: var(--#{$tabs}__toggle-button--MarginBottom);
483
- margin-inline-start: var(--#{$tabs}__toggle-button--MarginLeft);
484
-
485
485
  .#{$button} {
486
486
  display: flex;
487
487
  text-align: start;
@@ -519,21 +519,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
519
519
 
520
520
  // Tabs item
521
521
  .#{$tabs}__item {
522
+ position: relative;
522
523
  display: flex;
523
524
  flex: none;
525
+ column-gap: var(--#{$tabs}__item--ColumnGap);
524
526
  scroll-snap-align: var(--#{$tabs}__item--ScrollSnapAlign);
527
+ padding-block-start: var(--#{$tabs}__item--PaddingBlockStart);
528
+ padding-block-end: var(--#{$tabs}__item--PaddingBlockEnd);
529
+ padding-inline-start: var(--#{$tabs}__item--PaddingInlineStart);
530
+ padding-inline-end: var(--#{$tabs}__item--PaddingInlineEnd);
531
+ background-color: var(--#{$tabs}__item--BackgroundColor);
525
532
 
526
533
  // Current
527
534
  &.pf-m-current {
528
535
  --#{$tabs}__link--Color: var(--#{$tabs}__item--m-current__link--Color);
529
536
  --#{$tabs}__link--after--BorderColor: var(--#{$tabs}__item--m-current__link--after--BorderColor);
530
537
  --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__item--m-current__link--after--BorderWidth);
538
+ --#{$tabs}__item--BackgroundColor: var(--#{$tabs}__item--m-current--BackgroundColor);
531
539
  }
532
540
 
533
541
  // Action
534
542
  &.pf-m-action {
535
- --#{$tabs}__link--PaddingRight: var(--#{$tabs}__item--m-action__link--PaddingRight);
536
-
537
543
  position: relative;
538
544
 
539
545
  &::before {
@@ -570,7 +576,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
570
576
  .#{$tabs}__item.pf-m-action::after,
571
577
  .#{$tabs}__scroll-button::before,
572
578
  .#{$tabs}__add::before {
573
- inset-block-start: 0;
579
+ inset-block-start: 0;
574
580
  }
575
581
 
576
582
  .#{$tabs}__link,
@@ -585,13 +591,12 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
585
591
  @at-root .#{$tabs}__item.pf-m-action,
586
592
  & {
587
593
  --#{$tabs}__link--after--BorderBottomWidth: var(--#{$tabs}__link--after--BorderWidth); // Set default border target
588
-
589
- background-color: var(--#{$tabs}__link--BackgroundColor);
590
594
  }
591
-
592
- position: relative;
595
+
593
596
  display: flex;
594
597
  flex: 1;
598
+ column-gap: var(--#{$tabs}__link--ColumnGap);
599
+ align-items: center;
595
600
  padding-block-start: var(--#{$tabs}__link--PaddingTop);
596
601
  padding-block-end: var(--#{$tabs}__link--PaddingBottom);
597
602
  padding-inline-start: var(--#{$tabs}__link--PaddingLeft);
@@ -599,8 +604,9 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
599
604
  font-size: var(--#{$tabs}__link--FontSize);
600
605
  color: var(--#{$tabs}__link--Color);
601
606
  text-decoration: none;
602
- outline-offset: var(--#{$tabs}__link--OutlineOffset);
603
-
607
+ background-color: var(--#{$tabs}__link--BackgroundColor);
608
+ border-radius: var(--#{$tabs}__link--BorderRadius);
609
+
604
610
  @at-root .#{$tabs}__item.pf-m-action,
605
611
  & {
606
612
  &::before {
@@ -631,37 +637,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
631
637
  }
632
638
  }
633
639
 
634
- // Tab item hover state
635
- @at-root .#{$tabs}__item.pf-m-action,
636
- & {
637
- &:hover {
638
- --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--hover--after--BorderWidth);
639
- }
640
- }
641
-
642
- @at-root .#{$tabs}__item.pf-m-action:focus-within,
643
- &:focus {
644
- --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--focus--after--BorderWidth);
645
- }
646
-
647
- @at-root .#{$tabs}__item.pf-m-action,
648
- & {
649
- &:active {
650
- --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__link--active--after--BorderWidth);
651
- }
652
- }
653
-
654
- &:hover {
655
- --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--hover__toggle-icon--Color);
656
- }
657
-
658
- &:focus {
659
- --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--focus__toggle-icon--Color);
660
- }
661
-
662
- &:active,
663
- &.pf-m-active {
664
- --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--active__toggle-icon--Color);
640
+ &:where(:hover, :focus) {
641
+ --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--hover--BackgroundColor);
642
+
643
+ mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
665
644
  }
666
645
 
667
646
  &:disabled,
@@ -674,29 +653,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
674
653
  &.pf-m-disabled,
675
654
  &.pf-m-aria-disabled {
676
655
  --#{$tabs}__link--Color: var(--#{$tabs}__link--disabled--Color);
677
- --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor);
678
656
  --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--disabled--before--BorderRightWidth);
679
657
  --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--disabled--before--BorderBottomWidth);
680
658
  --#{$tabs}__link--before--BorderLeftWidth: var(--#{$tabs}__link--disabled--before--BorderLeftWidth);
681
659
  --#{$tabs}__link--after--BorderWidth: 0;
682
660
  }
683
661
 
662
+ &:disabled,
663
+ &.pf-m-disabled,
684
664
  &.pf-m-aria-disabled {
685
- cursor: default;
665
+ --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor);
686
666
  }
687
667
 
688
- // un-nest these selectors in a breaking change release
689
- .#{$tabs}__item-icon,
690
- .#{$tabs}__item-text {
691
- margin-inline-end: var(--#{$tabs}__link--child--MarginRight);
668
+ @at-root .#{$tabs}__item.pf-m-action.pf-m-disabled {
669
+ --#{$tabs}__link--BackgroundColor: transparent;
670
+ }
692
671
 
693
- &:last-child {
694
- --#{$tabs}__link--child--MarginRight: 0;
695
- }
672
+ &.pf-m-aria-disabled {
673
+ cursor: default;
696
674
  }
697
675
 
698
676
  &.pf-m-expanded {
699
- --#{$tabs}__link-toggle-icon--Color: var(--#{$tabs}__link--m-expanded__toggle-icon--Color);
700
677
  --#{$tabs}__link-toggle-icon--Rotate: var(--#{$tabs}__link--m-expanded__toggle-icon--Rotate);
701
678
  }
702
679
  }
@@ -716,16 +693,6 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
716
693
 
717
694
  .#{$button} {
718
695
  --#{$button}--FontSize: var(--#{$tabs}__item-action--c-button--FontSize);
719
- --#{$button}--PaddingTop: var(--#{$tabs}__item-action--c-button--PaddingTop);
720
- --#{$button}--PaddingRight: var(--#{$tabs}__item-action--c-button--PaddingRight);
721
- --#{$button}--PaddingBottom: var(--#{$tabs}__item-action--c-button--PaddingBottom);
722
- --#{$button}--PaddingLeft: var(--#{$tabs}__item-action--c-button--PaddingLeft);
723
-
724
- outline-offset: var(--#{$tabs}__item-action--c-button--OutlineOffset);
725
- }
726
-
727
- &:last-child {
728
- --#{$tabs}__item-action--c-button--PaddingRight: var(--#{$tabs}__item-action--last-child--c-button--PaddingRight);
729
696
  }
730
697
  }
731
698
 
@@ -736,26 +703,14 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
736
703
 
737
704
  // Scroll buttons
738
705
  .#{$tabs}__scroll-button {
739
- flex: none;
740
- width: var(--#{$tabs}__scroll-button--Width);
741
- line-height: 1;
742
- color: var(--#{$tabs}__scroll-button--Color);
743
- background-color: var(--#{$tabs}__scroll-button--BackgroundColor);
744
- outline-offset: var(--#{$tabs}__scroll-button--OutlineOffset);
706
+ padding-block-start: var(--#{$tabs}__scroll-button--PaddingBlockStart);
707
+ padding-block-end: var(--#{$tabs}__scroll-button--PaddingBlockEnd);
708
+ padding-inline-start: var(--#{$tabs}__scroll-button--PaddingInlineStart);
709
+ padding-inline-end: var(--#{$tabs}__scroll-button--PaddingInlineEnd);
745
710
  opacity: 0;
746
711
  transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
747
-
748
- > * {
749
- @include pf-v5-mirror-inline-on-rtl; // in breaking change, add an icon wrapper and move this style to the wrapper
750
- }
751
-
752
- &:hover,
753
- &:active,
754
- &:focus {
755
- --#{$tabs}__scroll-button--Color: var(--#{$tabs}__scroll-button--hover--Color);
756
- }
757
-
758
- &::before {
712
+
713
+ &::before {
759
714
  border-color: var(--#{$tabs}__scroll-button--before--BorderColor);
760
715
  border-block-start-width: 0;
761
716
  border-block-end-width: var(--#{$tabs}__scroll-button--before--BorderBottomWidth);
@@ -776,17 +731,15 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
776
731
  margin-inline-start: calc(var(--#{$tabs}__scroll-button--Width) * -1);
777
732
  transform: translateX(100%);
778
733
  }
779
-
780
- &:disabled {
781
- --#{$tabs}__scroll-button--Color: var(--#{$tabs}__scroll-button--disabled--Color);
782
-
783
- pointer-events: none;
784
- }
785
734
  }
786
735
 
787
736
  .#{$tabs}__add {
788
737
  position: relative;
789
738
  display: flex;
739
+ padding-block-start: var(--#{$tabs}__add--PaddingBlockStart);
740
+ padding-block-end: var(--#{$tabs}__add--PaddingBlockEnd);
741
+ padding-inline-start: var(--#{$tabs}__add--PaddingInlineStart);
742
+ padding-inline-end: var(--#{$tabs}__add--PaddingInlineEnd);
790
743
 
791
744
  &::before {
792
745
  border-inline-start: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
@@ -794,10 +747,6 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
794
747
 
795
748
  .#{$button} {
796
749
  --#{$button}--FontSize: var(--#{$tabs}__add--c-button--FontSize);
797
- --#{$button}--PaddingTop: var(--#{$tabs}__add--c-button--PaddingTop);
798
- --#{$button}--PaddingBottom: var(--#{$tabs}__add--c-button--PaddingBottom);
799
-
800
- outline-offset: var(--#{$tabs}__add--c-button--OutlineOffset);
801
750
  }
802
751
  }
803
752
 
@@ -818,10 +767,3 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
818
767
  }
819
768
  }
820
769
  // stylelint-enable
821
-
822
- // stylelint-disable no-invalid-position-at-import-rule
823
- @import "themes/dark/tabs";
824
-
825
- @include pf-v5-theme-dark {
826
- @include pf-v5-theme-dark-tabs;
827
- }