@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/Label/label.css CHANGED
@@ -9,80 +9,131 @@
9
9
  --pf-v5-c-label--BorderColor: transparent;
10
10
  --pf-v5-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
11
11
  --pf-v5-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
12
- --pf-v5-c-label--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gray--default);
12
+ --pf-v5-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13
13
  --pf-v5-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
14
14
  --pf-v5-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
15
- --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
15
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
16
16
  --pf-v5-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
17
17
  --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
18
18
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
19
19
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
20
- --pf-v5-c-label--m-blue--BackgroundColor: var(--pf-t--global--border--color--nonstatus--blue--default);
20
+ --pf-v5-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
21
21
  --pf-v5-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
22
22
  --pf-v5-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
23
- --pf-v5-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
23
+ --pf-v5-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
24
24
  --pf-v5-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
25
25
  --pf-v5-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
26
26
  --pf-v5-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
27
27
  --pf-v5-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
28
- --pf-v5-c-label--m-red--BackgroundColor: var(--pf-t--global--border--color--nonstatus--red--default);
28
+ --pf-v5-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
29
29
  --pf-v5-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
30
30
  --pf-v5-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
31
- --pf-v5-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--red--hover);
31
+ --pf-v5-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
32
32
  --pf-v5-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
33
33
  --pf-v5-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
34
34
  --pf-v5-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
35
35
  --pf-v5-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
36
- --pf-v5-c-label--m-orange--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orange--default);
36
+ --pf-v5-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
37
37
  --pf-v5-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
38
38
  --pf-v5-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
39
- --pf-v5-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
39
+ --pf-v5-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
40
40
  --pf-v5-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
41
41
  --pf-v5-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
42
42
  --pf-v5-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
43
43
  --pf-v5-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
44
- --pf-v5-c-label--m-orangered--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
44
+ --pf-v5-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
45
45
  --pf-v5-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
46
46
  --pf-v5-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
47
- --pf-v5-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
47
+ --pf-v5-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
48
48
  --pf-v5-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
49
49
  --pf-v5-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
50
50
  --pf-v5-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
51
51
  --pf-v5-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
52
- --pf-v5-c-label--m-gold--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gold--default);
52
+ --pf-v5-c-label--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
53
53
  --pf-v5-c-label--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
54
54
  --pf-v5-c-label--m-gold__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--default);
55
- --pf-v5-c-label--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
55
+ --pf-v5-c-label--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--hover);
56
56
  --pf-v5-c-label--m-gold--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gold--hover);
57
57
  --pf-v5-c-label--m-gold--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--hover);
58
58
  --pf-v5-c-label--m-gold--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--default);
59
59
  --pf-v5-c-label--m-gold--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
60
- --pf-v5-c-label--m-green--BackgroundColor: var(--pf-t--global--border--color--nonstatus--green--default);
60
+ --pf-v5-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
61
61
  --pf-v5-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
62
62
  --pf-v5-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
63
- --pf-v5-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--green--hover);
63
+ --pf-v5-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
64
64
  --pf-v5-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
65
65
  --pf-v5-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
66
66
  --pf-v5-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
67
67
  --pf-v5-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
68
- --pf-v5-c-label--m-cyan--BackgroundColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
68
+ --pf-v5-c-label--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
69
69
  --pf-v5-c-label--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
70
70
  --pf-v5-c-label--m-cyan__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--default);
71
- --pf-v5-c-label--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
71
+ --pf-v5-c-label--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--hover);
72
72
  --pf-v5-c-label--m-cyan--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--hover);
73
73
  --pf-v5-c-label--m-cyan--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--hover);
74
74
  --pf-v5-c-label--m-cyan--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
75
75
  --pf-v5-c-label--m-cyan--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
76
- --pf-v5-c-label--m-purple--BackgroundColor: var(--pf-t--global--border--color--nonstatus--purple--default);
76
+ --pf-v5-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
77
77
  --pf-v5-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
78
78
  --pf-v5-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
79
- --pf-v5-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
79
+ --pf-v5-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
80
80
  --pf-v5-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
81
81
  --pf-v5-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
82
82
  --pf-v5-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
83
83
  --pf-v5-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
84
+ --pf-v5-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
85
+ --pf-v5-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
86
+ --pf-v5-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
87
+ --pf-v5-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
88
+ --pf-v5-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
89
+ --pf-v5-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
90
+ --pf-v5-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
91
+ --pf-v5-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
92
+ --pf-v5-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
93
+ --pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
94
+ --pf-v5-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
95
+ --pf-v5-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
96
+ --pf-v5-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
97
+ --pf-v5-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
98
+ --pf-v5-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
99
+ --pf-v5-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
100
+ --pf-v5-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
101
+ --pf-v5-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
102
+ --pf-v5-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
103
+ --pf-v5-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
104
+ --pf-v5-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
105
+ --pf-v5-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
106
+ --pf-v5-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
107
+ --pf-v5-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
108
+ --pf-v5-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
109
+ --pf-v5-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
110
+ --pf-v5-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
111
+ --pf-v5-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
112
+ --pf-v5-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
113
+ --pf-v5-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
114
+ --pf-v5-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
115
+ --pf-v5-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
116
+ --pf-v5-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
117
+ --pf-v5-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
118
+ --pf-v5-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
119
+ --pf-v5-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
120
+ --pf-v5-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
121
+ --pf-v5-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
122
+ --pf-v5-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
123
+ --pf-v5-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
124
+ --pf-v5-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
125
+ --pf-v5-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
126
+ --pf-v5-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
127
+ --pf-v5-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
128
+ --pf-v5-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
129
+ --pf-v5-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
130
+ --pf-v5-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
131
+ --pf-v5-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
132
+ --pf-v5-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
133
+ --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
84
134
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
85
135
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
136
+ --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
86
137
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
87
138
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
88
139
  --pf-v5-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
@@ -90,6 +141,7 @@
90
141
  --pf-v5-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
91
142
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
92
143
  --pf-v5-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
144
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
93
145
  --pf-v5-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
94
146
  --pf-v5-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
95
147
  --pf-v5-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
@@ -115,7 +167,6 @@
115
167
  --pf-v5-c-label__text--MaxWidth: 100%;
116
168
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
117
169
  --pf-v5-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
118
- --pf-v5-c-label__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
119
170
  --pf-v5-c-label__actions--c-button--OutlineOffset: -0.1875rem;
120
171
  --pf-v5-c-label__actions--c-button--MarginTop: calc(var(--pf-v5-c-label__actions--c-button--PaddingTop) * -1);
121
172
  --pf-v5-c-label__actions--c-button--MarginBottom: calc(var(--pf-v5-c-label__actions--c-button--PaddingBottom) * -1);
@@ -143,6 +194,7 @@
143
194
  padding-inline-end: var(--pf-v5-c-label--PaddingRight);
144
195
  font-size: var(--pf-v5-c-label--FontSize);
145
196
  white-space: nowrap;
197
+ background: transparent;
146
198
  isolation: isolate;
147
199
  border: 0;
148
200
  border-radius: var(--pf-v5-c-label--BorderRadius);
@@ -227,6 +279,66 @@
227
279
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-purple--m-outline--BorderColor);
228
280
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
229
281
  }
282
+ .pf-v5-c-label.pf-m-success {
283
+ --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-success--BackgroundColor);
284
+ --pf-v5-c-label--Color: var(--pf-v5-c-label--m-success--Color);
285
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-success__icon--Color);
286
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-success--m-clickable--hover--BackgroundColor);
287
+ --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-success--m-clickable--hover--Color);
288
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-clickable--hover__icon--Color);
289
+ --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-success--m-outline__icon--Color);
290
+ --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-success--m-outline--BorderColor);
291
+ --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
292
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color) ;
293
+ }
294
+ .pf-v5-c-label.pf-m-warning {
295
+ --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-warning--BackgroundColor);
296
+ --pf-v5-c-label--Color: var(--pf-v5-c-label--m-warning--Color);
297
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-warning__icon--Color);
298
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-warning--m-clickable--hover--BackgroundColor);
299
+ --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-warning--m-clickable--hover--Color);
300
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-warning--m-clickable--hover__icon--Color);
301
+ --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-warning--m-outline__icon--Color);
302
+ --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-warning--m-outline--BorderColor);
303
+ --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
304
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-warning--m-outline--m-clickable--hover__icon--Color) ;
305
+ }
306
+ .pf-v5-c-label.pf-m-danger {
307
+ --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-danger--BackgroundColor);
308
+ --pf-v5-c-label--Color: var(--pf-v5-c-label--m-danger--Color);
309
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-danger__icon--Color);
310
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-danger--m-clickable--hover--BackgroundColor);
311
+ --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-danger--m-clickable--hover--Color);
312
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-danger--m-clickable--hover__icon--Color);
313
+ --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-danger--m-outline__icon--Color);
314
+ --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-danger--m-outline--BorderColor);
315
+ --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
316
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-danger--m-outline--m-clickable--hover__icon--Color) ;
317
+ }
318
+ .pf-v5-c-label.pf-m-info {
319
+ --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-info--BackgroundColor);
320
+ --pf-v5-c-label--Color: var(--pf-v5-c-label--m-info--Color);
321
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-info__icon--Color);
322
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-info--m-clickable--hover--BackgroundColor);
323
+ --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-info--m-clickable--hover--Color);
324
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-info--m-clickable--hover__icon--Color);
325
+ --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-info--m-outline__icon--Color);
326
+ --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-info--m-outline--BorderColor);
327
+ --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
328
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-info--m-outline--m-clickable--hover__icon--Color) ;
329
+ }
330
+ .pf-v5-c-label.pf-m-custom {
331
+ --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-custom--BackgroundColor);
332
+ --pf-v5-c-label--Color: var(--pf-v5-c-label--m-custom--Color);
333
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-custom__icon--Color);
334
+ --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-custom--m-clickable--hover--BackgroundColor);
335
+ --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-custom--m-clickable--hover--Color);
336
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-custom--m-clickable--hover__icon--Color);
337
+ --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-custom--m-outline__icon--Color);
338
+ --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-custom--m-outline--BorderColor);
339
+ --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
340
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color) ;
341
+ }
230
342
  .pf-v5-c-label.pf-m-compact {
231
343
  --pf-v5-c-label--PaddingTop: var(--pf-v5-c-label--m-compact--PaddingTop);
232
344
  --pf-v5-c-label--PaddingRight: var(--pf-v5-c-label--m-compact--PaddingRight);
@@ -235,16 +347,20 @@
235
347
  --pf-v5-c-label--FontSize: var(--pf-v5-c-label--m-compact--FontSize);
236
348
  --pf-v5-c-label--m-editable--TextDecorationOffset: var(--pf-v5-c-label--m-compact--m-editable--TextDecorationOffset);
237
349
  }
350
+ .pf-v5-c-label.pf-m-filled .pf-v5-c-label__actions .pf-v5-c-button {
351
+ --pf-v5-c-button--Color: var(--pf-v5-c-label--m-filled__actions--c-button--Color);
352
+ }
238
353
  .pf-v5-c-label.pf-m-outline {
239
354
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-outline--Color);
240
355
  --pf-v5-c-label--BorderWidth: var(--pf-v5-c-label--m-outline--BorderWidth);
241
356
  --pf-v5-c-label--BorderColor: var(--pf-v5-c-label--m-outline--BorderColor);
242
357
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-outline--BackgroundColor);
358
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-outline__icon--Color);
243
359
  --pf-v5-c-label--m-clickable--hover--BackgroundColor: var(--pf-v5-c-label--m-outline--m-clickable--hover--BackgroundColor);
244
360
  --pf-v5-c-label--m-clickable--hover--BorderWidth: var(--pf-v5-c-label--m-outline--m-clickable--hover--BorderWidth);
245
361
  --pf-v5-c-label--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-outline--m-clickable--hover--BorderColor);
246
362
  --pf-v5-c-label--m-clickable--hover--Color: var(--pf-v5-c-label--m-outline--m-clickable--hover--Color);
247
- --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-outline__icon--Color);
363
+ --pf-v5-c-label--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-outline--m-clickable--hover__icon--Color);
248
364
  }
249
365
  .pf-v5-c-label.pf-m-editable {
250
366
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
@@ -261,9 +377,6 @@
261
377
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
262
378
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
263
379
  }
264
- .pf-v5-c-label.pf-m-add, .pf-v5-c-label.pf-m-overflow {
265
- background: transparent;
266
- }
267
380
  .pf-v5-c-label.pf-m-overflow {
268
381
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
269
382
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-overflow--BackgroundColor);
@@ -296,12 +409,16 @@
296
409
  }
297
410
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
298
411
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-clickable--hover--Color);
412
+ --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-clickable--hover__icon--Color);
299
413
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-clickable--hover--BackgroundColor);
300
414
  --pf-v5-c-label--BorderWidth: var(--pf-v5-c-label--m-clickable--hover--BorderWidth);
301
415
  --pf-v5-c-label--BorderColor: var(--pf-v5-c-label--m-clickable--hover--BorderColor);
302
416
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-v5-c-label--m-outline--m-clickable--hover--BorderWidth);
303
417
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-outline--m-clickable--hover--BorderColor);
304
418
  }
419
+ .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) ~ .pf-v5-c-label__actions .pf-v5-c-button {
420
+ --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label--m-clickable--hover__icon--Color);
421
+ }
305
422
 
306
423
  .pf-v5-c-label,
307
424
  .pf-v5-c-label__content {
@@ -347,7 +464,6 @@ input.pf-v5-c-label__content {
347
464
  margin-inline-end: var(--pf-v5-c-label__actions--MarginRight);
348
465
  }
349
466
  .pf-v5-c-label__actions .pf-v5-c-button {
350
- --pf-v5-c-button--Color: var(--pf-v5-c-label__actions--c-button--Color);
351
467
  --pf-v5-c-button--FontSize: var(--pf-v5-c-label__actions--c-button--FontSize);
352
468
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v5-c-label__actions--c-button--PaddingTop);
353
469
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v5-c-label__actions--c-button--PaddingRight);