@indico-data/design-system 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/lib/components/modal/ConfirmationModal.d.ts +1 -1
  2. package/lib/components/modal/Modal.stories.d.ts +1 -0
  3. package/lib/components/modal/types.d.ts +5 -2
  4. package/lib/index.css +91 -75
  5. package/lib/index.d.ts +6 -3
  6. package/lib/index.esm.css +91 -75
  7. package/lib/index.esm.js +8 -4
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +8 -4
  10. package/lib/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/floatUI/styles/FloatUI.scss +1 -0
  13. package/src/components/modal/ConfirmationModal.tsx +31 -2
  14. package/src/components/modal/Modal.stories.tsx +69 -0
  15. package/src/components/modal/types.ts +7 -3
  16. package/src/components/pagination/Pagination.tsx +1 -1
  17. package/src/components/pagination/__tests__/Pagination.test.tsx +5 -0
  18. package/src/components/pill/styles/Pill.scss +33 -33
  19. package/src/components/tanstackTable/styles/table.scss +0 -18
  20. package/src/components/tooltip/Tooltip.tsx +0 -1
  21. package/src/styles/globals.scss +1 -1
  22. package/src/styles/variables/themes/dark.scss +28 -13
  23. package/src/styles/variables/themes/light.scss +28 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/floatUI/styles/FloatUI.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  }
5
5
 
6
6
  .floatui-content {
7
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
7
8
  border-radius: var(--pf-floatui-border-radius);
8
9
  box-shadow: var(--pf-floatui-box-shadow);
9
10
  background: var(--pf-floatui-background-color);
package/src/components/modal/ConfirmationModal.tsx CHANGED
@@ -1,10 +1,12 @@
1
1
  import { Button } from '../button/Button';
2
2
  import { ButtonVariants } from '../button/types';
3
+ import { Checkbox } from '../forms/checkbox/Checkbox';
3
4
  import { Col, Row } from '../grid';
4
5
  import { Icon } from '../icons/Icon';
5
6
  import { Modal } from './Modal';
6
7
  import { ConfirmationModalProps } from './types';
7
8
  import classNames from 'classnames';
9
+ import { useState } from 'react';
8
10
 
9
11
  const defaultFooter = ({
10
12
  onCancelRequest,
@@ -12,14 +14,35 @@ const defaultFooter = ({
12
14
  confirmationButtonText,
13
15
  confirmationButtonVariant,
14
16
  cancelButtonText,
17
+ hasDontShowAgainCheckbox,
18
+ isChecked,
19
+ onDontShowAgainChange,
15
20
  }: {
16
21
  onCancelRequest?: () => void;
17
- onConfirmRequest?: () => void;
22
+ onConfirmRequest?: ({
23
+ dontShowAgain,
24
+ }: {
25
+ dontShowAgain?: boolean;
26
+ }) => void | Promise<void> | Promise<boolean>;
18
27
  confirmationButtonText?: string;
19
28
  confirmationButtonVariant?: ButtonVariants;
20
29
  cancelButtonText?: string;
30
+ hasDontShowAgainCheckbox?: boolean;
31
+ isChecked?: boolean;
32
+ onDontShowAgainChange?: (checked: boolean) => void;
21
33
  }) => (
22
34
  <Row gutterWidth={12} justify="end" align="center">
35
+ {hasDontShowAgainCheckbox && (
36
+ <Col>
37
+ <Checkbox
38
+ label="Don't display this again."
39
+ onChange={(e) => onDontShowAgainChange?.(e.target.checked)}
40
+ isChecked={isChecked}
41
+ id="dont-show-again"
42
+ name="dont-show-again"
43
+ />
44
+ </Col>
45
+ )}
23
46
  <Col xs="content">
24
47
  <Button onClick={onCancelRequest} ariaLabel={cancelButtonText || 'Cancel'} variant="outline">
25
48
  {cancelButtonText}
@@ -27,7 +50,7 @@ const defaultFooter = ({
27
50
  </Col>
28
51
  <Col xs="content">
29
52
  <Button
30
- onClick={onConfirmRequest}
53
+ onClick={() => onConfirmRequest?.({ dontShowAgain: isChecked })}
31
54
  ariaLabel={confirmationButtonText || 'Confirm'}
32
55
  variant={confirmationButtonVariant}
33
56
  >
@@ -61,7 +84,10 @@ export const ConfirmationModal = ({
61
84
  title,
62
85
  status = 'info',
63
86
  maxWidthInPixels,
87
+ hasDontShowAgainCheckbox,
64
88
  }: ConfirmationModalProps) => {
89
+ const [dontShowAgain, setDontShowAgain] = useState(false);
90
+
65
91
  const modalFooter =
66
92
  footer ||
67
93
  defaultFooter({
@@ -70,6 +96,9 @@ export const ConfirmationModal = ({
70
96
  confirmationButtonText,
71
97
  cancelButtonText,
72
98
  confirmationButtonVariant,
99
+ hasDontShowAgainCheckbox,
100
+ isChecked: dontShowAgain,
101
+ onDontShowAgainChange: setDontShowAgain,
73
102
  });
74
103
 
75
104
  return (
package/src/components/modal/Modal.stories.tsx CHANGED
@@ -244,6 +244,16 @@ const meta: Meta = {
244
244
  },
245
245
  },
246
246
  },
247
+ hasDontShowAgainCheckbox: {
248
+ control: 'boolean',
249
+ description: 'Whether the modal should have a checkbox to not show again',
250
+ table: {
251
+ category: 'Confirmation Modal',
252
+ type: {
253
+ summary: 'boolean',
254
+ },
255
+ },
256
+ },
247
257
  },
248
258
  };
249
259
 
@@ -338,11 +348,13 @@ export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
338
348
  confirmationButtonVariant: 'destructive',
339
349
  cancelButtonText: 'Cancel',
340
350
  shouldCloseOnOverlayClick: true,
351
+ subtitle: '',
341
352
  icon: 'trash',
342
353
  status: 'error',
343
354
  shouldCloseOnEsc: true,
344
355
  parentSelector: () => document.body,
345
356
  maxWidthInPixels: 600,
357
+ hasDontShowAgainCheckbox: false,
346
358
  },
347
359
 
348
360
  render: (args) => {
@@ -375,3 +387,60 @@ export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
375
387
  );
376
388
  },
377
389
  };
390
+
391
+ export const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationModal> = {
392
+ args: {
393
+ className: '',
394
+ onRequestClose: () => {
395
+ console.log('closed');
396
+ },
397
+ title: 'Disable User',
398
+ confirmationButtonText: 'Delete',
399
+ confirmationButtonVariant: 'destructive',
400
+ cancelButtonText: 'Cancel',
401
+ shouldCloseOnOverlayClick: true,
402
+ icon: 'trash',
403
+ status: 'error',
404
+ shouldCloseOnEsc: true,
405
+ parentSelector: () => document.body,
406
+ maxWidthInPixels: 600,
407
+ hasDontShowAgainCheckbox: true,
408
+ },
409
+
410
+ render: (args) => {
411
+ const [isOpen, setIsOpen] = useState<boolean>(false);
412
+
413
+ const handleOpen = () => {
414
+ setIsOpen(true);
415
+ };
416
+
417
+ const handleClose = () => {
418
+ setIsOpen(false);
419
+ };
420
+
421
+ return (
422
+ <Container>
423
+ <Row>
424
+ <Col sm={4}>
425
+ <ConfirmationModal
426
+ {...args}
427
+ isOpen={isOpen}
428
+ onConfirmRequest={({ dontShowAgain }) => {
429
+ console.log('confirmed', dontShowAgain);
430
+ }}
431
+ onRequestClose={handleClose}
432
+ >
433
+ <p>
434
+ Deleting user will no longer allow this person to have access to this organization.
435
+ You can always invite them again if you change your mind.
436
+ </p>
437
+ </ConfirmationModal>
438
+ <Button ariaLabel="open modal" onClick={handleOpen}>
439
+ Open modal
440
+ </Button>
441
+ </Col>
442
+ </Row>
443
+ </Container>
444
+ );
445
+ },
446
+ };
package/src/components/modal/types.ts CHANGED
@@ -19,13 +19,17 @@ export interface ModalProps {
19
19
  title?: string;
20
20
  subtitle?: string;
21
21
  footer?: React.ReactNode;
22
-
23
22
  maxWidthInPixels?: number;
24
23
  }
25
24
 
26
25
  export interface ConfirmationModalProps extends ModalProps {
27
- onConfirmRequest?: () => void;
28
- onCancelRequest?: () => void;
26
+ onConfirmRequest?: ({
27
+ dontShowAgain,
28
+ }: {
29
+ dontShowAgain?: boolean;
30
+ }) => void | Promise<void> | Promise<boolean>;
31
+ onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
32
+ hasDontShowAgainCheckbox?: boolean;
29
33
  confirmationButtonVariant?: ButtonVariants;
30
34
  confirmationButtonText?: string;
31
35
  cancelButtonText?: string;
package/src/components/pagination/Pagination.tsx CHANGED
@@ -75,7 +75,7 @@ export const Pagination = ({
75
75
  className={classNames('pagination__current-page-input', {
76
76
  'has-error': hasError,
77
77
  })}
78
- value={inputValue}
78
+ value={totalPages === 0 ? '0' : inputValue}
79
79
  name="currentPage"
80
80
  label="Current Page"
81
81
  hasHiddenLabel
package/src/components/pagination/__tests__/Pagination.test.tsx CHANGED
@@ -88,4 +88,9 @@ describe('Pagination', () => {
88
88
  });
89
89
  expect(screen.getByTestId('pagination-current-page-input')).toHaveClass('has-error');
90
90
  });
91
+
92
+ it('displays 0 when the total pages is 0', () => {
93
+ render(<Pagination totalPages={0} currentPage={1} onChange={() => {}} />);
94
+ expect(screen.getByTestId('pagination-current-page-input')).toHaveValue('0');
95
+ });
91
96
  });
package/src/components/pill/styles/Pill.scss CHANGED
@@ -1,80 +1,80 @@
1
1
  // Light Theme Specific Variables
2
2
  :root [data-theme='light'] {
3
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
3
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
4
4
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
5
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
5
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
6
6
 
7
- --pf-pill-error-background-color: var(--pf-red-color-450);
7
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
8
8
  --pf-pill-error-font-color: var(--pf-red-color-50);
9
- --pf-pill-error-border-color: var(--pf-red-color-450);
9
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
10
10
 
11
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
11
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
12
12
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
13
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
13
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
14
14
 
15
15
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
16
16
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
17
17
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
18
18
 
19
- --pf-pill-success-background-color: var(--pf-green-color-600);
19
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
20
20
  --pf-pill-success-font-color: var(--pf-green-color-50);
21
- --pf-pill-success-border-color: var(--pf-green-color-600);
21
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
22
22
 
23
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
23
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
24
24
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
25
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
25
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
26
26
 
27
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
27
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
28
28
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
29
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
29
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
30
30
 
31
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
31
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
32
32
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
33
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
33
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
34
34
 
35
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
35
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
36
36
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
37
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
37
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
38
38
  }
39
39
 
40
40
  // Dark Theme Specific Variables
41
41
  :root [data-theme='dark'],
42
42
  :root {
43
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
43
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
44
44
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
45
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
45
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
46
46
 
47
- --pf-pill-error-background-color: var(--pf-red-color-450);
47
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
48
48
  --pf-pill-error-font-color: var(--pf-red-color-50);
49
- --pf-pill-error-border-color: var(--pf-red-color-450);
49
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
50
50
 
51
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
51
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
52
52
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
53
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
53
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
54
54
 
55
55
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
56
56
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
57
57
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
58
58
 
59
- --pf-pill-success-background-color: var(--pf-green-color-600);
59
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
60
60
  --pf-pill-success-font-color: var(--pf-green-color-50);
61
- --pf-pill-success-border-color: var(--pf-green-color-600);
61
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
62
62
 
63
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
63
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
64
64
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
65
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
65
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
66
66
 
67
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
68
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
69
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
67
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
68
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
69
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
70
70
 
71
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
71
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
72
72
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
73
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
73
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
74
74
 
75
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
75
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
76
76
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
77
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
77
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
78
78
  }
79
79
 
80
80
  .pill {
package/src/components/tanstackTable/styles/table.scss CHANGED
@@ -210,24 +210,6 @@
210
210
  height: 100%;
211
211
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
212
212
 
213
- @keyframes shimmer {
214
- 0% {
215
- background-color: var(--pf-primary-color-700) 40;
216
- }
217
- 50% {
218
- background-color: var(--pf-primary-color-700);
219
- }
220
- 100% {
221
- background-color: var(--pf-primary-color-700) 40;
222
- }
223
- }
224
-
225
- animation: none;
226
-
227
- &.is-loading {
228
- animation: shimmer 3s ease-in-out infinite;
229
- }
230
-
231
213
  svg {
232
214
  margin: 0 auto;
233
215
  display: block;
package/src/components/tooltip/Tooltip.tsx CHANGED
@@ -23,7 +23,6 @@ export const Tooltip = ({
23
23
  }: TooltipProps) => {
24
24
  return (
25
25
  <ReactTooltip
26
- border="solid var(--pf-border-thin)var(--pf-border-color)"
27
26
  style={{
28
27
  backgroundColor: 'var(--pf-tooltip-background-color)',
29
28
  color: 'var(--pf-tooltip-font-color)',
package/src/styles/globals.scss CHANGED
@@ -161,7 +161,7 @@ a,
161
161
  .react-tooltip {
162
162
  z-index: 5;
163
163
  background-color: var(--pf-tooltip-background-color);
164
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
164
+ color: var(--pf-tooltip-font-color);
165
165
  opacity: 1 !important;
166
166
  text-wrap: wrap;
167
167
  }
package/src/styles/variables/themes/dark.scss CHANGED
@@ -131,6 +131,7 @@
131
131
  --pf-yellow-color-400: #eaab3e;
132
132
  --pf-yellow-color-450: #dc9518;
133
133
  --pf-yellow-color-500: #ad791f;
134
+ --pf-yellow-color-550: #976f00;
134
135
  --pf-yellow-color-600: #825b17;
135
136
  --pf-yellow-color-700: #58421d;
136
137
  --pf-yellow-color-800: #32291b;
@@ -171,21 +172,21 @@
171
172
  --pf-teal-color-900: #101818;
172
173
 
173
174
  // Brand Color
174
- --pf-brand-color: #2960a3;
175
+ --pf-brand-color: #2989ff;
175
176
 
176
177
  --pf-brand-color-50: #f6fafd;
177
178
  --pf-brand-color-100: #eef4fc;
178
- --pf-brand-color-150: #dce9f9;
179
- --pf-brand-color-200: #eef4fc;
180
- --pf-brand-color-250: #accdf6;
181
- --pf-brand-color-300: #8cbaf2;
182
- --pf-brand-color-400: #3e8bea;
179
+ --pf-brand-color-150: #e5effa;
180
+ --pf-brand-color-200: #d8e9fd;
181
+ --pf-brand-color-250: #bbd8fb;
182
+ --pf-brand-color-300: #9ec7fa;
183
+ --pf-brand-color-400: #2989ff;
183
184
  --pf-brand-color-450: #0070f5;
184
- --pf-brand-color-500: #2960a3;
185
- --pf-brand-color-600: #264973;
186
- --pf-brand-color-700: #233852;
187
- --pf-brand-color-800: #1b2532;
188
- --pf-brand-color-900: #101418;
185
+ --pf-brand-color-500: #005ccc;
186
+ --pf-brand-color-600: #004599;
187
+ --pf-brand-color-700: #06356f;
188
+ --pf-brand-color-800: #082345;
189
+ --pf-brand-color-900: #061323;
189
190
 
190
191
  // Purple Color
191
192
  --pf-purple-color: #5c29a3;
@@ -240,10 +241,24 @@
240
241
 
241
242
  // Utility Colors
242
243
  --pf-error-color: var(--pf-red-color-450);
244
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
245
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
243
246
  --pf-success-color: var(--pf-green-color-500);
244
- --pf-warning-color: var(--pf-yellow-color-400);
247
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
248
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
249
+ --pf-warning-color: var(--pf-yellow-color-450);
250
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
251
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
245
252
  --pf-neutral-color: var(--pf-gray-color-500);
253
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
254
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
246
255
  --pf-info-color: var(--pf-secondary-color-450);
256
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
257
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
247
258
  --pf-brand-color: var(--pf-brand-color-450);
248
- --pf-pending-color: var(--pf-orange-color-400);
259
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
260
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
261
+ --pf-pending-color: var(--pf-pink-color-450);
262
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
263
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
249
264
  }
package/src/styles/variables/themes/light.scss CHANGED
@@ -130,6 +130,7 @@
130
130
  --pf-yellow-color-400: #eaab3e;
131
131
  --pf-yellow-color-450: #dc9518;
132
132
  --pf-yellow-color-500: #ad791f;
133
+ --pf-yellow-color-550: #976f00;
133
134
  --pf-yellow-color-600: #825b17;
134
135
  --pf-yellow-color-700: #58421d;
135
136
  --pf-yellow-color-800: #32291b;
@@ -169,22 +170,21 @@
169
170
  --pf-teal-color-800: #1b3232;
170
171
  --pf-teal-color-900: #101818;
171
172
 
172
- // Brand Color
173
- --pf-brand-color: #2960a3;
173
+ --pf-brand-color: #2989ff;
174
174
 
175
175
  --pf-brand-color-50: #f6fafd;
176
176
  --pf-brand-color-100: #eef4fc;
177
- --pf-brand-color-150: #dce9f9;
178
- --pf-brand-color-200: #eef4fc;
179
- --pf-brand-color-250: #accdf6;
180
- --pf-brand-color-300: #8cbaf2;
181
- --pf-brand-color-400: #3e8bea;
177
+ --pf-brand-color-150: #e5effa;
178
+ --pf-brand-color-200: #d8e9fd;
179
+ --pf-brand-color-250: #bbd8fb;
180
+ --pf-brand-color-300: #9ec7fa;
181
+ --pf-brand-color-400: #2989ff;
182
182
  --pf-brand-color-450: #0070f5;
183
- --pf-brand-color-500: #2960a3;
184
- --pf-brand-color-600: #264973;
185
- --pf-brand-color-700: #233852;
186
- --pf-brand-color-800: #1b2532;
187
- --pf-brand-color-900: #101418;
183
+ --pf-brand-color-500: #005ccc;
184
+ --pf-brand-color-600: #004599;
185
+ --pf-brand-color-700: #06356f;
186
+ --pf-brand-color-800: #082345;
187
+ --pf-brand-color-900: #061323;
188
188
 
189
189
  // Purple Color
190
190
  --pf-purple-color: #5c29a3;
@@ -239,10 +239,24 @@
239
239
 
240
240
  // Utility Colors
241
241
  --pf-error-color: var(--pf-red-color-450);
242
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
243
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
242
244
  --pf-success-color: var(--pf-green-color-500);
243
- --pf-warning-color: var(--pf-yellow-color-400);
245
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
246
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
247
+ --pf-warning-color: var(--pf-yellow-color-450);
248
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
249
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
244
250
  --pf-neutral-color: var(--pf-gray-color-500);
251
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
252
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
245
253
  --pf-info-color: var(--pf-secondary-color-450);
254
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
255
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
246
256
  --pf-brand-color: var(--pf-brand-color-450);
247
- --pf-pending-color: var(--pf-orange-color-400);
257
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
258
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
259
+ --pf-pending-color: var(--pf-pink-color-450);
260
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
261
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
248
262
  }