@marianmeres/design-tokens 1.1.4 → 1.2.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 (7) hide show
  1. package/dist/css/amber-olive-safari.css +216 -0
  2. package/dist/css/blue-orange.css +105 -241
  3. package/dist/themes/amber-olive-safari.d.ts +4 -0
  4. package/dist/themes/amber-olive-safari.js +118 -0
  5. package/dist/themes/mod.d.ts +2 -0
  6. package/dist/themes/mod.js +2 -0
  7. package/package.json +1 -1
package/dist/css/amber-olive-safari.css ADDED
@@ -0,0 +1,216 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #d97706;
4
+
5
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
6
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
7
+ --stuic-color-primary-foreground: #ffffff;
8
+ --stuic-color-primary-foreground-hover: #ffffff;
9
+ --stuic-color-primary-foreground-active: #ffffff;
10
+
11
+ --stuic-color-accent: #474739;
12
+
13
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
14
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
15
+ --stuic-color-accent-foreground: #ffffff;
16
+ --stuic-color-accent-foreground-hover: #ffffff;
17
+ --stuic-color-accent-foreground-active: #ffffff;
18
+
19
+ --stuic-color-destructive: #dc2626;
20
+
21
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
22
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
23
+ --stuic-color-destructive-foreground: #ffffff;
24
+ --stuic-color-destructive-foreground-hover: #ffffff;
25
+ --stuic-color-destructive-foreground-active: #ffffff;
26
+
27
+ --stuic-color-warning: #f59e0b;
28
+
29
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
30
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
31
+ --stuic-color-warning-foreground: #ffffff;
32
+ --stuic-color-warning-foreground-hover: #ffffff;
33
+ --stuic-color-warning-foreground-active: #ffffff;
34
+
35
+ --stuic-color-success: #059669;
36
+
37
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
38
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
39
+ --stuic-color-success-foreground: #ffffff;
40
+ --stuic-color-success-foreground-hover: #ffffff;
41
+ --stuic-color-success-foreground-active: #ffffff;
42
+
43
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
44
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
45
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
46
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
47
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
48
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
49
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
50
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
51
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
52
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
53
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
54
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
55
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
56
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
57
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
58
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
59
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
60
+ --stuic-color-surface-foreground: #1d1d16;
61
+ --stuic-color-surface-foreground-hover: #1d1d16;
62
+ --stuic-color-surface-foreground-active: #1d1d16;
63
+
64
+ --stuic-color-background: #fbfbf9;
65
+
66
+ --stuic-color-background-hover: #fbfbf9;
67
+ --stuic-color-background-active: #fbfbf9;
68
+ --stuic-color-background-foreground: #1d1d16;
69
+ --stuic-color-background-foreground-hover: #1d1d16;
70
+ --stuic-color-background-foreground-active: #1d1d16;
71
+
72
+ --stuic-color-muted: #f4f4f0;
73
+
74
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
75
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
76
+ --stuic-color-muted-foreground: #7c7c67;
77
+ --stuic-color-muted-foreground-hover: #7c7c67;
78
+ --stuic-color-muted-foreground-active: #7c7c67;
79
+
80
+ --stuic-color-surface: #e8e8e3;
81
+
82
+ --stuic-color-surface-1: #d8d8d0;
83
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
84
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
85
+ --stuic-color-surface-1-foreground: #1d1d16;
86
+ --stuic-color-surface-1-foreground-hover: #1d1d16;
87
+ --stuic-color-surface-1-foreground-active: #1d1d16;
88
+
89
+ --stuic-color-foreground: #1d1d16;
90
+
91
+ --stuic-color-foreground-hover: #1d1d16;
92
+ --stuic-color-foreground-active: #1d1d16;
93
+
94
+ --stuic-color-border: #d8d8d0;
95
+
96
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
97
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
98
+
99
+ --stuic-color-input: #fbfbf9;
100
+
101
+ --stuic-color-input-hover: #f4f4f0;
102
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
103
+
104
+ --stuic-color-ring: color-mix(in srgb, #d97706 20%, transparent);
105
+
106
+ --stuic-color-ring-hover: color-mix(in srgb, #d97706 20%, transparent);
107
+ --stuic-color-ring-active: color-mix(in srgb, #d97706 20%, transparent);
108
+ }
109
+
110
+ :root.dark {
111
+ --stuic-color-primary: #f59e0b;
112
+
113
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
114
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
115
+ --stuic-color-primary-foreground: #000000;
116
+ --stuic-color-primary-foreground-hover: #000000;
117
+ --stuic-color-primary-foreground-active: #000000;
118
+
119
+ --stuic-color-accent: #abab9c;
120
+
121
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
122
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
123
+ --stuic-color-accent-foreground: #000000;
124
+ --stuic-color-accent-foreground-hover: #000000;
125
+ --stuic-color-accent-foreground-active: #000000;
126
+
127
+ --stuic-color-destructive: #ef4444;
128
+
129
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
130
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
131
+ --stuic-color-destructive-foreground: #ffffff;
132
+ --stuic-color-destructive-foreground-hover: #ffffff;
133
+ --stuic-color-destructive-foreground-active: #ffffff;
134
+
135
+ --stuic-color-warning: #fbbf24;
136
+
137
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
138
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
139
+ --stuic-color-warning-foreground: #000000;
140
+ --stuic-color-warning-foreground-hover: #000000;
141
+ --stuic-color-warning-foreground-active: #000000;
142
+
143
+ --stuic-color-success: #10b981;
144
+
145
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
146
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
147
+ --stuic-color-success-foreground: #ffffff;
148
+ --stuic-color-success-foreground-hover: #ffffff;
149
+ --stuic-color-success-foreground-active: #ffffff;
150
+
151
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
152
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
153
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
154
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
155
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
156
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
157
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
158
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
159
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
160
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
161
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
162
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
163
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
164
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
165
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
166
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
167
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
168
+ --stuic-color-surface-foreground: #d8d8d0;
169
+ --stuic-color-surface-foreground-hover: #d8d8d0;
170
+ --stuic-color-surface-foreground-active: #d8d8d0;
171
+
172
+ --stuic-color-background: #1d1d16;
173
+
174
+ --stuic-color-background-hover: #1d1d16;
175
+ --stuic-color-background-active: #1d1d16;
176
+ --stuic-color-background-foreground: #fbfbf9;
177
+ --stuic-color-background-foreground-hover: #fbfbf9;
178
+ --stuic-color-background-foreground-active: #fbfbf9;
179
+
180
+ --stuic-color-muted: #2b2b22;
181
+
182
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
183
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
184
+ --stuic-color-muted-foreground: #abab9c;
185
+ --stuic-color-muted-foreground-hover: #abab9c;
186
+ --stuic-color-muted-foreground-active: #abab9c;
187
+
188
+ --stuic-color-surface: #474739;
189
+
190
+ --stuic-color-surface-1: #5b5b4b;
191
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
192
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
193
+ --stuic-color-surface-1-foreground: #e8e8e3;
194
+ --stuic-color-surface-1-foreground-hover: #e8e8e3;
195
+ --stuic-color-surface-1-foreground-active: #e8e8e3;
196
+
197
+ --stuic-color-foreground: #fbfbf9;
198
+
199
+ --stuic-color-foreground-hover: #fbfbf9;
200
+ --stuic-color-foreground-active: #fbfbf9;
201
+
202
+ --stuic-color-border: #5b5b4b;
203
+
204
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
205
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
206
+
207
+ --stuic-color-input: #1d1d16;
208
+
209
+ --stuic-color-input-hover: #2b2b22;
210
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
211
+
212
+ --stuic-color-ring: color-mix(in srgb, #f59e0b 25%, transparent);
213
+
214
+ --stuic-color-ring-hover: color-mix(in srgb, #f59e0b 25%, transparent);
215
+ --stuic-color-ring-active: color-mix(in srgb, #f59e0b 25%, transparent);
216
+ }
package/dist/css/blue-orange.css CHANGED
@@ -108,245 +108,109 @@
108
108
  }
109
109
 
110
110
  :root.dark {
111
- --stuic-color-primary: #3b82f6;
112
-
113
- --stuic-color-primary-hover: color-mix(
114
- in oklch,
115
- var(--stuic-color-primary),
116
- white 10%
117
- );
118
- --stuic-color-primary-active: color-mix(
119
- in oklch,
120
- var(--stuic-color-primary),
121
- white 20%
122
- );
123
- --stuic-color-primary-foreground: #ffffff;
124
- --stuic-color-primary-foreground-hover: #ffffff;
125
- --stuic-color-primary-foreground-active: #ffffff;
126
-
127
- --stuic-color-accent: #fb923c;
128
-
129
- --stuic-color-accent-hover: color-mix(
130
- in oklch,
131
- var(--stuic-color-accent),
132
- white 10%
133
- );
134
- --stuic-color-accent-active: color-mix(
135
- in oklch,
136
- var(--stuic-color-accent),
137
- white 20%
138
- );
139
- --stuic-color-accent-foreground: #ffffff;
140
- --stuic-color-accent-foreground-hover: #ffffff;
141
- --stuic-color-accent-foreground-active: #ffffff;
142
-
143
- --stuic-color-destructive: #f43f5e;
144
-
145
- --stuic-color-destructive-hover: color-mix(
146
- in oklch,
147
- var(--stuic-color-destructive),
148
- white 10%
149
- );
150
- --stuic-color-destructive-active: color-mix(
151
- in oklch,
152
- var(--stuic-color-destructive),
153
- white 20%
154
- );
155
- --stuic-color-destructive-foreground: #ffffff;
156
- --stuic-color-destructive-foreground-hover: #ffffff;
157
- --stuic-color-destructive-foreground-active: #ffffff;
158
-
159
- --stuic-color-warning: #fb923c;
160
-
161
- --stuic-color-warning-hover: color-mix(
162
- in oklch,
163
- var(--stuic-color-warning),
164
- white 10%
165
- );
166
- --stuic-color-warning-active: color-mix(
167
- in oklch,
168
- var(--stuic-color-warning),
169
- white 20%
170
- );
171
- --stuic-color-warning-foreground: #ffffff;
172
- --stuic-color-warning-foreground-hover: #ffffff;
173
- --stuic-color-warning-foreground-active: #ffffff;
174
-
175
- --stuic-color-success: #14b8a6;
176
-
177
- --stuic-color-success-hover: color-mix(
178
- in oklch,
179
- var(--stuic-color-success),
180
- white 10%
181
- );
182
- --stuic-color-success-active: color-mix(
183
- in oklch,
184
- var(--stuic-color-success),
185
- white 20%
186
- );
187
- --stuic-color-success-foreground: #ffffff;
188
- --stuic-color-success-foreground-hover: #ffffff;
189
- --stuic-color-success-foreground-active: #ffffff;
190
-
191
- --stuic-color-surface-primary: color-mix(
192
- in srgb,
193
- var(--stuic-color-primary) 15%,
194
- var(--stuic-color-background)
195
- );
196
- --stuic-color-surface-primary-foreground: color-mix(
197
- in srgb,
198
- var(--stuic-color-primary),
199
- white 10%
200
- );
201
- --stuic-color-surface-primary-border: color-mix(
202
- in srgb,
203
- var(--stuic-color-primary) 30%,
204
- var(--stuic-color-background)
205
- );
206
- --stuic-color-surface-accent: color-mix(
207
- in srgb,
208
- var(--stuic-color-accent) 15%,
209
- var(--stuic-color-background)
210
- );
211
- --stuic-color-surface-accent-foreground: color-mix(
212
- in srgb,
213
- var(--stuic-color-accent),
214
- white 10%
215
- );
216
- --stuic-color-surface-accent-border: color-mix(
217
- in srgb,
218
- var(--stuic-color-accent) 30%,
219
- var(--stuic-color-background)
220
- );
221
- --stuic-color-surface-destructive: color-mix(
222
- in srgb,
223
- var(--stuic-color-destructive) 15%,
224
- var(--stuic-color-background)
225
- );
226
- --stuic-color-surface-destructive-foreground: color-mix(
227
- in srgb,
228
- var(--stuic-color-destructive),
229
- white 10%
230
- );
231
- --stuic-color-surface-destructive-border: color-mix(
232
- in srgb,
233
- var(--stuic-color-destructive) 30%,
234
- var(--stuic-color-background)
235
- );
236
- --stuic-color-surface-warning: color-mix(
237
- in srgb,
238
- var(--stuic-color-warning) 15%,
239
- var(--stuic-color-background)
240
- );
241
- --stuic-color-surface-warning-foreground: color-mix(
242
- in srgb,
243
- var(--stuic-color-warning),
244
- white 10%
245
- );
246
- --stuic-color-surface-warning-border: color-mix(
247
- in srgb,
248
- var(--stuic-color-warning) 30%,
249
- var(--stuic-color-background)
250
- );
251
- --stuic-color-surface-success: color-mix(
252
- in srgb,
253
- var(--stuic-color-success) 15%,
254
- var(--stuic-color-background)
255
- );
256
- --stuic-color-surface-success-foreground: color-mix(
257
- in srgb,
258
- var(--stuic-color-success),
259
- white 10%
260
- );
261
- --stuic-color-surface-success-border: color-mix(
262
- in srgb,
263
- var(--stuic-color-success) 30%,
264
- var(--stuic-color-background)
265
- );
266
- --stuic-color-surface-hover: color-mix(
267
- in oklch,
268
- var(--stuic-color-surface),
269
- white 10%
270
- );
271
- --stuic-color-surface-active: color-mix(
272
- in oklch,
273
- var(--stuic-color-surface),
274
- white 20%
275
- );
276
- --stuic-color-surface-foreground: #d6d3d1;
277
- --stuic-color-surface-foreground-hover: #d6d3d1;
278
- --stuic-color-surface-foreground-active: #d6d3d1;
279
-
280
- --stuic-color-background: #1c1917;
281
-
282
- --stuic-color-background-hover: #1c1917;
283
- --stuic-color-background-active: #1c1917;
284
- --stuic-color-background-foreground: #fafaf9;
285
- --stuic-color-background-foreground-hover: #fafaf9;
286
- --stuic-color-background-foreground-active: #fafaf9;
287
-
288
- --stuic-color-muted: #292524;
289
-
290
- --stuic-color-muted-hover: color-mix(
291
- in oklch,
292
- var(--stuic-color-muted),
293
- white 10%
294
- );
295
- --stuic-color-muted-active: color-mix(
296
- in oklch,
297
- var(--stuic-color-muted),
298
- white 20%
299
- );
300
- --stuic-color-muted-foreground: #a8a29e;
301
- --stuic-color-muted-foreground-hover: #a8a29e;
302
- --stuic-color-muted-foreground-active: #a8a29e;
303
-
304
- --stuic-color-surface: #44403c;
305
-
306
- --stuic-color-surface-1: #57534e;
307
- --stuic-color-surface-1-hover: color-mix(
308
- in oklch,
309
- var(--stuic-color-surface-1),
310
- white 10%
311
- );
312
- --stuic-color-surface-1-active: color-mix(
313
- in oklch,
314
- var(--stuic-color-surface-1),
315
- white 20%
316
- );
317
- --stuic-color-surface-1-foreground: #e7e5e4;
318
- --stuic-color-surface-1-foreground-hover: #e7e5e4;
319
- --stuic-color-surface-1-foreground-active: #e7e5e4;
320
-
321
- --stuic-color-foreground: #fafaf9;
322
-
323
- --stuic-color-foreground-hover: #fafaf9;
324
- --stuic-color-foreground-active: #fafaf9;
325
-
326
- --stuic-color-border: #44403c;
327
-
328
- --stuic-color-border-hover: color-mix(
329
- in oklch,
330
- var(--stuic-color-border),
331
- white 10%
332
- );
333
- --stuic-color-border-active: color-mix(
334
- in oklch,
335
- var(--stuic-color-border),
336
- white 20%
337
- );
338
-
339
- --stuic-color-input: #1c1917;
340
-
341
- --stuic-color-input-hover: #292524;
342
- --stuic-color-input-active: color-mix(
343
- in oklch,
344
- var(--stuic-color-input),
345
- white 20%
346
- );
347
-
348
- --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
349
-
350
- --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
351
- --stuic-color-ring-active: color-mix(in srgb, #60a5fa 25%, transparent);
111
+ --stuic-color-primary: #3b82f6;
112
+
113
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
114
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
115
+ --stuic-color-primary-foreground: #ffffff;
116
+ --stuic-color-primary-foreground-hover: #ffffff;
117
+ --stuic-color-primary-foreground-active: #ffffff;
118
+
119
+ --stuic-color-accent: #fb923c;
120
+
121
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
122
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
123
+ --stuic-color-accent-foreground: #ffffff;
124
+ --stuic-color-accent-foreground-hover: #ffffff;
125
+ --stuic-color-accent-foreground-active: #ffffff;
126
+
127
+ --stuic-color-destructive: #f43f5e;
128
+
129
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
130
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
131
+ --stuic-color-destructive-foreground: #ffffff;
132
+ --stuic-color-destructive-foreground-hover: #ffffff;
133
+ --stuic-color-destructive-foreground-active: #ffffff;
134
+
135
+ --stuic-color-warning: #fb923c;
136
+
137
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
138
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
139
+ --stuic-color-warning-foreground: #ffffff;
140
+ --stuic-color-warning-foreground-hover: #ffffff;
141
+ --stuic-color-warning-foreground-active: #ffffff;
142
+
143
+ --stuic-color-success: #14b8a6;
144
+
145
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
146
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
147
+ --stuic-color-success-foreground: #ffffff;
148
+ --stuic-color-success-foreground-hover: #ffffff;
149
+ --stuic-color-success-foreground-active: #ffffff;
150
+
151
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
152
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
153
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
154
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
155
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
156
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
157
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
158
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
159
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
160
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
161
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
162
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
163
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
164
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
165
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
166
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
167
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
168
+ --stuic-color-surface-foreground: #d6d3d1;
169
+ --stuic-color-surface-foreground-hover: #d6d3d1;
170
+ --stuic-color-surface-foreground-active: #d6d3d1;
171
+
172
+ --stuic-color-background: #1c1917;
173
+
174
+ --stuic-color-background-hover: #1c1917;
175
+ --stuic-color-background-active: #1c1917;
176
+ --stuic-color-background-foreground: #fafaf9;
177
+ --stuic-color-background-foreground-hover: #fafaf9;
178
+ --stuic-color-background-foreground-active: #fafaf9;
179
+
180
+ --stuic-color-muted: #292524;
181
+
182
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
183
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
184
+ --stuic-color-muted-foreground: #a8a29e;
185
+ --stuic-color-muted-foreground-hover: #a8a29e;
186
+ --stuic-color-muted-foreground-active: #a8a29e;
187
+
188
+ --stuic-color-surface: #44403c;
189
+
190
+ --stuic-color-surface-1: #57534e;
191
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
192
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
193
+ --stuic-color-surface-1-foreground: #e7e5e4;
194
+ --stuic-color-surface-1-foreground-hover: #e7e5e4;
195
+ --stuic-color-surface-1-foreground-active: #e7e5e4;
196
+
197
+ --stuic-color-foreground: #fafaf9;
198
+
199
+ --stuic-color-foreground-hover: #fafaf9;
200
+ --stuic-color-foreground-active: #fafaf9;
201
+
202
+ --stuic-color-border: #44403c;
203
+
204
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
205
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
206
+
207
+ --stuic-color-input: #1c1917;
208
+
209
+ --stuic-color-input-hover: #292524;
210
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
211
+
212
+ --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
213
+
214
+ --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
215
+ --stuic-color-ring-active: color-mix(in srgb, #60a5fa 25%, transparent);
352
216
  }
package/dist/themes/amber-olive-safari.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { ThemeSchema } from "../types.js";
2
+ declare const theme: ThemeSchema;
3
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
4
+ export default theme;
package/dist/themes/amber-olive-safari.js ADDED
@@ -0,0 +1,118 @@
1
+ import { colors } from "../colors.js";
2
+ const light = {
3
+ colors: {
4
+ intent: {
5
+ primary: {
6
+ DEFAULT: colors.amber[600],
7
+ foreground: colors.white,
8
+ },
9
+ accent: {
10
+ DEFAULT: colors.olive[700],
11
+ foreground: colors.white,
12
+ },
13
+ destructive: {
14
+ DEFAULT: colors.red[600],
15
+ foreground: colors.white,
16
+ },
17
+ warning: {
18
+ DEFAULT: colors.amber[500],
19
+ foreground: colors.white,
20
+ },
21
+ success: {
22
+ DEFAULT: colors.emerald[600],
23
+ foreground: colors.white,
24
+ },
25
+ },
26
+ role: {
27
+ paired: {
28
+ background: {
29
+ DEFAULT: colors.olive[50],
30
+ foreground: colors.olive[900],
31
+ },
32
+ muted: {
33
+ DEFAULT: colors.olive[100],
34
+ foreground: colors.olive[500],
35
+ },
36
+ surface: {
37
+ DEFAULT: colors.olive[200],
38
+ foreground: colors.olive[900],
39
+ },
40
+ "surface-1": {
41
+ DEFAULT: colors.olive[300],
42
+ foreground: colors.olive[900],
43
+ },
44
+ },
45
+ single: {
46
+ foreground: colors.olive[900],
47
+ border: {
48
+ DEFAULT: colors.olive[300],
49
+ },
50
+ input: {
51
+ DEFAULT: colors.olive[50],
52
+ hover: colors.olive[100],
53
+ },
54
+ ring: `color-mix(in srgb, ${colors.amber[600]} 20%, transparent)`,
55
+ },
56
+ },
57
+ },
58
+ };
59
+ const dark = {
60
+ colors: {
61
+ intent: {
62
+ primary: {
63
+ DEFAULT: colors.amber[500],
64
+ foreground: colors.black,
65
+ },
66
+ accent: {
67
+ DEFAULT: colors.olive[400],
68
+ foreground: colors.black,
69
+ },
70
+ destructive: {
71
+ DEFAULT: colors.red[500],
72
+ foreground: colors.white,
73
+ },
74
+ warning: {
75
+ DEFAULT: colors.amber[400],
76
+ foreground: colors.black,
77
+ },
78
+ success: {
79
+ DEFAULT: colors.emerald[500],
80
+ foreground: colors.white,
81
+ },
82
+ },
83
+ role: {
84
+ paired: {
85
+ background: {
86
+ DEFAULT: colors.olive[900],
87
+ foreground: colors.olive[50],
88
+ },
89
+ muted: {
90
+ DEFAULT: colors.olive[800],
91
+ foreground: colors.olive[400],
92
+ },
93
+ surface: {
94
+ DEFAULT: colors.olive[700],
95
+ foreground: colors.olive[300],
96
+ },
97
+ "surface-1": {
98
+ DEFAULT: colors.olive[600],
99
+ foreground: colors.olive[200],
100
+ },
101
+ },
102
+ single: {
103
+ foreground: colors.olive[50],
104
+ border: {
105
+ DEFAULT: colors.olive[600],
106
+ },
107
+ input: {
108
+ DEFAULT: colors.olive[900],
109
+ hover: colors.olive[800],
110
+ },
111
+ ring: `color-mix(in srgb, ${colors.amber[500]} 25%, transparent)`,
112
+ },
113
+ },
114
+ },
115
+ };
116
+ const theme = { light, dark };
117
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
118
+ export default theme;
package/dist/themes/mod.d.ts CHANGED
@@ -9,6 +9,8 @@
9
9
  */
10
10
  /** A complete theme definition with required light mode and optional dark mode. */
11
11
  export type { ThemeSchema } from "../types.js";
12
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
13
+ export { default as amberOliveSafari } from "./amber-olive-safari.js";
12
14
  /** Blue primary / orange accent theme. */
13
15
  export { default as blueOrange } from "./blue-orange.js";
14
16
  /** Cyan primary / red accent theme. */
package/dist/themes/mod.js CHANGED
@@ -7,6 +7,8 @@
7
7
  *
8
8
  * @module
9
9
  */
10
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
11
+ export { default as amberOliveSafari } from "./amber-olive-safari.js";
10
12
  /** Blue primary / orange accent theme. */
11
13
  export { default as blueOrange } from "./blue-orange.js";
12
14
  /** Cyan primary / red accent theme. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/design-tokens",
3
- "version": "1.1.4",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "main": "dist/mod.js",
6
6
  "types": "dist/mod.d.ts",