@patternfly/patternfly 6.0.0-alpha.41 → 6.0.0-alpha.43

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 (16) hide show
  1. package/components/Button/button.css +366 -347
  2. package/components/Button/button.scss +422 -471
  3. package/components/Spinner/spinner.css +4 -0
  4. package/components/Spinner/spinner.scss +3 -0
  5. package/components/TabContent/tab-content.css +17 -11
  6. package/components/TabContent/tab-content.scss +18 -14
  7. package/docs/components/Button/examples/Button.css +4 -0
  8. package/docs/components/Button/examples/Button.md +1380 -81
  9. package/docs/components/TabContent/examples/TabContent.md +10 -10
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +387 -358
  12. package/patternfly-theme-dark-unversioned.css +387 -358
  13. package/patternfly.css +387 -358
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Button/themes/dark/button.scss +0 -51
package/components/Button/button.scss CHANGED
@@ -1,185 +1,206 @@
1
- // @debug $button; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
1
+ :root,
3
2
  .#{$button} {
4
- // Component
5
3
  --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
6
4
  --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
7
5
  --#{$button}--PaddingBottom: var(--pf-t--global--spacer--sm);
8
6
  --#{$button}--PaddingLeft: var(--pf-t--global--spacer--lg);
7
+ --#{$button}--Color: var(--pf-t--global--text--color--regular);
9
8
  --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
10
9
  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body);
11
10
  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
12
11
  --#{$button}--BackgroundColor: transparent;
12
+ --#{$button}--BorderColor: transparent;
13
+ --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
13
14
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
14
- --#{$button}--after--BorderColor: transparent;
15
- --#{$button}--after--BorderWidth: var(--pf-t--global--border--width--button--default);
16
-
17
- // Hover state variables
18
- --#{$button}--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
19
-
20
- // Focus state variables
21
- --#{$button}--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
15
+ --#{$button}--TextDecoration: none;
22
16
 
23
- // Active state variables
24
- --#{$button}--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
17
+ // Hover
18
+ --#{$button}--hover--BackgroundColor: transparent;
19
+ --#{$button}--hover--BorderColor: transparent;
20
+ --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
21
+ --#{$button}--hover--TextDecoration: none;
25
22
 
26
- // Disabled state variables
27
- --#{$button}--disabled--Color: var(--pf-t--global--text--color--disabled--default);
28
- --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29
- --#{$button}--disabled--after--BorderColor: transparent;
23
+ // Clicked
24
+ --#{$button}--m-clicked--BackgroundColor: transparent;
25
+ --#{$button}--m-clicked--BorderColor: transparent;
26
+ --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
30
27
 
31
- // Primary btn
32
- --#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
28
+ // Primary
33
29
  --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
34
- --#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
30
+ --#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
31
+ --#{$button}--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
35
32
  --#{$button}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
36
- --#{$button}--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
37
- --#{$button}--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
38
- --#{$button}--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
39
- --#{$button}--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
40
-
41
- // Secondary btn
42
- --#{$button}--m-secondary--BackgroundColor: transparent;
43
- --#{$button}--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
33
+ --#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
34
+ --#{$button}--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
35
+ --#{$button}--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
36
+ --#{$button}--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
37
+ --#{$button}--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
38
+
39
+ // Secondary
44
40
  --#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
45
- --#{$button}--m-secondary--hover--BackgroundColor: transparent;
46
- --#{$button}--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
41
+ --#{$button}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
42
+ --#{$button}--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
47
43
  --#{$button}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
48
- --#{$button}--m-secondary--focus--BackgroundColor: transparent;
49
- --#{$button}--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
50
- --#{$button}--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
51
- --#{$button}--m-secondary--active--BackgroundColor: transparent;
52
- --#{$button}--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
53
- --#{$button}--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
54
-
55
- // Secondary danger
56
- --#{$button}--m-secondary--m-danger--BackgroundColor: transparent;
44
+ --#{$button}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
45
+ --#{$button}--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
46
+ --#{$button}--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
47
+ --#{$button}--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
48
+ --#{$button}--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
57
49
  --#{$button}--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
58
- --#{$button}--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
59
- --#{$button}--m-secondary--m-danger--hover--BackgroundColor: transparent;
50
+ --#{$button}--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
51
+ --#{$button}--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
60
52
  --#{$button}--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
61
- --#{$button}--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
62
- --#{$button}--m-secondary--m-danger--focus--BackgroundColor: transparent;
63
- --#{$button}--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
64
- --#{$button}--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
65
- --#{$button}--m-secondary--m-danger--active--BackgroundColor: transparent;
66
- --#{$button}--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
67
- --#{$button}--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
68
-
69
- // Tertiary btn
70
- --#{$button}--m-tertiary--BackgroundColor: transparent;
71
- --#{$button}--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
72
- --#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--regular);
73
- --#{$button}--m-tertiary--hover--BackgroundColor: transparent;
74
- --#{$button}--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
75
- --#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
76
- --#{$button}--m-tertiary--focus--BackgroundColor: transparent;
77
- --#{$button}--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
78
- --#{$button}--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
79
- --#{$button}--m-tertiary--active--BackgroundColor: transparent;
80
- --#{$button}--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
81
- --#{$button}--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
82
-
83
- // Warning btn
84
- // TODO need active state text?
85
- --#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
86
- --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
87
- --#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
88
- --#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
89
- --#{$button}--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
90
- --#{$button}--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
91
- --#{$button}--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
92
- --#{$button}--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
93
-
94
- // Danger btn
95
- // TODO need active state text?
96
- --#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
97
- --#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
98
- --#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
99
- --#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
100
- --#{$button}--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
101
- --#{$button}--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
102
- --#{$button}--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
103
- --#{$button}--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
104
-
105
- // Link btn
106
- --#{$button}--m-link--BackgroundColor: transparent;
107
- --#{$button}--m-link--Color: var(--pf-t--global--text--color--link--default);
108
- --#{$button}--m-link--hover--BackgroundColor: transparent;
109
- --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
110
- --#{$button}--m-link--focus--BackgroundColor: transparent;
111
- --#{$button}--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
112
- --#{$button}--m-link--active--BackgroundColor: transparent;
113
- --#{$button}--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
114
- --#{$button}--m-link--disabled--BackgroundColor: transparent;
115
- --#{$button}--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
116
- --#{$button}--m-link--not--m-inline--TextDecoration: none;
117
- --#{$button}--m-link--m-inline--FontSize: inherit;
53
+ --#{$button}--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
54
+ --#{$button}--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
55
+ --#{$button}--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
56
+ --#{$button}--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
57
+ --#{$button}--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
58
+
59
+ // Tertiary
60
+ --#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
61
+ --#{$button}--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
62
+ --#{$button}--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
63
+ --#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
64
+ --#{$button}--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
65
+ --#{$button}--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
66
+ --#{$button}--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
67
+ --#{$button}--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
68
+ --#{$button}--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
69
+
70
+ // Link
71
+ --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
72
+ --#{$button}--m-link--PaddingRight: var(--pf-t--global--spacer--md);
73
+ --#{$button}--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
74
+ --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
75
+ --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
76
+ --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
77
+ --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
78
+ --#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
79
+ --#{$button}--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
80
+ --#{$button}--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
81
+ --#{$button}--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
82
+ --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
83
+ --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
84
+ --#{$button}--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
85
+ --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
86
+ --#{$button}--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
87
+ --#{$button}--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
88
+ --#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
89
+
90
+ // Inline link
91
+ --#{$button}--m-link--m-inline--FontSize: initial;
92
+ --#{$button}--m-link--m-inline--LineHeight: initial;
93
+ --#{$button}--m-link--m-inline--FontWeight: initial;
118
94
  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
119
- --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
120
95
  --#{$button}--m-link--m-inline--PaddingTop: 0;
121
96
  --#{$button}--m-link--m-inline--PaddingRight: 0;
122
97
  --#{$button}--m-link--m-inline--PaddingBottom: 0;
123
98
  --#{$button}--m-link--m-inline--PaddingLeft: 0;
124
99
  --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
125
100
  --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
101
+ --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
102
+ --#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
126
103
 
127
- // Link danger
128
- --#{$button}--m-link--m-danger--BackgroundColor: transparent;
129
- --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
130
- --#{$button}--m-link--m-danger--hover--BackgroundColor: transparent;
131
- --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
132
- --#{$button}--m-link--m-danger--focus--BackgroundColor: transparent;
133
- --#{$button}--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
134
- --#{$button}--m-link--m-danger--active--BackgroundColor: transparent;
135
- --#{$button}--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
136
-
137
- // Plain btn
138
- --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
104
+ // Plain
139
105
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
140
106
  --#{$button}--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
141
107
  --#{$button}--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
142
108
  --#{$button}--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
143
109
  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
110
+ --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
111
+ --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
112
+ --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
113
+ --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
144
114
  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
115
+ --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
116
+ --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
145
117
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
146
- --#{$button}--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
147
- --#{$button}--m-plain--focus--BackgroundColor: transparent;
148
- --#{$button}--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
149
- --#{$button}--m-plain--active--BackgroundColor: transparent;
150
- --#{$button}--m-plain--active--Color: var(--pf-t--global--text--color--regular);
151
- --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
152
- --#{$button}--m-plain--disabled--BackgroundColor: transparent;
153
-
154
- // Control Button
155
- --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
156
- --#{$button}--m-control--Color: var(--pf-t--global--text--color--subtle);
118
+ --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
119
+ --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
120
+ --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
121
+ --#{$button}__progress--Color: var(--#{$button}__icon--Color);
122
+ --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
123
+ --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
124
+
125
+
126
+ // Control
157
127
  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
158
- --#{$button}--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
159
- --#{$button}--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
160
- --#{$button}--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
161
- --#{$button}--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
162
- --#{$button}--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
163
- --#{$button}--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
164
- --#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
128
+ --#{$button}--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
129
+ --#{$button}--m-control--PaddingRight: var(--pf-t--global--spacer--md);
130
+ --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
131
+ --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
132
+ --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
133
+ --#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
134
+ --#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
165
135
  --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
166
- --#{$button}--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
167
- --#{$button}--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
168
- --#{$button}--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
169
- --#{$button}--m-control--active--Color: var(--pf-t--global--text--color--regular);
170
- --#{$button}--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
171
- --#{$button}--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
172
- --#{$button}--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
173
- --#{$button}--m-control--focus--Color: var(--pf-t--global--text--color--regular);
174
- --#{$button}--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
175
- --#{$button}--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
176
- --#{$button}--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
177
- --#{$button}--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
178
- --#{$button}--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
179
- --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
180
- --#{$button}--m-small--FontSize: var(--#{$pf-global}--FontSize--sm);
181
-
182
- // CTA Button
136
+ --#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
137
+ --#{$button}--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
138
+ --#{$button}--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
139
+ --#{$button}--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
140
+ --#{$button}--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
141
+ --#{$button}--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
142
+ --#{$button}--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
143
+ --#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
144
+ --#{$button}--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
145
+
146
+ // Stateful
147
+ --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
148
+ --#{$button}--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
149
+ --#{$button}--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
150
+
151
+ // Read
152
+ --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
153
+ --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
154
+ --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
155
+ --#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
156
+ --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
157
+ --#{$button}--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
158
+
159
+ // Unread
160
+ --#{$button}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
161
+ --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
162
+ --#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
163
+ --#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
164
+ --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
165
+ --#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
166
+ --#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
167
+ --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
168
+ --#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
169
+
170
+ // Attention
171
+ --#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
172
+ --#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
173
+ --#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
174
+ --#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
175
+ --#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
176
+ --#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
177
+ --#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
178
+ --#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
179
+ --#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
180
+
181
+ // Warning
182
+ --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
183
+ --#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
184
+ --#{$button}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
185
+ --#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
186
+ --#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
187
+ --#{$button}--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
188
+ --#{$button}--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
189
+ --#{$button}--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
190
+ --#{$button}--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
191
+
192
+ // Danger
193
+ --#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
194
+ --#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
195
+ --#{$button}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
196
+ --#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
197
+ --#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
198
+ --#{$button}--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
199
+ --#{$button}--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
200
+ --#{$button}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
201
+ --#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
202
+
203
+ // CTA
183
204
  --#{$button}--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
184
205
  --#{$button}--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
185
206
  --#{$button}--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
@@ -187,7 +208,22 @@
187
208
  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
188
209
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
189
210
 
190
- // Styles for an icon in button
211
+ // Small
212
+ --#{$button}--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
213
+ --#{$button}--m-small--PaddingRight: var(--pf-t--global--spacer--md);
214
+ --#{$button}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
215
+ --#{$button}--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
216
+
217
+ // Disabled
218
+ --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
219
+ --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
220
+ --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
221
+ --#{$button}--disabled--BorderColor: transparent;
222
+
223
+ // Icons
224
+ --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
225
+ --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
226
+ --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
191
227
  --#{$button}__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
192
228
  --#{$button}__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
193
229
 
@@ -198,13 +234,14 @@
198
234
  --#{$button}__progress--TranslateX: 0;
199
235
  --#{$button}__progress--Top: 50%;
200
236
  --#{$button}__progress--Left: var(--pf-t--global--spacer--md);
237
+ --#{$button}__progress--Color: var(--#{$button}__icon--Color);
201
238
  --#{$button}--m-progress--TransitionProperty: padding;
202
239
  --#{$button}--m-progress--TransitionDuration: var(--#{$pf-global}--TransitionDuration);
203
240
  --#{$button}--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
204
241
  --#{$button}--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
205
242
  --#{$button}--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
206
243
  --#{$button}--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width));
207
- --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
244
+ --#{$button}--m-in-progress--m-plain--Color: var(--#{$spinner}--Color);
208
245
  --#{$button}--m-in-progress--m-plain__progress--Left: 50%;
209
246
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
210
247
 
@@ -213,201 +250,145 @@
213
250
  --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
214
251
  --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
215
252
  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
216
- --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300); // used only for primary, unread, not disabled
253
+ --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
254
+ }
217
255
 
256
+ .#{$button} {
218
257
  position: relative;
219
258
  display: inline-block;
220
259
  padding-block-start: var(--#{$button}--PaddingTop);
221
- padding-block-end: var(--#{$button}--PaddingBottom);
260
+ padding-block-end: var(--#{$button}--PaddingBottom);
222
261
  padding-inline-start: var(--#{$button}--PaddingLeft);
223
262
  padding-inline-end: var(--#{$button}--PaddingRight);
224
- font-size: var(--#{$button}--FontSize);
225
- font-weight: var(--#{$button}--FontWeight);
226
- line-height: var(--#{$button}--LineHeight);
263
+ font-size: var(--#{$button}--FontSize, inherit);
264
+ font-weight: var(--#{$button}--FontWeight, inherit);
265
+ line-height: var(--#{$button}--LineHeight, inherit);
266
+ color: var(--#{$button}--Color);
227
267
  text-align: center;
268
+ text-decoration: var(--#{$button}--TextDecoration);
228
269
  white-space: nowrap;
229
270
  user-select: none;
271
+ background-color: var(--#{$button}--BackgroundColor);
230
272
  border: 0;
231
273
  border-radius: var(--#{$button}--BorderRadius);
232
274
 
233
275
  &::after {
234
276
  position: absolute;
235
- inset-block-start: 0;
236
- inset-block-end: 0;
237
- inset-inline-start: 0;
238
- inset-inline-end: 0;
277
+ inset: 0;
239
278
  pointer-events: none;
240
279
  content: "";
241
- border: var(--#{$button}--after--BorderWidth) solid;
242
- border-color: var(--#{$button}--after--BorderColor);
243
- border-radius: var(--#{$button}--BorderRadius);
280
+ border: var(--#{$button}--BorderWidth) solid;
281
+ border-color: var(--#{$button}--BorderColor);
282
+ border-radius: inherit;
244
283
  }
245
284
 
246
- &:hover {
247
- --#{$button}--after--BorderWidth: var(--#{$button}--hover--after--BorderWidth);
248
-
249
- text-decoration: none;
250
- }
251
-
252
- &:focus {
253
- --#{$button}--after--BorderWidth: var(--#{$button}--focus--after--BorderWidth);
254
- }
255
-
256
- &:active,
257
- &.pf-m-active {
258
- --#{$button}--after--BorderWidth: var(--#{$button}--active--after--BorderWidth);
259
- }
260
-
261
- &.pf-m-block {
262
- display: block;
263
- width: 100%;
264
- }
265
-
266
- &.pf-m-small {
267
- --#{$button}--FontSize: var(--#{$button}--m-small--FontSize);
268
- }
269
-
270
- &.pf-m-primary,
271
- &.pf-m-secondary,
272
- &.pf-m-tertiary,
273
- &.pf-m-link {
274
- &.pf-m-display-lg {
275
- --#{$button}--PaddingTop: var(--#{$button}--m-display-lg--PaddingTop);
276
- --#{$button}--PaddingRight: var(--#{$button}--m-display-lg--PaddingRight);
277
- --#{$button}--PaddingBottom: var(--#{$button}--m-display-lg--PaddingBottom);
278
- --#{$button}--PaddingLeft: var(--#{$button}--m-display-lg--PaddingLeft);
279
- --#{$button}--FontWeight: var(--#{$button}--m-display-lg--FontWeight);
280
- }
281
- }
282
-
283
- // Primary buttons
285
+ // Primary
284
286
  &.pf-m-primary {
285
- color: var(--#{$button}--m-primary--Color);
286
- background-color: var(--#{$button}--m-primary--BackgroundColor);
287
-
288
- &:hover {
289
- --#{$button}--m-primary--Color: var(--#{$button}--m-primary--hover--Color);
290
- --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--hover--BackgroundColor);
291
- }
292
-
293
- &:focus {
294
- --#{$button}--m-primary--Color: var(--#{$button}--m-primary--focus--Color);
295
- --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--focus--BackgroundColor);
296
- }
297
-
298
- // &:active,
299
- // &.pf-m-active {
300
- // --#{$button}--m-primary--Color: var(--#{$button}--m-primary--active--Color);
301
- // --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--active--BackgroundColor);
302
- // }
287
+ --#{$button}--Color: var(--#{$button}--m-primary--Color);
288
+ --#{$button}--BackgroundColor: var(--#{$button}--m-primary--BackgroundColor);
289
+ --#{$button}__icon--Color: var(--#{$button}--m-primary__icon--Color);
290
+ --#{$button}--hover--Color: var(--#{$button}--m-primary--hover--Color);
291
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-primary--hover--BackgroundColor);
292
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-primary--hover__icon--Color);
293
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-primary--m-clicked--Color);
294
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-primary--m-clicked--BackgroundColor);
295
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-primary--m-clicked__icon--Color);
303
296
 
304
297
  .#{$badge}.pf-m-unread {
305
298
  border: var(--#{$button}--m-primary__c-badge--BorderWidth) solid var(--#{$button}--m-primary__c-badge--BorderColor);
306
299
  }
307
300
  }
308
301
 
309
- // Secondary buttons
302
+ // Secondary
310
303
  &.pf-m-secondary {
311
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--after--BorderColor);
312
-
313
- color: var(--#{$button}--m-secondary--Color);
314
- background-color: var(--#{$button}--m-secondary--BackgroundColor);
315
-
316
- &:hover {
317
- --#{$button}--m-secondary--Color: var(--#{$button}--m-secondary--hover--Color);
318
- --#{$button}--m-secondary--BackgroundColor: var(--#{$button}--m-secondary--hover--BackgroundColor);
319
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--hover--after--BorderColor);
320
- }
321
-
322
- &:focus {
323
- --#{$button}--m-secondary--Color: var(--#{$button}--m-secondary--focus--Color);
324
- --#{$button}--m-secondary--BackgroundColor: var(--#{$button}--m-secondary--focus--BackgroundColor);
325
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--focus--after--BorderColor);
326
- }
327
-
328
- &.pf-m-active,
329
- &:active {
330
- --#{$button}--m-secondary--Color: var(--#{$button}--m-secondary--active--Color);
331
- --#{$button}--m-secondary--BackgroundColor: var(--#{$button}--m-secondary--active--BackgroundColor);
332
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--active--after--BorderColor);
304
+ --#{$button}--Color: var(--#{$button}--m-secondary--Color);
305
+ --#{$button}--BorderColor: var(--#{$button}--m-secondary--BorderColor);
306
+ --#{$button}__icon--Color: var(--#{$button}--m-secondary__icon--Color);
307
+ --#{$button}--hover--Color: var(--#{$button}--m-secondary--hover--Color);
308
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-secondary--hover--BorderColor);
309
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-secondary--hover__icon--Color);
310
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-secondary--m-clicked--Color);
311
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-clicked--BorderColor);
312
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-clicked__icon--Color);
313
+ --#{$button}--m-danger--Color: var(--#{$button}--m-secondary--m-danger--Color);
314
+ --#{$button}--m-danger__icon--Color: var(--#{$button}--m-secondary--m-danger__icon--Color);
315
+ --#{$button}--m-danger--hover--Color: var(--#{$button}--m-secondary--m-danger--hover--Color);
316
+ --#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-secondary--m-danger--hover__icon--Color);
317
+ --#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-secondary--m-danger--m-clicked--Color);
318
+ --#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-danger--m-clicked__icon--Color);
319
+
320
+ &.pf-m-danger {
321
+ --#{$button}--m-secondary--BorderColor: var(--#{$button}--m-secondary--m-danger--BorderColor);
322
+ --#{$button}--m-secondary--hover--BorderColor: var(--#{$button}--m-secondary--m-danger--hover--BorderColor);
323
+ --#{$button}--m-secondary--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-danger--m-clicked--BorderColor);
324
+ --#{$button}--m-danger--BackgroundColor: transparent;
325
+ --#{$button}--m-danger--hover--BackgroundColor: transparent;
326
+ --#{$button}--m-danger--m-clicked--BackgroundColor: transparent;
333
327
  }
334
328
  }
335
329
 
336
- // Tertiary buttons
330
+ // Tertiary
337
331
  &.pf-m-tertiary {
338
- --#{$button}--after--BorderColor: var(--#{$button}--m-tertiary--after--BorderColor);
339
-
340
- color: var(--#{$button}--m-tertiary--Color);
341
- background-color: var(--#{$button}--m-tertiary--BackgroundColor);
342
-
343
- &:hover {
344
- --#{$button}--m-tertiary--Color: var(--#{$button}--m-tertiary--hover--Color);
345
- --#{$button}--m-tertiary--BackgroundColor: var(--#{$button}--m-tertiary--hover--BackgroundColor);
346
- --#{$button}--after--BorderColor: var(--#{$button}--m-tertiary--hover--after--BorderColor);
347
- }
348
-
349
- &:focus {
350
- --#{$button}--m-tertiary--Color: var(--#{$button}--m-tertiary--focus--Color);
351
- --#{$button}--m-tertiary--BackgroundColor: var(--#{$button}--m-tertiary--focus--BackgroundColor);
352
- --#{$button}--after--BorderColor: var(--#{$button}--m-tertiary--focus--after--BorderColor);
353
- }
354
-
355
- &:active,
356
- &.pf-m-active {
357
- --#{$button}--m-tertiary--Color: var(--#{$button}--m-tertiary--active--Color);
358
- --#{$button}--m-tertiary--BackgroundColor: var(--#{$button}--m-tertiary--active--BackgroundColor);
359
- --#{$button}--after--BorderColor: var(--#{$button}--m-tertiary--active--after--BorderColor);
360
- }
332
+ --#{$button}--Color: var(--#{$button}--m-tertiary--Color);
333
+ --#{$button}--BorderColor: var(--#{$button}--m-tertiary--BorderColor);
334
+ --#{$button}__icon--Color: var(--#{$button}--m-tertiary__icon--Color);
335
+ --#{$button}--hover--Color: var(--#{$button}--m-tertiary--hover--Color);
336
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-tertiary--hover--BorderColor);
337
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-tertiary--hover__icon--Color);
338
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-tertiary--m-clicked--Color);
339
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-tertiary--m-clicked--BorderColor);
340
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-tertiary--m-clicked__icon--Color);
361
341
  }
362
342
 
363
- // Link buttons
343
+ // Link
364
344
  &.pf-m-link {
365
- --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-link--disabled--BackgroundColor);
366
- --#{$button}--disabled--Color: var(--#{$button}--m-link--disabled--Color);
367
-
368
- color: var(--#{$button}--m-link--Color);
369
- background-color: var(--#{$button}--m-link--BackgroundColor);
370
-
371
- &:not(.pf-m-inline) {
372
- &:hover,
373
- &:focus,
374
- &:active {
375
- text-decoration: var(--pf-t--global--link--text-decoration--hover); // TODO use variable?
376
- }
377
-
378
- &:hover {
379
- --#{$button}--m-link--Color: var(--#{$button}--m-link--hover--Color);
380
- --#{$button}--m-link--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
381
- }
382
-
383
- &:focus {
384
- --#{$button}--m-link--Color: var(--#{$button}--m-link--focus--Color);
385
- --#{$button}--m-link--BackgroundColor: var(--#{$button}--m-link--focus--BackgroundColor);
386
- }
387
-
388
- &:active,
389
- &.pf-m-active {
390
- --#{$button}--m-link--Color: var(--#{$button}--m-link--active--Color);
391
- --#{$button}--m-link--BackgroundColor: var(--#{$button}--m-link--active--BackgroundColor);
392
- }
393
- }
345
+ --#{$button}--PaddingRight: var(--#{$button}--m-link--PaddingRight);
346
+ --#{$button}--PaddingLeft: var(--#{$button}--m-link--PaddingLeft);
347
+ --#{$button}--Color: var(--#{$button}--m-link--Color);
348
+ --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
349
+ --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
350
+ --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
351
+ --#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
352
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
353
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-link--hover__icon--Color);
354
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
355
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
356
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
394
357
 
395
358
  &.pf-m-inline {
396
359
  --#{$button}--FontSize: var(--#{$button}--m-link--m-inline--FontSize);
360
+ --#{$button}--LineHeight: var(--#{$button}--m-link--m-inline--LineHeight);
361
+ --#{$button}--FontWeight: var(--#{$button}--m-link--m-inline--FontWeight);
362
+ --#{$button}--PaddingTop: var(--#{$button}--m-link--m-inline--PaddingTop);
363
+ --#{$button}--PaddingRight: var(--#{$button}--m-link--m-inline--PaddingRight);
364
+ --#{$button}--PaddingBottom: var(--#{$button}--m-link--m-inline--PaddingBottom);
365
+ --#{$button}--PaddingLeft: var(--#{$button}--m-link--m-inline--PaddingLeft);
366
+ --#{$button}--BackgroundColor: transparent;
397
367
  --#{$button}__progress--Left: var(--#{$button}--m-link--m-inline__progress--Left);
368
+ --#{$button}--hover--TextDecoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
369
+ --#{$button}--hover--BackgroundColor: transparent;
370
+ --#{$button}--m-clicked--BackgroundColor: transparent;
371
+ --#{$button}--disabled--BackgroundColor: transparent;
372
+ --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
373
+ --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
398
374
 
399
375
  display: inline;
400
- padding-block-start: var(--#{$button}--m-link--m-inline--PaddingTop);
401
- padding-block-end: var(--#{$button}--m-link--m-inline--PaddingBottom);
402
- padding-inline-start: var(--#{$button}--m-link--m-inline--PaddingLeft);
403
- padding-inline-end: var(--#{$button}--m-link--m-inline--PaddingRight);
404
376
  text-align: start;
405
377
  white-space: normal;
406
378
  cursor: pointer;
379
+ outline-offset: #{pf-size-prem(2px)};
380
+ }
407
381
 
408
- &:hover {
409
- --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--hover--Color);
410
- }
382
+ &:where(.pf-m-danger) {
383
+ --#{$button}--m-danger--Color: var(--#{$button}--m-link--m-danger--Color);
384
+ --#{$button}--m-danger__icon--Color: var(--#{$button}--m-link--m-danger__icon--Color);
385
+ --#{$button}--m-danger--hover--Color: var(--#{$button}--m-link--m-danger--hover--Color);
386
+ --#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-link--m-danger--hover__icon--Color);
387
+ --#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-link--m-danger--m-clicked--Color);
388
+ --#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-link--m-danger--m-clicked__icon--Color);
389
+ --#{$button}--m-danger--BackgroundColor: transparent;
390
+ --#{$button}--m-danger--hover--BackgroundColor: transparent;
391
+ --#{$button}--m-danger--m-clicked--BackgroundColor: transparent;
411
392
  }
412
393
 
413
394
  &.pf-m-display-lg {
@@ -415,187 +396,161 @@
415
396
  }
416
397
  }
417
398
 
418
- // Danger buttons
419
- &.pf-m-danger {
420
- color: var(--#{$button}--m-danger--Color);
421
- background-color: var(--#{$button}--m-danger--BackgroundColor);
422
-
423
- &:hover {
424
- --#{$button}--m-danger--Color: var(--#{$button}--m-danger--hover--Color);
425
- --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-danger--hover--BackgroundColor);
426
- }
427
-
428
- &:focus {
429
- --#{$button}--m-danger--Color: var(--#{$button}--m-danger--focus--Color);
430
- --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-danger--focus--BackgroundColor);
431
- }
432
-
433
- &:active,
434
- &.pf-m-active {
435
- --#{$button}--m-danger--Color: var(--#{$button}--m-danger--active--Color);
436
- --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-danger--active--BackgroundColor);
437
- }
438
-
439
- // Secondary danger
440
- &.pf-m-secondary {
441
- --#{$button}--m-danger--Color: var(--#{$button}--m-secondary--m-danger--Color);
442
- --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-secondary--m-danger--BackgroundColor);
443
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--m-danger--after--BorderColor);
444
-
445
- &:hover {
446
- --#{$button}--m-secondary--m-danger--Color: var(--#{$button}--m-secondary--m-danger--hover--Color);
447
- --#{$button}--m-secondary--m-danger--BackgroundColor: var(--#{$button}--m-secondary--m-danger--hover--BackgroundColor);
448
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--m-danger--hover--after--BorderColor);
449
- }
450
-
451
- &:focus {
452
- --#{$button}--m-secondary--m-danger--Color: var(--#{$button}--m-secondary--m-danger--focus--Color);
453
- --#{$button}--m-secondary--m-danger--BackgroundColor: var(--#{$button}--m-secondary--m-danger--focus--BackgroundColor);
454
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--m-danger--focus--after--BorderColor);
455
- }
456
-
457
- &:active,
458
- &.pf-m-active {
459
- --#{$button}--m-secondary--m-danger--Color: var(--#{$button}--m-secondary--m-danger--active--Color);
460
- --#{$button}--m-secondary--m-danger--BackgroundColor: var(--#{$button}--m-secondary--m-danger--active--BackgroundColor);
461
- --#{$button}--after--BorderColor: var(--#{$button}--m-secondary--m-danger--active--after--BorderColor);
462
- }
463
- }
464
-
465
- // Link danger
466
- &.pf-m-link {
467
- --#{$button}--m-danger--Color: var(--#{$button}--m-link--m-danger--Color);
468
- --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--BackgroundColor);
469
-
470
- &:hover {
471
- --#{$button}--m-link--m-danger--Color: var(--#{$button}--m-link--m-danger--hover--Color);
472
- --#{$button}--m-link--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--hover--BackgroundColor);
473
- }
474
-
475
- &:focus {
476
- --#{$button}--m-link--m-danger--Color: var(--#{$button}--m-link--m-danger--focus--Color);
477
- --#{$button}--m-link--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--focus--BackgroundColor);
478
- }
479
-
480
- &:active,
481
- &.pf-m-active {
482
- --#{$button}--m-link--m-danger--Color: var(--#{$button}--m-link--m-danger--active--Color);
483
- --#{$button}--m-link--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--active--BackgroundColor);
484
- }
485
- }
486
- }
487
-
488
- // Warning buttons
399
+ // Warning
489
400
  &.pf-m-warning {
490
- color: var(--#{$button}--m-warning--Color);
491
- background-color: var(--#{$button}--m-warning--BackgroundColor);
492
-
493
- &:hover {
494
- --#{$button}--m-warning--Color: var(--#{$button}--m-warning--hover--Color);
495
- --#{$button}--m-warning--BackgroundColor: var(--#{$button}--m-warning--hover--BackgroundColor);
496
- }
497
-
498
- &:focus {
499
- --#{$button}--m-warning--Color: var(--#{$button}--m-warning--focus--Color);
500
- --#{$button}--m-warning--BackgroundColor: var(--#{$button}--m-warning--focus--BackgroundColor);
501
- }
502
-
503
- &:active,
504
- &.pf-m-active {
505
- --#{$button}--m-warning--Color: var(--#{$button}--m-warning--active--Color);
506
- --#{$button}--m-warning--BackgroundColor: var(--#{$button}--m-warning--active--BackgroundColor);
507
- }
401
+ --#{$button}--Color: var(--#{$button}--m-warning--Color);
402
+ --#{$button}--BackgroundColor: var(--#{$button}--m-warning--BackgroundColor);
403
+ --#{$button}__icon--Color: var(--#{$button}--m-warning__icon--Color);
404
+ --#{$button}--hover--Color: var(--#{$button}--m-warning--hover--Color);
405
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-warning--hover--BackgroundColor);
406
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-warning--hover__icon--Color);
407
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-warning--m-clicked--Color);
408
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-warning--m-clicked--BackgroundColor);
409
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-warning--m-clicked__icon--Color);
410
+ }
411
+
412
+ // Danger
413
+ &.pf-m-danger {
414
+ --#{$button}--Color: var(--#{$button}--m-danger--Color);
415
+ --#{$button}--BackgroundColor: var(--#{$button}--m-danger--BackgroundColor);
416
+ --#{$button}__icon--Color: var(--#{$button}--m-danger__icon--Color);
417
+ --#{$button}--hover--Color: var(--#{$button}--m-danger--hover--Color);
418
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-danger--hover--BackgroundColor);
419
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-danger--hover__icon--Color);
420
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-danger--m-clicked--Color);
421
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-danger--m-clicked--BackgroundColor);
422
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-danger--m-clicked__icon--Color);
508
423
  }
509
424
 
425
+ // Control
510
426
  &.pf-m-control {
511
427
  --#{$button}--BorderRadius: var(--#{$button}--m-control--BorderRadius);
512
- --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-control--disabled--BackgroundColor);
513
- --#{$button}--after--BorderWidth: var(--#{$button}--m-control--after--BorderWidth);
514
- --#{$button}--after--BorderColor: var(--#{$button}--m-control--after--BorderTopColor) var(--#{$button}--m-control--after--BorderRightColor) var(--#{$button}--m-control--after--BorderBottomColor) var(--#{$button}--m-control--after--BorderLeftColor);
515
-
516
- color: var(--#{$button}--m-control--Color);
517
- background-color: var(--#{$button}--m-control--BackgroundColor);
518
-
519
- &::after {
520
- border-radius: initial;
521
- }
522
-
523
- &:hover {
524
- --#{$button}--m-control--Color: var(--#{$button}--m-control--hover--Color);
525
- --#{$button}--m-control--BackgroundColor: var(--#{$button}--m-control--hover--BackgroundColor);
526
- --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--hover--after--BorderBottomColor);
527
-
528
- &::after {
529
- border-block-end-width: var(--#{$button}--m-control--hover--after--BorderBottomWidth);
530
- }
531
- }
532
-
533
- &:active,
534
- &.pf-m-active {
535
- --#{$button}--m-control--Color: var(--#{$button}--m-control--active--Color);
536
- --#{$button}--m-control--BackgroundColor: var(--#{$button}--m-control--active--BackgroundColor);
537
- --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--active--after--BorderBottomColor);
538
-
539
- &::after {
540
- border-block-end-width: var(--#{$button}--m-control--active--after--BorderBottomWidth);
541
- }
542
- }
428
+ --#{$button}--PaddingLeft: var(--#{$button}--m-control--PaddingLeft);
429
+ --#{$button}--PaddingRight: var(--#{$button}--m-control--PaddingRight);
430
+ --#{$button}--Color: var(--#{$button}--m-control--Color);
431
+ --#{$button}--BackgroundColor: var(--#{$button}--m-control--BackgroundColor);
432
+ --#{$button}--BorderColor: var(--#{$button}--m-control--BorderColor);
433
+ --#{$button}--BorderWidth: var(--#{$button}--m-control--BorderWidth);
434
+ --#{$button}__icon--Color: var(--#{$button}--m-control__icon--Color);
435
+ --#{$button}--hover--Color: var(--#{$button}--m-control--hover--Color);
436
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-control--hover--BackgroundColor);
437
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-control--hover--BorderColor);
438
+ --#{$button}--hover--BorderWidth: var(--#{$button}--m-control--hover--BorderWidth);
439
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-control--hover__icon--Color);
440
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-control--m-clicked--Color);
441
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-control--m-clicked--BackgroundColor);
442
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-control--m-clicked--BorderColor);
443
+ --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-control--m-clicked--BorderWidth);
444
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
445
+ }
543
446
 
544
- &:focus {
545
- --#{$button}--m-control--Color: var(--#{$button}--m-control--focus--Color);
546
- --#{$button}--m-control--BackgroundColor: var(--#{$button}--m-control--focus--BackgroundColor);
547
- --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--focus--after--BorderBottomColor);
447
+ // Stateful
448
+ &.pf-m-stateful {
449
+ --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
450
+ --#{$button}--PaddingLeft: var(--#{$button}--m-stateful--PaddingLeft);
451
+ --#{$button}--PaddingRight: var(--#{$button}--m-stateful--PaddingRight);
452
+ }
548
453
 
549
- &::after {
550
- border-block-end-width: var(--#{$button}--m-control--focus--after--BorderBottomWidth);
551
- }
552
- }
454
+ // Read
455
+ &.pf-m-read {
456
+ --#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
457
+ --#{$button}--BorderColor: var(--#{$button}--m-read--BorderColor);
458
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-read--hover--BackgroundColor);
459
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-read--hover--BorderColor);
460
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-read--m-clicked--BackgroundColor);
461
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-read--m-clicked--BorderColor);
462
+ }
553
463
 
554
- &.pf-m-expanded {
555
- --#{$button}--m-control--Color: var(--#{$button}--m-control--m-expanded--Color);
556
- --#{$button}--m-control--BackgroundColor: var(--#{$button}--m-control--m-expanded--BackgroundColor);
557
- --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--m-expanded--after--BorderBottomColor);
464
+ // Unread
465
+ &.pf-m-unread {
466
+ --#{$button}--Color: var(--#{$button}--m-unread--Color);
467
+ --#{$button}--BackgroundColor: var(--#{$button}--m-unread--BackgroundColor);
468
+ --#{$button}__icon--Color: var(--#{$button}--m-unread__icon--Color);
469
+ --#{$button}--hover--Color: var(--#{$button}--m-unread--hover--Color);
470
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-unread--hover--BackgroundColor);
471
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-unread--hover__icon--Color);
472
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-unread--m-clicked--Color);
473
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-unread--m-clicked--BackgroundColor);
474
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-unread--m-clicked__icon--Color);
475
+ }
558
476
 
559
- &::after {
560
- border-block-end-width: var(--#{$button}--m-control--m-expanded--after--BorderBottomWidth);
561
- }
562
- }
477
+ // Attention
478
+ &.pf-m-attention {
479
+ --#{$button}--Color: var(--#{$button}--m-attention--Color);
480
+ --#{$button}--BackgroundColor: var(--#{$button}--m-attention--BackgroundColor);
481
+ --#{$button}__icon--Color: var(--#{$button}--m-attention__icon--Color);
482
+ --#{$button}--hover--Color: var(--#{$button}--m-attention--hover--Color);
483
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-attention--hover--BackgroundColor);
484
+ --#{$button}--hover__icon--Color: var(--#{$button}--m-attention--hover__icon--Color);
485
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-attention--m-clicked--Color);
486
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-attention--m-clicked--BackgroundColor);
487
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
563
488
  }
564
489
 
565
490
  // Icon buttons
566
491
  &.pf-m-plain {
567
- --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
568
- --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
569
492
  --#{$button}--PaddingTop: var(--#{$button}--m-plain--PaddingTop);
570
493
  --#{$button}--PaddingRight: var(--#{$button}--m-plain--PaddingRight);
571
494
  --#{$button}--PaddingBottom: var(--#{$button}--m-plain--PaddingBottom);
572
495
  --#{$button}--PaddingLeft: var(--#{$button}--m-plain--PaddingLeft);
496
+ --#{$button}--m-small--PaddingTop: var(--#{$button}--m-plain--m-small--PaddingTop);
497
+ --#{$button}--m-small--PaddingRight: var(--#{$button}--m-plain--m-small--PaddingRight);
498
+ --#{$button}--m-small--PaddingBottom: var(--#{$button}--m-plain--m-small--PaddingBottom);
499
+ --#{$button}--m-small--PaddingLeft: var(--#{$button}--m-plain--m-small--PaddingLeft);
573
500
  --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
574
-
575
- color: var(--#{$button}--m-plain--Color);
576
- background-color: var(--#{$button}--m-plain--BackgroundColor);
501
+ --#{$button}--Color: var(--#{$button}--m-plain--Color);
502
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
503
+ --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
504
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
505
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
506
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
507
+ --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
508
+ --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
577
509
 
578
510
  &.pf-m-no-padding {
579
511
  padding: 0;
580
512
  }
581
513
 
582
- &:hover,
583
- &:focus {
584
- --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
514
+ min-width: var(--#{$button}--m-plain--MinWidth);
515
+ mix-blend-mode: var(--#{$button}--m-plain--MixBlendMode);
516
+ }
585
517
 
586
- mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
587
- }
518
+ &.pf-m-block {
519
+ display: block;
520
+ width: 100%;
521
+ }
588
522
 
589
- &:active,
590
- &.pf-m-active {
591
- --#{$button}--m-plain--Color: var(--#{$button}--m-plain--active--Color);
592
- --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--active--BackgroundColor);
593
- }
523
+ &.pf-m-small {
524
+ --#{$button}--PaddingTop: var(--#{$button}--m-small--PaddingTop);
525
+ --#{$button}--PaddingRight: var(--#{$button}--m-small--PaddingRight);
526
+ --#{$button}--PaddingBottom: var(--#{$button}--m-small--PaddingBottom);
527
+ --#{$button}--PaddingLeft: var(--#{$button}--m-small--PaddingLeft);
528
+ }
594
529
 
595
- &:focus {
596
- --#{$button}--m-plain--Color: var(--#{$button}--m-plain--focus--Color);
597
- --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--focus--BackgroundColor);
598
- }
530
+ &.pf-m-display-lg {
531
+ --#{$button}--PaddingTop: var(--#{$button}--m-display-lg--PaddingTop);
532
+ --#{$button}--PaddingRight: var(--#{$button}--m-display-lg--PaddingRight);
533
+ --#{$button}--PaddingBottom: var(--#{$button}--m-display-lg--PaddingBottom);
534
+ --#{$button}--PaddingLeft: var(--#{$button}--m-display-lg--PaddingLeft);
535
+ --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
536
+ }
537
+
538
+ &:hover,
539
+ &:focus {
540
+ --#{$button}--Color: var(--#{$button}--hover--Color);
541
+ --#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
542
+ --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
543
+ --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
544
+ --#{$button}--TextDecoration: var(--#{$button}--hover--TextDecoration);
545
+ --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
546
+ }
547
+
548
+ &.pf-m-clicked {
549
+ --#{$button}--Color: var(--#{$button}--m-clicked--Color);
550
+ --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
551
+ --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
552
+ --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
553
+ --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
599
554
  }
600
555
 
601
556
  // Disabled buttons
@@ -608,22 +563,23 @@
608
563
  &:disabled,
609
564
  &.pf-m-disabled,
610
565
  &.pf-m-aria-disabled {
611
- &::after {
612
- border-color: var(--#{$button}--disabled--after--BorderColor);
613
- }
566
+ --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
567
+ --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
568
+ --#{$button}--m-primary__c-badge--BorderWidth: 0;
614
569
 
615
570
  color: var(--#{$button}--disabled--Color);
616
571
  background-color: var(--#{$button}--disabled--BackgroundColor);
572
+
573
+ &::after {
574
+ border-color: transparent;
575
+ }
617
576
 
618
- .#{$badge} {
619
- --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
620
- --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
621
- --#{$button}--m-primary__c-badge--BorderWidth: 0;
577
+ .#{$button}__icon {
578
+ color: var(--#{$button}--disabled__icon--Color);
622
579
  }
623
580
  }
624
581
 
625
582
  &.pf-m-aria-disabled {
626
- --#{$button}--after--BorderWidth: 0;
627
583
  --#{$button}--m-link--m-inline--hover--TextDecoration: none;
628
584
 
629
585
  cursor: default;
@@ -645,7 +601,6 @@
645
601
  }
646
602
 
647
603
  &.pf-m-plain {
648
- --#{$button}--m-plain--Color: var(--#{$button}--m-in-progress--m-plain--Color);
649
604
  --#{$button}__progress--Left: var(--#{$button}--m-in-progress--m-plain__progress--Left);
650
605
  --#{$button}__progress--TranslateX: var(--#{$button}--m-in-progress--m-plain__progress--TranslateX);
651
606
 
@@ -657,6 +612,8 @@
657
612
  }
658
613
 
659
614
  .#{$button}__icon {
615
+ color: var(--#{$button}__icon--Color);
616
+
660
617
  &.pf-m-start {
661
618
  margin-inline-end: var(--#{$button}__icon--m-start--MarginRight);
662
619
  }
@@ -671,6 +628,7 @@
671
628
  inset-block-start: var(--#{$button}__progress--Top);
672
629
  inset-inline-start: var(--#{$button}__progress--Left);
673
630
  line-height: 1;
631
+ color: var(--#{$button}__progress--Color);
674
632
  transform: translate(var(--#{$button}__progress--TranslateX), var(--#{$button}__progress--TranslateY));
675
633
 
676
634
  .#{$spinner} {
@@ -683,10 +641,3 @@
683
641
  align-items: center;
684
642
  margin-inline-start: var(--#{$button}__count--MarginLeft);
685
643
  }
686
-
687
- // // stylelint-disable no-invalid-position-at-import-rule
688
- // @import "themes/dark/button";
689
-
690
- // @include pf-v5-theme-dark {
691
- // @include pf-v5-theme-dark-button;
692
- // }