@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.4

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 (23) hide show
  1. package/base/_globals.scss +14 -12
  2. package/base/_variables.scss +1 -0
  3. package/base/patternfly-globals.css +12 -12
  4. package/base/patternfly-variables.css +113 -46
  5. package/base/tokens/_tokens-default.scss +49 -48
  6. package/base/tokens/_tokens-font.scss +94 -0
  7. package/components/Button/button.css +137 -177
  8. package/components/Button/button.scss +157 -139
  9. package/components/Table/table.css +90 -89
  10. package/components/Table/table.scss +92 -95
  11. package/components/Toolbar/toolbar.css +0 -1
  12. package/components/Toolbar/toolbar.scss +0 -1
  13. package/docs/demos/Page/examples/Penta.md +672 -0
  14. package/package.json +1 -1
  15. package/patternfly-base-no-globals-theme-dark-unversioned.css +113 -46
  16. package/patternfly-base-no-globals.css +113 -46
  17. package/patternfly-base-theme-dark-unversioned.css +125 -58
  18. package/patternfly-base.css +125 -58
  19. package/patternfly-no-globals.css +340 -320
  20. package/patternfly-theme-dark-unversioned.css +352 -332
  21. package/patternfly.css +352 -332
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/components/Button/button.scss CHANGED
@@ -2,187 +2,193 @@
2
2
 
3
3
  .#{$button} {
4
4
  // Component
5
- --#{$button}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
6
- --#{$button}--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$button}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
8
- --#{$button}--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$button}--LineHeight: var(--#{$pf-global}--LineHeight--md);
10
- --#{$button}--FontWeight: var(--#{$pf-global}--FontWeight--normal);
11
- --#{$button}--FontSize: var(--#{$pf-global}--FontSize--md);
5
+ --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
6
+ --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
7
+ --#{$button}--PaddingBottom: var(--pf-t--global--spacer--sm);
8
+ --#{$button}--PaddingLeft: var(--pf-t--global--spacer--lg);
9
+ --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
10
+ --#{$button}--FontWeight: var(--pf-t--global--font--weight--body);
11
+ --#{$button}--FontSize: var(--pf-t--global--font--size--body--md);
12
12
  --#{$button}--BackgroundColor: transparent;
13
- --#{$button}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
14
- --#{$button}--after--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
13
+ --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
14
+ --#{$button}--after--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --#{$button}--after--BorderColor: transparent;
16
- --#{$button}--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
16
+ --#{$button}--after--BorderWidth: var(--pf-t--global--border--width--button--default);
17
17
 
18
18
  // Hover state variables
19
- --#{$button}--hover--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
19
+ --#{$button}--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
20
20
 
21
21
  // Focus state variables
22
- --#{$button}--focus--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
22
+ --#{$button}--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
23
23
 
24
24
  // Active state variables
25
- --#{$button}--active--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
25
+ --#{$button}--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
26
26
 
27
27
  // Disabled state variables
28
- --#{$button}--disabled--Color: var(--#{$pf-global}--disabled-color--100);
29
- --#{$button}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
28
+ --#{$button}--disabled--Color: var(--pf-t--global--text--color--disabled--default);
29
+ --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30
30
  --#{$button}--disabled--after--BorderColor: transparent;
31
31
 
32
32
  // Primary btn
33
- --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--100);
34
- --#{$button}--m-primary--Color: var(--#{$pf-global}--Color--light-100);
35
- --#{$button}--m-primary--hover--BackgroundColor: var(--#{$pf-global}--primary-color--200);
36
- --#{$button}--m-primary--hover--Color: var(--#{$pf-global}--Color--light-100);
37
- --#{$button}--m-primary--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
38
- --#{$button}--m-primary--focus--Color: var(--#{$pf-global}--Color--light-100);
39
- --#{$button}--m-primary--active--BackgroundColor: var(--#{$pf-global}--primary-color--200);
40
- --#{$button}--m-primary--active--Color: var(--#{$pf-global}--Color--light-100);
33
+ --#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
34
+ --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
35
+ --#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
36
+ --#{$button}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
37
+ --#{$button}--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
38
+ --#{$button}--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
39
+ --#{$button}--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
40
+ --#{$button}--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
41
41
 
42
42
  // Secondary btn
43
43
  --#{$button}--m-secondary--BackgroundColor: transparent;
44
- --#{$button}--m-secondary--after--BorderColor: var(--#{$pf-global}--primary-color--100);
45
- --#{$button}--m-secondary--Color: var(--#{$pf-global}--primary-color--100);
44
+ --#{$button}--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
45
+ --#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
46
46
  --#{$button}--m-secondary--hover--BackgroundColor: transparent;
47
- --#{$button}--m-secondary--hover--after--BorderColor: var(--#{$pf-global}--primary-color--100);
48
- --#{$button}--m-secondary--hover--Color: var(--#{$pf-global}--primary-color--100);
47
+ --#{$button}--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
48
+ --#{$button}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
49
49
  --#{$button}--m-secondary--focus--BackgroundColor: transparent;
50
- --#{$button}--m-secondary--focus--after--BorderColor: var(--#{$pf-global}--primary-color--100);
51
- --#{$button}--m-secondary--focus--Color: var(--#{$pf-global}--primary-color--100);
50
+ --#{$button}--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
51
+ --#{$button}--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
52
52
  --#{$button}--m-secondary--active--BackgroundColor: transparent;
53
- --#{$button}--m-secondary--active--after--BorderColor: var(--#{$pf-global}--primary-color--100);
54
- --#{$button}--m-secondary--active--Color: var(--#{$pf-global}--primary-color--100);
53
+ --#{$button}--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
54
+ --#{$button}--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
55
55
 
56
56
  // Secondary danger
57
57
  --#{$button}--m-secondary--m-danger--BackgroundColor: transparent;
58
- --#{$button}--m-secondary--m-danger--Color: var(--#{$pf-global}--danger-color--100);
59
- --#{$button}--m-secondary--m-danger--after--BorderColor: var(--#{$pf-global}--danger-color--100);
58
+ --#{$button}--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
59
+ --#{$button}--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
60
60
  --#{$button}--m-secondary--m-danger--hover--BackgroundColor: transparent;
61
- --#{$button}--m-secondary--m-danger--hover--Color: var(--#{$pf-global}--danger-color--200);
62
- --#{$button}--m-secondary--m-danger--hover--after--BorderColor: var(--#{$pf-global}--danger-color--100);
61
+ --#{$button}--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
62
+ --#{$button}--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
63
63
  --#{$button}--m-secondary--m-danger--focus--BackgroundColor: transparent;
64
- --#{$button}--m-secondary--m-danger--focus--Color: var(--#{$pf-global}--danger-color--200);
65
- --#{$button}--m-secondary--m-danger--focus--after--BorderColor: var(--#{$pf-global}--danger-color--100);
64
+ --#{$button}--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
65
+ --#{$button}--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
66
66
  --#{$button}--m-secondary--m-danger--active--BackgroundColor: transparent;
67
- --#{$button}--m-secondary--m-danger--active--Color: var(--#{$pf-global}--danger-color--200);
68
- --#{$button}--m-secondary--m-danger--active--after--BorderColor: var(--#{$pf-global}--danger-color--100);
67
+ --#{$button}--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
68
+ --#{$button}--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
69
69
 
70
70
  // Tertiary btn
71
71
  --#{$button}--m-tertiary--BackgroundColor: transparent;
72
- --#{$button}--m-tertiary--after--BorderColor: var(--#{$pf-global}--Color--100);
73
- --#{$button}--m-tertiary--Color: var(--#{$pf-global}--Color--100);
72
+ --#{$button}--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
73
+ --#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--regular);
74
74
  --#{$button}--m-tertiary--hover--BackgroundColor: transparent;
75
- --#{$button}--m-tertiary--hover--after--BorderColor: var(--#{$pf-global}--Color--100);
76
- --#{$button}--m-tertiary--hover--Color: var(--#{$pf-global}--Color--100);
75
+ --#{$button}--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
76
+ --#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
77
77
  --#{$button}--m-tertiary--focus--BackgroundColor: transparent;
78
- --#{$button}--m-tertiary--focus--after--BorderColor: var(--#{$pf-global}--Color--100);
79
- --#{$button}--m-tertiary--focus--Color: var(--#{$pf-global}--Color--100);
78
+ --#{$button}--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
79
+ --#{$button}--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
80
80
  --#{$button}--m-tertiary--active--BackgroundColor: transparent;
81
- --#{$button}--m-tertiary--active--after--BorderColor: var(--#{$pf-global}--Color--100);
82
- --#{$button}--m-tertiary--active--Color: var(--#{$pf-global}--Color--100);
81
+ --#{$button}--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
82
+ --#{$button}--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
83
83
 
84
84
  // Warning btn
85
- --#{$button}--m-warning--BackgroundColor: var(--#{$pf-global}--warning-color--100);
86
- --#{$button}--m-warning--Color: var(--#{$pf-global}--Color--dark-100);
87
- --#{$button}--m-warning--hover--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
88
- --#{$button}--m-warning--hover--Color: var(--#{$pf-global}--Color--dark-100);
89
- --#{$button}--m-warning--focus--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
90
- --#{$button}--m-warning--focus--Color: var(--#{$pf-global}--Color--dark-100);
91
- --#{$button}--m-warning--active--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
92
- --#{$button}--m-warning--active--Color: var(--#{$pf-global}--Color--dark-100);
85
+ // TODO need active state text?
86
+ --#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
87
+ --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
88
+ --#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
89
+ --#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
90
+ --#{$button}--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
91
+ --#{$button}--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
92
+ --#{$button}--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
93
+ --#{$button}--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
93
94
 
94
95
  // Danger btn
95
- --#{$button}--m-danger--BackgroundColor: var(--#{$pf-global}--danger-color--100);
96
- --#{$button}--m-danger--Color: var(--#{$pf-global}--Color--light-100);
97
- --#{$button}--m-danger--hover--BackgroundColor: var(--#{$pf-global}--danger-color--200);
98
- --#{$button}--m-danger--hover--Color: var(--#{$pf-global}--Color--light-100);
99
- --#{$button}--m-danger--focus--BackgroundColor: var(--#{$pf-global}--danger-color--200);
100
- --#{$button}--m-danger--focus--Color: var(--#{$pf-global}--Color--light-100);
101
- --#{$button}--m-danger--active--BackgroundColor: var(--#{$pf-global}--danger-color--200);
102
- --#{$button}--m-danger--active--Color: var(--#{$pf-global}--Color--light-100);
96
+ // TODO need active state text?
97
+ --#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
98
+ --#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
99
+ --#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
100
+ --#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
101
+ --#{$button}--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
102
+ --#{$button}--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
103
+ --#{$button}--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
104
+ --#{$button}--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
103
105
 
104
106
  // Link btn
105
107
  --#{$button}--m-link--BackgroundColor: transparent;
106
- --#{$button}--m-link--Color: var(--#{$pf-global}--link--Color);
108
+ --#{$button}--m-link--Color: var(--pf-t--global--text--color--link--default);
107
109
  --#{$button}--m-link--hover--BackgroundColor: transparent;
108
- --#{$button}--m-link--hover--Color: var(--#{$pf-global}--link--Color--hover);
110
+ --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
109
111
  --#{$button}--m-link--focus--BackgroundColor: transparent;
110
- --#{$button}--m-link--focus--Color: var(--#{$pf-global}--link--Color--hover);
112
+ --#{$button}--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
111
113
  --#{$button}--m-link--active--BackgroundColor: transparent;
112
- --#{$button}--m-link--active--Color: var(--#{$pf-global}--link--Color--hover);
114
+ --#{$button}--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
113
115
  --#{$button}--m-link--disabled--BackgroundColor: transparent;
114
- --#{$button}--m-link--disabled--Color: var(--#{$pf-global}--disabled-color--100);
116
+ --#{$button}--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
117
+ --#{$button}--m-link--not--m-inline--TextDecoration: none;
115
118
  --#{$button}--m-link--m-inline--FontSize: inherit;
116
- --#{$button}--m-link--m-inline--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
117
- --#{$button}--m-link--m-inline--hover--Color: var(--#{$pf-global}--link--Color--hover);
119
+ --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
120
+ --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
118
121
  --#{$button}--m-link--m-inline--PaddingTop: 0;
119
122
  --#{$button}--m-link--m-inline--PaddingRight: 0;
120
123
  --#{$button}--m-link--m-inline--PaddingBottom: 0;
121
124
  --#{$button}--m-link--m-inline--PaddingLeft: 0;
122
- --#{$button}--m-link--m-inline__progress--Left: var(--#{$pf-global}--spacer--xs);
123
- --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--#{$pf-global}--spacer--sm));
125
+ --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
126
+ --#{$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));
124
127
 
125
128
  // Link danger
126
129
  --#{$button}--m-link--m-danger--BackgroundColor: transparent;
127
- --#{$button}--m-link--m-danger--Color: var(--#{$pf-global}--danger-color--100);
130
+ --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
128
131
  --#{$button}--m-link--m-danger--hover--BackgroundColor: transparent;
129
- --#{$button}--m-link--m-danger--hover--Color: var(--#{$pf-global}--danger-color--200);
132
+ --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
130
133
  --#{$button}--m-link--m-danger--focus--BackgroundColor: transparent;
131
- --#{$button}--m-link--m-danger--focus--Color: var(--#{$pf-global}--danger-color--200);
134
+ --#{$button}--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
132
135
  --#{$button}--m-link--m-danger--active--BackgroundColor: transparent;
133
- --#{$button}--m-link--m-danger--active--Color: var(--#{$pf-global}--danger-color--200);
136
+ --#{$button}--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
134
137
 
135
138
  // Plain btn
136
- --#{$button}--m-plain--BackgroundColor: transparent;
137
- --#{$button}--m-plain--Color: var(--#{$pf-global}--Color--200);
138
- --#{$button}--m-plain--hover--BackgroundColor: transparent;
139
- --#{$button}--m-plain--hover--Color: var(--#{$pf-global}--Color--100);
139
+ --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
140
+ --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
141
+ --#{$button}--m-plain--hover--BackgroundColor: --pf-t--global--background--color--action--plain--hover;
142
+ --#{$button}--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
140
143
  --#{$button}--m-plain--focus--BackgroundColor: transparent;
141
- --#{$button}--m-plain--focus--Color: var(--#{$pf-global}--Color--100);
144
+ --#{$button}--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
142
145
  --#{$button}--m-plain--active--BackgroundColor: transparent;
143
- --#{$button}--m-plain--active--Color: var(--#{$pf-global}--Color--100);
144
- --#{$button}--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
146
+ --#{$button}--m-plain--active--Color: var(--pf-t--global--text--color--regular);
147
+ --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
145
148
  --#{$button}--m-plain--disabled--BackgroundColor: transparent;
146
149
 
150
+ // TODO this token needs to be added to figma
151
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
152
+
147
153
  // Control Button
148
- --#{$button}--m-control--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
149
- --#{$button}--m-control--Color: var(--#{$pf-global}--Color--100);
154
+ --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
155
+ --#{$button}--m-control--Color: var(--pf-t--global--text--color--subtle);
150
156
  --#{$button}--m-control--BorderRadius: 0;
151
- --#{$button}--m-control--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
152
- --#{$button}--m-control--after--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
153
- --#{$button}--m-control--after--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
154
- --#{$button}--m-control--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
155
- --#{$button}--m-control--after--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
156
- --#{$button}--m-control--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
157
- --#{$button}--m-control--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
158
- --#{$button}--m-control--hover--Color: var(--#{$pf-global}--Color--100);
159
- --#{$button}--m-control--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
160
- --#{$button}--m-control--hover--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
161
- --#{$button}--m-control--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
162
- --#{$button}--m-control--active--Color: var(--#{$pf-global}--Color--100);
163
- --#{$button}--m-control--active--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
164
- --#{$button}--m-control--active--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
165
- --#{$button}--m-control--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
166
- --#{$button}--m-control--focus--Color: var(--#{$pf-global}--Color--100);
167
- --#{$button}--m-control--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
168
- --#{$button}--m-control--focus--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
169
- --#{$button}--m-control--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
170
- --#{$button}--m-control--m-expanded--Color: var(--#{$pf-global}--Color--100);
171
- --#{$button}--m-control--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
172
- --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
157
+ --#{$button}--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
158
+ --#{$button}--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
159
+ --#{$button}--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
160
+ --#{$button}--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
161
+ --#{$button}--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
162
+ --#{$button}--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
163
+ --#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
164
+ --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
165
+ --#{$button}--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
166
+ --#{$button}--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
167
+ --#{$button}--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
168
+ --#{$button}--m-control--active--Color: var(--pf-t--global--text--color--regular);
169
+ --#{$button}--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
170
+ --#{$button}--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
171
+ --#{$button}--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
172
+ --#{$button}--m-control--focus--Color: var(--pf-t--global--text--color--regular);
173
+ --#{$button}--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
174
+ --#{$button}--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
175
+ --#{$button}--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
176
+ --#{$button}--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
177
+ --#{$button}--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
178
+ --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
173
179
  --#{$button}--m-small--FontSize: var(--#{$pf-global}--FontSize--sm);
174
180
 
175
181
  // CTA Button
176
- --#{$button}--m-display-lg--PaddingTop: var(--#{$pf-global}--spacer--md);
177
- --#{$button}--m-display-lg--PaddingRight: var(--#{$pf-global}--spacer--xl);
178
- --#{$button}--m-display-lg--PaddingBottom: var(--#{$pf-global}--spacer--md);
179
- --#{$button}--m-display-lg--PaddingLeft: var(--#{$pf-global}--spacer--xl);
180
- --#{$button}--m-display-lg--FontWeight: var(--#{$pf-global}--FontWeight--bold);
181
- --#{$button}--m-link--m-display-lg--FontSize: var(--#{$pf-global}--FontSize--lg);
182
+ --#{$button}--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
183
+ --#{$button}--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
184
+ --#{$button}--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
185
+ --#{$button}--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
186
+ --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
187
+ --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
182
188
 
183
189
  // Styles for an icon in button
184
- --#{$button}__icon--m-start--MarginRight: var(--#{$pf-global}--spacer--xs);
185
- --#{$button}__icon--m-end--MarginLeft: var(--#{$pf-global}--spacer--xs);
190
+ --#{$button}__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
191
+ --#{$button}__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
186
192
 
187
193
  // Progress
188
194
  --#{$button}__progress--width: calc(var(--#{$pf-global}--icon--FontSize--md) + var(--#{$pf-global}--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -190,23 +196,23 @@
190
196
  --#{$button}__progress--TranslateY: -50%;
191
197
  --#{$button}__progress--TranslateX: 0;
192
198
  --#{$button}__progress--Top: 50%;
193
- --#{$button}__progress--Left: var(--#{$pf-global}--spacer--md);
199
+ --#{$button}__progress--Left: var(--pf-t--global--spacer--md);
194
200
  --#{$button}--m-progress--TransitionProperty: padding;
195
201
  --#{$button}--m-progress--TransitionDuration: var(--#{$pf-global}--TransitionDuration);
196
- --#{$button}--m-progress--PaddingRight: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width) / 2);
197
- --#{$button}--m-progress--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width) / 2);
198
- --#{$button}--m-in-progress--PaddingRight: var(--#{$pf-global}--spacer--md);
199
- --#{$button}--m-in-progress--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width));
200
- --#{$button}--m-in-progress--m-plain--Color: var(--#{$pf-global}--primary-color--100);
202
+ --#{$button}--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
203
+ --#{$button}--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
204
+ --#{$button}--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
205
+ --#{$button}--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width));
206
+ --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
201
207
  --#{$button}--m-in-progress--m-plain__progress--Left: 50%;
202
208
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
203
209
 
204
210
  // Count
205
211
  --#{$button}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
206
- --#{$button}--disabled__c-badge--Color: var(--#{$pf-global}--Color--dark-100);
207
- --#{$button}--disabled__c-badge--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
208
- --#{$button}--m-primary__c-badge--BorderColor: var(--#{$pf-global}--BorderColor--300);
209
- --#{$button}--m-primary__c-badge--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); // used only for primary, unread, not disabled
212
+ --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
213
+ --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
214
+ --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
215
+ --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300); // used only for primary, unread, not disabled
210
216
 
211
217
  position: relative;
212
218
  display: inline-block;
@@ -285,11 +291,11 @@
285
291
  --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--focus--BackgroundColor);
286
292
  }
287
293
 
288
- &:active,
289
- &.pf-m-active {
290
- --#{$button}--m-primary--Color: var(--#{$button}--m-primary--active--Color);
291
- --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--active--BackgroundColor);
292
- }
294
+ // &:active,
295
+ // &.pf-m-active {
296
+ // --#{$button}--m-primary--Color: var(--#{$button}--m-primary--active--Color);
297
+ // --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--active--BackgroundColor);
298
+ // }
293
299
 
294
300
  .#{$badge}.pf-m-unread {
295
301
  border: var(--#{$button}--m-primary__c-badge--BorderWidth) solid var(--#{$button}--m-primary__c-badge--BorderColor);
@@ -359,6 +365,12 @@
359
365
  background-color: var(--#{$button}--m-link--BackgroundColor);
360
366
 
361
367
  &:not(.pf-m-inline) {
368
+ &:hover,
369
+ &:focus,
370
+ &:active {
371
+ text-decoration: var(--pf-t--global--link--text-decoration--hover); // TODO use variable?
372
+ }
373
+
362
374
  &:hover {
363
375
  --#{$button}--m-link--Color: var(--#{$button}--m-link--hover--Color);
364
376
  --#{$button}--m-link--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
@@ -388,8 +400,6 @@
388
400
 
389
401
  &:hover {
390
402
  --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--hover--Color);
391
-
392
- text-decoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
393
403
  }
394
404
  }
395
405
 
@@ -549,13 +559,21 @@
549
559
  &.pf-m-plain {
550
560
  --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
551
561
  --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
562
+ --#{$button}--PaddingTop: var(--#{$button}--m-plain--PaddingTop);
563
+ --#{$button}--PaddingRight: var(--#{$button}--m-plain--PaddingRight);
564
+ --#{$button}--PaddingBottom: var(--#{$button}--m-plain--PaddingBottom);
565
+ --#{$button}--PaddingLeft: var(--#{$button}--m-plain--PaddingLeft);
566
+ --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
552
567
 
553
568
  color: var(--#{$button}--m-plain--Color);
554
569
  background-color: var(--#{$button}--m-plain--BackgroundColor);
555
570
 
556
- &:hover {
557
- --#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
571
+ &:hover,
572
+ &:focus,
573
+ &:active {
558
574
  --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
575
+
576
+ mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
559
577
  }
560
578
 
561
579
  &:active,
@@ -656,9 +674,9 @@
656
674
  margin-left: var(--#{$button}__count--MarginLeft);
657
675
  }
658
676
 
659
- // stylelint-disable no-invalid-position-at-import-rule
660
- @import "themes/dark/button";
677
+ // // stylelint-disable no-invalid-position-at-import-rule
678
+ // @import "themes/dark/button";
661
679
 
662
- @include pf-v5-theme-dark {
663
- @include pf-v5-theme-dark-button;
664
- }
680
+ // @include pf-v5-theme-dark {
681
+ // @include pf-v5-theme-dark-button;
682
+ // }