tharaday 0.7.3 → 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 (18) hide show
  1. package/dist/ds.css +1 -1
  2. package/dist/ds.js +20 -20
  3. package/dist/ds.umd.cjs +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Checkbox/Checkbox.module.css +1 -0
  6. package/src/components/Tooltip/Tooltip.module.css +6 -6
  7. package/src/styles/ds.css +14 -9
  8. package/src/styles/palette.css +71 -0
  9. package/src/styles/themes/dark.css +35 -35
  10. package/src/styles/themes/light.css +35 -35
  11. package/src/styles/themes/retro-dark.css +35 -35
  12. package/src/styles/themes/retro-light.css +35 -35
  13. package/src/styles/themes/retro-palette.css +85 -0
  14. package/src/styles/themes/sanzo-152-dark.css +35 -35
  15. package/src/styles/themes/sanzo-152-light.css +35 -35
  16. package/src/styles/themes/sanzo-152-palette.css +66 -0
  17. package/src/styles/tokens.css +7 -232
  18. package/src/styles/semantic.css +0 -59
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
  }
package/src/styles/themes/sanzo-152-palette.css ADDED
@@ -0,0 +1,66 @@
1
+ :root {
2
+ --sanzo-rose: #a0585e;
3
+ --sanzo-mauve: #ab6469;
4
+ --sanzo-sand: #baa28f;
5
+ --sanzo-blue-pale: #889caa;
6
+ --sanzo-blue-dark: #1f3f66;
7
+ --sanzo-blue-grayish: #4c5f6e;
8
+ --sanzo-ochre: #a97b01;
9
+ --sanzo-teal: #2f4a3a;
10
+ --sanzo-brown: #351d0b;
11
+
12
+ --sanzo-rose-50: color-mix(in srgb, var(--sanzo-rose) 30%, #ffffff);
13
+ --sanzo-rose-100: color-mix(in srgb, var(--sanzo-rose) 45%, #ffffff);
14
+ --sanzo-rose-200: color-mix(in srgb, var(--sanzo-rose) 60%, #ffffff);
15
+ --sanzo-rose-300: color-mix(in srgb, var(--sanzo-rose) 70%, #ffffff);
16
+ --sanzo-rose-400: color-mix(in srgb, var(--sanzo-rose) 85%, #ffffff);
17
+ --sanzo-rose-500: var(--sanzo-rose);
18
+ --sanzo-rose-600: color-mix(in srgb, var(--sanzo-rose) 80%, #000000);
19
+ --sanzo-rose-700: color-mix(in srgb, var(--sanzo-rose) 65%, #000000);
20
+ --sanzo-rose-800: color-mix(in srgb, var(--sanzo-rose) 50%, #000000);
21
+ --sanzo-rose-900: color-mix(in srgb, var(--sanzo-rose) 35%, #000000);
22
+
23
+ --sanzo-sand-50: color-mix(in srgb, var(--sanzo-sand) 30%, #ffffff);
24
+ --sanzo-sand-100: color-mix(in srgb, var(--sanzo-sand) 40%, #ffffff);
25
+ --sanzo-sand-200: color-mix(in srgb, var(--sanzo-sand) 50%, #ffffff);
26
+ --sanzo-sand-300: color-mix(in srgb, var(--sanzo-sand) 65%, #ffffff);
27
+ --sanzo-sand-400: color-mix(in srgb, var(--sanzo-sand) 80%, #ffffff);
28
+ --sanzo-sand-500: var(--sanzo-sand);
29
+ --sanzo-sand-600: color-mix(in srgb, var(--sanzo-sand) 75%, #000000);
30
+ --sanzo-sand-700: color-mix(in srgb, var(--sanzo-sand) 65%, #000000);
31
+ --sanzo-sand-800: color-mix(in srgb, var(--sanzo-sand) 50%, #000000);
32
+ --sanzo-sand-900: color-mix(in srgb, var(--sanzo-sand) 30%, #000000);
33
+
34
+ --sanzo-ochre-50: color-mix(in srgb, var(--sanzo-ochre) 30%, #ffffff);
35
+ --sanzo-ochre-100: color-mix(in srgb, var(--sanzo-ochre) 50%, #ffffff);
36
+ --sanzo-ochre-200: color-mix(in srgb, var(--sanzo-ochre) 60%, #ffffff);
37
+ --sanzo-ochre-300: color-mix(in srgb, var(--sanzo-ochre) 70%, #ffffff);
38
+ --sanzo-ochre-400: color-mix(in srgb, var(--sanzo-ochre) 80%, #ffffff);
39
+ --sanzo-ochre-500: var(--sanzo-ochre);
40
+ --sanzo-ochre-600: color-mix(in srgb, var(--sanzo-ochre) 75%, #000000);
41
+ --sanzo-ochre-700: color-mix(in srgb, var(--sanzo-ochre) 55%, #000000);
42
+ --sanzo-ochre-800: color-mix(in srgb, var(--sanzo-ochre) 40%, #000000);
43
+ --sanzo-ochre-900: color-mix(in srgb, var(--sanzo-ochre) 25%, #000000);
44
+
45
+ --sanzo-blue-dark-50: color-mix(in srgb, var(--sanzo-blue-dark) 50%, #ffffff);
46
+ --sanzo-blue-dark-100: color-mix(in srgb, var(--sanzo-blue-dark) 60%, #ffffff);
47
+ --sanzo-blue-dark-200: color-mix(in srgb, var(--sanzo-blue-dark) 70%, #ffffff);
48
+ --sanzo-blue-dark-300: color-mix(in srgb, var(--sanzo-blue-dark) 80%, #ffffff);
49
+ --sanzo-blue-dark-400: color-mix(in srgb, var(--sanzo-blue-dark) 90%, #ffffff);
50
+ --sanzo-blue-dark-500: var(--sanzo-blue-dark);
51
+ --sanzo-blue-dark-600: color-mix(in srgb, var(--sanzo-blue-dark) 88%, #000000);
52
+ --sanzo-blue-dark-700: color-mix(in srgb, var(--sanzo-blue-dark) 76%, #000000);
53
+ --sanzo-blue-dark-800: color-mix(in srgb, var(--sanzo-blue-dark) 64%, #000000);
54
+ --sanzo-blue-dark-900: color-mix(in srgb, var(--sanzo-blue-dark) 52%, #000000);
55
+
56
+ --sanzo-teal-50: color-mix(in srgb, var(--sanzo-teal) 25%, #ffffff);
57
+ --sanzo-teal-100: color-mix(in srgb, var(--sanzo-teal) 40%, #ffffff);
58
+ --sanzo-teal-200: color-mix(in srgb, var(--sanzo-teal) 55%, #ffffff);
59
+ --sanzo-teal-300: color-mix(in srgb, var(--sanzo-teal) 70%, #ffffff);
60
+ --sanzo-teal-400: color-mix(in srgb, var(--sanzo-teal) 85%, #ffffff);
61
+ --sanzo-teal-500: var(--sanzo-teal);
62
+ --sanzo-teal-600: color-mix(in srgb, var(--sanzo-teal) 85%, #000000);
63
+ --sanzo-teal-700: color-mix(in srgb, var(--sanzo-teal) 70%, #000000);
64
+ --sanzo-teal-800: color-mix(in srgb, var(--sanzo-teal) 55%, #000000);
65
+ --sanzo-teal-900: color-mix(in srgb, var(--sanzo-teal) 40%, #000000);
66
+ }