@indico-data/design-system 3.0.1 → 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 (16) hide show
  1. package/lib/index.css +69 -53
  2. package/lib/index.esm.css +69 -53
  3. package/lib/index.esm.js +2 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +2 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/floatUI/styles/FloatUI.scss +1 -0
  9. package/src/components/pagination/Pagination.tsx +1 -1
  10. package/src/components/pagination/__tests__/Pagination.test.tsx +5 -0
  11. package/src/components/pill/styles/Pill.scss +33 -33
  12. package/src/components/tanstackTable/styles/table.scss +0 -18
  13. package/src/components/tooltip/Tooltip.tsx +0 -1
  14. package/src/styles/globals.scss +1 -1
  15. package/src/styles/variables/themes/dark.scss +17 -2
  16. package/src/styles/variables/themes/light.scss +17 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.1",
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/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;
@@ -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;
@@ -238,10 +239,24 @@
238
239
 
239
240
  // Utility Colors
240
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);
241
244
  --pf-success-color: var(--pf-green-color-500);
242
- --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);
243
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);
244
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);
245
256
  --pf-brand-color: var(--pf-brand-color-450);
246
- --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);
247
262
  }