@classic-homes/theme-tokens 0.1.20 → 0.1.22
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.
- package/dist/index.d.mts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +28 -0
- package/dist/index.mjs +28 -0
- package/dist/tokens.css +14 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -228,6 +228,7 @@ declare const layoutColors: {
|
|
|
228
228
|
declare const semanticColors: {
|
|
229
229
|
readonly light: {
|
|
230
230
|
readonly background: "#ffffff";
|
|
231
|
+
readonly backgroundHover: "#f5f5f5";
|
|
231
232
|
readonly foreground: "#4f4f4f";
|
|
232
233
|
readonly card: "#ffffff";
|
|
233
234
|
readonly cardForeground: "#4f4f4f";
|
|
@@ -235,14 +236,19 @@ declare const semanticColors: {
|
|
|
235
236
|
readonly popoverForeground: "#4f4f4f";
|
|
236
237
|
readonly primary: "#a91c22";
|
|
237
238
|
readonly primaryForeground: "#ffffff";
|
|
239
|
+
readonly primaryHover: "#8a171c";
|
|
238
240
|
readonly secondary: "#eaebe6";
|
|
239
241
|
readonly secondaryForeground: "#4f4f4f";
|
|
242
|
+
readonly secondaryHover: "#d4d6cc";
|
|
240
243
|
readonly muted: "#eaebe6";
|
|
241
244
|
readonly mutedForeground: "#7a7a7a";
|
|
245
|
+
readonly mutedHover: "#d4d6cc";
|
|
242
246
|
readonly accent: "#3ba4a7";
|
|
243
247
|
readonly accentForeground: "#ffffff";
|
|
248
|
+
readonly accentHover: "#319295";
|
|
244
249
|
readonly destructive: "#e02726";
|
|
245
250
|
readonly destructiveForeground: "#ffffff";
|
|
251
|
+
readonly destructiveHover: "#d92626";
|
|
246
252
|
readonly border: "#000000";
|
|
247
253
|
readonly input: "#000000";
|
|
248
254
|
readonly ring: "#a91c22";
|
|
@@ -261,6 +267,7 @@ declare const semanticColors: {
|
|
|
261
267
|
readonly primaryForeground: "#ffffff";
|
|
262
268
|
readonly accent: "#dddfd5";
|
|
263
269
|
readonly accentForeground: "#4f4f4f";
|
|
270
|
+
readonly accentHover: "#c8cbbe";
|
|
264
271
|
readonly border: "#000000";
|
|
265
272
|
readonly ring: "#a91c22";
|
|
266
273
|
};
|
|
@@ -274,6 +281,7 @@ declare const semanticColors: {
|
|
|
274
281
|
};
|
|
275
282
|
readonly dark: {
|
|
276
283
|
readonly background: "#292424";
|
|
284
|
+
readonly backgroundHover: "#333333";
|
|
277
285
|
readonly foreground: "#f3f4f6";
|
|
278
286
|
readonly card: "#333333";
|
|
279
287
|
readonly cardForeground: "#f3f4f6";
|
|
@@ -281,14 +289,19 @@ declare const semanticColors: {
|
|
|
281
289
|
readonly popoverForeground: "#f3f4f6";
|
|
282
290
|
readonly primary: "#f87171";
|
|
283
291
|
readonly primaryForeground: "#292424";
|
|
292
|
+
readonly primaryHover: "#f9a8a8";
|
|
284
293
|
readonly secondary: "#54574e";
|
|
285
294
|
readonly secondaryForeground: "#f3f4f6";
|
|
295
|
+
readonly secondaryHover: "#5c6156";
|
|
286
296
|
readonly muted: "#4d4d4d";
|
|
287
297
|
readonly mutedForeground: "#9ca3af";
|
|
298
|
+
readonly mutedHover: "#5c5c5c";
|
|
288
299
|
readonly accent: "#67cccf";
|
|
289
300
|
readonly accentForeground: "#292424";
|
|
301
|
+
readonly accentHover: "#8fd9dc";
|
|
290
302
|
readonly destructive: "#e02726";
|
|
291
303
|
readonly destructiveForeground: "#ffffff";
|
|
304
|
+
readonly destructiveHover: "#f87171";
|
|
292
305
|
readonly border: "#9ca3af";
|
|
293
306
|
readonly input: "#9ca3af";
|
|
294
307
|
readonly ring: "#f87171";
|
|
@@ -307,6 +320,7 @@ declare const semanticColors: {
|
|
|
307
320
|
readonly primaryForeground: "#292424";
|
|
308
321
|
readonly accent: "#4d4d4d";
|
|
309
322
|
readonly accentForeground: "#f3f4f6";
|
|
323
|
+
readonly accentHover: "#5c5c5c";
|
|
310
324
|
readonly border: "#9ca3af";
|
|
311
325
|
readonly ring: "#f87171";
|
|
312
326
|
};
|
|
@@ -681,6 +695,7 @@ declare const tokens: {
|
|
|
681
695
|
readonly semanticColors: {
|
|
682
696
|
readonly light: {
|
|
683
697
|
readonly background: "#ffffff";
|
|
698
|
+
readonly backgroundHover: "#f5f5f5";
|
|
684
699
|
readonly foreground: "#4f4f4f";
|
|
685
700
|
readonly card: "#ffffff";
|
|
686
701
|
readonly cardForeground: "#4f4f4f";
|
|
@@ -688,14 +703,19 @@ declare const tokens: {
|
|
|
688
703
|
readonly popoverForeground: "#4f4f4f";
|
|
689
704
|
readonly primary: "#a91c22";
|
|
690
705
|
readonly primaryForeground: "#ffffff";
|
|
706
|
+
readonly primaryHover: "#8a171c";
|
|
691
707
|
readonly secondary: "#eaebe6";
|
|
692
708
|
readonly secondaryForeground: "#4f4f4f";
|
|
709
|
+
readonly secondaryHover: "#d4d6cc";
|
|
693
710
|
readonly muted: "#eaebe6";
|
|
694
711
|
readonly mutedForeground: "#7a7a7a";
|
|
712
|
+
readonly mutedHover: "#d4d6cc";
|
|
695
713
|
readonly accent: "#3ba4a7";
|
|
696
714
|
readonly accentForeground: "#ffffff";
|
|
715
|
+
readonly accentHover: "#319295";
|
|
697
716
|
readonly destructive: "#e02726";
|
|
698
717
|
readonly destructiveForeground: "#ffffff";
|
|
718
|
+
readonly destructiveHover: "#d92626";
|
|
699
719
|
readonly border: "#000000";
|
|
700
720
|
readonly input: "#000000";
|
|
701
721
|
readonly ring: "#a91c22";
|
|
@@ -714,6 +734,7 @@ declare const tokens: {
|
|
|
714
734
|
readonly primaryForeground: "#ffffff";
|
|
715
735
|
readonly accent: "#dddfd5";
|
|
716
736
|
readonly accentForeground: "#4f4f4f";
|
|
737
|
+
readonly accentHover: "#c8cbbe";
|
|
717
738
|
readonly border: "#000000";
|
|
718
739
|
readonly ring: "#a91c22";
|
|
719
740
|
};
|
|
@@ -727,6 +748,7 @@ declare const tokens: {
|
|
|
727
748
|
};
|
|
728
749
|
readonly dark: {
|
|
729
750
|
readonly background: "#292424";
|
|
751
|
+
readonly backgroundHover: "#333333";
|
|
730
752
|
readonly foreground: "#f3f4f6";
|
|
731
753
|
readonly card: "#333333";
|
|
732
754
|
readonly cardForeground: "#f3f4f6";
|
|
@@ -734,14 +756,19 @@ declare const tokens: {
|
|
|
734
756
|
readonly popoverForeground: "#f3f4f6";
|
|
735
757
|
readonly primary: "#f87171";
|
|
736
758
|
readonly primaryForeground: "#292424";
|
|
759
|
+
readonly primaryHover: "#f9a8a8";
|
|
737
760
|
readonly secondary: "#54574e";
|
|
738
761
|
readonly secondaryForeground: "#f3f4f6";
|
|
762
|
+
readonly secondaryHover: "#5c6156";
|
|
739
763
|
readonly muted: "#4d4d4d";
|
|
740
764
|
readonly mutedForeground: "#9ca3af";
|
|
765
|
+
readonly mutedHover: "#5c5c5c";
|
|
741
766
|
readonly accent: "#67cccf";
|
|
742
767
|
readonly accentForeground: "#292424";
|
|
768
|
+
readonly accentHover: "#8fd9dc";
|
|
743
769
|
readonly destructive: "#e02726";
|
|
744
770
|
readonly destructiveForeground: "#ffffff";
|
|
771
|
+
readonly destructiveHover: "#f87171";
|
|
745
772
|
readonly border: "#9ca3af";
|
|
746
773
|
readonly input: "#9ca3af";
|
|
747
774
|
readonly ring: "#f87171";
|
|
@@ -760,6 +787,7 @@ declare const tokens: {
|
|
|
760
787
|
readonly primaryForeground: "#292424";
|
|
761
788
|
readonly accent: "#4d4d4d";
|
|
762
789
|
readonly accentForeground: "#f3f4f6";
|
|
790
|
+
readonly accentHover: "#5c5c5c";
|
|
763
791
|
readonly border: "#9ca3af";
|
|
764
792
|
readonly ring: "#f87171";
|
|
765
793
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -228,6 +228,7 @@ declare const layoutColors: {
|
|
|
228
228
|
declare const semanticColors: {
|
|
229
229
|
readonly light: {
|
|
230
230
|
readonly background: "#ffffff";
|
|
231
|
+
readonly backgroundHover: "#f5f5f5";
|
|
231
232
|
readonly foreground: "#4f4f4f";
|
|
232
233
|
readonly card: "#ffffff";
|
|
233
234
|
readonly cardForeground: "#4f4f4f";
|
|
@@ -235,14 +236,19 @@ declare const semanticColors: {
|
|
|
235
236
|
readonly popoverForeground: "#4f4f4f";
|
|
236
237
|
readonly primary: "#a91c22";
|
|
237
238
|
readonly primaryForeground: "#ffffff";
|
|
239
|
+
readonly primaryHover: "#8a171c";
|
|
238
240
|
readonly secondary: "#eaebe6";
|
|
239
241
|
readonly secondaryForeground: "#4f4f4f";
|
|
242
|
+
readonly secondaryHover: "#d4d6cc";
|
|
240
243
|
readonly muted: "#eaebe6";
|
|
241
244
|
readonly mutedForeground: "#7a7a7a";
|
|
245
|
+
readonly mutedHover: "#d4d6cc";
|
|
242
246
|
readonly accent: "#3ba4a7";
|
|
243
247
|
readonly accentForeground: "#ffffff";
|
|
248
|
+
readonly accentHover: "#319295";
|
|
244
249
|
readonly destructive: "#e02726";
|
|
245
250
|
readonly destructiveForeground: "#ffffff";
|
|
251
|
+
readonly destructiveHover: "#d92626";
|
|
246
252
|
readonly border: "#000000";
|
|
247
253
|
readonly input: "#000000";
|
|
248
254
|
readonly ring: "#a91c22";
|
|
@@ -261,6 +267,7 @@ declare const semanticColors: {
|
|
|
261
267
|
readonly primaryForeground: "#ffffff";
|
|
262
268
|
readonly accent: "#dddfd5";
|
|
263
269
|
readonly accentForeground: "#4f4f4f";
|
|
270
|
+
readonly accentHover: "#c8cbbe";
|
|
264
271
|
readonly border: "#000000";
|
|
265
272
|
readonly ring: "#a91c22";
|
|
266
273
|
};
|
|
@@ -274,6 +281,7 @@ declare const semanticColors: {
|
|
|
274
281
|
};
|
|
275
282
|
readonly dark: {
|
|
276
283
|
readonly background: "#292424";
|
|
284
|
+
readonly backgroundHover: "#333333";
|
|
277
285
|
readonly foreground: "#f3f4f6";
|
|
278
286
|
readonly card: "#333333";
|
|
279
287
|
readonly cardForeground: "#f3f4f6";
|
|
@@ -281,14 +289,19 @@ declare const semanticColors: {
|
|
|
281
289
|
readonly popoverForeground: "#f3f4f6";
|
|
282
290
|
readonly primary: "#f87171";
|
|
283
291
|
readonly primaryForeground: "#292424";
|
|
292
|
+
readonly primaryHover: "#f9a8a8";
|
|
284
293
|
readonly secondary: "#54574e";
|
|
285
294
|
readonly secondaryForeground: "#f3f4f6";
|
|
295
|
+
readonly secondaryHover: "#5c6156";
|
|
286
296
|
readonly muted: "#4d4d4d";
|
|
287
297
|
readonly mutedForeground: "#9ca3af";
|
|
298
|
+
readonly mutedHover: "#5c5c5c";
|
|
288
299
|
readonly accent: "#67cccf";
|
|
289
300
|
readonly accentForeground: "#292424";
|
|
301
|
+
readonly accentHover: "#8fd9dc";
|
|
290
302
|
readonly destructive: "#e02726";
|
|
291
303
|
readonly destructiveForeground: "#ffffff";
|
|
304
|
+
readonly destructiveHover: "#f87171";
|
|
292
305
|
readonly border: "#9ca3af";
|
|
293
306
|
readonly input: "#9ca3af";
|
|
294
307
|
readonly ring: "#f87171";
|
|
@@ -307,6 +320,7 @@ declare const semanticColors: {
|
|
|
307
320
|
readonly primaryForeground: "#292424";
|
|
308
321
|
readonly accent: "#4d4d4d";
|
|
309
322
|
readonly accentForeground: "#f3f4f6";
|
|
323
|
+
readonly accentHover: "#5c5c5c";
|
|
310
324
|
readonly border: "#9ca3af";
|
|
311
325
|
readonly ring: "#f87171";
|
|
312
326
|
};
|
|
@@ -681,6 +695,7 @@ declare const tokens: {
|
|
|
681
695
|
readonly semanticColors: {
|
|
682
696
|
readonly light: {
|
|
683
697
|
readonly background: "#ffffff";
|
|
698
|
+
readonly backgroundHover: "#f5f5f5";
|
|
684
699
|
readonly foreground: "#4f4f4f";
|
|
685
700
|
readonly card: "#ffffff";
|
|
686
701
|
readonly cardForeground: "#4f4f4f";
|
|
@@ -688,14 +703,19 @@ declare const tokens: {
|
|
|
688
703
|
readonly popoverForeground: "#4f4f4f";
|
|
689
704
|
readonly primary: "#a91c22";
|
|
690
705
|
readonly primaryForeground: "#ffffff";
|
|
706
|
+
readonly primaryHover: "#8a171c";
|
|
691
707
|
readonly secondary: "#eaebe6";
|
|
692
708
|
readonly secondaryForeground: "#4f4f4f";
|
|
709
|
+
readonly secondaryHover: "#d4d6cc";
|
|
693
710
|
readonly muted: "#eaebe6";
|
|
694
711
|
readonly mutedForeground: "#7a7a7a";
|
|
712
|
+
readonly mutedHover: "#d4d6cc";
|
|
695
713
|
readonly accent: "#3ba4a7";
|
|
696
714
|
readonly accentForeground: "#ffffff";
|
|
715
|
+
readonly accentHover: "#319295";
|
|
697
716
|
readonly destructive: "#e02726";
|
|
698
717
|
readonly destructiveForeground: "#ffffff";
|
|
718
|
+
readonly destructiveHover: "#d92626";
|
|
699
719
|
readonly border: "#000000";
|
|
700
720
|
readonly input: "#000000";
|
|
701
721
|
readonly ring: "#a91c22";
|
|
@@ -714,6 +734,7 @@ declare const tokens: {
|
|
|
714
734
|
readonly primaryForeground: "#ffffff";
|
|
715
735
|
readonly accent: "#dddfd5";
|
|
716
736
|
readonly accentForeground: "#4f4f4f";
|
|
737
|
+
readonly accentHover: "#c8cbbe";
|
|
717
738
|
readonly border: "#000000";
|
|
718
739
|
readonly ring: "#a91c22";
|
|
719
740
|
};
|
|
@@ -727,6 +748,7 @@ declare const tokens: {
|
|
|
727
748
|
};
|
|
728
749
|
readonly dark: {
|
|
729
750
|
readonly background: "#292424";
|
|
751
|
+
readonly backgroundHover: "#333333";
|
|
730
752
|
readonly foreground: "#f3f4f6";
|
|
731
753
|
readonly card: "#333333";
|
|
732
754
|
readonly cardForeground: "#f3f4f6";
|
|
@@ -734,14 +756,19 @@ declare const tokens: {
|
|
|
734
756
|
readonly popoverForeground: "#f3f4f6";
|
|
735
757
|
readonly primary: "#f87171";
|
|
736
758
|
readonly primaryForeground: "#292424";
|
|
759
|
+
readonly primaryHover: "#f9a8a8";
|
|
737
760
|
readonly secondary: "#54574e";
|
|
738
761
|
readonly secondaryForeground: "#f3f4f6";
|
|
762
|
+
readonly secondaryHover: "#5c6156";
|
|
739
763
|
readonly muted: "#4d4d4d";
|
|
740
764
|
readonly mutedForeground: "#9ca3af";
|
|
765
|
+
readonly mutedHover: "#5c5c5c";
|
|
741
766
|
readonly accent: "#67cccf";
|
|
742
767
|
readonly accentForeground: "#292424";
|
|
768
|
+
readonly accentHover: "#8fd9dc";
|
|
743
769
|
readonly destructive: "#e02726";
|
|
744
770
|
readonly destructiveForeground: "#ffffff";
|
|
771
|
+
readonly destructiveHover: "#f87171";
|
|
745
772
|
readonly border: "#9ca3af";
|
|
746
773
|
readonly input: "#9ca3af";
|
|
747
774
|
readonly ring: "#f87171";
|
|
@@ -760,6 +787,7 @@ declare const tokens: {
|
|
|
760
787
|
readonly primaryForeground: "#292424";
|
|
761
788
|
readonly accent: "#4d4d4d";
|
|
762
789
|
readonly accentForeground: "#f3f4f6";
|
|
790
|
+
readonly accentHover: "#5c5c5c";
|
|
763
791
|
readonly border: "#9ca3af";
|
|
764
792
|
readonly ring: "#f87171";
|
|
765
793
|
};
|
package/dist/index.js
CHANGED
|
@@ -304,6 +304,8 @@ var layoutColors = {
|
|
|
304
304
|
var semanticColors = {
|
|
305
305
|
light: {
|
|
306
306
|
background: colors.white,
|
|
307
|
+
backgroundHover: "#f5f5f5",
|
|
308
|
+
// Subtle darker than background
|
|
307
309
|
foreground: colors.gray[600],
|
|
308
310
|
// Grey 1
|
|
309
311
|
card: colors.white,
|
|
@@ -313,18 +315,28 @@ var semanticColors = {
|
|
|
313
315
|
primary: colors.red[700],
|
|
314
316
|
// Red 2 - brand primary
|
|
315
317
|
primaryForeground: colors.white,
|
|
318
|
+
primaryHover: "#8a171c",
|
|
319
|
+
// Darker than #a91c22
|
|
316
320
|
secondary: colors.sage[100],
|
|
317
321
|
// Core 4 tint - subtle backgrounds
|
|
318
322
|
secondaryForeground: colors.gray[600],
|
|
323
|
+
secondaryHover: "#d4d6cc",
|
|
324
|
+
// Darker than #e8eae0
|
|
319
325
|
muted: colors.sage[100],
|
|
320
326
|
mutedForeground: colors.gray[500],
|
|
321
327
|
// Grey 2
|
|
328
|
+
mutedHover: "#d4d6cc",
|
|
329
|
+
// Darker than #e8eae0
|
|
322
330
|
accent: colors.teal[500],
|
|
323
331
|
// Core 1 - teal accent
|
|
324
332
|
accentForeground: colors.white,
|
|
333
|
+
accentHover: "#319295",
|
|
334
|
+
// Darker than #3ba4a7
|
|
325
335
|
destructive: colors.red[500],
|
|
326
336
|
// Red 1 - errors/warnings
|
|
327
337
|
destructiveForeground: colors.white,
|
|
338
|
+
destructiveHover: "#d92626",
|
|
339
|
+
// Darker than #ef4444
|
|
328
340
|
border: colors.black,
|
|
329
341
|
// CAD/drafter aesthetic - hard black borders
|
|
330
342
|
input: colors.black,
|
|
@@ -349,6 +361,8 @@ var semanticColors = {
|
|
|
349
361
|
primaryForeground: colors.white,
|
|
350
362
|
accent: colors.sage[200],
|
|
351
363
|
accentForeground: colors.gray[600],
|
|
364
|
+
accentHover: "#c8cbbe",
|
|
365
|
+
// Darker than sidebar.accent (#dddfd5)
|
|
352
366
|
border: colors.black,
|
|
353
367
|
// CAD/drafter aesthetic
|
|
354
368
|
ring: colors.red[700]
|
|
@@ -369,6 +383,8 @@ var semanticColors = {
|
|
|
369
383
|
},
|
|
370
384
|
dark: {
|
|
371
385
|
background: colors.charcoal[900],
|
|
386
|
+
backgroundHover: "#333333",
|
|
387
|
+
// Subtle lighter than background
|
|
372
388
|
foreground: colors.gray[100],
|
|
373
389
|
card: colors.charcoal[800],
|
|
374
390
|
cardForeground: colors.gray[100],
|
|
@@ -377,14 +393,24 @@ var semanticColors = {
|
|
|
377
393
|
primary: colors.red[400],
|
|
378
394
|
// Lighter red for dark mode
|
|
379
395
|
primaryForeground: colors.charcoal[900],
|
|
396
|
+
primaryHover: "#f9a8a8",
|
|
397
|
+
// Lighter than #f87171
|
|
380
398
|
secondary: colors.sage[800],
|
|
381
399
|
secondaryForeground: colors.gray[100],
|
|
400
|
+
secondaryHover: "#5c6156",
|
|
401
|
+
// Lighter than #4d524a
|
|
382
402
|
muted: colors.charcoal[700],
|
|
383
403
|
mutedForeground: colors.gray[400],
|
|
404
|
+
mutedHover: "#5c5c5c",
|
|
405
|
+
// Lighter than #4d4d4d
|
|
384
406
|
accent: colors.teal[400],
|
|
385
407
|
accentForeground: colors.charcoal[900],
|
|
408
|
+
accentHover: "#8fd9dc",
|
|
409
|
+
// Lighter than #67cccf
|
|
386
410
|
destructive: colors.red[500],
|
|
387
411
|
destructiveForeground: colors.white,
|
|
412
|
+
destructiveHover: "#f87171",
|
|
413
|
+
// Lighter than #ef4444
|
|
388
414
|
border: colors.gray[400],
|
|
389
415
|
// CAD/drafter aesthetic - visible crisp borders
|
|
390
416
|
input: colors.gray[400],
|
|
@@ -410,6 +436,8 @@ var semanticColors = {
|
|
|
410
436
|
primaryForeground: colors.charcoal[900],
|
|
411
437
|
accent: colors.charcoal[700],
|
|
412
438
|
accentForeground: colors.gray[100],
|
|
439
|
+
accentHover: "#5c5c5c",
|
|
440
|
+
// Lighter than sidebar.accent
|
|
413
441
|
border: colors.gray[400],
|
|
414
442
|
// CAD/drafter aesthetic
|
|
415
443
|
ring: colors.red[400]
|
package/dist/index.mjs
CHANGED
|
@@ -265,6 +265,8 @@ var layoutColors = {
|
|
|
265
265
|
var semanticColors = {
|
|
266
266
|
light: {
|
|
267
267
|
background: colors.white,
|
|
268
|
+
backgroundHover: "#f5f5f5",
|
|
269
|
+
// Subtle darker than background
|
|
268
270
|
foreground: colors.gray[600],
|
|
269
271
|
// Grey 1
|
|
270
272
|
card: colors.white,
|
|
@@ -274,18 +276,28 @@ var semanticColors = {
|
|
|
274
276
|
primary: colors.red[700],
|
|
275
277
|
// Red 2 - brand primary
|
|
276
278
|
primaryForeground: colors.white,
|
|
279
|
+
primaryHover: "#8a171c",
|
|
280
|
+
// Darker than #a91c22
|
|
277
281
|
secondary: colors.sage[100],
|
|
278
282
|
// Core 4 tint - subtle backgrounds
|
|
279
283
|
secondaryForeground: colors.gray[600],
|
|
284
|
+
secondaryHover: "#d4d6cc",
|
|
285
|
+
// Darker than #e8eae0
|
|
280
286
|
muted: colors.sage[100],
|
|
281
287
|
mutedForeground: colors.gray[500],
|
|
282
288
|
// Grey 2
|
|
289
|
+
mutedHover: "#d4d6cc",
|
|
290
|
+
// Darker than #e8eae0
|
|
283
291
|
accent: colors.teal[500],
|
|
284
292
|
// Core 1 - teal accent
|
|
285
293
|
accentForeground: colors.white,
|
|
294
|
+
accentHover: "#319295",
|
|
295
|
+
// Darker than #3ba4a7
|
|
286
296
|
destructive: colors.red[500],
|
|
287
297
|
// Red 1 - errors/warnings
|
|
288
298
|
destructiveForeground: colors.white,
|
|
299
|
+
destructiveHover: "#d92626",
|
|
300
|
+
// Darker than #ef4444
|
|
289
301
|
border: colors.black,
|
|
290
302
|
// CAD/drafter aesthetic - hard black borders
|
|
291
303
|
input: colors.black,
|
|
@@ -310,6 +322,8 @@ var semanticColors = {
|
|
|
310
322
|
primaryForeground: colors.white,
|
|
311
323
|
accent: colors.sage[200],
|
|
312
324
|
accentForeground: colors.gray[600],
|
|
325
|
+
accentHover: "#c8cbbe",
|
|
326
|
+
// Darker than sidebar.accent (#dddfd5)
|
|
313
327
|
border: colors.black,
|
|
314
328
|
// CAD/drafter aesthetic
|
|
315
329
|
ring: colors.red[700]
|
|
@@ -330,6 +344,8 @@ var semanticColors = {
|
|
|
330
344
|
},
|
|
331
345
|
dark: {
|
|
332
346
|
background: colors.charcoal[900],
|
|
347
|
+
backgroundHover: "#333333",
|
|
348
|
+
// Subtle lighter than background
|
|
333
349
|
foreground: colors.gray[100],
|
|
334
350
|
card: colors.charcoal[800],
|
|
335
351
|
cardForeground: colors.gray[100],
|
|
@@ -338,14 +354,24 @@ var semanticColors = {
|
|
|
338
354
|
primary: colors.red[400],
|
|
339
355
|
// Lighter red for dark mode
|
|
340
356
|
primaryForeground: colors.charcoal[900],
|
|
357
|
+
primaryHover: "#f9a8a8",
|
|
358
|
+
// Lighter than #f87171
|
|
341
359
|
secondary: colors.sage[800],
|
|
342
360
|
secondaryForeground: colors.gray[100],
|
|
361
|
+
secondaryHover: "#5c6156",
|
|
362
|
+
// Lighter than #4d524a
|
|
343
363
|
muted: colors.charcoal[700],
|
|
344
364
|
mutedForeground: colors.gray[400],
|
|
365
|
+
mutedHover: "#5c5c5c",
|
|
366
|
+
// Lighter than #4d4d4d
|
|
345
367
|
accent: colors.teal[400],
|
|
346
368
|
accentForeground: colors.charcoal[900],
|
|
369
|
+
accentHover: "#8fd9dc",
|
|
370
|
+
// Lighter than #67cccf
|
|
347
371
|
destructive: colors.red[500],
|
|
348
372
|
destructiveForeground: colors.white,
|
|
373
|
+
destructiveHover: "#f87171",
|
|
374
|
+
// Lighter than #ef4444
|
|
349
375
|
border: colors.gray[400],
|
|
350
376
|
// CAD/drafter aesthetic - visible crisp borders
|
|
351
377
|
input: colors.gray[400],
|
|
@@ -371,6 +397,8 @@ var semanticColors = {
|
|
|
371
397
|
primaryForeground: colors.charcoal[900],
|
|
372
398
|
accent: colors.charcoal[700],
|
|
373
399
|
accentForeground: colors.gray[100],
|
|
400
|
+
accentHover: "#5c5c5c",
|
|
401
|
+
// Lighter than sidebar.accent
|
|
374
402
|
border: colors.gray[400],
|
|
375
403
|
// CAD/drafter aesthetic
|
|
376
404
|
ring: colors.red[400]
|
package/dist/tokens.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
/* ===== Semantic Colors (HSL format for Tailwind) ===== */
|
|
10
10
|
--background: 0 0% 100%;
|
|
11
|
+
--background-hover: 0 0% 96%;
|
|
11
12
|
--foreground: 0 0% 31%;
|
|
12
13
|
|
|
13
14
|
--card: 0 0% 100%;
|
|
@@ -18,18 +19,23 @@
|
|
|
18
19
|
|
|
19
20
|
--primary: 357 72% 39%;
|
|
20
21
|
--primary-foreground: 0 0% 100%;
|
|
22
|
+
--primary-hover: 357 71% 32%;
|
|
21
23
|
|
|
22
24
|
--secondary: 72 11% 91%;
|
|
23
25
|
--secondary-foreground: 0 0% 31%;
|
|
26
|
+
--secondary-hover: 72 11% 82%;
|
|
24
27
|
|
|
25
28
|
--muted: 72 11% 91%;
|
|
26
29
|
--muted-foreground: 0 0% 48%;
|
|
30
|
+
--muted-hover: 72 11% 82%;
|
|
27
31
|
|
|
28
32
|
--accent: 182 48% 44%;
|
|
29
33
|
--accent-foreground: 0 0% 100%;
|
|
34
|
+
--accent-hover: 182 51% 39%;
|
|
30
35
|
|
|
31
36
|
--destructive: 0 75% 51%;
|
|
32
37
|
--destructive-foreground: 0 0% 100%;
|
|
38
|
+
--destructive-hover: 0 70% 50%;
|
|
33
39
|
|
|
34
40
|
--border: 0 0% 0%;
|
|
35
41
|
--input: 0 0% 0%;
|
|
@@ -62,6 +68,7 @@
|
|
|
62
68
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
63
69
|
--sidebar-accent: 72 14% 85%;
|
|
64
70
|
--sidebar-accent-foreground: 0 0% 31%;
|
|
71
|
+
--sidebar-accent-hover: 74 11% 77%;
|
|
65
72
|
--sidebar-border: 0 0% 0%;
|
|
66
73
|
--sidebar-ring: 357 72% 39%;
|
|
67
74
|
|
|
@@ -94,6 +101,7 @@
|
|
|
94
101
|
|
|
95
102
|
.dark {
|
|
96
103
|
--background: 0 6% 15%;
|
|
104
|
+
--background-hover: 0 0% 20%;
|
|
97
105
|
--foreground: 220 14% 96%;
|
|
98
106
|
|
|
99
107
|
--card: 0 0% 20%;
|
|
@@ -104,18 +112,23 @@
|
|
|
104
112
|
|
|
105
113
|
--primary: 0 91% 71%;
|
|
106
114
|
--primary-foreground: 0 6% 15%;
|
|
115
|
+
--primary-hover: 0 87% 82%;
|
|
107
116
|
|
|
108
117
|
--secondary: 80 5% 32%;
|
|
109
118
|
--secondary-foreground: 220 14% 96%;
|
|
119
|
+
--secondary-hover: 87 6% 36%;
|
|
110
120
|
|
|
111
121
|
--muted: 0 0% 30%;
|
|
112
122
|
--muted-foreground: 218 11% 65%;
|
|
123
|
+
--muted-hover: 0 0% 36%;
|
|
113
124
|
|
|
114
125
|
--accent: 182 52% 61%;
|
|
115
126
|
--accent-foreground: 0 6% 15%;
|
|
127
|
+
--accent-hover: 182 52% 71%;
|
|
116
128
|
|
|
117
129
|
--destructive: 0 75% 51%;
|
|
118
130
|
--destructive-foreground: 0 0% 100%;
|
|
131
|
+
--destructive-hover: 0 91% 71%;
|
|
119
132
|
|
|
120
133
|
--border: 218 11% 65%;
|
|
121
134
|
--input: 218 11% 65%;
|
|
@@ -147,6 +160,7 @@
|
|
|
147
160
|
--sidebar-primary-foreground: 0 6% 15%;
|
|
148
161
|
--sidebar-accent: 0 0% 30%;
|
|
149
162
|
--sidebar-accent-foreground: 220 14% 96%;
|
|
163
|
+
--sidebar-accent-hover: 0 0% 36%;
|
|
150
164
|
--sidebar-border: 218 11% 65%;
|
|
151
165
|
--sidebar-ring: 0 91% 71%;
|
|
152
166
|
|