tharaday 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.storybook/preview.ts +11 -2
  2. package/dist/components/Box/Box.types.d.ts +3 -3
  3. package/dist/ds.css +1 -1
  4. package/dist/ds.js +1374 -1344
  5. package/dist/ds.umd.cjs +1 -1
  6. package/package.json +16 -16
  7. package/src/components/Box/Box.module.css +98 -0
  8. package/src/components/Box/Box.stories.tsx +2 -2
  9. package/src/components/Box/Box.types.ts +3 -3
  10. package/src/styles/ds.css +4 -1
  11. package/src/styles/themes/retro-dark.css +58 -0
  12. package/src/styles/themes/retro-light.css +58 -0
  13. package/src/styles/themes/sanzo-152-dark.css +58 -0
  14. package/src/styles/themes/sanzo-152-light.css +58 -0
  15. package/src/styles/tokens.css +140 -8
  16. package/src/styles/themes/retro.css +0 -58
package/src/styles/themes/retro-dark.css ADDED
@@ -0,0 +1,58 @@
1
+ [data-theme='retro-dark'] {
2
+ color-scheme: dark;
3
+
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);
8
+
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);
13
+
14
+ /* Borders */
15
+ --ds-ref-border-1: var(--retro-brown-800);
16
+ --ds-ref-border-2: var(--retro-brown-700);
17
+
18
+ /* Focus */
19
+ --ds-ref-ring: var(--retro-teal-400);
20
+ --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+
22
+ /* 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);
28
+
29
+ /* 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));
33
+
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));
37
+
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));
41
+
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));
45
+
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);
49
+
50
+ /* 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);
54
+
55
+ /* Skeleton */
56
+ --ds-ref-skeleton: var(--retro-brown-800);
57
+ --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
58
+ }
package/src/styles/themes/retro-light.css ADDED
@@ -0,0 +1,58 @@
1
+ [data-theme='retro-light'] {
2
+ color-scheme: light;
3
+
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);
8
+
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);
13
+
14
+ /* Borders */
15
+ --ds-ref-border-1: var(--retro-brown-200);
16
+ --ds-ref-border-2: var(--retro-brown-100);
17
+
18
+ /* Focus */
19
+ --ds-ref-ring: var(--retro-teal-500);
20
+ --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+
22
+ /* 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);
28
+
29
+ /* 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);
33
+
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);
37
+
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);
41
+
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);
45
+
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);
49
+
50
+ /* 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);
54
+
55
+ /* Skeleton */
56
+ --ds-ref-skeleton: var(--retro-yellow-100);
57
+ --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
58
+ }
package/src/styles/themes/sanzo-152-dark.css ADDED
@@ -0,0 +1,58 @@
1
+ [data-theme='sanzo-152-dark'] {
2
+ color-scheme: dark;
3
+
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);
8
+
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;
13
+
14
+ /* 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);
17
+
18
+ /* Focus */
19
+ --ds-ref-ring: var(--sanzo-ochre);
20
+ --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+
22
+ /* 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);
28
+
29
+ /* 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);
33
+
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);
37
+
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);
41
+
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);
45
+
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);
49
+
50
+ /* 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);
54
+
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);
58
+ }
package/src/styles/themes/sanzo-152-light.css ADDED
@@ -0,0 +1,58 @@
1
+ [data-theme='sanzo-152-light'] {
2
+ color-scheme: light;
3
+
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);
8
+
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;
13
+
14
+ /* 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);
17
+
18
+ /* Focus */
19
+ --ds-ref-ring: var(--sanzo-blue-dark-500);
20
+ --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
+
22
+ /* 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);
28
+
29
+ /* 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);
33
+
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);
37
+
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);
41
+
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);
45
+
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);
49
+
50
+ /* 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);
54
+
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);
58
+ }
package/src/styles/tokens.css CHANGED
@@ -66,14 +66,12 @@
66
66
  --orange-950: #451a03;
67
67
 
68
68
  /* Retro palette */
69
- --retro-yellow-50: #fefce8;
70
- --retro-yellow-500: #eab308;
71
- --retro-yellow-600: #ca8a04;
72
- --retro-orange-500: #f97316;
73
- --retro-brown-500: #78350f;
74
- --retro-brown-900: #451a03;
75
- --retro-teal-50: #e6fffa;
76
- --retro-teal-500: #14b8a6;
69
+ --retro-yellow: #faca78;
70
+ --retro-orange: #f48028;
71
+ --retro-red: #dd5544;
72
+ --retro-brown: #7f5344;
73
+ --retro-teal: #68c7c1;
74
+ --retro-green: #787c54;
77
75
  --retro-gray-50: #f7f7f5;
78
76
  --retro-gray-100: #e3e3dc;
79
77
  --retro-gray-200: #cfcfc5;
@@ -85,6 +83,140 @@
85
83
  --retro-gray-800: #3c3c37;
86
84
  --retro-gray-900: #21211e;
87
85
 
86
+ /* Retro scales */
87
+ --retro-yellow-50: color-mix(in srgb, var(--retro-yellow) 10%, #ffffff);
88
+ --retro-yellow-100: color-mix(in srgb, var(--retro-yellow) 20%, #ffffff);
89
+ --retro-yellow-200: color-mix(in srgb, var(--retro-yellow) 35%, #ffffff);
90
+ --retro-yellow-300: color-mix(in srgb, var(--retro-yellow) 55%, #ffffff);
91
+ --retro-yellow-400: color-mix(in srgb, var(--retro-yellow) 75%, #ffffff);
92
+ --retro-yellow-500: var(--retro-yellow);
93
+ --retro-yellow-600: color-mix(in srgb, var(--retro-yellow) 85%, #000000);
94
+ --retro-yellow-700: color-mix(in srgb, var(--retro-yellow) 70%, #000000);
95
+ --retro-yellow-800: color-mix(in srgb, var(--retro-yellow) 55%, #000000);
96
+ --retro-yellow-900: color-mix(in srgb, var(--retro-yellow) 40%, #000000);
97
+
98
+ --retro-orange-50: color-mix(in srgb, var(--retro-orange) 10%, #ffffff);
99
+ --retro-orange-100: color-mix(in srgb, var(--retro-orange) 20%, #ffffff);
100
+ --retro-orange-200: color-mix(in srgb, var(--retro-orange) 35%, #ffffff);
101
+ --retro-orange-300: color-mix(in srgb, var(--retro-orange) 55%, #ffffff);
102
+ --retro-orange-400: color-mix(in srgb, var(--retro-orange) 75%, #ffffff);
103
+ --retro-orange-500: var(--retro-orange);
104
+ --retro-orange-600: color-mix(in srgb, var(--retro-orange) 85%, #000000);
105
+ --retro-orange-700: color-mix(in srgb, var(--retro-orange) 70%, #000000);
106
+ --retro-orange-800: color-mix(in srgb, var(--retro-orange) 55%, #000000);
107
+ --retro-orange-900: color-mix(in srgb, var(--retro-orange) 40%, #000000);
108
+
109
+ --retro-brown-50: color-mix(in srgb, var(--retro-brown) 10%, #ffffff);
110
+ --retro-brown-100: color-mix(in srgb, var(--retro-brown) 20%, #ffffff);
111
+ --retro-brown-200: color-mix(in srgb, var(--retro-brown) 35%, #ffffff);
112
+ --retro-brown-300: color-mix(in srgb, var(--retro-brown) 55%, #ffffff);
113
+ --retro-brown-400: color-mix(in srgb, var(--retro-brown) 75%, #ffffff);
114
+ --retro-brown-500: var(--retro-brown);
115
+ --retro-brown-600: color-mix(in srgb, var(--retro-brown) 85%, #000000);
116
+ --retro-brown-700: color-mix(in srgb, var(--retro-brown) 70%, #000000);
117
+ --retro-brown-800: color-mix(in srgb, var(--retro-brown) 55%, #000000);
118
+ --retro-brown-900: color-mix(in srgb, var(--retro-brown) 40%, #000000);
119
+
120
+ --retro-teal-50: color-mix(in srgb, var(--retro-teal) 10%, #ffffff);
121
+ --retro-teal-100: color-mix(in srgb, var(--retro-teal) 20%, #ffffff);
122
+ --retro-teal-200: color-mix(in srgb, var(--retro-teal) 35%, #ffffff);
123
+ --retro-teal-300: color-mix(in srgb, var(--retro-teal) 55%, #ffffff);
124
+ --retro-teal-400: color-mix(in srgb, var(--retro-teal) 75%, #ffffff);
125
+ --retro-teal-500: var(--retro-teal);
126
+ --retro-teal-600: color-mix(in srgb, var(--retro-teal) 85%, #000000);
127
+ --retro-teal-700: color-mix(in srgb, var(--retro-teal) 70%, #000000);
128
+ --retro-teal-800: color-mix(in srgb, var(--retro-teal) 55%, #000000);
129
+ --retro-teal-900: color-mix(in srgb, var(--retro-teal) 40%, #000000);
130
+
131
+ --retro-green-50: color-mix(in srgb, var(--retro-green) 10%, #ffffff);
132
+ --retro-green-100: color-mix(in srgb, var(--retro-green) 20%, #ffffff);
133
+ --retro-green-200: color-mix(in srgb, var(--retro-green) 35%, #ffffff);
134
+ --retro-green-300: color-mix(in srgb, var(--retro-green) 55%, #ffffff);
135
+ --retro-green-400: color-mix(in srgb, var(--retro-green) 75%, #ffffff);
136
+ --retro-green-500: var(--retro-green);
137
+ --retro-green-600: color-mix(in srgb, var(--retro-green) 85%, #000000);
138
+ --retro-green-700: color-mix(in srgb, var(--retro-green) 70%, #000000);
139
+ --retro-green-800: color-mix(in srgb, var(--retro-green) 55%, #000000);
140
+ --retro-green-900: color-mix(in srgb, var(--retro-green) 40%, #000000);
141
+
142
+ --retro-red-50: color-mix(in srgb, var(--retro-red) 10%, #ffffff);
143
+ --retro-red-100: color-mix(in srgb, var(--retro-red) 20%, #ffffff);
144
+ --retro-red-200: color-mix(in srgb, var(--retro-red) 35%, #ffffff);
145
+ --retro-red-300: color-mix(in srgb, var(--retro-red) 55%, #ffffff);
146
+ --retro-red-400: color-mix(in srgb, var(--retro-red) 75%, #ffffff);
147
+ --retro-red-500: var(--retro-red);
148
+ --retro-red-600: color-mix(in srgb, var(--retro-red) 85%, #000000);
149
+ --retro-red-700: color-mix(in srgb, var(--retro-red) 70%, #000000);
150
+ --retro-red-800: color-mix(in srgb, var(--retro-red) 55%, #000000);
151
+ --retro-red-900: color-mix(in srgb, var(--retro-red) 40%, #000000);
152
+
153
+ /* Sanzo-152 palette */
154
+ --sanzo-rose: #a0585e;
155
+ --sanzo-mauve: #ab6469;
156
+ --sanzo-sand: #baa28f;
157
+ --sanzo-blue-pale: #889caa;
158
+ --sanzo-blue-dark: #1f3f66;
159
+ --sanzo-blue-grayish: #4c5f6e;
160
+ --sanzo-ochre: #a97b01;
161
+ --sanzo-teal: #2f4a3a;
162
+ --sanzo-brown: #351d0b;
163
+
164
+ /* Sanzo-152 scales (for stateful UI usage) */
165
+ --sanzo-rose-50: color-mix(in srgb, var(--sanzo-rose) 30%, #ffffff);
166
+ --sanzo-rose-100: color-mix(in srgb, var(--sanzo-rose) 45%, #ffffff);
167
+ --sanzo-rose-200: color-mix(in srgb, var(--sanzo-rose) 60%, #ffffff);
168
+ --sanzo-rose-300: color-mix(in srgb, var(--sanzo-rose) 70%, #ffffff);
169
+ --sanzo-rose-400: color-mix(in srgb, var(--sanzo-rose) 85%, #ffffff);
170
+ --sanzo-rose-500: var(--sanzo-rose);
171
+ --sanzo-rose-600: color-mix(in srgb, var(--sanzo-rose) 80%, #000000);
172
+ --sanzo-rose-700: color-mix(in srgb, var(--sanzo-rose) 65%, #000000);
173
+ --sanzo-rose-800: color-mix(in srgb, var(--sanzo-rose) 50%, #000000);
174
+ --sanzo-rose-900: color-mix(in srgb, var(--sanzo-rose) 35%, #000000);
175
+
176
+ --sanzo-sand-50: color-mix(in srgb, var(--sanzo-sand) 30%, #ffffff);
177
+ --sanzo-sand-100: color-mix(in srgb, var(--sanzo-sand) 40%, #ffffff);
178
+ --sanzo-sand-200: color-mix(in srgb, var(--sanzo-sand) 50%, #ffffff);
179
+ --sanzo-sand-300: color-mix(in srgb, var(--sanzo-sand) 65%, #ffffff);
180
+ --sanzo-sand-400: color-mix(in srgb, var(--sanzo-sand) 80%, #ffffff);
181
+ --sanzo-sand-500: var(--sanzo-sand);
182
+ --sanzo-sand-600: color-mix(in srgb, var(--sanzo-sand) 75%, #000000);
183
+ --sanzo-sand-700: color-mix(in srgb, var(--sanzo-sand) 65%, #000000);
184
+ --sanzo-sand-800: color-mix(in srgb, var(--sanzo-sand) 50%, #000000);
185
+ --sanzo-sand-900: color-mix(in srgb, var(--sanzo-sand) 30%, #000000);
186
+
187
+ --sanzo-ochre-50: color-mix(in srgb, var(--sanzo-ochre) 30%, #ffffff);
188
+ --sanzo-ochre-100: color-mix(in srgb, var(--sanzo-ochre) 50%, #ffffff);
189
+ --sanzo-ochre-200: color-mix(in srgb, var(--sanzo-ochre) 60%, #ffffff);
190
+ --sanzo-ochre-300: color-mix(in srgb, var(--sanzo-ochre) 70%, #ffffff);
191
+ --sanzo-ochre-400: color-mix(in srgb, var(--sanzo-ochre) 80%, #ffffff);
192
+ --sanzo-ochre-500: var(--sanzo-ochre);
193
+ --sanzo-ochre-600: color-mix(in srgb, var(--sanzo-ochre) 75%, #000000);
194
+ --sanzo-ochre-700: color-mix(in srgb, var(--sanzo-ochre) 55%, #000000);
195
+ --sanzo-ochre-800: color-mix(in srgb, var(--sanzo-ochre) 40%, #000000);
196
+ --sanzo-ochre-900: color-mix(in srgb, var(--sanzo-ochre) 25%, #000000);
197
+
198
+ --sanzo-blue-dark-50: color-mix(in srgb, var(--sanzo-blue-dark) 50%, #ffffff);
199
+ --sanzo-blue-dark-100: color-mix(in srgb, var(--sanzo-blue-dark) 60%, #ffffff);
200
+ --sanzo-blue-dark-200: color-mix(in srgb, var(--sanzo-blue-dark) 70%, #ffffff);
201
+ --sanzo-blue-dark-300: color-mix(in srgb, var(--sanzo-blue-dark) 80%, #ffffff);
202
+ --sanzo-blue-dark-400: color-mix(in srgb, var(--sanzo-blue-dark) 90%, #ffffff);
203
+ --sanzo-blue-dark-500: var(--sanzo-blue-dark);
204
+ --sanzo-blue-dark-600: color-mix(in srgb, var(--sanzo-blue-dark) 88%, #000000);
205
+ --sanzo-blue-dark-700: color-mix(in srgb, var(--sanzo-blue-dark) 76%, #000000);
206
+ --sanzo-blue-dark-800: color-mix(in srgb, var(--sanzo-blue-dark) 64%, #000000);
207
+ --sanzo-blue-dark-900: color-mix(in srgb, var(--sanzo-blue-dark) 52%, #000000);
208
+
209
+ --sanzo-teal-50: color-mix(in srgb, var(--sanzo-teal) 25%, #ffffff);
210
+ --sanzo-teal-100: color-mix(in srgb, var(--sanzo-teal) 40%, #ffffff);
211
+ --sanzo-teal-200: color-mix(in srgb, var(--sanzo-teal) 55%, #ffffff);
212
+ --sanzo-teal-300: color-mix(in srgb, var(--sanzo-teal) 70%, #ffffff);
213
+ --sanzo-teal-400: color-mix(in srgb, var(--sanzo-teal) 85%, #ffffff);
214
+ --sanzo-teal-500: var(--sanzo-teal);
215
+ --sanzo-teal-600: color-mix(in srgb, var(--sanzo-teal) 85%, #000000);
216
+ --sanzo-teal-700: color-mix(in srgb, var(--sanzo-teal) 70%, #000000);
217
+ --sanzo-teal-800: color-mix(in srgb, var(--sanzo-teal) 55%, #000000);
218
+ --sanzo-teal-900: color-mix(in srgb, var(--sanzo-teal) 40%, #000000);
219
+
88
220
  /* --- TYPOGRAPHY SCALE --- */
89
221
 
90
222
  --ds-font-family-base:
package/src/styles/themes/retro.css DELETED
@@ -1,58 +0,0 @@
1
- [data-theme='retro'] {
2
- color-scheme: light;
3
-
4
- /* Surfaces */
5
- --ds-ref-surface-0: var(--retro-yellow-50);
6
- --ds-ref-surface-1: var(--retro-gray-50);
7
- --ds-ref-surface-2: var(--retro-gray-100);
8
-
9
- /* Text */
10
- --ds-ref-text-1: var(--retro-brown-900);
11
- --ds-ref-text-2: var(--retro-gray-600);
12
- --ds-ref-text-on-brand: var(--retro-yellow-50);
13
-
14
- /* Borders */
15
- --ds-ref-border-1: var(--retro-gray-200);
16
- --ds-ref-border-2: var(--retro-gray-100);
17
-
18
- /* Focus */
19
- --ds-ref-ring: var(--retro-teal-500);
20
- --ds-ref-ring-offset: var(--ds-ref-surface-0);
21
-
22
- /* Intents (base) */
23
- --ds-ref-info: var(--retro-teal-500);
24
- --ds-ref-success: var(--green-600);
25
- --ds-ref-warning: var(--retro-orange-500);
26
- --ds-ref-danger: var(--red-600);
27
- --ds-ref-neutral: var(--retro-gray-500);
28
-
29
- /* Intents (states) */
30
- --ds-ref-info-hover: var(--retro-teal-500);
31
- --ds-ref-info-active: var(--retro-teal-500);
32
- --ds-ref-info-subtle: var(--retro-teal-50);
33
-
34
- --ds-ref-success-hover: var(--green-700);
35
- --ds-ref-success-active: var(--green-800);
36
- --ds-ref-success-subtle: var(--green-50);
37
-
38
- --ds-ref-warning-hover: var(--retro-orange-500);
39
- --ds-ref-warning-active: var(--retro-orange-500);
40
- --ds-ref-warning-subtle: var(--orange-50);
41
-
42
- --ds-ref-danger-hover: var(--red-700);
43
- --ds-ref-danger-active: var(--red-800);
44
- --ds-ref-danger-subtle: var(--red-50);
45
-
46
- --ds-ref-neutral-hover: var(--retro-gray-600);
47
- --ds-ref-neutral-active: var(--retro-gray-700);
48
- --ds-ref-neutral-subtle: var(--retro-gray-50);
49
-
50
- /* Disabled */
51
- --ds-ref-text-disabled: var(--retro-gray-300);
52
- --ds-ref-surface-disabled: var(--retro-gray-100);
53
- --ds-ref-border-disabled: var(--retro-gray-200);
54
-
55
- /* Skeleton */
56
- --ds-ref-skeleton: var(--retro-gray-100);
57
- --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
58
- }