@indico-data/design-system 2.29.0 → 2.29.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 (8) hide show
  1. package/lib/index.css +11 -27
  2. package/lib/index.d.ts +4 -4
  3. package/lib/index.esm.css +11 -27
  4. package/lib/src/components/pill/types.d.ts +1 -1
  5. package/package.json +1 -1
  6. package/src/components/pill/types.ts +1 -1
  7. package/src/styles/globals.scss +12 -3
  8. package/src/styles/variables/_typography.scss +0 -12
package/lib/index.css CHANGED
@@ -28,18 +28,6 @@
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
-
43
31
  :root [data-theme=light],
44
32
  :root {
45
33
  --pf-primary-color: #6833d0;
@@ -331,7 +319,7 @@ li {
331
319
  --pf-background-color-light: var(--pf-gray-color-100);
332
320
  --pf-background-color: var(--pf-white-color);
333
321
  --pf-background-color-dark: var(--pf-gray-color-300);
334
- --pf-background-secondary-color-light: var(--secondary-color-300);
322
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
335
323
  --pf-background-color-secondary: var(--pf-secondary-color-500);
336
324
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
337
325
  --pf-font-color: var(--pf-gray-color);
@@ -348,10 +336,10 @@ li {
348
336
  :root [data-theme=dark] {
349
337
  --pf-white-color: #ffffff;
350
338
  --pf-black-color: #000000;
351
- --pf-background-color-light: var(--primary-color-300);
339
+ --pf-background-color-light: var(--pf-primary-color-300);
352
340
  --pf-background-color: var(--pf-primary-color-600);
353
341
  --pf-background-color-dark: var(--pf-primary-color-900);
354
- --pf-background-secondary-color-light: var(--secondary-color-300);
342
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
355
343
  --pf-background-color-secondary: var(--pf-secondary-color-500);
356
344
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
357
345
  --pf-font-color: var(--pf-gray-color);
@@ -375,6 +363,14 @@ body {
375
363
  font-weight: var(--pf-font-weight-regular);
376
364
  }
377
365
 
366
+ a, .link {
367
+ color: var(--pf-link-color);
368
+ transition: color 0.3s ease-in-out;
369
+ }
370
+ a:hover, .link:hover {
371
+ color: var(--pf-active-link-color);
372
+ }
373
+
378
374
  .theme {
379
375
  background-color: var(--pf-background-color);
380
376
  color: var(--pf-font-color);
@@ -2361,18 +2357,6 @@ form {
2361
2357
  --pf-label-size-lg: var(--pf-font-size-h2);
2362
2358
  }
2363
2359
 
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
-
2376
2360
  html {
2377
2361
  font-size: var(--pf-font-size-base);
2378
2362
  font-family: var(--pf-font-family-base);
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,18 +28,6 @@
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
-
43
31
  :root [data-theme=light],
44
32
  :root {
45
33
  --pf-primary-color: #6833d0;
@@ -331,7 +319,7 @@ li {
331
319
  --pf-background-color-light: var(--pf-gray-color-100);
332
320
  --pf-background-color: var(--pf-white-color);
333
321
  --pf-background-color-dark: var(--pf-gray-color-300);
334
- --pf-background-secondary-color-light: var(--secondary-color-300);
322
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
335
323
  --pf-background-color-secondary: var(--pf-secondary-color-500);
336
324
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
337
325
  --pf-font-color: var(--pf-gray-color);
@@ -348,10 +336,10 @@ li {
348
336
  :root [data-theme=dark] {
349
337
  --pf-white-color: #ffffff;
350
338
  --pf-black-color: #000000;
351
- --pf-background-color-light: var(--primary-color-300);
339
+ --pf-background-color-light: var(--pf-primary-color-300);
352
340
  --pf-background-color: var(--pf-primary-color-600);
353
341
  --pf-background-color-dark: var(--pf-primary-color-900);
354
- --pf-background-secondary-color-light: var(--secondary-color-300);
342
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
355
343
  --pf-background-color-secondary: var(--pf-secondary-color-500);
356
344
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
357
345
  --pf-font-color: var(--pf-gray-color);
@@ -375,6 +363,14 @@ body {
375
363
  font-weight: var(--pf-font-weight-regular);
376
364
  }
377
365
 
366
+ a, .link {
367
+ color: var(--pf-link-color);
368
+ transition: color 0.3s ease-in-out;
369
+ }
370
+ a:hover, .link:hover {
371
+ color: var(--pf-active-link-color);
372
+ }
373
+
378
374
  .theme {
379
375
  background-color: var(--pf-background-color);
380
376
  color: var(--pf-font-color);
@@ -2361,18 +2357,6 @@ form {
2361
2357
  --pf-label-size-lg: var(--pf-font-size-h2);
2362
2358
  }
2363
2359
 
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
-
2376
2360
  html {
2377
2361
  font-size: var(--pf-font-size-base);
2378
2362
  font-family: var(--pf-font-family-base);
package/lib/src/components/pill/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SemanticColor } from 'src/types';
1
+ import { SemanticColor } from '../../types';
2
2
  import React from 'react';
3
3
  export type PillSize = 'sm' | 'md' | 'lg';
4
4
  export type PillColor = SemanticColor | 'neutral';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.29.0",
3
+ "version": "2.29.2",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/pill/types.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SemanticColor } from 'src/types';
1
+ import { SemanticColor } from '../../types';
2
2
  import React from 'react';
3
3
 
4
4
  export type PillSize = 'sm' | 'md' | 'lg';
package/src/styles/globals.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-background-color-light: var(--pf-gray-color-100);
8
8
  --pf-background-color: var(--pf-white-color);
9
9
  --pf-background-color-dark: var(--pf-gray-color-300);
10
- --pf-background-secondary-color-light: var(--secondary-color-300);
10
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
11
11
  --pf-background-color-secondary: var(--pf-secondary-color-500);
12
12
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
13
13
 
@@ -35,10 +35,10 @@
35
35
  // ***********************************************************************************************************************************
36
36
  --pf-white-color: #ffffff;
37
37
  --pf-black-color: #000000;
38
- --pf-background-color-light: var(--primary-color-300);
38
+ --pf-background-color-light: var(--pf-primary-color-300);
39
39
  --pf-background-color: var(--pf-primary-color-600);
40
40
  --pf-background-color-dark: var(--pf-primary-color-900);
41
- --pf-background-secondary-color-light: var(--secondary-color-300);
41
+ --pf-background-secondary-color-light: var(--pf-secondary-color-300);
42
42
  --pf-background-color-secondary: var(--pf-secondary-color-500);
43
43
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
44
44
 
@@ -73,6 +73,15 @@ body {
73
73
  font-weight: var(--pf-font-weight-regular);
74
74
  }
75
75
 
76
+ a, .link {
77
+ color: var(--pf-link-color);
78
+ transition: color 0.3s ease-in-out;
79
+
80
+ &:hover {
81
+ color: var(--pf-active-link-color);
82
+ }
83
+ }
84
+
76
85
  .theme {
77
86
  background-color: var(--pf-background-color);
78
87
  color: var(--pf-font-color);
package/src/styles/variables/_typography.scss CHANGED
@@ -33,15 +33,3 @@
33
33
  --pf-label-size-md: var(--pf-font-size-body);
34
34
  --pf-label-size-lg: var(--pf-font-size-h2);
35
35
  }
36
-
37
- h1,
38
- h2,
39
- h3,
40
- h4,
41
- h5,
42
- h6,
43
- p,
44
- ul,
45
- li {
46
- color: var(--pf-font-color);
47
- }