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

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 (18) 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 +98 -46
  5. package/base/tokens/_tokens-default.scss +49 -48
  6. package/base/tokens/_tokens-font.scss +65 -0
  7. package/components/Button/button.css +137 -177
  8. package/components/Button/button.scss +157 -139
  9. package/package.json +1 -1
  10. package/patternfly-base-no-globals-theme-dark-unversioned.css +98 -46
  11. package/patternfly-base-no-globals.css +98 -46
  12. package/patternfly-base-theme-dark-unversioned.css +110 -58
  13. package/patternfly-base.css +110 -58
  14. package/patternfly-no-globals.css +235 -230
  15. package/patternfly-theme-dark-unversioned.css +247 -242
  16. package/patternfly.css +247 -242
  17. package/patternfly.min.css +1 -1
  18. 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
+ // }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.2",
4
+ "version": "6.0.0-alpha.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -432,26 +432,27 @@
432
432
  */
433
433
  :root {
434
434
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
435
- --pf-t--global--spacer--800: 80;
436
- --pf-t--global--spacer--700: 64;
437
- --pf-t--global--spacer--600: 48;
438
- --pf-t--global--spacer--500: 32;
439
- --pf-t--global--spacer--400: 24;
440
- --pf-t--global--spacer--300: 16;
441
- --pf-t--global--spacer--200: 8;
442
- --pf-t--global--spacer--100: 4;
443
- --pf-t--global--icon--size--400: 56;
444
- --pf-t--global--icon--size--300: 24;
445
- --pf-t--global--icon--size--200: 16;
446
- --pf-t--global--icon--size--100: 12;
447
- --pf-t--global--border--width--300: 3;
448
- --pf-t--global--border--width--200: 2;
449
- --pf-t--global--border--width--100: 1;
450
- --pf-t--global--border--radius--500: 999;
451
- --pf-t--global--border--radius--400: 24;
452
- --pf-t--global--border--radius--300: 16;
453
- --pf-t--global--border--radius--200: 6;
454
- --pf-t--global--border--radius--100: 4;
435
+ --pf-t--global--spacer--800: 80px;
436
+ --pf-t--global--spacer--700: 64px;
437
+ --pf-t--global--spacer--600: 48px;
438
+ --pf-t--global--spacer--500: 32px;
439
+ --pf-t--global--spacer--400: 24px;
440
+ --pf-t--global--spacer--300: 16px;
441
+ --pf-t--global--spacer--200: 8px;
442
+ --pf-t--global--spacer--100: 4px;
443
+ --pf-t--global--icon--size--400: 56px;
444
+ --pf-t--global--icon--size--300: 24px;
445
+ --pf-t--global--icon--size--200: 16px;
446
+ --pf-t--global--icon--size--100: 12px;
447
+ --pf-t--global--border--width--300: 3px;
448
+ --pf-t--global--border--width--200: 2px;
449
+ --pf-t--global--border--width--100: 1px;
450
+ --pf-t--global--border--radius--500: 999px;
451
+ --pf-t--global--border--radius--400: 24px;
452
+ --pf-t--global--border--radius--300: 16px;
453
+ --pf-t--global--border--radius--200: 6px;
454
+ --pf-t--global--border--radius--100: 4px;
455
+ --pf-t--global--border--radius--000: 0px;
455
456
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
456
457
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
457
458
  --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
@@ -509,37 +510,38 @@
509
510
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
510
511
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
511
512
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
512
- --pf-t--global--spacer--sm: 8;
513
- --pf-t--global--spacer--xl: 32;
514
- --pf-t--global--spacer--xs: 4;
515
- --pf-t--global--spacer--2xl: 48;
516
- --pf-t--global--spacer--lg: 24;
517
- --pf-t--global--spacer--md: 16;
518
- --pf-t--global--spacer--3xl: 64;
519
- --pf-t--global--spacer--4xl: 80;
513
+ --pf-t--global--spacer--sm: 8px;
514
+ --pf-t--global--spacer--xl: 32px;
515
+ --pf-t--global--spacer--xs: 4px;
516
+ --pf-t--global--spacer--2xl: 48px;
517
+ --pf-t--global--spacer--lg: 24px;
518
+ --pf-t--global--spacer--md: 16px;
519
+ --pf-t--global--spacer--3xl: 64px;
520
+ --pf-t--global--spacer--4xl: 80px;
520
521
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
521
522
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
522
523
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
523
- --pf-t--global--icon--size--sm: 12;
524
- --pf-t--global--icon--size--md: 16;
525
- --pf-t--global--icon--size--lg: 24;
526
- --pf-t--global--icon--size--xl: 56;
524
+ --pf-t--global--icon--size--sm: 12px;
525
+ --pf-t--global--icon--size--md: 16px;
526
+ --pf-t--global--icon--size--lg: 24px;
527
+ --pf-t--global--icon--size--xl: 56px;
527
528
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
528
529
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
529
- --pf-t--global--border--width--divider--default: 1;
530
- --pf-t--global--border--width--divider--hover: 1;
531
- --pf-t--global--border--width--divider--active: 1;
532
- --pf-t--global--border--width--control--hover: 1;
533
- --pf-t--global--border--width--control--active: 2;
534
- --pf-t--global--border--width--control--default: 1;
535
- --pf-t--global--border--width--button--hover: 2;
536
- --pf-t--global--border--width--button--default: 1;
537
- --pf-t--global--border--width--button--active: 2;
538
- --pf-t--global--border--radius--pill: 999;
539
- --pf-t--global--border--radius--tiny: 4;
540
- --pf-t--global--border--radius--medium: 16;
541
- --pf-t--global--border--radius--large: 24;
542
- --pf-t--global--border--radius--small: 6;
530
+ --pf-t--global--border--width--divider--default: 1px;
531
+ --pf-t--global--border--width--divider--hover: 1px;
532
+ --pf-t--global--border--width--divider--active: 1px;
533
+ --pf-t--global--border--width--control--hover: 1px;
534
+ --pf-t--global--border--width--control--active: 2px;
535
+ --pf-t--global--border--width--control--default: 1px;
536
+ --pf-t--global--border--width--button--hover: 2px;
537
+ --pf-t--global--border--width--button--default: 1px;
538
+ --pf-t--global--border--width--button--active: 2px;
539
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
540
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
541
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
542
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
543
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
544
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000);
543
545
  --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
544
546
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
545
547
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
@@ -648,6 +650,7 @@
648
650
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
649
651
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
650
652
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
653
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
651
654
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
652
655
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
653
656
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -766,6 +769,55 @@
766
769
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
767
770
  }
768
771
 
772
+ :root {
773
+ --pf-t--global--font--family--100: redhattext;
774
+ --pf-t--global--font--family--200: redhatdisplay;
775
+ --pf-t--global--font--family--300: redhatmono;
776
+ --pf-t--global--font--line-height--100: 1.3;
777
+ --pf-t--global--font--line-height--200: 1.5;
778
+ --pf-t--global--font--weight--body--100: 400;
779
+ --pf-t--global--font--weight--body--200: 600;
780
+ --pf-t--global--font--weight--heading--100: 700;
781
+ --pf-t--global--font--weight--heading--200: 700;
782
+ --pf-t--global--font--size--body--100: 12px;
783
+ --pf-t--global--font--size--body--200: 14px;
784
+ --pf-t--global--font--size--body--300: 16px;
785
+ --pf-t--global--font--size--heading--100: 16px;
786
+ --pf-t--global--font--size--heading--200: 18px;
787
+ --pf-t--global--font--size--heading--300: 20px;
788
+ --pf-t--global--font--size--heading--400: 24px;
789
+ --pf-t--global--font--size--heading--500: 28px;
790
+ --pf-t--global--font--size--heading--600: 36px;
791
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
792
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
793
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
794
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
795
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
796
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
797
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
798
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
799
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
800
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
801
+ --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
802
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
803
+ --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
804
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
805
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
806
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
807
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
808
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
809
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
810
+ --pf-t--global--text-decoration--100: none;
811
+ --pf-t--global--text-decoration--200: underline;
812
+ --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
813
+ --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
814
+ --pf-t--global--mix-blend-mode--100: multiply;
815
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
816
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
817
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
818
+ --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
819
+ }
820
+
769
821
  /**
770
822
  * Do not edit directly
771
823
  * Generated on Mon, 14 Aug 2023 18:11:22 GMT