@tide-tds/foundation 0.1.0 → 0.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 (21) hide show
  1. package/dist/cli.js +699 -0
  2. package/dist/color-css.d.ts +46 -0
  3. package/dist/color-css.js +105 -0
  4. package/dist/color-family.d.ts +54 -0
  5. package/dist/color-family.js +112 -0
  6. package/dist/color-name.d.ts +40 -0
  7. package/dist/color-name.js +61 -0
  8. package/dist/color-slot.d.ts +80 -0
  9. package/dist/color-slot.js +90 -0
  10. package/dist/color.d.ts +4 -4
  11. package/dist/contrast.d.ts +28 -2
  12. package/dist/contrast.js +40 -1
  13. package/dist/index.d.ts +3 -2
  14. package/dist/internal.d.ts +6 -3
  15. package/dist/internal.js +6 -3
  16. package/dist/semantic.d.ts +148 -246
  17. package/dist/semantic.js +102 -243
  18. package/dist/tailwind-merge.js +34 -14
  19. package/dist/tailwind.css +9 -0
  20. package/dist/tokens.css +359 -89
  21. package/package.json +8 -1
package/dist/tokens.css CHANGED
@@ -148,65 +148,128 @@
148
148
  :root,
149
149
  [data-theme="light"] {
150
150
  color-scheme: light;
151
+ --tide-blue-solid: var(--tide-color-blue-600);
152
+ --tide-blue-solid-hover: var(--tide-color-blue-700);
153
+ --tide-blue-solid-active: var(--tide-color-blue-800);
154
+ --tide-blue-subtle: var(--tide-color-blue-50);
155
+ --tide-blue-subtle-hover: var(--tide-color-blue-100);
156
+ --tide-blue-subtle-active: var(--tide-color-blue-200);
157
+ --tide-blue-text: var(--tide-color-blue-800);
158
+ --tide-blue-border: var(--tide-color-blue-600);
159
+ --tide-blue-on-solid: var(--tide-color-white);
160
+ --tide-gray-solid: var(--tide-color-gray-600);
161
+ --tide-gray-solid-hover: var(--tide-color-gray-700);
162
+ --tide-gray-solid-active: var(--tide-color-gray-800);
163
+ --tide-gray-subtle: var(--tide-color-gray-50);
164
+ --tide-gray-subtle-hover: var(--tide-color-gray-100);
165
+ --tide-gray-subtle-active: var(--tide-color-gray-200);
166
+ --tide-gray-text: var(--tide-color-gray-800);
167
+ --tide-gray-border: var(--tide-color-gray-600);
168
+ --tide-gray-on-solid: var(--tide-color-white);
169
+ --tide-green-solid: var(--tide-color-green-600);
170
+ --tide-green-solid-hover: var(--tide-color-green-700);
171
+ --tide-green-solid-active: var(--tide-color-green-800);
172
+ --tide-green-subtle: var(--tide-color-green-50);
173
+ --tide-green-subtle-hover: var(--tide-color-green-100);
174
+ --tide-green-subtle-active: var(--tide-color-green-200);
175
+ --tide-green-text: var(--tide-color-green-800);
176
+ --tide-green-border: var(--tide-color-green-600);
177
+ --tide-green-on-solid: var(--tide-color-white);
178
+ --tide-amber-solid: var(--tide-color-amber-600);
179
+ --tide-amber-solid-hover: var(--tide-color-amber-700);
180
+ --tide-amber-solid-active: var(--tide-color-amber-800);
181
+ --tide-amber-subtle: var(--tide-color-amber-50);
182
+ --tide-amber-subtle-hover: var(--tide-color-amber-100);
183
+ --tide-amber-subtle-active: var(--tide-color-amber-200);
184
+ --tide-amber-text: var(--tide-color-amber-800);
185
+ --tide-amber-border: var(--tide-color-amber-600);
186
+ --tide-amber-on-solid: var(--tide-color-white);
187
+ --tide-red-solid: var(--tide-color-red-600);
188
+ --tide-red-solid-hover: var(--tide-color-red-700);
189
+ --tide-red-solid-active: var(--tide-color-red-800);
190
+ --tide-red-subtle: var(--tide-color-red-50);
191
+ --tide-red-subtle-hover: var(--tide-color-red-100);
192
+ --tide-red-subtle-active: var(--tide-color-red-200);
193
+ --tide-red-text: var(--tide-color-red-800);
194
+ --tide-red-border: var(--tide-color-red-600);
195
+ --tide-red-on-solid: var(--tide-color-white);
196
+ --tide-cyan-solid: var(--tide-color-cyan-600);
197
+ --tide-cyan-solid-hover: var(--tide-color-cyan-700);
198
+ --tide-cyan-solid-active: var(--tide-color-cyan-800);
199
+ --tide-cyan-subtle: var(--tide-color-cyan-50);
200
+ --tide-cyan-subtle-hover: var(--tide-color-cyan-100);
201
+ --tide-cyan-subtle-active: var(--tide-color-cyan-200);
202
+ --tide-cyan-text: var(--tide-color-cyan-800);
203
+ --tide-cyan-border: var(--tide-color-cyan-600);
204
+ --tide-cyan-on-solid: var(--tide-color-white);
151
205
  --tide-bg-canvas: var(--tide-color-white);
152
206
  --tide-bg-surface: var(--tide-color-white);
153
207
  --tide-bg-raised: var(--tide-color-white);
154
208
  --tide-bg-disabled: var(--tide-color-gray-100);
155
209
  --tide-bg-overlay: #28292c80;
156
- --tide-bg-neutral-solid: var(--tide-color-gray-600);
157
- --tide-bg-neutral-solid-hover: var(--tide-color-gray-700);
158
- --tide-bg-neutral-solid-active: var(--tide-color-gray-800);
159
- --tide-bg-neutral-subtle: var(--tide-color-gray-50);
160
- --tide-bg-neutral-subtle-hover: var(--tide-color-gray-100);
161
- --tide-bg-neutral-subtle-active: var(--tide-color-gray-200);
162
- --tide-bg-primary-solid: var(--tide-color-blue-600);
163
- --tide-bg-primary-solid-hover: var(--tide-color-blue-700);
164
- --tide-bg-primary-solid-active: var(--tide-color-blue-800);
165
- --tide-bg-primary-subtle: var(--tide-color-blue-50);
166
- --tide-bg-primary-subtle-hover: var(--tide-color-blue-100);
167
- --tide-bg-primary-subtle-active: var(--tide-color-blue-200);
168
- --tide-bg-success-solid: var(--tide-color-green-600);
169
- --tide-bg-success-solid-hover: var(--tide-color-green-700);
170
- --tide-bg-success-solid-active: var(--tide-color-green-800);
171
- --tide-bg-success-subtle: var(--tide-color-green-50);
172
- --tide-bg-success-subtle-hover: var(--tide-color-green-100);
173
- --tide-bg-success-subtle-active: var(--tide-color-green-200);
174
- --tide-bg-warning-solid: var(--tide-color-amber-600);
175
- --tide-bg-warning-solid-hover: var(--tide-color-amber-700);
176
- --tide-bg-warning-solid-active: var(--tide-color-amber-800);
177
- --tide-bg-warning-subtle: var(--tide-color-amber-50);
178
- --tide-bg-warning-subtle-hover: var(--tide-color-amber-100);
179
- --tide-bg-warning-subtle-active: var(--tide-color-amber-200);
180
- --tide-bg-danger-solid: var(--tide-color-red-600);
181
- --tide-bg-danger-solid-hover: var(--tide-color-red-700);
182
- --tide-bg-danger-solid-active: var(--tide-color-red-800);
183
- --tide-bg-danger-subtle: var(--tide-color-red-50);
184
- --tide-bg-danger-subtle-hover: var(--tide-color-red-100);
185
- --tide-bg-danger-subtle-active: var(--tide-color-red-200);
186
- --tide-bg-info-solid: var(--tide-color-cyan-600);
187
- --tide-bg-info-solid-hover: var(--tide-color-cyan-700);
188
- --tide-bg-info-solid-active: var(--tide-color-cyan-800);
189
- --tide-bg-info-subtle: var(--tide-color-cyan-50);
190
- --tide-bg-info-subtle-hover: var(--tide-color-cyan-100);
191
- --tide-bg-info-subtle-active: var(--tide-color-cyan-200);
210
+ --tide-bg-neutral-solid: var(--tide-gray-solid);
211
+ --tide-bg-neutral-solid-hover: var(--tide-gray-solid-hover);
212
+ --tide-bg-neutral-solid-active: var(--tide-gray-solid-active);
213
+ --tide-bg-neutral-subtle: var(--tide-gray-subtle);
214
+ --tide-bg-neutral-subtle-hover: var(--tide-gray-subtle-hover);
215
+ --tide-bg-neutral-subtle-active: var(--tide-gray-subtle-active);
216
+ --tide-bg-primary-solid: var(--tide-blue-solid);
217
+ --tide-bg-primary-solid-hover: var(--tide-blue-solid-hover);
218
+ --tide-bg-primary-solid-active: var(--tide-blue-solid-active);
219
+ --tide-bg-primary-subtle: var(--tide-blue-subtle);
220
+ --tide-bg-primary-subtle-hover: var(--tide-blue-subtle-hover);
221
+ --tide-bg-primary-subtle-active: var(--tide-blue-subtle-active);
222
+ --tide-bg-success-solid: var(--tide-green-solid);
223
+ --tide-bg-success-solid-hover: var(--tide-green-solid-hover);
224
+ --tide-bg-success-solid-active: var(--tide-green-solid-active);
225
+ --tide-bg-success-subtle: var(--tide-green-subtle);
226
+ --tide-bg-success-subtle-hover: var(--tide-green-subtle-hover);
227
+ --tide-bg-success-subtle-active: var(--tide-green-subtle-active);
228
+ --tide-bg-warning-solid: var(--tide-amber-solid);
229
+ --tide-bg-warning-solid-hover: var(--tide-amber-solid-hover);
230
+ --tide-bg-warning-solid-active: var(--tide-amber-solid-active);
231
+ --tide-bg-warning-subtle: var(--tide-amber-subtle);
232
+ --tide-bg-warning-subtle-hover: var(--tide-amber-subtle-hover);
233
+ --tide-bg-warning-subtle-active: var(--tide-amber-subtle-active);
234
+ --tide-bg-danger-solid: var(--tide-red-solid);
235
+ --tide-bg-danger-solid-hover: var(--tide-red-solid-hover);
236
+ --tide-bg-danger-solid-active: var(--tide-red-solid-active);
237
+ --tide-bg-danger-subtle: var(--tide-red-subtle);
238
+ --tide-bg-danger-subtle-hover: var(--tide-red-subtle-hover);
239
+ --tide-bg-danger-subtle-active: var(--tide-red-subtle-active);
240
+ --tide-bg-info-solid: var(--tide-cyan-solid);
241
+ --tide-bg-info-solid-hover: var(--tide-cyan-solid-hover);
242
+ --tide-bg-info-solid-active: var(--tide-cyan-solid-active);
243
+ --tide-bg-info-subtle: var(--tide-cyan-subtle);
244
+ --tide-bg-info-subtle-hover: var(--tide-cyan-subtle-hover);
245
+ --tide-bg-info-subtle-active: var(--tide-cyan-subtle-active);
192
246
  --tide-text-default: var(--tide-color-gray-900);
193
247
  --tide-text-muted: var(--tide-color-gray-600);
194
248
  --tide-text-disabled: var(--tide-color-gray-400);
195
249
  --tide-text-on-solid: var(--tide-color-white);
196
- --tide-text-primary: var(--tide-color-blue-800);
197
- --tide-text-success: var(--tide-color-green-800);
198
- --tide-text-warning: var(--tide-color-amber-800);
199
- --tide-text-danger: var(--tide-color-red-800);
200
- --tide-text-info: var(--tide-color-cyan-800);
250
+ --tide-text-primary: var(--tide-blue-text);
251
+ --tide-text-success: var(--tide-green-text);
252
+ --tide-text-warning: var(--tide-amber-text);
253
+ --tide-text-danger: var(--tide-red-text);
254
+ --tide-text-info: var(--tide-cyan-text);
201
255
  --tide-border-default: var(--tide-color-gray-200);
202
256
  --tide-border-strong: var(--tide-color-gray-500);
203
257
  --tide-border-raised: transparent;
204
- --tide-border-primary: var(--tide-color-blue-600);
205
- --tide-border-success: var(--tide-color-green-600);
206
- --tide-border-warning: var(--tide-color-amber-600);
207
- --tide-border-danger: var(--tide-color-red-600);
208
- --tide-border-info: var(--tide-color-cyan-600);
258
+ --tide-border-primary: var(--tide-blue-border);
259
+ --tide-border-success: var(--tide-green-border);
260
+ --tide-border-warning: var(--tide-amber-border);
261
+ --tide-border-danger: var(--tide-red-border);
262
+ --tide-border-info: var(--tide-cyan-border);
209
263
  --tide-outline-focus: var(--tide-color-blue-600);
264
+ --tide-accent-solid: var(--tide-bg-primary-solid);
265
+ --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
266
+ --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
267
+ --tide-accent-subtle: var(--tide-bg-primary-subtle);
268
+ --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
269
+ --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
270
+ --tide-accent-text: var(--tide-text-primary);
271
+ --tide-accent-border: var(--tide-border-primary);
272
+ --tide-accent-on-solid: var(--tide-text-on-solid);
210
273
  --tide-shadow-color: #28292c14;
211
274
  --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
212
275
  --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
@@ -215,67 +278,274 @@
215
278
 
216
279
  [data-theme="dark"] {
217
280
  color-scheme: dark;
281
+ --tide-blue-solid: var(--tide-color-blue-600);
282
+ --tide-blue-solid-hover: var(--tide-color-blue-700);
283
+ --tide-blue-solid-active: var(--tide-color-blue-800);
284
+ --tide-blue-subtle: var(--tide-color-blue-950);
285
+ --tide-blue-subtle-hover: var(--tide-color-blue-900);
286
+ --tide-blue-subtle-active: var(--tide-color-blue-800);
287
+ --tide-blue-text: var(--tide-color-blue-200);
288
+ --tide-blue-border: var(--tide-color-blue-400);
289
+ --tide-blue-on-solid: var(--tide-color-white);
290
+ --tide-gray-solid: var(--tide-color-gray-600);
291
+ --tide-gray-solid-hover: var(--tide-color-gray-700);
292
+ --tide-gray-solid-active: var(--tide-color-gray-800);
293
+ --tide-gray-subtle: var(--tide-color-gray-950);
294
+ --tide-gray-subtle-hover: var(--tide-color-gray-900);
295
+ --tide-gray-subtle-active: var(--tide-color-gray-800);
296
+ --tide-gray-text: var(--tide-color-gray-200);
297
+ --tide-gray-border: var(--tide-color-gray-400);
298
+ --tide-gray-on-solid: var(--tide-color-white);
299
+ --tide-green-solid: var(--tide-color-green-600);
300
+ --tide-green-solid-hover: var(--tide-color-green-700);
301
+ --tide-green-solid-active: var(--tide-color-green-800);
302
+ --tide-green-subtle: var(--tide-color-green-950);
303
+ --tide-green-subtle-hover: var(--tide-color-green-900);
304
+ --tide-green-subtle-active: var(--tide-color-green-800);
305
+ --tide-green-text: var(--tide-color-green-200);
306
+ --tide-green-border: var(--tide-color-green-400);
307
+ --tide-green-on-solid: var(--tide-color-white);
308
+ --tide-amber-solid: var(--tide-color-amber-600);
309
+ --tide-amber-solid-hover: var(--tide-color-amber-700);
310
+ --tide-amber-solid-active: var(--tide-color-amber-800);
311
+ --tide-amber-subtle: var(--tide-color-amber-950);
312
+ --tide-amber-subtle-hover: var(--tide-color-amber-900);
313
+ --tide-amber-subtle-active: var(--tide-color-amber-800);
314
+ --tide-amber-text: var(--tide-color-amber-200);
315
+ --tide-amber-border: var(--tide-color-amber-400);
316
+ --tide-amber-on-solid: var(--tide-color-white);
317
+ --tide-red-solid: var(--tide-color-red-600);
318
+ --tide-red-solid-hover: var(--tide-color-red-700);
319
+ --tide-red-solid-active: var(--tide-color-red-800);
320
+ --tide-red-subtle: var(--tide-color-red-950);
321
+ --tide-red-subtle-hover: var(--tide-color-red-900);
322
+ --tide-red-subtle-active: var(--tide-color-red-800);
323
+ --tide-red-text: var(--tide-color-red-200);
324
+ --tide-red-border: var(--tide-color-red-400);
325
+ --tide-red-on-solid: var(--tide-color-white);
326
+ --tide-cyan-solid: var(--tide-color-cyan-600);
327
+ --tide-cyan-solid-hover: var(--tide-color-cyan-700);
328
+ --tide-cyan-solid-active: var(--tide-color-cyan-800);
329
+ --tide-cyan-subtle: var(--tide-color-cyan-950);
330
+ --tide-cyan-subtle-hover: var(--tide-color-cyan-900);
331
+ --tide-cyan-subtle-active: var(--tide-color-cyan-800);
332
+ --tide-cyan-text: var(--tide-color-cyan-200);
333
+ --tide-cyan-border: var(--tide-color-cyan-400);
334
+ --tide-cyan-on-solid: var(--tide-color-white);
218
335
  --tide-bg-canvas: var(--tide-color-gray-950);
219
336
  --tide-bg-surface: var(--tide-color-gray-950);
220
337
  --tide-bg-raised: var(--tide-color-gray-900);
221
338
  --tide-bg-disabled: var(--tide-color-gray-900);
222
339
  --tide-bg-overlay: #28292cb3;
223
- --tide-bg-neutral-solid: var(--tide-color-gray-600);
224
- --tide-bg-neutral-solid-hover: var(--tide-color-gray-700);
225
- --tide-bg-neutral-solid-active: var(--tide-color-gray-800);
340
+ --tide-bg-neutral-solid: var(--tide-gray-solid);
341
+ --tide-bg-neutral-solid-hover: var(--tide-gray-solid-hover);
342
+ --tide-bg-neutral-solid-active: var(--tide-gray-solid-active);
226
343
  --tide-bg-neutral-subtle: var(--tide-color-gray-900);
227
344
  --tide-bg-neutral-subtle-hover: var(--tide-color-gray-800);
228
345
  --tide-bg-neutral-subtle-active: var(--tide-color-gray-700);
229
- --tide-bg-primary-solid: var(--tide-color-blue-600);
230
- --tide-bg-primary-solid-hover: var(--tide-color-blue-700);
231
- --tide-bg-primary-solid-active: var(--tide-color-blue-800);
232
- --tide-bg-primary-subtle: var(--tide-color-blue-950);
233
- --tide-bg-primary-subtle-hover: var(--tide-color-blue-900);
234
- --tide-bg-primary-subtle-active: var(--tide-color-blue-800);
235
- --tide-bg-success-solid: var(--tide-color-green-600);
236
- --tide-bg-success-solid-hover: var(--tide-color-green-700);
237
- --tide-bg-success-solid-active: var(--tide-color-green-800);
238
- --tide-bg-success-subtle: var(--tide-color-green-950);
239
- --tide-bg-success-subtle-hover: var(--tide-color-green-900);
240
- --tide-bg-success-subtle-active: var(--tide-color-green-800);
241
- --tide-bg-warning-solid: var(--tide-color-amber-600);
242
- --tide-bg-warning-solid-hover: var(--tide-color-amber-700);
243
- --tide-bg-warning-solid-active: var(--tide-color-amber-800);
244
- --tide-bg-warning-subtle: var(--tide-color-amber-950);
245
- --tide-bg-warning-subtle-hover: var(--tide-color-amber-900);
246
- --tide-bg-warning-subtle-active: var(--tide-color-amber-800);
247
- --tide-bg-danger-solid: var(--tide-color-red-600);
248
- --tide-bg-danger-solid-hover: var(--tide-color-red-700);
249
- --tide-bg-danger-solid-active: var(--tide-color-red-800);
250
- --tide-bg-danger-subtle: var(--tide-color-red-950);
251
- --tide-bg-danger-subtle-hover: var(--tide-color-red-900);
252
- --tide-bg-danger-subtle-active: var(--tide-color-red-800);
253
- --tide-bg-info-solid: var(--tide-color-cyan-600);
254
- --tide-bg-info-solid-hover: var(--tide-color-cyan-700);
255
- --tide-bg-info-solid-active: var(--tide-color-cyan-800);
256
- --tide-bg-info-subtle: var(--tide-color-cyan-950);
257
- --tide-bg-info-subtle-hover: var(--tide-color-cyan-900);
258
- --tide-bg-info-subtle-active: var(--tide-color-cyan-800);
346
+ --tide-bg-primary-solid: var(--tide-blue-solid);
347
+ --tide-bg-primary-solid-hover: var(--tide-blue-solid-hover);
348
+ --tide-bg-primary-solid-active: var(--tide-blue-solid-active);
349
+ --tide-bg-primary-subtle: var(--tide-blue-subtle);
350
+ --tide-bg-primary-subtle-hover: var(--tide-blue-subtle-hover);
351
+ --tide-bg-primary-subtle-active: var(--tide-blue-subtle-active);
352
+ --tide-bg-success-solid: var(--tide-green-solid);
353
+ --tide-bg-success-solid-hover: var(--tide-green-solid-hover);
354
+ --tide-bg-success-solid-active: var(--tide-green-solid-active);
355
+ --tide-bg-success-subtle: var(--tide-green-subtle);
356
+ --tide-bg-success-subtle-hover: var(--tide-green-subtle-hover);
357
+ --tide-bg-success-subtle-active: var(--tide-green-subtle-active);
358
+ --tide-bg-warning-solid: var(--tide-amber-solid);
359
+ --tide-bg-warning-solid-hover: var(--tide-amber-solid-hover);
360
+ --tide-bg-warning-solid-active: var(--tide-amber-solid-active);
361
+ --tide-bg-warning-subtle: var(--tide-amber-subtle);
362
+ --tide-bg-warning-subtle-hover: var(--tide-amber-subtle-hover);
363
+ --tide-bg-warning-subtle-active: var(--tide-amber-subtle-active);
364
+ --tide-bg-danger-solid: var(--tide-red-solid);
365
+ --tide-bg-danger-solid-hover: var(--tide-red-solid-hover);
366
+ --tide-bg-danger-solid-active: var(--tide-red-solid-active);
367
+ --tide-bg-danger-subtle: var(--tide-red-subtle);
368
+ --tide-bg-danger-subtle-hover: var(--tide-red-subtle-hover);
369
+ --tide-bg-danger-subtle-active: var(--tide-red-subtle-active);
370
+ --tide-bg-info-solid: var(--tide-cyan-solid);
371
+ --tide-bg-info-solid-hover: var(--tide-cyan-solid-hover);
372
+ --tide-bg-info-solid-active: var(--tide-cyan-solid-active);
373
+ --tide-bg-info-subtle: var(--tide-cyan-subtle);
374
+ --tide-bg-info-subtle-hover: var(--tide-cyan-subtle-hover);
375
+ --tide-bg-info-subtle-active: var(--tide-cyan-subtle-active);
259
376
  --tide-text-default: var(--tide-color-gray-50);
260
377
  --tide-text-muted: var(--tide-color-gray-300);
261
378
  --tide-text-disabled: var(--tide-color-gray-600);
262
379
  --tide-text-on-solid: var(--tide-color-white);
263
- --tide-text-primary: var(--tide-color-blue-200);
264
- --tide-text-success: var(--tide-color-green-200);
265
- --tide-text-warning: var(--tide-color-amber-200);
266
- --tide-text-danger: var(--tide-color-red-200);
267
- --tide-text-info: var(--tide-color-cyan-200);
380
+ --tide-text-primary: var(--tide-blue-text);
381
+ --tide-text-success: var(--tide-green-text);
382
+ --tide-text-warning: var(--tide-amber-text);
383
+ --tide-text-danger: var(--tide-red-text);
384
+ --tide-text-info: var(--tide-cyan-text);
268
385
  --tide-border-default: var(--tide-color-gray-800);
269
386
  --tide-border-strong: var(--tide-color-gray-400);
270
387
  --tide-border-raised: var(--tide-color-gray-800);
271
- --tide-border-primary: var(--tide-color-blue-400);
272
- --tide-border-success: var(--tide-color-green-400);
273
- --tide-border-warning: var(--tide-color-amber-400);
274
- --tide-border-danger: var(--tide-color-red-400);
275
- --tide-border-info: var(--tide-color-cyan-400);
388
+ --tide-border-primary: var(--tide-blue-border);
389
+ --tide-border-success: var(--tide-green-border);
390
+ --tide-border-warning: var(--tide-amber-border);
391
+ --tide-border-danger: var(--tide-red-border);
392
+ --tide-border-info: var(--tide-cyan-border);
276
393
  --tide-outline-focus: var(--tide-color-blue-400);
394
+ --tide-accent-solid: var(--tide-bg-primary-solid);
395
+ --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
396
+ --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
397
+ --tide-accent-subtle: var(--tide-bg-primary-subtle);
398
+ --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
399
+ --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
400
+ --tide-accent-text: var(--tide-text-primary);
401
+ --tide-accent-border: var(--tide-border-primary);
402
+ --tide-accent-on-solid: var(--tide-text-on-solid);
277
403
  --tide-shadow-color: #0000004d;
278
404
  --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
279
405
  --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
280
406
  --tide-shadow-lg: 0 2px 6px -1px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
281
407
  }
408
+
409
+ [data-color="neutral"] {
410
+ --tide-accent-solid: var(--tide-bg-neutral-solid);
411
+ --tide-accent-solid-hover: var(--tide-bg-neutral-solid-hover);
412
+ --tide-accent-solid-active: var(--tide-bg-neutral-solid-active);
413
+ --tide-accent-subtle: var(--tide-bg-neutral-subtle);
414
+ --tide-accent-subtle-hover: var(--tide-bg-neutral-subtle-hover);
415
+ --tide-accent-subtle-active: var(--tide-bg-neutral-subtle-active);
416
+ --tide-accent-text: var(--tide-text-default);
417
+ --tide-accent-border: var(--tide-border-strong);
418
+ --tide-accent-on-solid: var(--tide-text-on-solid);
419
+ }
420
+
421
+ [data-color="primary"] {
422
+ --tide-accent-solid: var(--tide-bg-primary-solid);
423
+ --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
424
+ --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
425
+ --tide-accent-subtle: var(--tide-bg-primary-subtle);
426
+ --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
427
+ --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
428
+ --tide-accent-text: var(--tide-text-primary);
429
+ --tide-accent-border: var(--tide-border-primary);
430
+ --tide-accent-on-solid: var(--tide-text-on-solid);
431
+ }
432
+
433
+ [data-color="success"] {
434
+ --tide-accent-solid: var(--tide-bg-success-solid);
435
+ --tide-accent-solid-hover: var(--tide-bg-success-solid-hover);
436
+ --tide-accent-solid-active: var(--tide-bg-success-solid-active);
437
+ --tide-accent-subtle: var(--tide-bg-success-subtle);
438
+ --tide-accent-subtle-hover: var(--tide-bg-success-subtle-hover);
439
+ --tide-accent-subtle-active: var(--tide-bg-success-subtle-active);
440
+ --tide-accent-text: var(--tide-text-success);
441
+ --tide-accent-border: var(--tide-border-success);
442
+ --tide-accent-on-solid: var(--tide-text-on-solid);
443
+ }
444
+
445
+ [data-color="warning"] {
446
+ --tide-accent-solid: var(--tide-bg-warning-solid);
447
+ --tide-accent-solid-hover: var(--tide-bg-warning-solid-hover);
448
+ --tide-accent-solid-active: var(--tide-bg-warning-solid-active);
449
+ --tide-accent-subtle: var(--tide-bg-warning-subtle);
450
+ --tide-accent-subtle-hover: var(--tide-bg-warning-subtle-hover);
451
+ --tide-accent-subtle-active: var(--tide-bg-warning-subtle-active);
452
+ --tide-accent-text: var(--tide-text-warning);
453
+ --tide-accent-border: var(--tide-border-warning);
454
+ --tide-accent-on-solid: var(--tide-text-on-solid);
455
+ }
456
+
457
+ [data-color="danger"] {
458
+ --tide-accent-solid: var(--tide-bg-danger-solid);
459
+ --tide-accent-solid-hover: var(--tide-bg-danger-solid-hover);
460
+ --tide-accent-solid-active: var(--tide-bg-danger-solid-active);
461
+ --tide-accent-subtle: var(--tide-bg-danger-subtle);
462
+ --tide-accent-subtle-hover: var(--tide-bg-danger-subtle-hover);
463
+ --tide-accent-subtle-active: var(--tide-bg-danger-subtle-active);
464
+ --tide-accent-text: var(--tide-text-danger);
465
+ --tide-accent-border: var(--tide-border-danger);
466
+ --tide-accent-on-solid: var(--tide-text-on-solid);
467
+ }
468
+
469
+ [data-color="info"] {
470
+ --tide-accent-solid: var(--tide-bg-info-solid);
471
+ --tide-accent-solid-hover: var(--tide-bg-info-solid-hover);
472
+ --tide-accent-solid-active: var(--tide-bg-info-solid-active);
473
+ --tide-accent-subtle: var(--tide-bg-info-subtle);
474
+ --tide-accent-subtle-hover: var(--tide-bg-info-subtle-hover);
475
+ --tide-accent-subtle-active: var(--tide-bg-info-subtle-active);
476
+ --tide-accent-text: var(--tide-text-info);
477
+ --tide-accent-border: var(--tide-border-info);
478
+ --tide-accent-on-solid: var(--tide-text-on-solid);
479
+ }
480
+
481
+ [data-color="blue"] {
482
+ --tide-accent-solid: var(--tide-blue-solid);
483
+ --tide-accent-solid-hover: var(--tide-blue-solid-hover);
484
+ --tide-accent-solid-active: var(--tide-blue-solid-active);
485
+ --tide-accent-subtle: var(--tide-blue-subtle);
486
+ --tide-accent-subtle-hover: var(--tide-blue-subtle-hover);
487
+ --tide-accent-subtle-active: var(--tide-blue-subtle-active);
488
+ --tide-accent-text: var(--tide-blue-text);
489
+ --tide-accent-border: var(--tide-blue-border);
490
+ --tide-accent-on-solid: var(--tide-blue-on-solid);
491
+ }
492
+
493
+ [data-color="gray"] {
494
+ --tide-accent-solid: var(--tide-gray-solid);
495
+ --tide-accent-solid-hover: var(--tide-gray-solid-hover);
496
+ --tide-accent-solid-active: var(--tide-gray-solid-active);
497
+ --tide-accent-subtle: var(--tide-gray-subtle);
498
+ --tide-accent-subtle-hover: var(--tide-gray-subtle-hover);
499
+ --tide-accent-subtle-active: var(--tide-gray-subtle-active);
500
+ --tide-accent-text: var(--tide-gray-text);
501
+ --tide-accent-border: var(--tide-gray-border);
502
+ --tide-accent-on-solid: var(--tide-gray-on-solid);
503
+ }
504
+
505
+ [data-color="green"] {
506
+ --tide-accent-solid: var(--tide-green-solid);
507
+ --tide-accent-solid-hover: var(--tide-green-solid-hover);
508
+ --tide-accent-solid-active: var(--tide-green-solid-active);
509
+ --tide-accent-subtle: var(--tide-green-subtle);
510
+ --tide-accent-subtle-hover: var(--tide-green-subtle-hover);
511
+ --tide-accent-subtle-active: var(--tide-green-subtle-active);
512
+ --tide-accent-text: var(--tide-green-text);
513
+ --tide-accent-border: var(--tide-green-border);
514
+ --tide-accent-on-solid: var(--tide-green-on-solid);
515
+ }
516
+
517
+ [data-color="amber"] {
518
+ --tide-accent-solid: var(--tide-amber-solid);
519
+ --tide-accent-solid-hover: var(--tide-amber-solid-hover);
520
+ --tide-accent-solid-active: var(--tide-amber-solid-active);
521
+ --tide-accent-subtle: var(--tide-amber-subtle);
522
+ --tide-accent-subtle-hover: var(--tide-amber-subtle-hover);
523
+ --tide-accent-subtle-active: var(--tide-amber-subtle-active);
524
+ --tide-accent-text: var(--tide-amber-text);
525
+ --tide-accent-border: var(--tide-amber-border);
526
+ --tide-accent-on-solid: var(--tide-amber-on-solid);
527
+ }
528
+
529
+ [data-color="red"] {
530
+ --tide-accent-solid: var(--tide-red-solid);
531
+ --tide-accent-solid-hover: var(--tide-red-solid-hover);
532
+ --tide-accent-solid-active: var(--tide-red-solid-active);
533
+ --tide-accent-subtle: var(--tide-red-subtle);
534
+ --tide-accent-subtle-hover: var(--tide-red-subtle-hover);
535
+ --tide-accent-subtle-active: var(--tide-red-subtle-active);
536
+ --tide-accent-text: var(--tide-red-text);
537
+ --tide-accent-border: var(--tide-red-border);
538
+ --tide-accent-on-solid: var(--tide-red-on-solid);
539
+ }
540
+
541
+ [data-color="cyan"] {
542
+ --tide-accent-solid: var(--tide-cyan-solid);
543
+ --tide-accent-solid-hover: var(--tide-cyan-solid-hover);
544
+ --tide-accent-solid-active: var(--tide-cyan-solid-active);
545
+ --tide-accent-subtle: var(--tide-cyan-subtle);
546
+ --tide-accent-subtle-hover: var(--tide-cyan-subtle-hover);
547
+ --tide-accent-subtle-active: var(--tide-cyan-subtle-active);
548
+ --tide-accent-text: var(--tide-cyan-text);
549
+ --tide-accent-border: var(--tide-cyan-border);
550
+ --tide-accent-on-solid: var(--tide-cyan-on-solid);
551
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tide-tds/foundation",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Tide 디자인 시스템의 Token과 CSS",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -8,6 +8,9 @@
8
8
  "url": "git+https://github.com/chane81/tide-design-system.git",
9
9
  "directory": "packages/foundation"
10
10
  },
11
+ "bin": {
12
+ "tide-color": "./dist/cli.js"
13
+ },
11
14
  "files": [
12
15
  "dist"
13
16
  ],
@@ -24,6 +27,10 @@
24
27
  "types": "./dist/internal.d.ts",
25
28
  "default": "./dist/internal.js"
26
29
  },
30
+ "./color-family": {
31
+ "types": "./dist/color-family.d.ts",
32
+ "default": "./dist/color-family.js"
33
+ },
27
34
  "./tokens.css": "./dist/tokens.css",
28
35
  "./tailwind.css": "./dist/tailwind.css",
29
36
  "./tailwind-merge": {