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