tharaday 0.7.2 → 0.7.4

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 (55) hide show
  1. package/.storybook/main.ts +1 -1
  2. package/.storybook/preview.ts +0 -2
  3. package/.storybook/vitest.setup.ts +2 -0
  4. package/dist/ds.css +1 -1
  5. package/dist/ds.js +883 -815
  6. package/dist/ds.umd.cjs +1 -1
  7. package/dist/src/components/Tree/Tree.d.ts +1 -1
  8. package/dist/src/components/Tree/Tree.stories.d.ts +1 -1
  9. package/dist/src/components/Tree/TreeItem.d.ts +1 -1
  10. package/dist/src/components/Tree/TreeItem.types.d.ts +6 -0
  11. package/package.json +8 -1
  12. package/src/components/Accordion/Accordion.test.tsx +82 -0
  13. package/src/components/Avatar/Avatar.test.tsx +36 -0
  14. package/src/components/Badge/Badge.test.tsx +15 -0
  15. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +96 -0
  16. package/src/components/Checkbox/Checkbox.module.css +8 -7
  17. package/src/components/Checkbox/Checkbox.test.tsx +68 -0
  18. package/src/components/Dropdown/Dropdown.test.tsx +104 -0
  19. package/src/components/Input/Input.test.tsx +61 -0
  20. package/src/components/List/List.module.css +12 -12
  21. package/src/components/List/List.test.tsx +46 -0
  22. package/src/components/Modal/Modal.module.css +5 -5
  23. package/src/components/Modal/Modal.test.tsx +86 -0
  24. package/src/components/NavBar/NavBar.module.css +3 -3
  25. package/src/components/Notification/Notification.module.css +6 -6
  26. package/src/components/Notification/Notification.test.tsx +38 -0
  27. package/src/components/Pagination/Pagination.test.tsx +70 -0
  28. package/src/components/ProgressBar/ProgressBar.test.tsx +58 -0
  29. package/src/components/RadioButton/RadioButton.test.tsx +51 -0
  30. package/src/components/Select/Select.test.tsx +64 -0
  31. package/src/components/Slider/Slider.test.tsx +49 -0
  32. package/src/components/Stepper/Step.module.css +2 -2
  33. package/src/components/Stepper/Stepper.test.tsx +51 -0
  34. package/src/components/Switch/Switch.test.tsx +53 -0
  35. package/src/components/Table/Table.test.tsx +78 -0
  36. package/src/components/Tabs/Tabs.test.tsx +83 -0
  37. package/src/components/Textarea/Textarea.test.tsx +56 -0
  38. package/src/components/Tooltip/Tooltip.module.css +6 -6
  39. package/src/components/Tree/Tree.test.tsx +116 -0
  40. package/src/components/Tree/Tree.tsx +65 -1
  41. package/src/components/Tree/TreeItem.module.css +20 -26
  42. package/src/components/Tree/TreeItem.tsx +144 -79
  43. package/src/components/Tree/TreeItem.types.ts +6 -0
  44. package/src/styles/ds.css +14 -9
  45. package/src/styles/palette.css +71 -0
  46. package/src/styles/themes/dark.css +35 -35
  47. package/src/styles/themes/light.css +35 -35
  48. package/src/styles/themes/retro-dark.css +35 -35
  49. package/src/styles/themes/retro-light.css +35 -35
  50. package/src/styles/themes/retro-palette.css +85 -0
  51. package/src/styles/themes/sanzo-152-dark.css +35 -35
  52. package/src/styles/themes/sanzo-152-light.css +35 -35
  53. package/src/styles/themes/sanzo-152-palette.css +66 -0
  54. package/src/styles/tokens.css +14 -224
  55. package/src/styles/semantic.css +0 -56
package/src/styles/themes/dark.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: dark;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: var(--neutral-950);
6
- --ds-ref-surface-1: var(--neutral-900);
7
- --ds-ref-surface-2: var(--neutral-800);
5
+ --ds-surface-0: var(--ds-p-neutral-950);
6
+ --ds-surface-1: var(--ds-p-neutral-900);
7
+ --ds-surface-2: var(--ds-p-neutral-800);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: var(--neutral-0);
11
- --ds-ref-text-2: var(--neutral-300);
12
- --ds-ref-text-on-brand: var(--neutral-950);
10
+ --ds-text-1: var(--ds-p-neutral-0);
11
+ --ds-text-2: var(--ds-p-neutral-300);
12
+ --ds-text-on-brand: var(--ds-p-neutral-950);
13
+ --ds-text-disabled: var(--ds-p-neutral-500);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: var(--neutral-800);
16
- --ds-ref-border-2: var(--neutral-900);
16
+ --ds-border-1: var(--ds-p-neutral-800);
17
+ --ds-border-2: var(--ds-p-neutral-900);
18
+ --ds-border-disabled: var(--ds-p-neutral-800);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--blue-400);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--ds-p-blue-400);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: var(--blue-500);
24
- --ds-ref-success: var(--green-500);
25
- --ds-ref-warning: var(--orange-500);
26
- --ds-ref-danger: var(--red-500);
27
- --ds-ref-neutral: var(--neutral-500);
25
+ --ds-info: var(--ds-p-blue-500);
26
+ --ds-success: var(--ds-p-green-500);
27
+ --ds-warning: var(--ds-p-orange-500);
28
+ --ds-danger: var(--ds-p-red-500);
29
+ --ds-neutral: var(--ds-p-neutral-500);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: var(--blue-400);
31
- --ds-ref-info-active: var(--blue-300);
32
- --ds-ref-info-subtle: var(--blue-950);
32
+ --ds-info-hover: var(--ds-p-blue-400);
33
+ --ds-info-active: var(--ds-p-blue-300);
34
+ --ds-info-subtle: var(--ds-p-blue-950);
33
35
 
34
- --ds-ref-success-hover: var(--green-400);
35
- --ds-ref-success-active: var(--green-300);
36
- --ds-ref-success-subtle: var(--green-950);
36
+ --ds-success-hover: var(--ds-p-green-400);
37
+ --ds-success-active: var(--ds-p-green-300);
38
+ --ds-success-subtle: var(--ds-p-green-950);
37
39
 
38
- --ds-ref-warning-hover: var(--orange-400);
39
- --ds-ref-warning-active: var(--orange-300);
40
- --ds-ref-warning-subtle: var(--orange-950);
40
+ --ds-warning-hover: var(--ds-p-orange-400);
41
+ --ds-warning-active: var(--ds-p-orange-300);
42
+ --ds-warning-subtle: var(--ds-p-orange-950);
41
43
 
42
- --ds-ref-danger-hover: var(--red-400);
43
- --ds-ref-danger-active: var(--red-300);
44
- --ds-ref-danger-subtle: var(--red-950);
44
+ --ds-danger-hover: var(--ds-p-red-400);
45
+ --ds-danger-active: var(--ds-p-red-300);
46
+ --ds-danger-subtle: var(--ds-p-red-950);
45
47
 
46
- --ds-ref-neutral-hover: var(--neutral-400);
47
- --ds-ref-neutral-active: var(--neutral-300);
48
- --ds-ref-neutral-subtle: var(--neutral-900);
48
+ --ds-neutral-hover: var(--ds-p-neutral-400);
49
+ --ds-neutral-active: var(--ds-p-neutral-300);
50
+ --ds-neutral-subtle: var(--ds-p-neutral-900);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: var(--neutral-500);
52
- --ds-ref-surface-disabled: var(--neutral-900);
53
- --ds-ref-border-disabled: var(--neutral-800);
53
+ --ds-surface-disabled: var(--ds-p-neutral-900);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: var(--neutral-800);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
56
+ --ds-skeleton: var(--ds-p-neutral-800);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.08);
58
58
  }
package/src/styles/themes/light.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: light;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: var(--neutral-0);
6
- --ds-ref-surface-1: var(--neutral-50);
7
- --ds-ref-surface-2: var(--neutral-100);
5
+ --ds-surface-0: var(--ds-p-neutral-0);
6
+ --ds-surface-1: var(--ds-p-neutral-50);
7
+ --ds-surface-2: var(--ds-p-neutral-100);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: var(--neutral-900);
11
- --ds-ref-text-2: var(--neutral-600);
12
- --ds-ref-text-on-brand: var(--neutral-0);
10
+ --ds-text-1: var(--ds-p-neutral-900);
11
+ --ds-text-2: var(--ds-p-neutral-600);
12
+ --ds-text-on-brand: var(--ds-p-neutral-0);
13
+ --ds-text-disabled: var(--ds-p-neutral-400);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: var(--neutral-200);
16
- --ds-ref-border-2: var(--neutral-100);
16
+ --ds-border-1: var(--ds-p-neutral-200);
17
+ --ds-border-2: var(--ds-p-neutral-100);
18
+ --ds-border-disabled: var(--ds-p-neutral-200);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--blue-500);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--ds-p-blue-500);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: var(--blue-500);
24
- --ds-ref-success: var(--green-600);
25
- --ds-ref-warning: var(--orange-500);
26
- --ds-ref-danger: var(--red-500);
27
- --ds-ref-neutral: var(--neutral-600);
25
+ --ds-info: var(--ds-p-blue-500);
26
+ --ds-success: var(--ds-p-green-600);
27
+ --ds-warning: var(--ds-p-orange-500);
28
+ --ds-danger: var(--ds-p-red-500);
29
+ --ds-neutral: var(--ds-p-neutral-600);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: var(--blue-600);
31
- --ds-ref-info-active: var(--blue-700);
32
- --ds-ref-info-subtle: var(--blue-50);
32
+ --ds-info-hover: var(--ds-p-blue-600);
33
+ --ds-info-active: var(--ds-p-blue-700);
34
+ --ds-info-subtle: var(--ds-p-blue-50);
33
35
 
34
- --ds-ref-success-hover: var(--green-700);
35
- --ds-ref-success-active: var(--green-800);
36
- --ds-ref-success-subtle: var(--green-50);
36
+ --ds-success-hover: var(--ds-p-green-700);
37
+ --ds-success-active: var(--ds-p-green-800);
38
+ --ds-success-subtle: var(--ds-p-green-50);
37
39
 
38
- --ds-ref-warning-hover: var(--orange-600);
39
- --ds-ref-warning-active: var(--orange-700);
40
- --ds-ref-warning-subtle: var(--orange-50);
40
+ --ds-warning-hover: var(--ds-p-orange-600);
41
+ --ds-warning-active: var(--ds-p-orange-700);
42
+ --ds-warning-subtle: var(--ds-p-orange-50);
41
43
 
42
- --ds-ref-danger-hover: var(--red-600);
43
- --ds-ref-danger-active: var(--red-700);
44
- --ds-ref-danger-subtle: var(--red-50);
44
+ --ds-danger-hover: var(--ds-p-red-600);
45
+ --ds-danger-active: var(--ds-p-red-700);
46
+ --ds-danger-subtle: var(--ds-p-red-50);
45
47
 
46
- --ds-ref-neutral-hover: var(--neutral-700);
47
- --ds-ref-neutral-active: var(--neutral-800);
48
- --ds-ref-neutral-subtle: var(--neutral-50);
48
+ --ds-neutral-hover: var(--ds-p-neutral-700);
49
+ --ds-neutral-active: var(--ds-p-neutral-800);
50
+ --ds-neutral-subtle: var(--ds-p-neutral-50);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: var(--neutral-400);
52
- --ds-ref-surface-disabled: var(--neutral-100);
53
- --ds-ref-border-disabled: var(--neutral-200);
53
+ --ds-surface-disabled: var(--ds-p-neutral-100);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: var(--neutral-200);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
56
+ --ds-skeleton: var(--ds-p-neutral-200);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.4);
58
58
  }
package/src/styles/themes/retro-dark.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: dark;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: var(--retro-brown-900);
6
- --ds-ref-surface-1: var(--retro-brown-800);
7
- --ds-ref-surface-2: var(--retro-brown-700);
5
+ --ds-surface-0: var(--retro-brown-900);
6
+ --ds-surface-1: var(--retro-brown-800);
7
+ --ds-surface-2: var(--retro-brown-700);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: var(--retro-yellow-50);
11
- --ds-ref-text-2: var(--retro-yellow-200);
12
- --ds-ref-text-on-brand: var(--retro-brown-900);
10
+ --ds-text-1: var(--retro-yellow-50);
11
+ --ds-text-2: var(--retro-yellow-200);
12
+ --ds-text-on-brand: var(--retro-brown-900);
13
+ --ds-text-disabled: var(--retro-brown-600);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: var(--retro-brown-800);
16
- --ds-ref-border-2: var(--retro-brown-700);
16
+ --ds-border-1: var(--retro-brown-800);
17
+ --ds-border-2: var(--retro-brown-700);
18
+ --ds-border-disabled: var(--retro-brown-800);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--retro-teal-400);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--retro-teal-400);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: var(--retro-teal-400);
24
- --ds-ref-success: var(--retro-green-400);
25
- --ds-ref-warning: var(--retro-orange-400);
26
- --ds-ref-danger: var(--retro-red-400);
27
- --ds-ref-neutral: var(--retro-brown-300);
25
+ --ds-info: var(--retro-teal-400);
26
+ --ds-success: var(--retro-green-400);
27
+ --ds-warning: var(--retro-orange-400);
28
+ --ds-danger: var(--retro-red-400);
29
+ --ds-neutral: var(--retro-brown-300);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: var(--retro-teal-300);
31
- --ds-ref-info-active: var(--retro-teal-200);
32
- --ds-ref-info-subtle: color-mix(in srgb, var(--retro-teal-500) 18%, var(--retro-gray-900));
32
+ --ds-info-hover: var(--retro-teal-300);
33
+ --ds-info-active: var(--retro-teal-200);
34
+ --ds-info-subtle: color-mix(in srgb, var(--retro-teal-500) 18%, var(--retro-gray-900));
33
35
 
34
- --ds-ref-success-hover: var(--retro-green-300);
35
- --ds-ref-success-active: var(--retro-green-200);
36
- --ds-ref-success-subtle: color-mix(in srgb, var(--retro-green-500) 18%, var(--retro-gray-900));
36
+ --ds-success-hover: var(--retro-green-300);
37
+ --ds-success-active: var(--retro-green-200);
38
+ --ds-success-subtle: color-mix(in srgb, var(--retro-green-500) 18%, var(--retro-gray-900));
37
39
 
38
- --ds-ref-warning-hover: var(--retro-orange-300);
39
- --ds-ref-warning-active: var(--retro-orange-200);
40
- --ds-ref-warning-subtle: color-mix(in srgb, var(--retro-orange-500) 18%, var(--retro-gray-900));
40
+ --ds-warning-hover: var(--retro-orange-300);
41
+ --ds-warning-active: var(--retro-orange-200);
42
+ --ds-warning-subtle: color-mix(in srgb, var(--retro-orange-500) 18%, var(--retro-gray-900));
41
43
 
42
- --ds-ref-danger-hover: var(--retro-red-300);
43
- --ds-ref-danger-active: var(--retro-red-200);
44
- --ds-ref-danger-subtle: color-mix(in srgb, var(--retro-red-500) 18%, var(--retro-gray-900));
44
+ --ds-danger-hover: var(--retro-red-300);
45
+ --ds-danger-active: var(--retro-red-200);
46
+ --ds-danger-subtle: color-mix(in srgb, var(--retro-red-500) 18%, var(--retro-gray-900));
45
47
 
46
- --ds-ref-neutral-hover: var(--retro-brown-200);
47
- --ds-ref-neutral-active: var(--retro-brown-100);
48
- --ds-ref-neutral-subtle: var(--retro-brown-800);
48
+ --ds-neutral-hover: var(--retro-brown-200);
49
+ --ds-neutral-active: var(--retro-brown-100);
50
+ --ds-neutral-subtle: var(--retro-brown-800);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: var(--retro-brown-600);
52
- --ds-ref-surface-disabled: var(--retro-brown-800);
53
- --ds-ref-border-disabled: var(--retro-brown-800);
53
+ --ds-surface-disabled: var(--retro-brown-800);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: var(--retro-brown-800);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
56
+ --ds-skeleton: var(--retro-brown-800);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.08);
58
58
  }
package/src/styles/themes/retro-light.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: light;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: var(--retro-yellow-50);
6
- --ds-ref-surface-1: var(--retro-yellow-100);
7
- --ds-ref-surface-2: var(--retro-yellow-200);
5
+ --ds-surface-0: var(--retro-yellow-50);
6
+ --ds-surface-1: var(--retro-yellow-100);
7
+ --ds-surface-2: var(--retro-yellow-200);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: var(--retro-brown-800);
11
- --ds-ref-text-2: var(--retro-brown-600);
12
- --ds-ref-text-on-brand: var(--retro-yellow-50);
10
+ --ds-text-1: var(--retro-brown-800);
11
+ --ds-text-2: var(--retro-brown-600);
12
+ --ds-text-on-brand: var(--retro-yellow-50);
13
+ --ds-text-disabled: var(--retro-brown-300);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: var(--retro-brown-200);
16
- --ds-ref-border-2: var(--retro-brown-100);
16
+ --ds-border-1: var(--retro-brown-200);
17
+ --ds-border-2: var(--retro-brown-100);
18
+ --ds-border-disabled: var(--retro-brown-200);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--retro-teal-500);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--retro-teal-500);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: var(--retro-teal-500);
24
- --ds-ref-success: var(--retro-green-600);
25
- --ds-ref-warning: var(--retro-orange-500);
26
- --ds-ref-danger: var(--retro-red-600);
27
- --ds-ref-neutral: var(--retro-brown-600);
25
+ --ds-info: var(--retro-teal-500);
26
+ --ds-success: var(--retro-green-600);
27
+ --ds-warning: var(--retro-orange-500);
28
+ --ds-danger: var(--retro-red-600);
29
+ --ds-neutral: var(--retro-brown-600);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: var(--retro-teal-600);
31
- --ds-ref-info-active: var(--retro-teal-700);
32
- --ds-ref-info-subtle: var(--retro-teal-100);
32
+ --ds-info-hover: var(--retro-teal-600);
33
+ --ds-info-active: var(--retro-teal-700);
34
+ --ds-info-subtle: var(--retro-teal-100);
33
35
 
34
- --ds-ref-success-hover: var(--retro-green-700);
35
- --ds-ref-success-active: var(--retro-green-800);
36
- --ds-ref-success-subtle: var(--retro-green-100);
36
+ --ds-success-hover: var(--retro-green-700);
37
+ --ds-success-active: var(--retro-green-800);
38
+ --ds-success-subtle: var(--retro-green-100);
37
39
 
38
- --ds-ref-warning-hover: var(--retro-orange-600);
39
- --ds-ref-warning-active: var(--retro-orange-700);
40
- --ds-ref-warning-subtle: var(--retro-orange-100);
40
+ --ds-warning-hover: var(--retro-orange-600);
41
+ --ds-warning-active: var(--retro-orange-700);
42
+ --ds-warning-subtle: var(--retro-orange-100);
41
43
 
42
- --ds-ref-danger-hover: var(--retro-red-700);
43
- --ds-ref-danger-active: var(--retro-red-800);
44
- --ds-ref-danger-subtle: var(--retro-red-100);
44
+ --ds-danger-hover: var(--retro-red-700);
45
+ --ds-danger-active: var(--retro-red-800);
46
+ --ds-danger-subtle: var(--retro-red-100);
45
47
 
46
- --ds-ref-neutral-hover: var(--retro-brown-700);
47
- --ds-ref-neutral-active: var(--retro-brown-800);
48
- --ds-ref-neutral-subtle: var(--retro-brown-100);
48
+ --ds-neutral-hover: var(--retro-brown-700);
49
+ --ds-neutral-active: var(--retro-brown-800);
50
+ --ds-neutral-subtle: var(--retro-brown-100);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: var(--retro-brown-300);
52
- --ds-ref-surface-disabled: var(--retro-yellow-100);
53
- --ds-ref-border-disabled: var(--retro-brown-200);
53
+ --ds-surface-disabled: var(--retro-yellow-100);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: var(--retro-yellow-100);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
56
+ --ds-skeleton: var(--retro-yellow-100);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.4);
58
58
  }
package/src/styles/themes/retro-palette.css ADDED
@@ -0,0 +1,85 @@
1
+ :root {
2
+ --retro-yellow: #faca78;
3
+ --retro-orange: #f48028;
4
+ --retro-red: #dd5544;
5
+ --retro-brown: #7f5344;
6
+ --retro-teal: #68c7c1;
7
+ --retro-green: #787c54;
8
+
9
+ --retro-gray-50: #f7f7f5;
10
+ --retro-gray-100: #e3e3dc;
11
+ --retro-gray-200: #cfcfc5;
12
+ --retro-gray-300: #b9b9ae;
13
+ --retro-gray-400: #a3a398;
14
+ --retro-gray-500: #8d8d82;
15
+ --retro-gray-600: #717168;
16
+ --retro-gray-700: #56564f;
17
+ --retro-gray-800: #3c3c37;
18
+ --retro-gray-900: #21211e;
19
+
20
+ --retro-yellow-50: color-mix(in srgb, var(--retro-yellow) 10%, #ffffff);
21
+ --retro-yellow-100: color-mix(in srgb, var(--retro-yellow) 20%, #ffffff);
22
+ --retro-yellow-200: color-mix(in srgb, var(--retro-yellow) 35%, #ffffff);
23
+ --retro-yellow-300: color-mix(in srgb, var(--retro-yellow) 55%, #ffffff);
24
+ --retro-yellow-400: color-mix(in srgb, var(--retro-yellow) 75%, #ffffff);
25
+ --retro-yellow-500: var(--retro-yellow);
26
+ --retro-yellow-600: color-mix(in srgb, var(--retro-yellow) 85%, #000000);
27
+ --retro-yellow-700: color-mix(in srgb, var(--retro-yellow) 70%, #000000);
28
+ --retro-yellow-800: color-mix(in srgb, var(--retro-yellow) 55%, #000000);
29
+ --retro-yellow-900: color-mix(in srgb, var(--retro-yellow) 40%, #000000);
30
+
31
+ --retro-orange-50: color-mix(in srgb, var(--retro-orange) 10%, #ffffff);
32
+ --retro-orange-100: color-mix(in srgb, var(--retro-orange) 20%, #ffffff);
33
+ --retro-orange-200: color-mix(in srgb, var(--retro-orange) 35%, #ffffff);
34
+ --retro-orange-300: color-mix(in srgb, var(--retro-orange) 55%, #ffffff);
35
+ --retro-orange-400: color-mix(in srgb, var(--retro-orange) 75%, #ffffff);
36
+ --retro-orange-500: var(--retro-orange);
37
+ --retro-orange-600: color-mix(in srgb, var(--retro-orange) 85%, #000000);
38
+ --retro-orange-700: color-mix(in srgb, var(--retro-orange) 70%, #000000);
39
+ --retro-orange-800: color-mix(in srgb, var(--retro-orange) 55%, #000000);
40
+ --retro-orange-900: color-mix(in srgb, var(--retro-orange) 40%, #000000);
41
+
42
+ --retro-brown-50: color-mix(in srgb, var(--retro-brown) 10%, #ffffff);
43
+ --retro-brown-100: color-mix(in srgb, var(--retro-brown) 20%, #ffffff);
44
+ --retro-brown-200: color-mix(in srgb, var(--retro-brown) 35%, #ffffff);
45
+ --retro-brown-300: color-mix(in srgb, var(--retro-brown) 55%, #ffffff);
46
+ --retro-brown-400: color-mix(in srgb, var(--retro-brown) 75%, #ffffff);
47
+ --retro-brown-500: var(--retro-brown);
48
+ --retro-brown-600: color-mix(in srgb, var(--retro-brown) 85%, #000000);
49
+ --retro-brown-700: color-mix(in srgb, var(--retro-brown) 70%, #000000);
50
+ --retro-brown-800: color-mix(in srgb, var(--retro-brown) 55%, #000000);
51
+ --retro-brown-900: color-mix(in srgb, var(--retro-brown) 40%, #000000);
52
+
53
+ --retro-teal-50: color-mix(in srgb, var(--retro-teal) 10%, #ffffff);
54
+ --retro-teal-100: color-mix(in srgb, var(--retro-teal) 20%, #ffffff);
55
+ --retro-teal-200: color-mix(in srgb, var(--retro-teal) 35%, #ffffff);
56
+ --retro-teal-300: color-mix(in srgb, var(--retro-teal) 55%, #ffffff);
57
+ --retro-teal-400: color-mix(in srgb, var(--retro-teal) 75%, #ffffff);
58
+ --retro-teal-500: var(--retro-teal);
59
+ --retro-teal-600: color-mix(in srgb, var(--retro-teal) 85%, #000000);
60
+ --retro-teal-700: color-mix(in srgb, var(--retro-teal) 70%, #000000);
61
+ --retro-teal-800: color-mix(in srgb, var(--retro-teal) 55%, #000000);
62
+ --retro-teal-900: color-mix(in srgb, var(--retro-teal) 40%, #000000);
63
+
64
+ --retro-green-50: color-mix(in srgb, var(--retro-green) 10%, #ffffff);
65
+ --retro-green-100: color-mix(in srgb, var(--retro-green) 20%, #ffffff);
66
+ --retro-green-200: color-mix(in srgb, var(--retro-green) 35%, #ffffff);
67
+ --retro-green-300: color-mix(in srgb, var(--retro-green) 55%, #ffffff);
68
+ --retro-green-400: color-mix(in srgb, var(--retro-green) 75%, #ffffff);
69
+ --retro-green-500: var(--retro-green);
70
+ --retro-green-600: color-mix(in srgb, var(--retro-green) 85%, #000000);
71
+ --retro-green-700: color-mix(in srgb, var(--retro-green) 70%, #000000);
72
+ --retro-green-800: color-mix(in srgb, var(--retro-green) 55%, #000000);
73
+ --retro-green-900: color-mix(in srgb, var(--retro-green) 40%, #000000);
74
+
75
+ --retro-red-50: color-mix(in srgb, var(--retro-red) 10%, #ffffff);
76
+ --retro-red-100: color-mix(in srgb, var(--retro-red) 20%, #ffffff);
77
+ --retro-red-200: color-mix(in srgb, var(--retro-red) 35%, #ffffff);
78
+ --retro-red-300: color-mix(in srgb, var(--retro-red) 55%, #ffffff);
79
+ --retro-red-400: color-mix(in srgb, var(--retro-red) 75%, #ffffff);
80
+ --retro-red-500: var(--retro-red);
81
+ --retro-red-600: color-mix(in srgb, var(--retro-red) 85%, #000000);
82
+ --retro-red-700: color-mix(in srgb, var(--retro-red) 70%, #000000);
83
+ --retro-red-800: color-mix(in srgb, var(--retro-red) 55%, #000000);
84
+ --retro-red-900: color-mix(in srgb, var(--retro-red) 40%, #000000);
85
+ }
package/src/styles/themes/sanzo-152-dark.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: dark;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: #0f1a16;
6
- --ds-ref-surface-1: color-mix(in srgb, var(--sanzo-teal) 65%, #000000);
7
- --ds-ref-surface-2: color-mix(in srgb, var(--sanzo-teal) 50%, #000000);
5
+ --ds-surface-0: #0f1a16;
6
+ --ds-surface-1: color-mix(in srgb, var(--sanzo-teal) 65%, #000000);
7
+ --ds-surface-2: color-mix(in srgb, var(--sanzo-teal) 50%, #000000);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: #f6efe6;
11
- --ds-ref-text-2: color-mix(in srgb, #f6efe6 70%, var(--sanzo-sand));
12
- --ds-ref-text-on-brand: #0f1a16;
10
+ --ds-text-1: #f6efe6;
11
+ --ds-text-2: color-mix(in srgb, #f6efe6 70%, var(--sanzo-sand));
12
+ --ds-text-on-brand: #0f1a16;
13
+ --ds-text-disabled: color-mix(in srgb, var(--sanzo-sand) 40%, #000000);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: color-mix(in srgb, var(--sanzo-blue-dark-500) 45%, #000000);
16
- --ds-ref-border-2: color-mix(in srgb, var(--sanzo-teal) 45%, #000000);
16
+ --ds-border-1: color-mix(in srgb, var(--sanzo-blue-dark-500) 45%, #000000);
17
+ --ds-border-2: color-mix(in srgb, var(--sanzo-teal) 45%, #000000);
18
+ --ds-border-disabled: color-mix(in srgb, var(--sanzo-teal) 35%, #000000);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--sanzo-ochre);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--sanzo-ochre);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: color-mix(in srgb, var(--sanzo-blue-dark-500) 70%, #ffffff);
24
- --ds-ref-success: color-mix(in srgb, var(--sanzo-teal) 80%, #ffffff);
25
- --ds-ref-warning: var(--sanzo-ochre);
26
- --ds-ref-danger: var(--sanzo-rose-400);
27
- --ds-ref-neutral: var(--sanzo-sand-300);
25
+ --ds-info: color-mix(in srgb, var(--sanzo-blue-dark-500) 70%, #ffffff);
26
+ --ds-success: color-mix(in srgb, var(--sanzo-teal) 80%, #ffffff);
27
+ --ds-warning: var(--sanzo-ochre);
28
+ --ds-danger: var(--sanzo-rose-400);
29
+ --ds-neutral: var(--sanzo-sand-300);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: color-mix(in srgb, var(--sanzo-blue-dark-500) 80%, #ffffff);
31
- --ds-ref-info-active: color-mix(in srgb, var(--sanzo-blue-dark-500) 65%, #ffffff);
32
- --ds-ref-info-subtle: color-mix(in srgb, var(--sanzo-blue-dark-500) 22%, #000000);
32
+ --ds-info-hover: color-mix(in srgb, var(--sanzo-blue-dark-500) 80%, #ffffff);
33
+ --ds-info-active: color-mix(in srgb, var(--sanzo-blue-dark-500) 65%, #ffffff);
34
+ --ds-info-subtle: color-mix(in srgb, var(--sanzo-blue-dark-500) 22%, #000000);
33
35
 
34
- --ds-ref-success-hover: color-mix(in srgb, var(--sanzo-teal) 70%, #ffffff);
35
- --ds-ref-success-active: color-mix(in srgb, var(--sanzo-teal) 60%, #ffffff);
36
- --ds-ref-success-subtle: color-mix(in srgb, var(--sanzo-teal) 18%, #000000);
36
+ --ds-success-hover: color-mix(in srgb, var(--sanzo-teal) 70%, #ffffff);
37
+ --ds-success-active: color-mix(in srgb, var(--sanzo-teal) 60%, #ffffff);
38
+ --ds-success-subtle: color-mix(in srgb, var(--sanzo-teal) 18%, #000000);
37
39
 
38
- --ds-ref-warning-hover: color-mix(in srgb, var(--sanzo-ochre) 85%, #ffffff);
39
- --ds-ref-warning-active: color-mix(in srgb, var(--sanzo-ochre) 70%, #ffffff);
40
- --ds-ref-warning-subtle: color-mix(in srgb, var(--sanzo-ochre) 20%, #000000);
40
+ --ds-warning-hover: color-mix(in srgb, var(--sanzo-ochre) 85%, #ffffff);
41
+ --ds-warning-active: color-mix(in srgb, var(--sanzo-ochre) 70%, #ffffff);
42
+ --ds-warning-subtle: color-mix(in srgb, var(--sanzo-ochre) 20%, #000000);
41
43
 
42
- --ds-ref-danger-hover: var(--sanzo-rose-300);
43
- --ds-ref-danger-active: var(--sanzo-rose-200);
44
- --ds-ref-danger-subtle: var(--sanzo-rose-900);
44
+ --ds-danger-hover: var(--sanzo-rose-300);
45
+ --ds-danger-active: var(--sanzo-rose-200);
46
+ --ds-danger-subtle: var(--sanzo-rose-900);
45
47
 
46
- --ds-ref-neutral-hover: var(--sanzo-sand-200);
47
- --ds-ref-neutral-active: var(--sanzo-sand-100);
48
- --ds-ref-neutral-subtle: var(--sanzo-sand-900);
48
+ --ds-neutral-hover: var(--sanzo-sand-200);
49
+ --ds-neutral-active: var(--sanzo-sand-100);
50
+ --ds-neutral-subtle: var(--sanzo-sand-900);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: color-mix(in srgb, var(--sanzo-sand) 40%, #000000);
52
- --ds-ref-surface-disabled: color-mix(in srgb, var(--sanzo-teal) 30%, #000000);
53
- --ds-ref-border-disabled: color-mix(in srgb, var(--sanzo-teal) 35%, #000000);
53
+ --ds-surface-disabled: color-mix(in srgb, var(--sanzo-teal) 30%, #000000);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: color-mix(in srgb, var(--sanzo-teal) 35%, #000000);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
56
+ --ds-skeleton: color-mix(in srgb, var(--sanzo-teal) 35%, #000000);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.08);
58
58
  }
package/src/styles/themes/sanzo-152-light.css CHANGED
@@ -2,57 +2,57 @@
2
2
  color-scheme: light;
3
3
 
4
4
  /* Surfaces */
5
- --ds-ref-surface-0: #f6efe6;
6
- --ds-ref-surface-1: color-mix(in srgb, var(--sanzo-sand) 25%, #ffffff);
7
- --ds-ref-surface-2: color-mix(in srgb, var(--sanzo-sand) 55%, #ffffff);
5
+ --ds-surface-0: #f6efe6;
6
+ --ds-surface-1: color-mix(in srgb, var(--sanzo-sand) 25%, #ffffff);
7
+ --ds-surface-2: color-mix(in srgb, var(--sanzo-sand) 55%, #ffffff);
8
8
 
9
9
  /* Text */
10
- --ds-ref-text-1: var(--sanzo-teal);
11
- --ds-ref-text-2: color-mix(in srgb, var(--sanzo-teal) 65%, #ffffff);
12
- --ds-ref-text-on-brand: #f6efe6;
10
+ --ds-text-1: var(--sanzo-teal);
11
+ --ds-text-2: color-mix(in srgb, var(--sanzo-teal) 65%, #ffffff);
12
+ --ds-text-on-brand: #f6efe6;
13
+ --ds-text-disabled: var(--sanzo-teal-200);
13
14
 
14
15
  /* Borders */
15
- --ds-ref-border-1: color-mix(in srgb, var(--sanzo-teal) 15%, #ffffff);
16
- --ds-ref-border-2: color-mix(in srgb, var(--sanzo-teal) 8%, #ffffff);
16
+ --ds-border-1: color-mix(in srgb, var(--sanzo-teal) 15%, #ffffff);
17
+ --ds-border-2: color-mix(in srgb, var(--sanzo-teal) 8%, #ffffff);
18
+ --ds-border-disabled: var(--sanzo-teal-100);
17
19
 
18
20
  /* Focus */
19
- --ds-ref-ring: var(--sanzo-blue-dark-500);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+ --ds-ring: var(--sanzo-blue-dark-500);
22
+ --ds-ring-offset: var(--ds-surface-0);
21
23
 
22
24
  /* Intents (base) */
23
- --ds-ref-info: var(--sanzo-blue-dark-400);
24
- --ds-ref-success: var(--sanzo-teal-500);
25
- --ds-ref-warning: var(--sanzo-ochre-500);
26
- --ds-ref-danger: var(--sanzo-rose-500);
27
- --ds-ref-neutral: var(--sanzo-sand-600);
25
+ --ds-info: var(--sanzo-blue-dark-400);
26
+ --ds-success: var(--sanzo-teal-500);
27
+ --ds-warning: var(--sanzo-ochre-500);
28
+ --ds-danger: var(--sanzo-rose-500);
29
+ --ds-neutral: var(--sanzo-sand-600);
28
30
 
29
31
  /* Intents (states) */
30
- --ds-ref-info-hover: var(--sanzo-blue-dark-600);
31
- --ds-ref-info-active: var(--sanzo-blue-dark-700);
32
- --ds-ref-info-subtle: var(--sanzo-blue-dark-100);
32
+ --ds-info-hover: var(--sanzo-blue-dark-600);
33
+ --ds-info-active: var(--sanzo-blue-dark-700);
34
+ --ds-info-subtle: var(--sanzo-blue-dark-100);
33
35
 
34
- --ds-ref-success-hover: var(--sanzo-teal-900);
35
- --ds-ref-success-active: var(--sanzo-teal-900);
36
- --ds-ref-success-subtle: var(--sanzo-teal-100);
36
+ --ds-success-hover: var(--sanzo-teal-900);
37
+ --ds-success-active: var(--sanzo-teal-900);
38
+ --ds-success-subtle: var(--sanzo-teal-100);
37
39
 
38
- --ds-ref-warning-hover: var(--sanzo-ochre-700);
39
- --ds-ref-warning-active: var(--sanzo-ochre-800);
40
- --ds-ref-warning-subtle: var(--sanzo-ochre-100);
40
+ --ds-warning-hover: var(--sanzo-ochre-700);
41
+ --ds-warning-active: var(--sanzo-ochre-800);
42
+ --ds-warning-subtle: var(--sanzo-ochre-100);
41
43
 
42
- --ds-ref-danger-hover: var(--sanzo-rose-700);
43
- --ds-ref-danger-active: var(--sanzo-rose-800);
44
- --ds-ref-danger-subtle: var(--sanzo-rose-100);
44
+ --ds-danger-hover: var(--sanzo-rose-700);
45
+ --ds-danger-active: var(--sanzo-rose-800);
46
+ --ds-danger-subtle: var(--sanzo-rose-100);
45
47
 
46
- --ds-ref-neutral-hover: var(--sanzo-sand-800);
47
- --ds-ref-neutral-active: var(--sanzo-sand-900);
48
- --ds-ref-neutral-subtle: var(--sanzo-sand-100);
48
+ --ds-neutral-hover: var(--sanzo-sand-800);
49
+ --ds-neutral-active: var(--sanzo-sand-900);
50
+ --ds-neutral-subtle: var(--sanzo-sand-100);
49
51
 
50
52
  /* Disabled */
51
- --ds-ref-text-disabled: var(--sanzo-teal-200);
52
- --ds-ref-surface-disabled: color-mix(in srgb, var(--sanzo-sand) 45%, #ffffff);
53
- --ds-ref-border-disabled: var(--sanzo-teal-100);
53
+ --ds-surface-disabled: color-mix(in srgb, var(--sanzo-sand) 45%, #ffffff);
54
54
 
55
55
  /* Skeleton */
56
- --ds-ref-skeleton: color-mix(in srgb, var(--sanzo-sand) 45%, #ffffff);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.45);
56
+ --ds-skeleton: color-mix(in srgb, var(--sanzo-sand) 45%, #ffffff);
57
+ --ds-skeleton-highlight: rgba(255, 255, 255, 0.45);
58
58
  }