@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/src/components/toast/styles/Toast.scss CHANGED
@@ -1,19 +1,69 @@
1
1
  // Light Theme Specific Variables
2
2
  :root [data-theme='light'] {
3
- --toastify-color-dark: var(--pf-white-color);
4
- --toastify-color-progress-dark: var(--pf-primary-color-200);
5
- --toastify-icon-color-success: var(--pf-success-color);
6
- --toastify-color-progress-bgo: 0.2;
7
- --toastify-text-color-dark: var(
8
- --pf-gray-color-600
9
- ); // This is accurate since the library uses css-in-js but we use data-theme instead.
3
+ --toastify-color-info: var(--pf-info-color);
4
+ --toastify-color-success: var(--pf-success-color);
5
+ --toastify-color-warning: var(--pf-warning-color);
6
+ --toastify-color-error: var(--pf-error-color);
10
7
  }
11
8
 
12
9
  // Dark Theme Specific Variables
13
10
  :root [data-theme='dark'] {
14
- --toastify-color-dark: var(--pf-background-color-light);
15
- --toastify-color-progress-dark: var(--pf-primary-color-400);
16
- --toastify-icon-color-success: var(--pf-success-color);
17
- --toastify-color-progress-bgo: 0.2;
18
- --toastify-text-color-dark: var(--pf-font-color);
11
+ --toastify-color-info: var(--pf-info-color);
12
+ --toastify-color-success: var(--pf-success-color);
13
+ --toastify-color-warning: var(--pf-warning-color);
14
+ --toastify-color-error: var(--pf-error-color);
15
+ }
16
+
17
+ // Override Toast BG colors and text colors
18
+ .Toastify__toast-theme--colored.Toastify__toast--default {
19
+ background-color: var(--pf-background-color-secondary);
20
+ color: var(--pf-font-color);
21
+ svg {
22
+ fill: var(--pf-info-color);
23
+ }
24
+ }
25
+ .Toastify__toast-theme--colored.Toastify__toast--info {
26
+ background-color: var(--pf-background-color-secondary);
27
+ color: var(--pf-font-color);
28
+ svg {
29
+ fill: var(--pf-info-color);
30
+ }
31
+ }
32
+ .Toastify__toast-theme--colored.Toastify__toast--success {
33
+ background-color: var(--pf-background-color-secondary);
34
+ color: var(--pf-font-color);
35
+ svg {
36
+ fill: var(--pf-success-color);
37
+ }
38
+ }
39
+ .Toastify__toast-theme--colored.Toastify__toast--warning {
40
+ background-color: var(--pf-background-color-secondary);
41
+ color: var(--pf-font-color);
42
+ svg {
43
+ fill: var(--pf-warning-color);
44
+ }
45
+ }
46
+ .Toastify__toast-theme--colored.Toastify__toast--error {
47
+ background-color: var(--pf-background-color-secondary);
48
+ color: var(--pf-font-color);
49
+ svg {
50
+ fill: var(--pf-error-color);
51
+ }
52
+ }
53
+
54
+ // Override Progress Bar Colors
55
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
56
+ background-color: var(--pf-info-color);
57
+ }
58
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {
59
+ background-color: var(--pf-info-color);
60
+ }
61
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
62
+ background-color: var(--pf-success-color);
63
+ }
64
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
65
+ background-color: var(--pf-warning-color);
66
+ }
67
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
68
+ background-color: var(--pf-error-color);
19
69
  }
package/src/components/tooltip/Tooltip.tsx CHANGED
@@ -23,13 +23,17 @@ export const Tooltip = ({
23
23
  }: TooltipProps) => {
24
24
  return (
25
25
  <ReactTooltip
26
- border="solid 1px var(--pf-border-color)"
26
+ border="solid var(--pf-border-thin)var(--pf-border-color)"
27
+ style={{
28
+ backgroundColor: 'var(--pf-tooltip-background-color)',
29
+ color: 'var(--pf-tooltip-font-color)',
30
+ zIndex,
31
+ }}
27
32
  id={id}
28
33
  place={place}
29
34
  openOnClick={clickToShow}
30
35
  delayShow={delayShow}
31
36
  delayHide={delayHide}
32
- style={{ zIndex }}
33
37
  {...rest}
34
38
  >
35
39
  {children}
package/src/components/tooltip/styles/Tooltip.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  :root [data-theme='light'] {
2
- --pf-tooltip-background-color: var(--pf-white-color);
2
+ --pf-tooltip-background-color: var(--pf-background-color-inverted);
3
+ --pf-tooltip-font-color: var(--pf-font-color-inverted);
4
+ --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
3
5
  }
4
6
 
5
7
  :root [data-theme='dark'],
6
8
  :root {
7
- --pf-tooltip-background-color: var(--pf-primary-color-900);
9
+ --pf-tooltip-background-color: var(--pf-background-color-inverted);
10
+ --pf-tooltip-font-color: var(--pf-font-color-inverted);
11
+ --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
8
12
  }
package/src/components/truncate/Truncate.tsx CHANGED
@@ -45,7 +45,7 @@ export const Truncate = ({
45
45
  {truncateString}
46
46
  </span>
47
47
  {isTruncated && truncateString && hasTooltip && (
48
- <Tooltip data-tooltip-delay-hide={100} id={id} border="solid 1px var(--pf-border-color)">
48
+ <Tooltip data-tooltip-delay-hide={0} id={id}>
49
49
  {truncateString}
50
50
  </Tooltip>
51
51
  )}
package/src/index.ts CHANGED
@@ -27,7 +27,7 @@ export { FloatUI } from './components/floatUI';
27
27
  export { Menu } from './components/menu';
28
28
  export { Pill } from './components/pill';
29
29
  export { Badge } from './components/badge';
30
- export { Modal } from './components/modal';
30
+ export { Modal, ConfirmationModal } from './components/modal';
31
31
  export { TanstackTable } from './components/tanstackTable';
32
32
  export { Tooltip } from './components/tooltip';
33
33
  export { Pagination } from './components/pagination';
package/src/styles/_borders.scss CHANGED
@@ -3,16 +3,17 @@ $values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--
3
3
  var(--pf-border-xl);
4
4
  $directions: ('t', top), ('b', bottom), ('l', left), ('r', right);
5
5
  $styles: dashed, dotted, double, solid;
6
- $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
7
- 'purple';
8
- $color-grades: '100', '200', '300', '400', '500', '600', '700', '800', '900';
6
+ $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'pink', 'orange', 'yellow', 'green',
7
+ 'teal', 'brand', 'purple';
8
+ $color-grades: '50', '100', '150', '200', '250', '300', '400', '450', '500', '600', '700', '800',
9
+ '900';
9
10
  $radiusSizes: 0, sm, lg, md, xl, pill, circle, shaped;
10
11
  $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md), var(--pf-rounded-lg),
11
12
  var(--pf-rounded-xl), var(--pf-rounded-pill), var(--pf-rounded-circle), var(--pf-rounded-shaped);
12
13
 
13
14
  .border {
14
15
  border: solid 1px;
15
- border-color: var(--pf-border-color);
16
+ border-color: var(--pf-border-color-primary);
16
17
  border-radius: var(--pf-rounded);
17
18
  }
18
19
 
@@ -48,6 +49,26 @@ $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md),
48
49
  }
49
50
  }
50
51
 
52
+ // Utility border color classes (no grades)
53
+ .border-error {
54
+ border-color: var(--pf-border-color-error);
55
+ }
56
+ .border-warning {
57
+ border-color: var(--pf-border-color-warning);
58
+ }
59
+ .border-info {
60
+ border-color: var(--pf-border-color-info);
61
+ }
62
+ .border-success {
63
+ border-color: var(--pf-border-color-success);
64
+ }
65
+ .border-neutral {
66
+ border-color: var(--pf-border-color-neutral);
67
+ }
68
+ .border-pending {
69
+ border-color: var(--pf-border-color-pending);
70
+ }
71
+
51
72
  .rounded {
52
73
  border-radius: var(--pf-rounded);
53
74
  }
@@ -57,3 +78,13 @@ $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md),
57
78
  border-radius: $value;
58
79
  }
59
80
  }
81
+
82
+ .border-primary {
83
+ border-color: var(--pf-border-color-primary);
84
+ }
85
+ .border-secondary {
86
+ border-color: var(--pf-border-color-secondary);
87
+ }
88
+ .border-soft-accent {
89
+ border-color: var(--pf-border-color-soft-accent);
90
+ }
package/src/styles/_colors.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
2
- 'purple';
2
+ 'purple', 'pink', 'teal', 'brand';
3
3
  $color-grades: ();
4
4
  @for $i from 1 through 20 {
5
5
  $color-grades: append($color-grades, #{$i * 50}, comma);
package/src/styles/globals.scss CHANGED
@@ -3,24 +3,65 @@
3
3
  // ***********************************************************************************************************************************
4
4
  --pf-white-color: #ffffff;
5
5
  --pf-black-color: #000000;
6
- --pf-background-color-light: var(--pf-gray-color-900);
7
- --pf-background-color: var(--pf-white-color);
8
- --pf-background-color-dark: var(--pf-gray-color-100);
9
- --pf-background-secondary-color-light: var(--pf-secondary-color-300);
10
- --pf-background-color-secondary: var(--pf-secondary-color-500);
11
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
6
+ --pf-page-background-color: var(--pf-gray-color-100);
7
+ --pf-background-color-primary: var(--pf-gray-color-150);
8
+ --pf-background-color-secondary: var(--pf-gray-color-50);
9
+ --pf-background-color-tertiary: var(--pf-gray-color-200);
10
+ --pf-background-color-quaternary: var(--pf-gray-color-250);
11
+ --pf-background-color-accent: var(--pf-secondary-color-200);
12
+ --pf-background-color-highlight: var(--pf-brand-color-250);
13
+ --pf-background-brand-solid: var(--pf-brand-color-500);
14
+ --pf-background-brand-hover: var(--pf-brand-color-600);
15
+ --pf-background-color-inverted: var(--pf-tertiary-color-900);
12
16
 
13
17
  // Fonts
14
18
  // ***********************************************************************************************************************************
15
- --pf-font-color: var(--pf-gray-color);
16
- --pf-font-color-emphasis: var(--pf-gray-color-800);
17
- --pf-font-color-light: var(--pf-gray-color-700);
18
- --pf-font-color-light-header: var(--pf-gray-color-600);
19
+ --pf-font-color: var(--pf-gray-color-900);
20
+ --pf-font-color-inverted: var(--pf-gray-color-50);
21
+ --pf-font-color-soft: var(--pf-gray-color-700);
22
+ --pf-font-color-muted: var(--pf-gray-color-800);
23
+ --pf-font-color-placeholder: var(--pf-gray-color-450);
24
+ --pf-font-color-accent: var(--pf-brand-color-500);
25
+ --pf-font-color-disabled: var(--pf-gray-color-400);
26
+ --pf-font-color-error: var(--pf-error-color);
27
+ --pf-font-color-warning: var(--pf-warning-color);
28
+ --pf-font-color-info: var(--pf-info-color);
29
+ --pf-font-color-success: var(--pf-success-color);
30
+ --pf-font-color-neutral: var(--pf-neutral-color);
31
+ --pf-font-color-pending: var(--pf-pending-color);
32
+ --pf-font-color-brand: var(--pf-brand-color);
19
33
 
20
34
  // Links
21
35
  // ***********************************************************************************************************************************
22
- --pf-link-color: var(--pf-secondary-color);
23
- --pf-active-link-color: var(--pf-secondary-color-300);
36
+ --pf-link-color: var(--pf-brand-color-500);
37
+ --pf-link-hover-color: var(--pf-brand-color-600);
38
+ --pf-secondary-link-color: var(--pf-tertiary-color-700);
39
+ --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
40
+ --pf-active-link-color: var(--pf-brand-color-500);
41
+
42
+ // Chart Colors
43
+ // ***********************************************************************************************************************************
44
+
45
+ --pf-line-chart-color-one: #256579;
46
+ --pf-line-chart-color-two: #277a93;
47
+ --pf-line-chart-color-three: #2b97af;
48
+ --pf-line-chart-color-four: #4db8cb;
49
+ --pf-line-chart-color-five: #81d1df;
50
+ --pf-line-chart-color-six: #0e3d7e;
51
+ --pf-line-chart-color-seven: #1562c1;
52
+ --pf-line-chart-color-eight: #36a1e9;
53
+ --pf-line-chart-color-nine: #83c5f6;
54
+ --pf-line-chart-color-ten: #afd8f4;
55
+ --pf-line-chart-color-eleven: #45267d;
56
+ --pf-line-chart-color-twelve: #5d2fb1;
57
+ --pf-line-chart-color-thirteen: #7047d2;
58
+ --pf-line-chart-color-fourteen: #8d75d7;
59
+ --pf-line-chart-color-fifteen: #bdaeea;
60
+ --pf-line-chart-color-sixteen: #003b8c;
61
+ --pf-line-chart-color-seventeen: #0060d6;
62
+ --pf-line-chart-color-eighteen: #36a1ea;
63
+ --pf-line-chart-color-nineteen: #2b97af;
64
+ --pf-line-chart-color-twenty: #7047d2;
24
65
  }
25
66
 
26
67
  :root [data-theme='dark'],
@@ -29,24 +70,65 @@
29
70
  // ***********************************************************************************************************************************
30
71
  --pf-white-color: #ffffff;
31
72
  --pf-black-color: #000000;
32
- --pf-background-color-light: var(--pf-primary-color);
33
- --pf-background-color: var(--pf-primary-color-800);
34
- --pf-background-color-dark: var(--pf-primary-color-900);
35
- --pf-background-secondary-color-light: var(--pf-secondary-color-300);
36
- --pf-background-color-secondary: var(--pf-secondary-color-500);
37
- --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
73
+
74
+ --pf-page-background-color: var(--pf-primary-color-700);
75
+ --pf-background-color-primary: var(--pf-primary-color-900);
76
+ --pf-background-color-secondary: var(--pf-primary-color-800);
77
+ --pf-background-color-tertiary: var(--pf-primary-color-600);
78
+ --pf-background-color-quaternary: var(--pf-primary-color-500);
79
+ --pf-background-color-accent: var(--pf-brand-color-800);
80
+ --pf-background-color-highlight: var(--pf-brand-color-700);
81
+ --pf-background-brand-solid: var(--pf-secondary-color-450);
82
+ --pf-background-brand-hover: var(--pf-secondary-color-600);
83
+ --pf-background-color-inverted: var(--pf-tertiary-color-50);
38
84
 
39
85
  // Fonts
40
86
  // ***********************************************************************************************************************************
41
- --pf-font-color: var(--pf-white-color);
42
- --pf-font-color-emphasis: var(--pf-gray-color-300);
43
- --pf-font-color-light: var(--pf-gray-color-100);
44
- --pf-font-color-light-header: var(--pf-primary-color-100);
87
+ --pf-font-color: var(--pf-gray-color-50);
88
+ --pf-font-color-inverted: var(--pf-gray-color-900);
89
+ --pf-font-color-soft: var(--pf-tertiary-color-300);
90
+ --pf-font-color-placeholder: var(--pf-tertiary-color-500);
91
+ --pf-font-color-accent: var(--pf-secondary-color-400);
92
+ --pf-font-color-disabled: var(--pf-primary-color-500);
93
+ --pf-font-color-error: var(--pf-error-color);
94
+ --pf-font-color-warning: var(--pf-warning-color);
95
+ --pf-font-color-info: var(--pf-info-color);
96
+ --pf-font-color-success: var(--pf-success-color);
97
+ --pf-font-color-neutral: var(--pf-neutral-color);
98
+ --pf-font-color-pending: var(--pf-pending-color);
99
+ --pf-font-color-brand: var(--pf-brand-color);
45
100
 
46
101
  // Links
47
102
  // ***********************************************************************************************************************************
48
- --pf-link-color: var(--pf-gray-color-300);
49
- --pf-active-link-color: var(--pf-gray-color-100);
103
+ --pf-link-color: var(--pf-secondary-color-400);
104
+ --pf-link-hover-color: var(--pf-secondary-color-400);
105
+ --pf-secondary-link-color: var(--pf-tertiary-color-450);
106
+ --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
107
+ --pf-active-link-color: var(--pf-secondary-color-400);
108
+
109
+ // Chart Colors
110
+ // ***********************************************************************************************************************************
111
+
112
+ --pf-line-chart-color-one: #2b97af;
113
+ --pf-line-chart-color-two: #4db8cb;
114
+ --pf-line-chart-color-three: #81d1df;
115
+ --pf-line-chart-color-four: #b5e4ec;
116
+ --pf-line-chart-color-five: #d7f1f6;
117
+ --pf-line-chart-color-six: #042d6a;
118
+ --pf-line-chart-color-seven: #0955b3;
119
+ --pf-line-chart-color-eight: #1f8fe0;
120
+ --pf-line-chart-color-nine: #5bbeed;
121
+ --pf-line-chart-color-ten: #a8dcfa;
122
+ --pf-line-chart-color-eleven: #572baf;
123
+ --pf-line-chart-color-twelve: #774dcb;
124
+ --pf-line-chart-color-thirteen: #9d81df;
125
+ --pf-line-chart-color-fourteen: #c5b5ec;
126
+ --pf-line-chart-color-fifteen: #e0d7f6;
127
+ --pf-line-chart-color-sixteen: #0070f5;
128
+ --pf-line-chart-color-seventeen: #36a1ea;
129
+ --pf-line-chart-color-eighteen: #80c3f2;
130
+ --pf-line-chart-color-nineteen: #4db8cb;
131
+ --pf-line-chart-color-twenty: #774dcb;
50
132
  }
51
133
 
52
134
  // Global Styles
@@ -79,7 +161,7 @@ a,
79
161
  .react-tooltip {
80
162
  z-index: 5;
81
163
  background-color: var(--pf-tooltip-background-color);
82
- border: var(--pf-border-sm) solid var(--pf-border-color);
164
+ border: var(--pf-border-sm) solid var(--pf-border-color-primary);
83
165
  opacity: 1 !important;
84
166
  text-wrap: wrap;
85
167
  }
package/src/styles/storybook.scss CHANGED
@@ -1,22 +1,39 @@
1
1
  :root [data-theme='light'],
2
+ :root [data-theme='dark'],
2
3
  :root {
3
- --storybook-bg-color: var(--pf-white-color);
4
- --storybook-font-color: var(--pf-gray-color);
4
+ --storybook-bg-color: var(--pf-background-color-tertiary);
5
+ --storybook-font-color: var(--pf-font-color);
5
6
  }
6
7
 
7
- :root [data-theme='dark'] {
8
- --storybook-bg-color: var(--pf-background-color);
9
- --storybook-font-color: var(--pf-white-color);
8
+ .sbdocs.sbdocs-wrapper {
9
+ background-color: var(--pf-page-background-color) !important;
10
+ color: var(--pf-font-color) !important;
11
+ }
12
+ .sbdocs.sbdocs-content {
13
+ h1,
14
+ h2,
15
+ h3,
16
+ h4,
17
+ h5,
18
+ h6,
19
+ p,
20
+ th,
21
+ li {
22
+ color: var(--pf-font-color) !important;
23
+ }
10
24
  }
11
25
 
12
26
  .sb__story {
13
27
  background-color: var(--storybook-bg-color);
14
28
  color: var(--storybook-font-color);
15
29
  }
30
+ .sbdocs.sbdocs-preview {
31
+ border-color: var(--pf-border-color-primary);
32
+ }
16
33
 
17
34
  .sb__mock-card {
18
35
  border-radius: var(--pf-rounded-lg);
19
- box-shadow: 0 0 0 1px var(--pf-border-color);
36
+ box-shadow: 0 0 0 1px var(--pf-border-color-primary);
20
37
  margin: 1rem;
21
38
  padding: 1rem;
22
39
  .sb__mock-card-title {
package/src/styles/variables/_borders.scss CHANGED
@@ -16,15 +16,31 @@
16
16
  }
17
17
 
18
18
  :root [data-theme='light'] {
19
- --pf-border-color: var(--pf-gray-color-800);
20
- --pf-border-color-light: var(--pf-gray-color-100);
21
- --pf-horizontal-line-color: var(--pf-gray-color-200);
19
+ --pf-border-color-primary: var(--pf-gray-color-300);
20
+ --pf-border-color-secondary: var(--pf-gray-color-250);
21
+ --pf-border-hover-color: var(--pf-gray-color-400);
22
+ --pf-border-color-soft: var(--pf-secondary-color-450);
23
+ --pf-border-color-accent: var(--pf-brand-color-450);
24
+ --pf-border-color-error: var(--pf-error-color);
25
+ --pf-border-color-warning: var(--pf-warning-color);
26
+ --pf-border-color-info: var(--pf-info-color);
27
+ --pf-border-color-success: var(--pf-success-color);
28
+ --pf-border-color-neutral: var(--pf-neutral-color);
29
+ --pf-border-color-pending: var(--pf-pending-color);
30
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
22
31
  }
23
32
 
24
33
  :root [data-theme='dark'],
25
34
  :root {
26
- --pf-horizontal-line-color: var(--pf-tertiary-color-800);
27
- --pf-border-color: var(--pf-tertiary-color-800);
28
- --pf-border-color-medium: var(--pf-tertiary-color-500);
29
- --pf-border-color-light: var(--pf-white-color-100);
35
+ --pf-border-color-primary: var(--pf-tertiary-color-700);
36
+ --pf-border-color-secondary: var(--pf-primary-color-600);
37
+ --pf-border-color-soft: var(--pf-secondary-color-600);
38
+ --pf-border-color-accent: var(--pf-secondary-color-400);
39
+ --pf-border-color-error: var(--pf-error-color);
40
+ --pf-border-color-warning: var(--pf-warning-color);
41
+ --pf-border-color-info: var(--pf-info-color);
42
+ --pf-border-color-success: var(--pf-success-color);
43
+ --pf-border-color-neutral: var(--pf-neutral-color);
44
+ --pf-border-color-pending: var(--pf-pending-color);
45
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
30
46
  }
package/src/styles/variables/_padding.scss CHANGED
@@ -1,12 +1,8 @@
1
1
  :root {
2
2
  --pf-padding-0: 0;
3
- --pf-padding-0-5: 2px;
4
3
  --pf-padding-1: 4px;
5
- --pf-padding-1-5: 6px;
6
4
  --pf-padding-2: 8px;
7
- --pf-padding-2-5: 10px;
8
5
  --pf-padding-3: 12px;
9
- --pf-padding-3-5: 14px;
10
6
  --pf-padding-4: 16px;
11
7
  --pf-padding-5: 20px;
12
8
  --pf-padding-6: 24px;