@indico-data/design-system 2.28.2 → 2.29.1

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 +4 -4
  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(--pf-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(--pf-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(--pf-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
@@ -3,14 +3,13 @@ export * from '@floating-ui/react-dom';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as styled_components from 'styled-components';
5
5
  import React$1, { ChangeEvent, MouseEventHandler, ReactElement } from 'react';
6
- import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor } from '@/types';
6
+ import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor as SemanticColor$1 } from '@/types';
7
7
  import { AriaButtonProps } from '@react-types/button';
8
8
  import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
9
9
  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';
14
13
 
15
14
  declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
16
15
 
@@ -872,7 +871,7 @@ interface ButtonProps {
872
871
  onClick?: (...args: any[]) => void;
873
872
  variant?: ButtonVariants;
874
873
  iconPosition?: ButtonIconPositions;
875
- color?: SemanticColor;
874
+ color?: SemanticColor$1;
876
875
  size?: ButtonSizes;
877
876
  iconName?: IconName$1;
878
877
  type?: ButtonTypes;
@@ -902,7 +901,7 @@ type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'dir
902
901
  };
903
902
 
904
903
  type PillSize = 'sm' | 'md' | 'lg';
905
- type PillColor = SemanticColor$1 | 'neutral';
904
+ type PillColor = SemanticColor | 'neutral';
906
905
  interface PillProps {
907
906
  children: React$1.ReactNode | React$1.ReactNode[];
908
907
  color?: PillColor;
@@ -916,6 +915,7 @@ type PermafrostComponent = {
916
915
  'data-cy'?: string;
917
916
  'data-testid'?: string;
918
917
  };
918
+ type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
919
919
 
920
920
  type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
921
921
  type IconProps = PermafrostComponent & {
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(--pf-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(--pf-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(--pf-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};