@signozhq/design-tokens 2.1.0 → 2.1.2
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/design-tokens.js +1646 -50
- package/dist/design-tokens.umd.cjs +1 -1
- package/dist/index.d.ts +1603 -6
- package/dist/style.css +1 -1
- package/dist/tailwind-theme.css +1 -1
- package/package.json +2 -2
package/dist/design-tokens.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const E = {
|
|
2
2
|
BG_ROBIN_50: "#edf1fe",
|
|
3
3
|
BG_ROBIN_100: "#cad5fd",
|
|
4
4
|
BG_ROBIN_150: "#cad5fd",
|
|
@@ -271,7 +271,7 @@ const v = {
|
|
|
271
271
|
TEXT_GRADIENT_OCEAN: "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
|
|
272
272
|
TEXT_GRADIENT_SPLASH: "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
|
|
273
273
|
TEXT_GRADIENT_FLAMINGO: "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
|
|
274
|
-
},
|
|
274
|
+
}, b = {
|
|
275
275
|
"robin-50": "#edf1fe",
|
|
276
276
|
"robin-100": "#cad5fd",
|
|
277
277
|
"robin-150": "#cad5fd",
|
|
@@ -408,7 +408,7 @@ const v = {
|
|
|
408
408
|
"gradient-ocean": "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
|
|
409
409
|
"gradient-splash": "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
|
|
410
410
|
"gradient-flamingo": "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
|
|
411
|
-
},
|
|
411
|
+
}, A = {
|
|
412
412
|
PADDING_1: "0.25rem",
|
|
413
413
|
PADDING_2: "0.5rem",
|
|
414
414
|
PADDING_3: "0.75rem",
|
|
@@ -445,7 +445,7 @@ const v = {
|
|
|
445
445
|
MARGIN_48: "12rem",
|
|
446
446
|
MARGIN_56: "14rem",
|
|
447
447
|
MARGIN_64: "16rem"
|
|
448
|
-
},
|
|
448
|
+
}, T = {
|
|
449
449
|
FONTFAMILY_INTER: "Inter, sans-serif",
|
|
450
450
|
FONTFAMILY_SFMONO: "SF Mono, monospace",
|
|
451
451
|
FONTSIZE_XS: "0.75rem",
|
|
@@ -653,7 +653,7 @@ const v = {
|
|
|
653
653
|
PARAGRAPH_SMALL_600_LINEHEIGHT: "18px",
|
|
654
654
|
PARAGRAPH_SMALL_600_LETTERSPACING: "-0.5px",
|
|
655
655
|
PARAGRAPH_SMALL_600_FONTFAMILY: "Inter, sans-serif"
|
|
656
|
-
},
|
|
656
|
+
}, h = {
|
|
657
657
|
LABEL_LARGE_400: {
|
|
658
658
|
fontFamily: "Inter, sans-serif",
|
|
659
659
|
fontSize: "18px",
|
|
@@ -885,7 +885,7 @@ const v = {
|
|
|
885
885
|
lineHeight: "18px",
|
|
886
886
|
letterSpacing: "-0.5px"
|
|
887
887
|
}
|
|
888
|
-
},
|
|
888
|
+
}, R = {
|
|
889
889
|
BACKGROUND: "var(--background)",
|
|
890
890
|
FOREGROUND: "var(--foreground)",
|
|
891
891
|
CARD: "var(--card)",
|
|
@@ -1006,7 +1006,7 @@ const v = {
|
|
|
1006
1006
|
ACCENT_SIENNA: "var(--accent-sienna)",
|
|
1007
1007
|
ACCENT_SIENNA_HOVER: "var(--accent-sienna-hover)",
|
|
1008
1008
|
ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)"
|
|
1009
|
-
},
|
|
1009
|
+
}, S = {
|
|
1010
1010
|
background: "var(--background)",
|
|
1011
1011
|
foreground: "var(--foreground)",
|
|
1012
1012
|
card: "var(--card)",
|
|
@@ -1700,7 +1700,7 @@ const v = {
|
|
|
1700
1700
|
type: "color"
|
|
1701
1701
|
}
|
|
1702
1702
|
}
|
|
1703
|
-
},
|
|
1703
|
+
}, r = {
|
|
1704
1704
|
Robin: {
|
|
1705
1705
|
50: {
|
|
1706
1706
|
value: "#edf1fe",
|
|
@@ -2275,8 +2275,8 @@ const v = {
|
|
|
2275
2275
|
}
|
|
2276
2276
|
}, I = {
|
|
2277
2277
|
bg: e,
|
|
2278
|
-
text:
|
|
2279
|
-
},
|
|
2278
|
+
text: r
|
|
2279
|
+
}, a = {
|
|
2280
2280
|
1: {
|
|
2281
2281
|
value: "0.25rem",
|
|
2282
2282
|
type: "spacing"
|
|
@@ -2349,7 +2349,7 @@ const v = {
|
|
|
2349
2349
|
value: "16rem",
|
|
2350
2350
|
type: "spacing"
|
|
2351
2351
|
}
|
|
2352
|
-
},
|
|
2352
|
+
}, o = {
|
|
2353
2353
|
1: {
|
|
2354
2354
|
value: "0.25rem",
|
|
2355
2355
|
type: "spacing"
|
|
@@ -2422,10 +2422,88 @@ const v = {
|
|
|
2422
2422
|
value: "16rem",
|
|
2423
2423
|
type: "spacing"
|
|
2424
2424
|
}
|
|
2425
|
-
},
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2425
|
+
}, t = {
|
|
2426
|
+
0: {
|
|
2427
|
+
value: "0px",
|
|
2428
|
+
type: "spacing"
|
|
2429
|
+
},
|
|
2430
|
+
1: {
|
|
2431
|
+
value: "2px",
|
|
2432
|
+
type: "spacing"
|
|
2433
|
+
},
|
|
2434
|
+
2: {
|
|
2435
|
+
value: "4px",
|
|
2436
|
+
type: "spacing"
|
|
2437
|
+
},
|
|
2438
|
+
3: {
|
|
2439
|
+
value: "6px",
|
|
2440
|
+
type: "spacing"
|
|
2441
|
+
},
|
|
2442
|
+
4: {
|
|
2443
|
+
value: "8px",
|
|
2444
|
+
type: "spacing"
|
|
2445
|
+
},
|
|
2446
|
+
5: {
|
|
2447
|
+
value: "10px",
|
|
2448
|
+
type: "spacing"
|
|
2449
|
+
},
|
|
2450
|
+
6: {
|
|
2451
|
+
value: "12px",
|
|
2452
|
+
type: "spacing"
|
|
2453
|
+
},
|
|
2454
|
+
7: {
|
|
2455
|
+
value: "14px",
|
|
2456
|
+
type: "spacing"
|
|
2457
|
+
},
|
|
2458
|
+
8: {
|
|
2459
|
+
value: "16px",
|
|
2460
|
+
type: "spacing"
|
|
2461
|
+
},
|
|
2462
|
+
10: {
|
|
2463
|
+
value: "20px",
|
|
2464
|
+
type: "spacing"
|
|
2465
|
+
},
|
|
2466
|
+
12: {
|
|
2467
|
+
value: "24px",
|
|
2468
|
+
type: "spacing"
|
|
2469
|
+
},
|
|
2470
|
+
16: {
|
|
2471
|
+
value: "32px",
|
|
2472
|
+
type: "spacing"
|
|
2473
|
+
},
|
|
2474
|
+
20: {
|
|
2475
|
+
value: "40px",
|
|
2476
|
+
type: "spacing"
|
|
2477
|
+
},
|
|
2478
|
+
24: {
|
|
2479
|
+
value: "48px",
|
|
2480
|
+
type: "spacing"
|
|
2481
|
+
},
|
|
2482
|
+
32: {
|
|
2483
|
+
value: "64px",
|
|
2484
|
+
type: "spacing"
|
|
2485
|
+
},
|
|
2486
|
+
40: {
|
|
2487
|
+
value: "80px",
|
|
2488
|
+
type: "spacing"
|
|
2489
|
+
},
|
|
2490
|
+
48: {
|
|
2491
|
+
value: "96px",
|
|
2492
|
+
type: "spacing"
|
|
2493
|
+
},
|
|
2494
|
+
56: {
|
|
2495
|
+
value: "112px",
|
|
2496
|
+
type: "spacing"
|
|
2497
|
+
},
|
|
2498
|
+
64: {
|
|
2499
|
+
value: "128px",
|
|
2500
|
+
type: "spacing"
|
|
2501
|
+
}
|
|
2502
|
+
}, L = {
|
|
2503
|
+
padding: a,
|
|
2504
|
+
margin: o,
|
|
2505
|
+
spacing: t
|
|
2506
|
+
}, n = {
|
|
2429
2507
|
inter: {
|
|
2430
2508
|
value: "Inter, sans-serif",
|
|
2431
2509
|
type: "typography"
|
|
@@ -2434,7 +2512,7 @@ const v = {
|
|
|
2434
2512
|
value: "SF Mono, monospace",
|
|
2435
2513
|
type: "typography"
|
|
2436
2514
|
}
|
|
2437
|
-
},
|
|
2515
|
+
}, c = {
|
|
2438
2516
|
xs: {
|
|
2439
2517
|
value: "0.75rem",
|
|
2440
2518
|
type: "typography"
|
|
@@ -2524,7 +2602,7 @@ const v = {
|
|
|
2524
2602
|
value: "900",
|
|
2525
2603
|
type: "typography"
|
|
2526
2604
|
}
|
|
2527
|
-
},
|
|
2605
|
+
}, i = {
|
|
2528
2606
|
18: {
|
|
2529
2607
|
value: "18px",
|
|
2530
2608
|
type: "typography"
|
|
@@ -2561,7 +2639,7 @@ const v = {
|
|
|
2561
2639
|
value: "2",
|
|
2562
2640
|
type: "typography"
|
|
2563
2641
|
}
|
|
2564
|
-
},
|
|
2642
|
+
}, g = {
|
|
2565
2643
|
0: {
|
|
2566
2644
|
value: "0px",
|
|
2567
2645
|
type: "typography"
|
|
@@ -2598,7 +2676,7 @@ const v = {
|
|
|
2598
2676
|
value: "-0.5px",
|
|
2599
2677
|
type: "typography"
|
|
2600
2678
|
}
|
|
2601
|
-
},
|
|
2679
|
+
}, p = {
|
|
2602
2680
|
large: {
|
|
2603
2681
|
400: {
|
|
2604
2682
|
fontSize: {
|
|
@@ -2871,7 +2949,7 @@ const v = {
|
|
|
2871
2949
|
}
|
|
2872
2950
|
}
|
|
2873
2951
|
}
|
|
2874
|
-
},
|
|
2952
|
+
}, u = {
|
|
2875
2953
|
base: {
|
|
2876
2954
|
400: {
|
|
2877
2955
|
fontSize: {
|
|
@@ -3008,7 +3086,7 @@ const v = {
|
|
|
3008
3086
|
}
|
|
3009
3087
|
}
|
|
3010
3088
|
}
|
|
3011
|
-
},
|
|
3089
|
+
}, s = {
|
|
3012
3090
|
base: {
|
|
3013
3091
|
400: {
|
|
3014
3092
|
fontSize: {
|
|
@@ -3145,7 +3223,7 @@ const v = {
|
|
|
3145
3223
|
}
|
|
3146
3224
|
}
|
|
3147
3225
|
}
|
|
3148
|
-
},
|
|
3226
|
+
}, d = {
|
|
3149
3227
|
medium: {
|
|
3150
3228
|
400: {
|
|
3151
3229
|
fontSize: {
|
|
@@ -3350,17 +3428,17 @@ const v = {
|
|
|
3350
3428
|
}
|
|
3351
3429
|
}
|
|
3352
3430
|
}
|
|
3353
|
-
},
|
|
3354
|
-
fontFamily:
|
|
3355
|
-
fontSize:
|
|
3431
|
+
}, m = {
|
|
3432
|
+
fontFamily: n,
|
|
3433
|
+
fontSize: c,
|
|
3356
3434
|
fontWeight: l,
|
|
3357
|
-
lineHeight:
|
|
3358
|
-
letterSpacing:
|
|
3359
|
-
label:
|
|
3360
|
-
uppercase:
|
|
3361
|
-
code:
|
|
3362
|
-
paragraph:
|
|
3363
|
-
},
|
|
3435
|
+
lineHeight: i,
|
|
3436
|
+
letterSpacing: g,
|
|
3437
|
+
label: p,
|
|
3438
|
+
uppercase: u,
|
|
3439
|
+
code: s,
|
|
3440
|
+
paragraph: d
|
|
3441
|
+
}, y = {
|
|
3364
3442
|
large: {
|
|
3365
3443
|
400: {
|
|
3366
3444
|
fontFamily: "Inter, sans-serif",
|
|
@@ -3453,7 +3531,7 @@ const v = {
|
|
|
3453
3531
|
letterSpacing: "0px"
|
|
3454
3532
|
}
|
|
3455
3533
|
}
|
|
3456
|
-
},
|
|
3534
|
+
}, v = {
|
|
3457
3535
|
base: {
|
|
3458
3536
|
400: {
|
|
3459
3537
|
fontFamily: "Inter, sans-serif",
|
|
@@ -3500,7 +3578,7 @@ const v = {
|
|
|
3500
3578
|
letterSpacing: "4px"
|
|
3501
3579
|
}
|
|
3502
3580
|
}
|
|
3503
|
-
},
|
|
3581
|
+
}, f = {
|
|
3504
3582
|
base: {
|
|
3505
3583
|
400: {
|
|
3506
3584
|
fontFamily: "SF Mono, monospace",
|
|
@@ -3547,7 +3625,7 @@ const v = {
|
|
|
3547
3625
|
letterSpacing: "0px"
|
|
3548
3626
|
}
|
|
3549
3627
|
}
|
|
3550
|
-
},
|
|
3628
|
+
}, _ = {
|
|
3551
3629
|
medium: {
|
|
3552
3630
|
400: {
|
|
3553
3631
|
fontFamily: "Inter, sans-serif",
|
|
@@ -3617,22 +3695,1540 @@ const v = {
|
|
|
3617
3695
|
letterSpacing: "-0.5px"
|
|
3618
3696
|
}
|
|
3619
3697
|
}
|
|
3620
|
-
},
|
|
3621
|
-
label:
|
|
3622
|
-
uppercase:
|
|
3623
|
-
code:
|
|
3624
|
-
paragraph:
|
|
3698
|
+
}, N = {
|
|
3699
|
+
label: y,
|
|
3700
|
+
uppercase: v,
|
|
3701
|
+
code: f,
|
|
3702
|
+
paragraph: _
|
|
3703
|
+
}, x = {
|
|
3704
|
+
default: {
|
|
3705
|
+
light: {
|
|
3706
|
+
meta: {
|
|
3707
|
+
"color-scheme": "light",
|
|
3708
|
+
selector: "[data-theme='default']"
|
|
3709
|
+
},
|
|
3710
|
+
tokens: {
|
|
3711
|
+
background: {
|
|
3712
|
+
value: "var(--bg-vanilla-200)",
|
|
3713
|
+
description: "",
|
|
3714
|
+
category: "background",
|
|
3715
|
+
group: "legacy"
|
|
3716
|
+
},
|
|
3717
|
+
foreground: {
|
|
3718
|
+
value: "var(--text-ink-400)",
|
|
3719
|
+
description: "",
|
|
3720
|
+
category: "foreground",
|
|
3721
|
+
group: "legacy"
|
|
3722
|
+
},
|
|
3723
|
+
card: {
|
|
3724
|
+
value: "var(--bg-vanilla-100)",
|
|
3725
|
+
description: "",
|
|
3726
|
+
category: "background",
|
|
3727
|
+
group: "legacy"
|
|
3728
|
+
},
|
|
3729
|
+
"card-foreground": {
|
|
3730
|
+
value: "var(--text-ink-400)",
|
|
3731
|
+
description: "",
|
|
3732
|
+
category: "foreground",
|
|
3733
|
+
group: "legacy"
|
|
3734
|
+
},
|
|
3735
|
+
popover: {
|
|
3736
|
+
value: "var(--bg-vanilla-100)",
|
|
3737
|
+
description: "",
|
|
3738
|
+
category: "background",
|
|
3739
|
+
group: "legacy"
|
|
3740
|
+
},
|
|
3741
|
+
"popover-foreground": {
|
|
3742
|
+
value: "var(--text-ink-400)",
|
|
3743
|
+
description: "",
|
|
3744
|
+
category: "foreground",
|
|
3745
|
+
group: "legacy"
|
|
3746
|
+
},
|
|
3747
|
+
primary: {
|
|
3748
|
+
value: "var(--bg-robin-500)",
|
|
3749
|
+
description: "",
|
|
3750
|
+
category: "background",
|
|
3751
|
+
group: "legacy"
|
|
3752
|
+
},
|
|
3753
|
+
secondary: {
|
|
3754
|
+
value: "var(--bg-vanilla-300)",
|
|
3755
|
+
description: "",
|
|
3756
|
+
category: "background",
|
|
3757
|
+
group: "legacy"
|
|
3758
|
+
},
|
|
3759
|
+
muted: {
|
|
3760
|
+
value: "var(--bg-vanilla-300)",
|
|
3761
|
+
description: "",
|
|
3762
|
+
category: "background",
|
|
3763
|
+
group: "legacy"
|
|
3764
|
+
},
|
|
3765
|
+
"muted-foreground": {
|
|
3766
|
+
value: "var(--text-slate-50)",
|
|
3767
|
+
description: "",
|
|
3768
|
+
category: "foreground",
|
|
3769
|
+
group: "legacy"
|
|
3770
|
+
},
|
|
3771
|
+
accent: {
|
|
3772
|
+
value: "var(--bg-aqua-100)",
|
|
3773
|
+
description: "",
|
|
3774
|
+
category: "background",
|
|
3775
|
+
group: "legacy"
|
|
3776
|
+
},
|
|
3777
|
+
"accent-foreground": {
|
|
3778
|
+
value: "var(--text-slate-400)",
|
|
3779
|
+
description: "",
|
|
3780
|
+
category: "foreground",
|
|
3781
|
+
group: "legacy"
|
|
3782
|
+
},
|
|
3783
|
+
destructive: {
|
|
3784
|
+
value: "var(--bg-cherry-500)",
|
|
3785
|
+
description: "",
|
|
3786
|
+
category: "background",
|
|
3787
|
+
group: "legacy"
|
|
3788
|
+
},
|
|
3789
|
+
"destructive-foreground": {
|
|
3790
|
+
value: "var(--text-vanilla-100)",
|
|
3791
|
+
description: "",
|
|
3792
|
+
category: "foreground",
|
|
3793
|
+
group: "legacy"
|
|
3794
|
+
},
|
|
3795
|
+
border: {
|
|
3796
|
+
value: "var(--bg-vanilla-400)",
|
|
3797
|
+
description: "",
|
|
3798
|
+
category: "border",
|
|
3799
|
+
group: "legacy"
|
|
3800
|
+
},
|
|
3801
|
+
input: {
|
|
3802
|
+
value: "var(--bg-vanilla-400)",
|
|
3803
|
+
description: "",
|
|
3804
|
+
category: "border",
|
|
3805
|
+
group: "legacy"
|
|
3806
|
+
},
|
|
3807
|
+
ring: {
|
|
3808
|
+
value: "var(--bg-robin-500)",
|
|
3809
|
+
description: "",
|
|
3810
|
+
category: "border",
|
|
3811
|
+
group: "legacy"
|
|
3812
|
+
},
|
|
3813
|
+
radius: {
|
|
3814
|
+
value: "0.25rem",
|
|
3815
|
+
description: "",
|
|
3816
|
+
category: "other",
|
|
3817
|
+
group: "legacy"
|
|
3818
|
+
},
|
|
3819
|
+
"chart-1": {
|
|
3820
|
+
value: "var(--bg-robin-500)",
|
|
3821
|
+
description: "",
|
|
3822
|
+
category: "background",
|
|
3823
|
+
group: "charts"
|
|
3824
|
+
},
|
|
3825
|
+
"chart-2": {
|
|
3826
|
+
value: "var(--bg-robin-600)",
|
|
3827
|
+
description: "",
|
|
3828
|
+
category: "background",
|
|
3829
|
+
group: "charts"
|
|
3830
|
+
},
|
|
3831
|
+
"chart-3": {
|
|
3832
|
+
value: "var(--bg-slate-300)",
|
|
3833
|
+
description: "",
|
|
3834
|
+
category: "background",
|
|
3835
|
+
group: "charts"
|
|
3836
|
+
},
|
|
3837
|
+
"chart-4": {
|
|
3838
|
+
value: "var(--bg-slate-400)",
|
|
3839
|
+
description: "",
|
|
3840
|
+
category: "background",
|
|
3841
|
+
group: "charts"
|
|
3842
|
+
},
|
|
3843
|
+
"chart-5": {
|
|
3844
|
+
value: "var(--bg-slate-500)",
|
|
3845
|
+
description: "",
|
|
3846
|
+
category: "background",
|
|
3847
|
+
group: "charts"
|
|
3848
|
+
},
|
|
3849
|
+
sidebar: {
|
|
3850
|
+
value: "var(--bg-vanilla-300)",
|
|
3851
|
+
description: "",
|
|
3852
|
+
category: "background",
|
|
3853
|
+
group: "sidebar"
|
|
3854
|
+
},
|
|
3855
|
+
"sidebar-foreground": {
|
|
3856
|
+
value: "var(--text-ink-400)",
|
|
3857
|
+
description: "",
|
|
3858
|
+
category: "foreground",
|
|
3859
|
+
group: "sidebar"
|
|
3860
|
+
},
|
|
3861
|
+
"sidebar-primary": {
|
|
3862
|
+
value: "var(--bg-robin-500)",
|
|
3863
|
+
description: "",
|
|
3864
|
+
category: "background",
|
|
3865
|
+
group: "sidebar"
|
|
3866
|
+
},
|
|
3867
|
+
"sidebar-primary-foreground": {
|
|
3868
|
+
value: "var(--text-vanilla-100)",
|
|
3869
|
+
description: "",
|
|
3870
|
+
category: "foreground",
|
|
3871
|
+
group: "sidebar"
|
|
3872
|
+
},
|
|
3873
|
+
"sidebar-accent": {
|
|
3874
|
+
value: "var(--bg-aqua-100)",
|
|
3875
|
+
description: "",
|
|
3876
|
+
category: "background",
|
|
3877
|
+
group: "sidebar"
|
|
3878
|
+
},
|
|
3879
|
+
"sidebar-accent-foreground": {
|
|
3880
|
+
value: "var(--text-slate-400)",
|
|
3881
|
+
description: "",
|
|
3882
|
+
category: "foreground",
|
|
3883
|
+
group: "sidebar"
|
|
3884
|
+
},
|
|
3885
|
+
"sidebar-border": {
|
|
3886
|
+
value: "var(--bg-slate-400)",
|
|
3887
|
+
description: "",
|
|
3888
|
+
category: "border",
|
|
3889
|
+
group: "sidebar"
|
|
3890
|
+
},
|
|
3891
|
+
"sidebar-ring": {
|
|
3892
|
+
value: "var(--bg-robin-500)",
|
|
3893
|
+
description: "",
|
|
3894
|
+
category: "border",
|
|
3895
|
+
group: "sidebar"
|
|
3896
|
+
},
|
|
3897
|
+
"font-sans": {
|
|
3898
|
+
value: "'Inter'",
|
|
3899
|
+
description: "",
|
|
3900
|
+
category: "typography",
|
|
3901
|
+
group: "fonts"
|
|
3902
|
+
},
|
|
3903
|
+
"font-serif": {
|
|
3904
|
+
value: "'Open Sans'",
|
|
3905
|
+
description: "",
|
|
3906
|
+
category: "typography",
|
|
3907
|
+
group: "fonts"
|
|
3908
|
+
},
|
|
3909
|
+
"font-mono": {
|
|
3910
|
+
value: "'Geist Mono'",
|
|
3911
|
+
description: "",
|
|
3912
|
+
category: "typography",
|
|
3913
|
+
group: "fonts"
|
|
3914
|
+
},
|
|
3915
|
+
"base-white": {
|
|
3916
|
+
value: "var(--text-base-white)",
|
|
3917
|
+
description: "",
|
|
3918
|
+
category: "foreground",
|
|
3919
|
+
group: "base"
|
|
3920
|
+
},
|
|
3921
|
+
"base-black": {
|
|
3922
|
+
value: "var(--text-base-black)",
|
|
3923
|
+
description: "",
|
|
3924
|
+
category: "foreground",
|
|
3925
|
+
group: "base"
|
|
3926
|
+
},
|
|
3927
|
+
"l1-background": {
|
|
3928
|
+
value: "var(--bg-neutral-light-1000)",
|
|
3929
|
+
description: "Primary page background for the outermost container",
|
|
3930
|
+
usage: "Use for main app shell, page background, and root containers",
|
|
3931
|
+
dontUse: "Avoid for cards, modals, or nested elements - use l2 or l3 instead",
|
|
3932
|
+
category: "background",
|
|
3933
|
+
group: "surface-levels"
|
|
3934
|
+
},
|
|
3935
|
+
"l2-background": {
|
|
3936
|
+
value: "var(--bg-neutral-light-950)",
|
|
3937
|
+
description: "Secondary background for cards and elevated surfaces",
|
|
3938
|
+
usage: "Use for cards, panels, sidebars, and first-level nested containers",
|
|
3939
|
+
dontUse: "Avoid for deeply nested elements - use l3 instead",
|
|
3940
|
+
category: "background",
|
|
3941
|
+
group: "surface-levels"
|
|
3942
|
+
},
|
|
3943
|
+
"l3-background": {
|
|
3944
|
+
value: "var(--bg-neutral-light-800)",
|
|
3945
|
+
description: "Tertiary background for nested elements within cards",
|
|
3946
|
+
usage: "Use for inputs, dropdowns, and elements nested inside l2 containers",
|
|
3947
|
+
category: "background",
|
|
3948
|
+
group: "surface-levels"
|
|
3949
|
+
},
|
|
3950
|
+
"l1-background-hover": {
|
|
3951
|
+
value: "var(--bg-neutral-light-900)",
|
|
3952
|
+
description: "Hover state for l1-background elements",
|
|
3953
|
+
usage: "Use for interactive elements on l1 background surfaces",
|
|
3954
|
+
category: "background",
|
|
3955
|
+
group: "surface-levels"
|
|
3956
|
+
},
|
|
3957
|
+
"l2-background-hover": {
|
|
3958
|
+
value: "var(--bg-neutral-light-700)",
|
|
3959
|
+
description: "Hover state for l2-background elements",
|
|
3960
|
+
usage: "Use for interactive elements on l2 background surfaces",
|
|
3961
|
+
category: "background",
|
|
3962
|
+
group: "surface-levels"
|
|
3963
|
+
},
|
|
3964
|
+
"l3-background-hover": {
|
|
3965
|
+
value: "var(--bg-neutral-light-700)",
|
|
3966
|
+
description: "Hover state for l3-background elements",
|
|
3967
|
+
usage: "Use for interactive elements on l3 background surfaces",
|
|
3968
|
+
category: "background",
|
|
3969
|
+
group: "surface-levels"
|
|
3970
|
+
},
|
|
3971
|
+
"l1-foreground": {
|
|
3972
|
+
value: "var(--text-neutral-light-50)",
|
|
3973
|
+
description: "Primary text color for l1 backgrounds",
|
|
3974
|
+
usage: "Use for headings and primary text on l1 surfaces",
|
|
3975
|
+
category: "foreground",
|
|
3976
|
+
group: "surface-levels"
|
|
3977
|
+
},
|
|
3978
|
+
"l1-foreground-hover": {
|
|
3979
|
+
value: "var(--text-base-black)",
|
|
3980
|
+
description: "Hover text color for interactive elements on l1",
|
|
3981
|
+
category: "foreground",
|
|
3982
|
+
group: "surface-levels"
|
|
3983
|
+
},
|
|
3984
|
+
"l2-foreground": {
|
|
3985
|
+
value: "var(--text-neutral-light-100)",
|
|
3986
|
+
description: "Secondary text color for l2 backgrounds",
|
|
3987
|
+
usage: "Use for body text and secondary content on l2 surfaces",
|
|
3988
|
+
category: "foreground",
|
|
3989
|
+
group: "surface-levels"
|
|
3990
|
+
},
|
|
3991
|
+
"l2-foreground-hover": {
|
|
3992
|
+
value: "var(--text-neutral-light-50)",
|
|
3993
|
+
description: "Hover text color for interactive elements on l2",
|
|
3994
|
+
category: "foreground",
|
|
3995
|
+
group: "surface-levels"
|
|
3996
|
+
},
|
|
3997
|
+
"l3-foreground": {
|
|
3998
|
+
value: "var(--text-neutral-light-200)",
|
|
3999
|
+
description: "Tertiary text color for l3 backgrounds and muted text",
|
|
4000
|
+
usage: "Use for captions, labels, and less prominent text",
|
|
4001
|
+
category: "foreground",
|
|
4002
|
+
group: "surface-levels"
|
|
4003
|
+
},
|
|
4004
|
+
"l3-foreground-hover": {
|
|
4005
|
+
value: "var(--text-neutral-light-300)",
|
|
4006
|
+
description: "Hover text color for interactive elements on l3",
|
|
4007
|
+
category: "foreground",
|
|
4008
|
+
group: "surface-levels"
|
|
4009
|
+
},
|
|
4010
|
+
"l1-border": {
|
|
4011
|
+
value: "var(--bg-neutral-light-900)",
|
|
4012
|
+
description: "Border color for elements on l1 backgrounds",
|
|
4013
|
+
usage: "Use for dividers and borders separating l1 content",
|
|
4014
|
+
category: "border",
|
|
4015
|
+
group: "surface-levels"
|
|
4016
|
+
},
|
|
4017
|
+
"l2-border": {
|
|
4018
|
+
value: "var(--bg-neutral-light-800)",
|
|
4019
|
+
description: "Border color for elements on l2 backgrounds",
|
|
4020
|
+
usage: "Use for card borders and dividers within cards",
|
|
4021
|
+
category: "border",
|
|
4022
|
+
group: "surface-levels"
|
|
4023
|
+
},
|
|
4024
|
+
"l3-border": {
|
|
4025
|
+
value: "var(--bg-neutral-light-700)",
|
|
4026
|
+
description: "Border color for elements on l3 backgrounds",
|
|
4027
|
+
usage: "Use for input borders and nested element dividers",
|
|
4028
|
+
category: "border",
|
|
4029
|
+
group: "surface-levels"
|
|
4030
|
+
},
|
|
4031
|
+
"primary-background": {
|
|
4032
|
+
value: "var(--bg-robin-500)",
|
|
4033
|
+
description: "Primary action background color",
|
|
4034
|
+
usage: "Use for primary buttons, CTAs, and main interactive elements",
|
|
4035
|
+
category: "background",
|
|
4036
|
+
group: "actions"
|
|
4037
|
+
},
|
|
4038
|
+
"primary-background-hover": {
|
|
4039
|
+
value: "var(--bg-robin-400)",
|
|
4040
|
+
description: "Hover state for primary action elements",
|
|
4041
|
+
category: "background",
|
|
4042
|
+
group: "actions"
|
|
4043
|
+
},
|
|
4044
|
+
"primary-foreground": {
|
|
4045
|
+
value: "var(--text-neutral-light-1000)",
|
|
4046
|
+
description: "Text color for primary action elements",
|
|
4047
|
+
usage: "Use for text on primary buttons and CTAs",
|
|
4048
|
+
category: "foreground",
|
|
4049
|
+
group: "actions"
|
|
4050
|
+
},
|
|
4051
|
+
"primary-foreground-hover": {
|
|
4052
|
+
value: "var(--text-base-white)",
|
|
4053
|
+
description: "Hover text color for primary action elements",
|
|
4054
|
+
category: "foreground",
|
|
4055
|
+
group: "actions"
|
|
4056
|
+
},
|
|
4057
|
+
"secondary-background": {
|
|
4058
|
+
value: "var(--bg-neutral-light-950)",
|
|
4059
|
+
description: "Secondary action background color",
|
|
4060
|
+
usage: "Use for secondary buttons and less prominent actions",
|
|
4061
|
+
category: "background",
|
|
4062
|
+
group: "actions"
|
|
4063
|
+
},
|
|
4064
|
+
"secondary-background-hover": {
|
|
4065
|
+
value: "var(--bg-neutral-light-700)",
|
|
4066
|
+
description: "Hover state for secondary action elements",
|
|
4067
|
+
category: "background",
|
|
4068
|
+
group: "actions"
|
|
4069
|
+
},
|
|
4070
|
+
"secondary-foreground": {
|
|
4071
|
+
value: "var(--text-neutral-light-100)",
|
|
4072
|
+
description: "Text color for secondary action elements",
|
|
4073
|
+
category: "foreground",
|
|
4074
|
+
group: "actions"
|
|
4075
|
+
},
|
|
4076
|
+
"secondary-foreground-hover": {
|
|
4077
|
+
value: "var(--text-neutral-light-50)",
|
|
4078
|
+
description: "Hover text color for secondary action elements",
|
|
4079
|
+
category: "foreground",
|
|
4080
|
+
group: "actions"
|
|
4081
|
+
},
|
|
4082
|
+
"secondary-border": {
|
|
4083
|
+
value: "var(--bg-neutral-light-800)",
|
|
4084
|
+
description: "Border color for secondary buttons",
|
|
4085
|
+
usage: "Use for outlined secondary buttons",
|
|
4086
|
+
category: "border",
|
|
4087
|
+
group: "actions"
|
|
4088
|
+
},
|
|
4089
|
+
"success-background": {
|
|
4090
|
+
value: "var(--bg-forest-600)",
|
|
4091
|
+
description: "Success action background color",
|
|
4092
|
+
usage: "Use for success states, confirmations, and positive actions",
|
|
4093
|
+
category: "background",
|
|
4094
|
+
group: "actions"
|
|
4095
|
+
},
|
|
4096
|
+
"success-background-hover": {
|
|
4097
|
+
value: "var(--bg-forest-400)",
|
|
4098
|
+
description: "Hover state for success elements",
|
|
4099
|
+
category: "background",
|
|
4100
|
+
group: "actions"
|
|
4101
|
+
},
|
|
4102
|
+
"success-foreground": {
|
|
4103
|
+
value: "var(--text-neutral-light-50)",
|
|
4104
|
+
description: "Text color for success action elements",
|
|
4105
|
+
category: "foreground",
|
|
4106
|
+
group: "actions"
|
|
4107
|
+
},
|
|
4108
|
+
"success-foreground-hover": {
|
|
4109
|
+
value: "var(--text-base-black)",
|
|
4110
|
+
description: "Hover text color for success elements",
|
|
4111
|
+
category: "foreground",
|
|
4112
|
+
group: "actions"
|
|
4113
|
+
},
|
|
4114
|
+
"warning-background": {
|
|
4115
|
+
value: "var(--bg-amber-600)",
|
|
4116
|
+
description: "Warning action background color",
|
|
4117
|
+
usage: "Use for warning states and cautionary actions",
|
|
4118
|
+
category: "background",
|
|
4119
|
+
group: "actions"
|
|
4120
|
+
},
|
|
4121
|
+
"warning-background-hover": {
|
|
4122
|
+
value: "var(--bg-amber-400)",
|
|
4123
|
+
description: "Hover state for warning elements",
|
|
4124
|
+
category: "background",
|
|
4125
|
+
group: "actions"
|
|
4126
|
+
},
|
|
4127
|
+
"warning-foreground": {
|
|
4128
|
+
value: "var(--text-neutral-light-50)",
|
|
4129
|
+
description: "Text color for warning action elements",
|
|
4130
|
+
category: "foreground",
|
|
4131
|
+
group: "actions"
|
|
4132
|
+
},
|
|
4133
|
+
"warning-foreground-hover": {
|
|
4134
|
+
value: "var(--text-base-black)",
|
|
4135
|
+
description: "Hover text color for warning elements",
|
|
4136
|
+
category: "foreground",
|
|
4137
|
+
group: "actions"
|
|
4138
|
+
},
|
|
4139
|
+
"danger-background": {
|
|
4140
|
+
value: "var(--bg-cherry-500)",
|
|
4141
|
+
description: "Danger action background color",
|
|
4142
|
+
usage: "Use for destructive actions, errors, and critical warnings",
|
|
4143
|
+
category: "background",
|
|
4144
|
+
group: "actions"
|
|
4145
|
+
},
|
|
4146
|
+
"danger-background-hover": {
|
|
4147
|
+
value: "var(--bg-cherry-400)",
|
|
4148
|
+
description: "Hover state for danger elements",
|
|
4149
|
+
category: "background",
|
|
4150
|
+
group: "actions"
|
|
4151
|
+
},
|
|
4152
|
+
"danger-foreground": {
|
|
4153
|
+
value: "var(--text-neutral-light-1000)",
|
|
4154
|
+
description: "Text color for danger action elements",
|
|
4155
|
+
category: "foreground",
|
|
4156
|
+
group: "actions"
|
|
4157
|
+
},
|
|
4158
|
+
"danger-foreground-hover": {
|
|
4159
|
+
value: "var(--text-base-white)",
|
|
4160
|
+
description: "Hover text color for danger elements",
|
|
4161
|
+
category: "foreground",
|
|
4162
|
+
group: "actions"
|
|
4163
|
+
},
|
|
4164
|
+
"l1-background-transparent": {
|
|
4165
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-1000), transparent 100%)",
|
|
4166
|
+
description: "",
|
|
4167
|
+
category: "background",
|
|
4168
|
+
group: "surface-levels"
|
|
4169
|
+
},
|
|
4170
|
+
"l1-background-60": {
|
|
4171
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-1000), transparent 40%)",
|
|
4172
|
+
description: "",
|
|
4173
|
+
category: "background",
|
|
4174
|
+
group: "surface-levels"
|
|
4175
|
+
},
|
|
4176
|
+
"l2-background-transparent": {
|
|
4177
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-950), transparent 100%)",
|
|
4178
|
+
description: "",
|
|
4179
|
+
category: "background",
|
|
4180
|
+
group: "surface-levels"
|
|
4181
|
+
},
|
|
4182
|
+
"l2-background-60": {
|
|
4183
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-950), transparent 40%)",
|
|
4184
|
+
description: "",
|
|
4185
|
+
category: "background",
|
|
4186
|
+
group: "surface-levels"
|
|
4187
|
+
},
|
|
4188
|
+
"l3-background-transparent": {
|
|
4189
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-800), transparent 100%)",
|
|
4190
|
+
description: "",
|
|
4191
|
+
category: "background",
|
|
4192
|
+
group: "surface-levels"
|
|
4193
|
+
},
|
|
4194
|
+
"l3-background-60": {
|
|
4195
|
+
value: "color-mix(in srgb, var(--bg-neutral-light-800), transparent 40%)",
|
|
4196
|
+
description: "",
|
|
4197
|
+
category: "background",
|
|
4198
|
+
group: "surface-levels"
|
|
4199
|
+
},
|
|
4200
|
+
"alert-strip-button-background": {
|
|
4201
|
+
value: "color-mix(in srgb, var(--bg-ink-400), transparent 40%)",
|
|
4202
|
+
description: "",
|
|
4203
|
+
category: "background",
|
|
4204
|
+
group: "alerts"
|
|
4205
|
+
},
|
|
4206
|
+
"callout-primary-background": {
|
|
4207
|
+
value: "color-mix(in srgb, var(--bg-robin-500), transparent 90%)",
|
|
4208
|
+
description: "Background for informational callout boxes",
|
|
4209
|
+
usage: "Use for info callouts, tips, and general announcements",
|
|
4210
|
+
category: "background",
|
|
4211
|
+
group: "callouts"
|
|
4212
|
+
},
|
|
4213
|
+
"callout-primary-border": {
|
|
4214
|
+
value: "color-mix(in srgb, var(--bg-robin-500), transparent 80%)",
|
|
4215
|
+
description: "Border for informational callout boxes",
|
|
4216
|
+
category: "border",
|
|
4217
|
+
group: "callouts"
|
|
4218
|
+
},
|
|
4219
|
+
"callout-primary-title": {
|
|
4220
|
+
value: "var(--bg-robin-600)",
|
|
4221
|
+
description: "Title text color for informational callouts",
|
|
4222
|
+
category: "foreground",
|
|
4223
|
+
group: "callouts"
|
|
4224
|
+
},
|
|
4225
|
+
"callout-primary-description": {
|
|
4226
|
+
value: "var(--bg-robin-600)",
|
|
4227
|
+
description: "Description text color for informational callouts",
|
|
4228
|
+
category: "foreground",
|
|
4229
|
+
group: "callouts"
|
|
4230
|
+
},
|
|
4231
|
+
"callout-primary-icon": {
|
|
4232
|
+
value: "var(--bg-robin-300)",
|
|
4233
|
+
description: "Icon color for informational callouts",
|
|
4234
|
+
category: "foreground",
|
|
4235
|
+
group: "callouts"
|
|
4236
|
+
},
|
|
4237
|
+
"callout-success-background": {
|
|
4238
|
+
value: "color-mix(in srgb, var(--bg-forest-600), transparent 90%)",
|
|
4239
|
+
description: "Background for success callout boxes",
|
|
4240
|
+
usage: "Use for success messages and positive confirmations",
|
|
4241
|
+
category: "background",
|
|
4242
|
+
group: "callouts"
|
|
4243
|
+
},
|
|
4244
|
+
"callout-success-border": {
|
|
4245
|
+
value: "color-mix(in srgb, var(--bg-forest-600), transparent 80%)",
|
|
4246
|
+
description: "Border for success callout boxes",
|
|
4247
|
+
category: "border",
|
|
4248
|
+
group: "callouts"
|
|
4249
|
+
},
|
|
4250
|
+
"callout-success-title": {
|
|
4251
|
+
value: "var(--bg-forest-600)",
|
|
4252
|
+
description: "Title text color for success callouts",
|
|
4253
|
+
category: "foreground",
|
|
4254
|
+
group: "callouts"
|
|
4255
|
+
},
|
|
4256
|
+
"callout-success-description": {
|
|
4257
|
+
value: "var(--bg-forest-600)",
|
|
4258
|
+
description: "Description text color for success callouts",
|
|
4259
|
+
category: "foreground",
|
|
4260
|
+
group: "callouts"
|
|
4261
|
+
},
|
|
4262
|
+
"callout-success-icon": {
|
|
4263
|
+
value: "var(--bg-forest-700)",
|
|
4264
|
+
description: "Icon color for success callouts",
|
|
4265
|
+
category: "foreground",
|
|
4266
|
+
group: "callouts"
|
|
4267
|
+
},
|
|
4268
|
+
"callout-warning-background": {
|
|
4269
|
+
value: "color-mix(in srgb, var(--bg-amber-600), transparent 90%)",
|
|
4270
|
+
description: "Background for warning callout boxes",
|
|
4271
|
+
usage: "Use for warning messages and cautionary information",
|
|
4272
|
+
category: "background",
|
|
4273
|
+
group: "callouts"
|
|
4274
|
+
},
|
|
4275
|
+
"callout-warning-border": {
|
|
4276
|
+
value: "color-mix(in srgb, var(--bg-amber-600), transparent 80%)",
|
|
4277
|
+
description: "Border for warning callout boxes",
|
|
4278
|
+
category: "border",
|
|
4279
|
+
group: "callouts"
|
|
4280
|
+
},
|
|
4281
|
+
"callout-warning-title": {
|
|
4282
|
+
value: "var(--bg-amber-700)",
|
|
4283
|
+
description: "Title text color for warning callouts",
|
|
4284
|
+
category: "foreground",
|
|
4285
|
+
group: "callouts"
|
|
4286
|
+
},
|
|
4287
|
+
"callout-warning-description": {
|
|
4288
|
+
value: "var(--bg-amber-700)",
|
|
4289
|
+
description: "Description text color for warning callouts",
|
|
4290
|
+
category: "foreground",
|
|
4291
|
+
group: "callouts"
|
|
4292
|
+
},
|
|
4293
|
+
"callout-warning-icon": {
|
|
4294
|
+
value: "var(--bg-amber-800)",
|
|
4295
|
+
description: "Icon color for warning callouts",
|
|
4296
|
+
category: "foreground",
|
|
4297
|
+
group: "callouts"
|
|
4298
|
+
},
|
|
4299
|
+
"callout-error-background": {
|
|
4300
|
+
value: "color-mix(in srgb, var(--bg-cherry-500), transparent 90%)",
|
|
4301
|
+
description: "Background for error callout boxes",
|
|
4302
|
+
usage: "Use for error messages and critical information",
|
|
4303
|
+
category: "background",
|
|
4304
|
+
group: "callouts"
|
|
4305
|
+
},
|
|
4306
|
+
"callout-error-border": {
|
|
4307
|
+
value: "color-mix(in srgb, var(--bg-cherry-500), transparent 80%)",
|
|
4308
|
+
description: "Border for error callout boxes",
|
|
4309
|
+
category: "border",
|
|
4310
|
+
group: "callouts"
|
|
4311
|
+
},
|
|
4312
|
+
"callout-error-title": {
|
|
4313
|
+
value: "var(--bg-cherry-600)",
|
|
4314
|
+
description: "Title text color for error callouts",
|
|
4315
|
+
category: "foreground",
|
|
4316
|
+
group: "callouts"
|
|
4317
|
+
},
|
|
4318
|
+
"callout-error-description": {
|
|
4319
|
+
value: "var(--bg-cherry-600)",
|
|
4320
|
+
description: "Description text color for error callouts",
|
|
4321
|
+
category: "foreground",
|
|
4322
|
+
group: "callouts"
|
|
4323
|
+
},
|
|
4324
|
+
"callout-error-icon": {
|
|
4325
|
+
value: "var(--bg-cherry-700)",
|
|
4326
|
+
description: "Icon color for error callouts",
|
|
4327
|
+
category: "foreground",
|
|
4328
|
+
group: "callouts"
|
|
4329
|
+
},
|
|
4330
|
+
"accent-primary": {
|
|
4331
|
+
value: "var(--bg-robin-500)",
|
|
4332
|
+
description: "Primary brand accent color",
|
|
4333
|
+
usage: "Use for links, highlights, and brand elements",
|
|
4334
|
+
category: "background",
|
|
4335
|
+
group: "accents"
|
|
4336
|
+
},
|
|
4337
|
+
"accent-primary-hover": {
|
|
4338
|
+
value: "var(--bg-robin-400)",
|
|
4339
|
+
description: "Hover state for primary accent",
|
|
4340
|
+
category: "background",
|
|
4341
|
+
group: "accents"
|
|
4342
|
+
},
|
|
4343
|
+
"accent-primary-foreground": {
|
|
4344
|
+
value: "var(--text-vanilla-100)",
|
|
4345
|
+
description: "Text color on primary accent backgrounds",
|
|
4346
|
+
category: "foreground",
|
|
4347
|
+
group: "accents"
|
|
4348
|
+
},
|
|
4349
|
+
"accent-forest": {
|
|
4350
|
+
value: "var(--bg-forest-500)",
|
|
4351
|
+
description: "Green accent for success and positive indicators",
|
|
4352
|
+
usage: "Use for success badges, positive trends, and status indicators",
|
|
4353
|
+
category: "background",
|
|
4354
|
+
group: "accents"
|
|
4355
|
+
},
|
|
4356
|
+
"accent-forest-hover": {
|
|
4357
|
+
value: "var(--bg-forest-400)",
|
|
4358
|
+
description: "Hover state for forest accent",
|
|
4359
|
+
category: "background",
|
|
4360
|
+
group: "accents"
|
|
4361
|
+
},
|
|
4362
|
+
"accent-forest-foreground": {
|
|
4363
|
+
value: "var(--text-vanilla-100)",
|
|
4364
|
+
description: "Text color on forest accent backgrounds",
|
|
4365
|
+
category: "foreground",
|
|
4366
|
+
group: "accents"
|
|
4367
|
+
},
|
|
4368
|
+
"accent-amber": {
|
|
4369
|
+
value: "var(--bg-amber-500)",
|
|
4370
|
+
description: "Yellow/orange accent for warnings and attention",
|
|
4371
|
+
usage: "Use for warning badges, pending states, and attention indicators",
|
|
4372
|
+
category: "background",
|
|
4373
|
+
group: "accents"
|
|
4374
|
+
},
|
|
4375
|
+
"accent-amber-hover": {
|
|
4376
|
+
value: "var(--bg-amber-400)",
|
|
4377
|
+
description: "Hover state for amber accent",
|
|
4378
|
+
category: "background",
|
|
4379
|
+
group: "accents"
|
|
4380
|
+
},
|
|
4381
|
+
"accent-amber-foreground": {
|
|
4382
|
+
value: "var(--text-vanilla-100)",
|
|
4383
|
+
description: "Text color on amber accent backgrounds",
|
|
4384
|
+
category: "foreground",
|
|
4385
|
+
group: "accents"
|
|
4386
|
+
},
|
|
4387
|
+
"accent-cherry": {
|
|
4388
|
+
value: "var(--bg-cherry-500)",
|
|
4389
|
+
description: "Red accent for errors and critical states",
|
|
4390
|
+
usage: "Use for error badges, negative trends, and critical indicators",
|
|
4391
|
+
category: "background",
|
|
4392
|
+
group: "accents"
|
|
4393
|
+
},
|
|
4394
|
+
"accent-cherry-hover": {
|
|
4395
|
+
value: "var(--bg-cherry-400)",
|
|
4396
|
+
description: "Hover state for cherry accent",
|
|
4397
|
+
category: "background",
|
|
4398
|
+
group: "accents"
|
|
4399
|
+
},
|
|
4400
|
+
"accent-cherry-foreground": {
|
|
4401
|
+
value: "var(--text-vanilla-100)",
|
|
4402
|
+
description: "Text color on cherry accent backgrounds",
|
|
4403
|
+
category: "foreground",
|
|
4404
|
+
group: "accents"
|
|
4405
|
+
},
|
|
4406
|
+
"accent-aqua": {
|
|
4407
|
+
value: "var(--bg-aqua-500)",
|
|
4408
|
+
description: "Cyan/teal accent for informational elements",
|
|
4409
|
+
usage: "Use for info badges, links, and data visualization",
|
|
4410
|
+
category: "background",
|
|
4411
|
+
group: "accents"
|
|
4412
|
+
},
|
|
4413
|
+
"accent-aqua-hover": {
|
|
4414
|
+
value: "var(--bg-aqua-400)",
|
|
4415
|
+
description: "Hover state for aqua accent",
|
|
4416
|
+
category: "background",
|
|
4417
|
+
group: "accents"
|
|
4418
|
+
},
|
|
4419
|
+
"accent-aqua-foreground": {
|
|
4420
|
+
value: "var(--text-vanilla-100)",
|
|
4421
|
+
description: "Text color on aqua accent backgrounds",
|
|
4422
|
+
category: "foreground",
|
|
4423
|
+
group: "accents"
|
|
4424
|
+
},
|
|
4425
|
+
"accent-sakura": {
|
|
4426
|
+
value: "var(--bg-sakura-500)",
|
|
4427
|
+
description: "Pink accent for decorative elements",
|
|
4428
|
+
usage: "Use for tags, labels, and data visualization variety",
|
|
4429
|
+
category: "background",
|
|
4430
|
+
group: "accents"
|
|
4431
|
+
},
|
|
4432
|
+
"accent-sakura-hover": {
|
|
4433
|
+
value: "var(--bg-sakura-400)",
|
|
4434
|
+
description: "Hover state for sakura accent",
|
|
4435
|
+
category: "background",
|
|
4436
|
+
group: "accents"
|
|
4437
|
+
},
|
|
4438
|
+
"accent-sakura-foreground": {
|
|
4439
|
+
value: "var(--text-vanilla-100)",
|
|
4440
|
+
description: "Text color on sakura accent backgrounds",
|
|
4441
|
+
category: "foreground",
|
|
4442
|
+
group: "accents"
|
|
4443
|
+
},
|
|
4444
|
+
"accent-sienna": {
|
|
4445
|
+
value: "var(--bg-sienna-500)",
|
|
4446
|
+
description: "Brown/orange accent for earthy elements",
|
|
4447
|
+
usage: "Use for tags, labels, and data visualization variety",
|
|
4448
|
+
category: "background",
|
|
4449
|
+
group: "accents"
|
|
4450
|
+
},
|
|
4451
|
+
"accent-sienna-hover": {
|
|
4452
|
+
value: "var(--bg-sienna-400)",
|
|
4453
|
+
description: "Hover state for sienna accent",
|
|
4454
|
+
category: "background",
|
|
4455
|
+
group: "accents"
|
|
4456
|
+
},
|
|
4457
|
+
"accent-sienna-foreground": {
|
|
4458
|
+
value: "var(--text-vanilla-100)",
|
|
4459
|
+
description: "Text color on sienna accent backgrounds",
|
|
4460
|
+
category: "foreground",
|
|
4461
|
+
group: "accents"
|
|
4462
|
+
}
|
|
4463
|
+
}
|
|
4464
|
+
},
|
|
4465
|
+
dark: {
|
|
4466
|
+
meta: {
|
|
4467
|
+
"color-scheme": "dark",
|
|
4468
|
+
selector: "[data-theme='default'].dark"
|
|
4469
|
+
},
|
|
4470
|
+
tokens: {
|
|
4471
|
+
background: {
|
|
4472
|
+
value: "var(--bg-ink-500)",
|
|
4473
|
+
description: "",
|
|
4474
|
+
category: "background",
|
|
4475
|
+
group: "legacy"
|
|
4476
|
+
},
|
|
4477
|
+
foreground: {
|
|
4478
|
+
value: "var(--text-vanilla-400)",
|
|
4479
|
+
description: "",
|
|
4480
|
+
category: "foreground",
|
|
4481
|
+
group: "legacy"
|
|
4482
|
+
},
|
|
4483
|
+
card: {
|
|
4484
|
+
value: "var(--bg-ink-400)",
|
|
4485
|
+
description: "",
|
|
4486
|
+
category: "background",
|
|
4487
|
+
group: "legacy"
|
|
4488
|
+
},
|
|
4489
|
+
"card-foreground": {
|
|
4490
|
+
value: "var(--text-vanilla-100)",
|
|
4491
|
+
description: "",
|
|
4492
|
+
category: "foreground",
|
|
4493
|
+
group: "legacy"
|
|
4494
|
+
},
|
|
4495
|
+
popover: {
|
|
4496
|
+
value: "var(--bg-ink-400)",
|
|
4497
|
+
description: "",
|
|
4498
|
+
category: "background",
|
|
4499
|
+
group: "legacy"
|
|
4500
|
+
},
|
|
4501
|
+
"popover-foreground": {
|
|
4502
|
+
value: "var(--text-vanilla-100)",
|
|
4503
|
+
description: "",
|
|
4504
|
+
category: "foreground",
|
|
4505
|
+
group: "legacy"
|
|
4506
|
+
},
|
|
4507
|
+
primary: {
|
|
4508
|
+
value: "var(--bg-robin-500)",
|
|
4509
|
+
description: "",
|
|
4510
|
+
category: "background",
|
|
4511
|
+
group: "legacy"
|
|
4512
|
+
},
|
|
4513
|
+
secondary: {
|
|
4514
|
+
value: "var(--bg-slate-500)",
|
|
4515
|
+
description: "",
|
|
4516
|
+
category: "background",
|
|
4517
|
+
group: "legacy"
|
|
4518
|
+
},
|
|
4519
|
+
muted: {
|
|
4520
|
+
value: "var(--bg-slate-500)",
|
|
4521
|
+
description: "",
|
|
4522
|
+
category: "background",
|
|
4523
|
+
group: "legacy"
|
|
4524
|
+
},
|
|
4525
|
+
"muted-foreground": {
|
|
4526
|
+
value: "var(--text-vanilla-400)",
|
|
4527
|
+
description: "",
|
|
4528
|
+
category: "foreground",
|
|
4529
|
+
group: "legacy"
|
|
4530
|
+
},
|
|
4531
|
+
accent: {
|
|
4532
|
+
value: "var(--bg-slate-300)",
|
|
4533
|
+
description: "",
|
|
4534
|
+
category: "background",
|
|
4535
|
+
group: "legacy"
|
|
4536
|
+
},
|
|
4537
|
+
"accent-foreground": {
|
|
4538
|
+
value: "var(--text-vanilla-100)",
|
|
4539
|
+
description: "",
|
|
4540
|
+
category: "foreground",
|
|
4541
|
+
group: "legacy"
|
|
4542
|
+
},
|
|
4543
|
+
destructive: {
|
|
4544
|
+
value: "var(--bg-cherry-500)",
|
|
4545
|
+
description: "",
|
|
4546
|
+
category: "background",
|
|
4547
|
+
group: "legacy"
|
|
4548
|
+
},
|
|
4549
|
+
"destructive-foreground": {
|
|
4550
|
+
value: "var(--text-ink-500)",
|
|
4551
|
+
description: "",
|
|
4552
|
+
category: "foreground",
|
|
4553
|
+
group: "legacy"
|
|
4554
|
+
},
|
|
4555
|
+
border: {
|
|
4556
|
+
value: "var(--bg-slate-400)",
|
|
4557
|
+
description: "",
|
|
4558
|
+
category: "border",
|
|
4559
|
+
group: "legacy"
|
|
4560
|
+
},
|
|
4561
|
+
input: {
|
|
4562
|
+
value: "var(--bg-slate-300)",
|
|
4563
|
+
description: "",
|
|
4564
|
+
category: "border",
|
|
4565
|
+
group: "legacy"
|
|
4566
|
+
},
|
|
4567
|
+
ring: {
|
|
4568
|
+
value: "var(--bg-robin-500)",
|
|
4569
|
+
description: "",
|
|
4570
|
+
category: "border",
|
|
4571
|
+
group: "legacy"
|
|
4572
|
+
},
|
|
4573
|
+
radius: {
|
|
4574
|
+
value: "0.25rem",
|
|
4575
|
+
description: "",
|
|
4576
|
+
category: "other",
|
|
4577
|
+
group: "legacy"
|
|
4578
|
+
},
|
|
4579
|
+
"chart-1": {
|
|
4580
|
+
value: "var(--bg-robin-400)",
|
|
4581
|
+
description: "",
|
|
4582
|
+
category: "background",
|
|
4583
|
+
group: "charts"
|
|
4584
|
+
},
|
|
4585
|
+
"chart-2": {
|
|
4586
|
+
value: "var(--bg-robin-500)",
|
|
4587
|
+
description: "",
|
|
4588
|
+
category: "background",
|
|
4589
|
+
group: "charts"
|
|
4590
|
+
},
|
|
4591
|
+
"chart-3": {
|
|
4592
|
+
value: "var(--bg-robin-600)",
|
|
4593
|
+
description: "",
|
|
4594
|
+
category: "background",
|
|
4595
|
+
group: "charts"
|
|
4596
|
+
},
|
|
4597
|
+
"chart-4": {
|
|
4598
|
+
value: "var(--bg-slate-200)",
|
|
4599
|
+
description: "",
|
|
4600
|
+
category: "background",
|
|
4601
|
+
group: "charts"
|
|
4602
|
+
},
|
|
4603
|
+
"chart-5": {
|
|
4604
|
+
value: "var(--bg-slate-300)",
|
|
4605
|
+
description: "",
|
|
4606
|
+
category: "background",
|
|
4607
|
+
group: "charts"
|
|
4608
|
+
},
|
|
4609
|
+
sidebar: {
|
|
4610
|
+
value: "var(--bg-slate-500)",
|
|
4611
|
+
description: "",
|
|
4612
|
+
category: "background",
|
|
4613
|
+
group: "sidebar"
|
|
4614
|
+
},
|
|
4615
|
+
"sidebar-foreground": {
|
|
4616
|
+
value: "var(--text-vanilla-400)",
|
|
4617
|
+
description: "",
|
|
4618
|
+
category: "foreground",
|
|
4619
|
+
group: "sidebar"
|
|
4620
|
+
},
|
|
4621
|
+
"sidebar-primary": {
|
|
4622
|
+
value: "var(--bg-robin-500)",
|
|
4623
|
+
description: "",
|
|
4624
|
+
category: "background",
|
|
4625
|
+
group: "sidebar"
|
|
4626
|
+
},
|
|
4627
|
+
"sidebar-primary-foreground": {
|
|
4628
|
+
value: "var(--text-ink-500)",
|
|
4629
|
+
description: "",
|
|
4630
|
+
category: "foreground",
|
|
4631
|
+
group: "sidebar"
|
|
4632
|
+
},
|
|
4633
|
+
"sidebar-accent": {
|
|
4634
|
+
value: "var(--bg-slate-400)",
|
|
4635
|
+
description: "",
|
|
4636
|
+
category: "background",
|
|
4637
|
+
group: "sidebar"
|
|
4638
|
+
},
|
|
4639
|
+
"sidebar-accent-foreground": {
|
|
4640
|
+
value: "var(--text-vanilla-400)",
|
|
4641
|
+
description: "",
|
|
4642
|
+
category: "foreground",
|
|
4643
|
+
group: "sidebar"
|
|
4644
|
+
},
|
|
4645
|
+
"sidebar-border": {
|
|
4646
|
+
value: "var(--bg-slate-500)",
|
|
4647
|
+
description: "",
|
|
4648
|
+
category: "border",
|
|
4649
|
+
group: "sidebar"
|
|
4650
|
+
},
|
|
4651
|
+
"sidebar-ring": {
|
|
4652
|
+
value: "var(--bg-robin-500)",
|
|
4653
|
+
description: "",
|
|
4654
|
+
category: "border",
|
|
4655
|
+
group: "sidebar"
|
|
4656
|
+
},
|
|
4657
|
+
"font-sans": {
|
|
4658
|
+
value: "'Inter'",
|
|
4659
|
+
description: "",
|
|
4660
|
+
category: "typography",
|
|
4661
|
+
group: "fonts"
|
|
4662
|
+
},
|
|
4663
|
+
"font-serif": {
|
|
4664
|
+
value: "'Open Sans'",
|
|
4665
|
+
description: "",
|
|
4666
|
+
category: "typography",
|
|
4667
|
+
group: "fonts"
|
|
4668
|
+
},
|
|
4669
|
+
"font-mono": {
|
|
4670
|
+
value: "'Geist Mono'",
|
|
4671
|
+
description: "",
|
|
4672
|
+
category: "typography",
|
|
4673
|
+
group: "fonts"
|
|
4674
|
+
},
|
|
4675
|
+
"base-white": {
|
|
4676
|
+
value: "var(--text-base-white)",
|
|
4677
|
+
description: "",
|
|
4678
|
+
category: "foreground",
|
|
4679
|
+
group: "base"
|
|
4680
|
+
},
|
|
4681
|
+
"base-black": {
|
|
4682
|
+
value: "var(--text-base-black)",
|
|
4683
|
+
description: "",
|
|
4684
|
+
category: "foreground",
|
|
4685
|
+
group: "base"
|
|
4686
|
+
},
|
|
4687
|
+
"l1-background": {
|
|
4688
|
+
value: "var(--bg-neutral-dark-1000)",
|
|
4689
|
+
description: "Primary page background for the outermost container",
|
|
4690
|
+
usage: "Use for main app shell, page background, and root containers",
|
|
4691
|
+
dontUse: "Avoid for cards, modals, or nested elements - use l2 or l3 instead",
|
|
4692
|
+
category: "background",
|
|
4693
|
+
group: "surface-levels"
|
|
4694
|
+
},
|
|
4695
|
+
"l2-background": {
|
|
4696
|
+
value: "var(--bg-neutral-dark-900)",
|
|
4697
|
+
description: "Secondary background for cards and elevated surfaces",
|
|
4698
|
+
usage: "Use for cards, panels, sidebars, and first-level nested containers",
|
|
4699
|
+
dontUse: "Avoid for deeply nested elements - use l3 instead",
|
|
4700
|
+
category: "background",
|
|
4701
|
+
group: "surface-levels"
|
|
4702
|
+
},
|
|
4703
|
+
"l3-background": {
|
|
4704
|
+
value: "var(--bg-neutral-dark-800)",
|
|
4705
|
+
description: "Tertiary background for nested elements within cards",
|
|
4706
|
+
usage: "Use for inputs, dropdowns, and elements nested inside l2 containers",
|
|
4707
|
+
category: "background",
|
|
4708
|
+
group: "surface-levels"
|
|
4709
|
+
},
|
|
4710
|
+
"l1-background-hover": {
|
|
4711
|
+
value: "var(--bg-neutral-dark-900)",
|
|
4712
|
+
description: "Hover state for l1-background elements",
|
|
4713
|
+
usage: "Use for interactive elements on l1 background surfaces",
|
|
4714
|
+
category: "background",
|
|
4715
|
+
group: "surface-levels"
|
|
4716
|
+
},
|
|
4717
|
+
"l2-background-hover": {
|
|
4718
|
+
value: "var(--bg-neutral-dark-700)",
|
|
4719
|
+
description: "Hover state for l2-background elements",
|
|
4720
|
+
usage: "Use for interactive elements on l2 background surfaces",
|
|
4721
|
+
category: "background",
|
|
4722
|
+
group: "surface-levels"
|
|
4723
|
+
},
|
|
4724
|
+
"l3-background-hover": {
|
|
4725
|
+
value: "var(--bg-neutral-dark-700)",
|
|
4726
|
+
description: "Hover state for l3-background elements",
|
|
4727
|
+
usage: "Use for interactive elements on l3 background surfaces",
|
|
4728
|
+
category: "background",
|
|
4729
|
+
group: "surface-levels"
|
|
4730
|
+
},
|
|
4731
|
+
"l1-foreground": {
|
|
4732
|
+
value: "var(--text-neutral-dark-50)",
|
|
4733
|
+
description: "Primary text color for l1 backgrounds",
|
|
4734
|
+
usage: "Use for headings and primary text on l1 surfaces",
|
|
4735
|
+
category: "foreground",
|
|
4736
|
+
group: "surface-levels"
|
|
4737
|
+
},
|
|
4738
|
+
"l1-foreground-hover": {
|
|
4739
|
+
value: "var(--text-base-white)",
|
|
4740
|
+
description: "Hover text color for interactive elements on l1",
|
|
4741
|
+
category: "foreground",
|
|
4742
|
+
group: "surface-levels"
|
|
4743
|
+
},
|
|
4744
|
+
"l2-foreground": {
|
|
4745
|
+
value: "var(--text-neutral-dark-100)",
|
|
4746
|
+
description: "Secondary text color for l2 backgrounds",
|
|
4747
|
+
usage: "Use for body text and secondary content on l2 surfaces",
|
|
4748
|
+
category: "foreground",
|
|
4749
|
+
group: "surface-levels"
|
|
4750
|
+
},
|
|
4751
|
+
"l2-foreground-hover": {
|
|
4752
|
+
value: "var(--text-neutral-dark-50)",
|
|
4753
|
+
description: "Hover text color for interactive elements on l2",
|
|
4754
|
+
category: "foreground",
|
|
4755
|
+
group: "surface-levels"
|
|
4756
|
+
},
|
|
4757
|
+
"l3-foreground": {
|
|
4758
|
+
value: "var(--text-neutral-dark-200)",
|
|
4759
|
+
description: "Tertiary text color for l3 backgrounds and muted text",
|
|
4760
|
+
usage: "Use for captions, labels, and less prominent text",
|
|
4761
|
+
category: "foreground",
|
|
4762
|
+
group: "surface-levels"
|
|
4763
|
+
},
|
|
4764
|
+
"l3-foreground-hover": {
|
|
4765
|
+
value: "var(--text-neutral-dark-300)",
|
|
4766
|
+
description: "Hover text color for interactive elements on l3",
|
|
4767
|
+
category: "foreground",
|
|
4768
|
+
group: "surface-levels"
|
|
4769
|
+
},
|
|
4770
|
+
"l1-border": {
|
|
4771
|
+
value: "var(--bg-neutral-dark-900)",
|
|
4772
|
+
description: "Border color for elements on l1 backgrounds",
|
|
4773
|
+
usage: "Use for dividers and borders separating l1 content",
|
|
4774
|
+
category: "border",
|
|
4775
|
+
group: "surface-levels"
|
|
4776
|
+
},
|
|
4777
|
+
"l2-border": {
|
|
4778
|
+
value: "var(--bg-neutral-dark-800)",
|
|
4779
|
+
description: "Border color for elements on l2 backgrounds",
|
|
4780
|
+
usage: "Use for card borders and dividers within cards",
|
|
4781
|
+
category: "border",
|
|
4782
|
+
group: "surface-levels"
|
|
4783
|
+
},
|
|
4784
|
+
"l3-border": {
|
|
4785
|
+
value: "var(--bg-neutral-dark-700)",
|
|
4786
|
+
description: "Border color for elements on l3 backgrounds",
|
|
4787
|
+
usage: "Use for input borders and nested element dividers",
|
|
4788
|
+
category: "border",
|
|
4789
|
+
group: "surface-levels"
|
|
4790
|
+
},
|
|
4791
|
+
"primary-background": {
|
|
4792
|
+
value: "var(--bg-robin-500)",
|
|
4793
|
+
description: "Primary action background color",
|
|
4794
|
+
usage: "Use for primary buttons, CTAs, and main interactive elements",
|
|
4795
|
+
category: "background",
|
|
4796
|
+
group: "actions"
|
|
4797
|
+
},
|
|
4798
|
+
"primary-background-hover": {
|
|
4799
|
+
value: "var(--bg-robin-400)",
|
|
4800
|
+
description: "Hover state for primary action elements",
|
|
4801
|
+
category: "background",
|
|
4802
|
+
group: "actions"
|
|
4803
|
+
},
|
|
4804
|
+
"primary-foreground": {
|
|
4805
|
+
value: "var(--text-neutral-dark-50)",
|
|
4806
|
+
description: "Text color for primary action elements",
|
|
4807
|
+
usage: "Use for text on primary buttons and CTAs",
|
|
4808
|
+
category: "foreground",
|
|
4809
|
+
group: "actions"
|
|
4810
|
+
},
|
|
4811
|
+
"primary-foreground-hover": {
|
|
4812
|
+
value: "var(--text-base-white)",
|
|
4813
|
+
description: "Hover text color for primary action elements",
|
|
4814
|
+
category: "foreground",
|
|
4815
|
+
group: "actions"
|
|
4816
|
+
},
|
|
4817
|
+
"secondary-background": {
|
|
4818
|
+
value: "var(--bg-neutral-dark-900)",
|
|
4819
|
+
description: "Secondary action background color",
|
|
4820
|
+
usage: "Use for secondary buttons and less prominent actions",
|
|
4821
|
+
category: "background",
|
|
4822
|
+
group: "actions"
|
|
4823
|
+
},
|
|
4824
|
+
"secondary-background-hover": {
|
|
4825
|
+
value: "var(--bg-neutral-dark-700)",
|
|
4826
|
+
description: "Hover state for secondary action elements",
|
|
4827
|
+
category: "background",
|
|
4828
|
+
group: "actions"
|
|
4829
|
+
},
|
|
4830
|
+
"secondary-foreground": {
|
|
4831
|
+
value: "var(--text-neutral-dark-100)",
|
|
4832
|
+
description: "Text color for secondary action elements",
|
|
4833
|
+
category: "foreground",
|
|
4834
|
+
group: "actions"
|
|
4835
|
+
},
|
|
4836
|
+
"secondary-foreground-hover": {
|
|
4837
|
+
value: "var(--text-neutral-dark-50)",
|
|
4838
|
+
description: "Hover text color for secondary action elements",
|
|
4839
|
+
category: "foreground",
|
|
4840
|
+
group: "actions"
|
|
4841
|
+
},
|
|
4842
|
+
"secondary-border": {
|
|
4843
|
+
value: "var(--bg-neutral-dark-800)",
|
|
4844
|
+
description: "Border color for secondary buttons",
|
|
4845
|
+
usage: "Use for outlined secondary buttons",
|
|
4846
|
+
category: "border",
|
|
4847
|
+
group: "actions"
|
|
4848
|
+
},
|
|
4849
|
+
"success-background": {
|
|
4850
|
+
value: "var(--bg-forest-600)",
|
|
4851
|
+
description: "Success action background color",
|
|
4852
|
+
usage: "Use for success states, confirmations, and positive actions",
|
|
4853
|
+
category: "background",
|
|
4854
|
+
group: "actions"
|
|
4855
|
+
},
|
|
4856
|
+
"success-background-hover": {
|
|
4857
|
+
value: "var(--bg-forest-400)",
|
|
4858
|
+
description: "Hover state for success elements",
|
|
4859
|
+
category: "background",
|
|
4860
|
+
group: "actions"
|
|
4861
|
+
},
|
|
4862
|
+
"success-foreground": {
|
|
4863
|
+
value: "var(--text-neutral-dark-50)",
|
|
4864
|
+
description: "Text color for success action elements",
|
|
4865
|
+
category: "foreground",
|
|
4866
|
+
group: "actions"
|
|
4867
|
+
},
|
|
4868
|
+
"success-foreground-hover": {
|
|
4869
|
+
value: "var(--text-base-white)",
|
|
4870
|
+
description: "Hover text color for success elements",
|
|
4871
|
+
category: "foreground",
|
|
4872
|
+
group: "actions"
|
|
4873
|
+
},
|
|
4874
|
+
"warning-background": {
|
|
4875
|
+
value: "var(--bg-amber-600)",
|
|
4876
|
+
description: "Warning action background color",
|
|
4877
|
+
usage: "Use for warning states and cautionary actions",
|
|
4878
|
+
category: "background",
|
|
4879
|
+
group: "actions"
|
|
4880
|
+
},
|
|
4881
|
+
"warning-background-hover": {
|
|
4882
|
+
value: "var(--bg-amber-400)",
|
|
4883
|
+
description: "Hover state for warning elements",
|
|
4884
|
+
category: "background",
|
|
4885
|
+
group: "actions"
|
|
4886
|
+
},
|
|
4887
|
+
"warning-foreground": {
|
|
4888
|
+
value: "var(--text-neutral-dark-50)",
|
|
4889
|
+
description: "Text color for warning action elements",
|
|
4890
|
+
category: "foreground",
|
|
4891
|
+
group: "actions"
|
|
4892
|
+
},
|
|
4893
|
+
"warning-foreground-hover": {
|
|
4894
|
+
value: "var(--text-base-white)",
|
|
4895
|
+
description: "Hover text color for warning elements",
|
|
4896
|
+
category: "foreground",
|
|
4897
|
+
group: "actions"
|
|
4898
|
+
},
|
|
4899
|
+
"danger-background": {
|
|
4900
|
+
value: "var(--bg-cherry-500)",
|
|
4901
|
+
description: "Danger action background color",
|
|
4902
|
+
usage: "Use for destructive actions, errors, and critical warnings",
|
|
4903
|
+
category: "background",
|
|
4904
|
+
group: "actions"
|
|
4905
|
+
},
|
|
4906
|
+
"danger-background-hover": {
|
|
4907
|
+
value: "var(--bg-cherry-400)",
|
|
4908
|
+
description: "Hover state for danger elements",
|
|
4909
|
+
category: "background",
|
|
4910
|
+
group: "actions"
|
|
4911
|
+
},
|
|
4912
|
+
"danger-foreground": {
|
|
4913
|
+
value: "var(--text-neutral-dark-50)",
|
|
4914
|
+
description: "Text color for danger action elements",
|
|
4915
|
+
category: "foreground",
|
|
4916
|
+
group: "actions"
|
|
4917
|
+
},
|
|
4918
|
+
"danger-foreground-hover": {
|
|
4919
|
+
value: "var(--text-base-white)",
|
|
4920
|
+
description: "Hover text color for danger elements",
|
|
4921
|
+
category: "foreground",
|
|
4922
|
+
group: "actions"
|
|
4923
|
+
},
|
|
4924
|
+
"l1-background-transparent": {
|
|
4925
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-1000), transparent 100%)",
|
|
4926
|
+
description: "",
|
|
4927
|
+
category: "background",
|
|
4928
|
+
group: "surface-levels"
|
|
4929
|
+
},
|
|
4930
|
+
"l1-background-60": {
|
|
4931
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-1000), transparent 40%)",
|
|
4932
|
+
description: "",
|
|
4933
|
+
category: "background",
|
|
4934
|
+
group: "surface-levels"
|
|
4935
|
+
},
|
|
4936
|
+
"l2-background-transparent": {
|
|
4937
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-900), transparent 100%)",
|
|
4938
|
+
description: "",
|
|
4939
|
+
category: "background",
|
|
4940
|
+
group: "surface-levels"
|
|
4941
|
+
},
|
|
4942
|
+
"l2-background-60": {
|
|
4943
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-900), transparent 40%)",
|
|
4944
|
+
description: "",
|
|
4945
|
+
category: "background",
|
|
4946
|
+
group: "surface-levels"
|
|
4947
|
+
},
|
|
4948
|
+
"l3-background-transparent": {
|
|
4949
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-800), transparent 100%)",
|
|
4950
|
+
description: "",
|
|
4951
|
+
category: "background",
|
|
4952
|
+
group: "surface-levels"
|
|
4953
|
+
},
|
|
4954
|
+
"l3-background-60": {
|
|
4955
|
+
value: "color-mix(in srgb, var(--bg-neutral-dark-800), transparent 40%)",
|
|
4956
|
+
description: "",
|
|
4957
|
+
category: "background",
|
|
4958
|
+
group: "surface-levels"
|
|
4959
|
+
},
|
|
4960
|
+
"callout-primary-background": {
|
|
4961
|
+
value: "color-mix(in srgb, var(--bg-robin-500), transparent 90%)",
|
|
4962
|
+
description: "Background for informational callout boxes",
|
|
4963
|
+
usage: "Use for info callouts, tips, and general announcements",
|
|
4964
|
+
category: "background",
|
|
4965
|
+
group: "callouts"
|
|
4966
|
+
},
|
|
4967
|
+
"callout-primary-border": {
|
|
4968
|
+
value: "color-mix(in srgb, var(--bg-robin-500), transparent 80%)",
|
|
4969
|
+
description: "Border for informational callout boxes",
|
|
4970
|
+
category: "border",
|
|
4971
|
+
group: "callouts"
|
|
4972
|
+
},
|
|
4973
|
+
"callout-primary-title": {
|
|
4974
|
+
value: "var(--bg-robin-400)",
|
|
4975
|
+
description: "Title text color for informational callouts",
|
|
4976
|
+
category: "foreground",
|
|
4977
|
+
group: "callouts"
|
|
4978
|
+
},
|
|
4979
|
+
"callout-primary-description": {
|
|
4980
|
+
value: "var(--bg-robin-400)",
|
|
4981
|
+
description: "Description text color for informational callouts",
|
|
4982
|
+
category: "foreground",
|
|
4983
|
+
group: "callouts"
|
|
4984
|
+
},
|
|
4985
|
+
"callout-primary-icon": {
|
|
4986
|
+
value: "var(--bg-robin-300)",
|
|
4987
|
+
description: "Icon color for informational callouts",
|
|
4988
|
+
category: "foreground",
|
|
4989
|
+
group: "callouts"
|
|
4990
|
+
},
|
|
4991
|
+
"callout-success-background": {
|
|
4992
|
+
value: "color-mix(in srgb, var(--bg-forest-600), transparent 90%)",
|
|
4993
|
+
description: "Background for success callout boxes",
|
|
4994
|
+
usage: "Use for success messages and positive confirmations",
|
|
4995
|
+
category: "background",
|
|
4996
|
+
group: "callouts"
|
|
4997
|
+
},
|
|
4998
|
+
"callout-success-border": {
|
|
4999
|
+
value: "color-mix(in srgb, var(--bg-forest-600), transparent 80%)",
|
|
5000
|
+
description: "Border for success callout boxes",
|
|
5001
|
+
category: "border",
|
|
5002
|
+
group: "callouts"
|
|
5003
|
+
},
|
|
5004
|
+
"callout-success-title": {
|
|
5005
|
+
value: "var(--bg-forest-400)",
|
|
5006
|
+
description: "Title text color for success callouts",
|
|
5007
|
+
category: "foreground",
|
|
5008
|
+
group: "callouts"
|
|
5009
|
+
},
|
|
5010
|
+
"callout-success-description": {
|
|
5011
|
+
value: "var(--bg-forest-400)",
|
|
5012
|
+
description: "Description text color for success callouts",
|
|
5013
|
+
category: "foreground",
|
|
5014
|
+
group: "callouts"
|
|
5015
|
+
},
|
|
5016
|
+
"callout-success-icon": {
|
|
5017
|
+
value: "var(--bg-forest-300)",
|
|
5018
|
+
description: "Icon color for success callouts",
|
|
5019
|
+
category: "foreground",
|
|
5020
|
+
group: "callouts"
|
|
5021
|
+
},
|
|
5022
|
+
"callout-warning-background": {
|
|
5023
|
+
value: "color-mix(in srgb, var(--bg-amber-600), transparent 90%)",
|
|
5024
|
+
description: "Background for warning callout boxes",
|
|
5025
|
+
usage: "Use for warning messages and cautionary information",
|
|
5026
|
+
category: "background",
|
|
5027
|
+
group: "callouts"
|
|
5028
|
+
},
|
|
5029
|
+
"callout-warning-border": {
|
|
5030
|
+
value: "color-mix(in srgb, var(--bg-amber-600), transparent 80%)",
|
|
5031
|
+
description: "Border for warning callout boxes",
|
|
5032
|
+
category: "border",
|
|
5033
|
+
group: "callouts"
|
|
5034
|
+
},
|
|
5035
|
+
"callout-warning-title": {
|
|
5036
|
+
value: "var(--bg-amber-400)",
|
|
5037
|
+
description: "Title text color for warning callouts",
|
|
5038
|
+
category: "foreground",
|
|
5039
|
+
group: "callouts"
|
|
5040
|
+
},
|
|
5041
|
+
"callout-warning-description": {
|
|
5042
|
+
value: "var(--bg-amber-400)",
|
|
5043
|
+
description: "Description text color for warning callouts",
|
|
5044
|
+
category: "foreground",
|
|
5045
|
+
group: "callouts"
|
|
5046
|
+
},
|
|
5047
|
+
"callout-warning-icon": {
|
|
5048
|
+
value: "var(--bg-amber-300)",
|
|
5049
|
+
description: "Icon color for warning callouts",
|
|
5050
|
+
category: "foreground",
|
|
5051
|
+
group: "callouts"
|
|
5052
|
+
},
|
|
5053
|
+
"callout-error-background": {
|
|
5054
|
+
value: "color-mix(in srgb, var(--bg-cherry-500), transparent 90%)",
|
|
5055
|
+
description: "Background for error callout boxes",
|
|
5056
|
+
usage: "Use for error messages and critical information",
|
|
5057
|
+
category: "background",
|
|
5058
|
+
group: "callouts"
|
|
5059
|
+
},
|
|
5060
|
+
"callout-error-border": {
|
|
5061
|
+
value: "color-mix(in srgb, var(--bg-cherry-500), transparent 80%)",
|
|
5062
|
+
description: "Border for error callout boxes",
|
|
5063
|
+
category: "border",
|
|
5064
|
+
group: "callouts"
|
|
5065
|
+
},
|
|
5066
|
+
"callout-error-title": {
|
|
5067
|
+
value: "var(--bg-cherry-400)",
|
|
5068
|
+
description: "Title text color for error callouts",
|
|
5069
|
+
category: "foreground",
|
|
5070
|
+
group: "callouts"
|
|
5071
|
+
},
|
|
5072
|
+
"callout-error-description": {
|
|
5073
|
+
value: "var(--bg-cherry-400)",
|
|
5074
|
+
description: "Description text color for error callouts",
|
|
5075
|
+
category: "foreground",
|
|
5076
|
+
group: "callouts"
|
|
5077
|
+
},
|
|
5078
|
+
"callout-error-icon": {
|
|
5079
|
+
value: "var(--bg-cherry-300)",
|
|
5080
|
+
description: "Icon color for error callouts",
|
|
5081
|
+
category: "foreground",
|
|
5082
|
+
group: "callouts"
|
|
5083
|
+
},
|
|
5084
|
+
"accent-primary": {
|
|
5085
|
+
value: "var(--bg-robin-500)",
|
|
5086
|
+
description: "Primary brand accent color",
|
|
5087
|
+
usage: "Use for links, highlights, and brand elements",
|
|
5088
|
+
category: "background",
|
|
5089
|
+
group: "accents"
|
|
5090
|
+
},
|
|
5091
|
+
"accent-primary-hover": {
|
|
5092
|
+
value: "var(--bg-robin-400)",
|
|
5093
|
+
description: "Hover state for primary accent",
|
|
5094
|
+
category: "background",
|
|
5095
|
+
group: "accents"
|
|
5096
|
+
},
|
|
5097
|
+
"accent-primary-foreground": {
|
|
5098
|
+
value: "var(--text-ink-500)",
|
|
5099
|
+
description: "Text color on primary accent backgrounds",
|
|
5100
|
+
category: "foreground",
|
|
5101
|
+
group: "accents"
|
|
5102
|
+
},
|
|
5103
|
+
"accent-forest": {
|
|
5104
|
+
value: "var(--bg-forest-500)",
|
|
5105
|
+
description: "Green accent for success and positive indicators",
|
|
5106
|
+
usage: "Use for success badges, positive trends, and status indicators",
|
|
5107
|
+
category: "background",
|
|
5108
|
+
group: "accents"
|
|
5109
|
+
},
|
|
5110
|
+
"accent-forest-hover": {
|
|
5111
|
+
value: "var(--bg-forest-400)",
|
|
5112
|
+
description: "Hover state for forest accent",
|
|
5113
|
+
category: "background",
|
|
5114
|
+
group: "accents"
|
|
5115
|
+
},
|
|
5116
|
+
"accent-forest-foreground": {
|
|
5117
|
+
value: "var(--text-ink-500)",
|
|
5118
|
+
description: "Text color on forest accent backgrounds",
|
|
5119
|
+
category: "foreground",
|
|
5120
|
+
group: "accents"
|
|
5121
|
+
},
|
|
5122
|
+
"accent-amber": {
|
|
5123
|
+
value: "var(--bg-amber-500)",
|
|
5124
|
+
description: "Yellow/orange accent for warnings and attention",
|
|
5125
|
+
usage: "Use for warning badges, pending states, and attention indicators",
|
|
5126
|
+
category: "background",
|
|
5127
|
+
group: "accents"
|
|
5128
|
+
},
|
|
5129
|
+
"accent-amber-hover": {
|
|
5130
|
+
value: "var(--bg-amber-400)",
|
|
5131
|
+
description: "Hover state for amber accent",
|
|
5132
|
+
category: "background",
|
|
5133
|
+
group: "accents"
|
|
5134
|
+
},
|
|
5135
|
+
"accent-amber-foreground": {
|
|
5136
|
+
value: "var(--text-ink-500)",
|
|
5137
|
+
description: "Text color on amber accent backgrounds",
|
|
5138
|
+
category: "foreground",
|
|
5139
|
+
group: "accents"
|
|
5140
|
+
},
|
|
5141
|
+
"accent-cherry": {
|
|
5142
|
+
value: "var(--bg-cherry-500)",
|
|
5143
|
+
description: "Red accent for errors and critical states",
|
|
5144
|
+
usage: "Use for error badges, negative trends, and critical indicators",
|
|
5145
|
+
category: "background",
|
|
5146
|
+
group: "accents"
|
|
5147
|
+
},
|
|
5148
|
+
"accent-cherry-hover": {
|
|
5149
|
+
value: "var(--bg-cherry-400)",
|
|
5150
|
+
description: "Hover state for cherry accent",
|
|
5151
|
+
category: "background",
|
|
5152
|
+
group: "accents"
|
|
5153
|
+
},
|
|
5154
|
+
"accent-cherry-foreground": {
|
|
5155
|
+
value: "var(--text-ink-500)",
|
|
5156
|
+
description: "Text color on cherry accent backgrounds",
|
|
5157
|
+
category: "foreground",
|
|
5158
|
+
group: "accents"
|
|
5159
|
+
},
|
|
5160
|
+
"accent-aqua": {
|
|
5161
|
+
value: "var(--bg-aqua-500)",
|
|
5162
|
+
description: "Cyan/teal accent for informational elements",
|
|
5163
|
+
usage: "Use for info badges, links, and data visualization",
|
|
5164
|
+
category: "background",
|
|
5165
|
+
group: "accents"
|
|
5166
|
+
},
|
|
5167
|
+
"accent-aqua-hover": {
|
|
5168
|
+
value: "var(--bg-aqua-400)",
|
|
5169
|
+
description: "Hover state for aqua accent",
|
|
5170
|
+
category: "background",
|
|
5171
|
+
group: "accents"
|
|
5172
|
+
},
|
|
5173
|
+
"accent-aqua-foreground": {
|
|
5174
|
+
value: "var(--text-ink-500)",
|
|
5175
|
+
description: "Text color on aqua accent backgrounds",
|
|
5176
|
+
category: "foreground",
|
|
5177
|
+
group: "accents"
|
|
5178
|
+
},
|
|
5179
|
+
"accent-sakura": {
|
|
5180
|
+
value: "var(--bg-sakura-500)",
|
|
5181
|
+
description: "Pink accent for decorative elements",
|
|
5182
|
+
usage: "Use for tags, labels, and data visualization variety",
|
|
5183
|
+
category: "background",
|
|
5184
|
+
group: "accents"
|
|
5185
|
+
},
|
|
5186
|
+
"accent-sakura-hover": {
|
|
5187
|
+
value: "var(--bg-sakura-400)",
|
|
5188
|
+
description: "Hover state for sakura accent",
|
|
5189
|
+
category: "background",
|
|
5190
|
+
group: "accents"
|
|
5191
|
+
},
|
|
5192
|
+
"accent-sakura-foreground": {
|
|
5193
|
+
value: "var(--text-ink-500)",
|
|
5194
|
+
description: "Text color on sakura accent backgrounds",
|
|
5195
|
+
category: "foreground",
|
|
5196
|
+
group: "accents"
|
|
5197
|
+
},
|
|
5198
|
+
"accent-sienna": {
|
|
5199
|
+
value: "var(--bg-sienna-500)",
|
|
5200
|
+
description: "Brown/orange accent for earthy elements",
|
|
5201
|
+
usage: "Use for tags, labels, and data visualization variety",
|
|
5202
|
+
category: "background",
|
|
5203
|
+
group: "accents"
|
|
5204
|
+
},
|
|
5205
|
+
"accent-sienna-hover": {
|
|
5206
|
+
value: "var(--bg-sienna-400)",
|
|
5207
|
+
description: "Hover state for sienna accent",
|
|
5208
|
+
category: "background",
|
|
5209
|
+
group: "accents"
|
|
5210
|
+
},
|
|
5211
|
+
"accent-sienna-foreground": {
|
|
5212
|
+
value: "var(--text-ink-500)",
|
|
5213
|
+
description: "Text color on sienna accent backgrounds",
|
|
5214
|
+
category: "foreground",
|
|
5215
|
+
group: "accents"
|
|
5216
|
+
}
|
|
5217
|
+
}
|
|
5218
|
+
}
|
|
5219
|
+
}
|
|
3625
5220
|
};
|
|
3626
5221
|
export {
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
5222
|
+
E as Color,
|
|
5223
|
+
b as ColorTailwind,
|
|
5224
|
+
A as Spacing,
|
|
5225
|
+
R as Style,
|
|
5226
|
+
S as StyleTailwind,
|
|
5227
|
+
T as Typography,
|
|
5228
|
+
h as TypographyStyles,
|
|
3634
5229
|
I as colorTokens,
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
N as
|
|
5230
|
+
x as semanticTokens,
|
|
5231
|
+
L as spacingTokens,
|
|
5232
|
+
N as typographyStylesTokens,
|
|
5233
|
+
m as typographyTokens
|
|
3638
5234
|
};
|