@patternfly/patternfly 6.0.0-alpha.112 → 6.0.0-alpha.113

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 (9) hide show
  1. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  2. package/docs/utilities/Text/examples/Text.md +63 -61
  3. package/package.json +1 -1
  4. package/patternfly-addons.css +429 -764
  5. package/utilities/BackgroundColor/BackgroundColor.css +36 -283
  6. package/utilities/BackgroundColor/BackgroundColor.scss +6 -45
  7. package/utilities/Text/text.css +393 -481
  8. package/utilities/Text/text.scss +69 -90
  9. package/docs/utilities/Text/examples/Text.css +0 -0
package/utilities/BackgroundColor/BackgroundColor.css CHANGED
@@ -1,314 +1,67 @@
1
- .pf-v6-u-background-color-100 {
2
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
1
+ .pf-v6-u-background-color-disabled {
2
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
3
3
  }
4
4
 
5
- .pf-v6-u-background-color-200 {
6
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
5
+ .pf-v6-u-background-color-inverse {
6
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
7
7
  }
8
8
 
9
- .pf-v6-u-background-color-active-color-100 {
10
- background-color: var(--pf-v6-global--active-color--100) !important;
11
- }
12
-
13
- .pf-v6-u-background-color-active-color-300 {
14
- background-color: var(--pf-v6-global--active-color--300) !important;
15
- }
16
-
17
- .pf-v6-u-background-color-primary-color-200 {
18
- background-color: var(--pf-v6-global--primary-color--200) !important;
19
- }
20
-
21
- .pf-v6-u-background-color-dark-100 {
22
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
23
- }
24
-
25
- .pf-v6-u-background-color-dark-200 {
26
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
27
- }
28
-
29
- .pf-v6-u-background-color-dark-300 {
30
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
31
- }
32
-
33
- .pf-v6-u-background-color-dark-400 {
34
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
35
- }
36
-
37
- .pf-v6-u-background-color-disabled-color-200 {
38
- background-color: var(--pf-v6-global--disabled-color--200) !important;
39
- }
40
-
41
- .pf-v6-u-background-color-disabled-color-300 {
42
- background-color: var(--pf-v6-global--disabled-color--300) !important;
43
- }
44
-
45
- .pf-v6-u-background-color-default {
46
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
47
- }
48
-
49
- .pf-v6-u-background-color-success {
50
- background-color: var(--pf-v6-global--palette--green-50) !important;
51
- }
52
-
53
- .pf-v6-u-background-color-info {
54
- background-color: var(--pf-v6-global--palette--blue-50) !important;
55
- }
56
-
57
- .pf-v6-u-background-color-warning {
58
- background-color: var(--pf-v6-global--palette--gold-50) !important;
59
- }
60
-
61
- .pf-v6-u-background-color-danger {
62
- background-color: var(--pf-v6-global--palette--red-50) !important;
9
+ .pf-v6-u-background-color-highlight {
10
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
63
11
  }
64
12
 
65
13
  @media screen and (min-width: 576px) {
66
- .pf-v6-u-background-color-100-on-sm {
67
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
68
- }
69
- .pf-v6-u-background-color-200-on-sm {
70
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
71
- }
72
- .pf-v6-u-background-color-active-color-100-on-sm {
73
- background-color: var(--pf-v6-global--active-color--100) !important;
74
- }
75
- .pf-v6-u-background-color-active-color-300-on-sm {
76
- background-color: var(--pf-v6-global--active-color--300) !important;
77
- }
78
- .pf-v6-u-background-color-primary-color-200-on-sm {
79
- background-color: var(--pf-v6-global--primary-color--200) !important;
80
- }
81
- .pf-v6-u-background-color-dark-100-on-sm {
82
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
83
- }
84
- .pf-v6-u-background-color-dark-200-on-sm {
85
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
86
- }
87
- .pf-v6-u-background-color-dark-300-on-sm {
88
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
89
- }
90
- .pf-v6-u-background-color-dark-400-on-sm {
91
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
92
- }
93
- .pf-v6-u-background-color-disabled-color-200-on-sm {
94
- background-color: var(--pf-v6-global--disabled-color--200) !important;
14
+ .pf-v6-u-background-color-disabled-on-sm {
15
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
95
16
  }
96
- .pf-v6-u-background-color-disabled-color-300-on-sm {
97
- background-color: var(--pf-v6-global--disabled-color--300) !important;
17
+ .pf-v6-u-background-color-inverse-on-sm {
18
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
98
19
  }
99
- .pf-v6-u-background-color-default-on-sm {
100
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
101
- }
102
- .pf-v6-u-background-color-success-on-sm {
103
- background-color: var(--pf-v6-global--palette--green-50) !important;
104
- }
105
- .pf-v6-u-background-color-info-on-sm {
106
- background-color: var(--pf-v6-global--palette--blue-50) !important;
107
- }
108
- .pf-v6-u-background-color-warning-on-sm {
109
- background-color: var(--pf-v6-global--palette--gold-50) !important;
110
- }
111
- .pf-v6-u-background-color-danger-on-sm {
112
- background-color: var(--pf-v6-global--palette--red-50) !important;
20
+ .pf-v6-u-background-color-highlight-on-sm {
21
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
113
22
  }
114
23
  }
115
24
  @media screen and (min-width: 768px) {
116
- .pf-v6-u-background-color-100-on-md {
117
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
118
- }
119
- .pf-v6-u-background-color-200-on-md {
120
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
121
- }
122
- .pf-v6-u-background-color-active-color-100-on-md {
123
- background-color: var(--pf-v6-global--active-color--100) !important;
124
- }
125
- .pf-v6-u-background-color-active-color-300-on-md {
126
- background-color: var(--pf-v6-global--active-color--300) !important;
127
- }
128
- .pf-v6-u-background-color-primary-color-200-on-md {
129
- background-color: var(--pf-v6-global--primary-color--200) !important;
130
- }
131
- .pf-v6-u-background-color-dark-100-on-md {
132
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
133
- }
134
- .pf-v6-u-background-color-dark-200-on-md {
135
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
136
- }
137
- .pf-v6-u-background-color-dark-300-on-md {
138
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
25
+ .pf-v6-u-background-color-disabled-on-md {
26
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
139
27
  }
140
- .pf-v6-u-background-color-dark-400-on-md {
141
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
28
+ .pf-v6-u-background-color-inverse-on-md {
29
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
142
30
  }
143
- .pf-v6-u-background-color-disabled-color-200-on-md {
144
- background-color: var(--pf-v6-global--disabled-color--200) !important;
145
- }
146
- .pf-v6-u-background-color-disabled-color-300-on-md {
147
- background-color: var(--pf-v6-global--disabled-color--300) !important;
148
- }
149
- .pf-v6-u-background-color-default-on-md {
150
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
151
- }
152
- .pf-v6-u-background-color-success-on-md {
153
- background-color: var(--pf-v6-global--palette--green-50) !important;
154
- }
155
- .pf-v6-u-background-color-info-on-md {
156
- background-color: var(--pf-v6-global--palette--blue-50) !important;
157
- }
158
- .pf-v6-u-background-color-warning-on-md {
159
- background-color: var(--pf-v6-global--palette--gold-50) !important;
160
- }
161
- .pf-v6-u-background-color-danger-on-md {
162
- background-color: var(--pf-v6-global--palette--red-50) !important;
31
+ .pf-v6-u-background-color-highlight-on-md {
32
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
163
33
  }
164
34
  }
165
35
  @media screen and (min-width: 992px) {
166
- .pf-v6-u-background-color-100-on-lg {
167
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
168
- }
169
- .pf-v6-u-background-color-200-on-lg {
170
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
171
- }
172
- .pf-v6-u-background-color-active-color-100-on-lg {
173
- background-color: var(--pf-v6-global--active-color--100) !important;
174
- }
175
- .pf-v6-u-background-color-active-color-300-on-lg {
176
- background-color: var(--pf-v6-global--active-color--300) !important;
177
- }
178
- .pf-v6-u-background-color-primary-color-200-on-lg {
179
- background-color: var(--pf-v6-global--primary-color--200) !important;
180
- }
181
- .pf-v6-u-background-color-dark-100-on-lg {
182
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
183
- }
184
- .pf-v6-u-background-color-dark-200-on-lg {
185
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
36
+ .pf-v6-u-background-color-disabled-on-lg {
37
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
186
38
  }
187
- .pf-v6-u-background-color-dark-300-on-lg {
188
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
39
+ .pf-v6-u-background-color-inverse-on-lg {
40
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
189
41
  }
190
- .pf-v6-u-background-color-dark-400-on-lg {
191
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
192
- }
193
- .pf-v6-u-background-color-disabled-color-200-on-lg {
194
- background-color: var(--pf-v6-global--disabled-color--200) !important;
195
- }
196
- .pf-v6-u-background-color-disabled-color-300-on-lg {
197
- background-color: var(--pf-v6-global--disabled-color--300) !important;
198
- }
199
- .pf-v6-u-background-color-default-on-lg {
200
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
201
- }
202
- .pf-v6-u-background-color-success-on-lg {
203
- background-color: var(--pf-v6-global--palette--green-50) !important;
204
- }
205
- .pf-v6-u-background-color-info-on-lg {
206
- background-color: var(--pf-v6-global--palette--blue-50) !important;
207
- }
208
- .pf-v6-u-background-color-warning-on-lg {
209
- background-color: var(--pf-v6-global--palette--gold-50) !important;
210
- }
211
- .pf-v6-u-background-color-danger-on-lg {
212
- background-color: var(--pf-v6-global--palette--red-50) !important;
42
+ .pf-v6-u-background-color-highlight-on-lg {
43
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
213
44
  }
214
45
  }
215
46
  @media screen and (min-width: 1200px) {
216
- .pf-v6-u-background-color-100-on-xl {
217
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
218
- }
219
- .pf-v6-u-background-color-200-on-xl {
220
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
221
- }
222
- .pf-v6-u-background-color-active-color-100-on-xl {
223
- background-color: var(--pf-v6-global--active-color--100) !important;
224
- }
225
- .pf-v6-u-background-color-active-color-300-on-xl {
226
- background-color: var(--pf-v6-global--active-color--300) !important;
227
- }
228
- .pf-v6-u-background-color-primary-color-200-on-xl {
229
- background-color: var(--pf-v6-global--primary-color--200) !important;
47
+ .pf-v6-u-background-color-disabled-on-xl {
48
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
230
49
  }
231
- .pf-v6-u-background-color-dark-100-on-xl {
232
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
50
+ .pf-v6-u-background-color-inverse-on-xl {
51
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
233
52
  }
234
- .pf-v6-u-background-color-dark-200-on-xl {
235
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
236
- }
237
- .pf-v6-u-background-color-dark-300-on-xl {
238
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
239
- }
240
- .pf-v6-u-background-color-dark-400-on-xl {
241
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
242
- }
243
- .pf-v6-u-background-color-disabled-color-200-on-xl {
244
- background-color: var(--pf-v6-global--disabled-color--200) !important;
245
- }
246
- .pf-v6-u-background-color-disabled-color-300-on-xl {
247
- background-color: var(--pf-v6-global--disabled-color--300) !important;
248
- }
249
- .pf-v6-u-background-color-default-on-xl {
250
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
251
- }
252
- .pf-v6-u-background-color-success-on-xl {
253
- background-color: var(--pf-v6-global--palette--green-50) !important;
254
- }
255
- .pf-v6-u-background-color-info-on-xl {
256
- background-color: var(--pf-v6-global--palette--blue-50) !important;
257
- }
258
- .pf-v6-u-background-color-warning-on-xl {
259
- background-color: var(--pf-v6-global--palette--gold-50) !important;
260
- }
261
- .pf-v6-u-background-color-danger-on-xl {
262
- background-color: var(--pf-v6-global--palette--red-50) !important;
53
+ .pf-v6-u-background-color-highlight-on-xl {
54
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
263
55
  }
264
56
  }
265
57
  @media screen and (min-width: 1450px) {
266
- .pf-v6-u-background-color-100-on-2xl {
267
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
268
- }
269
- .pf-v6-u-background-color-200-on-2xl {
270
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
271
- }
272
- .pf-v6-u-background-color-active-color-100-on-2xl {
273
- background-color: var(--pf-v6-global--active-color--100) !important;
274
- }
275
- .pf-v6-u-background-color-active-color-300-on-2xl {
276
- background-color: var(--pf-v6-global--active-color--300) !important;
277
- }
278
- .pf-v6-u-background-color-primary-color-200-on-2xl {
279
- background-color: var(--pf-v6-global--primary-color--200) !important;
280
- }
281
- .pf-v6-u-background-color-dark-100-on-2xl {
282
- background-color: var(--pf-v6-global--BackgroundColor--dark-100) !important;
283
- }
284
- .pf-v6-u-background-color-dark-200-on-2xl {
285
- background-color: var(--pf-v6-global--BackgroundColor--dark-200) !important;
286
- }
287
- .pf-v6-u-background-color-dark-300-on-2xl {
288
- background-color: var(--pf-v6-global--BackgroundColor--dark-300) !important;
289
- }
290
- .pf-v6-u-background-color-dark-400-on-2xl {
291
- background-color: var(--pf-v6-global--BackgroundColor--dark-400) !important;
292
- }
293
- .pf-v6-u-background-color-disabled-color-200-on-2xl {
294
- background-color: var(--pf-v6-global--disabled-color--200) !important;
295
- }
296
- .pf-v6-u-background-color-disabled-color-300-on-2xl {
297
- background-color: var(--pf-v6-global--disabled-color--300) !important;
298
- }
299
- .pf-v6-u-background-color-default-on-2xl {
300
- background-color: var(--pf-v6-global--palette--cyan-50) !important;
301
- }
302
- .pf-v6-u-background-color-success-on-2xl {
303
- background-color: var(--pf-v6-global--palette--green-50) !important;
304
- }
305
- .pf-v6-u-background-color-info-on-2xl {
306
- background-color: var(--pf-v6-global--palette--blue-50) !important;
58
+ .pf-v6-u-background-color-disabled-on-2xl {
59
+ background-color: var(--pf-t--global--background--color--disabled--default) !important;
307
60
  }
308
- .pf-v6-u-background-color-warning-on-2xl {
309
- background-color: var(--pf-v6-global--palette--gold-50) !important;
61
+ .pf-v6-u-background-color-inverse-on-2xl {
62
+ background-color: var(--pf-t--global--background--color--inverse--default) !important;
310
63
  }
311
- .pf-v6-u-background-color-danger-on-2xl {
312
- background-color: var(--pf-v6-global--palette--red-50) !important;
64
+ .pf-v6-u-background-color-highlight-on-2xl {
65
+ background-color: var(--pf-t--global--background--color--highlight--default) !important;
313
66
  }
314
67
  }
package/utilities/BackgroundColor/BackgroundColor.scss CHANGED
@@ -2,53 +2,14 @@
2
2
 
3
3
  // Background color options
4
4
  $pf-v6-u-background-color-options: (
5
- background-color-100: (
6
- background-color var(--#{$pf-global}--BackgroundColor--100)
5
+ background-color-disabled: (
6
+ background-color var(--pf-t--global--background--color--disabled--default)
7
7
  ),
8
- background-color-200: (
9
- background-color var(--#{$pf-global}--BackgroundColor--200)
8
+ background-color-inverse: (
9
+ background-color var(--pf-t--global--background--color--inverse--default)
10
10
  ),
11
- background-color-active-color-100: (
12
- background-color var(--#{$pf-global}--active-color--100)
13
- ),
14
- background-color-active-color-300: (
15
- background-color var(--#{$pf-global}--active-color--300)
16
- ),
17
- background-color-primary-color-200: (
18
- background-color var(--#{$pf-global}--primary-color--200)
19
- ),
20
- background-color-dark-100: (
21
- background-color var(--#{$pf-global}--BackgroundColor--dark-100)
22
- ),
23
- background-color-dark-200: (
24
- background-color var(--#{$pf-global}--BackgroundColor--dark-200)
25
- ),
26
- background-color-dark-300: (
27
- background-color var(--#{$pf-global}--BackgroundColor--dark-300)
28
- ),
29
- background-color-dark-400: (
30
- background-color var(--#{$pf-global}--BackgroundColor--dark-400)
31
- ),
32
- background-color-disabled-color-200: (
33
- background-color var(--#{$pf-global}--disabled-color--200)
34
- ),
35
- background-color-disabled-color-300: (
36
- background-color var(--#{$pf-global}--disabled-color--300)
37
- ),
38
- background-color-default: (
39
- background-color var(--#{$pf-global}--palette--cyan-50)
40
- ),
41
- background-color-success: (
42
- background-color var(--#{$pf-global}--palette--green-50)
43
- ),
44
- background-color-info: (
45
- background-color var(--#{$pf-global}--palette--blue-50)
46
- ),
47
- background-color-warning: (
48
- background-color var(--#{$pf-global}--palette--gold-50)
49
- ),
50
- background-color-danger: (
51
- background-color var(--#{$pf-global}--palette--red-50)
11
+ background-color-highlight: (
12
+ background-color var(--pf-t--global--background--color--highlight--default)
52
13
  )
53
14
  );
54
15