@patternfly/patternfly 6.0.0-alpha.68 → 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 (10) hide show
  1. package/components/Label/label.css +140 -24
  2. package/components/Label/label.scss +161 -26
  3. package/docs/components/Label/examples/Label.md +2377 -766
  4. package/docs/demos/Form/examples/BasicForms.md +5 -2
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +140 -24
  7. package/patternfly-theme-dark-unversioned.css +140 -24
  8. package/patternfly.css +140 -24
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Label/label.scss CHANGED
@@ -14,99 +14,162 @@
14
14
  --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
15
15
 
16
16
  // Gray (default)
17
- --#{$label}--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gray--default);
17
+ --#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
18
18
  --#{$label}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
19
19
  --#{$label}__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
20
- --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
20
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
21
21
  --#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
22
22
  --#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
23
23
  --#{$label}--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
24
24
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
25
25
 
26
26
  // Blue
27
- --#{$label}--m-blue--BackgroundColor: var(--pf-t--global--border--color--nonstatus--blue--default);
27
+ --#{$label}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
28
28
  --#{$label}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
29
29
  --#{$label}--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
30
- --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
30
+ --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
31
31
  --#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
32
32
  --#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
33
33
  --#{$label}--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
34
34
  --#{$label}--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
35
35
 
36
36
  // Red
37
- --#{$label}--m-red--BackgroundColor: var(--pf-t--global--border--color--nonstatus--red--default);
37
+ --#{$label}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
38
38
  --#{$label}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
39
39
  --#{$label}--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
40
- --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--red--hover);
40
+ --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
41
41
  --#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
42
42
  --#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
43
43
  --#{$label}--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
44
44
  --#{$label}--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
45
45
 
46
46
  // Orange
47
- --#{$label}--m-orange--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orange--default);
47
+ --#{$label}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
48
48
  --#{$label}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
49
49
  --#{$label}--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
50
- --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
50
+ --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
51
51
  --#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
52
52
  --#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
53
53
  --#{$label}--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
54
54
  --#{$label}--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
55
55
 
56
56
  // Orangered
57
- --#{$label}--m-orangered--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
57
+ --#{$label}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
58
58
  --#{$label}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
59
59
  --#{$label}--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
60
- --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
60
+ --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
61
61
  --#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
62
62
  --#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
63
63
  --#{$label}--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
64
64
  --#{$label}--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
65
65
 
66
66
  // Gold
67
- --#{$label}--m-gold--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gold--default);
67
+ --#{$label}--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
68
68
  --#{$label}--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
69
69
  --#{$label}--m-gold__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--default);
70
- --#{$label}--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
70
+ --#{$label}--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--hover);
71
71
  --#{$label}--m-gold--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gold--hover);
72
72
  --#{$label}--m-gold--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--hover);
73
73
  --#{$label}--m-gold--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--default);
74
74
  --#{$label}--m-gold--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
75
75
 
76
76
  // Green
77
- --#{$label}--m-green--BackgroundColor: var(--pf-t--global--border--color--nonstatus--green--default);
77
+ --#{$label}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
78
78
  --#{$label}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
79
79
  --#{$label}--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
80
- --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--green--hover);
80
+ --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
81
81
  --#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
82
82
  --#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
83
83
  --#{$label}--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
84
84
  --#{$label}--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
85
85
 
86
86
  // Cyan
87
- --#{$label}--m-cyan--BackgroundColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
87
+ --#{$label}--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
88
88
  --#{$label}--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
89
89
  --#{$label}--m-cyan__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--default);
90
- --#{$label}--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
90
+ --#{$label}--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--hover);
91
91
  --#{$label}--m-cyan--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--hover);
92
92
  --#{$label}--m-cyan--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--hover);
93
93
  --#{$label}--m-cyan--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
94
94
  --#{$label}--m-cyan--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
95
95
 
96
96
  // Purple
97
- --#{$label}--m-purple--BackgroundColor: var(--pf-t--global--border--color--nonstatus--purple--default);
97
+ --#{$label}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
98
98
  --#{$label}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
99
99
  --#{$label}--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
100
- --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
100
+ --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
101
101
  --#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
102
102
  --#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
103
103
  --#{$label}--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
104
104
  --#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
105
105
 
106
+ // Success
107
+ --#{$label}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
108
+ --#{$label}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
109
+ --#{$label}--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
110
+ --#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
111
+ --#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
112
+ --#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
113
+ --#{$label}--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
114
+ --#{$label}--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
115
+ --#{$label}--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
116
+ --#{$label}--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
117
+
118
+ // Warning
119
+ --#{$label}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
120
+ --#{$label}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
121
+ --#{$label}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
122
+ --#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
123
+ --#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
124
+ --#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
125
+ --#{$label}--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
126
+ --#{$label}--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
127
+ --#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
128
+ --#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
129
+
130
+ // Danger
131
+ --#{$label}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
132
+ --#{$label}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
133
+ --#{$label}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
134
+ --#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
135
+ --#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
136
+ --#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
137
+ --#{$label}--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
138
+ --#{$label}--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
139
+ --#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
140
+ --#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
141
+
142
+ // Info
143
+ --#{$label}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
144
+ --#{$label}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
145
+ --#{$label}--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
146
+ --#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
147
+ --#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
148
+ --#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
149
+ --#{$label}--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
150
+ --#{$label}--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
151
+ --#{$label}--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
152
+ --#{$label}--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
153
+
154
+ // Custom
155
+ --#{$label}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
156
+ --#{$label}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
157
+ --#{$label}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
158
+ --#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
159
+ --#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
160
+ --#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
161
+ --#{$label}--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
162
+ --#{$label}--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
163
+ --#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
164
+ --#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
165
+
106
166
  // Clickable
107
167
  --#{$label}--m-clickable--hover--BorderWidth: 0;
108
168
  --#{$label}--m-clickable--hover--BorderColor: transparent;
109
169
 
170
+ // Filled
171
+ --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}__icon--Color);
172
+
110
173
  // Outline
111
174
  --#{$label}--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
112
175
  --#{$label}--m-outline--BackgroundColor: transparent;
@@ -115,6 +178,7 @@
115
178
  --#{$label}--m-outline--m-clickable--hover--BackgroundColor: transparent;
116
179
  --#{$label}--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
117
180
  --#{$label}--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
181
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
118
182
 
119
183
  // Overflow
120
184
  --#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
@@ -156,7 +220,6 @@
156
220
 
157
221
  // Actions button (close)
158
222
  --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
159
- --#{$label}__actions--c-button--Color: var(--#{$label}__icon--Color);
160
223
  --#{$label}__actions--c-button--OutlineOffset: #{pf-size-prem(-3px)};
161
224
  --#{$label}__actions--c-button--MarginTop: calc(var(--#{$label}__actions--c-button--PaddingTop) * -1);
162
225
  --#{$label}__actions--c-button--MarginBottom: calc(var(--#{$label}__actions--c-button--PaddingBottom) * -1);
@@ -188,6 +251,7 @@
188
251
  padding-inline-end: var(--#{$label}--PaddingRight);
189
252
  font-size: var(--#{$label}--FontSize);
190
253
  white-space: nowrap;
254
+ background: transparent;
191
255
  isolation: isolate;
192
256
  border: 0;
193
257
  border-radius: var(--#{$label}--BorderRadius);
@@ -280,6 +344,71 @@
280
344
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor);
281
345
  }
282
346
 
347
+ &.pf-m-success {
348
+ --#{$label}--BackgroundColor: var(--#{$label}--m-success--BackgroundColor);
349
+ --#{$label}--Color: var(--#{$label}--m-success--Color);
350
+ --#{$label}__icon--Color: var(--#{$label}--m-success__icon--Color);
351
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-success--m-clickable--hover--BackgroundColor);
352
+ --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-success--m-clickable--hover--Color);
353
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-clickable--hover__icon--Color);
354
+ --#{$label}--m-outline__icon--Color: var(--#{$label}--m-success--m-outline__icon--Color);
355
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-success--m-outline--BorderColor);
356
+ --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-outline--m-clickable--hover--BorderColor);
357
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color)
358
+ }
359
+
360
+ &.pf-m-warning {
361
+ --#{$label}--BackgroundColor: var(--#{$label}--m-warning--BackgroundColor);
362
+ --#{$label}--Color: var(--#{$label}--m-warning--Color);
363
+ --#{$label}__icon--Color: var(--#{$label}--m-warning__icon--Color);
364
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-warning--m-clickable--hover--BackgroundColor);
365
+ --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-warning--m-clickable--hover--Color);
366
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-clickable--hover__icon--Color);
367
+ --#{$label}--m-outline__icon--Color: var(--#{$label}--m-warning--m-outline__icon--Color);
368
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-warning--m-outline--BorderColor);
369
+ --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor);
370
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color)
371
+ }
372
+
373
+ &.pf-m-danger {
374
+ --#{$label}--BackgroundColor: var(--#{$label}--m-danger--BackgroundColor);
375
+ --#{$label}--Color: var(--#{$label}--m-danger--Color);
376
+ --#{$label}__icon--Color: var(--#{$label}--m-danger__icon--Color);
377
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-danger--m-clickable--hover--BackgroundColor);
378
+ --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-danger--m-clickable--hover--Color);
379
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-clickable--hover__icon--Color);
380
+ --#{$label}--m-outline__icon--Color: var(--#{$label}--m-danger--m-outline__icon--Color);
381
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-danger--m-outline--BorderColor);
382
+ --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor);
383
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color)
384
+ }
385
+
386
+ &.pf-m-info {
387
+ --#{$label}--BackgroundColor: var(--#{$label}--m-info--BackgroundColor);
388
+ --#{$label}--Color: var(--#{$label}--m-info--Color);
389
+ --#{$label}__icon--Color: var(--#{$label}--m-info__icon--Color);
390
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-info--m-clickable--hover--BackgroundColor);
391
+ --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-info--m-clickable--hover--Color);
392
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-clickable--hover__icon--Color);
393
+ --#{$label}--m-outline__icon--Color: var(--#{$label}--m-info--m-outline__icon--Color);
394
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-info--m-outline--BorderColor);
395
+ --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-outline--m-clickable--hover--BorderColor);
396
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color)
397
+ }
398
+
399
+ &.pf-m-custom {
400
+ --#{$label}--BackgroundColor: var(--#{$label}--m-custom--BackgroundColor);
401
+ --#{$label}--Color: var(--#{$label}--m-custom--Color);
402
+ --#{$label}__icon--Color: var(--#{$label}--m-custom__icon--Color);
403
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-custom--m-clickable--hover--BackgroundColor);
404
+ --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-custom--m-clickable--hover--Color);
405
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-clickable--hover__icon--Color);
406
+ --#{$label}--m-outline__icon--Color: var(--#{$label}--m-custom--m-outline__icon--Color);
407
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-custom--m-outline--BorderColor);
408
+ --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor);
409
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color)
410
+ }
411
+
283
412
  &.pf-m-compact {
284
413
  --#{$label}--PaddingTop: var(--#{$label}--m-compact--PaddingTop);
285
414
  --#{$label}--PaddingRight: var(--#{$label}--m-compact--PaddingRight);
@@ -289,16 +418,23 @@
289
418
  --#{$label}--m-editable--TextDecorationOffset: var(--#{$label}--m-compact--m-editable--TextDecorationOffset);
290
419
  }
291
420
 
421
+ &.pf-m-filled {
422
+ .#{$label}__actions .#{$button} {
423
+ --#{$button}--Color: var(--#{$label}--m-filled__actions--c-button--Color);
424
+ }
425
+ }
426
+
292
427
  &.pf-m-outline {
293
428
  --#{$label}--Color: var(--#{$label}--m-outline--Color);
294
429
  --#{$label}--BorderWidth: var(--#{$label}--m-outline--BorderWidth);
295
430
  --#{$label}--BorderColor: var(--#{$label}--m-outline--BorderColor);
296
431
  --#{$label}--BackgroundColor: var(--#{$label}--m-outline--BackgroundColor);
432
+ --#{$label}__icon--Color: var(--#{$label}--m-outline__icon--Color);
297
433
  --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-outline--m-clickable--hover--BackgroundColor);
298
434
  --#{$label}--m-clickable--hover--BorderWidth: var(--#{$label}--m-outline--m-clickable--hover--BorderWidth);
299
435
  --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-outline--m-clickable--hover--BorderColor);
300
436
  --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-outline--m-clickable--hover--Color);
301
- --#{$label}__icon--Color: var(--#{$label}--m-outline__icon--Color);
437
+ --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-outline--m-clickable--hover__icon--Color);
302
438
  }
303
439
 
304
440
  &.pf-m-editable {
@@ -319,11 +455,6 @@
319
455
  --#{$label}--Color: var(--#{$label}--m-editable--m-editable-active--Color);
320
456
  }
321
457
 
322
- &.pf-m-add,
323
- &.pf-m-overflow {
324
- background: transparent;
325
- }
326
-
327
458
  &.pf-m-overflow {
328
459
  --#{$label}--Color: var(--#{$label}--m-overflow--Color);
329
460
  --#{$label}--BackgroundColor: var(--#{$label}--m-overflow--BackgroundColor);
@@ -369,11 +500,16 @@
369
500
 
370
501
  &:is(:hover, :focus) {
371
502
  --#{$label}--Color: var(--#{$label}--m-clickable--hover--Color);
503
+ --#{$label}__icon--Color: var(--#{$label}--m-clickable--hover__icon--Color);
372
504
  --#{$label}--BackgroundColor: var(--#{$label}--m-clickable--hover--BackgroundColor);
373
505
  --#{$label}--BorderWidth: var(--#{$label}--m-clickable--hover--BorderWidth);
374
506
  --#{$label}--BorderColor: var(--#{$label}--m-clickable--hover--BorderColor);
375
507
  --#{$label}--m-outline--BorderWidth: var(--#{$label}--m-outline--m-clickable--hover--BorderWidth);
376
508
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-outline--m-clickable--hover--BorderColor);
509
+
510
+ ~ .#{$label}__actions .#{$button} {
511
+ --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}--m-clickable--hover__icon--Color);
512
+ }
377
513
  }
378
514
  }
379
515
  }
@@ -423,7 +559,6 @@
423
559
  margin-inline-end: var(--#{$label}__actions--MarginRight);
424
560
 
425
561
  .#{$button} {
426
- --#{$button}--Color: var(--#{$label}__actions--c-button--Color);
427
562
  --#{$button}--FontSize: var(--#{$label}__actions--c-button--FontSize);
428
563
  --#{$button}--m-plain--m-no-padding--PaddingTop: var(--#{$label}__actions--c-button--PaddingTop);
429
564
  --#{$button}--m-plain--m-no-padding--PaddingRight: var(--#{$label}__actions--c-button--PaddingRight);