@marianmeres/design-tokens 1.1.4 → 1.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 (9) hide show
  1. package/AGENTS.md +1 -1
  2. package/dist/css/amber-olive-safari.css +216 -0
  3. package/dist/css/blue-orange.css +105 -241
  4. package/dist/themes/{dds.d.ts → amber-olive-safari.d.ts} +1 -0
  5. package/dist/themes/amber-olive-safari.js +118 -0
  6. package/dist/themes/mod.d.ts +6 -2
  7. package/dist/themes/mod.js +51 -11
  8. package/package.json +1 -1
  9. package/dist/themes/dds.js +0 -133
package/AGENTS.md CHANGED
@@ -86,7 +86,7 @@ Entry points:
86
86
  ## Adding a New Theme
87
87
 
88
88
  1. Create `src/themes/{name}.ts` with `export default` of `ThemeSchema`
89
- 2. Add re-export in `src/themes/mod.ts` (alphabetical order)
89
+ 2. Run `deno task themes:build` to regenerate `src/themes/mod.ts`
90
90
  3. Run `deno task css:build` to regenerate CSS files
91
91
  4. Run `deno task preview:build` to rebuild the preview tool
92
92
  5. If the theme uses new color families, update `COLOR_FAMILIES` in `theme-preview-builder/index.html`
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/{dds.d.ts → amber-olive-safari.d.ts} RENAMED
@@ -1,3 +1,4 @@
1
1
  import type { ThemeSchema } from "../types.js";
2
2
  declare const theme: ThemeSchema;
3
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
3
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. */
@@ -77,14 +79,14 @@ export { default as slateCyan } from "./slate-cyan.js";
77
79
  export { default as slateTealOcean } from "./slate-teal-ocean.js";
78
80
  /** Neutral stone monochrome theme. */
79
81
  export { default as stone } from "./stone.js";
82
+ /** Stone primary / orange accent earth theme. */
83
+ export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
80
84
  /** Warm neutral taupe monochrome theme. */
81
85
  export { default as taupe } from "./taupe.js";
82
86
  /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
83
87
  export { default as taupeOliveClay } from "./taupe-olive-clay.js";
84
88
  /** Rose primary / pink accent on taupe base — warm blush tones. */
85
89
  export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
86
- /** Stone primary / orange accent earth theme. */
87
- export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
88
90
  /** Teal primary / rose accent theme. */
89
91
  export { default as tealRose } from "./teal-rose.js";
90
92
  /** Violet primary / lime accent theme. */
@@ -93,3 +95,5 @@ export { default as violetLime } from "./violet-lime.js";
93
95
  export { default as violetRoseDusk } from "./violet-rose-dusk.js";
94
96
  /** Neutral zinc monochrome theme. */
95
97
  export { default as zinc } from "./zinc.js";
98
+ /** Kebab-case theme names matching the generated CSS filenames (without extension). */
99
+ export declare const themeNames: readonly ["amber-olive-safari", "blue-orange", "cyan-red", "cyan-slate", "emerald-amber-forest", "emerald-pink", "fuchsia-emerald", "gray", "indigo-amber", "lime-fuchsia-neon", "mauve", "mauve-lime-electric", "mauve-teal", "mist", "mist-indigo-fjord", "mist-violet-aurora", "monokai-cyan", "monokai-green", "monokai-pink", "olive", "olive-amber-safari", "orange-pink-sunset", "pink-emerald", "pink-teal", "purple-yellow", "rainbow", "red-blue", "red-cyan", "red-sky", "red-sky-slate", "rose-teal", "sky-amber", "slate-cyan", "slate-teal-ocean", "stone", "stone-orange-earth", "taupe", "taupe-olive-clay", "taupe-rose-blush", "teal-rose", "violet-lime", "violet-rose-dusk", "zinc"];
package/dist/themes/mod.js CHANGED
@@ -1,12 +1,6 @@
1
- /**
2
- * Pre-built {@link ThemeSchema} definitions ready to use with
3
- * {@link generateThemeCss} or {@link generateThemedCss}.
4
- *
5
- * Each theme exports a complete light + dark mode token schema built
6
- * from the bundled Tailwind color palette.
7
- *
8
- * @module
9
- */
1
+ // This file is auto-generated by scripts/build-themes-mod.ts — do not edit manually.
2
+ /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
3
+ export { default as amberOliveSafari } from "./amber-olive-safari.js";
10
4
  /** Blue primary / orange accent theme. */
11
5
  export { default as blueOrange } from "./blue-orange.js";
12
6
  /** Cyan primary / red accent theme. */
@@ -75,14 +69,14 @@ export { default as slateCyan } from "./slate-cyan.js";
75
69
  export { default as slateTealOcean } from "./slate-teal-ocean.js";
76
70
  /** Neutral stone monochrome theme. */
77
71
  export { default as stone } from "./stone.js";
72
+ /** Stone primary / orange accent earth theme. */
73
+ export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
78
74
  /** Warm neutral taupe monochrome theme. */
79
75
  export { default as taupe } from "./taupe.js";
80
76
  /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
81
77
  export { default as taupeOliveClay } from "./taupe-olive-clay.js";
82
78
  /** Rose primary / pink accent on taupe base — warm blush tones. */
83
79
  export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
84
- /** Stone primary / orange accent earth theme. */
85
- export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
86
80
  /** Teal primary / rose accent theme. */
87
81
  export { default as tealRose } from "./teal-rose.js";
88
82
  /** Violet primary / lime accent theme. */
@@ -91,3 +85,49 @@ export { default as violetLime } from "./violet-lime.js";
91
85
  export { default as violetRoseDusk } from "./violet-rose-dusk.js";
92
86
  /** Neutral zinc monochrome theme. */
93
87
  export { default as zinc } from "./zinc.js";
88
+ /** Kebab-case theme names matching the generated CSS filenames (without extension). */
89
+ export const themeNames = [
90
+ "amber-olive-safari",
91
+ "blue-orange",
92
+ "cyan-red",
93
+ "cyan-slate",
94
+ "emerald-amber-forest",
95
+ "emerald-pink",
96
+ "fuchsia-emerald",
97
+ "gray",
98
+ "indigo-amber",
99
+ "lime-fuchsia-neon",
100
+ "mauve",
101
+ "mauve-lime-electric",
102
+ "mauve-teal",
103
+ "mist",
104
+ "mist-indigo-fjord",
105
+ "mist-violet-aurora",
106
+ "monokai-cyan",
107
+ "monokai-green",
108
+ "monokai-pink",
109
+ "olive",
110
+ "olive-amber-safari",
111
+ "orange-pink-sunset",
112
+ "pink-emerald",
113
+ "pink-teal",
114
+ "purple-yellow",
115
+ "rainbow",
116
+ "red-blue",
117
+ "red-cyan",
118
+ "red-sky",
119
+ "red-sky-slate",
120
+ "rose-teal",
121
+ "sky-amber",
122
+ "slate-cyan",
123
+ "slate-teal-ocean",
124
+ "stone",
125
+ "stone-orange-earth",
126
+ "taupe",
127
+ "taupe-olive-clay",
128
+ "taupe-rose-blush",
129
+ "teal-rose",
130
+ "violet-lime",
131
+ "violet-rose-dusk",
132
+ "zinc",
133
+ ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/design-tokens",
3
- "version": "1.1.4",
3
+ "version": "1.3.0",
4
4
  "type": "module",
5
5
  "main": "dist/mod.js",
6
6
  "types": "dist/mod.d.ts",
package/dist/themes/dds.js DELETED
@@ -1,133 +0,0 @@
1
- import { colors } from "../colors.js";
2
- // Custom color palette — hover/active states must be explicit (no auto-derivation)
3
- const theme = {
4
- light: {
5
- colors: {
6
- intent: {
7
- primary: {
8
- DEFAULT: "#13BF89",
9
- foreground: "#2B2A28",
10
- hover: "#42CCA1",
11
- active: "#0F996E",
12
- },
13
- accent: {
14
- DEFAULT: "#F89B20",
15
- foreground: "#2B2A28",
16
- hover: "#C87F16",
17
- active: "#A56A12",
18
- },
19
- destructive: {
20
- DEFAULT: "#E60523",
21
- foreground: "#fff",
22
- hover: "#B8041C",
23
- active: "#930316",
24
- },
25
- warning: {
26
- DEFAULT: "#F37903",
27
- foreground: "#2B2A28",
28
- hover: "#FBB249",
29
- active: "#9E581B",
30
- },
31
- success: {
32
- DEFAULT: "#0DB064",
33
- foreground: "#fff",
34
- hover: "#00853E",
35
- active: "#006A32",
36
- },
37
- },
38
- role: {
39
- paired: {
40
- background: {
41
- DEFAULT: "#fff",
42
- foreground: "#2B2A28",
43
- },
44
- muted: {
45
- DEFAULT: "#E9E8E7",
46
- foreground: "#726F6B",
47
- },
48
- surface: {
49
- DEFAULT: "#DDDCDB",
50
- foreground: "#2B2A28",
51
- hover: "#B1AEAA",
52
- active: "#726F6B",
53
- },
54
- "surface-1": {
55
- DEFAULT: "#B1AEAA",
56
- foreground: "#2B2A28",
57
- hover: "#726F6B",
58
- active: "#5A5855",
59
- },
60
- },
61
- single: {
62
- foreground: "#2B2A28",
63
- border: {
64
- DEFAULT: "#B1AEAA",
65
- },
66
- input: {
67
- DEFAULT: "#fff",
68
- hover: "#F4F3F3",
69
- },
70
- ring: "color-mix(in srgb, #13BF89 20%, transparent)",
71
- },
72
- },
73
- },
74
- },
75
- dark: {
76
- colors: {
77
- intent: {
78
- primary: {
79
- DEFAULT: colors.zinc[200], // zinc-200 (neutral)
80
- foreground: colors.black,
81
- },
82
- accent: {
83
- DEFAULT: colors.amber[400], // amber-400
84
- foreground: colors.black,
85
- },
86
- destructive: {
87
- DEFAULT: colors.rose[500], // rose-500
88
- foreground: colors.white,
89
- },
90
- warning: {
91
- DEFAULT: colors.amber[400], // amber-400
92
- foreground: colors.black,
93
- },
94
- success: {
95
- DEFAULT: colors.teal[500], // teal-500
96
- foreground: colors.white,
97
- },
98
- },
99
- role: {
100
- paired: {
101
- background: {
102
- DEFAULT: colors.zinc[900], // zinc-900 (neutral)
103
- foreground: colors.neutral[50], // zinc-50
104
- },
105
- muted: {
106
- DEFAULT: colors.zinc[800], // zinc-800
107
- foreground: colors.zinc[400], // zinc-400
108
- },
109
- surface: {
110
- DEFAULT: colors.zinc[700], // zinc-700
111
- foreground: colors.zinc[300], // zinc-300
112
- },
113
- "surface-1": {
114
- DEFAULT: colors.zinc[600], // zinc-600
115
- foreground: colors.zinc[200], // zinc-200
116
- },
117
- },
118
- single: {
119
- foreground: colors.neutral[50], // zinc-50
120
- border: {
121
- DEFAULT: colors.zinc[700], // zinc-700
122
- },
123
- input: {
124
- DEFAULT: colors.zinc[900], // zinc-900
125
- hover: colors.zinc[800], // zinc-800
126
- },
127
- ring: `color-mix(in srgb, ${colors.zinc[400]} 25%, transparent)`, // zinc-400
128
- },
129
- },
130
- },
131
- },
132
- };
133
- export default theme;