@indico-data/design-system 2.28.1 → 2.29.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 (29) hide show
  1. package/lib/index.css +115 -8
  2. package/lib/index.d.ts +2 -1
  3. package/lib/index.esm.css +115 -8
  4. package/lib/index.esm.js +1 -14
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +1 -14
  7. package/lib/index.js.map +1 -1
  8. package/lib/src/components/pill/types.d.ts +1 -1
  9. package/package.json +1 -1
  10. package/src/components/button/styles/Button.scss +3 -0
  11. package/src/components/card/styles/Card.scss +1 -0
  12. package/src/components/floatUI/styles/_variables.scss +2 -2
  13. package/src/components/forms/input/styles/Input.scss +1 -1
  14. package/src/components/pill/types.ts +1 -1
  15. package/src/legacy/styles/globals/typography.ts +1 -14
  16. package/src/styles/_borders.scss +10 -12
  17. package/src/styles/_colors.scss +10 -4
  18. package/src/styles/_sheets.scss +7 -0
  19. package/src/styles/globals.scss +74 -6
  20. package/src/styles/index.scss +1 -0
  21. package/src/styles/variables/_borders.scss +14 -1
  22. package/src/styles/variables/_typography.scss +12 -0
  23. package/src/styles/variables/themes/light.scss +2 -3
  24. package/src/stylesAndAnimations/borders/BorderColor.tsx +8 -0
  25. package/src/stylesAndAnimations/colors/Colors.tsx +4 -4
  26. package/src/stylesAndAnimations/colors/Swatch.tsx +28 -4
  27. package/src/stylesAndAnimations/colors/UtilityClasses.mdx +135 -2
  28. package/src/stylesAndAnimations/colors/UtilityClasses.tsx +139 -109
  29. package/src/stylesAndAnimations/colors/swatches.scss +0 -4
package/lib/index.css CHANGED
@@ -28,6 +28,18 @@
28
28
  --pf-label-size-lg: var(--pf-font-size-h2);
29
29
  }
30
30
 
31
+ h1,
32
+ h2,
33
+ h3,
34
+ h4,
35
+ h5,
36
+ h6,
37
+ p,
38
+ ul,
39
+ li {
40
+ color: var(--pf-font-color);
41
+ }
42
+
31
43
  :root [data-theme=light],
32
44
  :root {
33
45
  --pf-primary-color: #6833d0;
@@ -61,6 +73,7 @@
61
73
  --pf-gray-color-700: #2c2c2c;
62
74
  --pf-gray-color-800: #1f1f1f;
63
75
  --pf-gray-color-900: #141414;
76
+ --pf-steel-color: #7c8594;
64
77
  --pf-steel-color-100: #f4f6f8;
65
78
  --pf-steel-color-200: #d9dee5;
66
79
  --pf-steel-color-300: #bcc3cd;
@@ -100,7 +113,6 @@
100
113
  --pf-red-color-700: #c21d20;
101
114
  --pf-red-color-800: #b01b1d;
102
115
  --pf-red-color-900: #9d181a;
103
- --pf-white-color: #ffffff;
104
116
  --pf-error-color: var(--pf-red-color-600);
105
117
  --pf-success-color: var(--pf-green-color-600);
106
118
  --pf-warning-color: var(--pf-orange-color-600);
@@ -216,6 +228,19 @@
216
228
  --pf-rounded-shaped: 24px 0;
217
229
  }
218
230
 
231
+ :root [data-theme=light],
232
+ :root {
233
+ --pf-border-color: var(--pf-gray-color-200);
234
+ --pf-border-color-light: var(--pf-gray-color-100);
235
+ --pf-horizontal-line-color: var(--pf-gray-color-200);
236
+ }
237
+
238
+ :root [data-theme=dark] {
239
+ --pf-horizontal-line-color: var(--pf-primary-color-200);
240
+ --pf-border-color: var(--pf-steel-color-600);
241
+ --pf-border-color-light: var(--pf-steel-color-400);
242
+ }
243
+
219
244
  :root {
220
245
  --pf-padding-0: 0;
221
246
  --pf-padding-1: 4px;
@@ -299,14 +324,60 @@
299
324
  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
300
325
  }
301
326
 
302
- :root,
303
327
  :root [data-theme=light],
304
- :root [data-theme=dark] {
305
- --pf-form-input-border-color: var(--pf-gray-color-700);
328
+ :root {
329
+ --pf-white-color: #ffffff;
330
+ --pf-black-color: #000000;
331
+ --pf-background-color-light: var(--pf-gray-color-100);
332
+ --pf-background-color: var(--pf-white-color);
333
+ --pf-background-color-dark: var(--pf-gray-color-300);
334
+ --pf-background-secondary-color-light: var(--secondary-color-300);
335
+ --pf-background-color-secondary: var(--pf-secondary-color-500);
336
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
337
+ --pf-font-color: var(--pf-gray-color);
338
+ --pf-font-color-emphasis: var(--pf-gray-color-800);
339
+ --pf-font-color-light: var(--pf-gray-color-400);
340
+ --pf-font-color-light-header: var(--pf-primary-color-100);
341
+ --pf-link-color: var(--pf-primary-color);
342
+ --pf-active-link-color: var(--pf-primary-color-600);
343
+ --pf-border-color: var(--pf-gray-color-200);
344
+ --pf-border-color-light: var(--pf-gray-color-100);
345
+ --pf-horizontal-line-color: var(--pf-gray-color-200);
306
346
  }
307
347
 
308
348
  :root [data-theme=dark] {
309
- --pf-form-input-border-color: var(--pf-primary-color-200);
349
+ --pf-white-color: #ffffff;
350
+ --pf-black-color: #000000;
351
+ --pf-background-color-light: var(--primary-color-300);
352
+ --pf-background-color: var(--pf-primary-color-600);
353
+ --pf-background-color-dark: var(--pf-primary-color-900);
354
+ --pf-background-secondary-color-light: var(--secondary-color-300);
355
+ --pf-background-color-secondary: var(--pf-secondary-color-500);
356
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
357
+ --pf-font-color: var(--pf-gray-color);
358
+ --pf-font-color-emphasis: var(--pf-gray-color-300);
359
+ --pf-font-color-light: var(--pf-gray-color-100);
360
+ --pf-font-color-light-header: var(--pf-primary-color-100);
361
+ --pf-link-color: var(--pf-gray-color-300);
362
+ --pf-active-link-color: var(--pf-gray-color-100);
363
+ --pf-horizontal-line-color: var(--pf-primary-color-200);
364
+ --pf-border-color: var(--pf-steel-color-600);
365
+ --pf-border-color-light: var(--pf-steel-color-400);
366
+ }
367
+
368
+ html,
369
+ body {
370
+ padding: 0;
371
+ margin: 0;
372
+ color: var(--pf-font-color);
373
+ font-size: var(--pf-font-size-base);
374
+ font-family: var(--pf-font-family-base);
375
+ font-weight: var(--pf-font-weight-regular);
376
+ }
377
+
378
+ .theme {
379
+ background-color: var(--pf-background-color);
380
+ color: var(--pf-font-color);
310
381
  }
311
382
 
312
383
  :root,
@@ -771,6 +842,10 @@
771
842
  background-color: var(--pf-button-outline-background-color);
772
843
  }
773
844
 
845
+ .btn.btn--primary.btn--text {
846
+ color: var(--pf-link-color);
847
+ }
848
+
774
849
  .icon {
775
850
  display: inline-block;
776
851
  }
@@ -958,7 +1033,7 @@
958
1033
  --pf-input-background-color: var(--pf-primary-color);
959
1034
  --pf-input-border-color: var(--pf-form-input-border-color);
960
1035
  --pf-input-text-color: var(--pf-gray-color-100);
961
- --pf-input-placeholder-text-color: var(--pf-gray-color);
1036
+ --pf-input-placeholder-text-color: var(--pf-gray-color-600);
962
1037
  --pf-input-help-text-color: var(--pf-gray-color-200);
963
1038
  --pf-input-disabled-background-color: var(--pf-primary-color-200);
964
1039
  --pf-input-disabled-border-color: var(--pf-gray-color-300);
@@ -1629,6 +1704,7 @@ form {
1629
1704
  --pf-card-background-color: var(--pf-primary-color);
1630
1705
  --pf-card-border-color: var(--pf-primary-color-200);
1631
1706
  --pf-card-text-color: var(--pf-gray-color-100);
1707
+ --pf-card-border-color: var(--pf-steel-color-600);
1632
1708
  }
1633
1709
 
1634
1710
  .card {
@@ -1692,13 +1768,13 @@ form {
1692
1768
  :root [data-theme=light],
1693
1769
  :root [data-theme=dark] {
1694
1770
  --pf-floatui-background-color: var(--pf-white-color);
1695
- --pf-floatui-border-color: var(--pf-gray-color-900);
1771
+ --pf-floatui-border-color: var(--pf-border-color-900);
1696
1772
  --pf-floatui-border-radius: var(--pf-rounded);
1697
1773
  }
1698
1774
 
1699
1775
  :root [data-theme=dark] {
1700
1776
  --pf-floatui-background-color: var(--pf-primary-color-600);
1701
- --pf-floatui-border-color: var(--pf-gray-color);
1777
+ --pf-floatui-border-color: var(--pf-border-color);
1702
1778
  }
1703
1779
 
1704
1780
  .floatui-container {
@@ -2248,6 +2324,15 @@ form {
2248
2324
  border-color: var(--pf-pill-secondary-border-color);
2249
2325
  }
2250
2326
 
2327
+ :root [data-theme=light],
2328
+ :root {
2329
+ --sheets-background-color: var(--pf-gray-color-100);
2330
+ }
2331
+
2332
+ :root [data-theme=dark] {
2333
+ --sheets-background-color: var(--pf-primary-color-400);
2334
+ }
2335
+
2251
2336
  :root {
2252
2337
  --pf-font-family-base: "Mulish", sans-serif;
2253
2338
  --pf-font-size-base: 1rem;
@@ -2276,6 +2361,18 @@ form {
2276
2361
  --pf-label-size-lg: var(--pf-font-size-h2);
2277
2362
  }
2278
2363
 
2364
+ h1,
2365
+ h2,
2366
+ h3,
2367
+ h4,
2368
+ h5,
2369
+ h6,
2370
+ p,
2371
+ ul,
2372
+ li {
2373
+ color: var(--pf-font-color);
2374
+ }
2375
+
2279
2376
  html {
2280
2377
  font-size: var(--pf-font-size-base);
2281
2378
  font-family: var(--pf-font-family-base);
@@ -3142,8 +3239,18 @@ p,
3142
3239
  background-color: var(--pf-error-color);
3143
3240
  }
3144
3241
 
3242
+ .link-color {
3243
+ color: var(--pf-link-color);
3244
+ }
3245
+
3246
+ .active-link-color {
3247
+ color: var(--pf-active-link-color);
3248
+ }
3249
+
3145
3250
  .border {
3146
3251
  border: solid 1px;
3252
+ border-color: var(--pf-border-color);
3253
+ border-radius: var(--pf-rounded);
3147
3254
  }
3148
3255
 
3149
3256
  .border-thin {
package/lib/index.d.ts CHANGED
@@ -10,6 +10,7 @@ import { DateRange } from 'react-day-picker';
10
10
  import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
11
11
  import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
12
12
  import { Props as Props$r } from 'react-select';
13
+ import { SemanticColor as SemanticColor$1 } from 'src/types';
13
14
 
14
15
  declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
15
16
 
@@ -901,7 +902,7 @@ type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'dir
901
902
  };
902
903
 
903
904
  type PillSize = 'sm' | 'md' | 'lg';
904
- type PillColor = SemanticColor | 'neutral';
905
+ type PillColor = SemanticColor$1 | 'neutral';
905
906
  interface PillProps {
906
907
  children: React$1.ReactNode | React$1.ReactNode[];
907
908
  color?: PillColor;
package/lib/index.esm.css CHANGED
@@ -28,6 +28,18 @@
28
28
  --pf-label-size-lg: var(--pf-font-size-h2);
29
29
  }
30
30
 
31
+ h1,
32
+ h2,
33
+ h3,
34
+ h4,
35
+ h5,
36
+ h6,
37
+ p,
38
+ ul,
39
+ li {
40
+ color: var(--pf-font-color);
41
+ }
42
+
31
43
  :root [data-theme=light],
32
44
  :root {
33
45
  --pf-primary-color: #6833d0;
@@ -61,6 +73,7 @@
61
73
  --pf-gray-color-700: #2c2c2c;
62
74
  --pf-gray-color-800: #1f1f1f;
63
75
  --pf-gray-color-900: #141414;
76
+ --pf-steel-color: #7c8594;
64
77
  --pf-steel-color-100: #f4f6f8;
65
78
  --pf-steel-color-200: #d9dee5;
66
79
  --pf-steel-color-300: #bcc3cd;
@@ -100,7 +113,6 @@
100
113
  --pf-red-color-700: #c21d20;
101
114
  --pf-red-color-800: #b01b1d;
102
115
  --pf-red-color-900: #9d181a;
103
- --pf-white-color: #ffffff;
104
116
  --pf-error-color: var(--pf-red-color-600);
105
117
  --pf-success-color: var(--pf-green-color-600);
106
118
  --pf-warning-color: var(--pf-orange-color-600);
@@ -216,6 +228,19 @@
216
228
  --pf-rounded-shaped: 24px 0;
217
229
  }
218
230
 
231
+ :root [data-theme=light],
232
+ :root {
233
+ --pf-border-color: var(--pf-gray-color-200);
234
+ --pf-border-color-light: var(--pf-gray-color-100);
235
+ --pf-horizontal-line-color: var(--pf-gray-color-200);
236
+ }
237
+
238
+ :root [data-theme=dark] {
239
+ --pf-horizontal-line-color: var(--pf-primary-color-200);
240
+ --pf-border-color: var(--pf-steel-color-600);
241
+ --pf-border-color-light: var(--pf-steel-color-400);
242
+ }
243
+
219
244
  :root {
220
245
  --pf-padding-0: 0;
221
246
  --pf-padding-1: 4px;
@@ -299,14 +324,60 @@
299
324
  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
300
325
  }
301
326
 
302
- :root,
303
327
  :root [data-theme=light],
304
- :root [data-theme=dark] {
305
- --pf-form-input-border-color: var(--pf-gray-color-700);
328
+ :root {
329
+ --pf-white-color: #ffffff;
330
+ --pf-black-color: #000000;
331
+ --pf-background-color-light: var(--pf-gray-color-100);
332
+ --pf-background-color: var(--pf-white-color);
333
+ --pf-background-color-dark: var(--pf-gray-color-300);
334
+ --pf-background-secondary-color-light: var(--secondary-color-300);
335
+ --pf-background-color-secondary: var(--pf-secondary-color-500);
336
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
337
+ --pf-font-color: var(--pf-gray-color);
338
+ --pf-font-color-emphasis: var(--pf-gray-color-800);
339
+ --pf-font-color-light: var(--pf-gray-color-400);
340
+ --pf-font-color-light-header: var(--pf-primary-color-100);
341
+ --pf-link-color: var(--pf-primary-color);
342
+ --pf-active-link-color: var(--pf-primary-color-600);
343
+ --pf-border-color: var(--pf-gray-color-200);
344
+ --pf-border-color-light: var(--pf-gray-color-100);
345
+ --pf-horizontal-line-color: var(--pf-gray-color-200);
306
346
  }
307
347
 
308
348
  :root [data-theme=dark] {
309
- --pf-form-input-border-color: var(--pf-primary-color-200);
349
+ --pf-white-color: #ffffff;
350
+ --pf-black-color: #000000;
351
+ --pf-background-color-light: var(--primary-color-300);
352
+ --pf-background-color: var(--pf-primary-color-600);
353
+ --pf-background-color-dark: var(--pf-primary-color-900);
354
+ --pf-background-secondary-color-light: var(--secondary-color-300);
355
+ --pf-background-color-secondary: var(--pf-secondary-color-500);
356
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
357
+ --pf-font-color: var(--pf-gray-color);
358
+ --pf-font-color-emphasis: var(--pf-gray-color-300);
359
+ --pf-font-color-light: var(--pf-gray-color-100);
360
+ --pf-font-color-light-header: var(--pf-primary-color-100);
361
+ --pf-link-color: var(--pf-gray-color-300);
362
+ --pf-active-link-color: var(--pf-gray-color-100);
363
+ --pf-horizontal-line-color: var(--pf-primary-color-200);
364
+ --pf-border-color: var(--pf-steel-color-600);
365
+ --pf-border-color-light: var(--pf-steel-color-400);
366
+ }
367
+
368
+ html,
369
+ body {
370
+ padding: 0;
371
+ margin: 0;
372
+ color: var(--pf-font-color);
373
+ font-size: var(--pf-font-size-base);
374
+ font-family: var(--pf-font-family-base);
375
+ font-weight: var(--pf-font-weight-regular);
376
+ }
377
+
378
+ .theme {
379
+ background-color: var(--pf-background-color);
380
+ color: var(--pf-font-color);
310
381
  }
311
382
 
312
383
  :root,
@@ -771,6 +842,10 @@
771
842
  background-color: var(--pf-button-outline-background-color);
772
843
  }
773
844
 
845
+ .btn.btn--primary.btn--text {
846
+ color: var(--pf-link-color);
847
+ }
848
+
774
849
  .icon {
775
850
  display: inline-block;
776
851
  }
@@ -958,7 +1033,7 @@
958
1033
  --pf-input-background-color: var(--pf-primary-color);
959
1034
  --pf-input-border-color: var(--pf-form-input-border-color);
960
1035
  --pf-input-text-color: var(--pf-gray-color-100);
961
- --pf-input-placeholder-text-color: var(--pf-gray-color);
1036
+ --pf-input-placeholder-text-color: var(--pf-gray-color-600);
962
1037
  --pf-input-help-text-color: var(--pf-gray-color-200);
963
1038
  --pf-input-disabled-background-color: var(--pf-primary-color-200);
964
1039
  --pf-input-disabled-border-color: var(--pf-gray-color-300);
@@ -1629,6 +1704,7 @@ form {
1629
1704
  --pf-card-background-color: var(--pf-primary-color);
1630
1705
  --pf-card-border-color: var(--pf-primary-color-200);
1631
1706
  --pf-card-text-color: var(--pf-gray-color-100);
1707
+ --pf-card-border-color: var(--pf-steel-color-600);
1632
1708
  }
1633
1709
 
1634
1710
  .card {
@@ -1692,13 +1768,13 @@ form {
1692
1768
  :root [data-theme=light],
1693
1769
  :root [data-theme=dark] {
1694
1770
  --pf-floatui-background-color: var(--pf-white-color);
1695
- --pf-floatui-border-color: var(--pf-gray-color-900);
1771
+ --pf-floatui-border-color: var(--pf-border-color-900);
1696
1772
  --pf-floatui-border-radius: var(--pf-rounded);
1697
1773
  }
1698
1774
 
1699
1775
  :root [data-theme=dark] {
1700
1776
  --pf-floatui-background-color: var(--pf-primary-color-600);
1701
- --pf-floatui-border-color: var(--pf-gray-color);
1777
+ --pf-floatui-border-color: var(--pf-border-color);
1702
1778
  }
1703
1779
 
1704
1780
  .floatui-container {
@@ -2248,6 +2324,15 @@ form {
2248
2324
  border-color: var(--pf-pill-secondary-border-color);
2249
2325
  }
2250
2326
 
2327
+ :root [data-theme=light],
2328
+ :root {
2329
+ --sheets-background-color: var(--pf-gray-color-100);
2330
+ }
2331
+
2332
+ :root [data-theme=dark] {
2333
+ --sheets-background-color: var(--pf-primary-color-400);
2334
+ }
2335
+
2251
2336
  :root {
2252
2337
  --pf-font-family-base: "Mulish", sans-serif;
2253
2338
  --pf-font-size-base: 1rem;
@@ -2276,6 +2361,18 @@ form {
2276
2361
  --pf-label-size-lg: var(--pf-font-size-h2);
2277
2362
  }
2278
2363
 
2364
+ h1,
2365
+ h2,
2366
+ h3,
2367
+ h4,
2368
+ h5,
2369
+ h6,
2370
+ p,
2371
+ ul,
2372
+ li {
2373
+ color: var(--pf-font-color);
2374
+ }
2375
+
2279
2376
  html {
2280
2377
  font-size: var(--pf-font-size-base);
2281
2378
  font-family: var(--pf-font-family-base);
@@ -3142,8 +3239,18 @@ p,
3142
3239
  background-color: var(--pf-error-color);
3143
3240
  }
3144
3241
 
3242
+ .link-color {
3243
+ color: var(--pf-link-color);
3244
+ }
3245
+
3246
+ .active-link-color {
3247
+ color: var(--pf-active-link-color);
3248
+ }
3249
+
3145
3250
  .border {
3146
3251
  border: solid 1px;
3252
+ border-color: var(--pf-border-color);
3253
+ border-radius: var(--pf-rounded);
3147
3254
  }
3148
3255
 
3149
3256
  .border-thin {
package/lib/index.esm.js CHANGED
@@ -2982,20 +2982,7 @@ const Typography = createGlobalStyle `
2982
2982
  font-style: normal;
2983
2983
  }
2984
2984
 
2985
- h1,
2986
- h2,
2987
- h3,
2988
- h4,
2989
- h5,
2990
- h6 {
2991
- font-family: ${typography.fontFamily.base};
2992
- font-size: ${typography.fontSize.display};
2993
- line-height: ${typography.lineHeight.heading};
2994
- margin: 0 0 10px;
2995
- color: ${allColors.lightGray};
2996
- font-weight: 400;
2997
- font-style: normal;
2998
- }
2985
+
2999
2986
 
3000
2987
  h3 {
3001
2988
  font-size: ${typography.fontSize.subheadLarge};