@indico-data/design-system 2.60.15 → 3.0.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 (61) hide show
  1. package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts +1 -1
  2. package/lib/components/index.d.ts +1 -1
  3. package/lib/components/modal/ConfirmationModal.d.ts +2 -0
  4. package/lib/components/modal/Modal.d.ts +1 -1
  5. package/lib/components/modal/Modal.stories.d.ts +2 -1
  6. package/lib/components/modal/index.d.ts +1 -0
  7. package/lib/components/modal/types.d.ts +15 -0
  8. package/lib/index.css +1827 -677
  9. package/lib/index.d.ts +19 -5
  10. package/lib/index.esm.css +1827 -677
  11. package/lib/index.esm.js +25 -6
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +25 -5
  14. package/lib/index.js.map +1 -1
  15. package/lib/types.d.ts +1 -1
  16. package/package.json +1 -1
  17. package/src/components/badge/styles/Badge.scss +6 -6
  18. package/src/components/button/styles/Button.scss +7 -13
  19. package/src/components/button/styles/_variables.scss +47 -48
  20. package/src/components/card/styles/Card.scss +15 -6
  21. package/src/components/floatUI/styles/_variables.scss +3 -3
  22. package/src/components/forms/date/datePicker/styles/DatePicker.scss +15 -16
  23. package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx +1 -1
  24. package/src/components/forms/form/styles/Form.scss +25 -25
  25. package/src/components/forms/select/__tests__/Select.test.tsx +11 -6
  26. package/src/components/forms/select/styles/Select.scss +9 -10
  27. package/src/components/index.ts +1 -1
  28. package/src/components/menu/styles/_variables.scss +8 -8
  29. package/src/components/modal/ConfirmationModal.mdx +69 -0
  30. package/src/components/modal/ConfirmationModal.tsx +103 -0
  31. package/src/components/modal/Modal.mdx +72 -42
  32. package/src/components/modal/Modal.stories.tsx +131 -40
  33. package/src/components/modal/Modal.tsx +20 -3
  34. package/src/components/modal/__tests__/Modal.test.tsx +12 -0
  35. package/src/components/modal/index.ts +1 -0
  36. package/src/components/modal/styles/Modal.scss +51 -20
  37. package/src/components/modal/types.ts +18 -0
  38. package/src/components/pill/Pill.stories.tsx +28 -14
  39. package/src/components/pill/Pill.tsx +7 -1
  40. package/src/components/pill/styles/Pill.scss +79 -55
  41. package/src/components/tanstackTable/styles/_variables.scss +23 -24
  42. package/src/components/tanstackTable/styles/table.scss +3 -3
  43. package/src/components/toast/Toast.mdx +32 -1
  44. package/src/components/toast/Toast.stories.tsx +32 -9
  45. package/src/components/toast/styles/Toast.scss +62 -12
  46. package/src/components/tooltip/Tooltip.tsx +6 -2
  47. package/src/components/tooltip/styles/Tooltip.scss +6 -2
  48. package/src/components/truncate/Truncate.tsx +1 -1
  49. package/src/index.ts +1 -1
  50. package/src/styles/_borders.scss +35 -4
  51. package/src/styles/_colors.scss +1 -1
  52. package/src/styles/globals.scss +107 -25
  53. package/src/styles/storybook.scss +23 -6
  54. package/src/styles/variables/_borders.scss +23 -7
  55. package/src/styles/variables/_padding.scss +0 -4
  56. package/src/styles/variables/themes/dark.scss +193 -133
  57. package/src/styles/variables/themes/light.scss +193 -133
  58. package/src/stylesAndAnimations/borders/BorderColor.tsx +87 -40
  59. package/src/stylesAndAnimations/colors/Swatch.tsx +0 -1
  60. package/src/stylesAndAnimations/colors/constants.ts +316 -193
  61. package/src/types.ts +5 -3
package/lib/index.esm.css CHANGED
@@ -33,120 +33,174 @@
33
33
  }
34
34
 
35
35
  :root [data-theme=light] {
36
- --pf-primary-color: #b4cadf;
37
- --pf-primary-color-50: #5b8ab7;
38
- --pf-primary-color-100: #6d96c3;
39
- --pf-primary-color-200: #7b9fc5;
40
- --pf-primary-color-300: #90adc8;
41
- --pf-primary-color-400: #a3bdd4;
42
- --pf-primary-color-500: #b4cadf;
43
- --pf-primary-color-600: #c4d8eb;
44
- --pf-primary-color-700: #d2e1f0;
45
- --pf-primary-color-800: #dfeaf3;
46
- --pf-primary-color-900: #eef4fa;
47
- --pf-primary-color-950: #f6f9fc;
48
- --pf-secondary-color: #3892f3;
49
- --pf-secondary-color-50: #002b66;
50
- --pf-secondary-color-100: #003b8c;
51
- --pf-secondary-color-200: #004cb0;
52
- --pf-secondary-color-300: #0060d6;
53
- --pf-secondary-color-400: #0070f5;
54
- --pf-secondary-color-500: #3892f3;
55
- --pf-secondary-color-550: #66adff;
56
- --pf-secondary-color-600: #91c5ff;
57
- --pf-secondary-color-700: #b8dbff;
58
- --pf-secondary-color-800: #d4eaff;
59
- --pf-secondary-color-900: #e0f2ff;
60
- --pf-secondary-color-950: #eaf4ff;
61
- --pf-tertiary-color: #8394a9;
62
- --pf-tertiary-color-50: #142838;
63
- --pf-tertiary-color-100: #203148;
64
- --pf-tertiary-color-200: #2e4563;
65
- --pf-tertiary-color-300: #3e587a;
66
- --pf-tertiary-color-400: #55677f;
67
- --pf-tertiary-color-450: #6d8097;
68
- --pf-tertiary-color-500: #8394a9;
69
- --pf-tertiary-color-600: #93a3bb;
70
- --pf-tertiary-color-700: #a5b4c6;
71
- --pf-tertiary-color-800: #b2bfd0;
72
- --pf-tertiary-color-900: #c4ccd7;
73
- --pf-tertiary-color-950: #d6dde5;
74
- --pf-gray-color: #525252;
75
- --pf-gray-color-50: #0a0a0a;
76
- --pf-gray-color-100: #171717;
77
- --pf-gray-color-200: #262626;
78
- --pf-gray-color-300: #404040;
79
- --pf-gray-color-400: #525252;
80
- --pf-gray-color-450: #737373;
81
- --pf-gray-color-500: #737373;
82
- --pf-gray-color-600: #989898;
83
- --pf-gray-color-700: #bdbdbd;
84
- --pf-gray-color-800: #dcdcdc;
85
- --pf-gray-color-900: #efefef;
86
- --pf-gray-color-950: #f6f6f6;
87
- --pf-red-color: #f4a5ae;
88
- --pf-red-color-50: #5b0d16;
89
- --pf-red-color-100: #761821;
90
- --pf-red-color-200: #8f252f;
91
- --pf-red-color-300: #ad303d;
92
- --pf-red-color-350: #b8424c;
93
- --pf-red-color-400: #c84a57;
94
- --pf-red-color-450: #dc5a66;
95
- --pf-red-color-500: #f4a5ae;
96
- --pf-red-color-600: #ebb6b8;
97
- --pf-red-color-700: #f9d5dc;
98
- --pf-red-color-800: #f4d7d8;
99
- --pf-red-color-850: #fae9e9;
100
- --pf-red-color-900: #fcebeb;
101
- --pf-red-color-950: #fcf5f4;
102
- --pf-orange-color: #ff873f;
103
- --pf-orange-color-50: #721e01;
104
- --pf-orange-color-100: #992702;
105
- --pf-orange-color-200: #b33403;
106
- --pf-orange-color-300: #d94b04;
107
- --pf-orange-color-400: #f25c05;
108
- --pf-orange-color-500: #ff873f;
109
- --pf-orange-color-600: #ffa26d;
110
- --pf-orange-color-700: #ffc9aa;
111
- --pf-orange-color-800: #ffe3d1;
112
- --pf-orange-color-900: #fff3ec;
113
- --pf-orange-color-950: #fffaf7;
114
- --pf-yellow-color: #ffa400;
115
- --pf-yellow-color-50: #312602;
116
- --pf-yellow-color-100: #664200;
117
- --pf-yellow-color-200: #895c00;
118
- --pf-yellow-color-300: #b37300;
119
- --pf-yellow-color-400: #e08e00;
120
- --pf-yellow-color-500: #ffa400;
121
- --pf-yellow-color-600: #ffb621;
122
- --pf-yellow-color-700: #ffc344;
123
- --pf-yellow-color-800: #ffd369;
124
- --pf-yellow-color-900: #ffeaa1;
125
- --pf-yellow-color-950: #fff4d0;
126
- --pf-green-color: #39c29d;
127
- --pf-green-color-50: #003325;
128
- --pf-green-color-100: #075f48;
129
- --pf-green-color-200: #0a906c;
130
- --pf-green-color-300: #03aaaa;
131
- --pf-green-color-400: #26b890;
132
- --pf-green-color-500: #39c29d;
133
- --pf-green-color-600: #52ccae;
134
- --pf-green-color-700: #6cd6ba;
135
- --pf-green-color-800: #83e2c7;
136
- --pf-green-color-900: #c1f1e2;
137
- --pf-green-color-950: #83e2c7;
138
- --pf-purple-color: #9776d3;
139
- --pf-purple-color-50: #291a40;
140
- --pf-purple-color-100: #55377b;
141
- --pf-purple-color-200: #664196;
142
- --pf-purple-color-300: #7a4eb3;
143
- --pf-purple-color-400: #8b60c7;
144
- --pf-purple-color-500: #9776d3;
145
- --pf-purple-color-600: #b6a3e2;
146
- --pf-purple-color-700: #cfc4ee;
147
- --pf-purple-color-800: #e4dff5;
148
- --pf-purple-color-900: #f1edfa;
149
- --pf-purple-color-950: #f7f6fc;
36
+ --pf-primary-color: #50647c;
37
+ --pf-primary-color-50: #f9fafb;
38
+ --pf-primary-color-100: #f3f5f7;
39
+ --pf-primary-color-150: #eceff3;
40
+ --pf-primary-color-200: #e6eaef;
41
+ --pf-primary-color-250: #d3dbe3;
42
+ --pf-primary-color-300: #c1cbd7;
43
+ --pf-primary-color-400: #7c92ab;
44
+ --pf-primary-color-450: #5f7895;
45
+ --pf-primary-color-500: #50647c;
46
+ --pf-primary-color-600: #243447;
47
+ --pf-primary-color-700: #192534;
48
+ --pf-primary-color-800: #111b28;
49
+ --pf-primary-color-900: #0c141d;
50
+ --pf-secondary-color: #1474b8;
51
+ --pf-secondary-color-50: #f8fafc;
52
+ --pf-secondary-color-100: #f1f5f9;
53
+ --pf-secondary-color-150: #e8f1f7;
54
+ --pf-secondary-color-200: #deedf7;
55
+ --pf-secondary-color-250: #c6dff1;
56
+ --pf-secondary-color-300: #add1eb;
57
+ --pf-secondary-color-400: #3ea2ea;
58
+ --pf-secondary-color-450: #188bdc;
59
+ --pf-secondary-color-500: #1474b8;
60
+ --pf-secondary-color-600: #0f578a;
61
+ --pf-secondary-color-700: #1d4058;
62
+ --pf-secondary-color-800: #132939;
63
+ --pf-secondary-color-900: #0e151b;
64
+ --pf-tertiary-color: #6a7798;
65
+ --pf-tertiary-color-50: #f8fafb;
66
+ --pf-tertiary-color-100: #f4f7f9;
67
+ --pf-tertiary-color-150: #ebf0f4;
68
+ --pf-tertiary-color-200: #dae3eb;
69
+ --pf-tertiary-color-250: #c3d2de;
70
+ --pf-tertiary-color-300: #aabbcf;
71
+ --pf-tertiary-color-400: #94a5c0;
72
+ --pf-tertiary-color-450: #8593b3;
73
+ --pf-tertiary-color-500: #6a7798;
74
+ --pf-tertiary-color-600: #58637b;
75
+ --pf-tertiary-color-700: #4b5364;
76
+ --pf-tertiary-color-800: #2c303a;
77
+ --pf-tertiary-color-900: #111317;
78
+ --pf-gray-color: #b2b2b2;
79
+ --pf-gray-color-50: #ffffff;
80
+ --pf-gray-color-100: #f8f8f8;
81
+ --pf-gray-color-150: #f2f2f2;
82
+ --pf-gray-color-200: #e6e6e6;
83
+ --pf-gray-color-250: #d9d9d9;
84
+ --pf-gray-color-300: #cccccc;
85
+ --pf-gray-color-400: #b2b2b2;
86
+ --pf-gray-color-450: #999999;
87
+ --pf-gray-color-500: #7f7f7f;
88
+ --pf-gray-color-600: #666666;
89
+ --pf-gray-color-700: #4d4d4d;
90
+ --pf-gray-color-800: #333333;
91
+ --pf-gray-color-900: #000000;
92
+ --pf-red-color: #a3292d;
93
+ --pf-red-color-50: #fdf6f8;
94
+ --pf-red-color-100: #fceeee;
95
+ --pf-red-color-150: #fae5e6;
96
+ --pf-red-color-200: #f9dcdd;
97
+ --pf-red-color-250: #f6acaf;
98
+ --pf-red-color-300: #f28c90;
99
+ --pf-red-color-400: #ea3e44;
100
+ --pf-red-color-450: #d0252a;
101
+ --pf-red-color-500: #a3292d;
102
+ --pf-red-color-600: #732629;
103
+ --pf-red-color-700: #522325;
104
+ --pf-red-color-800: #321b1c;
105
+ --pf-red-color-900: #181011;
106
+ --pf-pink-color: #a3292d;
107
+ --pf-pink-color-50: #fbf8f9;
108
+ --pf-pink-color-100: #f8f2f4;
109
+ --pf-pink-color-150: #f4ebee;
110
+ --pf-pink-color-200: #f1e4e9;
111
+ --pf-pink-color-250: #eacdd7;
112
+ --pf-pink-color-300: #ebadc3;
113
+ --pf-pink-color-400: #e6417b;
114
+ --pf-pink-color-450: #c3285e;
115
+ --pf-pink-color-500: #a32954;
116
+ --pf-pink-color-600: #6b2e43;
117
+ --pf-pink-color-700: #4c2935;
118
+ --pf-pink-color-800: #321b23;
119
+ --pf-pink-color-900: #1b0e13;
120
+ --pf-orange-color: #994b33;
121
+ --pf-orange-color-50: #fcf9f7;
122
+ --pf-orange-color-100: #faf2f0;
123
+ --pf-orange-color-150: #f7ece8;
124
+ --pf-orange-color-200: #f7e4de;
125
+ --pf-orange-color-250: #f4cec2;
126
+ --pf-orange-color-300: #f5b6a3;
127
+ --pf-orange-color-400: #ea673e;
128
+ --pf-orange-color-450: #c45331;
129
+ --pf-orange-color-500: #994b33;
130
+ --pf-orange-color-600: #6b3c2e;
131
+ --pf-orange-color-700: #522e23;
132
+ --pf-orange-color-800: #32201b;
133
+ --pf-orange-color-900: #1b110e;
134
+ --pf-yellow-color: #ad791f;
135
+ --pf-yellow-color-50: #fdfbf7;
136
+ --pf-yellow-color-100: #fcf7ee;
137
+ --pf-yellow-color-150: #faf3e5;
138
+ --pf-yellow-color-200: #f9eedc;
139
+ --pf-yellow-color-250: #f4e2c2;
140
+ --pf-yellow-color-300: #f0d6a8;
141
+ --pf-yellow-color-400: #eaab3e;
142
+ --pf-yellow-color-450: #dc9518;
143
+ --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-600: #825b17;
145
+ --pf-yellow-color-700: #58421d;
146
+ --pf-yellow-color-800: #32291b;
147
+ --pf-yellow-color-900: #1b160e;
148
+ --pf-green-color: #14b869;
149
+ --pf-green-color-50: #f7fdfa;
150
+ --pf-green-color-100: #effbf5;
151
+ --pf-green-color-150: #e7f9f0;
152
+ --pf-green-color-200: #def7eb;
153
+ --pf-green-color-250: #c2f4dc;
154
+ --pf-green-color-300: #a8f0cd;
155
+ --pf-green-color-400: #3eea97;
156
+ --pf-green-color-450: #18dc7e;
157
+ --pf-green-color-500: #14b869;
158
+ --pf-green-color-600: #17824e;
159
+ --pf-green-color-700: #175e3c;
160
+ --pf-green-color-800: #173627;
161
+ --pf-green-color-900: #0e1b15;
162
+ --pf-teal-color: #29a3a3;
163
+ --pf-teal-color-50: #f6fdfd;
164
+ --pf-teal-color-100: #eefcfc;
165
+ --pf-teal-color-150: #e5fafa;
166
+ --pf-teal-color-200: #dcf9f9;
167
+ --pf-teal-color-250: #bff8f8;
168
+ --pf-teal-color-300: #a3f5f5;
169
+ --pf-teal-color-400: #3eeaea;
170
+ --pf-teal-color-450: #25d0d0;
171
+ --pf-teal-color-500: #29a3a3;
172
+ --pf-teal-color-600: #267373;
173
+ --pf-teal-color-700: #235252;
174
+ --pf-teal-color-800: #1b3232;
175
+ --pf-teal-color-900: #101818;
176
+ --pf-brand-color: #2960a3;
177
+ --pf-brand-color-50: #f6fafd;
178
+ --pf-brand-color-100: #eef4fc;
179
+ --pf-brand-color-150: #dce9f9;
180
+ --pf-brand-color-200: #eef4fc;
181
+ --pf-brand-color-250: #accdf6;
182
+ --pf-brand-color-300: #8cbaf2;
183
+ --pf-brand-color-400: #3e8bea;
184
+ --pf-brand-color-450: #0070f5;
185
+ --pf-brand-color-500: #2960a3;
186
+ --pf-brand-color-600: #264973;
187
+ --pf-brand-color-700: #233852;
188
+ --pf-brand-color-800: #1b2532;
189
+ --pf-brand-color-900: #101418;
190
+ --pf-purple-color: #5c29a3;
191
+ --pf-purple-color-50: #f9f6fc;
192
+ --pf-purple-color-100: #f4f0fa;
193
+ --pf-purple-color-150: #eee8f7;
194
+ --pf-purple-color-200: #e9def7;
195
+ --pf-purple-color-250: #d8c6f1;
196
+ --pf-purple-color-300: #c7adeb;
197
+ --pf-purple-color-400: #8849df;
198
+ --pf-purple-color-450: #6e31c4;
199
+ --pf-purple-color-500: #5c29a3;
200
+ --pf-purple-color-600: #451f7a;
201
+ --pf-purple-color-700: #361d58;
202
+ --pf-purple-color-800: #241736;
203
+ --pf-purple-color-900: #130e1b;
150
204
  --pf-white-color: #ffffff;
151
205
  --pf-white-color-1: rgba(255, 255, 255, 0.01);
152
206
  --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -177,133 +231,185 @@
177
231
  --pf-black-color-80: rgba(0, 0, 0, 0.8);
178
232
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
179
233
  --pf-black-color-100: rgba(0, 0, 0, 1);
180
- --pf-error-color: var(--pf-red-color);
181
- --pf-success-color: var(--pf-green-color);
182
- --pf-warning-color: var(--pf-yellow-color-300);
183
- --pf-neutral-color: var(--pf-gray-color-100);
184
- --pf-info-color: var(--pf-secondary-color-200);
185
- --pf-brand-color: var(--pf-secondary-color-550);
186
- --pf-pending-color: var(--pf-red-color-900);
187
- --pf-link-color: var(--pf-gray-color-300);
188
- --pf-link-hover-color: var(--pf-gray-color-100);
234
+ --pf-error-color: var(--pf-red-color-450);
235
+ --pf-success-color: var(--pf-green-color-500);
236
+ --pf-warning-color: var(--pf-yellow-color-400);
237
+ --pf-neutral-color: var(--pf-gray-color-500);
238
+ --pf-info-color: var(--pf-secondary-color-450);
239
+ --pf-brand-color: var(--pf-brand-color-450);
240
+ --pf-pending-color: var(--pf-orange-color-400);
189
241
  }
190
242
 
191
243
  :root [data-theme=dark],
192
244
  :root {
193
- --pf-primary-color: #394c6b;
194
- --pf-primary-color-50: #bcc7da;
195
- --pf-primary-color-100: #7989b5;
196
- --pf-primary-color-200: #8593b3;
197
- --pf-primary-color-300: #7488a4;
198
- --pf-primary-color-400: #5c708c;
199
- --pf-primary-color-500: #394c6b;
200
- --pf-primary-color-600: #233346;
201
- --pf-primary-color-700: #182432;
202
- --pf-primary-color-800: #101a26;
203
- --pf-primary-color-900: #141b24;
204
- --pf-primary-color-950: #0c141d;
205
- --pf-secondary-color: #198bdc;
206
- --pf-secondary-color-50: #bddffa;
207
- --pf-secondary-color-100: #83c5f6;
208
- --pf-secondary-color-200: #68afee;
209
- --pf-secondary-color-300: #66a2d5;
210
- --pf-secondary-color-400: #36a1ea;
211
- --pf-secondary-color-500: #198bdc;
212
- --pf-secondary-color-550: #0070f5;
213
- --pf-secondary-color-600: #2f6a98;
214
- --pf-secondary-color-700: #0c6ebd;
215
- --pf-secondary-color-800: #0b5899;
216
- --pf-secondary-color-900: #002c4e;
217
- --pf-secondary-color-950: #112341;
218
- --pf-tertiary-color: #40464e;
219
- --pf-tertiary-color-50: #dae3eb;
220
- --pf-tertiary-color-100: #c2d4df;
221
- --pf-tertiary-color-200: #a3b2c9;
222
- --pf-tertiary-color-300: #8593b3;
223
- --pf-tertiary-color-400: #656f82;
224
- --pf-tertiary-color-450: #4d5667;
225
- --pf-tertiary-color-500: #40464e;
226
- --pf-tertiary-color-600: #334154;
227
- --pf-tertiary-color-700: #3b415b;
228
- --pf-tertiary-color-800: #344152;
229
- --pf-tertiary-color-900: #2d3444;
230
- --pf-tertiary-color-950: #283243;
231
- --pf-gray-color: #525252;
232
- --pf-gray-color-50: #f6f6f6;
233
- --pf-gray-color-100: #efefef;
234
- --pf-gray-color-200: #dcdcdc;
235
- --pf-gray-color-300: #bdbdbd;
236
- --pf-gray-color-400: #989898;
237
- --pf-gray-color-450: #737373;
238
- --pf-gray-color-500: #525252;
239
- --pf-gray-color-600: #404040;
240
- --pf-gray-color-700: #262626;
241
- --pf-gray-color-800: #171717;
242
- --pf-gray-color-900: #0a0a0a;
243
- --pf-gray-color-950: #000000;
244
- --pf-red-color: #ce6068;
245
- --pf-red-color-50: #fcf5f4;
246
- --pf-red-color-100: #fae9e9;
247
- --pf-red-color-200: #f4d7d8;
248
- --pf-red-color-300: #ebb6b8;
249
- --pf-red-color-350: #f39bb9;
250
- --pf-red-color-400: #ef76a0;
251
- --pf-red-color-450: #df8d91;
252
- --pf-red-color-500: #ce6068;
253
- --pf-red-color-600: #b94553;
254
- --pf-red-color-700: #9b3544;
255
- --pf-red-color-800: #822f3e;
256
- --pf-red-color-850: #702b39;
257
- --pf-red-color-900: #510e2b;
258
- --pf-red-color-950: #3e131b;
259
- --pf-orange-color: #f46325;
260
- --pf-orange-color-50: #fff5ed;
261
- --pf-orange-color-100: #fee9d6;
262
- --pf-orange-color-200: #fcceac;
263
- --pf-orange-color-300: #faac77;
264
- --pf-orange-color-400: #f67e41;
265
- --pf-orange-color-500: #f46325;
266
- --pf-orange-color-600: #e54311;
267
- --pf-orange-color-700: #be3010;
268
- --pf-orange-color-800: #972815;
269
- --pf-orange-color-900: #792315;
270
- --pf-orange-color-950: #420f08;
271
- --pf-yellow-color: #f29c22;
272
- --pf-yellow-color-50: #fbf7eb;
273
- --pf-yellow-color-100: #f5edcc;
274
- --pf-yellow-color-200: #ecd99c;
275
- --pf-yellow-color-300: #deb650;
276
- --pf-yellow-color-400: #d7a438;
277
- --pf-yellow-color-500: #f29c22;
278
- --pf-yellow-color-600: #c88e2a;
279
- --pf-yellow-color-700: #ac6e22;
280
- --pf-yellow-color-800: #80670c;
281
- --pf-yellow-color-900: #463703;
282
- --pf-yellow-color-950: #312602;
283
- --pf-green-color: #15b77d;
284
- --pf-green-color-50: #a9f1ce;
285
- --pf-green-color-100: #71e4b3;
286
- --pf-green-color-200: #14b8a6;
287
- --pf-green-color-300: #03aaaa;
288
- --pf-green-color-400: #38cf94;
289
- --pf-green-color-500: #15b77d;
290
- --pf-green-color-600: #099263;
291
- --pf-green-color-700: #087950;
292
- --pf-green-color-800: #085d43;
293
- --pf-green-color-900: #084c38;
294
- --pf-green-color-950: #032b20;
295
- --pf-purple-color: #9776d3;
296
- --pf-purple-color-50: #f7f6fc;
297
- --pf-purple-color-100: #f1edfa;
298
- --pf-purple-color-200: #e4dff5;
299
- --pf-purple-color-300: #cfc4ee;
300
- --pf-purple-color-400: #b6a3e2;
301
- --pf-purple-color-500: #9776d3;
302
- --pf-purple-color-600: #8b60c7;
303
- --pf-purple-color-700: #7a4eb3;
304
- --pf-purple-color-800: #664196;
305
- --pf-purple-color-900: #55377b;
306
- --pf-purple-color-950: #291a40;
245
+ --pf-primary-color: #50647c;
246
+ --pf-primary-color-50: #f9fafb;
247
+ --pf-primary-color-100: #f3f5f7;
248
+ --pf-primary-color-150: #eceff3;
249
+ --pf-primary-color-200: #e6eaef;
250
+ --pf-primary-color-250: #d3dbe3;
251
+ --pf-primary-color-300: #c1cbd7;
252
+ --pf-primary-color-400: #7c92ab;
253
+ --pf-primary-color-450: #5f7895;
254
+ --pf-primary-color-500: #50647c;
255
+ --pf-primary-color-600: #243447;
256
+ --pf-primary-color-700: #192534;
257
+ --pf-primary-color-800: #111b28;
258
+ --pf-primary-color-900: #0c141d;
259
+ --pf-secondary-color: #1474b8;
260
+ --pf-secondary-color-50: #f8fafc;
261
+ --pf-secondary-color-100: #f1f5f9;
262
+ --pf-secondary-color-150: #e8f1f7;
263
+ --pf-secondary-color-200: #deedf7;
264
+ --pf-secondary-color-250: #c6dff1;
265
+ --pf-secondary-color-300: #add1eb;
266
+ --pf-secondary-color-400: #3ea2ea;
267
+ --pf-secondary-color-450: #188bdc;
268
+ --pf-secondary-color-500: #1474b8;
269
+ --pf-secondary-color-600: #0f578a;
270
+ --pf-secondary-color-700: #1d4058;
271
+ --pf-secondary-color-800: #132939;
272
+ --pf-secondary-color-900: #0e151b;
273
+ --pf-tertiary-color: #6a7798;
274
+ --pf-tertiary-color-50: #f8fafb;
275
+ --pf-tertiary-color-100: #f4f7f9;
276
+ --pf-tertiary-color-150: #ebf0f4;
277
+ --pf-tertiary-color-200: #dae3eb;
278
+ --pf-tertiary-color-250: #c3d2de;
279
+ --pf-tertiary-color-300: #aabbcf;
280
+ --pf-tertiary-color-400: #94a5c0;
281
+ --pf-tertiary-color-450: #8593b3;
282
+ --pf-tertiary-color-500: #6a7798;
283
+ --pf-tertiary-color-600: #58637b;
284
+ --pf-tertiary-color-700: #4b5364;
285
+ --pf-tertiary-color-800: #2c303a;
286
+ --pf-tertiary-color-900: #111317;
287
+ --pf-gray-color: #b2b2b2;
288
+ --pf-gray-color-50: #ffffff;
289
+ --pf-gray-color-100: #fafafa;
290
+ --pf-gray-color-150: #f5f5f5;
291
+ --pf-gray-color-200: #f0f0f0;
292
+ --pf-gray-color-250: #ebebeb;
293
+ --pf-gray-color-300: #e6e6e6;
294
+ --pf-gray-color-400: #dedede;
295
+ --pf-gray-color-450: #c7c7c7;
296
+ --pf-gray-color-500: #b2b2b2;
297
+ --pf-gray-color-600: #8f8f8f;
298
+ --pf-gray-color-700: #5e5959;
299
+ --pf-gray-color-800: #272525;
300
+ --pf-gray-color-900: #000000;
301
+ --pf-red-color: #a3292d;
302
+ --pf-red-color-50: #fdf6f8;
303
+ --pf-red-color-100: #fceeee;
304
+ --pf-red-color-150: #fae5e6;
305
+ --pf-red-color-200: #f9dcdd;
306
+ --pf-red-color-250: #f6acaf;
307
+ --pf-red-color-300: #f28c90;
308
+ --pf-red-color-400: #ea3e44;
309
+ --pf-red-color-450: #d0252a;
310
+ --pf-red-color-500: #a3292d;
311
+ --pf-red-color-600: #732629;
312
+ --pf-red-color-700: #522325;
313
+ --pf-red-color-800: #321b1c;
314
+ --pf-red-color-900: #181011;
315
+ --pf-pink-color: #a3292d;
316
+ --pf-pink-color-50: #fbf8f9;
317
+ --pf-pink-color-100: #f8f2f4;
318
+ --pf-pink-color-150: #f4ebee;
319
+ --pf-pink-color-200: #f1e4e9;
320
+ --pf-pink-color-250: #eacdd7;
321
+ --pf-pink-color-300: #ebadc3;
322
+ --pf-pink-color-400: #e6417b;
323
+ --pf-pink-color-450: #c3285e;
324
+ --pf-pink-color-500: #a32954;
325
+ --pf-pink-color-600: #6b2e43;
326
+ --pf-pink-color-700: #4c2935;
327
+ --pf-pink-color-800: #321b23;
328
+ --pf-pink-color-900: #1b0e13;
329
+ --pf-orange-color: #994b33;
330
+ --pf-orange-color-50: #fcf9f7;
331
+ --pf-orange-color-100: #faf2f0;
332
+ --pf-orange-color-150: #f7ece8;
333
+ --pf-orange-color-200: #f7e4de;
334
+ --pf-orange-color-250: #f4cec2;
335
+ --pf-orange-color-300: #f5b6a3;
336
+ --pf-orange-color-400: #ea673e;
337
+ --pf-orange-color-450: #c45331;
338
+ --pf-orange-color-500: #994b33;
339
+ --pf-orange-color-600: #6b3c2e;
340
+ --pf-orange-color-700: #522e23;
341
+ --pf-orange-color-800: #32201b;
342
+ --pf-orange-color-900: #1b110e;
343
+ --pf-yellow-color: #ad791f;
344
+ --pf-yellow-color-50: #fdfbf7;
345
+ --pf-yellow-color-100: #fcf7ee;
346
+ --pf-yellow-color-150: #faf3e5;
347
+ --pf-yellow-color-200: #f9eedc;
348
+ --pf-yellow-color-250: #f4e2c2;
349
+ --pf-yellow-color-300: #f0d6a8;
350
+ --pf-yellow-color-400: #eaab3e;
351
+ --pf-yellow-color-450: #dc9518;
352
+ --pf-yellow-color-500: #ad791f;
353
+ --pf-yellow-color-600: #825b17;
354
+ --pf-yellow-color-700: #58421d;
355
+ --pf-yellow-color-800: #32291b;
356
+ --pf-yellow-color-900: #1b160e;
357
+ --pf-green-color: #14b869;
358
+ --pf-green-color-50: #f7fdfa;
359
+ --pf-green-color-100: #effbf5;
360
+ --pf-green-color-150: #e7f9f0;
361
+ --pf-green-color-200: #def7eb;
362
+ --pf-green-color-250: #c2f4dc;
363
+ --pf-green-color-300: #a8f0cd;
364
+ --pf-green-color-400: #3eea97;
365
+ --pf-green-color-450: #18dc7e;
366
+ --pf-green-color-500: #14b869;
367
+ --pf-green-color-600: #17824e;
368
+ --pf-green-color-700: #175e3c;
369
+ --pf-green-color-800: #173627;
370
+ --pf-green-color-900: #0e1b15;
371
+ --pf-teal-color: #29a3a3;
372
+ --pf-teal-color-50: #f6fdfd;
373
+ --pf-teal-color-100: #eefcfc;
374
+ --pf-teal-color-150: #e5fafa;
375
+ --pf-teal-color-200: #dcf9f9;
376
+ --pf-teal-color-250: #bff8f8;
377
+ --pf-teal-color-300: #a3f5f5;
378
+ --pf-teal-color-400: #3eeaea;
379
+ --pf-teal-color-450: #25d0d0;
380
+ --pf-teal-color-500: #29a3a3;
381
+ --pf-teal-color-600: #267373;
382
+ --pf-teal-color-700: #235252;
383
+ --pf-teal-color-800: #1b3232;
384
+ --pf-teal-color-900: #101818;
385
+ --pf-brand-color: #2960a3;
386
+ --pf-brand-color-50: #f6fafd;
387
+ --pf-brand-color-100: #eef4fc;
388
+ --pf-brand-color-150: #dce9f9;
389
+ --pf-brand-color-200: #eef4fc;
390
+ --pf-brand-color-250: #accdf6;
391
+ --pf-brand-color-300: #8cbaf2;
392
+ --pf-brand-color-400: #3e8bea;
393
+ --pf-brand-color-450: #0070f5;
394
+ --pf-brand-color-500: #2960a3;
395
+ --pf-brand-color-600: #264973;
396
+ --pf-brand-color-700: #233852;
397
+ --pf-brand-color-800: #1b2532;
398
+ --pf-brand-color-900: #101418;
399
+ --pf-purple-color: #5c29a3;
400
+ --pf-purple-color-50: #f9f6fc;
401
+ --pf-purple-color-100: #f4f0fa;
402
+ --pf-purple-color-150: #eee8f7;
403
+ --pf-purple-color-200: #e9def7;
404
+ --pf-purple-color-250: #d8c6f1;
405
+ --pf-purple-color-300: #c7adeb;
406
+ --pf-purple-color-400: #8849df;
407
+ --pf-purple-color-450: #6e31c4;
408
+ --pf-purple-color-500: #5c29a3;
409
+ --pf-purple-color-600: #451f7a;
410
+ --pf-purple-color-700: #361d58;
411
+ --pf-purple-color-800: #241736;
412
+ --pf-purple-color-900: #130e1b;
307
413
  --pf-white-color: #ffffff;
308
414
  --pf-white-color-1: rgba(255, 255, 255, 0.01);
309
415
  --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -334,15 +440,13 @@
334
440
  --pf-black-color-80: rgba(0, 0, 0, 0.8);
335
441
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
336
442
  --pf-black-color-100: rgba(0, 0, 0, 1);
337
- --pf-error-color: var(--pf-red-color);
338
- --pf-success-color: var(--pf-green-color);
339
- --pf-warning-color: var(--pf-yellow-color-300);
340
- --pf-neutral-color: var(--pf-gray-color-100);
341
- --pf-info-color: var(--pf-secondary-color-200);
342
- --pf-brand-color: var(--pf-secondary-color-550);
343
- --pf-pending-color: var(--pf-red-color-900);
344
- --pf-link-color: var(--pf-gray-color-300);
345
- --pf-link-hover-color: var(--pf-gray-color-100);
443
+ --pf-error-color: var(--pf-red-color-450);
444
+ --pf-success-color: var(--pf-green-color-500);
445
+ --pf-warning-color: var(--pf-yellow-color-400);
446
+ --pf-neutral-color: var(--pf-gray-color-500);
447
+ --pf-info-color: var(--pf-secondary-color-450);
448
+ --pf-brand-color: var(--pf-brand-color-450);
449
+ --pf-pending-color: var(--pf-orange-color-400);
346
450
  }
347
451
 
348
452
  :root {
@@ -371,28 +475,40 @@
371
475
  }
372
476
 
373
477
  :root [data-theme=light] {
374
- --pf-border-color: var(--pf-gray-color-800);
375
- --pf-border-color-light: var(--pf-gray-color-100);
376
- --pf-horizontal-line-color: var(--pf-gray-color-200);
478
+ --pf-border-color-primary: var(--pf-gray-color-300);
479
+ --pf-border-color-secondary: var(--pf-gray-color-250);
480
+ --pf-border-hover-color: var(--pf-gray-color-400);
481
+ --pf-border-color-soft: var(--pf-secondary-color-450);
482
+ --pf-border-color-accent: var(--pf-brand-color-450);
483
+ --pf-border-color-error: var(--pf-error-color);
484
+ --pf-border-color-warning: var(--pf-warning-color);
485
+ --pf-border-color-info: var(--pf-info-color);
486
+ --pf-border-color-success: var(--pf-success-color);
487
+ --pf-border-color-neutral: var(--pf-neutral-color);
488
+ --pf-border-color-pending: var(--pf-pending-color);
489
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
377
490
  }
378
491
 
379
492
  :root [data-theme=dark],
380
493
  :root {
381
- --pf-horizontal-line-color: var(--pf-tertiary-color-800);
382
- --pf-border-color: var(--pf-tertiary-color-800);
383
- --pf-border-color-medium: var(--pf-tertiary-color-500);
384
- --pf-border-color-light: var(--pf-white-color-100);
494
+ --pf-border-color-primary: var(--pf-tertiary-color-700);
495
+ --pf-border-color-secondary: var(--pf-primary-color-600);
496
+ --pf-border-color-soft: var(--pf-secondary-color-600);
497
+ --pf-border-color-accent: var(--pf-secondary-color-400);
498
+ --pf-border-color-error: var(--pf-error-color);
499
+ --pf-border-color-warning: var(--pf-warning-color);
500
+ --pf-border-color-info: var(--pf-info-color);
501
+ --pf-border-color-success: var(--pf-success-color);
502
+ --pf-border-color-neutral: var(--pf-neutral-color);
503
+ --pf-border-color-pending: var(--pf-pending-color);
504
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
385
505
  }
386
506
 
387
507
  :root {
388
508
  --pf-padding-0: 0;
389
- --pf-padding-0-5: 2px;
390
509
  --pf-padding-1: 4px;
391
- --pf-padding-1-5: 6px;
392
510
  --pf-padding-2: 8px;
393
- --pf-padding-2-5: 10px;
394
511
  --pf-padding-3: 12px;
395
- --pf-padding-3-5: 14px;
396
512
  --pf-padding-4: 16px;
397
513
  --pf-padding-5: 20px;
398
514
  --pf-padding-6: 24px;
@@ -475,36 +591,109 @@
475
591
  :root [data-theme=light] {
476
592
  --pf-white-color: #ffffff;
477
593
  --pf-black-color: #000000;
478
- --pf-background-color-light: var(--pf-gray-color-900);
479
- --pf-background-color: var(--pf-white-color);
480
- --pf-background-color-dark: var(--pf-gray-color-100);
481
- --pf-background-secondary-color-light: var(--pf-secondary-color-300);
482
- --pf-background-color-secondary: var(--pf-secondary-color-500);
483
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
484
- --pf-font-color: var(--pf-gray-color);
485
- --pf-font-color-emphasis: var(--pf-gray-color-800);
486
- --pf-font-color-light: var(--pf-gray-color-700);
487
- --pf-font-color-light-header: var(--pf-gray-color-600);
488
- --pf-link-color: var(--pf-secondary-color);
489
- --pf-active-link-color: var(--pf-secondary-color-300);
594
+ --pf-page-background-color: var(--pf-gray-color-100);
595
+ --pf-background-color-primary: var(--pf-gray-color-150);
596
+ --pf-background-color-secondary: var(--pf-gray-color-50);
597
+ --pf-background-color-tertiary: var(--pf-gray-color-200);
598
+ --pf-background-color-quaternary: var(--pf-gray-color-250);
599
+ --pf-background-color-accent: var(--pf-secondary-color-200);
600
+ --pf-background-color-highlight: var(--pf-brand-color-250);
601
+ --pf-background-brand-solid: var(--pf-brand-color-500);
602
+ --pf-background-brand-hover: var(--pf-brand-color-600);
603
+ --pf-background-color-inverted: var(--pf-tertiary-color-900);
604
+ --pf-font-color: var(--pf-gray-color-900);
605
+ --pf-font-color-inverted: var(--pf-gray-color-50);
606
+ --pf-font-color-soft: var(--pf-gray-color-700);
607
+ --pf-font-color-muted: var(--pf-gray-color-800);
608
+ --pf-font-color-placeholder: var(--pf-gray-color-450);
609
+ --pf-font-color-accent: var(--pf-brand-color-500);
610
+ --pf-font-color-disabled: var(--pf-gray-color-400);
611
+ --pf-font-color-error: var(--pf-error-color);
612
+ --pf-font-color-warning: var(--pf-warning-color);
613
+ --pf-font-color-info: var(--pf-info-color);
614
+ --pf-font-color-success: var(--pf-success-color);
615
+ --pf-font-color-neutral: var(--pf-neutral-color);
616
+ --pf-font-color-pending: var(--pf-pending-color);
617
+ --pf-font-color-brand: var(--pf-brand-color);
618
+ --pf-link-color: var(--pf-brand-color-500);
619
+ --pf-link-hover-color: var(--pf-brand-color-600);
620
+ --pf-secondary-link-color: var(--pf-tertiary-color-700);
621
+ --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
622
+ --pf-active-link-color: var(--pf-brand-color-500);
623
+ --pf-line-chart-color-one: #256579;
624
+ --pf-line-chart-color-two: #277a93;
625
+ --pf-line-chart-color-three: #2b97af;
626
+ --pf-line-chart-color-four: #4db8cb;
627
+ --pf-line-chart-color-five: #81d1df;
628
+ --pf-line-chart-color-six: #0e3d7e;
629
+ --pf-line-chart-color-seven: #1562c1;
630
+ --pf-line-chart-color-eight: #36a1e9;
631
+ --pf-line-chart-color-nine: #83c5f6;
632
+ --pf-line-chart-color-ten: #afd8f4;
633
+ --pf-line-chart-color-eleven: #45267d;
634
+ --pf-line-chart-color-twelve: #5d2fb1;
635
+ --pf-line-chart-color-thirteen: #7047d2;
636
+ --pf-line-chart-color-fourteen: #8d75d7;
637
+ --pf-line-chart-color-fifteen: #bdaeea;
638
+ --pf-line-chart-color-sixteen: #003b8c;
639
+ --pf-line-chart-color-seventeen: #0060d6;
640
+ --pf-line-chart-color-eighteen: #36a1ea;
641
+ --pf-line-chart-color-nineteen: #2b97af;
642
+ --pf-line-chart-color-twenty: #7047d2;
490
643
  }
491
644
 
492
645
  :root [data-theme=dark],
493
646
  :root {
494
647
  --pf-white-color: #ffffff;
495
648
  --pf-black-color: #000000;
496
- --pf-background-color-light: var(--pf-primary-color);
497
- --pf-background-color: var(--pf-primary-color-800);
498
- --pf-background-color-dark: var(--pf-primary-color-900);
499
- --pf-background-secondary-color-light: var(--pf-secondary-color-300);
500
- --pf-background-color-secondary: var(--pf-secondary-color-500);
501
- --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
502
- --pf-font-color: var(--pf-white-color);
503
- --pf-font-color-emphasis: var(--pf-gray-color-300);
504
- --pf-font-color-light: var(--pf-gray-color-100);
505
- --pf-font-color-light-header: var(--pf-primary-color-100);
506
- --pf-link-color: var(--pf-gray-color-300);
507
- --pf-active-link-color: var(--pf-gray-color-100);
649
+ --pf-page-background-color: var(--pf-primary-color-700);
650
+ --pf-background-color-primary: var(--pf-primary-color-900);
651
+ --pf-background-color-secondary: var(--pf-primary-color-800);
652
+ --pf-background-color-tertiary: var(--pf-primary-color-600);
653
+ --pf-background-color-quaternary: var(--pf-primary-color-500);
654
+ --pf-background-color-accent: var(--pf-brand-color-800);
655
+ --pf-background-color-highlight: var(--pf-brand-color-700);
656
+ --pf-background-brand-solid: var(--pf-secondary-color-450);
657
+ --pf-background-brand-hover: var(--pf-secondary-color-600);
658
+ --pf-background-color-inverted: var(--pf-tertiary-color-50);
659
+ --pf-font-color: var(--pf-gray-color-50);
660
+ --pf-font-color-inverted: var(--pf-gray-color-900);
661
+ --pf-font-color-soft: var(--pf-tertiary-color-300);
662
+ --pf-font-color-placeholder: var(--pf-tertiary-color-500);
663
+ --pf-font-color-accent: var(--pf-secondary-color-400);
664
+ --pf-font-color-disabled: var(--pf-primary-color-500);
665
+ --pf-font-color-error: var(--pf-error-color);
666
+ --pf-font-color-warning: var(--pf-warning-color);
667
+ --pf-font-color-info: var(--pf-info-color);
668
+ --pf-font-color-success: var(--pf-success-color);
669
+ --pf-font-color-neutral: var(--pf-neutral-color);
670
+ --pf-font-color-pending: var(--pf-pending-color);
671
+ --pf-font-color-brand: var(--pf-brand-color);
672
+ --pf-link-color: var(--pf-secondary-color-400);
673
+ --pf-link-hover-color: var(--pf-secondary-color-400);
674
+ --pf-secondary-link-color: var(--pf-tertiary-color-450);
675
+ --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
676
+ --pf-active-link-color: var(--pf-secondary-color-400);
677
+ --pf-line-chart-color-one: #2b97af;
678
+ --pf-line-chart-color-two: #4db8cb;
679
+ --pf-line-chart-color-three: #81d1df;
680
+ --pf-line-chart-color-four: #b5e4ec;
681
+ --pf-line-chart-color-five: #d7f1f6;
682
+ --pf-line-chart-color-six: #042d6a;
683
+ --pf-line-chart-color-seven: #0955b3;
684
+ --pf-line-chart-color-eight: #1f8fe0;
685
+ --pf-line-chart-color-nine: #5bbeed;
686
+ --pf-line-chart-color-ten: #a8dcfa;
687
+ --pf-line-chart-color-eleven: #572baf;
688
+ --pf-line-chart-color-twelve: #774dcb;
689
+ --pf-line-chart-color-thirteen: #9d81df;
690
+ --pf-line-chart-color-fourteen: #c5b5ec;
691
+ --pf-line-chart-color-fifteen: #e0d7f6;
692
+ --pf-line-chart-color-sixteen: #0070f5;
693
+ --pf-line-chart-color-seventeen: #36a1ea;
694
+ --pf-line-chart-color-eighteen: #80c3f2;
695
+ --pf-line-chart-color-nineteen: #4db8cb;
696
+ --pf-line-chart-color-twenty: #774dcb;
508
697
  }
509
698
 
510
699
  html,
@@ -534,7 +723,7 @@ a:hover,
534
723
  .react-tooltip {
535
724
  z-index: 5;
536
725
  background-color: var(--pf-tooltip-background-color);
537
- border: var(--pf-border-sm) solid var(--pf-border-color);
726
+ border: var(--pf-border-sm) solid var(--pf-border-color-primary);
538
727
  opacity: 1 !important;
539
728
  text-wrap: wrap;
540
729
  }
@@ -564,18 +753,19 @@ a:hover,
564
753
  }
565
754
 
566
755
  :root [data-theme=light] {
567
- --pf-button-solid-background-color: var(--pf-secondary-color-400);
756
+ --pf-button-solid-background-color: var(--pf-brand-color-500);
568
757
  --pf-button-solid-color: var(--pf-white-color);
569
- --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
570
- --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
571
- --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
572
- --pf-button-solid-disabled-color: var(--pf-gray-color-800);
573
- --pf-button-outline-color: var(--pf-secondary-color-400);
574
- --pf-button-outline-border-color: var(--pf-secondary-color-400);
575
- --pf-button-outline-hover-color: var(--pf-secondary-color-500);
576
- --pf-button-outline-disabled-color: var(--pf-primary-color-300);
577
- --pf-button-link-color: var(--pf-secondary-color-400);
578
- --pf-button-link-hover-color: var(--pf-secondary-color-500);
758
+ --pf-button-solid-hover-background-color: var(--pf-brand-color-600);
759
+ --pf-button-solid-focus-background-color: var(--pf-brand-color-600);
760
+ --pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
761
+ --pf-button-solid-disabled-color: var(--pf-gray-color-500);
762
+ --pf-button-outline-color: var(--pf-brand-color-500);
763
+ --pf-button-outline-border-color: var(--pf-brand-color-500);
764
+ --pf-button-outline-hover-color: var(--pf-brand-color-500);
765
+ --pf-button-outline-hover-background-color: var(--pf-brand-color-100);
766
+ --pf-button-outline-disabled-color: var(--pf-gray-color-250);
767
+ --pf-button-link-color: var(--pf-link-color);
768
+ --pf-button-link-hover-color: var(--pf-link-hover-color);
579
769
  --pf-button-link-disabled-color: var(--pf-primary-color-300);
580
770
  --pf-button-action-color: var(--pf-secondary-color-400);
581
771
  --pf-button-action-border-color: var(--pf-secondary-color-400);
@@ -584,38 +774,38 @@ a:hover,
584
774
  --pf-button-action-hover-color: var(--pf-white-color);
585
775
  --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
586
776
  --pf-button-action-disabled-color: var(--pf-primary-color-300);
587
- --pf-button-destructive-background-color: var(--pf-red-color-400);
777
+ --pf-button-destructive-background-color: var(--pf-red-color-450);
588
778
  --pf-button-destructive-color: var(--pf-white-color);
589
779
  --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
590
780
  --pf-button-destructive-hover-color: var(--pf-white-color);
591
- --pf-button-destructive-focus-background-color: var(--pf-red-color);
781
+ --pf-button-destructive-focus-background-color: var(--pf-red-color-500);
592
782
  --pf-button-destructive-focus-color: var(--pf-white-color);
593
783
  --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
594
784
  --pf-button-destructive-disabled-color: var(--pf-white-color);
595
- --pf-button-soft-color: var(--pf-primary-color-300);
596
- --pf-button-soft-border-color: var(--pf-primary-color-300);
597
- --pf-button-soft-hover-color: var(--pf-primary-color-600);
598
- --pf-button-soft-hover-border-color: var(--pf-primary-color-600);
599
- --pf-button-soft-focus-color: var(--pf-primary-color);
600
- --pf-button-soft-focus-border-color: var(--pf-primary-color);
601
- --pf-button-soft-disabled-color: var(--pf-primary-color-300);
602
- --pf-button-soft-disabled-border-color: var(--pf-primary-color-300);
785
+ --pf-button-soft-color: var(--pf-brand-color-500);
786
+ --pf-button-soft-border-color: transparent;
787
+ --pf-button-soft-hover-color: var(--pf-brand-color-500);
788
+ --pf-button-soft-hover-background-color: var(--pf-brand-color-150);
789
+ --pf-button-soft-focus-color: var(--pf-brand-color-500);
790
+ --pf-button-soft-focus-border-color: transparent;
791
+ --pf-button-soft-disabled-color: var(--pf-gray-color-500);
792
+ --pf-button-soft-disabled-border-color: transparent;
603
793
  }
604
794
 
605
795
  :root [data-theme=dark] {
606
- --pf-button-solid-background-color: var(--pf-secondary-color);
607
- --pf-button-solid-color: var(--pf-white-color);
608
- --pf-button-solid-hover-background-color: var(--pf-secondary-color-550);
609
- --pf-button-solid-focus-background-color: var(--pf-secondary-color);
610
- --pf-button-solid-disabled-background-color: var(--pf-tertiary-color-600);
611
- --pf-button-solid-disabled-color: var(--pf-tertiary-color-400);
612
- --pf-button-outline-color: var(--pf-secondary-color-300);
613
- --pf-button-outline-border-color: var(--pf-secondary-color-300);
614
- --pf-button-outline-hover-color: var(--pf-secondary-color-200);
615
- --pf-button-outline-disabled-color: var(--pf-tertiary-color-450);
616
- --pf-button-link-color: var(--pf-secondary-color-300);
617
- --pf-button-link-hover-color: var(--pf-secondary-color-200);
618
- --pf-button-link-disabled-color: var(--pf-tertiary-color-450);
796
+ --pf-button-solid-background-color: var(--pf-secondary-color-500);
797
+ --pf-button-solid-color: var(--pf-secondary-color-100);
798
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-600);
799
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color-500);
800
+ --pf-button-solid-disabled-background-color: var(--pf-tertiary-color-800);
801
+ --pf-button-solid-disabled-color: var(--pf-gray-color-600);
802
+ --pf-button-outline-color: var(--pf-secondary-color-400);
803
+ --pf-button-outline-border-color: var(--pf-secondary-color-400);
804
+ --pf-button-outline-hover-background-color: var(--pf-primary-color-700);
805
+ --pf-button-outline-disabled-color: var(--pf-tertiary-color-700);
806
+ --pf-button-link-color: var(--pf-secondary-color-450);
807
+ --pf-button-link-hover-color: var(--pf-secondary-color-400);
808
+ --pf-button-link-disabled-color: var(--pf-tertiary-color-70);
619
809
  --pf-button-action-color: var(--pf-secondary-color-300);
620
810
  --pf-button-action-border-color: #42a7ee;
621
811
  --pf-button-action-hover-background-color: var(--pf-tertiary-color-450);
@@ -623,20 +813,17 @@ a:hover,
623
813
  --pf-button-action-hover-color: var(--pf-white-color);
624
814
  --pf-button-action-disabled-border-color: var(--pf-tertiary-color-400);
625
815
  --pf-button-action-disabled-color: var(--pf-tertiary-color-400);
626
- --pf-button-destructive-background-color: var(--pf-error-color);
627
- --pf-button-destructive-color: var(--pf-white-color);
816
+ --pf-button-destructive-background-color: var(--pf-red-color-450);
817
+ --pf-button-destructive-color: var(--pf-red-color-100);
628
818
  --pf-button-destructive-hover-background-color: var(--pf-red-color-600);
629
- --pf-button-destructive-hover-color: var(--pf-white-color);
630
- --pf-button-destructive-focus-background-color: var(--pf-red-color);
631
- --pf-button-destructive-disabled-background-color: var(--pf-red-color-900);
632
- --pf-button-destructive-disabled-color: var(--pf-white-color-40);
633
- --pf-button-soft-color: var(--pf-primary-color-400);
634
- --pf-button-soft-border-color: var(--pf-primary-color-400);
635
- --pf-button-soft-hover-color: var(--pf-primary-color-300);
636
- --pf-button-soft-hover-border-color: var(--pf-primary-color-300);
637
- --pf-button-soft-focus-color: var(--pf-primary-color-400);
819
+ --pf-button-destructive-hover-color: var(--pf-red-color-50);
820
+ --pf-button-destructive-focus-background-color: var(--pf-red-color-450);
821
+ --pf-button-destructive-disabled-background-color: var(--pf-tertiary-color-800);
822
+ --pf-button-destructive-disabled-color: var(--pf-gray-color-600);
823
+ --pf-button-soft-color: var(--pf-tertiary-color-250);
824
+ --pf-button-soft-hover-background-color: var(--pf-tertiary-color-800);
825
+ --pf-button-soft-hover-color: var(--pf-tertiary-color-150);
638
826
  --pf-button-soft-disabled-color: var(--pf-tertiary-color-700);
639
- --pf-button-soft-disabled-border-color: var(--pf-tertiary-color-450);
640
827
  }
641
828
 
642
829
  .btn {
@@ -658,25 +845,25 @@ a:hover,
658
845
 
659
846
  .btn--xs {
660
847
  line-height: var(--pf-button-line-height-xs);
661
- padding: var(--pf-padding-0-5) var(--pf-padding-3);
848
+ padding: var(--pf-padding-1) var(--pf-padding-3);
662
849
  font-size: var(--pf-button-font-size-xs);
663
850
  }
664
851
 
665
852
  .btn--sm {
666
853
  line-height: var(--pf-button-line-height-sm);
667
- padding: var(--pf-padding-1-5) var(--pf-padding-3);
854
+ padding: var(--pf-padding-1) var(--pf-padding-3);
668
855
  font-size: var(--pf-button-font-size-sm);
669
856
  }
670
857
 
671
858
  .btn--md {
672
859
  line-height: var(--pf-button-line-height-md);
673
- padding: var(--pf-padding-2-5) var(--pf-padding-3-5);
860
+ padding: var(--pf-padding-2) var(--pf-padding-3);
674
861
  font-size: var(--pf-button-font-size-md);
675
862
  }
676
863
 
677
864
  .btn--lg {
678
865
  line-height: var(--pf-button-line-height-lg);
679
- padding: var(--pf-padding-2-5) var(--pf-padding-4);
866
+ padding: var(--pf-padding-2) var(--pf-padding-4);
680
867
  font-size: var(--pf-button-font-size-lg);
681
868
  }
682
869
 
@@ -761,8 +948,7 @@ a:hover,
761
948
  color: var(--pf-button-outline-color);
762
949
  }
763
950
  .btn--outline:hover:not(:disabled) {
764
- color: var(--pf-button-outline-hover-color);
765
- border-color: var(--pf-button-outline-hover-color);
951
+ background-color: var(--pf-button-outline-hover-background-color);
766
952
  }
767
953
  .btn--outline:focus {
768
954
  background-color: transparent;
@@ -792,21 +978,16 @@ a:hover,
792
978
 
793
979
  .btn--soft {
794
980
  color: var(--pf-button-soft-color);
795
- border: var(--pf-border-sm) solid var(--pf-button-soft-border-color);
796
981
  }
797
982
  .btn--soft:hover {
798
- color: var(--pf-button-soft-hover-color);
799
- border-color: var(--pf-button-soft-hover-border-color);
983
+ background-color: var(--pf-button-soft-hover-background-color);
984
+ color: var(--pf-button-soft-color);
800
985
  }
801
986
  .btn--soft:focus {
802
- background-color: transparent;
803
- color: var(--pf-button-soft-focus-color);
804
987
  border-color: var(--pf-button-soft-focus-border-color);
805
- box-shadow: var(--pf-button-soft-focus-box-shadow);
806
988
  }
807
989
  .btn--soft:disabled {
808
990
  color: var(--pf-button-soft-disabled-color);
809
- border-color: var(--pf-button-soft-disabled-border-color);
810
991
  }
811
992
 
812
993
  .btn--pill {
@@ -1397,34 +1578,34 @@ form {
1397
1578
  }
1398
1579
 
1399
1580
  :root [data-theme=light] {
1400
- --pf-form-input-border-color: var(--pf-border-color);
1401
- --pf-form-input-background-color: var(--pf-white-color);
1402
- --pf-form-input-color: var(--pf-gray-color);
1403
- --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1404
- --pf-form-input-help-color: var(--pf-gray-color-400);
1405
- --pf-form-input-hover-background-color: var(--pf-gray-color-900);
1406
- --pf-form-input-focus-background-color: var(--pf-gray-color-950);
1407
- --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1408
- --pf-form-input-focus-outline-color: var(--pf-primary-color);
1409
- --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
1410
- --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1411
- --pf-form-input-disabled-color: var(--pf-gray-color-400);
1581
+ --pf-form-input-border-color: var(--pf-border-color-primary);
1582
+ --pf-form-input-background-color: var(--pf-background-color-secondary);
1583
+ --pf-form-input-color: var(--pf-font-color);
1584
+ --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
1585
+ --pf-form-input-help-color: var(--pf-font-color-mute);
1586
+ --pf-form-input-hover-border-color: var(--pf-border-hover-color);
1587
+ --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
1588
+ --pf-form-input-focus-border-color: var(--pf-border-color-accent);
1589
+ --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
1590
+ --pf-form-input-disabled-background-color: var(--pf-page-background-color);
1591
+ --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
1592
+ --pf-form-input-disabled-color: var(--pf-font-color-disabled);
1412
1593
  }
1413
1594
 
1414
1595
  :root [data-theme=dark],
1415
1596
  :root {
1416
- --pf-form-input-border-color: var(--pf-border-color);
1417
- --pf-form-input-background-color: var(--pf-primary-color-700);
1418
- --pf-form-input-color: var(--pf-gray-color-100);
1419
- --pf-form-input-placeholder-color: var(--pf-primary-color-50);
1420
- --pf-form-input-help-color: var(--pf-gray-color-200);
1421
- --pf-form-input-hover-background-color: var(--pf-primary-color-800);
1422
- --pf-form-input-focus-background-color: var(--pf-primary-color-800);
1423
- --pf-form-input-focus-border-color: var(--pf-secondary-color-700);
1424
- --pf-form-input-focus-outline-color: var(--pf-primary-color);
1425
- --pf-form-input-disabled-background-color: var(--pf-tertiary-color-450);
1426
- --pf-form-input-disabled-border-color: var(--pf-tertiary-color-450);
1427
- --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
1597
+ --pf-form-input-border-color: var(--pf-border-color-primary);
1598
+ --pf-form-input-background-color: var(--pf-background-color-secondary);
1599
+ --pf-form-input-color: var(--pf-font-color);
1600
+ --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
1601
+ --pf-form-input-help-color: var(--pf-font-color-mute);
1602
+ --pf-form-input-hover-border-color: var(--pf-border-hover-color);
1603
+ --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
1604
+ --pf-form-input-focus-border-color: var(--pf-border-color-accent);
1605
+ --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
1606
+ --pf-form-input-disabled-background-color: var(--pf-page-background-color);
1607
+ --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
1608
+ --pf-form-input-disabled-color: var(--pf-font-color-disabled);
1428
1609
  }
1429
1610
 
1430
1611
  .time-input-wrapper input,
@@ -1476,7 +1657,7 @@ form {
1476
1657
  .password-input-wrapper textarea:hover,
1477
1658
  .textarea-wrapper input:hover,
1478
1659
  .textarea-wrapper textarea:hover {
1479
- background-color: var(--pf-form-input-hover-background-color);
1660
+ border-color: var(--pf-form-input-hover-border-color);
1480
1661
  }
1481
1662
  .time-input-wrapper input:focus,
1482
1663
  .time-input-wrapper textarea:focus,
@@ -1576,18 +1757,18 @@ form {
1576
1757
  }
1577
1758
 
1578
1759
  :root [data-theme=light] {
1579
- --pf-select-indicator-color: var(--pf-gray-color);
1580
- --pf-select-option-selected-color: var(--pf-gray-color-950);
1581
- --pf-select-option-color: var(--pf-gray-color);
1582
- --pf-select-option-hover-color: var(--pf-gray-color-900);
1760
+ --pf-select-indicator-color: var(--pf-font-color-accent);
1761
+ --pf-select-option-selected-color: var(--pf-background-color-accent);
1762
+ --pf-select-option-color: var(--pf-font-color);
1763
+ --pf-select-option-hover-color: var(--pf-background-color-highlight);
1583
1764
  }
1584
1765
 
1585
1766
  :root [data-theme=dark],
1586
1767
  :root {
1587
- --pf-select-indicator-color: var(--pf-gray-color-100);
1588
- --pf-select-option-selected-color: var(--pf-tertiary-color-700);
1589
- --pf-select-option-color: var(--pf-gray-color-100);
1590
- --pf-select-option-hover-color: var(--pf-primary-color);
1768
+ --pf-select-indicator-color: var(--pf-font-color-accent);
1769
+ --pf-select-option-selected-color: var(--pf-background-color-accent);
1770
+ --pf-select-option-color: var(--pf-font-color);
1771
+ --pf-select-option-hover-color: var(--pf-background-color-highlight);
1591
1772
  }
1592
1773
 
1593
1774
  .select-wrapper .select__control {
@@ -1597,8 +1778,7 @@ form {
1597
1778
  box-shadow: none;
1598
1779
  }
1599
1780
  .select-wrapper .select__control:hover:not(:focus) {
1600
- background-color: var(--pf-form-input-hover-background-color);
1601
- border-color: var(--pf-form-input-border-color);
1781
+ border-color: var(--pf-form-input-hover-border-color);
1602
1782
  }
1603
1783
  .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
1604
1784
  border: var(--pf-border-sm) solid var(--pf-form-input-focus-border-color);
@@ -1824,31 +2004,40 @@ body div[class*=select__single-value] {
1824
2004
 
1825
2005
  :root {
1826
2006
  --pf-card-rounded: var(--pf-rounded);
2007
+ --pf-card-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
1827
2008
  }
1828
2009
 
1829
2010
  :root [data-theme=light] {
1830
- --pf-card-background-color: var(--pf-white-color);
1831
- --pf-card-border-color: var(--pf-border-color);
2011
+ --pf-card-background-color: var(--pf-page-background-color);
2012
+ --pf-card-border-color: var(--pf-border-color-secondary);
2013
+ --pf-card-heading-color: var(--pf-font-color-soft);
2014
+ --pf-card-font-color: var(--pf-font-color);
1832
2015
  }
1833
2016
 
1834
2017
  :root [data-theme=dark],
1835
2018
  :root {
1836
- --pf-card-background-color: var(--pf-primary-color-600);
1837
- --pf-card-border-color: var(--pf-border-color);
2019
+ --pf-card-background-color: var(--pf-page-background-color);
2020
+ --pf-card-border-color: var(--pf-border-color-secondary);
2021
+ --pf-card-heading-color: var(--pf-font-color-soft);
2022
+ --pf-card-font-color: var(--pf-font-color);
1838
2023
  }
1839
2024
 
1840
2025
  .card {
1841
- border-radius: var(--pf-rounded);
2026
+ border-radius: var(--pf-rounded-lg);
1842
2027
  padding: var(--pf-padding-3);
1843
2028
  background: var(--pf-card-background-color);
1844
- border: var(--pf-border-sm) solid var(--pf-card-border-color);
1845
2029
  box-sizing: border-box;
2030
+ color: var(--pf-card-font-color);
2031
+ border: var(--pf-border-thin) solid var(--pf-card-border-color);
2032
+ box-shadow: var(--pf-card-box-shadow);
1846
2033
  }
1847
2034
 
1848
2035
  .card__header {
1849
2036
  margin-bottom: var(--pf-margin-2);
2037
+ color: var(--pf-card-heading-color);
1850
2038
  }
1851
2039
  .card__header p {
2040
+ color: var(--pf-card-font-color);
1852
2041
  font-size: var(--pf-font-size-subtitle2);
1853
2042
  }
1854
2043
 
@@ -1868,18 +2057,18 @@ body div[class*=select__single-value] {
1868
2057
  }
1869
2058
 
1870
2059
  :root [data-theme=light] {
1871
- --pf-menu-item-hover-color: var(--pf-gray-color-950);
1872
- --pf-menu-item-background-color: var(--pf-white-color);
1873
- --pf-menu-item-color: var(--pf-gray-color);
1874
- --pf-menu-item-focus-color: var(--pf-gray-color-900);
2060
+ --pf-menu-item-hover-color: var(--pf-background-color-highlight);
2061
+ --pf-menu-item-background-color: var(--pf-background-color-secondary);
2062
+ --pf-menu-item-color: var(--pf-font-color);
2063
+ --pf-menu-item-focus-color: var(--pf-background-color-accent);
1875
2064
  }
1876
2065
 
1877
2066
  :root [data-theme=dark],
1878
2067
  :root {
1879
- --pf-menu-item-hover-color: var(--pf-primary-color-500);
1880
- --pf-menu-item-background-color: var(--pf-primary-color-600);
1881
- --pf-menu-item-color: var(--pf-gray-color-50);
1882
- --pf-menu-item-focus-color: var(--pf-primary-color-500);
2068
+ --pf-menu-item-hover-color: var(--pf-background-color-highlight);
2069
+ --pf-menu-item-background-color: var(--pf-background-color-secondary);
2070
+ --pf-menu-item-color: var(--pf-font-color);
2071
+ --pf-menu-item-focus-color: var(--pf-background-color-accent);
1883
2072
  }
1884
2073
 
1885
2074
  .menu {
@@ -1915,16 +2104,16 @@ body div[class*=select__single-value] {
1915
2104
  --pf-floatui-border-radius: var(--pf-rounded);
1916
2105
  --pf-floatui-box-shadow: var(--pf-dropshadow);
1917
2106
  --pf-floatui-border: none;
1918
- --pf-floatui-border-color: var(--pf-border-color);
2107
+ --pf-floatui-border-color: var(--pf-border-color-secondary);
1919
2108
  }
1920
2109
 
1921
2110
  :root [data-theme=light] {
1922
- --pf-floatui-background-color: var(--pf-white-color);
2111
+ --pf-floatui-background-color: var(--pf-background-color-secondary);
1923
2112
  }
1924
2113
 
1925
2114
  :root [data-theme=dark],
1926
2115
  :root {
1927
- --pf-floatui-background-color: var(--pf-primary-color-600);
2116
+ --pf-floatui-background-color: var(--pf-background-color-secondary);
1928
2117
  }
1929
2118
 
1930
2119
  .floatui-container {
@@ -1938,30 +2127,29 @@ body div[class*=select__single-value] {
1938
2127
  }
1939
2128
 
1940
2129
  :root [data-theme=light] {
1941
- --pf-date-picker-background-color: var(--pf-white-color);
1942
- --pf-date-picker-selected-date-background-color: var(--pf-primary-color);
1943
- --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1944
- --pf-date-picker-today-background-color: var(--pf-primary-color-200);
2130
+ --pf-date-picker-background-color: var(--pf-background-color-secondary);
2131
+ --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
2132
+ --pf-date-picker-selected-date-font-color: var(--pf-font-color-inverted);
2133
+ --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
1945
2134
  }
1946
2135
  :root [data-theme=light] .rdp-root {
1947
2136
  --rdp-accent-color: var(--pf-link-color);
1948
2137
  --rdp-font-family: var(--pf-font-family-base);
1949
- --rdp-range_middle-background-color: var(--pf-primary-color-300);
2138
+ --rdp-range_middle-background-color: var(--pf-page-background-color);
1950
2139
  }
1951
2140
 
1952
2141
  :root [data-theme=dark],
1953
2142
  :root {
1954
- --pf-date-picker-background-color: var(--pf-primary-color-600);
1955
- --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-400);
1956
- --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1957
- --pf-date-picker-today-background-color: var(--pf-primary-color);
2143
+ --pf-date-picker-background-color: var(--pf-background-color-secondary);
2144
+ --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
2145
+ --pf-date-picker-selected-date-font-color: var(--pf-font-color);
2146
+ --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
1958
2147
  }
1959
2148
  :root [data-theme=dark] .rdp-root,
1960
2149
  :root .rdp-root {
1961
2150
  --rdp-accent-color: var(--pf-link-color);
1962
- --rdp-accent-background-color: var(--pf-primary-color-200);
1963
2151
  --rdp-font-family: var(--pf-font-family-base);
1964
- --rdp-range_middle-background-color: var(--pf-primary-color-700);
2152
+ --rdp-range_middle-background-color: var(--pf-page-background-color);
1965
2153
  }
1966
2154
 
1967
2155
  .rdp-chevron {
@@ -1969,10 +2157,11 @@ body div[class*=select__single-value] {
1969
2157
  }
1970
2158
 
1971
2159
  .rdp-months {
2160
+ color: var(--pf-font-color);
1972
2161
  background-color: var(--pf-date-picker-background-color);
1973
2162
  padding: var(--pf-padding-3);
1974
2163
  border-radius: var(--pf-rounded);
1975
- border: solid var(--pf-border-thin) var(--pf-border-color);
2164
+ border: solid var(--pf-border-thin) var(--pf-border-color-primary);
1976
2165
  }
1977
2166
  .rdp-months .rdp-nav {
1978
2167
  margin-top: var(--pf-margin-3);
@@ -1992,13 +2181,15 @@ body div[class*=select__single-value] {
1992
2181
  .rdp-day.rdp-today .rdp-day_button {
1993
2182
  background-color: var(--pf-date-picker-today-background-color);
1994
2183
  color: var(--pf-date-picker-selected-date-font-color);
2184
+ border: none;
1995
2185
  }
1996
2186
  .rdp-day.rdp-selected .rdp-day_button {
1997
2187
  background-color: var(--pf-date-picker-selected-date-background-color);
1998
2188
  color: var(--pf-date-picker-selected-date-font-color);
1999
- border-color: var(--pf-border-color);
2189
+ border: none;
2000
2190
  }
2001
2191
  .rdp-day.rdp-range_middle .rdp-day_button {
2192
+ color: var(--pf-font-color);
2002
2193
  background-color: transparent;
2003
2194
  }
2004
2195
 
@@ -2008,25 +2199,25 @@ body div[class*=select__single-value] {
2008
2199
  }
2009
2200
 
2010
2201
  :root [data-theme=light] {
2011
- --pf-badge-background-color: var(--pf-white-color);
2012
- --pf-badge-border-color: var(--pf-border-color);
2202
+ --pf-badge-background-color: var(--pf-page-background-color);
2013
2203
  --pf-badge-font-color: var(--pf-font-color);
2014
2204
  --pf-badge-rounded: var(--pf-rounded);
2205
+ --pf-badge-border-color: var(--pf-border-color-secondary);
2015
2206
  }
2016
2207
 
2017
2208
  :root [data-theme=dark],
2018
2209
  :root {
2019
- --pf-badge-rounded: var(--pf-rounded);
2020
- --pf-badge-background-color: var(--pf-primary-color-600);
2021
- --pf-badge-border-color: var(--pf-border-color);
2210
+ --pf-badge-background-color: var(--pf-page-background-color);
2022
2211
  --pf-badge-font-color: var(--pf-font-color);
2212
+ --pf-badge-rounded: var(--pf-rounded);
2213
+ --pf-badge-border-color: var(--pf-border-color-secondary);
2023
2214
  }
2024
2215
 
2025
2216
  .badge {
2217
+ border: var(--pf-border-sm) solid var(--pf-badge-border-color);
2026
2218
  border-radius: var(--pf-rounded-lg);
2027
2219
  padding: var(--pf-padding-3);
2028
2220
  background: var(--pf-badge-background-color);
2029
- border: var(--pf-border-sm) solid var(--pf-badge-border-color);
2030
2221
  box-sizing: border-box;
2031
2222
  width: -moz-fit-content;
2032
2223
  width: fit-content;
@@ -2068,22 +2259,29 @@ body div[class*=select__single-value] {
2068
2259
  --pf-modal-close-button-top: var(--pf-margin-2);
2069
2260
  --pf-modal-close-button-right: var(--pf-margin-2);
2070
2261
  --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
2262
+ --pf-modal-title-font-size: var(--pf-font-size-h1);
2263
+ --pf-modal-title-font-weight: var(--pf-font-weight-bold);
2264
+ --pf-modal-subtitle-font-size: var(--pf-font-size-body);
2071
2265
  --pf-modal-close-button-font-size: var(--pf-font-size-caption);
2072
2266
  --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
2073
2267
  --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
2074
2268
  --pf-modal-overlay-transition: opacity 100ms ease-in-out;
2075
- --pf-modal-content-padding: var(--pf-padding-10);
2269
+ --pf-modal-content-padding: var(--pf-padding-5) var(--pf-padding-6);
2076
2270
  }
2077
2271
 
2078
2272
  :root [data-theme=light] {
2079
- --pf-modal-background-color: var(--pf-white-color);
2080
- --pf-modal-border-color: var(--pf-border-color);
2273
+ --pf-modal-background-color: var(--pf-background-color-secondary);
2274
+ --pf-modal-border-color: var(--pf-border-color-secondary);
2275
+ --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
2276
+ --pf-modal-close-button-font-color: var(--pf-font-color-soft);
2081
2277
  }
2082
2278
 
2083
2279
  :root [data-theme=dark],
2084
2280
  :root {
2085
- --pf-modal-background-color: var(--pf-primary-color-600);
2086
- --pf-modal-border-color: var(--pf-border-color);
2281
+ --pf-modal-background-color: var(--pf-background-color-secondary);
2282
+ --pf-modal-border-color: var(--pf-border-color-secondary);
2283
+ --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
2284
+ --pf-modal-close-button-font-color: var(--pf-font-color-soft);
2087
2285
  }
2088
2286
 
2089
2287
  .ReactModal__Overlay {
@@ -2126,13 +2324,32 @@ body div[class*=select__single-value] {
2126
2324
  .modal--top {
2127
2325
  top: 50px;
2128
2326
  }
2327
+ .modal .modal-content {
2328
+ background-color: var(--pf-modal-background-color);
2329
+ border: var(--pf-border-sm) solid var(--pf-modal-border-color);
2330
+ border-radius: var(--pf-modal-rounded);
2331
+ }
2332
+ .modal .modal-header {
2333
+ border-bottom: var(--pf-border-sm) solid var(--pf-modal-border-color);
2334
+ padding: var(--pf-modal-content-padding);
2335
+ }
2336
+ .modal .modal-header .modal-title {
2337
+ font-size: var(--pf-font-size-h1);
2338
+ font-weight: var(--pf-font-weight-bold);
2339
+ }
2340
+ .modal .modal-header .modal-subtitle {
2341
+ font-size: var(--pf-font-size-subtitle);
2342
+ color: var(--pf-modal-subtitle-font-color);
2343
+ }
2129
2344
  .modal .modal-close-button {
2130
2345
  position: absolute;
2131
2346
  top: var(--pf-modal-close-button-top);
2132
2347
  right: var(--pf-modal-close-button-right);
2133
2348
  padding: var(--pf-modal-close-button-padding);
2134
2349
  font-size: var(--pf-modal-close-button-font-size);
2350
+ color: var(--pf-modal-close-button-font-color);
2135
2351
  line-height: 1;
2352
+ z-index: 1000;
2136
2353
  }
2137
2354
  .modal .modal-close-button.btn .icon {
2138
2355
  width: var(--pf-modal-close-button-icon-size) !important;
@@ -2142,20 +2359,23 @@ body div[class*=select__single-value] {
2142
2359
  width: 100%;
2143
2360
  height: 100%;
2144
2361
  }
2145
- .modal .modal-content {
2146
- position: relative;
2147
- background-color: var(--pf-modal-background-color);
2148
- border: var(--pf-border-sm) solid var(--pf-modal-border-color);
2149
- border-radius: var(--pf-modal-rounded);
2362
+ .modal .modal-body {
2363
+ padding: var(--pf-modal-content-padding);
2364
+ }
2365
+ .modal .modal-footer {
2150
2366
  padding: var(--pf-modal-content-padding);
2367
+ border-top: var(--pf-border-sm) solid var(--pf-modal-border-color);
2368
+ text-align: right;
2151
2369
  }
2152
- .modal .modal-content .modal-body h2 {
2370
+
2371
+ .confirmation-modal .confirmation-modal-title {
2153
2372
  font-size: var(--pf-font-size-h1);
2373
+ font-weight: var(--pf-font-weight-bold);
2374
+ margin-bottom: var(--pf-margin-4);
2154
2375
  }
2155
- .modal .modal-content .modal-body hr {
2156
- margin-top: var(--pf-margin-8);
2157
- margin-bottom: var(--pf-margin-8);
2158
- border: var(--pf-border-sm) solid var(--pf-border-color);
2376
+ .confirmation-modal .confirmation-modal-icon {
2377
+ margin-top: var(--pf-margin-4);
2378
+ margin-bottom: var(--pf-margin-4);
2159
2379
  }
2160
2380
 
2161
2381
  .pagination__current-page {
@@ -2172,16 +2392,16 @@ body div[class*=select__single-value] {
2172
2392
  }
2173
2393
 
2174
2394
  :root [data-theme=light] {
2175
- --pf-tanstack-table-background-color: var(--pf-white-color);
2176
- --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
2177
- --pf-tanstack-table-font-color: var(--pf-gray-color-300);
2178
- --pf-tanstack-table-border-color: var(--pf-gray-color-700);
2179
- --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
2180
- --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
2181
- --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
2182
- --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
2183
- --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
2184
- --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
2395
+ --pf-tanstack-table-background-color: var(--pf-page-background-color);
2396
+ --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
2397
+ --pf-tanstack-table-font-color: var(--pf-font-color);
2398
+ --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
2399
+ --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
2400
+ --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
2401
+ --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
2402
+ --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
2403
+ --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
2404
+ --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
2185
2405
  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
2186
2406
  0 4px 8px rgba(0, 0, 0, 0.1);
2187
2407
  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
@@ -2191,21 +2411,20 @@ body div[class*=select__single-value] {
2191
2411
 
2192
2412
  :root [data-theme=dark],
2193
2413
  :root {
2194
- --pf-tanstack-table-background-color: var(--pf-primary-color-700);
2195
- --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
2196
- --pf-tanstack-table-font-color: var(--pf-white-color);
2197
- --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
2198
- --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
2199
- --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
2200
- --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
2201
- --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
2202
- --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
2203
- --pf-tanstack-table-clicked-color: var(--pf-primary-color);
2204
- --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
2205
- --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
2206
- 0 8px 16px rgba(0, 0, 0, 0.3);
2414
+ --pf-tanstack-table-background-color: var(--pf-page-background-color);
2415
+ --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
2416
+ --pf-tanstack-table-font-color: var(--pf-font-color);
2417
+ --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
2418
+ --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
2419
+ --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
2420
+ --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
2421
+ --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
2422
+ --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
2423
+ --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
2424
+ --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
2425
+ 0 4px 8px rgba(0, 0, 0, 0.1);
2207
2426
  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
2208
- --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
2427
+ --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
2209
2428
  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
2210
2429
  }
2211
2430
 
@@ -2280,7 +2499,7 @@ body div[class*=select__single-value] {
2280
2499
  opacity: 1;
2281
2500
  }
2282
2501
  .tanstack-table__outer-container .tanstack-table__column--is-not-pinned {
2283
- opacity: 0.3;
2502
+ opacity: 0.5;
2284
2503
  }
2285
2504
  .tanstack-table__outer-container .tanstack-table__container {
2286
2505
  height: calc(100vh - 70px);
@@ -2333,7 +2552,7 @@ body div[class*=select__single-value] {
2333
2552
  background-color: var(--pf-tanstack-table-stripe-color);
2334
2553
  }
2335
2554
  .tanstack-table .is-loading {
2336
- border: var(--pf-border-thin) solid var(--pf-border-color);
2555
+ border: var(--pf-border-thin) solid var(--pf-border-color-primary);
2337
2556
  height: 350px;
2338
2557
  width: 100%;
2339
2558
  }
@@ -2422,7 +2641,7 @@ body div[class*=select__single-value] {
2422
2641
  text-align: center;
2423
2642
  vertical-align: middle;
2424
2643
  height: 100%;
2425
- border: var(--pf-border-sm) solid var(--pf-border-color);
2644
+ border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2426
2645
  animation: none;
2427
2646
  }
2428
2647
  @keyframes shimmer {
@@ -2453,60 +2672,69 @@ body div[class*=select__single-value] {
2453
2672
  }
2454
2673
 
2455
2674
  :root [data-theme=light] {
2456
- --pf-pill-primary-background-color: var(--pf-primary-color);
2457
- --pf-pill-primary-font-color: var(--pf-white-color);
2458
- --pf-pill-primary-border-color: var(--pf-primary-color);
2459
- --pf-pill-secondary-background-color: var(--pf-secondary-color);
2460
- --pf-pill-secondary-font-color: var(--pf-white-color);
2461
- --pf-pill-secondary-border-color: var(--pf-secondary-color);
2462
- --pf-pill-error-background-color: var(--pf-error-color);
2463
- --pf-pill-error-font-color: var(--pf-white-color);
2464
- --pf-pill-error-border-color: var(--pf-error-color);
2465
- --pf-pill-warning-background-color: var(--pf-warning-color);
2466
- --pf-pill-warning-font-color: var(--pf-white-color);
2467
- --pf-pill-warning-border-color: var(--pf-warning-color);
2468
- --pf-pill-info-background-color: var(--pf-info-color);
2469
- --pf-pill-info-font-color: var(--pf-white-color);
2470
- --pf-pill-info-border-color: var(--pf-info-color);
2471
- --pf-pill-success-background-color: var(--pf-success-color);
2472
- --pf-pill-success-font-color: var(--pf-white-color);
2473
- --pf-pill-success-border-color: var(--pf-success-color);
2474
- --pf-pill-neutral-background-color: var(--pf-gray-color);
2475
- --pf-pill-neutral-font-color: var(--pf-white-color);
2476
- --pf-pill-neutral-border-color: var(--pf-gray-color);
2675
+ --pf-pill-info-background-color: var(--pf-secondary-color-500);
2676
+ --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
+ --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
+ --pf-pill-error-background-color: var(--pf-red-color-450);
2679
+ --pf-pill-error-font-color: var(--pf-red-color-50);
2680
+ --pf-pill-error-border-color: var(--pf-red-color-450);
2681
+ --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2682
+ --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
+ --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2684
+ --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
+ --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
+ --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
+ --pf-pill-success-background-color: var(--pf-green-color-600);
2688
+ --pf-pill-success-font-color: var(--pf-green-color-50);
2689
+ --pf-pill-success-border-color: var(--pf-green-color-600);
2690
+ --pf-pill-purple-background-color: var(--pf-purple-color-450);
2691
+ --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
+ --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
+ --pf-pill-pending-background-color: var(--pf-pink-color-450);
2694
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
+ --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
+ --pf-pill-orange-background-color: var(--pf-orange-color-450);
2697
+ --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
+ --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
+ --pf-pill-teal-background-color: var(--pf-teal-color-600);
2700
+ --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
+ --pf-pill-teal-border-color: var(--pf-teal-color-600);
2477
2702
  }
2478
2703
 
2479
2704
  :root [data-theme=dark],
2480
2705
  :root {
2481
- --pf-pill-primary-background-color: var(--pf-primary-color-900);
2482
- --pf-pill-primary-font-color: var(--pf-white-color);
2483
- --pf-pill-primary-border-color: var(--pf-primary-color-100);
2484
- --pf-pill-secondary-background-color: var(--pf-secondary-color-800);
2485
- --pf-pill-secondary-font-color: var(--pf-white-color);
2486
- --pf-pill-secondary-border-color: var(--pf-secondary-color-400);
2487
- --pf-pill-error-background-color: var(--pf-red-color-900);
2488
- --pf-pill-error-font-color: var(--pf-white-color);
2489
- --pf-pill-error-border-color: var(--pf-red-color-600);
2490
- --pf-pill-warning-background-color: var(--pf-orange-color-800);
2491
- --pf-pill-warning-font-color: var(--pf-white-color);
2492
- --pf-pill-warning-border-color: var(--pf-orange-color-600);
2493
- --pf-pill-info-background-color: var(--pf-secondary-color-800);
2494
- --pf-pill-info-font-color: var(--pf-white-color);
2495
- --pf-pill-info-border-color: var(--pf-secondary-color-300);
2496
- --pf-pill-success-background-color: var(--pf-green-color-900);
2497
- --pf-pill-success-font-color: var(--pf-white-color);
2498
- --pf-pill-success-border-color: var(--pf-green-color-600);
2499
- --pf-pill-neutral-background-color: var(--pf-gray-color-900);
2500
- --pf-pill-neutral-font-color: var(--pf-gray-color-100);
2706
+ --pf-pill-info-background-color: var(--pf-secondary-color-500);
2707
+ --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
+ --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
+ --pf-pill-error-background-color: var(--pf-red-color-450);
2710
+ --pf-pill-error-font-color: var(--pf-red-color-50);
2711
+ --pf-pill-error-border-color: var(--pf-red-color-450);
2712
+ --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2713
+ --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
+ --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2715
+ --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
+ --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2501
2717
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2502
- --pf-pill-pending-background-color: var(--pf-pending-color);
2503
- --pf-pill-pending-font-color: var(--pf-white-color);
2504
- --pf-pill-pending-border-color: var(--pf-red-color-350);
2718
+ --pf-pill-success-background-color: var(--pf-green-color-600);
2719
+ --pf-pill-success-font-color: var(--pf-green-color-50);
2720
+ --pf-pill-success-border-color: var(--pf-green-color-600);
2721
+ --pf-pill-purple-background-color: var(--pf-purple-color-450);
2722
+ --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
+ --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
+ --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
+ --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
+ --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
+ --pf-pill-orange-background-color: var(--pf-orange-color-450);
2728
+ --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
+ --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
+ --pf-pill-teal-background-color: var(--pf-teal-color-600);
2731
+ --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
+ --pf-pill-teal-border-color: var(--pf-teal-color-600);
2505
2733
  }
2506
2734
 
2507
2735
  .pill {
2508
2736
  display: inline-block;
2509
- border-radius: var(--pf-rounded-pill);
2737
+ border-radius: var(--pf-rounded);
2510
2738
  padding: var(--pf-padding-1) var(--pf-padding-2);
2511
2739
  font-size: var(--pf-font-size-overline);
2512
2740
  font-weight: var(--pf-font-weight-medium);
@@ -2551,29 +2779,43 @@ body div[class*=select__single-value] {
2551
2779
  color: var(--pf-pill-neutral-font-color);
2552
2780
  border-color: var(--pf-pill-neutral-border-color);
2553
2781
  }
2554
- .pill--primary {
2555
- background-color: var(--pf-pill-primary-background-color);
2556
- color: var(--pf-pill-primary-font-color);
2557
- border-color: var(--pf-pill-primary-border-color);
2558
- }
2559
- .pill--secondary {
2560
- background-color: var(--pf-pill-secondary-background-color);
2561
- color: var(--pf-pill-secondary-font-color);
2562
- border-color: var(--pf-pill-secondary-border-color);
2782
+ .pill--info {
2783
+ background-color: var(--pf-pill-info-background-color);
2784
+ color: var(--pf-pill-info-font-color);
2785
+ border-color: var(--pf-pill-info-border-color);
2563
2786
  }
2564
2787
  .pill--pending {
2565
2788
  background-color: var(--pf-pill-pending-background-color);
2566
2789
  color: var(--pf-pill-pending-font-color);
2567
2790
  border-color: var(--pf-pill-pending-border-color);
2568
2791
  }
2792
+ .pill--purple {
2793
+ background-color: var(--pf-pill-purple-background-color);
2794
+ color: var(--pf-pill-purple-font-color);
2795
+ border-color: var(--pf-pill-purple-border-color);
2796
+ }
2797
+ .pill--orange {
2798
+ background-color: var(--pf-pill-orange-background-color);
2799
+ color: var(--pf-pill-orange-font-color);
2800
+ border-color: var(--pf-pill-orange-border-color);
2801
+ }
2802
+ .pill--teal {
2803
+ background-color: var(--pf-pill-teal-background-color);
2804
+ color: var(--pf-pill-teal-font-color);
2805
+ border-color: var(--pf-pill-teal-border-color);
2806
+ }
2569
2807
 
2570
2808
  :root [data-theme=light] {
2571
- --pf-tooltip-background-color: var(--pf-white-color);
2809
+ --pf-tooltip-background-color: var(--pf-background-color-inverted);
2810
+ --pf-tooltip-font-color: var(--pf-font-color-inverted);
2811
+ --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
2572
2812
  }
2573
2813
 
2574
2814
  :root [data-theme=dark],
2575
2815
  :root {
2576
- --pf-tooltip-background-color: var(--pf-primary-color-900);
2816
+ --pf-tooltip-background-color: var(--pf-background-color-inverted);
2817
+ --pf-tooltip-font-color: var(--pf-font-color-inverted);
2818
+ --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
2577
2819
  }
2578
2820
 
2579
2821
  @keyframes moveBg {
@@ -2733,21 +2975,77 @@ body div[class*=select__single-value] {
2733
2975
  }
2734
2976
 
2735
2977
  :root [data-theme=light] {
2736
- --toastify-color-dark: var(--pf-white-color);
2737
- --toastify-color-progress-dark: var(--pf-primary-color-200);
2738
- --toastify-icon-color-success: var(--pf-success-color);
2739
- --toastify-color-progress-bgo: 0.2;
2740
- --toastify-text-color-dark: var(
2741
- --pf-gray-color-600
2742
- );
2978
+ --toastify-color-info: var(--pf-info-color);
2979
+ --toastify-color-success: var(--pf-success-color);
2980
+ --toastify-color-warning: var(--pf-warning-color);
2981
+ --toastify-color-error: var(--pf-error-color);
2743
2982
  }
2744
2983
 
2745
2984
  :root [data-theme=dark] {
2746
- --toastify-color-dark: var(--pf-background-color-light);
2747
- --toastify-color-progress-dark: var(--pf-primary-color-400);
2748
- --toastify-icon-color-success: var(--pf-success-color);
2749
- --toastify-color-progress-bgo: 0.2;
2750
- --toastify-text-color-dark: var(--pf-font-color);
2985
+ --toastify-color-info: var(--pf-info-color);
2986
+ --toastify-color-success: var(--pf-success-color);
2987
+ --toastify-color-warning: var(--pf-warning-color);
2988
+ --toastify-color-error: var(--pf-error-color);
2989
+ }
2990
+
2991
+ .Toastify__toast-theme--colored.Toastify__toast--default {
2992
+ background-color: var(--pf-background-color-secondary);
2993
+ color: var(--pf-font-color);
2994
+ }
2995
+ .Toastify__toast-theme--colored.Toastify__toast--default svg {
2996
+ fill: var(--pf-info-color);
2997
+ }
2998
+
2999
+ .Toastify__toast-theme--colored.Toastify__toast--info {
3000
+ background-color: var(--pf-background-color-secondary);
3001
+ color: var(--pf-font-color);
3002
+ }
3003
+ .Toastify__toast-theme--colored.Toastify__toast--info svg {
3004
+ fill: var(--pf-info-color);
3005
+ }
3006
+
3007
+ .Toastify__toast-theme--colored.Toastify__toast--success {
3008
+ background-color: var(--pf-background-color-secondary);
3009
+ color: var(--pf-font-color);
3010
+ }
3011
+ .Toastify__toast-theme--colored.Toastify__toast--success svg {
3012
+ fill: var(--pf-success-color);
3013
+ }
3014
+
3015
+ .Toastify__toast-theme--colored.Toastify__toast--warning {
3016
+ background-color: var(--pf-background-color-secondary);
3017
+ color: var(--pf-font-color);
3018
+ }
3019
+ .Toastify__toast-theme--colored.Toastify__toast--warning svg {
3020
+ fill: var(--pf-warning-color);
3021
+ }
3022
+
3023
+ .Toastify__toast-theme--colored.Toastify__toast--error {
3024
+ background-color: var(--pf-background-color-secondary);
3025
+ color: var(--pf-font-color);
3026
+ }
3027
+ .Toastify__toast-theme--colored.Toastify__toast--error svg {
3028
+ fill: var(--pf-error-color);
3029
+ }
3030
+
3031
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
3032
+ background-color: var(--pf-info-color);
3033
+ }
3034
+
3035
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {
3036
+ background-color: var(--pf-info-color);
3037
+ }
3038
+
3039
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
3040
+ background-color: var(--pf-success-color);
3041
+ }
3042
+
3043
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
3044
+ background-color: var(--pf-warning-color);
3045
+ }
3046
+
3047
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
3048
+ background-color: var(--pf-error-color);
2751
3049
  }
2752
3050
 
2753
3051
  :root [data-theme=light] {
@@ -4707,286 +5005,818 @@ p,
4707
5005
  background-color: var(--pf-purple-color-1000);
4708
5006
  }
4709
5007
 
4710
- .color-success {
4711
- color: var(--pf-success-color);
5008
+ .color-pink {
5009
+ color: var(--pf-pink-color);
4712
5010
  }
4713
5011
 
4714
- .bg-success {
4715
- background-color: var(--pf-success-color);
5012
+ .bg-pink {
5013
+ background-color: var(--pf-pink-color);
4716
5014
  }
4717
5015
 
4718
- .color-info {
4719
- color: var(--pf-info-color);
5016
+ .color-pink-50 {
5017
+ color: var(--pf-pink-color-50);
4720
5018
  }
4721
5019
 
4722
- .bg-info {
4723
- background-color: var(--pf-info-color);
5020
+ .bg-pink-50 {
5021
+ background-color: var(--pf-pink-color-50);
4724
5022
  }
4725
5023
 
4726
- .color-neutral {
4727
- color: var(--pf-neutral-color);
5024
+ .color-pink-100 {
5025
+ color: var(--pf-pink-color-100);
4728
5026
  }
4729
5027
 
4730
- .bg-neutral {
4731
- background-color: var(--pf-neutral-color);
5028
+ .bg-pink-100 {
5029
+ background-color: var(--pf-pink-color-100);
4732
5030
  }
4733
5031
 
4734
- .color-warning {
4735
- color: var(--pf-warning-color);
5032
+ .color-pink-150 {
5033
+ color: var(--pf-pink-color-150);
4736
5034
  }
4737
5035
 
4738
- .bg-warning {
4739
- background-color: var(--pf-warning-color);
5036
+ .bg-pink-150 {
5037
+ background-color: var(--pf-pink-color-150);
4740
5038
  }
4741
5039
 
4742
- .color-error {
4743
- color: var(--pf-error-color);
5040
+ .color-pink-200 {
5041
+ color: var(--pf-pink-color-200);
4744
5042
  }
4745
5043
 
4746
- .bg-error {
4747
- background-color: var(--pf-error-color);
5044
+ .bg-pink-200 {
5045
+ background-color: var(--pf-pink-color-200);
4748
5046
  }
4749
5047
 
4750
- .color-brand {
4751
- color: var(--pf-brand-color);
5048
+ .color-pink-250 {
5049
+ color: var(--pf-pink-color-250);
4752
5050
  }
4753
5051
 
4754
- .bg-brand {
4755
- background-color: var(--pf-brand-color);
5052
+ .bg-pink-250 {
5053
+ background-color: var(--pf-pink-color-250);
4756
5054
  }
4757
5055
 
4758
- .link-color {
4759
- color: var(--pf-link-color);
5056
+ .color-pink-300 {
5057
+ color: var(--pf-pink-color-300);
4760
5058
  }
4761
5059
 
4762
- .active-link-color {
4763
- color: var(--pf-active-link-color);
5060
+ .bg-pink-300 {
5061
+ background-color: var(--pf-pink-color-300);
4764
5062
  }
4765
5063
 
4766
- .border {
4767
- border: solid 1px;
4768
- border-color: var(--pf-border-color);
4769
- border-radius: var(--pf-rounded);
5064
+ .color-pink-350 {
5065
+ color: var(--pf-pink-color-350);
4770
5066
  }
4771
5067
 
4772
- .border-thin {
4773
- border-style: solid;
4774
- border-width: var(--pf-border-thin);
5068
+ .bg-pink-350 {
5069
+ background-color: var(--pf-pink-color-350);
4775
5070
  }
4776
5071
 
4777
- .border-t-thin {
4778
- border-style: solid;
4779
- border-top-width: var(--pf-border-thin);
5072
+ .color-pink-400 {
5073
+ color: var(--pf-pink-color-400);
4780
5074
  }
4781
5075
 
4782
- .border-b-thin {
4783
- border-style: solid;
4784
- border-bottom-width: var(--pf-border-thin);
5076
+ .bg-pink-400 {
5077
+ background-color: var(--pf-pink-color-400);
4785
5078
  }
4786
5079
 
4787
- .border-l-thin {
4788
- border-style: solid;
4789
- border-left-width: var(--pf-border-thin);
5080
+ .color-pink-450 {
5081
+ color: var(--pf-pink-color-450);
4790
5082
  }
4791
5083
 
4792
- .border-r-thin {
4793
- border-style: solid;
4794
- border-right-width: var(--pf-border-thin);
5084
+ .bg-pink-450 {
5085
+ background-color: var(--pf-pink-color-450);
4795
5086
  }
4796
5087
 
4797
- .border-sm {
4798
- border-style: solid;
4799
- border-width: var(--pf-border-sm);
5088
+ .color-pink-500 {
5089
+ color: var(--pf-pink-color-500);
4800
5090
  }
4801
5091
 
4802
- .border-t-sm {
4803
- border-style: solid;
4804
- border-top-width: var(--pf-border-sm);
5092
+ .bg-pink-500 {
5093
+ background-color: var(--pf-pink-color-500);
4805
5094
  }
4806
5095
 
4807
- .border-b-sm {
4808
- border-style: solid;
4809
- border-bottom-width: var(--pf-border-sm);
5096
+ .color-pink-550 {
5097
+ color: var(--pf-pink-color-550);
4810
5098
  }
4811
5099
 
4812
- .border-l-sm {
4813
- border-style: solid;
4814
- border-left-width: var(--pf-border-sm);
5100
+ .bg-pink-550 {
5101
+ background-color: var(--pf-pink-color-550);
4815
5102
  }
4816
5103
 
4817
- .border-r-sm {
4818
- border-style: solid;
4819
- border-right-width: var(--pf-border-sm);
5104
+ .color-pink-600 {
5105
+ color: var(--pf-pink-color-600);
4820
5106
  }
4821
5107
 
4822
- .border-md {
4823
- border-style: solid;
4824
- border-width: var(--pf-border-md);
5108
+ .bg-pink-600 {
5109
+ background-color: var(--pf-pink-color-600);
4825
5110
  }
4826
5111
 
4827
- .border-t-md {
4828
- border-style: solid;
4829
- border-top-width: var(--pf-border-md);
5112
+ .color-pink-650 {
5113
+ color: var(--pf-pink-color-650);
4830
5114
  }
4831
5115
 
4832
- .border-b-md {
4833
- border-style: solid;
4834
- border-bottom-width: var(--pf-border-md);
5116
+ .bg-pink-650 {
5117
+ background-color: var(--pf-pink-color-650);
4835
5118
  }
4836
5119
 
4837
- .border-l-md {
4838
- border-style: solid;
4839
- border-left-width: var(--pf-border-md);
5120
+ .color-pink-700 {
5121
+ color: var(--pf-pink-color-700);
4840
5122
  }
4841
5123
 
4842
- .border-r-md {
4843
- border-style: solid;
4844
- border-right-width: var(--pf-border-md);
5124
+ .bg-pink-700 {
5125
+ background-color: var(--pf-pink-color-700);
4845
5126
  }
4846
5127
 
4847
- .border-lg {
4848
- border-style: solid;
4849
- border-width: var(--pf-border-lg);
5128
+ .color-pink-750 {
5129
+ color: var(--pf-pink-color-750);
4850
5130
  }
4851
5131
 
4852
- .border-t-lg {
4853
- border-style: solid;
4854
- border-top-width: var(--pf-border-lg);
5132
+ .bg-pink-750 {
5133
+ background-color: var(--pf-pink-color-750);
4855
5134
  }
4856
5135
 
4857
- .border-b-lg {
4858
- border-style: solid;
4859
- border-bottom-width: var(--pf-border-lg);
5136
+ .color-pink-800 {
5137
+ color: var(--pf-pink-color-800);
4860
5138
  }
4861
5139
 
4862
- .border-l-lg {
4863
- border-style: solid;
4864
- border-left-width: var(--pf-border-lg);
5140
+ .bg-pink-800 {
5141
+ background-color: var(--pf-pink-color-800);
4865
5142
  }
4866
5143
 
4867
- .border-r-lg {
4868
- border-style: solid;
4869
- border-right-width: var(--pf-border-lg);
5144
+ .color-pink-850 {
5145
+ color: var(--pf-pink-color-850);
4870
5146
  }
4871
5147
 
4872
- .border-0 {
4873
- border-style: solid;
4874
- border-width: 0;
5148
+ .bg-pink-850 {
5149
+ background-color: var(--pf-pink-color-850);
4875
5150
  }
4876
5151
 
4877
- .border-t-0 {
4878
- border-style: solid;
4879
- border-top-width: 0;
5152
+ .color-pink-900 {
5153
+ color: var(--pf-pink-color-900);
4880
5154
  }
4881
5155
 
4882
- .border-b-0 {
4883
- border-style: solid;
4884
- border-bottom-width: 0;
5156
+ .bg-pink-900 {
5157
+ background-color: var(--pf-pink-color-900);
4885
5158
  }
4886
5159
 
4887
- .border-l-0 {
4888
- border-style: solid;
4889
- border-left-width: 0;
5160
+ .color-pink-950 {
5161
+ color: var(--pf-pink-color-950);
4890
5162
  }
4891
5163
 
4892
- .border-r-0 {
4893
- border-style: solid;
4894
- border-right-width: 0;
5164
+ .bg-pink-950 {
5165
+ background-color: var(--pf-pink-color-950);
4895
5166
  }
4896
5167
 
4897
- .border-xl {
4898
- border-style: solid;
4899
- border-width: var(--pf-border-xl);
5168
+ .color-pink-1000 {
5169
+ color: var(--pf-pink-color-1000);
4900
5170
  }
4901
5171
 
4902
- .border-t-xl {
4903
- border-style: solid;
4904
- border-top-width: var(--pf-border-xl);
5172
+ .bg-pink-1000 {
5173
+ background-color: var(--pf-pink-color-1000);
4905
5174
  }
4906
5175
 
4907
- .border-b-xl {
4908
- border-style: solid;
4909
- border-bottom-width: var(--pf-border-xl);
5176
+ .color-teal {
5177
+ color: var(--pf-teal-color);
4910
5178
  }
4911
5179
 
4912
- .border-l-xl {
4913
- border-style: solid;
4914
- border-left-width: var(--pf-border-xl);
5180
+ .bg-teal {
5181
+ background-color: var(--pf-teal-color);
4915
5182
  }
4916
5183
 
4917
- .border-r-xl {
4918
- border-style: solid;
4919
- border-right-width: var(--pf-border-xl);
5184
+ .color-teal-50 {
5185
+ color: var(--pf-teal-color-50);
4920
5186
  }
4921
5187
 
4922
- .border-dashed {
4923
- border-style: dashed;
5188
+ .bg-teal-50 {
5189
+ background-color: var(--pf-teal-color-50);
4924
5190
  }
4925
5191
 
4926
- .border-dotted {
4927
- border-style: dotted;
5192
+ .color-teal-100 {
5193
+ color: var(--pf-teal-color-100);
4928
5194
  }
4929
5195
 
4930
- .border-double {
4931
- border-style: double;
5196
+ .bg-teal-100 {
5197
+ background-color: var(--pf-teal-color-100);
4932
5198
  }
4933
5199
 
4934
- .border-solid {
4935
- border-style: solid;
5200
+ .color-teal-150 {
5201
+ color: var(--pf-teal-color-150);
4936
5202
  }
4937
5203
 
4938
- .border-primary {
4939
- border-color: var(--pf-primary-color);
5204
+ .bg-teal-150 {
5205
+ background-color: var(--pf-teal-color-150);
4940
5206
  }
4941
5207
 
4942
- .border-primary-100 {
4943
- border-color: var(--pf-primary-color-100);
5208
+ .color-teal-200 {
5209
+ color: var(--pf-teal-color-200);
4944
5210
  }
4945
5211
 
4946
- .border-primary-200 {
4947
- border-color: var(--pf-primary-color-200);
5212
+ .bg-teal-200 {
5213
+ background-color: var(--pf-teal-color-200);
4948
5214
  }
4949
5215
 
4950
- .border-primary-300 {
4951
- border-color: var(--pf-primary-color-300);
5216
+ .color-teal-250 {
5217
+ color: var(--pf-teal-color-250);
4952
5218
  }
4953
5219
 
4954
- .border-primary-400 {
4955
- border-color: var(--pf-primary-color-400);
5220
+ .bg-teal-250 {
5221
+ background-color: var(--pf-teal-color-250);
4956
5222
  }
4957
5223
 
4958
- .border-primary-500 {
4959
- border-color: var(--pf-primary-color-500);
5224
+ .color-teal-300 {
5225
+ color: var(--pf-teal-color-300);
4960
5226
  }
4961
5227
 
4962
- .border-primary-600 {
4963
- border-color: var(--pf-primary-color-600);
5228
+ .bg-teal-300 {
5229
+ background-color: var(--pf-teal-color-300);
4964
5230
  }
4965
5231
 
4966
- .border-primary-700 {
4967
- border-color: var(--pf-primary-color-700);
5232
+ .color-teal-350 {
5233
+ color: var(--pf-teal-color-350);
4968
5234
  }
4969
5235
 
4970
- .border-primary-800 {
4971
- border-color: var(--pf-primary-color-800);
5236
+ .bg-teal-350 {
5237
+ background-color: var(--pf-teal-color-350);
4972
5238
  }
4973
5239
 
4974
- .border-primary-900 {
4975
- border-color: var(--pf-primary-color-900);
5240
+ .color-teal-400 {
5241
+ color: var(--pf-teal-color-400);
4976
5242
  }
4977
5243
 
4978
- .border-secondary {
4979
- border-color: var(--pf-secondary-color);
5244
+ .bg-teal-400 {
5245
+ background-color: var(--pf-teal-color-400);
4980
5246
  }
4981
5247
 
4982
- .border-secondary-100 {
4983
- border-color: var(--pf-secondary-color-100);
5248
+ .color-teal-450 {
5249
+ color: var(--pf-teal-color-450);
4984
5250
  }
4985
5251
 
4986
- .border-secondary-200 {
5252
+ .bg-teal-450 {
5253
+ background-color: var(--pf-teal-color-450);
5254
+ }
5255
+
5256
+ .color-teal-500 {
5257
+ color: var(--pf-teal-color-500);
5258
+ }
5259
+
5260
+ .bg-teal-500 {
5261
+ background-color: var(--pf-teal-color-500);
5262
+ }
5263
+
5264
+ .color-teal-550 {
5265
+ color: var(--pf-teal-color-550);
5266
+ }
5267
+
5268
+ .bg-teal-550 {
5269
+ background-color: var(--pf-teal-color-550);
5270
+ }
5271
+
5272
+ .color-teal-600 {
5273
+ color: var(--pf-teal-color-600);
5274
+ }
5275
+
5276
+ .bg-teal-600 {
5277
+ background-color: var(--pf-teal-color-600);
5278
+ }
5279
+
5280
+ .color-teal-650 {
5281
+ color: var(--pf-teal-color-650);
5282
+ }
5283
+
5284
+ .bg-teal-650 {
5285
+ background-color: var(--pf-teal-color-650);
5286
+ }
5287
+
5288
+ .color-teal-700 {
5289
+ color: var(--pf-teal-color-700);
5290
+ }
5291
+
5292
+ .bg-teal-700 {
5293
+ background-color: var(--pf-teal-color-700);
5294
+ }
5295
+
5296
+ .color-teal-750 {
5297
+ color: var(--pf-teal-color-750);
5298
+ }
5299
+
5300
+ .bg-teal-750 {
5301
+ background-color: var(--pf-teal-color-750);
5302
+ }
5303
+
5304
+ .color-teal-800 {
5305
+ color: var(--pf-teal-color-800);
5306
+ }
5307
+
5308
+ .bg-teal-800 {
5309
+ background-color: var(--pf-teal-color-800);
5310
+ }
5311
+
5312
+ .color-teal-850 {
5313
+ color: var(--pf-teal-color-850);
5314
+ }
5315
+
5316
+ .bg-teal-850 {
5317
+ background-color: var(--pf-teal-color-850);
5318
+ }
5319
+
5320
+ .color-teal-900 {
5321
+ color: var(--pf-teal-color-900);
5322
+ }
5323
+
5324
+ .bg-teal-900 {
5325
+ background-color: var(--pf-teal-color-900);
5326
+ }
5327
+
5328
+ .color-teal-950 {
5329
+ color: var(--pf-teal-color-950);
5330
+ }
5331
+
5332
+ .bg-teal-950 {
5333
+ background-color: var(--pf-teal-color-950);
5334
+ }
5335
+
5336
+ .color-teal-1000 {
5337
+ color: var(--pf-teal-color-1000);
5338
+ }
5339
+
5340
+ .bg-teal-1000 {
5341
+ background-color: var(--pf-teal-color-1000);
5342
+ }
5343
+
5344
+ .color-brand {
5345
+ color: var(--pf-brand-color);
5346
+ }
5347
+
5348
+ .bg-brand {
5349
+ background-color: var(--pf-brand-color);
5350
+ }
5351
+
5352
+ .color-brand-50 {
5353
+ color: var(--pf-brand-color-50);
5354
+ }
5355
+
5356
+ .bg-brand-50 {
5357
+ background-color: var(--pf-brand-color-50);
5358
+ }
5359
+
5360
+ .color-brand-100 {
5361
+ color: var(--pf-brand-color-100);
5362
+ }
5363
+
5364
+ .bg-brand-100 {
5365
+ background-color: var(--pf-brand-color-100);
5366
+ }
5367
+
5368
+ .color-brand-150 {
5369
+ color: var(--pf-brand-color-150);
5370
+ }
5371
+
5372
+ .bg-brand-150 {
5373
+ background-color: var(--pf-brand-color-150);
5374
+ }
5375
+
5376
+ .color-brand-200 {
5377
+ color: var(--pf-brand-color-200);
5378
+ }
5379
+
5380
+ .bg-brand-200 {
5381
+ background-color: var(--pf-brand-color-200);
5382
+ }
5383
+
5384
+ .color-brand-250 {
5385
+ color: var(--pf-brand-color-250);
5386
+ }
5387
+
5388
+ .bg-brand-250 {
5389
+ background-color: var(--pf-brand-color-250);
5390
+ }
5391
+
5392
+ .color-brand-300 {
5393
+ color: var(--pf-brand-color-300);
5394
+ }
5395
+
5396
+ .bg-brand-300 {
5397
+ background-color: var(--pf-brand-color-300);
5398
+ }
5399
+
5400
+ .color-brand-350 {
5401
+ color: var(--pf-brand-color-350);
5402
+ }
5403
+
5404
+ .bg-brand-350 {
5405
+ background-color: var(--pf-brand-color-350);
5406
+ }
5407
+
5408
+ .color-brand-400 {
5409
+ color: var(--pf-brand-color-400);
5410
+ }
5411
+
5412
+ .bg-brand-400 {
5413
+ background-color: var(--pf-brand-color-400);
5414
+ }
5415
+
5416
+ .color-brand-450 {
5417
+ color: var(--pf-brand-color-450);
5418
+ }
5419
+
5420
+ .bg-brand-450 {
5421
+ background-color: var(--pf-brand-color-450);
5422
+ }
5423
+
5424
+ .color-brand-500 {
5425
+ color: var(--pf-brand-color-500);
5426
+ }
5427
+
5428
+ .bg-brand-500 {
5429
+ background-color: var(--pf-brand-color-500);
5430
+ }
5431
+
5432
+ .color-brand-550 {
5433
+ color: var(--pf-brand-color-550);
5434
+ }
5435
+
5436
+ .bg-brand-550 {
5437
+ background-color: var(--pf-brand-color-550);
5438
+ }
5439
+
5440
+ .color-brand-600 {
5441
+ color: var(--pf-brand-color-600);
5442
+ }
5443
+
5444
+ .bg-brand-600 {
5445
+ background-color: var(--pf-brand-color-600);
5446
+ }
5447
+
5448
+ .color-brand-650 {
5449
+ color: var(--pf-brand-color-650);
5450
+ }
5451
+
5452
+ .bg-brand-650 {
5453
+ background-color: var(--pf-brand-color-650);
5454
+ }
5455
+
5456
+ .color-brand-700 {
5457
+ color: var(--pf-brand-color-700);
5458
+ }
5459
+
5460
+ .bg-brand-700 {
5461
+ background-color: var(--pf-brand-color-700);
5462
+ }
5463
+
5464
+ .color-brand-750 {
5465
+ color: var(--pf-brand-color-750);
5466
+ }
5467
+
5468
+ .bg-brand-750 {
5469
+ background-color: var(--pf-brand-color-750);
5470
+ }
5471
+
5472
+ .color-brand-800 {
5473
+ color: var(--pf-brand-color-800);
5474
+ }
5475
+
5476
+ .bg-brand-800 {
5477
+ background-color: var(--pf-brand-color-800);
5478
+ }
5479
+
5480
+ .color-brand-850 {
5481
+ color: var(--pf-brand-color-850);
5482
+ }
5483
+
5484
+ .bg-brand-850 {
5485
+ background-color: var(--pf-brand-color-850);
5486
+ }
5487
+
5488
+ .color-brand-900 {
5489
+ color: var(--pf-brand-color-900);
5490
+ }
5491
+
5492
+ .bg-brand-900 {
5493
+ background-color: var(--pf-brand-color-900);
5494
+ }
5495
+
5496
+ .color-brand-950 {
5497
+ color: var(--pf-brand-color-950);
5498
+ }
5499
+
5500
+ .bg-brand-950 {
5501
+ background-color: var(--pf-brand-color-950);
5502
+ }
5503
+
5504
+ .color-brand-1000 {
5505
+ color: var(--pf-brand-color-1000);
5506
+ }
5507
+
5508
+ .bg-brand-1000 {
5509
+ background-color: var(--pf-brand-color-1000);
5510
+ }
5511
+
5512
+ .color-success {
5513
+ color: var(--pf-success-color);
5514
+ }
5515
+
5516
+ .bg-success {
5517
+ background-color: var(--pf-success-color);
5518
+ }
5519
+
5520
+ .color-info {
5521
+ color: var(--pf-info-color);
5522
+ }
5523
+
5524
+ .bg-info {
5525
+ background-color: var(--pf-info-color);
5526
+ }
5527
+
5528
+ .color-neutral {
5529
+ color: var(--pf-neutral-color);
5530
+ }
5531
+
5532
+ .bg-neutral {
5533
+ background-color: var(--pf-neutral-color);
5534
+ }
5535
+
5536
+ .color-warning {
5537
+ color: var(--pf-warning-color);
5538
+ }
5539
+
5540
+ .bg-warning {
5541
+ background-color: var(--pf-warning-color);
5542
+ }
5543
+
5544
+ .color-error {
5545
+ color: var(--pf-error-color);
5546
+ }
5547
+
5548
+ .bg-error {
5549
+ background-color: var(--pf-error-color);
5550
+ }
5551
+
5552
+ .color-brand {
5553
+ color: var(--pf-brand-color);
5554
+ }
5555
+
5556
+ .bg-brand {
5557
+ background-color: var(--pf-brand-color);
5558
+ }
5559
+
5560
+ .link-color {
5561
+ color: var(--pf-link-color);
5562
+ }
5563
+
5564
+ .active-link-color {
5565
+ color: var(--pf-active-link-color);
5566
+ }
5567
+
5568
+ .border {
5569
+ border: solid 1px;
5570
+ border-color: var(--pf-border-color-primary);
5571
+ border-radius: var(--pf-rounded);
5572
+ }
5573
+
5574
+ .border-thin {
5575
+ border-style: solid;
5576
+ border-width: var(--pf-border-thin);
5577
+ }
5578
+
5579
+ .border-t-thin {
5580
+ border-style: solid;
5581
+ border-top-width: var(--pf-border-thin);
5582
+ }
5583
+
5584
+ .border-b-thin {
5585
+ border-style: solid;
5586
+ border-bottom-width: var(--pf-border-thin);
5587
+ }
5588
+
5589
+ .border-l-thin {
5590
+ border-style: solid;
5591
+ border-left-width: var(--pf-border-thin);
5592
+ }
5593
+
5594
+ .border-r-thin {
5595
+ border-style: solid;
5596
+ border-right-width: var(--pf-border-thin);
5597
+ }
5598
+
5599
+ .border-sm {
5600
+ border-style: solid;
5601
+ border-width: var(--pf-border-sm);
5602
+ }
5603
+
5604
+ .border-t-sm {
5605
+ border-style: solid;
5606
+ border-top-width: var(--pf-border-sm);
5607
+ }
5608
+
5609
+ .border-b-sm {
5610
+ border-style: solid;
5611
+ border-bottom-width: var(--pf-border-sm);
5612
+ }
5613
+
5614
+ .border-l-sm {
5615
+ border-style: solid;
5616
+ border-left-width: var(--pf-border-sm);
5617
+ }
5618
+
5619
+ .border-r-sm {
5620
+ border-style: solid;
5621
+ border-right-width: var(--pf-border-sm);
5622
+ }
5623
+
5624
+ .border-md {
5625
+ border-style: solid;
5626
+ border-width: var(--pf-border-md);
5627
+ }
5628
+
5629
+ .border-t-md {
5630
+ border-style: solid;
5631
+ border-top-width: var(--pf-border-md);
5632
+ }
5633
+
5634
+ .border-b-md {
5635
+ border-style: solid;
5636
+ border-bottom-width: var(--pf-border-md);
5637
+ }
5638
+
5639
+ .border-l-md {
5640
+ border-style: solid;
5641
+ border-left-width: var(--pf-border-md);
5642
+ }
5643
+
5644
+ .border-r-md {
5645
+ border-style: solid;
5646
+ border-right-width: var(--pf-border-md);
5647
+ }
5648
+
5649
+ .border-lg {
5650
+ border-style: solid;
5651
+ border-width: var(--pf-border-lg);
5652
+ }
5653
+
5654
+ .border-t-lg {
5655
+ border-style: solid;
5656
+ border-top-width: var(--pf-border-lg);
5657
+ }
5658
+
5659
+ .border-b-lg {
5660
+ border-style: solid;
5661
+ border-bottom-width: var(--pf-border-lg);
5662
+ }
5663
+
5664
+ .border-l-lg {
5665
+ border-style: solid;
5666
+ border-left-width: var(--pf-border-lg);
5667
+ }
5668
+
5669
+ .border-r-lg {
5670
+ border-style: solid;
5671
+ border-right-width: var(--pf-border-lg);
5672
+ }
5673
+
5674
+ .border-0 {
5675
+ border-style: solid;
5676
+ border-width: 0;
5677
+ }
5678
+
5679
+ .border-t-0 {
5680
+ border-style: solid;
5681
+ border-top-width: 0;
5682
+ }
5683
+
5684
+ .border-b-0 {
5685
+ border-style: solid;
5686
+ border-bottom-width: 0;
5687
+ }
5688
+
5689
+ .border-l-0 {
5690
+ border-style: solid;
5691
+ border-left-width: 0;
5692
+ }
5693
+
5694
+ .border-r-0 {
5695
+ border-style: solid;
5696
+ border-right-width: 0;
5697
+ }
5698
+
5699
+ .border-xl {
5700
+ border-style: solid;
5701
+ border-width: var(--pf-border-xl);
5702
+ }
5703
+
5704
+ .border-t-xl {
5705
+ border-style: solid;
5706
+ border-top-width: var(--pf-border-xl);
5707
+ }
5708
+
5709
+ .border-b-xl {
5710
+ border-style: solid;
5711
+ border-bottom-width: var(--pf-border-xl);
5712
+ }
5713
+
5714
+ .border-l-xl {
5715
+ border-style: solid;
5716
+ border-left-width: var(--pf-border-xl);
5717
+ }
5718
+
5719
+ .border-r-xl {
5720
+ border-style: solid;
5721
+ border-right-width: var(--pf-border-xl);
5722
+ }
5723
+
5724
+ .border-dashed {
5725
+ border-style: dashed;
5726
+ }
5727
+
5728
+ .border-dotted {
5729
+ border-style: dotted;
5730
+ }
5731
+
5732
+ .border-double {
5733
+ border-style: double;
5734
+ }
5735
+
5736
+ .border-solid {
5737
+ border-style: solid;
5738
+ }
5739
+
5740
+ .border-primary {
5741
+ border-color: var(--pf-primary-color);
5742
+ }
5743
+
5744
+ .border-primary-50 {
5745
+ border-color: var(--pf-primary-color-50);
5746
+ }
5747
+
5748
+ .border-primary-100 {
5749
+ border-color: var(--pf-primary-color-100);
5750
+ }
5751
+
5752
+ .border-primary-150 {
5753
+ border-color: var(--pf-primary-color-150);
5754
+ }
5755
+
5756
+ .border-primary-200 {
5757
+ border-color: var(--pf-primary-color-200);
5758
+ }
5759
+
5760
+ .border-primary-250 {
5761
+ border-color: var(--pf-primary-color-250);
5762
+ }
5763
+
5764
+ .border-primary-300 {
5765
+ border-color: var(--pf-primary-color-300);
5766
+ }
5767
+
5768
+ .border-primary-400 {
5769
+ border-color: var(--pf-primary-color-400);
5770
+ }
5771
+
5772
+ .border-primary-450 {
5773
+ border-color: var(--pf-primary-color-450);
5774
+ }
5775
+
5776
+ .border-primary-500 {
5777
+ border-color: var(--pf-primary-color-500);
5778
+ }
5779
+
5780
+ .border-primary-600 {
5781
+ border-color: var(--pf-primary-color-600);
5782
+ }
5783
+
5784
+ .border-primary-700 {
5785
+ border-color: var(--pf-primary-color-700);
5786
+ }
5787
+
5788
+ .border-primary-800 {
5789
+ border-color: var(--pf-primary-color-800);
5790
+ }
5791
+
5792
+ .border-primary-900 {
5793
+ border-color: var(--pf-primary-color-900);
5794
+ }
5795
+
5796
+ .border-secondary {
5797
+ border-color: var(--pf-secondary-color);
5798
+ }
5799
+
5800
+ .border-secondary-50 {
5801
+ border-color: var(--pf-secondary-color-50);
5802
+ }
5803
+
5804
+ .border-secondary-100 {
5805
+ border-color: var(--pf-secondary-color-100);
5806
+ }
5807
+
5808
+ .border-secondary-150 {
5809
+ border-color: var(--pf-secondary-color-150);
5810
+ }
5811
+
5812
+ .border-secondary-200 {
4987
5813
  border-color: var(--pf-secondary-color-200);
4988
5814
  }
4989
5815
 
5816
+ .border-secondary-250 {
5817
+ border-color: var(--pf-secondary-color-250);
5818
+ }
5819
+
4990
5820
  .border-secondary-300 {
4991
5821
  border-color: var(--pf-secondary-color-300);
4992
5822
  }
@@ -4995,6 +5825,10 @@ p,
4995
5825
  border-color: var(--pf-secondary-color-400);
4996
5826
  }
4997
5827
 
5828
+ .border-secondary-450 {
5829
+ border-color: var(--pf-secondary-color-450);
5830
+ }
5831
+
4998
5832
  .border-secondary-500 {
4999
5833
  border-color: var(--pf-secondary-color-500);
5000
5834
  }
@@ -5019,14 +5853,26 @@ p,
5019
5853
  border-color: var(--pf-tertiary-color);
5020
5854
  }
5021
5855
 
5856
+ .border-tertiary-50 {
5857
+ border-color: var(--pf-tertiary-color-50);
5858
+ }
5859
+
5022
5860
  .border-tertiary-100 {
5023
5861
  border-color: var(--pf-tertiary-color-100);
5024
5862
  }
5025
5863
 
5864
+ .border-tertiary-150 {
5865
+ border-color: var(--pf-tertiary-color-150);
5866
+ }
5867
+
5026
5868
  .border-tertiary-200 {
5027
5869
  border-color: var(--pf-tertiary-color-200);
5028
5870
  }
5029
5871
 
5872
+ .border-tertiary-250 {
5873
+ border-color: var(--pf-tertiary-color-250);
5874
+ }
5875
+
5030
5876
  .border-tertiary-300 {
5031
5877
  border-color: var(--pf-tertiary-color-300);
5032
5878
  }
@@ -5035,6 +5881,10 @@ p,
5035
5881
  border-color: var(--pf-tertiary-color-400);
5036
5882
  }
5037
5883
 
5884
+ .border-tertiary-450 {
5885
+ border-color: var(--pf-tertiary-color-450);
5886
+ }
5887
+
5038
5888
  .border-tertiary-500 {
5039
5889
  border-color: var(--pf-tertiary-color-500);
5040
5890
  }
@@ -5059,14 +5909,26 @@ p,
5059
5909
  border-color: var(--pf-gray-color);
5060
5910
  }
5061
5911
 
5912
+ .border-gray-50 {
5913
+ border-color: var(--pf-gray-color-50);
5914
+ }
5915
+
5062
5916
  .border-gray-100 {
5063
5917
  border-color: var(--pf-gray-color-100);
5064
5918
  }
5065
5919
 
5920
+ .border-gray-150 {
5921
+ border-color: var(--pf-gray-color-150);
5922
+ }
5923
+
5066
5924
  .border-gray-200 {
5067
5925
  border-color: var(--pf-gray-color-200);
5068
5926
  }
5069
5927
 
5928
+ .border-gray-250 {
5929
+ border-color: var(--pf-gray-color-250);
5930
+ }
5931
+
5070
5932
  .border-gray-300 {
5071
5933
  border-color: var(--pf-gray-color-300);
5072
5934
  }
@@ -5075,6 +5937,10 @@ p,
5075
5937
  border-color: var(--pf-gray-color-400);
5076
5938
  }
5077
5939
 
5940
+ .border-gray-450 {
5941
+ border-color: var(--pf-gray-color-450);
5942
+ }
5943
+
5078
5944
  .border-gray-500 {
5079
5945
  border-color: var(--pf-gray-color-500);
5080
5946
  }
@@ -5099,14 +5965,26 @@ p,
5099
5965
  border-color: var(--pf-red-color);
5100
5966
  }
5101
5967
 
5968
+ .border-red-50 {
5969
+ border-color: var(--pf-red-color-50);
5970
+ }
5971
+
5102
5972
  .border-red-100 {
5103
5973
  border-color: var(--pf-red-color-100);
5104
5974
  }
5105
5975
 
5976
+ .border-red-150 {
5977
+ border-color: var(--pf-red-color-150);
5978
+ }
5979
+
5106
5980
  .border-red-200 {
5107
5981
  border-color: var(--pf-red-color-200);
5108
5982
  }
5109
5983
 
5984
+ .border-red-250 {
5985
+ border-color: var(--pf-red-color-250);
5986
+ }
5987
+
5110
5988
  .border-red-300 {
5111
5989
  border-color: var(--pf-red-color-300);
5112
5990
  }
@@ -5115,6 +5993,10 @@ p,
5115
5993
  border-color: var(--pf-red-color-400);
5116
5994
  }
5117
5995
 
5996
+ .border-red-450 {
5997
+ border-color: var(--pf-red-color-450);
5998
+ }
5999
+
5118
6000
  .border-red-500 {
5119
6001
  border-color: var(--pf-red-color-500);
5120
6002
  }
@@ -5135,18 +6017,86 @@ p,
5135
6017
  border-color: var(--pf-red-color-900);
5136
6018
  }
5137
6019
 
6020
+ .border-pink {
6021
+ border-color: var(--pf-pink-color);
6022
+ }
6023
+
6024
+ .border-pink-50 {
6025
+ border-color: var(--pf-pink-color-50);
6026
+ }
6027
+
6028
+ .border-pink-100 {
6029
+ border-color: var(--pf-pink-color-100);
6030
+ }
6031
+
6032
+ .border-pink-150 {
6033
+ border-color: var(--pf-pink-color-150);
6034
+ }
6035
+
6036
+ .border-pink-200 {
6037
+ border-color: var(--pf-pink-color-200);
6038
+ }
6039
+
6040
+ .border-pink-250 {
6041
+ border-color: var(--pf-pink-color-250);
6042
+ }
6043
+
6044
+ .border-pink-300 {
6045
+ border-color: var(--pf-pink-color-300);
6046
+ }
6047
+
6048
+ .border-pink-400 {
6049
+ border-color: var(--pf-pink-color-400);
6050
+ }
6051
+
6052
+ .border-pink-450 {
6053
+ border-color: var(--pf-pink-color-450);
6054
+ }
6055
+
6056
+ .border-pink-500 {
6057
+ border-color: var(--pf-pink-color-500);
6058
+ }
6059
+
6060
+ .border-pink-600 {
6061
+ border-color: var(--pf-pink-color-600);
6062
+ }
6063
+
6064
+ .border-pink-700 {
6065
+ border-color: var(--pf-pink-color-700);
6066
+ }
6067
+
6068
+ .border-pink-800 {
6069
+ border-color: var(--pf-pink-color-800);
6070
+ }
6071
+
6072
+ .border-pink-900 {
6073
+ border-color: var(--pf-pink-color-900);
6074
+ }
6075
+
5138
6076
  .border-orange {
5139
6077
  border-color: var(--pf-orange-color);
5140
6078
  }
5141
6079
 
6080
+ .border-orange-50 {
6081
+ border-color: var(--pf-orange-color-50);
6082
+ }
6083
+
5142
6084
  .border-orange-100 {
5143
6085
  border-color: var(--pf-orange-color-100);
5144
6086
  }
5145
6087
 
6088
+ .border-orange-150 {
6089
+ border-color: var(--pf-orange-color-150);
6090
+ }
6091
+
5146
6092
  .border-orange-200 {
5147
6093
  border-color: var(--pf-orange-color-200);
5148
6094
  }
5149
6095
 
6096
+ .border-orange-250 {
6097
+ border-color: var(--pf-orange-color-250);
6098
+ }
6099
+
5150
6100
  .border-orange-300 {
5151
6101
  border-color: var(--pf-orange-color-300);
5152
6102
  }
@@ -5155,6 +6105,10 @@ p,
5155
6105
  border-color: var(--pf-orange-color-400);
5156
6106
  }
5157
6107
 
6108
+ .border-orange-450 {
6109
+ border-color: var(--pf-orange-color-450);
6110
+ }
6111
+
5158
6112
  .border-orange-500 {
5159
6113
  border-color: var(--pf-orange-color-500);
5160
6114
  }
@@ -5179,14 +6133,26 @@ p,
5179
6133
  border-color: var(--pf-yellow-color);
5180
6134
  }
5181
6135
 
6136
+ .border-yellow-50 {
6137
+ border-color: var(--pf-yellow-color-50);
6138
+ }
6139
+
5182
6140
  .border-yellow-100 {
5183
6141
  border-color: var(--pf-yellow-color-100);
5184
6142
  }
5185
6143
 
6144
+ .border-yellow-150 {
6145
+ border-color: var(--pf-yellow-color-150);
6146
+ }
6147
+
5186
6148
  .border-yellow-200 {
5187
6149
  border-color: var(--pf-yellow-color-200);
5188
6150
  }
5189
6151
 
6152
+ .border-yellow-250 {
6153
+ border-color: var(--pf-yellow-color-250);
6154
+ }
6155
+
5190
6156
  .border-yellow-300 {
5191
6157
  border-color: var(--pf-yellow-color-300);
5192
6158
  }
@@ -5195,6 +6161,10 @@ p,
5195
6161
  border-color: var(--pf-yellow-color-400);
5196
6162
  }
5197
6163
 
6164
+ .border-yellow-450 {
6165
+ border-color: var(--pf-yellow-color-450);
6166
+ }
6167
+
5198
6168
  .border-yellow-500 {
5199
6169
  border-color: var(--pf-yellow-color-500);
5200
6170
  }
@@ -5219,14 +6189,26 @@ p,
5219
6189
  border-color: var(--pf-green-color);
5220
6190
  }
5221
6191
 
6192
+ .border-green-50 {
6193
+ border-color: var(--pf-green-color-50);
6194
+ }
6195
+
5222
6196
  .border-green-100 {
5223
6197
  border-color: var(--pf-green-color-100);
5224
6198
  }
5225
6199
 
6200
+ .border-green-150 {
6201
+ border-color: var(--pf-green-color-150);
6202
+ }
6203
+
5226
6204
  .border-green-200 {
5227
6205
  border-color: var(--pf-green-color-200);
5228
6206
  }
5229
6207
 
6208
+ .border-green-250 {
6209
+ border-color: var(--pf-green-color-250);
6210
+ }
6211
+
5230
6212
  .border-green-300 {
5231
6213
  border-color: var(--pf-green-color-300);
5232
6214
  }
@@ -5235,6 +6217,10 @@ p,
5235
6217
  border-color: var(--pf-green-color-400);
5236
6218
  }
5237
6219
 
6220
+ .border-green-450 {
6221
+ border-color: var(--pf-green-color-450);
6222
+ }
6223
+
5238
6224
  .border-green-500 {
5239
6225
  border-color: var(--pf-green-color-500);
5240
6226
  }
@@ -5255,18 +6241,142 @@ p,
5255
6241
  border-color: var(--pf-green-color-900);
5256
6242
  }
5257
6243
 
6244
+ .border-teal {
6245
+ border-color: var(--pf-teal-color);
6246
+ }
6247
+
6248
+ .border-teal-50 {
6249
+ border-color: var(--pf-teal-color-50);
6250
+ }
6251
+
6252
+ .border-teal-100 {
6253
+ border-color: var(--pf-teal-color-100);
6254
+ }
6255
+
6256
+ .border-teal-150 {
6257
+ border-color: var(--pf-teal-color-150);
6258
+ }
6259
+
6260
+ .border-teal-200 {
6261
+ border-color: var(--pf-teal-color-200);
6262
+ }
6263
+
6264
+ .border-teal-250 {
6265
+ border-color: var(--pf-teal-color-250);
6266
+ }
6267
+
6268
+ .border-teal-300 {
6269
+ border-color: var(--pf-teal-color-300);
6270
+ }
6271
+
6272
+ .border-teal-400 {
6273
+ border-color: var(--pf-teal-color-400);
6274
+ }
6275
+
6276
+ .border-teal-450 {
6277
+ border-color: var(--pf-teal-color-450);
6278
+ }
6279
+
6280
+ .border-teal-500 {
6281
+ border-color: var(--pf-teal-color-500);
6282
+ }
6283
+
6284
+ .border-teal-600 {
6285
+ border-color: var(--pf-teal-color-600);
6286
+ }
6287
+
6288
+ .border-teal-700 {
6289
+ border-color: var(--pf-teal-color-700);
6290
+ }
6291
+
6292
+ .border-teal-800 {
6293
+ border-color: var(--pf-teal-color-800);
6294
+ }
6295
+
6296
+ .border-teal-900 {
6297
+ border-color: var(--pf-teal-color-900);
6298
+ }
6299
+
6300
+ .border-brand {
6301
+ border-color: var(--pf-brand-color);
6302
+ }
6303
+
6304
+ .border-brand-50 {
6305
+ border-color: var(--pf-brand-color-50);
6306
+ }
6307
+
6308
+ .border-brand-100 {
6309
+ border-color: var(--pf-brand-color-100);
6310
+ }
6311
+
6312
+ .border-brand-150 {
6313
+ border-color: var(--pf-brand-color-150);
6314
+ }
6315
+
6316
+ .border-brand-200 {
6317
+ border-color: var(--pf-brand-color-200);
6318
+ }
6319
+
6320
+ .border-brand-250 {
6321
+ border-color: var(--pf-brand-color-250);
6322
+ }
6323
+
6324
+ .border-brand-300 {
6325
+ border-color: var(--pf-brand-color-300);
6326
+ }
6327
+
6328
+ .border-brand-400 {
6329
+ border-color: var(--pf-brand-color-400);
6330
+ }
6331
+
6332
+ .border-brand-450 {
6333
+ border-color: var(--pf-brand-color-450);
6334
+ }
6335
+
6336
+ .border-brand-500 {
6337
+ border-color: var(--pf-brand-color-500);
6338
+ }
6339
+
6340
+ .border-brand-600 {
6341
+ border-color: var(--pf-brand-color-600);
6342
+ }
6343
+
6344
+ .border-brand-700 {
6345
+ border-color: var(--pf-brand-color-700);
6346
+ }
6347
+
6348
+ .border-brand-800 {
6349
+ border-color: var(--pf-brand-color-800);
6350
+ }
6351
+
6352
+ .border-brand-900 {
6353
+ border-color: var(--pf-brand-color-900);
6354
+ }
6355
+
5258
6356
  .border-purple {
5259
6357
  border-color: var(--pf-purple-color);
5260
6358
  }
5261
6359
 
6360
+ .border-purple-50 {
6361
+ border-color: var(--pf-purple-color-50);
6362
+ }
6363
+
5262
6364
  .border-purple-100 {
5263
6365
  border-color: var(--pf-purple-color-100);
5264
6366
  }
5265
6367
 
6368
+ .border-purple-150 {
6369
+ border-color: var(--pf-purple-color-150);
6370
+ }
6371
+
5266
6372
  .border-purple-200 {
5267
6373
  border-color: var(--pf-purple-color-200);
5268
6374
  }
5269
6375
 
6376
+ .border-purple-250 {
6377
+ border-color: var(--pf-purple-color-250);
6378
+ }
6379
+
5270
6380
  .border-purple-300 {
5271
6381
  border-color: var(--pf-purple-color-300);
5272
6382
  }
@@ -5275,6 +6385,10 @@ p,
5275
6385
  border-color: var(--pf-purple-color-400);
5276
6386
  }
5277
6387
 
6388
+ .border-purple-450 {
6389
+ border-color: var(--pf-purple-color-450);
6390
+ }
6391
+
5278
6392
  .border-purple-500 {
5279
6393
  border-color: var(--pf-purple-color-500);
5280
6394
  }
@@ -5295,6 +6409,30 @@ p,
5295
6409
  border-color: var(--pf-purple-color-900);
5296
6410
  }
5297
6411
 
6412
+ .border-error {
6413
+ border-color: var(--pf-border-color-error);
6414
+ }
6415
+
6416
+ .border-warning {
6417
+ border-color: var(--pf-border-color-warning);
6418
+ }
6419
+
6420
+ .border-info {
6421
+ border-color: var(--pf-border-color-info);
6422
+ }
6423
+
6424
+ .border-success {
6425
+ border-color: var(--pf-border-color-success);
6426
+ }
6427
+
6428
+ .border-neutral {
6429
+ border-color: var(--pf-border-color-neutral);
6430
+ }
6431
+
6432
+ .border-pending {
6433
+ border-color: var(--pf-border-color-pending);
6434
+ }
6435
+
5298
6436
  .rounded {
5299
6437
  border-radius: var(--pf-rounded);
5300
6438
  }
@@ -5331,6 +6469,18 @@ p,
5331
6469
  border-radius: var(--pf-rounded-shaped);
5332
6470
  }
5333
6471
 
6472
+ .border-primary {
6473
+ border-color: var(--pf-border-color-primary);
6474
+ }
6475
+
6476
+ .border-secondary {
6477
+ border-color: var(--pf-border-color-secondary);
6478
+ }
6479
+
6480
+ .border-soft-accent {
6481
+ border-color: var(--pf-border-color-soft-accent);
6482
+ }
6483
+
5334
6484
  .pa-0 {
5335
6485
  padding: var(--pf-padding-0);
5336
6486
  }