@indico-data/design-system 3.3.0 → 3.5.0

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/lib/index.css +617 -345
  2. package/lib/index.esm.css +617 -345
  3. package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
  4. package/package.json +1 -1
  5. package/src/components/button/styles/_variables.scss +11 -11
  6. package/src/styles/_colors.scss +1 -1
  7. package/src/styles/globals.scss +9 -9
  8. package/src/styles/index.scss +2 -0
  9. package/src/styles/primitives/_borderRadius.scss +20 -0
  10. package/src/styles/primitives/_breakpoints.scss +9 -0
  11. package/src/styles/{variables → primitives}/_colors.scss +87 -106
  12. package/src/styles/primitives/_iconSizes.scss +10 -0
  13. package/src/styles/primitives/_shadows.scss +9 -0
  14. package/src/styles/primitives/_spacing.scss +68 -0
  15. package/src/styles/primitives/_typography.scss +28 -0
  16. package/src/styles/primitives/index.scss +7 -0
  17. package/src/styles/tokens/_semantic-tokens.scss +172 -0
  18. package/src/styles/variables/_borders.scss +1 -1
  19. package/src/styles/variables/index.scss +0 -1
  20. package/src/stylesAndAnimations/colors/BaseColorPalette.mdx +56 -0
  21. package/src/stylesAndAnimations/colors/Colors.tsx +34 -9
  22. package/src/stylesAndAnimations/colors/constants.ts +211 -351
  23. package/src/stylesAndAnimations/colors/Colors.mdx +0 -32
package/lib/index.esm.css CHANGED
@@ -32,23 +32,184 @@
32
32
  --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
33
33
  }
34
34
 
35
+ :root {
36
+ --pf-icon-size-xs: 0.6rem;
37
+ --pf-icon-size-sm: 0.75rem;
38
+ --pf-icon-size-md: 1rem;
39
+ --pf-icon-size-lg: 1.5rem;
40
+ --pf-icon-size-xl: 2rem;
41
+ }
42
+
43
+ :root {
44
+ --pf-border-thin: thin;
45
+ --pf-border-sm: 1px;
46
+ --pf-border-md: 2px;
47
+ --pf-border-lg: 4px;
48
+ --pf-border-xl: 8px;
49
+ --pf-rounded: 4px;
50
+ --pf-rounded-0: 0px;
51
+ --pf-rounded-sm: 2px;
52
+ --pf-rounded-md: 4px;
53
+ --pf-rounded-lg: 8px;
54
+ --pf-rounded-xl: 24px;
55
+ --pf-rounded-pill: 9999px;
56
+ --pf-rounded-circle: 50%;
57
+ --pf-rounded-shaped: 24px 0;
58
+ }
59
+
60
+ :root [data-theme=light] {
61
+ --pf-border-color-primary: var(--pf-gray-color-300);
62
+ --pf-border-color-secondary: var(--pf-gray-color-250);
63
+ --pf-border-hover-color: var(--pf-gray-color-400);
64
+ --pf-border-color-soft: var(--pf-secondary-color-450);
65
+ --pf-border-color-accent: var(--pf-blue-color-450);
66
+ --pf-border-color-error: var(--pf-error-color);
67
+ --pf-border-color-warning: var(--pf-warning-color);
68
+ --pf-border-color-info: var(--pf-info-color);
69
+ --pf-border-color-success: var(--pf-success-color);
70
+ --pf-border-color-neutral: var(--pf-neutral-color);
71
+ --pf-border-color-pending: var(--pf-pending-color);
72
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
73
+ }
74
+
75
+ :root [data-theme=dark],
76
+ :root {
77
+ --pf-border-color-primary: var(--pf-tertiary-color-700);
78
+ --pf-border-color-secondary: var(--pf-primary-color-600);
79
+ --pf-border-color-soft: var(--pf-secondary-color-600);
80
+ --pf-border-color-accent: var(--pf-secondary-color-400);
81
+ --pf-border-color-error: var(--pf-error-color);
82
+ --pf-border-color-warning: var(--pf-warning-color);
83
+ --pf-border-color-info: var(--pf-info-color);
84
+ --pf-border-color-success: var(--pf-success-color);
85
+ --pf-border-color-neutral: var(--pf-neutral-color);
86
+ --pf-border-color-pending: var(--pf-pending-color);
87
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
88
+ }
89
+
90
+ :root {
91
+ --pf-padding-0: 0;
92
+ --pf-padding-1: 4px;
93
+ --pf-padding-2: 8px;
94
+ --pf-padding-3: 12px;
95
+ --pf-padding-4: 16px;
96
+ --pf-padding-5: 20px;
97
+ --pf-padding-6: 24px;
98
+ --pf-padding-7: 28px;
99
+ --pf-padding-8: 32px;
100
+ --pf-padding-9: 36px;
101
+ --pf-padding-10: 40px;
102
+ --pf-padding-11: 44px;
103
+ --pf-padding-12: 48px;
104
+ --pf-padding-13: 52px;
105
+ --pf-padding-14: 56px;
106
+ --pf-padding-15: 60px;
107
+ --pf-padding-16: 64px;
108
+ }
109
+
110
+ :root {
111
+ --pf-margin-auto: auto;
112
+ --pf-margin-0: 0;
113
+ --pf-margin-1: 4px;
114
+ --pf-margin-2: 8px;
115
+ --pf-margin-3: 12px;
116
+ --pf-margin-4: 16px;
117
+ --pf-margin-5: 20px;
118
+ --pf-margin-6: 24px;
119
+ --pf-margin-7: 28px;
120
+ --pf-margin-8: 32px;
121
+ --pf-margin-9: 36px;
122
+ --pf-margin-10: 40px;
123
+ --pf-margin-11: 44px;
124
+ --pf-margin-12: 48px;
125
+ --pf-margin-13: 52px;
126
+ --pf-margin-14: 56px;
127
+ --pf-margin-15: 60px;
128
+ --pf-margin-16: 64px;
129
+ --pf-negative-margin-1: -4px;
130
+ --pf-negative-margin-2: -8px;
131
+ --pf-negative-margin-3: -12px;
132
+ --pf-negative-margin-4: -16px;
133
+ --pf-negative-margin-5: -20px;
134
+ --pf-negative-margin-6: -24px;
135
+ --pf-negative-margin-7: -28px;
136
+ --pf-negative-margin-8: -32px;
137
+ --pf-negative-margin-9: -36px;
138
+ --pf-negative-margin-10: -40px;
139
+ --pf-negative-margin-11: -44px;
140
+ --pf-negative-margin-12: -48px;
141
+ --pf-negative-margin-13: -52px;
142
+ --pf-negative-margin-14: -56px;
143
+ --pf-negative-margin-15: -60px;
144
+ --pf-negative-margin-16: -64px;
145
+ }
146
+
147
+ :root {
148
+ --pf-gap-0: 0;
149
+ --pf-gap-1: 4px;
150
+ --pf-gap-2: 8px;
151
+ --pf-gap-3: 12px;
152
+ --pf-gap-4: 16px;
153
+ --pf-gap-5: 20px;
154
+ --pf-gap-6: 24px;
155
+ --pf-gap-7: 28px;
156
+ --pf-gap-8: 32px;
157
+ --pf-gap-9: 36px;
158
+ --pf-gap-10: 40px;
159
+ --pf-gap-11: 44px;
160
+ --pf-gap-12: 48px;
161
+ --pf-gap-13: 52px;
162
+ --pf-gap-14: 56px;
163
+ --pf-gap-15: 60px;
164
+ --pf-gap-16: 64px;
165
+ }
166
+
167
+ :root {
168
+ --pf-size-0: 0;
169
+ --pf-size-1: 4px;
170
+ --pf-size-2: 8px;
171
+ --pf-size-3: 12px;
172
+ --pf-size-4: 16px;
173
+ --pf-size-5: 20px;
174
+ --pf-size-6: 24px;
175
+ --pf-size-7: 28px;
176
+ --pf-size-8: 32px;
177
+ --pf-size-9: 36px;
178
+ --pf-size-10: 40px;
179
+ --pf-size-11: 44px;
180
+ --pf-size-12: 48px;
181
+ --pf-size-13: 52px;
182
+ --pf-size-14: 56px;
183
+ --pf-size-15: 60px;
184
+ --pf-size-16: 64px;
185
+ }
186
+
187
+ :root,
188
+ :root [data-theme=light],
189
+ :root [data-theme=dark] {
190
+ --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
191
+ --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
192
+ --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
193
+ --pf-focus-alignment: 0px 0px 0px 4px;
194
+ }
195
+
35
196
  :root {
36
197
  /** BASE COLORS **/
37
- --pf-blue-color: #1474b8;
38
- --pf-blue-color-50: #f8fafc;
39
- --pf-blue-color-100: #f1f5f9;
40
- --pf-blue-color-150: #e8f1f7;
41
- --pf-blue-color-200: #deedf7;
42
- --pf-blue-color-250: #c6dff1;
43
- --pf-blue-color-300: #add1eb;
44
- --pf-blue-color-400: #3ea2ea;
45
- --pf-blue-color-450: #188bdc;
46
- --pf-blue-color-500: #1474b8;
47
- --pf-blue-color-550: #1268a5;
48
- --pf-blue-color-600: #0f578a;
49
- --pf-blue-color-700: #1d4058;
50
- --pf-blue-color-800: #132939;
51
- --pf-blue-color-900: #0e151b;
198
+ --pf-blue-color: #2989ff;
199
+ --pf-blue-color-50: #f6fafd;
200
+ --pf-blue-color-100: #eef4fc;
201
+ --pf-blue-color-150: #e5effa;
202
+ --pf-blue-color-200: #d8e9fd;
203
+ --pf-blue-color-250: #bbd8fb;
204
+ --pf-blue-color-300: #9ec7fa;
205
+ --pf-blue-color-400: #2989ff;
206
+ --pf-blue-color-450: #0070f5;
207
+ --pf-blue-color-500: #005ccc;
208
+ --pf-blue-color-550: #0054b8;
209
+ --pf-blue-color-600: #004599;
210
+ --pf-blue-color-700: #06356f;
211
+ --pf-blue-color-800: #082345;
212
+ --pf-blue-color-900: #061323;
52
213
  --pf-gray-color: #808080;
53
214
  --pf-gray-color-50: #ffffff;
54
215
  --pf-gray-color-100: #f7f7f7;
@@ -94,42 +255,42 @@
94
255
  --pf-pink-color-700: #4c2935;
95
256
  --pf-pink-color-800: #321b23;
96
257
  --pf-pink-color-900: #1b0e13;
97
- --pf-orange-color: #994b33;
98
- --pf-orange-color-50: #fcf9f7;
258
+ --pf-orange-color: #994733;
259
+ --pf-orange-color-50: #fffbfa;
99
260
  --pf-orange-color-100: #faf2f0;
100
- --pf-orange-color-150: #f7ece8;
101
- --pf-orange-color-200: #f7e4de;
102
- --pf-orange-color-250: #f4cec2;
103
- --pf-orange-color-300: #f5b6a3;
104
- --pf-orange-color-400: #ea673e;
105
- --pf-orange-color-450: #c45331;
106
- --pf-orange-color-500: #994b33;
261
+ --pf-orange-color-150: #f7ebe8;
262
+ --pf-orange-color-200: #f7e3de;
263
+ --pf-orange-color-250: #f4ccc2;
264
+ --pf-orange-color-300: #f5b4a3;
265
+ --pf-orange-color-400: #ea603e;
266
+ --pf-orange-color-450: #c44e31;
267
+ --pf-orange-color-500: #994733;
107
268
  --pf-orange-color-550: #863f2a;
108
- --pf-orange-color-600: #6b3c2e;
109
- --pf-orange-color-700: #522e23;
110
- --pf-orange-color-800: #32201b;
269
+ --pf-orange-color-600: #6b3a2e;
270
+ --pf-orange-color-700: #522d23;
271
+ --pf-orange-color-800: #321f1b;
111
272
  --pf-orange-color-900: #1b110e;
112
- --pf-yellow-color: #ad791f;
273
+ --pf-yellow-color: #ad871f;
113
274
  --pf-yellow-color-50: #fdfbf7;
114
- --pf-yellow-color-100: #fcf7ee;
115
- --pf-yellow-color-150: #faf3e5;
116
- --pf-yellow-color-200: #f9eedc;
117
- --pf-yellow-color-250: #f4e2c2;
118
- --pf-yellow-color-300: #f0d6a8;
119
- --pf-yellow-color-400: #eaab3e;
120
- --pf-yellow-color-450: #dc9518;
121
- --pf-yellow-color-500: #ad791f;
275
+ --pf-yellow-color-100: #fcf8ee;
276
+ --pf-yellow-color-150: #faf5e5;
277
+ --pf-yellow-color-200: #f9f1dc;
278
+ --pf-yellow-color-250: #f4e7c2;
279
+ --pf-yellow-color-300: #f0dda8;
280
+ --pf-yellow-color-400: #eabc3e;
281
+ --pf-yellow-color-450: #dca818;
282
+ --pf-yellow-color-500: #ad871f;
122
283
  --pf-yellow-color-550: #976f00;
123
- --pf-yellow-color-600: #825b17;
124
- --pf-yellow-color-700: #58421d;
125
- --pf-yellow-color-800: #32291b;
284
+ --pf-yellow-color-600: #826517;
285
+ --pf-yellow-color-700: #58481d;
286
+ --pf-yellow-color-800: #322c1b;
126
287
  --pf-yellow-color-900: #1b160e;
127
288
  --pf-green-color: #14b869;
128
289
  --pf-green-color-50: #f7fdfa;
129
290
  --pf-green-color-100: #effbf5;
130
291
  --pf-green-color-150: #e7f9f0;
131
292
  --pf-green-color-200: #def7eb;
132
- --pf-green-color-250: #c2f4dc;
293
+ --pf-green-color-250: #c2f4db;
133
294
  --pf-green-color-300: #a8f0cd;
134
295
  --pf-green-color-400: #3eea97;
135
296
  --pf-green-color-450: #18dc7e;
@@ -146,7 +307,7 @@
146
307
  --pf-teal-color-200: #dcf9f9;
147
308
  --pf-teal-color-250: #bff8f8;
148
309
  --pf-teal-color-300: #a3f5f5;
149
- --pf-teal-color-400: #3eeaea;
310
+ --pf-teal-color-400: #4edada;
150
311
  --pf-teal-color-450: #25d0d0;
151
312
  --pf-teal-color-500: #29a3a3;
152
313
  --pf-teal-color-550: #267373;
@@ -170,36 +331,34 @@
170
331
  --pf-purple-color-800: #241736;
171
332
  --pf-purple-color-900: #130e1b;
172
333
  --pf-white-color: #ffffff;
173
- --pf-white-color-1: rgba(255, 255, 255, 0.01);
174
- --pf-white-color-3: rgba(255, 255, 255, 0.03);
175
- --pf-white-color-5: rgba(255, 255, 255, 0.05);
176
- --pf-white-color-10: rgba(255, 255, 255, 0.1);
177
- --pf-white-color-15: rgba(255, 255, 255, 0.15);
178
- --pf-white-color-20: rgba(255, 255, 255, 0.2);
179
- --pf-white-color-30: rgba(255, 255, 255, 0.3);
180
- --pf-white-color-40: rgba(255, 255, 255, 0.4);
181
- --pf-white-color-50: rgba(255, 255, 255, 0.5);
182
- --pf-white-color-60: rgba(255, 255, 255, 0.6);
183
- --pf-white-color-70: rgba(255, 255, 255, 0.7);
184
- --pf-white-color-80: rgba(255, 255, 255, 0.8);
185
- --pf-white-color-90: rgba(255, 255, 255, 0.9);
186
- --pf-white-color-100: rgba(255, 255, 255, 1);
334
+ --pf-opacity-white-50: rgba(255, 255, 255, 0.01);
335
+ --pf-opacity-white-100: rgba(255, 255, 255, 0.03);
336
+ --pf-opacity-white-150: rgba(255, 255, 255, 0.05);
337
+ --pf-opacity-white-200: rgba(255, 255, 255, 0.1);
338
+ --pf-opacity-white-250: rgba(255, 255, 255, 0.15);
339
+ --pf-opacity-white-300: rgba(255, 255, 255, 0.2);
340
+ --pf-opacity-white-400: rgba(255, 255, 255, 0.3);
341
+ --pf-opacity-white-450: rgba(255, 255, 255, 0.4);
342
+ --pf-opacity-white-500: rgba(255, 255, 255, 0.5);
343
+ --pf-opacity-white-600: rgba(255, 255, 255, 0.6);
344
+ --pf-opacity-white-700: rgba(255, 255, 255, 0.7);
345
+ --pf-opacity-white-800: rgba(255, 255, 255, 0.8);
346
+ --pf-opacity-white-900: rgba(255, 255, 255, 0.9);
187
347
  --pf-black-color: #000000;
188
- --pf-black-color-1: rgba(0, 0, 0, 0.01);
189
- --pf-black-color-3: rgba(0, 0, 0, 0.03);
190
- --pf-black-color-5: rgba(0, 0, 0, 0.05);
191
- --pf-black-color-10: rgba(0, 0, 0, 0.1);
192
- --pf-black-color-15: rgba(0, 0, 0, 0.15);
193
- --pf-black-color-20: rgba(0, 0, 0, 0.2);
194
- --pf-black-color-30: rgba(0, 0, 0, 0.3);
195
- --pf-black-color-40: rgba(0, 0, 0, 0.4);
196
- --pf-black-color-50: rgba(0, 0, 0, 0.5);
197
- --pf-black-color-60: rgba(0, 0, 0, 0.6);
198
- --pf-black-color-70: rgba(0, 0, 0, 0.7);
199
- --pf-black-color-80: rgba(0, 0, 0, 0.8);
200
- --pf-black-color-90: rgba(0, 0, 0, 0.9);
201
- --pf-black-color-100: rgba(0, 0, 0, 1);
202
- /** SEMANTIC COLORS **/
348
+ --pf-opacity-black-50: rgba(0, 0, 0, 0.01);
349
+ --pf-opacity-black-100: rgba(0, 0, 0, 0.03);
350
+ --pf-opacity-black-150: rgba(0, 0, 0, 0.05);
351
+ --pf-opacity-black-200: rgba(0, 0, 0, 0.1);
352
+ --pf-opacity-black-250: rgba(0, 0, 0, 0.15);
353
+ --pf-opacity-black-300: rgba(0, 0, 0, 0.2);
354
+ --pf-opacity-black-400: rgba(0, 0, 0, 0.3);
355
+ --pf-opacity-black-450: rgba(0, 0, 0, 0.4);
356
+ --pf-opacity-black-500: rgba(0, 0, 0, 0.5);
357
+ --pf-opacity-black-600: rgba(0, 0, 0, 0.6);
358
+ --pf-opacity-black-700: rgba(0, 0, 0, 0.7);
359
+ --pf-opacity-black-800: rgba(0, 0, 0, 0.8);
360
+ --pf-opacity-black-900: rgba(0, 0, 0, 0.9);
361
+ /** COLOR FAMILIES **/
203
362
  --pf-primary-color: #50647c;
204
363
  --pf-primary-color-50: #f9fafb;
205
364
  --pf-primary-color-100: #f3f5f7;
@@ -215,21 +374,21 @@
215
374
  --pf-primary-color-700: #192534;
216
375
  --pf-primary-color-800: #111b28;
217
376
  --pf-primary-color-900: #0c141d;
218
- --pf-secondary-color: var(--pf-blue-color);
219
- --pf-secondary-color-50: var(--pf-blue-color-50);
220
- --pf-secondary-color-100: var(--pf-blue-color-100);
221
- --pf-secondary-color-150: var(--pf-blue-color-150);
222
- --pf-secondary-color-200: var(--pf-blue-color-200);
223
- --pf-secondary-color-250: var(--pf-blue-color-250);
224
- --pf-secondary-color-300: var(--pf-blue-color-300);
225
- --pf-secondary-color-400: var(--pf-blue-color-400);
226
- --pf-secondary-color-450: var(--pf-blue-color-450);
227
- --pf-secondary-color-500: var(--pf-blue-color-500);
228
- --pf-secondary-color-550: var(--pf-blue-color-550);
229
- --pf-secondary-color-600: var(--pf-blue-color-600);
230
- --pf-secondary-color-700: var(--pf-blue-color-700);
231
- --pf-secondary-color-800: var(--pf-blue-color-800);
232
- --pf-secondary-color-900: var(--pf-blue-color-900);
377
+ --pf-secondary-color: #1474b8;
378
+ --pf-secondary-color-50: #f8fafc;
379
+ --pf-secondary-color-100: #f1f5f9;
380
+ --pf-secondary-color-150: #e8f1f7;
381
+ --pf-secondary-color-200: #deedf7;
382
+ --pf-secondary-color-250: #c6dff1;
383
+ --pf-secondary-color-300: #add1eb;
384
+ --pf-secondary-color-400: #3ea2ea;
385
+ --pf-secondary-color-450: #188bdc;
386
+ --pf-secondary-color-500: #1474b8;
387
+ --pf-secondary-color-550: #1268a5;
388
+ --pf-secondary-color-600: #0f578a;
389
+ --pf-secondary-color-700: #1d4058;
390
+ --pf-secondary-color-800: #132939;
391
+ --pf-secondary-color-900: #0e151b;
233
392
  --pf-tertiary-color: #6a7798;
234
393
  --pf-tertiary-color-50: #f8fafb;
235
394
  --pf-tertiary-color-100: #f4f7f9;
@@ -245,21 +404,6 @@
245
404
  --pf-tertiary-color-700: #4b5364;
246
405
  --pf-tertiary-color-800: #2c303a;
247
406
  --pf-tertiary-color-900: #111317;
248
- --pf-brand-color: #2989ff;
249
- --pf-brand-color-50: #f6fafd;
250
- --pf-brand-color-100: #eef4fc;
251
- --pf-brand-color-150: #e5effa;
252
- --pf-brand-color-200: #d8e9fd;
253
- --pf-brand-color-250: #bbd8fb;
254
- --pf-brand-color-300: #9ec7fa;
255
- --pf-brand-color-400: #2989ff;
256
- --pf-brand-color-450: #0070f5;
257
- --pf-brand-color-500: #005ccc;
258
- --pf-brand-color-550: #0054b8;
259
- --pf-brand-color-600: #004599;
260
- --pf-brand-color-700: #06356f;
261
- --pf-brand-color-800: #082345;
262
- --pf-brand-color-900: #061323;
263
407
  /** UTILITY COLORS **/
264
408
  --pf-error-color: var(--pf-red-color-450);
265
409
  --pf-error-color-dark: var(--pf-red-color-500);
@@ -276,173 +420,301 @@
276
420
  --pf-info-color: var(--pf-secondary-color-450);
277
421
  --pf-info-color-dark: var(--pf-secondary-color-550);
278
422
  --pf-info-color-light: var(--pf-secondary-color-400);
279
- --pf-brand-color: var(--pf-brand-color-450);
280
- --pf-brand-color-dark: var(--pf-brand-color-550);
281
- --pf-brand-color-light: var(--pf-brand-color-300);
423
+ --pf-brand-color: var(--pf-blue-color-450);
424
+ --pf-brand-color-dark: var(--pf-blue-color-550);
425
+ --pf-brand-color-light: var(--pf-blue-color-300);
282
426
  --pf-pending-color: var(--pf-pink-color-500);
283
427
  --pf-pending-color-dark: var(--pf-pink-color-600);
284
428
  --pf-pending-color-light: var(--pf-pink-color-300);
285
429
  }
286
430
 
287
431
  :root {
288
- --pf-icon-size-xs: 0.6rem;
289
- --pf-icon-size-sm: 0.75rem;
290
- --pf-icon-size-md: 1rem;
291
- --pf-icon-size-lg: 1.5rem;
292
- --pf-icon-size-xl: 2rem;
432
+ --pf-border-radius-0: 0;
433
+ --pf-border-radius-xxs: 2px;
434
+ --pf-border-radius-xs: 4px;
435
+ --pf-border-radius-sm: 6px;
436
+ --pf-border-radius-md: 8px;
437
+ --pf-border-radius-lg: 10px;
438
+ --pf-border-radius-xl: 12px;
439
+ --pf-border-radius-2xl: 16px;
440
+ --pf-border-radius-3xl: 24px;
441
+ --pf-border-radius-4xl: 32px;
442
+ --pf-border-radius-5xl: 40px;
443
+ --pf-border-radius-6xl: 48px;
444
+ --pf-border-radius-7xl: 56px;
445
+ --pf-border-radius-8xl: 64px;
446
+ --pf-border-radius-9xl: 72px;
447
+ --pf-border-radius-10xl: 80px;
448
+ --pf-border-radius-full: 999px;
449
+ --pf-border-radius-circle: 50%;
293
450
  }
294
451
 
295
452
  :root {
296
- --pf-border-thin: thin;
297
- --pf-border-sm: 1px;
298
- --pf-border-md: 2px;
299
- --pf-border-lg: 4px;
300
- --pf-border-xl: 8px;
301
- --pf-rounded: 4px;
302
- --pf-rounded-0: 0px;
303
- --pf-rounded-sm: 2px;
304
- --pf-rounded-md: 4px;
305
- --pf-rounded-lg: 8px;
306
- --pf-rounded-xl: 24px;
307
- --pf-rounded-pill: 9999px;
308
- --pf-rounded-circle: 50%;
309
- --pf-rounded-shaped: 24px 0;
453
+ /** BREAKPOINT PRIMITIVES **/
454
+ --pf-breakpoint-xs: 480px;
455
+ --pf-breakpoint-sm: 600px;
456
+ --pf-breakpoint-md: 768px;
457
+ --pf-breakpoint-lg: 1280px;
458
+ --pf-breakpoint-xl: 1440px;
459
+ --pf-breakpoint-2xl: 1920px;
310
460
  }
311
461
 
312
- :root [data-theme=light] {
313
- --pf-border-color-primary: var(--pf-gray-color-300);
314
- --pf-border-color-secondary: var(--pf-gray-color-250);
315
- --pf-border-hover-color: var(--pf-gray-color-400);
316
- --pf-border-color-soft: var(--pf-secondary-color-450);
317
- --pf-border-color-accent: var(--pf-brand-color-450);
318
- --pf-border-color-error: var(--pf-error-color);
319
- --pf-border-color-warning: var(--pf-warning-color);
320
- --pf-border-color-info: var(--pf-info-color);
321
- --pf-border-color-success: var(--pf-success-color);
322
- --pf-border-color-neutral: var(--pf-neutral-color);
323
- --pf-border-color-pending: var(--pf-pending-color);
324
- --pf-horizontal-line-color: var(--pf-border-color-primary);
325
- }
326
-
327
- :root [data-theme=dark],
328
462
  :root {
329
- --pf-border-color-primary: var(--pf-tertiary-color-700);
330
- --pf-border-color-secondary: var(--pf-primary-color-600);
331
- --pf-border-color-soft: var(--pf-secondary-color-600);
332
- --pf-border-color-accent: var(--pf-secondary-color-400);
333
- --pf-border-color-error: var(--pf-error-color);
334
- --pf-border-color-warning: var(--pf-warning-color);
335
- --pf-border-color-info: var(--pf-info-color);
336
- --pf-border-color-success: var(--pf-success-color);
337
- --pf-border-color-neutral: var(--pf-neutral-color);
338
- --pf-border-color-pending: var(--pf-pending-color);
339
- --pf-horizontal-line-color: var(--pf-border-color-primary);
463
+ --pf-icon-size-xs: 10px;
464
+ --pf-icon-size-sm: 12px;
465
+ --pf-icon-size-md: 16px;
466
+ --pf-icon-size-lg: 24px;
467
+ --pf-icon-size-xl: 32px;
468
+ --pf-icon-size-2xl: 48px;
469
+ --pf-icon-size-3xl: 64px;
340
470
  }
341
471
 
342
472
  :root {
343
- --pf-padding-0: 0;
344
- --pf-padding-1: 4px;
345
- --pf-padding-2: 8px;
346
- --pf-padding-3: 12px;
347
- --pf-padding-4: 16px;
348
- --pf-padding-5: 20px;
349
- --pf-padding-6: 24px;
350
- --pf-padding-7: 28px;
351
- --pf-padding-8: 32px;
352
- --pf-padding-9: 36px;
353
- --pf-padding-10: 40px;
354
- --pf-padding-11: 44px;
355
- --pf-padding-12: 48px;
356
- --pf-padding-13: 52px;
357
- --pf-padding-14: 56px;
358
- --pf-padding-15: 60px;
359
- --pf-padding-16: 64px;
473
+ --pf-shadow-xs: rgba(0, 0, 0, 0.1);
474
+ --pf-shadow-sm: rgba(0, 0, 0, 0.15);
475
+ --pf-shadow-md: rgba(0, 0, 0, 0.2);
476
+ --pf-shadow-lg: rgba(0, 0, 0, 0.25);
477
+ --pf-shadow-xl: rgba(0, 0, 0, 0.3);
478
+ --pf-shadow-2xl: rgba(0, 0, 0, 0.35);
479
+ --pf-shadow-inner: rgba(0, 0, 0, 0.2);
360
480
  }
361
481
 
362
482
  :root {
363
- --pf-margin-auto: auto;
364
- --pf-margin-0: 0;
365
- --pf-margin-1: 4px;
366
- --pf-margin-2: 8px;
367
- --pf-margin-3: 12px;
368
- --pf-margin-4: 16px;
369
- --pf-margin-5: 20px;
370
- --pf-margin-6: 24px;
371
- --pf-margin-7: 28px;
372
- --pf-margin-8: 32px;
373
- --pf-margin-9: 36px;
374
- --pf-margin-10: 40px;
375
- --pf-margin-11: 44px;
376
- --pf-margin-12: 48px;
377
- --pf-margin-13: 52px;
378
- --pf-margin-14: 56px;
379
- --pf-margin-15: 60px;
380
- --pf-margin-16: 64px;
381
- --pf-negative-margin-1: -4px;
382
- --pf-negative-margin-2: -8px;
383
- --pf-negative-margin-3: -12px;
384
- --pf-negative-margin-4: -16px;
385
- --pf-negative-margin-5: -20px;
386
- --pf-negative-margin-6: -24px;
387
- --pf-negative-margin-7: -28px;
388
- --pf-negative-margin-8: -32px;
389
- --pf-negative-margin-9: -36px;
390
- --pf-negative-margin-10: -40px;
391
- --pf-negative-margin-11: -44px;
392
- --pf-negative-margin-12: -48px;
393
- --pf-negative-margin-13: -52px;
394
- --pf-negative-margin-14: -56px;
395
- --pf-negative-margin-15: -60px;
396
- --pf-negative-margin-16: -64px;
483
+ --pf-spacing-negative-27xl: -384px;
484
+ --pf-spacing-negative-26xl: -320px;
485
+ --pf-spacing-negative-25xl: -288px;
486
+ --pf-spacing-negative-24xl: -256px;
487
+ --pf-spacing-negative-23xl: -240px;
488
+ --pf-spacing-negative-22xl: -224px;
489
+ --pf-spacing-negative-21xl: -208px;
490
+ --pf-spacing-negative-20xl: -192px;
491
+ --pf-spacing-negative-19xl: -176px;
492
+ --pf-spacing-negative-18xl: -160px;
493
+ --pf-spacing-negative-17xl: -144px;
494
+ --pf-spacing-negative-16xl: -128px;
495
+ --pf-spacing-negative-15xl: -112px;
496
+ --pf-spacing-negative-14xl: -96px;
497
+ --pf-spacing-negative-13xl: -80px;
498
+ --pf-spacing-negative-12xl: -64px;
499
+ --pf-spacing-negative-11xl: -56px;
500
+ --pf-spacing-negative-10xl: -48px;
501
+ --pf-spacing-negative-9xl: -44px;
502
+ --pf-spacing-negative-8xl: -40px;
503
+ --pf-spacing-negative-7xl: -36px;
504
+ --pf-spacing-negative-6xl: -32px;
505
+ --pf-spacing-negative-5xl: -28px;
506
+ --pf-spacing-negative-4xl: -24px;
507
+ --pf-spacing-negative-3xl: -20px;
508
+ --pf-spacing-negative-2xl: -16px;
509
+ --pf-spacing-negative-xl: -14px;
510
+ --pf-spacing-negative-lg: -12px;
511
+ --pf-spacing-negative-sm: -8px;
512
+ --pf-spacing-negative-xs: -6px;
513
+ --pf-spacing-negative-xxs: -4px;
514
+ --pf-spacing-negative-micro: -2px;
515
+ --pf-spacing-none: 0;
516
+ --pf-spacing-micro: 2px;
517
+ --pf-spacing-xxs: 4px;
518
+ --pf-spacing-xs: 6px;
519
+ --pf-spacing-sm: 8px;
520
+ --pf-spacing-md: 10px;
521
+ --pf-spacing-lg: 12px;
522
+ --pf-spacing-xl: 14px;
523
+ --pf-spacing-2xl: 16px;
524
+ --pf-spacing-3xl: 20px;
525
+ --pf-spacing-4xl: 24px;
526
+ --pf-spacing-5xl: 28px;
527
+ --pf-spacing-6xl: 32px;
528
+ --pf-spacing-7xl: 36px;
529
+ --pf-spacing-8xl: 40px;
530
+ --pf-spacing-9xl: 44px;
531
+ --pf-spacing-10xl: 48px;
532
+ --pf-spacing-11xl: 56px;
533
+ --pf-spacing-12xl: 64px;
534
+ --pf-spacing-13xl: 80px;
535
+ --pf-spacing-14xl: 96px;
536
+ --pf-spacing-15xl: 112px;
537
+ --pf-spacing-16xl: 128px;
538
+ --pf-spacing-17xl: 144px;
539
+ --pf-spacing-18xl: 160px;
540
+ --pf-spacing-19xl: 176px;
541
+ --pf-spacing-20xl: 192px;
542
+ --pf-spacing-21xl: 208px;
543
+ --pf-spacing-22xl: 224px;
544
+ --pf-spacing-23xl: 240px;
545
+ --pf-spacing-24xl: 256px;
546
+ --pf-spacing-25xl: 288px;
547
+ --pf-spacing-26xl: 320px;
548
+ --pf-spacing-27xl: 384px;
397
549
  }
398
550
 
399
551
  :root {
400
- --pf-gap-0: 0;
401
- --pf-gap-1: 4px;
402
- --pf-gap-2: 8px;
403
- --pf-gap-3: 12px;
404
- --pf-gap-4: 16px;
405
- --pf-gap-5: 20px;
406
- --pf-gap-6: 24px;
407
- --pf-gap-7: 28px;
408
- --pf-gap-8: 32px;
409
- --pf-gap-9: 36px;
410
- --pf-gap-10: 40px;
411
- --pf-gap-11: 44px;
412
- --pf-gap-12: 48px;
413
- --pf-gap-13: 52px;
414
- --pf-gap-14: 56px;
415
- --pf-gap-15: 60px;
416
- --pf-gap-16: 64px;
552
+ /** Font Family **/
553
+ --pf-font-family: Noto Sans;
554
+ /** Font Weights **/
555
+ --pf-font-weight-light: 300;
556
+ --pf-font-weight-regular: 400;
557
+ --pf-font-weight-medium: 500;
558
+ --pf-font-weight-semibold: 600;
559
+ --pf-font-weight-bold: 700;
560
+ /** Font Sizes **/
561
+ --pf-font-size-xs: 0.625rem; /* 10px */
562
+ --pf-font-size-sm: 0.75rem; /* 12px */
563
+ --pf-font-size-base: 0.8125rem; /* 13px */
564
+ --pf-font-size-md: 0.875rem; /* 14px */
565
+ --pf-font-size-lg: 0.9375rem; /* 15px */
566
+ --pf-font-size-xl: 1rem; /* 16px */
567
+ --pf-font-size-2xl: 1.125rem; /* 18px */
568
+ --pf-font-size-3xl: 1.25rem; /* 20px */
569
+ --pf-font-size-4xl: 1.5rem; /* 24px */
570
+ --pf-font-size-5xl: 1.875rem; /* 30px */
571
+ --pf-font-size-6xl: 2.125rem; /* 34px */
572
+ --pf-font-size-7xl: 2.25rem; /* 36px */
573
+ --pf-font-size-8xl: 3rem; /* 48px */
574
+ --pf-font-size-9xl: 3.75rem; /* 60px */
575
+ --pf-font-size-10xl: 6rem; /* 96px */
417
576
  }
418
577
 
419
- :root {
420
- --pf-size-0: 0;
421
- --pf-size-1: 4px;
422
- --pf-size-2: 8px;
423
- --pf-size-3: 12px;
424
- --pf-size-4: 16px;
425
- --pf-size-5: 20px;
426
- --pf-size-6: 24px;
427
- --pf-size-7: 28px;
428
- --pf-size-8: 32px;
429
- --pf-size-9: 36px;
430
- --pf-size-10: 40px;
431
- --pf-size-11: 44px;
432
- --pf-size-12: 48px;
433
- --pf-size-13: 52px;
434
- --pf-size-14: 56px;
435
- --pf-size-15: 60px;
436
- --pf-size-16: 64px;
578
+ :root [data-theme=light] {
579
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
580
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
581
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
582
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
583
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
584
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
585
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
586
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
587
+ --pf-semantic-utility-error-dark: var(--pf-red-color-600);
588
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
589
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
590
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
591
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
592
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
593
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
594
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
595
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
596
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
597
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
598
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
599
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
600
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
601
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
602
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
603
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
604
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
605
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
606
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
607
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
608
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
609
+ --pf-semantic-page-background: var(--pf-gray-color-100);
610
+ --pf-semantic-background-primary: var(--pf-gray-color-150);
611
+ --pf-semantic-background-secondary: var(--pf-gray-color-50);
612
+ --pf-semantic-background-tertiary: var(--pf-gray-color-200);
613
+ --pf-semantic-background-quaternary: var(--pf-gray-color-250);
614
+ --pf-semantic-background-accent: var(--pf-secondary-color-200);
615
+ --pf-semantic-background-highlight: var(--pf-blue-color-250);
616
+ --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
617
+ --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
618
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
619
+ --pf-semantic-border-primary: var(--pf-gray-color-300);
620
+ --pf-semantic-border-secondary: var(--pf-gray-color-250);
621
+ --pf-semantic-border-hover: var(--pf-gray-color-400);
622
+ --pf-semantic-border-soft: var(--pf-secondary-color-450);
623
+ --pf-semantic-border-accent: var(--pf-blue-color-450);
624
+ --pf-semantic-border-error: var(--pf-red-color-450);
625
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
626
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
627
+ --pf-semantic-border-success: var(--pf-green-color-500);
628
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
629
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
630
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
631
+ --pf-semantic-logo-secondary: var(--pf-primary-color-800);
632
+ --pf-semantic-font-regular: var(--pf-primary-color-800);
633
+ --pf-semantic-font-inverted: var(--pf-gray-color-50);
634
+ --pf-semantic-font-soft: var(--pf-gray-color-700);
635
+ --pf-semantic-font-mute: var(--pf-gray-color-800);
636
+ --pf-semantic-font-link: var(--pf-blue-color-500);
637
+ --pf-semantic-font-placeholder: var(--pf-gray-color-450);
638
+ --pf-semantic-font-disabled: var(--pf-gray-color-400);
639
+ --pf-semantic-font-accent: var(--pf-blue-color-500);
640
+ --pf-semantic-font-error: var(--pf-red-color-450);
641
+ --pf-semantic-font-success: var(--pf-green-color-600);
642
+ --pf-semantic-elevation-1: var(--pf-opacity-black-100);
643
+ --pf-semantic-elevation-2: var(--pf-opacity-black-150);
644
+ --pf-semantic-elevation-3: var(--pf-opacity-black-200);
645
+ --pf-semantic-elevation-4: var(--pf-opacity-black-250);
646
+ --pf-semantic-elevation-5: var(--pf-opacity-black-300);
437
647
  }
438
648
 
439
- :root,
440
- :root [data-theme=light],
441
649
  :root [data-theme=dark] {
442
- --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
443
- --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
444
- --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
445
- --pf-focus-alignment: 0px 0px 0px 4px;
650
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
651
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
652
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
653
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
654
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
655
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
656
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
657
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
658
+ --pf-semantic-utility-error-dark: var(--pf-red-color-500);
659
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
660
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
661
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
662
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
663
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
664
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
665
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
666
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
667
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
668
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
669
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
670
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
671
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
672
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
673
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
674
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
675
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
676
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
677
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
678
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
679
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
680
+ --pf-semantic-page-background: var(--pf-primary-color-700);
681
+ --pf-semantic-background-primary: var(--pf-primary-color-900);
682
+ --pf-semantic-background-secondary: var(--pf-primary-color-800);
683
+ --pf-semantic-background-tertiary: var(--pf-primary-color-600);
684
+ --pf-semantic-background-quaternary: var(--pf-primary-color-500);
685
+ --pf-semantic-background-accent: var(--pf-blue-color-800);
686
+ --pf-semantic-background-highlight: var(--pf-blue-color-700);
687
+ --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
688
+ --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
689
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
690
+ --pf-semantic-border-primary: var(--pf-tertiary-color-700);
691
+ --pf-semantic-border-secondary: var(--pf-primary-color-600);
692
+ --pf-semantic-border-hover: var(--pf-tertiary-color-600);
693
+ --pf-semantic-border-soft: var(--pf-secondary-color-600);
694
+ --pf-semantic-border-accent: var(--pf-secondary-color-400);
695
+ --pf-semantic-border-error: var(--pf-red-color-450);
696
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
697
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
698
+ --pf-semantic-border-success: var(--pf-green-color-500);
699
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
700
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
701
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
702
+ --pf-semantic-logo-secondary: var(--pf-gray-color-50);
703
+ --pf-semantic-font-regular: var(--pf-gray-color-50);
704
+ --pf-semantic-font-inverted: var(--pf-gray-color-900);
705
+ --pf-semantic-font-soft: var(--pf-tertiary-color-300);
706
+ --pf-semantic-font-mute: var(--pf-tertiary-color-400);
707
+ --pf-semantic-font-link: var(--pf-secondary-color-400);
708
+ --pf-semantic-font-placeholder: var(--pf-tertiary-color-450);
709
+ --pf-semantic-font-disabled: var(--pf-tertiary-color-700);
710
+ --pf-semantic-font-accent: var(--pf-secondary-color-400);
711
+ --pf-semantic-font-error: var(--pf-red-color-300);
712
+ --pf-semantic-font-success: var(--pf-green-color-400);
713
+ --pf-semantic-elevation-1: var(--pf-opacity-black-200);
714
+ --pf-semantic-elevation-2: var(--pf-opacity-black-250);
715
+ --pf-semantic-elevation-3: var(--pf-opacity-black-300);
716
+ --pf-semantic-elevation-4: var(--pf-opacity-black-400);
717
+ --pf-semantic-elevation-5: var(--pf-opacity-black-450);
446
718
  }
447
719
 
448
720
  .cursor--pointer {
@@ -2617,172 +2889,172 @@ p,
2617
2889
  background-color: var(--pf-teal-color-1000);
2618
2890
  }
2619
2891
 
2620
- .color-brand {
2621
- color: var(--pf-brand-color);
2892
+ .color-blue {
2893
+ color: var(--pf-blue-color);
2622
2894
  }
2623
2895
 
2624
- .bg-brand {
2625
- background-color: var(--pf-brand-color);
2896
+ .bg-blue {
2897
+ background-color: var(--pf-blue-color);
2626
2898
  }
2627
2899
 
2628
- .color-brand-50 {
2629
- color: var(--pf-brand-color-50);
2900
+ .color-blue-50 {
2901
+ color: var(--pf-blue-color-50);
2630
2902
  }
2631
2903
 
2632
- .bg-brand-50 {
2633
- background-color: var(--pf-brand-color-50);
2904
+ .bg-blue-50 {
2905
+ background-color: var(--pf-blue-color-50);
2634
2906
  }
2635
2907
 
2636
- .color-brand-100 {
2637
- color: var(--pf-brand-color-100);
2908
+ .color-blue-100 {
2909
+ color: var(--pf-blue-color-100);
2638
2910
  }
2639
2911
 
2640
- .bg-brand-100 {
2641
- background-color: var(--pf-brand-color-100);
2912
+ .bg-blue-100 {
2913
+ background-color: var(--pf-blue-color-100);
2642
2914
  }
2643
2915
 
2644
- .color-brand-150 {
2645
- color: var(--pf-brand-color-150);
2916
+ .color-blue-150 {
2917
+ color: var(--pf-blue-color-150);
2646
2918
  }
2647
2919
 
2648
- .bg-brand-150 {
2649
- background-color: var(--pf-brand-color-150);
2920
+ .bg-blue-150 {
2921
+ background-color: var(--pf-blue-color-150);
2650
2922
  }
2651
2923
 
2652
- .color-brand-200 {
2653
- color: var(--pf-brand-color-200);
2924
+ .color-blue-200 {
2925
+ color: var(--pf-blue-color-200);
2654
2926
  }
2655
2927
 
2656
- .bg-brand-200 {
2657
- background-color: var(--pf-brand-color-200);
2928
+ .bg-blue-200 {
2929
+ background-color: var(--pf-blue-color-200);
2658
2930
  }
2659
2931
 
2660
- .color-brand-250 {
2661
- color: var(--pf-brand-color-250);
2932
+ .color-blue-250 {
2933
+ color: var(--pf-blue-color-250);
2662
2934
  }
2663
2935
 
2664
- .bg-brand-250 {
2665
- background-color: var(--pf-brand-color-250);
2936
+ .bg-blue-250 {
2937
+ background-color: var(--pf-blue-color-250);
2666
2938
  }
2667
2939
 
2668
- .color-brand-300 {
2669
- color: var(--pf-brand-color-300);
2940
+ .color-blue-300 {
2941
+ color: var(--pf-blue-color-300);
2670
2942
  }
2671
2943
 
2672
- .bg-brand-300 {
2673
- background-color: var(--pf-brand-color-300);
2944
+ .bg-blue-300 {
2945
+ background-color: var(--pf-blue-color-300);
2674
2946
  }
2675
2947
 
2676
- .color-brand-350 {
2677
- color: var(--pf-brand-color-350);
2948
+ .color-blue-350 {
2949
+ color: var(--pf-blue-color-350);
2678
2950
  }
2679
2951
 
2680
- .bg-brand-350 {
2681
- background-color: var(--pf-brand-color-350);
2952
+ .bg-blue-350 {
2953
+ background-color: var(--pf-blue-color-350);
2682
2954
  }
2683
2955
 
2684
- .color-brand-400 {
2685
- color: var(--pf-brand-color-400);
2956
+ .color-blue-400 {
2957
+ color: var(--pf-blue-color-400);
2686
2958
  }
2687
2959
 
2688
- .bg-brand-400 {
2689
- background-color: var(--pf-brand-color-400);
2960
+ .bg-blue-400 {
2961
+ background-color: var(--pf-blue-color-400);
2690
2962
  }
2691
2963
 
2692
- .color-brand-450 {
2693
- color: var(--pf-brand-color-450);
2964
+ .color-blue-450 {
2965
+ color: var(--pf-blue-color-450);
2694
2966
  }
2695
2967
 
2696
- .bg-brand-450 {
2697
- background-color: var(--pf-brand-color-450);
2968
+ .bg-blue-450 {
2969
+ background-color: var(--pf-blue-color-450);
2698
2970
  }
2699
2971
 
2700
- .color-brand-500 {
2701
- color: var(--pf-brand-color-500);
2972
+ .color-blue-500 {
2973
+ color: var(--pf-blue-color-500);
2702
2974
  }
2703
2975
 
2704
- .bg-brand-500 {
2705
- background-color: var(--pf-brand-color-500);
2976
+ .bg-blue-500 {
2977
+ background-color: var(--pf-blue-color-500);
2706
2978
  }
2707
2979
 
2708
- .color-brand-550 {
2709
- color: var(--pf-brand-color-550);
2980
+ .color-blue-550 {
2981
+ color: var(--pf-blue-color-550);
2710
2982
  }
2711
2983
 
2712
- .bg-brand-550 {
2713
- background-color: var(--pf-brand-color-550);
2984
+ .bg-blue-550 {
2985
+ background-color: var(--pf-blue-color-550);
2714
2986
  }
2715
2987
 
2716
- .color-brand-600 {
2717
- color: var(--pf-brand-color-600);
2988
+ .color-blue-600 {
2989
+ color: var(--pf-blue-color-600);
2718
2990
  }
2719
2991
 
2720
- .bg-brand-600 {
2721
- background-color: var(--pf-brand-color-600);
2992
+ .bg-blue-600 {
2993
+ background-color: var(--pf-blue-color-600);
2722
2994
  }
2723
2995
 
2724
- .color-brand-650 {
2725
- color: var(--pf-brand-color-650);
2996
+ .color-blue-650 {
2997
+ color: var(--pf-blue-color-650);
2726
2998
  }
2727
2999
 
2728
- .bg-brand-650 {
2729
- background-color: var(--pf-brand-color-650);
3000
+ .bg-blue-650 {
3001
+ background-color: var(--pf-blue-color-650);
2730
3002
  }
2731
3003
 
2732
- .color-brand-700 {
2733
- color: var(--pf-brand-color-700);
3004
+ .color-blue-700 {
3005
+ color: var(--pf-blue-color-700);
2734
3006
  }
2735
3007
 
2736
- .bg-brand-700 {
2737
- background-color: var(--pf-brand-color-700);
3008
+ .bg-blue-700 {
3009
+ background-color: var(--pf-blue-color-700);
2738
3010
  }
2739
3011
 
2740
- .color-brand-750 {
2741
- color: var(--pf-brand-color-750);
3012
+ .color-blue-750 {
3013
+ color: var(--pf-blue-color-750);
2742
3014
  }
2743
3015
 
2744
- .bg-brand-750 {
2745
- background-color: var(--pf-brand-color-750);
3016
+ .bg-blue-750 {
3017
+ background-color: var(--pf-blue-color-750);
2746
3018
  }
2747
3019
 
2748
- .color-brand-800 {
2749
- color: var(--pf-brand-color-800);
3020
+ .color-blue-800 {
3021
+ color: var(--pf-blue-color-800);
2750
3022
  }
2751
3023
 
2752
- .bg-brand-800 {
2753
- background-color: var(--pf-brand-color-800);
3024
+ .bg-blue-800 {
3025
+ background-color: var(--pf-blue-color-800);
2754
3026
  }
2755
3027
 
2756
- .color-brand-850 {
2757
- color: var(--pf-brand-color-850);
3028
+ .color-blue-850 {
3029
+ color: var(--pf-blue-color-850);
2758
3030
  }
2759
3031
 
2760
- .bg-brand-850 {
2761
- background-color: var(--pf-brand-color-850);
3032
+ .bg-blue-850 {
3033
+ background-color: var(--pf-blue-color-850);
2762
3034
  }
2763
3035
 
2764
- .color-brand-900 {
2765
- color: var(--pf-brand-color-900);
3036
+ .color-blue-900 {
3037
+ color: var(--pf-blue-color-900);
2766
3038
  }
2767
3039
 
2768
- .bg-brand-900 {
2769
- background-color: var(--pf-brand-color-900);
3040
+ .bg-blue-900 {
3041
+ background-color: var(--pf-blue-color-900);
2770
3042
  }
2771
3043
 
2772
- .color-brand-950 {
2773
- color: var(--pf-brand-color-950);
3044
+ .color-blue-950 {
3045
+ color: var(--pf-blue-color-950);
2774
3046
  }
2775
3047
 
2776
- .bg-brand-950 {
2777
- background-color: var(--pf-brand-color-950);
3048
+ .bg-blue-950 {
3049
+ background-color: var(--pf-blue-color-950);
2778
3050
  }
2779
3051
 
2780
- .color-brand-1000 {
2781
- color: var(--pf-brand-color-1000);
3052
+ .color-blue-1000 {
3053
+ color: var(--pf-blue-color-1000);
2782
3054
  }
2783
3055
 
2784
- .bg-brand-1000 {
2785
- background-color: var(--pf-brand-color-1000);
3056
+ .bg-blue-1000 {
3057
+ background-color: var(--pf-blue-color-1000);
2786
3058
  }
2787
3059
 
2788
3060
  .color-success {
@@ -5440,22 +5712,22 @@ p,
5440
5712
  --pf-background-color-tertiary: var(--pf-gray-color-200);
5441
5713
  --pf-background-color-quaternary: var(--pf-gray-color-250);
5442
5714
  --pf-background-color-accent: var(--pf-secondary-color-200);
5443
- --pf-background-color-highlight: var(--pf-brand-color-250);
5444
- --pf-background-brand-solid: var(--pf-brand-color-500);
5445
- --pf-background-brand-hover: var(--pf-brand-color-600);
5715
+ --pf-background-color-highlight: var(--pf-blue-color-250);
5716
+ --pf-background-brand-solid: var(--pf-blue-color-500);
5717
+ --pf-background-brand-hover: var(--pf-blue-color-600);
5446
5718
  --pf-background-color-inverted: var(--pf-tertiary-color-900);
5447
5719
  --pf-font-color: var(--pf-gray-color-900);
5448
5720
  --pf-font-color-inverted: var(--pf-gray-color-50);
5449
5721
  --pf-font-color-soft: var(--pf-gray-color-700);
5450
5722
  --pf-font-color-muted: var(--pf-gray-color-800);
5451
5723
  --pf-font-color-placeholder: var(--pf-gray-color-450);
5452
- --pf-font-color-accent: var(--pf-brand-color-500);
5724
+ --pf-font-color-accent: var(--pf-blue-color-500);
5453
5725
  --pf-font-color-disabled: var(--pf-gray-color-400);
5454
- --pf-link-color: var(--pf-brand-color-500);
5455
- --pf-link-hover-color: var(--pf-brand-color-600);
5726
+ --pf-link-color: var(--pf-blue-color-500);
5727
+ --pf-link-hover-color: var(--pf-blue-color-600);
5456
5728
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
5457
5729
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
5458
- --pf-active-link-color: var(--pf-brand-color-500);
5730
+ --pf-active-link-color: var(--pf-blue-color-500);
5459
5731
  --pf-line-chart-color-one: #2b97af;
5460
5732
  --pf-line-chart-color-two: #3ca7bd;
5461
5733
  --pf-line-chart-color-three: #4db8cb;
@@ -5473,8 +5745,8 @@ p,
5473
5745
  --pf-background-color-secondary: var(--pf-primary-color-800);
5474
5746
  --pf-background-color-tertiary: var(--pf-primary-color-600);
5475
5747
  --pf-background-color-quaternary: var(--pf-primary-color-500);
5476
- --pf-background-color-accent: var(--pf-brand-color-800);
5477
- --pf-background-color-highlight: var(--pf-brand-color-700);
5748
+ --pf-background-color-accent: var(--pf-blue-color-800);
5749
+ --pf-background-color-highlight: var(--pf-blue-color-700);
5478
5750
  --pf-background-brand-solid: var(--pf-secondary-color-450);
5479
5751
  --pf-background-brand-hover: var(--pf-secondary-color-600);
5480
5752
  --pf-background-color-inverted: var(--pf-tertiary-color-50);
@@ -5556,16 +5828,16 @@ a:hover,
5556
5828
  }
5557
5829
 
5558
5830
  :root [data-theme=light] {
5559
- --pf-button-solid-background-color: var(--pf-brand-color-500);
5831
+ --pf-button-solid-background-color: var(--pf-blue-color-500);
5560
5832
  --pf-button-solid-color: var(--pf-white-color);
5561
- --pf-button-solid-hover-background-color: var(--pf-brand-color-600);
5562
- --pf-button-solid-focus-background-color: var(--pf-brand-color-600);
5833
+ --pf-button-solid-hover-background-color: var(--pf-blue-color-600);
5834
+ --pf-button-solid-focus-background-color: var(--pf-blue-color-600);
5563
5835
  --pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
5564
5836
  --pf-button-solid-disabled-color: var(--pf-gray-color-500);
5565
- --pf-button-outline-color: var(--pf-brand-color-500);
5566
- --pf-button-outline-border-color: var(--pf-brand-color-500);
5567
- --pf-button-outline-hover-color: var(--pf-brand-color-500);
5568
- --pf-button-outline-hover-background-color: var(--pf-brand-color-100);
5837
+ --pf-button-outline-color: var(--pf-blue-color-500);
5838
+ --pf-button-outline-border-color: var(--pf-blue-color-500);
5839
+ --pf-button-outline-hover-color: var(--pf-blue-color-500);
5840
+ --pf-button-outline-hover-background-color: var(--pf-blue-color-100);
5569
5841
  --pf-button-outline-disabled-color: var(--pf-gray-color-250);
5570
5842
  --pf-button-link-color: var(--pf-link-color);
5571
5843
  --pf-button-link-hover-color: var(--pf-link-hover-color);
@@ -5585,11 +5857,11 @@ a:hover,
5585
5857
  --pf-button-destructive-focus-color: var(--pf-white-color);
5586
5858
  --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
5587
5859
  --pf-button-destructive-disabled-color: var(--pf-white-color);
5588
- --pf-button-soft-color: var(--pf-brand-color-500);
5860
+ --pf-button-soft-color: var(--pf-blue-color-500);
5589
5861
  --pf-button-soft-border-color: transparent;
5590
- --pf-button-soft-hover-color: var(--pf-brand-color-500);
5591
- --pf-button-soft-hover-background-color: var(--pf-brand-color-150);
5592
- --pf-button-soft-focus-color: var(--pf-brand-color-500);
5862
+ --pf-button-soft-hover-color: var(--pf-blue-color-500);
5863
+ --pf-button-soft-hover-background-color: var(--pf-blue-color-150);
5864
+ --pf-button-soft-focus-color: var(--pf-blue-color-500);
5593
5865
  --pf-button-soft-focus-border-color: transparent;
5594
5866
  --pf-button-soft-disabled-color: var(--pf-gray-color-500);
5595
5867
  --pf-button-soft-disabled-border-color: transparent;