@etus/tokens 0.3.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tokens.css +654 -157
- package/dist/tokens.js +504 -144
- package/dist/tokens.meta.json +2872 -447
- package/package.json +1 -1
package/dist/tokens.meta.json
CHANGED
|
@@ -1407,6 +1407,46 @@
|
|
|
1407
1407
|
"light": "oklch(100.00% 0.0000 0)",
|
|
1408
1408
|
"dark": "oklch(20.46% 0.0000 0)"
|
|
1409
1409
|
},
|
|
1410
|
+
{
|
|
1411
|
+
"name": "popover-bg",
|
|
1412
|
+
"cssVar": "--popover-bg",
|
|
1413
|
+
"type": "color",
|
|
1414
|
+
"description": "Popover bg dark override per DES-1294 item 7.",
|
|
1415
|
+
"dark": "oklch(20.46% 0.0000 0)",
|
|
1416
|
+
"light": "oklch(100.00% 0.0000 0)"
|
|
1417
|
+
},
|
|
1418
|
+
{
|
|
1419
|
+
"name": "popover-border",
|
|
1420
|
+
"cssVar": "--popover-border",
|
|
1421
|
+
"type": "color",
|
|
1422
|
+
"description": "Popover border dark override per DES-1294 item 7.",
|
|
1423
|
+
"dark": "oklch(37.15% 0.0000 0)",
|
|
1424
|
+
"light": "oklch(92.19% 0.0000 0)"
|
|
1425
|
+
},
|
|
1426
|
+
{
|
|
1427
|
+
"name": "popover-content-background",
|
|
1428
|
+
"cssVar": "--popover-content-background",
|
|
1429
|
+
"type": "color",
|
|
1430
|
+
"description": "Popover content background dark override per DES-1294 item 7.",
|
|
1431
|
+
"dark": "oklch(20.46% 0.0000 0)",
|
|
1432
|
+
"light": "oklch(100.00% 0.0000 0)"
|
|
1433
|
+
},
|
|
1434
|
+
{
|
|
1435
|
+
"name": "popover-content-foreground",
|
|
1436
|
+
"cssVar": "--popover-content-foreground",
|
|
1437
|
+
"type": "color",
|
|
1438
|
+
"description": "Popover content foreground dark override per DES-1294 item 7.",
|
|
1439
|
+
"dark": "oklch(98.51% 0.0000 0)",
|
|
1440
|
+
"light": "oklch(20.46% 0.0000 0)"
|
|
1441
|
+
},
|
|
1442
|
+
{
|
|
1443
|
+
"name": "popover-fg",
|
|
1444
|
+
"cssVar": "--popover-fg",
|
|
1445
|
+
"type": "color",
|
|
1446
|
+
"description": "Popover fg dark override per DES-1294 item 7.",
|
|
1447
|
+
"dark": "oklch(98.51% 0.0000 0)",
|
|
1448
|
+
"light": "oklch(20.46% 0.0000 0)"
|
|
1449
|
+
},
|
|
1410
1450
|
{
|
|
1411
1451
|
"name": "popover-foreground",
|
|
1412
1452
|
"cssVar": "--popover-foreground",
|
|
@@ -1843,6 +1883,54 @@
|
|
|
1843
1883
|
},
|
|
1844
1884
|
"typography": {
|
|
1845
1885
|
"tokens": [
|
|
1886
|
+
{
|
|
1887
|
+
"name": "avatar-label-c2-font-weight",
|
|
1888
|
+
"cssVar": "--avatar-label-c2-font-weight",
|
|
1889
|
+
"type": "fontWeight",
|
|
1890
|
+
"value": "600"
|
|
1891
|
+
},
|
|
1892
|
+
{
|
|
1893
|
+
"name": "avatar-label-h3-font-weight",
|
|
1894
|
+
"cssVar": "--avatar-label-h3-font-weight",
|
|
1895
|
+
"type": "fontWeight",
|
|
1896
|
+
"value": "700"
|
|
1897
|
+
},
|
|
1898
|
+
{
|
|
1899
|
+
"name": "avatar-label-h4-font-weight",
|
|
1900
|
+
"cssVar": "--avatar-label-h4-font-weight",
|
|
1901
|
+
"type": "fontWeight",
|
|
1902
|
+
"value": "700"
|
|
1903
|
+
},
|
|
1904
|
+
{
|
|
1905
|
+
"name": "avatar-label-p1-font-weight",
|
|
1906
|
+
"cssVar": "--avatar-label-p1-font-weight",
|
|
1907
|
+
"type": "fontWeight",
|
|
1908
|
+
"value": "400"
|
|
1909
|
+
},
|
|
1910
|
+
{
|
|
1911
|
+
"name": "avatar-label-p2-font-weight",
|
|
1912
|
+
"cssVar": "--avatar-label-p2-font-weight",
|
|
1913
|
+
"type": "fontWeight",
|
|
1914
|
+
"value": "400"
|
|
1915
|
+
},
|
|
1916
|
+
{
|
|
1917
|
+
"name": "avatar-label-p3-font-weight",
|
|
1918
|
+
"cssVar": "--avatar-label-p3-font-weight",
|
|
1919
|
+
"type": "fontWeight",
|
|
1920
|
+
"value": "400"
|
|
1921
|
+
},
|
|
1922
|
+
{
|
|
1923
|
+
"name": "feature-item-link-font-weight",
|
|
1924
|
+
"cssVar": "--feature-item-link-font-weight",
|
|
1925
|
+
"type": "fontWeight",
|
|
1926
|
+
"value": "600"
|
|
1927
|
+
},
|
|
1928
|
+
{
|
|
1929
|
+
"name": "feature-item-title-font-weight",
|
|
1930
|
+
"cssVar": "--feature-item-title-font-weight",
|
|
1931
|
+
"type": "fontWeight",
|
|
1932
|
+
"value": "600"
|
|
1933
|
+
},
|
|
1846
1934
|
{
|
|
1847
1935
|
"name": "font-leading-loose",
|
|
1848
1936
|
"cssVar": "--font-leading-loose",
|
|
@@ -2159,7 +2247,8 @@
|
|
|
2159
2247
|
"name": "kbd-root-font-weight",
|
|
2160
2248
|
"cssVar": "--kbd-root-font-weight",
|
|
2161
2249
|
"type": "fontWeight",
|
|
2162
|
-
"
|
|
2250
|
+
"description": "Kbd font-weight aligned with Figma semibold (600) per DES-1077 — pre-fix was 500 (medium).",
|
|
2251
|
+
"value": "600"
|
|
2163
2252
|
},
|
|
2164
2253
|
{
|
|
2165
2254
|
"name": "label-optional-font-weight",
|
|
@@ -2171,7 +2260,8 @@
|
|
|
2171
2260
|
"name": "label-root-font-weight",
|
|
2172
2261
|
"cssVar": "--label-root-font-weight",
|
|
2173
2262
|
"type": "fontWeight",
|
|
2174
|
-
"
|
|
2263
|
+
"description": "Aligned with Figma style Paragraph/P3 — weight=normal (400)",
|
|
2264
|
+
"value": "400"
|
|
2175
2265
|
},
|
|
2176
2266
|
{
|
|
2177
2267
|
"name": "paragraph-base-font-family",
|
|
@@ -2203,6 +2293,27 @@
|
|
|
2203
2293
|
"type": "fontWeight",
|
|
2204
2294
|
"value": "600"
|
|
2205
2295
|
},
|
|
2296
|
+
{
|
|
2297
|
+
"name": "sidebar-nav-item-font-weight",
|
|
2298
|
+
"cssVar": "--sidebar-nav-item-font-weight",
|
|
2299
|
+
"type": "fontWeight",
|
|
2300
|
+
"description": "Panel nav-item label weight = normal.",
|
|
2301
|
+
"value": "400"
|
|
2302
|
+
},
|
|
2303
|
+
{
|
|
2304
|
+
"name": "sidebar-panel-header-font-weight",
|
|
2305
|
+
"cssVar": "--sidebar-panel-header-font-weight",
|
|
2306
|
+
"type": "fontWeight",
|
|
2307
|
+
"description": "Panel title weight = bold (Figma font-bold).",
|
|
2308
|
+
"value": "700"
|
|
2309
|
+
},
|
|
2310
|
+
{
|
|
2311
|
+
"name": "sidebar-section-title-font-weight",
|
|
2312
|
+
"cssVar": "--sidebar-section-title-font-weight",
|
|
2313
|
+
"type": "fontWeight",
|
|
2314
|
+
"description": "Section title weight = normal (Figma Inter Regular).",
|
|
2315
|
+
"value": "400"
|
|
2316
|
+
},
|
|
2206
2317
|
{
|
|
2207
2318
|
"name": "text-color-default",
|
|
2208
2319
|
"cssVar": "--text-color-default",
|
|
@@ -2531,17 +2642,32 @@
|
|
|
2531
2642
|
"type": "lineHeight",
|
|
2532
2643
|
"value": "32px"
|
|
2533
2644
|
},
|
|
2645
|
+
{
|
|
2646
|
+
"name": "text-size-2xs-font-size",
|
|
2647
|
+
"cssVar": "--text-size-2xs-font-size",
|
|
2648
|
+
"type": "fontSize",
|
|
2649
|
+
"description": "Text 2xs added per DES-1314 item 5.",
|
|
2650
|
+
"value": "10px"
|
|
2651
|
+
},
|
|
2652
|
+
{
|
|
2653
|
+
"name": "text-size-2xs-line-height",
|
|
2654
|
+
"cssVar": "--text-size-2xs-line-height",
|
|
2655
|
+
"type": "lineHeight",
|
|
2656
|
+
"value": "14px"
|
|
2657
|
+
},
|
|
2534
2658
|
{
|
|
2535
2659
|
"name": "text-size-3xl-font-size",
|
|
2536
2660
|
"cssVar": "--text-size-3xl-font-size",
|
|
2537
2661
|
"type": "fontSize",
|
|
2538
|
-
"
|
|
2662
|
+
"description": "Text 3xl aligned with Figma 32px per Bowser audit Text — pre-fix was 30px.",
|
|
2663
|
+
"value": "32px"
|
|
2539
2664
|
},
|
|
2540
2665
|
{
|
|
2541
2666
|
"name": "text-size-3xl-line-height",
|
|
2542
2667
|
"cssVar": "--text-size-3xl-line-height",
|
|
2543
2668
|
"type": "lineHeight",
|
|
2544
|
-
"
|
|
2669
|
+
"description": "Text 3xl line-height aligned with Figma 40px per Bowser audit Text — pre-fix was 36px.",
|
|
2670
|
+
"value": "40px"
|
|
2545
2671
|
},
|
|
2546
2672
|
{
|
|
2547
2673
|
"name": "text-size-4xl-font-size",
|
|
@@ -2553,7 +2679,60 @@
|
|
|
2553
2679
|
"name": "text-size-4xl-line-height",
|
|
2554
2680
|
"cssVar": "--text-size-4xl-line-height",
|
|
2555
2681
|
"type": "lineHeight",
|
|
2556
|
-
"
|
|
2682
|
+
"description": "Text 4xl line-height aligned with Figma 44px per Bowser audit Text — pre-fix was 40px.",
|
|
2683
|
+
"value": "44px"
|
|
2684
|
+
},
|
|
2685
|
+
{
|
|
2686
|
+
"name": "text-size-5xl-font-size",
|
|
2687
|
+
"cssVar": "--text-size-5xl-font-size",
|
|
2688
|
+
"type": "fontSize",
|
|
2689
|
+
"description": "Text 5xl added per DES-1314 item 5.",
|
|
2690
|
+
"value": "48px"
|
|
2691
|
+
},
|
|
2692
|
+
{
|
|
2693
|
+
"name": "text-size-5xl-line-height",
|
|
2694
|
+
"cssVar": "--text-size-5xl-line-height",
|
|
2695
|
+
"type": "lineHeight",
|
|
2696
|
+
"value": "56px"
|
|
2697
|
+
},
|
|
2698
|
+
{
|
|
2699
|
+
"name": "text-size-6xl-font-size",
|
|
2700
|
+
"cssVar": "--text-size-6xl-font-size",
|
|
2701
|
+
"type": "fontSize",
|
|
2702
|
+
"description": "Text 6xl added per DES-1314 item 5.",
|
|
2703
|
+
"value": "60px"
|
|
2704
|
+
},
|
|
2705
|
+
{
|
|
2706
|
+
"name": "text-size-6xl-line-height",
|
|
2707
|
+
"cssVar": "--text-size-6xl-line-height",
|
|
2708
|
+
"type": "lineHeight",
|
|
2709
|
+
"value": "68px"
|
|
2710
|
+
},
|
|
2711
|
+
{
|
|
2712
|
+
"name": "text-size-7xl-font-size",
|
|
2713
|
+
"cssVar": "--text-size-7xl-font-size",
|
|
2714
|
+
"type": "fontSize",
|
|
2715
|
+
"description": "Text 7xl added per DES-1314 item 5.",
|
|
2716
|
+
"value": "72px"
|
|
2717
|
+
},
|
|
2718
|
+
{
|
|
2719
|
+
"name": "text-size-7xl-line-height",
|
|
2720
|
+
"cssVar": "--text-size-7xl-line-height",
|
|
2721
|
+
"type": "lineHeight",
|
|
2722
|
+
"value": "80px"
|
|
2723
|
+
},
|
|
2724
|
+
{
|
|
2725
|
+
"name": "text-size-8xl-font-size",
|
|
2726
|
+
"cssVar": "--text-size-8xl-font-size",
|
|
2727
|
+
"type": "fontSize",
|
|
2728
|
+
"description": "Text 8xl added per DES-1314 item 5.",
|
|
2729
|
+
"value": "96px"
|
|
2730
|
+
},
|
|
2731
|
+
{
|
|
2732
|
+
"name": "text-size-8xl-line-height",
|
|
2733
|
+
"cssVar": "--text-size-8xl-line-height",
|
|
2734
|
+
"type": "lineHeight",
|
|
2735
|
+
"value": "104px"
|
|
2557
2736
|
},
|
|
2558
2737
|
{
|
|
2559
2738
|
"name": "text-size-base-font-size",
|
|
@@ -2629,6 +2808,27 @@
|
|
|
2629
2808
|
"description": "Tertiary text (neutral-400)",
|
|
2630
2809
|
"value": "oklch(71.55% 0.0000 0)"
|
|
2631
2810
|
},
|
|
2811
|
+
{
|
|
2812
|
+
"name": "text-variant-code-padding-x",
|
|
2813
|
+
"cssVar": "--text-variant-code-padding-x",
|
|
2814
|
+
"type": "dimension",
|
|
2815
|
+
"description": "Text variant=code horizontal padding per DES-1314 — was hardcoded.",
|
|
2816
|
+
"value": "0.3rem"
|
|
2817
|
+
},
|
|
2818
|
+
{
|
|
2819
|
+
"name": "text-variant-code-padding-y",
|
|
2820
|
+
"cssVar": "--text-variant-code-padding-y",
|
|
2821
|
+
"type": "dimension",
|
|
2822
|
+
"description": "Text variant=code vertical padding per DES-1314 — was hardcoded.",
|
|
2823
|
+
"value": "0.2rem"
|
|
2824
|
+
},
|
|
2825
|
+
{
|
|
2826
|
+
"name": "text-variant-code-radius",
|
|
2827
|
+
"cssVar": "--text-variant-code-radius",
|
|
2828
|
+
"type": "dimension",
|
|
2829
|
+
"description": "Text variant=code border-radius per DES-1314 — was bare rounded utility.",
|
|
2830
|
+
"value": "4px"
|
|
2831
|
+
},
|
|
2632
2832
|
{
|
|
2633
2833
|
"name": "text-warning",
|
|
2634
2834
|
"cssVar": "--text-warning",
|
|
@@ -3160,48 +3360,6 @@
|
|
|
3160
3360
|
"cssVar": "--layout-header-height",
|
|
3161
3361
|
"type": "dimension",
|
|
3162
3362
|
"value": "56px"
|
|
3163
|
-
},
|
|
3164
|
-
{
|
|
3165
|
-
"name": "layout-rail-background",
|
|
3166
|
-
"cssVar": "--layout-rail-background",
|
|
3167
|
-
"type": "color",
|
|
3168
|
-
"value": "oklch(98.51% 0.0000 0)"
|
|
3169
|
-
},
|
|
3170
|
-
{
|
|
3171
|
-
"name": "layout-rail-border",
|
|
3172
|
-
"cssVar": "--layout-rail-border",
|
|
3173
|
-
"type": "color",
|
|
3174
|
-
"value": "oklch(92.19% 0.0000 0)"
|
|
3175
|
-
},
|
|
3176
|
-
{
|
|
3177
|
-
"name": "layout-rail-width",
|
|
3178
|
-
"cssVar": "--layout-rail-width",
|
|
3179
|
-
"type": "dimension",
|
|
3180
|
-
"value": "48px"
|
|
3181
|
-
},
|
|
3182
|
-
{
|
|
3183
|
-
"name": "layout-sidebar-background",
|
|
3184
|
-
"cssVar": "--layout-sidebar-background",
|
|
3185
|
-
"type": "color",
|
|
3186
|
-
"value": "oklch(98.51% 0.0000 0)"
|
|
3187
|
-
},
|
|
3188
|
-
{
|
|
3189
|
-
"name": "layout-sidebar-border",
|
|
3190
|
-
"cssVar": "--layout-sidebar-border",
|
|
3191
|
-
"type": "color",
|
|
3192
|
-
"value": "oklch(92.19% 0.0000 0)"
|
|
3193
|
-
},
|
|
3194
|
-
{
|
|
3195
|
-
"name": "layout-sidebar-collapsed-width",
|
|
3196
|
-
"cssVar": "--layout-sidebar-collapsed-width",
|
|
3197
|
-
"type": "dimension",
|
|
3198
|
-
"value": "64px"
|
|
3199
|
-
},
|
|
3200
|
-
{
|
|
3201
|
-
"name": "layout-sidebar-width",
|
|
3202
|
-
"cssVar": "--layout-sidebar-width",
|
|
3203
|
-
"type": "dimension",
|
|
3204
|
-
"value": "240px"
|
|
3205
3363
|
}
|
|
3206
3364
|
]
|
|
3207
3365
|
},
|
|
@@ -3211,29 +3369,36 @@
|
|
|
3211
3369
|
"name": "shadow-lg",
|
|
3212
3370
|
"cssVar": "--shadow-lg",
|
|
3213
3371
|
"type": "shadow",
|
|
3214
|
-
"description": "
|
|
3215
|
-
"value": "
|
|
3372
|
+
"description": "Light mode large shadow: modals and popovers complexos.",
|
|
3373
|
+
"value": "0 10px 20px 0 rgb(0 0 0 / 0.12), 0 6px 6px 0 rgb(0 0 0 / 0.08)"
|
|
3216
3374
|
},
|
|
3217
3375
|
{
|
|
3218
3376
|
"name": "shadow-md",
|
|
3219
3377
|
"cssVar": "--shadow-md",
|
|
3220
3378
|
"type": "shadow",
|
|
3221
|
-
"description": "
|
|
3222
|
-
"value": "
|
|
3379
|
+
"description": "Light mode medium shadow: dropdowns, popovers and similar mid-elevation surfaces.",
|
|
3380
|
+
"value": "0 4px 8px 0 rgb(0 0 0 / 0.10), 0 2px 4px 0 rgb(0 0 0 / 0.06)"
|
|
3223
3381
|
},
|
|
3224
3382
|
{
|
|
3225
3383
|
"name": "shadow-sm",
|
|
3226
3384
|
"cssVar": "--shadow-sm",
|
|
3227
3385
|
"type": "shadow",
|
|
3228
|
-
"description": "
|
|
3229
|
-
"value": "
|
|
3386
|
+
"description": "Light mode small shadow: discreet drop for raised cards and sticky elements.",
|
|
3387
|
+
"value": "0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.04)"
|
|
3230
3388
|
},
|
|
3231
3389
|
{
|
|
3232
3390
|
"name": "shadow-xl",
|
|
3233
3391
|
"cssVar": "--shadow-xl",
|
|
3234
3392
|
"type": "shadow",
|
|
3235
|
-
"description": "
|
|
3236
|
-
"value": "
|
|
3393
|
+
"description": "Light mode extra-large shadow: tooltips e overlays de maior elevação.",
|
|
3394
|
+
"value": "0 20px 40px 0 rgb(0 0 0 / 0.12), 0 10px 10px 0 rgb(0 0 0 / 0.10)"
|
|
3395
|
+
},
|
|
3396
|
+
{
|
|
3397
|
+
"name": "shadow-xs",
|
|
3398
|
+
"cssVar": "--shadow-xs",
|
|
3399
|
+
"type": "shadow",
|
|
3400
|
+
"description": "Light mode extra-small shadow: subtle button-level lift (1px drop). Aligns with --button-shadow-xs and cd/ skill --shadow-xs.",
|
|
3401
|
+
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
|
|
3237
3402
|
}
|
|
3238
3403
|
]
|
|
3239
3404
|
},
|
|
@@ -3499,7 +3664,7 @@
|
|
|
3499
3664
|
"name": "duration-slow",
|
|
3500
3665
|
"cssVar": "--duration-slow",
|
|
3501
3666
|
"type": "duration",
|
|
3502
|
-
"description": "
|
|
3667
|
+
"description": "Alias de duration-moderate. Mantido por compatibilidade com consumidores legados.",
|
|
3503
3668
|
"value": "300ms"
|
|
3504
3669
|
},
|
|
3505
3670
|
{
|
|
@@ -3516,89 +3681,61 @@
|
|
|
3516
3681
|
"description": "Splash screens, transições de página, animações de destaque.",
|
|
3517
3682
|
"value": "700ms"
|
|
3518
3683
|
},
|
|
3684
|
+
{
|
|
3685
|
+
"name": "ease-bounce",
|
|
3686
|
+
"cssVar": "--ease-bounce",
|
|
3687
|
+
"type": "cubicBezier",
|
|
3688
|
+
"description": "Pendente — Wagner publicará no Figma. Curva exagerada com overshoot duplo.",
|
|
3689
|
+
"value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
3690
|
+
},
|
|
3519
3691
|
{
|
|
3520
3692
|
"name": "ease-default",
|
|
3521
3693
|
"cssVar": "--ease-default",
|
|
3522
3694
|
"type": "cubicBezier",
|
|
3523
|
-
"description": "Padrão do sistema — sai devagar, chega devagar.
|
|
3695
|
+
"description": "Padrão do sistema — sai devagar, chega devagar. Movimentos que ocorrem no mesmo plano: tabs, sliders, reordenação de listas.",
|
|
3524
3696
|
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3525
3697
|
},
|
|
3526
3698
|
{
|
|
3527
3699
|
"name": "ease-emphasized",
|
|
3528
3700
|
"cssVar": "--ease-emphasized",
|
|
3529
3701
|
"type": "cubicBezier",
|
|
3530
|
-
"description": "M3 Emphasized — desaceleração dramática. Modais grandes, drawers, transições de página.",
|
|
3702
|
+
"description": "M3 Emphasized — desaceleração dramática no final. Modais grandes, drawers, transições de página. Comunica peso e importância.",
|
|
3531
3703
|
"value": "cubic-bezier(0.2, 0, 0, 1)"
|
|
3532
3704
|
},
|
|
3533
3705
|
{
|
|
3534
3706
|
"name": "ease-in",
|
|
3535
3707
|
"cssVar": "--ease-in",
|
|
3536
3708
|
"type": "cubicBezier",
|
|
3537
|
-
"description": "Começa devagar, termina rápido.
|
|
3709
|
+
"description": "Começa devagar, termina rápido. Exclusivo para saídas: elemento que SAI da tela. Transmite que o elemento 'vai embora'.",
|
|
3538
3710
|
"value": "cubic-bezier(0.4, 0, 1, 1)"
|
|
3539
3711
|
},
|
|
3712
|
+
{
|
|
3713
|
+
"name": "ease-in-out",
|
|
3714
|
+
"cssVar": "--ease-in-out",
|
|
3715
|
+
"type": "cubicBezier",
|
|
3716
|
+
"description": "Pendente — Wagner publicará no Figma. Usado provisoriamente como alias de --ease-default.",
|
|
3717
|
+
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3718
|
+
},
|
|
3540
3719
|
{
|
|
3541
3720
|
"name": "ease-linear",
|
|
3542
3721
|
"cssVar": "--ease-linear",
|
|
3543
3722
|
"type": "cubicBezier",
|
|
3544
|
-
"description": "Velocidade constante. Loaders rotativos, progress bars de duração fixa.",
|
|
3723
|
+
"description": "Velocidade constante do início ao fim. Loaders rotativos, progress bars de duração fixa. Nunca use para entradas/saídas de elementos.",
|
|
3545
3724
|
"value": "cubic-bezier(0, 0, 1, 1)"
|
|
3546
3725
|
},
|
|
3547
3726
|
{
|
|
3548
3727
|
"name": "ease-out",
|
|
3549
3728
|
"cssVar": "--ease-out",
|
|
3550
3729
|
"type": "cubicBezier",
|
|
3551
|
-
"description": "Começa rápido, desacelera ao chegar.
|
|
3730
|
+
"description": "Começa rápido, desacelera ao chegar. Exclusivo para entradas: elemento que ENTRA na tela. Transmite que o elemento 'chegou'.",
|
|
3552
3731
|
"value": "cubic-bezier(0, 0, 0.2, 1)"
|
|
3553
3732
|
},
|
|
3554
3733
|
{
|
|
3555
3734
|
"name": "ease-spring",
|
|
3556
3735
|
"cssVar": "--ease-spring",
|
|
3557
3736
|
"type": "cubicBezier",
|
|
3558
|
-
"description": "Ultrapassa levemente o destino e volta (bounce). Menus, cards de destaque.",
|
|
3559
|
-
"value": "cubic-bezier(0.
|
|
3560
|
-
},
|
|
3561
|
-
{
|
|
3562
|
-
"name": "easing-bounce",
|
|
3563
|
-
"cssVar": "--easing-bounce",
|
|
3564
|
-
"type": "cubicBezier",
|
|
3565
|
-
"description": "(Legacy) Sem equivalente Figma — usar ease-spring.",
|
|
3566
|
-
"value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
3567
|
-
},
|
|
3568
|
-
{
|
|
3569
|
-
"name": "easing-default",
|
|
3570
|
-
"cssVar": "--easing-default",
|
|
3571
|
-
"type": "cubicBezier",
|
|
3572
|
-
"description": "(Legacy alias of --ease-default)",
|
|
3573
|
-
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3574
|
-
},
|
|
3575
|
-
{
|
|
3576
|
-
"name": "easing-in",
|
|
3577
|
-
"cssVar": "--easing-in",
|
|
3578
|
-
"type": "cubicBezier",
|
|
3579
|
-
"description": "(Legacy alias of --ease-in)",
|
|
3580
|
-
"value": "cubic-bezier(0.4, 0, 1, 1)"
|
|
3581
|
-
},
|
|
3582
|
-
{
|
|
3583
|
-
"name": "easing-in-out",
|
|
3584
|
-
"cssVar": "--easing-in-out",
|
|
3585
|
-
"type": "cubicBezier",
|
|
3586
|
-
"description": "(Legacy) Sem equivalente Figma direto.",
|
|
3587
|
-
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3588
|
-
},
|
|
3589
|
-
{
|
|
3590
|
-
"name": "easing-out",
|
|
3591
|
-
"cssVar": "--easing-out",
|
|
3592
|
-
"type": "cubicBezier",
|
|
3593
|
-
"description": "(Legacy alias of --ease-out)",
|
|
3594
|
-
"value": "cubic-bezier(0, 0, 0.2, 1)"
|
|
3595
|
-
},
|
|
3596
|
-
{
|
|
3597
|
-
"name": "easing-spring",
|
|
3598
|
-
"cssVar": "--easing-spring",
|
|
3599
|
-
"type": "cubicBezier",
|
|
3600
|
-
"description": "(Legacy) Spring effect — Figma usa cubic-bezier(0.36, 1.56, 0.64, 1).",
|
|
3601
|
-
"value": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
3737
|
+
"description": "Ultrapassa levemente o destino e volta (bounce). Menus, cards de destaque, interações lúdicas. Não use em interfaces densas ou corporativas.",
|
|
3738
|
+
"value": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
3602
3739
|
}
|
|
3603
3740
|
]
|
|
3604
3741
|
},
|
|
@@ -3608,7 +3745,7 @@
|
|
|
3608
3745
|
"name": "icon-size-2xl",
|
|
3609
3746
|
"cssVar": "--icon-size-2xl",
|
|
3610
3747
|
"type": "dimension",
|
|
3611
|
-
"value": "
|
|
3748
|
+
"value": "48px"
|
|
3612
3749
|
},
|
|
3613
3750
|
{
|
|
3614
3751
|
"name": "icon-size-2xs",
|
|
@@ -3678,7 +3815,8 @@
|
|
|
3678
3815
|
"name": "accordion-icon-size",
|
|
3679
3816
|
"cssVar": "--accordion-icon-size",
|
|
3680
3817
|
"type": "dimension",
|
|
3681
|
-
"
|
|
3818
|
+
"description": "Accordion icon size aligned with Figma 20px per DES-1240 — pre-fix was 16px (spacing.4).",
|
|
3819
|
+
"value": "20px"
|
|
3682
3820
|
},
|
|
3683
3821
|
{
|
|
3684
3822
|
"name": "accordion-icon-transition-duration",
|
|
@@ -3734,6 +3872,26 @@
|
|
|
3734
3872
|
"type": "dimension",
|
|
3735
3873
|
"value": "8px"
|
|
3736
3874
|
},
|
|
3875
|
+
{
|
|
3876
|
+
"name": "accordion-trigger-radius",
|
|
3877
|
+
"cssVar": "--accordion-trigger-radius",
|
|
3878
|
+
"type": "dimension",
|
|
3879
|
+
"description": "Accordion trigger radius tokenized per DES-1240 item 5 — was Tailwind direct rounded-md.",
|
|
3880
|
+
"value": "8px"
|
|
3881
|
+
},
|
|
3882
|
+
{
|
|
3883
|
+
"name": "accordion-trigger-ring-primary",
|
|
3884
|
+
"cssVar": "--accordion-trigger-ring-primary",
|
|
3885
|
+
"type": "color",
|
|
3886
|
+
"description": "Accordion trigger focus ring per DES-1240 item 6.",
|
|
3887
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
3888
|
+
},
|
|
3889
|
+
{
|
|
3890
|
+
"name": "accordion-trigger-ring-width",
|
|
3891
|
+
"cssVar": "--accordion-trigger-ring-width",
|
|
3892
|
+
"type": "dimension",
|
|
3893
|
+
"value": "3px"
|
|
3894
|
+
},
|
|
3737
3895
|
{
|
|
3738
3896
|
"name": "accordion-trigger-text-size-lg",
|
|
3739
3897
|
"cssVar": "--accordion-trigger-text-size-lg",
|
|
@@ -3752,6 +3910,20 @@
|
|
|
3752
3910
|
"type": "dimension",
|
|
3753
3911
|
"value": "0.75rem"
|
|
3754
3912
|
},
|
|
3913
|
+
{
|
|
3914
|
+
"name": "account-switch-content-min-width",
|
|
3915
|
+
"cssVar": "--account-switch-content-min-width",
|
|
3916
|
+
"type": "dimension",
|
|
3917
|
+
"description": "Dropdown content min-width (280px) so the account list never collapses below readable width.",
|
|
3918
|
+
"value": "17.5rem"
|
|
3919
|
+
},
|
|
3920
|
+
{
|
|
3921
|
+
"name": "account-switch-name-max-width",
|
|
3922
|
+
"cssVar": "--account-switch-name-max-width",
|
|
3923
|
+
"type": "dimension",
|
|
3924
|
+
"description": "Account name label max-width in the trigger button (160px). Truncates with ellipsis past this.",
|
|
3925
|
+
"value": "10rem"
|
|
3926
|
+
},
|
|
3755
3927
|
{
|
|
3756
3928
|
"name": "alert-icon-size",
|
|
3757
3929
|
"cssVar": "--alert-icon-size",
|
|
@@ -3804,19 +3976,85 @@
|
|
|
3804
3976
|
"name": "alert-variant-destructive-bg",
|
|
3805
3977
|
"cssVar": "--alert-variant-destructive-bg",
|
|
3806
3978
|
"type": "color",
|
|
3807
|
-
"
|
|
3979
|
+
"description": "Destructive alert bg (Figma 1405:15594 — status/destructive/subtle)",
|
|
3980
|
+
"value": "oklch(97.05% 0.0129 17.38)"
|
|
3808
3981
|
},
|
|
3809
3982
|
{
|
|
3810
3983
|
"name": "alert-variant-destructive-border",
|
|
3811
3984
|
"cssVar": "--alert-variant-destructive-border",
|
|
3812
3985
|
"type": "color",
|
|
3813
|
-
"
|
|
3986
|
+
"description": "Destructive alert border (Figma — status/destructive/border)",
|
|
3987
|
+
"value": "oklch(88.45% 0.0593 18.33)"
|
|
3814
3988
|
},
|
|
3815
3989
|
{
|
|
3816
3990
|
"name": "alert-variant-destructive-fg",
|
|
3817
3991
|
"cssVar": "--alert-variant-destructive-fg",
|
|
3818
3992
|
"type": "color",
|
|
3819
|
-
"
|
|
3993
|
+
"description": "Destructive alert fg (Figma — status/destructive/subtle-foreground)",
|
|
3994
|
+
"value": "oklch(50.54% 0.1905 27.52)"
|
|
3995
|
+
},
|
|
3996
|
+
{
|
|
3997
|
+
"name": "alert-variant-info-bg",
|
|
3998
|
+
"cssVar": "--alert-variant-info-bg",
|
|
3999
|
+
"type": "color",
|
|
4000
|
+
"description": "Info alert bg (Figma 1405:15771 — status/info/subtle)",
|
|
4001
|
+
"value": "oklch(97.05% 0.0142 254.60)"
|
|
4002
|
+
},
|
|
4003
|
+
{
|
|
4004
|
+
"name": "alert-variant-info-border",
|
|
4005
|
+
"cssVar": "--alert-variant-info-border",
|
|
4006
|
+
"type": "color",
|
|
4007
|
+
"description": "Info alert border (Figma — status/info/border)",
|
|
4008
|
+
"value": "oklch(88.23% 0.0571 254.13)"
|
|
4009
|
+
},
|
|
4010
|
+
{
|
|
4011
|
+
"name": "alert-variant-info-fg",
|
|
4012
|
+
"cssVar": "--alert-variant-info-fg",
|
|
4013
|
+
"type": "color",
|
|
4014
|
+
"description": "Info alert fg (Figma — status/info/subtle-foreground)",
|
|
4015
|
+
"value": "oklch(48.82% 0.2172 264.38)"
|
|
4016
|
+
},
|
|
4017
|
+
{
|
|
4018
|
+
"name": "alert-variant-success-bg",
|
|
4019
|
+
"cssVar": "--alert-variant-success-bg",
|
|
4020
|
+
"type": "color",
|
|
4021
|
+
"description": "Success alert bg (Figma 1405:15781 — status/success/subtle)",
|
|
4022
|
+
"value": "oklch(98.19% 0.0181 155.83)"
|
|
4023
|
+
},
|
|
4024
|
+
{
|
|
4025
|
+
"name": "alert-variant-success-border",
|
|
4026
|
+
"cssVar": "--alert-variant-success-border",
|
|
4027
|
+
"type": "color",
|
|
4028
|
+
"description": "Success alert border (Figma — status/success/border)",
|
|
4029
|
+
"value": "oklch(92.50% 0.0806 155.99)"
|
|
4030
|
+
},
|
|
4031
|
+
{
|
|
4032
|
+
"name": "alert-variant-success-fg",
|
|
4033
|
+
"cssVar": "--alert-variant-success-fg",
|
|
4034
|
+
"type": "color",
|
|
4035
|
+
"description": "Success alert fg (Figma — status/success/subtle-foreground)",
|
|
4036
|
+
"value": "oklch(52.73% 0.1371 150.07)"
|
|
4037
|
+
},
|
|
4038
|
+
{
|
|
4039
|
+
"name": "alert-variant-warning-bg",
|
|
4040
|
+
"cssVar": "--alert-variant-warning-bg",
|
|
4041
|
+
"type": "color",
|
|
4042
|
+
"description": "Warning alert bg (Figma 1405:15791 — status/warning/subtle)",
|
|
4043
|
+
"value": "oklch(98.73% 0.0262 102.21)"
|
|
4044
|
+
},
|
|
4045
|
+
{
|
|
4046
|
+
"name": "alert-variant-warning-border",
|
|
4047
|
+
"cssVar": "--alert-variant-warning-border",
|
|
4048
|
+
"type": "color",
|
|
4049
|
+
"description": "Warning alert border (Figma — status/warning/border)",
|
|
4050
|
+
"value": "oklch(94.51% 0.1243 101.54)"
|
|
4051
|
+
},
|
|
4052
|
+
{
|
|
4053
|
+
"name": "alert-variant-warning-fg",
|
|
4054
|
+
"cssVar": "--alert-variant-warning-fg",
|
|
4055
|
+
"type": "color",
|
|
4056
|
+
"description": "Warning alert fg (Figma — status/warning/subtle-foreground)",
|
|
4057
|
+
"value": "oklch(55.38% 0.1207 66.44)"
|
|
3820
4058
|
},
|
|
3821
4059
|
{
|
|
3822
4060
|
"name": "asset-manager-grid-columns",
|
|
@@ -4041,8 +4279,15 @@
|
|
|
4041
4279
|
"value": "0.875rem"
|
|
4042
4280
|
},
|
|
4043
4281
|
{
|
|
4044
|
-
"name": "
|
|
4045
|
-
"cssVar": "--
|
|
4282
|
+
"name": "autocomplete-tags-max-width",
|
|
4283
|
+
"cssVar": "--autocomplete-tags-max-width",
|
|
4284
|
+
"type": "dimension",
|
|
4285
|
+
"description": "Multi-select tags container max-width relative to input width. Leaves room for the input text cursor and remaining options.",
|
|
4286
|
+
"value": "70%"
|
|
4287
|
+
},
|
|
4288
|
+
{
|
|
4289
|
+
"name": "avatar-border-contrast",
|
|
4290
|
+
"cssVar": "--avatar-border-contrast",
|
|
4046
4291
|
"type": "color",
|
|
4047
4292
|
"value": "rgba(0, 0, 0, 0.08)"
|
|
4048
4293
|
},
|
|
@@ -4118,6 +4363,106 @@
|
|
|
4118
4363
|
"type": "color",
|
|
4119
4364
|
"value": "oklch(28.57% 0.0639 53.81)"
|
|
4120
4365
|
},
|
|
4366
|
+
{
|
|
4367
|
+
"name": "avatar-focus-ring-color",
|
|
4368
|
+
"cssVar": "--avatar-focus-ring-color",
|
|
4369
|
+
"type": "color",
|
|
4370
|
+
"description": "Avatar focus-ring color per DES-1242.",
|
|
4371
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
4372
|
+
},
|
|
4373
|
+
{
|
|
4374
|
+
"name": "avatar-focus-ring-offset",
|
|
4375
|
+
"cssVar": "--avatar-focus-ring-offset",
|
|
4376
|
+
"type": "dimension",
|
|
4377
|
+
"description": "Avatar focus-ring offset per DES-1242.",
|
|
4378
|
+
"value": "2px"
|
|
4379
|
+
},
|
|
4380
|
+
{
|
|
4381
|
+
"name": "avatar-focus-ring-width",
|
|
4382
|
+
"cssVar": "--avatar-focus-ring-width",
|
|
4383
|
+
"type": "dimension",
|
|
4384
|
+
"description": "Avatar focus-ring width per DES-1242 — matches Figma Focus rings/ring-gray spread 4.",
|
|
4385
|
+
"value": "4px"
|
|
4386
|
+
},
|
|
4387
|
+
{
|
|
4388
|
+
"name": "avatar-label-c2-font-size",
|
|
4389
|
+
"cssVar": "--avatar-label-c2-font-size",
|
|
4390
|
+
"type": "fontSize",
|
|
4391
|
+
"description": "Avatar Label C2 caption font-size per DES-1242 item 2 — Figma Caption/C2 10px.",
|
|
4392
|
+
"value": "10px"
|
|
4393
|
+
},
|
|
4394
|
+
{
|
|
4395
|
+
"name": "avatar-label-c2-line-height",
|
|
4396
|
+
"cssVar": "--avatar-label-c2-line-height",
|
|
4397
|
+
"type": "lineHeight",
|
|
4398
|
+
"value": "14px"
|
|
4399
|
+
},
|
|
4400
|
+
{
|
|
4401
|
+
"name": "avatar-label-h3-font-size",
|
|
4402
|
+
"cssVar": "--avatar-label-h3-font-size",
|
|
4403
|
+
"type": "fontSize",
|
|
4404
|
+
"description": "Avatar Label H3 font-size per DES-1242 item 2 — Figma Heading/H3 24px.",
|
|
4405
|
+
"value": "24px"
|
|
4406
|
+
},
|
|
4407
|
+
{
|
|
4408
|
+
"name": "avatar-label-h3-line-height",
|
|
4409
|
+
"cssVar": "--avatar-label-h3-line-height",
|
|
4410
|
+
"type": "lineHeight",
|
|
4411
|
+
"description": "Avatar Label H3 line-height per DES-1242 item 2 — Figma 32px.",
|
|
4412
|
+
"value": "32px"
|
|
4413
|
+
},
|
|
4414
|
+
{
|
|
4415
|
+
"name": "avatar-label-h4-font-size",
|
|
4416
|
+
"cssVar": "--avatar-label-h4-font-size",
|
|
4417
|
+
"type": "fontSize",
|
|
4418
|
+
"description": "Avatar Label H4 font-size per DES-1242 item 2 — Figma Heading/H4 20px.",
|
|
4419
|
+
"value": "20px"
|
|
4420
|
+
},
|
|
4421
|
+
{
|
|
4422
|
+
"name": "avatar-label-h4-line-height",
|
|
4423
|
+
"cssVar": "--avatar-label-h4-line-height",
|
|
4424
|
+
"type": "lineHeight",
|
|
4425
|
+
"value": "28px"
|
|
4426
|
+
},
|
|
4427
|
+
{
|
|
4428
|
+
"name": "avatar-label-p1-font-size",
|
|
4429
|
+
"cssVar": "--avatar-label-p1-font-size",
|
|
4430
|
+
"type": "fontSize",
|
|
4431
|
+
"description": "Avatar Label P1 font-size per DES-1242 item 2 — Figma Paragraph/P1 18px.",
|
|
4432
|
+
"value": "18px"
|
|
4433
|
+
},
|
|
4434
|
+
{
|
|
4435
|
+
"name": "avatar-label-p1-line-height",
|
|
4436
|
+
"cssVar": "--avatar-label-p1-line-height",
|
|
4437
|
+
"type": "lineHeight",
|
|
4438
|
+
"value": "28px"
|
|
4439
|
+
},
|
|
4440
|
+
{
|
|
4441
|
+
"name": "avatar-label-p2-font-size",
|
|
4442
|
+
"cssVar": "--avatar-label-p2-font-size",
|
|
4443
|
+
"type": "fontSize",
|
|
4444
|
+
"description": "Avatar Label P2 font-size per DES-1242 item 2 — Figma Paragraph/P2 16px (default).",
|
|
4445
|
+
"value": "16px"
|
|
4446
|
+
},
|
|
4447
|
+
{
|
|
4448
|
+
"name": "avatar-label-p2-line-height",
|
|
4449
|
+
"cssVar": "--avatar-label-p2-line-height",
|
|
4450
|
+
"type": "lineHeight",
|
|
4451
|
+
"value": "24px"
|
|
4452
|
+
},
|
|
4453
|
+
{
|
|
4454
|
+
"name": "avatar-label-p3-font-size",
|
|
4455
|
+
"cssVar": "--avatar-label-p3-font-size",
|
|
4456
|
+
"type": "fontSize",
|
|
4457
|
+
"description": "Avatar Label P3 font-size per DES-1242 item 2 — Figma Paragraph/P3 14px.",
|
|
4458
|
+
"value": "14px"
|
|
4459
|
+
},
|
|
4460
|
+
{
|
|
4461
|
+
"name": "avatar-label-p3-line-height",
|
|
4462
|
+
"cssVar": "--avatar-label-p3-line-height",
|
|
4463
|
+
"type": "lineHeight",
|
|
4464
|
+
"value": "20px"
|
|
4465
|
+
},
|
|
4121
4466
|
{
|
|
4122
4467
|
"name": "avatar-radius-circle",
|
|
4123
4468
|
"cssVar": "--avatar-radius-circle",
|
|
@@ -4274,11 +4619,71 @@
|
|
|
4274
4619
|
"type": "color",
|
|
4275
4620
|
"value": "oklch(21.23% 0.0502 138.22)"
|
|
4276
4621
|
},
|
|
4622
|
+
{
|
|
4623
|
+
"name": "badge-color-success-bg",
|
|
4624
|
+
"cssVar": "--badge-color-success-bg",
|
|
4625
|
+
"type": "color",
|
|
4626
|
+
"description": "Badge success bg per DES-1244 item 4.",
|
|
4627
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
4628
|
+
},
|
|
4629
|
+
{
|
|
4630
|
+
"name": "badge-color-success-border",
|
|
4631
|
+
"cssVar": "--badge-color-success-border",
|
|
4632
|
+
"type": "color",
|
|
4633
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
4634
|
+
},
|
|
4635
|
+
{
|
|
4636
|
+
"name": "badge-color-success-fg",
|
|
4637
|
+
"cssVar": "--badge-color-success-fg",
|
|
4638
|
+
"type": "color",
|
|
4639
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
4640
|
+
},
|
|
4641
|
+
{
|
|
4642
|
+
"name": "badge-color-warning-bg",
|
|
4643
|
+
"cssVar": "--badge-color-warning-bg",
|
|
4644
|
+
"type": "color",
|
|
4645
|
+
"description": "Badge warning bg per DES-1244 item 4.",
|
|
4646
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
4647
|
+
},
|
|
4648
|
+
{
|
|
4649
|
+
"name": "badge-color-warning-border",
|
|
4650
|
+
"cssVar": "--badge-color-warning-border",
|
|
4651
|
+
"type": "color",
|
|
4652
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
4653
|
+
},
|
|
4654
|
+
{
|
|
4655
|
+
"name": "badge-color-warning-fg",
|
|
4656
|
+
"cssVar": "--badge-color-warning-fg",
|
|
4657
|
+
"type": "color",
|
|
4658
|
+
"value": "oklch(28.57% 0.0639 53.81)"
|
|
4659
|
+
},
|
|
4660
|
+
{
|
|
4661
|
+
"name": "badge-line-height-lg",
|
|
4662
|
+
"cssVar": "--badge-line-height-lg",
|
|
4663
|
+
"type": "dimension",
|
|
4664
|
+
"description": "Badge lg line-height per DES-1244 item 5 — Figma text/line-height/sm.",
|
|
4665
|
+
"value": "20px"
|
|
4666
|
+
},
|
|
4667
|
+
{
|
|
4668
|
+
"name": "badge-line-height-md",
|
|
4669
|
+
"cssVar": "--badge-line-height-md",
|
|
4670
|
+
"type": "dimension",
|
|
4671
|
+
"description": "Badge md line-height per DES-1244 item 5 — Figma text/line-height/sm.",
|
|
4672
|
+
"value": "20px"
|
|
4673
|
+
},
|
|
4674
|
+
{
|
|
4675
|
+
"name": "badge-line-height-sm",
|
|
4676
|
+
"cssVar": "--badge-line-height-sm",
|
|
4677
|
+
"type": "dimension",
|
|
4678
|
+
"description": "Badge sm line-height per DES-1244 item 5 — Figma text/line-height/xs.",
|
|
4679
|
+
"value": "16px"
|
|
4680
|
+
},
|
|
4277
4681
|
{
|
|
4278
4682
|
"name": "badge-radius-default",
|
|
4279
4683
|
"cssVar": "--badge-radius-default",
|
|
4280
4684
|
"type": "dimension",
|
|
4281
|
-
"
|
|
4685
|
+
"description": "Badge default radius aligned with Figma radius/sm (4px) per DES-1244 — pre-fix was 0.375rem (6px).",
|
|
4686
|
+
"value": "4px"
|
|
4282
4687
|
},
|
|
4283
4688
|
{
|
|
4284
4689
|
"name": "badge-radius-pill",
|
|
@@ -4290,7 +4695,8 @@
|
|
|
4290
4695
|
"name": "badge-size-lg-h",
|
|
4291
4696
|
"cssVar": "--badge-size-lg-h",
|
|
4292
4697
|
"type": "dimension",
|
|
4293
|
-
"
|
|
4698
|
+
"description": "Badge lg height aligned with Figma 32px per Bowser audit Badge — pre-fix was 28px (-4px diff).",
|
|
4699
|
+
"value": "32px"
|
|
4294
4700
|
},
|
|
4295
4701
|
{
|
|
4296
4702
|
"name": "badge-size-lg-px",
|
|
@@ -4308,7 +4714,8 @@
|
|
|
4308
4714
|
"name": "badge-size-md-h",
|
|
4309
4715
|
"cssVar": "--badge-size-md-h",
|
|
4310
4716
|
"type": "dimension",
|
|
4311
|
-
"
|
|
4717
|
+
"description": "Badge md height aligned with Figma 28px per Bowser audit Badge — pre-fix was 24px (-4px diff).",
|
|
4718
|
+
"value": "28px"
|
|
4312
4719
|
},
|
|
4313
4720
|
{
|
|
4314
4721
|
"name": "badge-size-md-px",
|
|
@@ -4326,7 +4733,8 @@
|
|
|
4326
4733
|
"name": "badge-size-sm-h",
|
|
4327
4734
|
"cssVar": "--badge-size-sm-h",
|
|
4328
4735
|
"type": "dimension",
|
|
4329
|
-
"
|
|
4736
|
+
"description": "Badge sm height aligned with Figma 24px per Bowser audit Badge — pre-fix was 22px (-2px diff).",
|
|
4737
|
+
"value": "24px"
|
|
4330
4738
|
},
|
|
4331
4739
|
{
|
|
4332
4740
|
"name": "badge-size-sm-px",
|
|
@@ -4343,7 +4751,8 @@
|
|
|
4343
4751
|
{
|
|
4344
4752
|
"name": "banner-root-gap",
|
|
4345
4753
|
"cssVar": "--banner-root-gap",
|
|
4346
|
-
"
|
|
4754
|
+
"description": "Banner root gap aligned with Figma spacing/s-24 (24px) per DES-1246 — pre-fix was 8px (spacing.2).",
|
|
4755
|
+
"value": "24px"
|
|
4347
4756
|
},
|
|
4348
4757
|
{
|
|
4349
4758
|
"name": "banner-root-padding-x",
|
|
@@ -4489,6 +4898,27 @@
|
|
|
4489
4898
|
"type": "dimension",
|
|
4490
4899
|
"value": "320px"
|
|
4491
4900
|
},
|
|
4901
|
+
{
|
|
4902
|
+
"name": "button-destructive-bg-default",
|
|
4903
|
+
"cssVar": "--button-destructive-bg-default",
|
|
4904
|
+
"type": "color",
|
|
4905
|
+
"description": "Button destructive bg per DES-1248 item 2.",
|
|
4906
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
4907
|
+
},
|
|
4908
|
+
{
|
|
4909
|
+
"name": "button-destructive-bg-hover",
|
|
4910
|
+
"cssVar": "--button-destructive-bg-hover",
|
|
4911
|
+
"type": "color",
|
|
4912
|
+
"description": "Button destructive hover bg per DES-1248 item 2.",
|
|
4913
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
4914
|
+
},
|
|
4915
|
+
{
|
|
4916
|
+
"name": "button-destructive-fg-default",
|
|
4917
|
+
"cssVar": "--button-destructive-fg-default",
|
|
4918
|
+
"type": "color",
|
|
4919
|
+
"description": "Button destructive fg per DES-1248 item 2.",
|
|
4920
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
4921
|
+
},
|
|
4492
4922
|
{
|
|
4493
4923
|
"name": "button-disabled-bg",
|
|
4494
4924
|
"cssVar": "--button-disabled-bg",
|
|
@@ -4507,6 +4937,26 @@
|
|
|
4507
4937
|
"type": "color",
|
|
4508
4938
|
"value": "oklch(55.55% 0.0000 0)"
|
|
4509
4939
|
},
|
|
4940
|
+
{
|
|
4941
|
+
"name": "button-ghost-bg-hover",
|
|
4942
|
+
"cssVar": "--button-ghost-bg-hover",
|
|
4943
|
+
"type": "color",
|
|
4944
|
+
"description": "Button ghost hover bg per DES-1248 item 2.",
|
|
4945
|
+
"value": "oklch(95.21% 0.0467 171.12)"
|
|
4946
|
+
},
|
|
4947
|
+
{
|
|
4948
|
+
"name": "button-ghost-fg-default",
|
|
4949
|
+
"cssVar": "--button-ghost-fg-default",
|
|
4950
|
+
"type": "color",
|
|
4951
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
4952
|
+
},
|
|
4953
|
+
{
|
|
4954
|
+
"name": "button-ghost-fg-hover",
|
|
4955
|
+
"cssVar": "--button-ghost-fg-hover",
|
|
4956
|
+
"type": "color",
|
|
4957
|
+
"description": "Button ghost hover fg per DES-1248 item 2.",
|
|
4958
|
+
"value": "oklch(26.88% 0.0527 163.85)"
|
|
4959
|
+
},
|
|
4510
4960
|
{
|
|
4511
4961
|
"name": "button-group-item-background",
|
|
4512
4962
|
"cssVar": "--button-group-item-background",
|
|
@@ -4526,15 +4976,29 @@
|
|
|
4526
4976
|
"value": "oklch(97.02% 0.0000 0)"
|
|
4527
4977
|
},
|
|
4528
4978
|
{
|
|
4529
|
-
"name": "button-group-item-font-size",
|
|
4530
|
-
"cssVar": "--button-group-item-font-size",
|
|
4979
|
+
"name": "button-group-item-font-size-lg",
|
|
4980
|
+
"cssVar": "--button-group-item-font-size-lg",
|
|
4981
|
+
"type": "dimension",
|
|
4982
|
+
"value": "0.875rem"
|
|
4983
|
+
},
|
|
4984
|
+
{
|
|
4985
|
+
"name": "button-group-item-font-size-md",
|
|
4986
|
+
"cssVar": "--button-group-item-font-size-md",
|
|
4531
4987
|
"type": "dimension",
|
|
4532
4988
|
"value": "0.875rem"
|
|
4533
4989
|
},
|
|
4990
|
+
{
|
|
4991
|
+
"name": "button-group-item-font-size-sm",
|
|
4992
|
+
"cssVar": "--button-group-item-font-size-sm",
|
|
4993
|
+
"type": "dimension",
|
|
4994
|
+
"description": "ButtonGroup item sm font-size 12px per DES-1250 item 3.",
|
|
4995
|
+
"value": "0.75rem"
|
|
4996
|
+
},
|
|
4534
4997
|
{
|
|
4535
4998
|
"name": "button-group-item-font-weight",
|
|
4536
4999
|
"cssVar": "--button-group-item-font-weight",
|
|
4537
|
-
"
|
|
5000
|
+
"description": "ButtonGroup item font-weight aligned with Figma medium (500) per DES-1250 — pre-fix was semibold (600).",
|
|
5001
|
+
"value": "500"
|
|
4538
5002
|
},
|
|
4539
5003
|
{
|
|
4540
5004
|
"name": "button-group-item-gap",
|
|
@@ -4543,34 +5007,104 @@
|
|
|
4543
5007
|
"value": "8px"
|
|
4544
5008
|
},
|
|
4545
5009
|
{
|
|
4546
|
-
"name": "button-group-item-height",
|
|
4547
|
-
"cssVar": "--button-group-item-height",
|
|
5010
|
+
"name": "button-group-item-height-lg",
|
|
5011
|
+
"cssVar": "--button-group-item-height-lg",
|
|
4548
5012
|
"type": "dimension",
|
|
5013
|
+
"description": "ButtonGroup item lg height 40px (default — original value).",
|
|
4549
5014
|
"value": "40px"
|
|
4550
5015
|
},
|
|
4551
5016
|
{
|
|
4552
|
-
"name": "button-group-item-
|
|
4553
|
-
"cssVar": "--button-group-item-
|
|
5017
|
+
"name": "button-group-item-height-md",
|
|
5018
|
+
"cssVar": "--button-group-item-height-md",
|
|
5019
|
+
"type": "dimension",
|
|
5020
|
+
"description": "ButtonGroup item md height 36px per DES-1250 item 3.",
|
|
5021
|
+
"value": "36px"
|
|
5022
|
+
},
|
|
5023
|
+
{
|
|
5024
|
+
"name": "button-group-item-height-sm",
|
|
5025
|
+
"cssVar": "--button-group-item-height-sm",
|
|
5026
|
+
"type": "dimension",
|
|
5027
|
+
"description": "ButtonGroup item sm height 32px per DES-1250 item 3 — was hardcoded lg-only.",
|
|
5028
|
+
"value": "32px"
|
|
5029
|
+
},
|
|
5030
|
+
{
|
|
5031
|
+
"name": "button-group-item-line-height",
|
|
5032
|
+
"cssVar": "--button-group-item-line-height",
|
|
5033
|
+
"type": "dimension",
|
|
5034
|
+
"description": "ButtonGroup item line-height aligned with Figma text/line-height/xs (16px) per DES-1250 item 6 — was Tailwind inherit.",
|
|
5035
|
+
"value": "16px"
|
|
5036
|
+
},
|
|
5037
|
+
{
|
|
5038
|
+
"name": "button-group-item-padding-x-lg",
|
|
5039
|
+
"cssVar": "--button-group-item-padding-x-lg",
|
|
5040
|
+
"type": "dimension",
|
|
5041
|
+
"value": "16px"
|
|
5042
|
+
},
|
|
5043
|
+
{
|
|
5044
|
+
"name": "button-group-item-padding-x-md",
|
|
5045
|
+
"cssVar": "--button-group-item-padding-x-md",
|
|
4554
5046
|
"type": "dimension",
|
|
4555
5047
|
"value": "16px"
|
|
4556
5048
|
},
|
|
4557
5049
|
{
|
|
4558
|
-
"name": "button-group-item-padding-
|
|
4559
|
-
"cssVar": "--button-group-item-padding-
|
|
5050
|
+
"name": "button-group-item-padding-x-sm",
|
|
5051
|
+
"cssVar": "--button-group-item-padding-x-sm",
|
|
5052
|
+
"type": "dimension",
|
|
5053
|
+
"description": "ButtonGroup item sm padding-x 12px per DES-1250 item 3.",
|
|
5054
|
+
"value": "12px"
|
|
5055
|
+
},
|
|
5056
|
+
{
|
|
5057
|
+
"name": "button-group-item-padding-y-lg",
|
|
5058
|
+
"cssVar": "--button-group-item-padding-y-lg",
|
|
5059
|
+
"type": "dimension",
|
|
5060
|
+
"value": "8px"
|
|
5061
|
+
},
|
|
5062
|
+
{
|
|
5063
|
+
"name": "button-group-item-padding-y-md",
|
|
5064
|
+
"cssVar": "--button-group-item-padding-y-md",
|
|
4560
5065
|
"type": "dimension",
|
|
4561
5066
|
"value": "8px"
|
|
4562
5067
|
},
|
|
4563
5068
|
{
|
|
4564
|
-
"name": "button-group-
|
|
4565
|
-
"cssVar": "--button-group-
|
|
5069
|
+
"name": "button-group-item-padding-y-sm",
|
|
5070
|
+
"cssVar": "--button-group-item-padding-y-sm",
|
|
5071
|
+
"type": "dimension",
|
|
5072
|
+
"description": "ButtonGroup item sm padding-y 6px per DES-1250 item 3.",
|
|
5073
|
+
"value": "6px"
|
|
5074
|
+
},
|
|
5075
|
+
{
|
|
5076
|
+
"name": "button-group-root-bg-primary",
|
|
5077
|
+
"cssVar": "--button-group-root-bg-primary",
|
|
5078
|
+
"type": "color",
|
|
5079
|
+
"description": "ButtonGroup primary variant bg per DES-1250 item 4 — Figma brand/primary/background.",
|
|
5080
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
5081
|
+
},
|
|
5082
|
+
{
|
|
5083
|
+
"name": "button-group-root-border-color-default",
|
|
5084
|
+
"cssVar": "--button-group-root-border-color-default",
|
|
4566
5085
|
"type": "color",
|
|
4567
5086
|
"value": "oklch(92.19% 0.0000 0)"
|
|
4568
5087
|
},
|
|
5088
|
+
{
|
|
5089
|
+
"name": "button-group-root-border-color-primary",
|
|
5090
|
+
"cssVar": "--button-group-root-border-color-primary",
|
|
5091
|
+
"type": "color",
|
|
5092
|
+
"description": "ButtonGroup primary variant border color per DES-1250 item 4 — Figma brand/primary/active.",
|
|
5093
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
5094
|
+
},
|
|
5095
|
+
{
|
|
5096
|
+
"name": "button-group-root-fg-primary",
|
|
5097
|
+
"cssVar": "--button-group-root-fg-primary",
|
|
5098
|
+
"type": "color",
|
|
5099
|
+
"description": "ButtonGroup primary variant text per DES-1250 item 4.",
|
|
5100
|
+
"value": "oklch(18.34% 0.0338 166.67)"
|
|
5101
|
+
},
|
|
4569
5102
|
{
|
|
4570
5103
|
"name": "button-group-root-radius",
|
|
4571
5104
|
"cssVar": "--button-group-root-radius",
|
|
4572
5105
|
"type": "dimension",
|
|
4573
|
-
"
|
|
5106
|
+
"description": "ButtonGroup root radius aligned with Figma radius/md (8px) per DES-1250 — pre-fix was 0.375rem (6px).",
|
|
5107
|
+
"value": "8px"
|
|
4574
5108
|
},
|
|
4575
5109
|
{
|
|
4576
5110
|
"name": "button-group-root-shadow",
|
|
@@ -4583,6 +5117,33 @@
|
|
|
4583
5117
|
"type": "color",
|
|
4584
5118
|
"value": "oklch(92.19% 0.0000 0)"
|
|
4585
5119
|
},
|
|
5120
|
+
{
|
|
5121
|
+
"name": "button-group-text-background",
|
|
5122
|
+
"cssVar": "--button-group-text-background",
|
|
5123
|
+
"type": "color",
|
|
5124
|
+
"description": "ButtonGroupText bg per DES-1250 item 11 — was Tailwind bg-muted utility.",
|
|
5125
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
5126
|
+
},
|
|
5127
|
+
{
|
|
5128
|
+
"name": "button-group-text-font-size",
|
|
5129
|
+
"cssVar": "--button-group-text-font-size",
|
|
5130
|
+
"type": "dimension",
|
|
5131
|
+
"description": "ButtonGroupText font-size per DES-1250 item 11.",
|
|
5132
|
+
"value": "0.875rem"
|
|
5133
|
+
},
|
|
5134
|
+
{
|
|
5135
|
+
"name": "button-group-text-font-weight",
|
|
5136
|
+
"cssVar": "--button-group-text-font-weight",
|
|
5137
|
+
"description": "ButtonGroupText font-weight per DES-1250 item 11.",
|
|
5138
|
+
"value": "500"
|
|
5139
|
+
},
|
|
5140
|
+
{
|
|
5141
|
+
"name": "button-group-text-padding-x",
|
|
5142
|
+
"cssVar": "--button-group-text-padding-x",
|
|
5143
|
+
"type": "dimension",
|
|
5144
|
+
"description": "ButtonGroupText padding-x per DES-1250 item 11.",
|
|
5145
|
+
"value": "16px"
|
|
5146
|
+
},
|
|
4586
5147
|
{
|
|
4587
5148
|
"name": "button-link-color-fg-default",
|
|
4588
5149
|
"cssVar": "--button-link-color-fg-default",
|
|
@@ -4641,7 +5202,8 @@
|
|
|
4641
5202
|
"name": "button-radius-default",
|
|
4642
5203
|
"cssVar": "--button-radius-default",
|
|
4643
5204
|
"type": "dimension",
|
|
4644
|
-
"
|
|
5205
|
+
"description": "Button radius default aligned with Figma radius/md (8px) per Bowser audit Button DES-932 — pre-fix was 6px (recurring across Combobox/Select/DatePicker/ButtonGroup).",
|
|
5206
|
+
"value": "8px"
|
|
4645
5207
|
},
|
|
4646
5208
|
{
|
|
4647
5209
|
"name": "button-radius-full",
|
|
@@ -4673,47 +5235,74 @@
|
|
|
4673
5235
|
"type": "color",
|
|
4674
5236
|
"value": "oklch(81.75% 0.1821 159.79)"
|
|
4675
5237
|
},
|
|
5238
|
+
{
|
|
5239
|
+
"name": "button-ring-destructive",
|
|
5240
|
+
"cssVar": "--button-ring-destructive",
|
|
5241
|
+
"type": "color",
|
|
5242
|
+
"description": "Button destructive focus-ring per DES-1248 — was bare ring-destructive/20 utility.",
|
|
5243
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
5244
|
+
},
|
|
4676
5245
|
{
|
|
4677
5246
|
"name": "button-ring-gray",
|
|
4678
5247
|
"cssVar": "--button-ring-gray",
|
|
4679
5248
|
"type": "color",
|
|
4680
5249
|
"value": "oklch(81.75% 0.1821 159.79)"
|
|
4681
5250
|
},
|
|
5251
|
+
{
|
|
5252
|
+
"name": "button-ring-success",
|
|
5253
|
+
"cssVar": "--button-ring-success",
|
|
5254
|
+
"type": "color",
|
|
5255
|
+
"description": "Button success focus-ring per DES-1248.",
|
|
5256
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
5257
|
+
},
|
|
5258
|
+
{
|
|
5259
|
+
"name": "button-ring-warning",
|
|
5260
|
+
"cssVar": "--button-ring-warning",
|
|
5261
|
+
"type": "color",
|
|
5262
|
+
"description": "Button warning focus-ring per DES-1248.",
|
|
5263
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
5264
|
+
},
|
|
4682
5265
|
{
|
|
4683
5266
|
"name": "button-secondary-color-bg-default",
|
|
4684
5267
|
"cssVar": "--button-secondary-color-bg-default",
|
|
4685
5268
|
"type": "color",
|
|
4686
|
-
"
|
|
5269
|
+
"description": "Button secondary-color bg = brand-secondary-500 #8ff566 (Figma 1007:301 — was hardcoded #8ff0b1, corrected per Figma source of truth)",
|
|
5270
|
+
"value": "oklch(87.82% 0.2037 137.75)"
|
|
4687
5271
|
},
|
|
4688
5272
|
{
|
|
4689
5273
|
"name": "button-secondary-color-bg-hover",
|
|
4690
5274
|
"cssVar": "--button-secondary-color-bg-hover",
|
|
4691
5275
|
"type": "color",
|
|
4692
|
-
"
|
|
5276
|
+
"description": "Button secondary-color hover = brand-secondary-600 #6ebe4d (Figma — was #75ec9e)",
|
|
5277
|
+
"value": "oklch(72.57% 0.1684 137.62)"
|
|
4693
5278
|
},
|
|
4694
5279
|
{
|
|
4695
5280
|
"name": "button-secondary-color-border-default",
|
|
4696
5281
|
"cssVar": "--button-secondary-color-border-default",
|
|
4697
5282
|
"type": "color",
|
|
4698
|
-
"
|
|
5283
|
+
"description": "Button secondary-color border = brand-secondary-500 (Figma — was #75ec9e)",
|
|
5284
|
+
"value": "oklch(87.82% 0.2037 137.75)"
|
|
4699
5285
|
},
|
|
4700
5286
|
{
|
|
4701
5287
|
"name": "button-secondary-color-border-hover",
|
|
4702
5288
|
"cssVar": "--button-secondary-color-border-hover",
|
|
4703
5289
|
"type": "color",
|
|
4704
|
-
"
|
|
5290
|
+
"description": "Button secondary-color border hover = brand-secondary-600 (Figma — was #63ea93)",
|
|
5291
|
+
"value": "oklch(72.57% 0.1684 137.62)"
|
|
4705
5292
|
},
|
|
4706
5293
|
{
|
|
4707
5294
|
"name": "button-secondary-color-fg-default",
|
|
4708
5295
|
"cssVar": "--button-secondary-color-fg-default",
|
|
4709
5296
|
"type": "color",
|
|
4710
|
-
"
|
|
5297
|
+
"description": "Button secondary-color fg = brand-secondary-950 (Figma — was hardcoded #26a853)",
|
|
5298
|
+
"value": "oklch(21.23% 0.0502 138.22)"
|
|
4711
5299
|
},
|
|
4712
5300
|
{
|
|
4713
5301
|
"name": "button-secondary-color-fg-hover",
|
|
4714
5302
|
"cssVar": "--button-secondary-color-fg-hover",
|
|
4715
5303
|
"type": "color",
|
|
4716
|
-
"
|
|
5304
|
+
"description": "Button secondary-color fg hover = brand-secondary-950 (Figma — was #1c8d43)",
|
|
5305
|
+
"value": "oklch(21.23% 0.0502 138.22)"
|
|
4717
5306
|
},
|
|
4718
5307
|
{
|
|
4719
5308
|
"name": "button-secondary-gray-bg-default",
|
|
@@ -5015,6 +5604,13 @@
|
|
|
5015
5604
|
"type": "color",
|
|
5016
5605
|
"value": "oklch(14.48% 0.0000 0)"
|
|
5017
5606
|
},
|
|
5607
|
+
{
|
|
5608
|
+
"name": "button-transition-duration",
|
|
5609
|
+
"cssVar": "--button-transition-duration",
|
|
5610
|
+
"type": "duration",
|
|
5611
|
+
"description": "Button transition duration aligned with Figma canonical (150ms). Sits between --duration-fast (100ms) and --duration-default (200ms).",
|
|
5612
|
+
"value": "150ms"
|
|
5613
|
+
},
|
|
5018
5614
|
{
|
|
5019
5615
|
"name": "calendar-cell-gap",
|
|
5020
5616
|
"cssVar": "--calendar-cell-gap",
|
|
@@ -5143,7 +5739,8 @@
|
|
|
5143
5739
|
"name": "callout-root-radius",
|
|
5144
5740
|
"cssVar": "--callout-root-radius",
|
|
5145
5741
|
"type": "dimension",
|
|
5146
|
-
"
|
|
5742
|
+
"description": "Callout root radius aligned with Figma radius/sm (4px) per DES-1252 — pre-fix was 0.5rem (8px).",
|
|
5743
|
+
"value": "4px"
|
|
5147
5744
|
},
|
|
5148
5745
|
{
|
|
5149
5746
|
"name": "callout-text-lg",
|
|
@@ -5406,7 +6003,8 @@
|
|
|
5406
6003
|
"name": "checkbox-root-border-default",
|
|
5407
6004
|
"cssVar": "--checkbox-root-border-default",
|
|
5408
6005
|
"type": "color",
|
|
5409
|
-
"
|
|
6006
|
+
"description": "Unchecked border. Aligned with Figma core/border/border (#e5e5e5) per Bowser audit Checkbox Discrepancia 1 — pre-fix was oklch(81.75% 0.1821 159.79) (mint, visual bug).",
|
|
6007
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
5410
6008
|
},
|
|
5411
6009
|
{
|
|
5412
6010
|
"name": "checkbox-root-border-focus",
|
|
@@ -5418,7 +6016,8 @@
|
|
|
5418
6016
|
"name": "checkbox-root-radius",
|
|
5419
6017
|
"cssVar": "--checkbox-root-radius",
|
|
5420
6018
|
"type": "dimension",
|
|
5421
|
-
"
|
|
6019
|
+
"description": "Checkbox border-radius. Aligned with Figma radius/sm (4px) per Bowser audit Checkbox Discrepancia 2 — pre-fix was 0.375rem (6px).",
|
|
6020
|
+
"value": "4px"
|
|
5422
6021
|
},
|
|
5423
6022
|
{
|
|
5424
6023
|
"name": "checkbox-root-shadow",
|
|
@@ -5497,11 +6096,39 @@
|
|
|
5497
6096
|
"type": "dimension",
|
|
5498
6097
|
"value": "260px"
|
|
5499
6098
|
},
|
|
6099
|
+
{
|
|
6100
|
+
"name": "color-picker-filled-preview-radius",
|
|
6101
|
+
"cssVar": "--color-picker-filled-preview-radius",
|
|
6102
|
+
"type": "dimension",
|
|
6103
|
+
"description": "ColorPicker Filled trigger preview swatch circular per DES-1256 item 5 — matches Figma.",
|
|
6104
|
+
"value": "9999px"
|
|
6105
|
+
},
|
|
6106
|
+
{
|
|
6107
|
+
"name": "color-picker-focus-ring-destructive",
|
|
6108
|
+
"cssVar": "--color-picker-focus-ring-destructive",
|
|
6109
|
+
"type": "color",
|
|
6110
|
+
"description": "ColorPicker focus ring destructive per DES-1256 item 5.",
|
|
6111
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
6112
|
+
},
|
|
6113
|
+
{
|
|
6114
|
+
"name": "color-picker-focus-ring-primary",
|
|
6115
|
+
"cssVar": "--color-picker-focus-ring-primary",
|
|
6116
|
+
"type": "color",
|
|
6117
|
+
"description": "ColorPicker focus ring primary per DES-1256 item 5.",
|
|
6118
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
6119
|
+
},
|
|
6120
|
+
{
|
|
6121
|
+
"name": "color-picker-focus-ring-width",
|
|
6122
|
+
"cssVar": "--color-picker-focus-ring-width",
|
|
6123
|
+
"type": "dimension",
|
|
6124
|
+
"value": "3px"
|
|
6125
|
+
},
|
|
5500
6126
|
{
|
|
5501
6127
|
"name": "color-picker-swatch-radius",
|
|
5502
6128
|
"cssVar": "--color-picker-swatch-radius",
|
|
5503
6129
|
"type": "dimension",
|
|
5504
|
-
"
|
|
6130
|
+
"description": "Swatch border-radius circular (radius/pill) aligned with Figma per Bowser audit ColorPicker Pendência 1 — pre-fix was 0.125rem (2px). Figma shows all swatches as fully circular.",
|
|
6131
|
+
"value": "9999px"
|
|
5505
6132
|
},
|
|
5506
6133
|
{
|
|
5507
6134
|
"name": "color-picker-swatch-size",
|
|
@@ -5519,13 +6146,15 @@
|
|
|
5519
6146
|
"name": "color-picker-trigger-radius",
|
|
5520
6147
|
"cssVar": "--color-picker-trigger-radius",
|
|
5521
6148
|
"type": "dimension",
|
|
5522
|
-
"
|
|
6149
|
+
"description": "Trigger border-radius aligned with Figma radius/md (8px) per Bowser audit ColorPicker — pre-fix was 0.375rem (6px) but rendered 0px due to Tailwind class precedence.",
|
|
6150
|
+
"value": "8px"
|
|
5523
6151
|
},
|
|
5524
6152
|
{
|
|
5525
6153
|
"name": "color-picker-trigger-size",
|
|
5526
6154
|
"cssVar": "--color-picker-trigger-size",
|
|
5527
6155
|
"type": "dimension",
|
|
5528
|
-
"
|
|
6156
|
+
"description": "ColorPicker trigger size 40px aligned with Figma canonical (frame 1384:7726 default = 40h) — pre-fix was spacing.8 (32px).",
|
|
6157
|
+
"value": "40px"
|
|
5529
6158
|
},
|
|
5530
6159
|
{
|
|
5531
6160
|
"name": "color-safari",
|
|
@@ -5561,7 +6190,8 @@
|
|
|
5561
6190
|
"name": "combobox-content-radius",
|
|
5562
6191
|
"cssVar": "--combobox-content-radius",
|
|
5563
6192
|
"type": "dimension",
|
|
5564
|
-
"
|
|
6193
|
+
"description": "Content popover border-radius aligned with Figma radius/md (8px) per Bowser audit — pre-fix was 0.375rem (6px).",
|
|
6194
|
+
"value": "8px"
|
|
5565
6195
|
},
|
|
5566
6196
|
{
|
|
5567
6197
|
"name": "combobox-content-shadow",
|
|
@@ -5615,27 +6245,49 @@
|
|
|
5615
6245
|
"value": "oklch(81.75% 0.1821 159.79)"
|
|
5616
6246
|
},
|
|
5617
6247
|
{
|
|
5618
|
-
"name": "combobox-trigger-
|
|
5619
|
-
"cssVar": "--combobox-trigger-
|
|
6248
|
+
"name": "combobox-trigger-disabled-bg",
|
|
6249
|
+
"cssVar": "--combobox-trigger-disabled-bg",
|
|
6250
|
+
"type": "color",
|
|
6251
|
+
"description": "Combobox disabled bg per DES-1258 item 4 (token vs opacity).",
|
|
6252
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
6253
|
+
},
|
|
6254
|
+
{
|
|
6255
|
+
"name": "combobox-trigger-disabled-border",
|
|
6256
|
+
"cssVar": "--combobox-trigger-disabled-border",
|
|
6257
|
+
"type": "color",
|
|
6258
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
6259
|
+
},
|
|
6260
|
+
{
|
|
6261
|
+
"name": "combobox-trigger-disabled-fg",
|
|
6262
|
+
"cssVar": "--combobox-trigger-disabled-fg",
|
|
6263
|
+
"type": "color",
|
|
6264
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
6265
|
+
},
|
|
6266
|
+
{
|
|
6267
|
+
"name": "combobox-trigger-gap",
|
|
6268
|
+
"cssVar": "--combobox-trigger-gap",
|
|
5620
6269
|
"value": "8px"
|
|
5621
6270
|
},
|
|
5622
6271
|
{
|
|
5623
6272
|
"name": "combobox-trigger-height-lg",
|
|
5624
6273
|
"cssVar": "--combobox-trigger-height-lg",
|
|
5625
6274
|
"type": "dimension",
|
|
5626
|
-
"
|
|
6275
|
+
"description": "Combobox trigger lg 44px aligned with Input lg scale.",
|
|
6276
|
+
"value": "44px"
|
|
5627
6277
|
},
|
|
5628
6278
|
{
|
|
5629
6279
|
"name": "combobox-trigger-height-md",
|
|
5630
6280
|
"cssVar": "--combobox-trigger-height-md",
|
|
5631
6281
|
"type": "dimension",
|
|
5632
|
-
"
|
|
6282
|
+
"description": "Combobox trigger md 40px aligned with Figma canonical (frame 1387:14613, all variants 40h) — pre-fix was 36px.",
|
|
6283
|
+
"value": "40px"
|
|
5633
6284
|
},
|
|
5634
6285
|
{
|
|
5635
6286
|
"name": "combobox-trigger-height-sm",
|
|
5636
6287
|
"cssVar": "--combobox-trigger-height-sm",
|
|
5637
6288
|
"type": "dimension",
|
|
5638
|
-
"
|
|
6289
|
+
"description": "Combobox trigger sm 36px aligned with Input scale (Figma 1387:14613 default = 40h).",
|
|
6290
|
+
"value": "36px"
|
|
5639
6291
|
},
|
|
5640
6292
|
{
|
|
5641
6293
|
"name": "combobox-trigger-padding-x-lg",
|
|
@@ -5671,7 +6323,21 @@
|
|
|
5671
6323
|
"name": "combobox-trigger-radius",
|
|
5672
6324
|
"cssVar": "--combobox-trigger-radius",
|
|
5673
6325
|
"type": "dimension",
|
|
5674
|
-
"
|
|
6326
|
+
"description": "Trigger border-radius aligned with Figma radius/md (8px) per Bowser audit Combobox token mismatch — pre-fix was 0.375rem (6px).",
|
|
6327
|
+
"value": "8px"
|
|
6328
|
+
},
|
|
6329
|
+
{
|
|
6330
|
+
"name": "combobox-trigger-ring-primary",
|
|
6331
|
+
"cssVar": "--combobox-trigger-ring-primary",
|
|
6332
|
+
"type": "color",
|
|
6333
|
+
"description": "Combobox trigger focus ring primary per DES-1258 item 5.",
|
|
6334
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
6335
|
+
},
|
|
6336
|
+
{
|
|
6337
|
+
"name": "combobox-trigger-ring-width",
|
|
6338
|
+
"cssVar": "--combobox-trigger-ring-width",
|
|
6339
|
+
"type": "dimension",
|
|
6340
|
+
"value": "3px"
|
|
5675
6341
|
},
|
|
5676
6342
|
{
|
|
5677
6343
|
"name": "combobox-trigger-text-lg",
|
|
@@ -6127,7 +6793,8 @@
|
|
|
6127
6793
|
"name": "context-menu-content-radius",
|
|
6128
6794
|
"cssVar": "--context-menu-content-radius",
|
|
6129
6795
|
"type": "dimension",
|
|
6130
|
-
"
|
|
6796
|
+
"description": "ContextMenu content radius 8px (radius/md) aligned with Figma canonical (frame 1442:5064) and peer DropdownMenu/Menubar — pre-fix was 0.375rem (6px), inconsistent with peers.",
|
|
6797
|
+
"value": "8px"
|
|
6131
6798
|
},
|
|
6132
6799
|
{
|
|
6133
6800
|
"name": "context-menu-content-z-index",
|
|
@@ -6369,6 +7036,42 @@
|
|
|
6369
7036
|
"type": "dimension",
|
|
6370
7037
|
"value": "36px"
|
|
6371
7038
|
},
|
|
7039
|
+
{
|
|
7040
|
+
"name": "date-picker-content-bg",
|
|
7041
|
+
"cssVar": "--date-picker-content-bg",
|
|
7042
|
+
"type": "color",
|
|
7043
|
+
"description": "DatePicker popover content bg per DES-1262 item 2.",
|
|
7044
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
7045
|
+
},
|
|
7046
|
+
{
|
|
7047
|
+
"name": "date-picker-content-border",
|
|
7048
|
+
"cssVar": "--date-picker-content-border",
|
|
7049
|
+
"type": "color",
|
|
7050
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
7051
|
+
},
|
|
7052
|
+
{
|
|
7053
|
+
"name": "date-picker-content-fg",
|
|
7054
|
+
"cssVar": "--date-picker-content-fg",
|
|
7055
|
+
"type": "color",
|
|
7056
|
+
"value": "oklch(20.46% 0.0000 0)"
|
|
7057
|
+
},
|
|
7058
|
+
{
|
|
7059
|
+
"name": "date-picker-content-padding",
|
|
7060
|
+
"cssVar": "--date-picker-content-padding",
|
|
7061
|
+
"type": "dimension",
|
|
7062
|
+
"value": "12px"
|
|
7063
|
+
},
|
|
7064
|
+
{
|
|
7065
|
+
"name": "date-picker-content-radius",
|
|
7066
|
+
"cssVar": "--date-picker-content-radius",
|
|
7067
|
+
"type": "dimension",
|
|
7068
|
+
"value": "8px"
|
|
7069
|
+
},
|
|
7070
|
+
{
|
|
7071
|
+
"name": "date-picker-content-shadow",
|
|
7072
|
+
"cssVar": "--date-picker-content-shadow",
|
|
7073
|
+
"value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
|
7074
|
+
},
|
|
6372
7075
|
{
|
|
6373
7076
|
"name": "date-picker-footer-gap",
|
|
6374
7077
|
"cssVar": "--date-picker-footer-gap",
|
|
@@ -6393,6 +7096,38 @@
|
|
|
6393
7096
|
"type": "dimension",
|
|
6394
7097
|
"value": "140px"
|
|
6395
7098
|
},
|
|
7099
|
+
{
|
|
7100
|
+
"name": "date-picker-trigger-border-default",
|
|
7101
|
+
"cssVar": "--date-picker-trigger-border-default",
|
|
7102
|
+
"type": "color",
|
|
7103
|
+
"description": "DatePicker trigger border default per DES-1262 item 2.",
|
|
7104
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
7105
|
+
},
|
|
7106
|
+
{
|
|
7107
|
+
"name": "date-picker-trigger-border-focus",
|
|
7108
|
+
"cssVar": "--date-picker-trigger-border-focus",
|
|
7109
|
+
"type": "color",
|
|
7110
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
7111
|
+
},
|
|
7112
|
+
{
|
|
7113
|
+
"name": "date-picker-trigger-disabled-bg",
|
|
7114
|
+
"cssVar": "--date-picker-trigger-disabled-bg",
|
|
7115
|
+
"type": "color",
|
|
7116
|
+
"description": "DatePicker disabled bg per DES-1262 item 3 (triplet vs opacity).",
|
|
7117
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
7118
|
+
},
|
|
7119
|
+
{
|
|
7120
|
+
"name": "date-picker-trigger-disabled-border",
|
|
7121
|
+
"cssVar": "--date-picker-trigger-disabled-border",
|
|
7122
|
+
"type": "color",
|
|
7123
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
7124
|
+
},
|
|
7125
|
+
{
|
|
7126
|
+
"name": "date-picker-trigger-disabled-fg",
|
|
7127
|
+
"cssVar": "--date-picker-trigger-disabled-fg",
|
|
7128
|
+
"type": "color",
|
|
7129
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
7130
|
+
},
|
|
6396
7131
|
{
|
|
6397
7132
|
"name": "date-picker-trigger-height-lg",
|
|
6398
7133
|
"cssVar": "--date-picker-trigger-height-lg",
|
|
@@ -6456,6 +7191,26 @@
|
|
|
6456
7191
|
"type": "dimension",
|
|
6457
7192
|
"value": "6px"
|
|
6458
7193
|
},
|
|
7194
|
+
{
|
|
7195
|
+
"name": "date-picker-trigger-radius",
|
|
7196
|
+
"cssVar": "--date-picker-trigger-radius",
|
|
7197
|
+
"type": "dimension",
|
|
7198
|
+
"description": "Trigger border-radius aligned with Figma radius/md (8px) per Bowser audit DatePicker — was missing, code used rounded-md utility which resolved to 0px.",
|
|
7199
|
+
"value": "8px"
|
|
7200
|
+
},
|
|
7201
|
+
{
|
|
7202
|
+
"name": "date-picker-trigger-ring-primary",
|
|
7203
|
+
"cssVar": "--date-picker-trigger-ring-primary",
|
|
7204
|
+
"type": "color",
|
|
7205
|
+
"description": "DatePicker trigger focus ring per DES-1262 item 2.",
|
|
7206
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
7207
|
+
},
|
|
7208
|
+
{
|
|
7209
|
+
"name": "date-picker-trigger-ring-width",
|
|
7210
|
+
"cssVar": "--date-picker-trigger-ring-width",
|
|
7211
|
+
"type": "dimension",
|
|
7212
|
+
"value": "3px"
|
|
7213
|
+
},
|
|
6459
7214
|
{
|
|
6460
7215
|
"name": "date-picker-trigger-text-lg",
|
|
6461
7216
|
"cssVar": "--date-picker-trigger-text-lg",
|
|
@@ -6479,24 +7234,35 @@
|
|
|
6479
7234
|
"name": "date-range-picker-calendar-gap",
|
|
6480
7235
|
"cssVar": "--date-range-picker-calendar-gap",
|
|
6481
7236
|
"type": "dimension",
|
|
7237
|
+
"description": "DateRangePicker gap between two calendar months per DES-1264.",
|
|
6482
7238
|
"value": "16px"
|
|
6483
7239
|
},
|
|
6484
7240
|
{
|
|
6485
|
-
"name": "date-range-picker-
|
|
6486
|
-
"cssVar": "--date-range-picker-
|
|
7241
|
+
"name": "date-range-picker-today-button-height",
|
|
7242
|
+
"cssVar": "--date-range-picker-today-button-height",
|
|
6487
7243
|
"type": "dimension",
|
|
6488
|
-
"
|
|
7244
|
+
"description": "DateRangePicker Today button height per DES-1264 item 4 — was hardcoded h-7.",
|
|
7245
|
+
"value": "28px"
|
|
6489
7246
|
},
|
|
6490
7247
|
{
|
|
6491
|
-
"name": "date-range-picker-
|
|
6492
|
-
"cssVar": "--date-range-picker-
|
|
7248
|
+
"name": "date-range-picker-today-button-text-size",
|
|
7249
|
+
"cssVar": "--date-range-picker-today-button-text-size",
|
|
6493
7250
|
"type": "dimension",
|
|
6494
|
-
"
|
|
7251
|
+
"description": "DateRangePicker Today button font-size per DES-1264 item 4 — was hardcoded text-xs.",
|
|
7252
|
+
"value": "0.75rem"
|
|
7253
|
+
},
|
|
7254
|
+
{
|
|
7255
|
+
"name": "date-range-picker-trigger-gap",
|
|
7256
|
+
"cssVar": "--date-range-picker-trigger-gap",
|
|
7257
|
+
"type": "dimension",
|
|
7258
|
+
"description": "DateRangePicker trigger internal gap per DES-1264.",
|
|
7259
|
+
"value": "8px"
|
|
6495
7260
|
},
|
|
6496
7261
|
{
|
|
6497
7262
|
"name": "date-range-picker-trigger-width",
|
|
6498
7263
|
"cssVar": "--date-range-picker-trigger-width",
|
|
6499
7264
|
"type": "dimension",
|
|
7265
|
+
"description": "DateRangePicker trigger min-width per DES-1264 — range typically shows two dates, wider than DatePicker.",
|
|
6500
7266
|
"value": "300px"
|
|
6501
7267
|
},
|
|
6502
7268
|
{
|
|
@@ -6535,6 +7301,13 @@
|
|
|
6535
7301
|
"type": "color",
|
|
6536
7302
|
"value": "oklch(14.48% 0.0000 0)"
|
|
6537
7303
|
},
|
|
7304
|
+
{
|
|
7305
|
+
"name": "divider-thickness",
|
|
7306
|
+
"cssVar": "--divider-thickness",
|
|
7307
|
+
"type": "dimension",
|
|
7308
|
+
"description": "Divider line thickness per DES-1266 item 3 — Figma height/h-px + border-width/border. Cross-DS support customizable thickness.",
|
|
7309
|
+
"value": "1px"
|
|
7310
|
+
},
|
|
6538
7311
|
{
|
|
6539
7312
|
"name": "drag-and-drop-draggable-opacity-dragging",
|
|
6540
7313
|
"cssVar": "--drag-and-drop-draggable-opacity-dragging",
|
|
@@ -6598,7 +7371,8 @@
|
|
|
6598
7371
|
"name": "drawer-content-bg",
|
|
6599
7372
|
"cssVar": "--drawer-content-bg",
|
|
6600
7373
|
"type": "color",
|
|
6601
|
-
"
|
|
7374
|
+
"description": "Drawer content bg aligned with Figma core/background/surface (#fafafa) per DES-1268 — pre-fix was light.base.background (white).",
|
|
7375
|
+
"value": "oklch(98.51% 0.0000 0)"
|
|
6602
7376
|
},
|
|
6603
7377
|
{
|
|
6604
7378
|
"name": "drawer-content-border",
|
|
@@ -6628,13 +7402,15 @@
|
|
|
6628
7402
|
"name": "drawer-handle-bg",
|
|
6629
7403
|
"cssVar": "--drawer-handle-bg",
|
|
6630
7404
|
"type": "color",
|
|
6631
|
-
"
|
|
7405
|
+
"description": "Drawer handle bg aligned with Figma muted-foreground (#737373) per DES-1268 item 2 — pre-fix was light.base.muted (almost invisible).",
|
|
7406
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
6632
7407
|
},
|
|
6633
7408
|
{
|
|
6634
7409
|
"name": "drawer-handle-height",
|
|
6635
7410
|
"cssVar": "--drawer-handle-height",
|
|
6636
7411
|
"type": "dimension",
|
|
6637
|
-
"
|
|
7412
|
+
"description": "Drawer handle height aligned with Figma 4px per DES-1268 item 3 — pre-fix was spacing.2 (8px, 2x off).",
|
|
7413
|
+
"value": "4px"
|
|
6638
7414
|
},
|
|
6639
7415
|
{
|
|
6640
7416
|
"name": "drawer-handle-margin-top",
|
|
@@ -6646,7 +7422,8 @@
|
|
|
6646
7422
|
"name": "drawer-handle-width",
|
|
6647
7423
|
"cssVar": "--drawer-handle-width",
|
|
6648
7424
|
"type": "dimension",
|
|
6649
|
-
"
|
|
7425
|
+
"description": "Drawer handle width aligned with Figma 32px per DES-1268 item 3 — pre-fix was spacing.24 (96px, 3x off).",
|
|
7426
|
+
"value": "32px"
|
|
6650
7427
|
},
|
|
6651
7428
|
{
|
|
6652
7429
|
"name": "drawer-header-gap",
|
|
@@ -6694,7 +7471,7 @@
|
|
|
6694
7471
|
"name": "dropdown-menu-content-radius",
|
|
6695
7472
|
"cssVar": "--dropdown-menu-content-radius",
|
|
6696
7473
|
"type": "dimension",
|
|
6697
|
-
"value": "
|
|
7474
|
+
"value": "8px"
|
|
6698
7475
|
},
|
|
6699
7476
|
{
|
|
6700
7477
|
"name": "dropdown-menu-content-z-index",
|
|
@@ -6748,7 +7525,7 @@
|
|
|
6748
7525
|
"name": "dropdown-menu-item-radius",
|
|
6749
7526
|
"cssVar": "--dropdown-menu-item-radius",
|
|
6750
7527
|
"type": "dimension",
|
|
6751
|
-
"value": "
|
|
7528
|
+
"value": "4px"
|
|
6752
7529
|
},
|
|
6753
7530
|
{
|
|
6754
7531
|
"name": "dropdown-menu-item-text-size",
|
|
@@ -6837,173 +7614,466 @@
|
|
|
6837
7614
|
"value": "500px"
|
|
6838
7615
|
},
|
|
6839
7616
|
{
|
|
6840
|
-
"name": "
|
|
6841
|
-
"cssVar": "--
|
|
6842
|
-
"type": "color",
|
|
6843
|
-
"value": "oklch(55.55% 0.0000 0)"
|
|
6844
|
-
},
|
|
6845
|
-
{
|
|
6846
|
-
"name": "feed-content-description-size",
|
|
6847
|
-
"cssVar": "--feed-content-description-size",
|
|
7617
|
+
"name": "feature-item-body-gap",
|
|
7618
|
+
"cssVar": "--feature-item-body-gap",
|
|
6848
7619
|
"type": "dimension",
|
|
6849
|
-
"value": "
|
|
7620
|
+
"value": "4px"
|
|
6850
7621
|
},
|
|
6851
7622
|
{
|
|
6852
|
-
"name": "
|
|
6853
|
-
"cssVar": "--
|
|
6854
|
-
"
|
|
7623
|
+
"name": "feature-item-description-color",
|
|
7624
|
+
"cssVar": "--feature-item-description-color",
|
|
7625
|
+
"type": "color",
|
|
7626
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
6855
7627
|
},
|
|
6856
7628
|
{
|
|
6857
|
-
"name": "
|
|
6858
|
-
"cssVar": "--
|
|
6859
|
-
"type": "
|
|
6860
|
-
"value": "
|
|
7629
|
+
"name": "feature-item-description-font-size",
|
|
7630
|
+
"cssVar": "--feature-item-description-font-size",
|
|
7631
|
+
"type": "fontSize",
|
|
7632
|
+
"value": "13px"
|
|
6861
7633
|
},
|
|
6862
7634
|
{
|
|
6863
|
-
"name": "
|
|
6864
|
-
"cssVar": "--
|
|
6865
|
-
"type": "
|
|
6866
|
-
"value": "
|
|
7635
|
+
"name": "feature-item-description-line-height",
|
|
7636
|
+
"cssVar": "--feature-item-description-line-height",
|
|
7637
|
+
"type": "lineHeight",
|
|
7638
|
+
"value": "1.55"
|
|
6867
7639
|
},
|
|
6868
7640
|
{
|
|
6869
|
-
"name": "
|
|
6870
|
-
"cssVar": "--
|
|
7641
|
+
"name": "feature-item-icon-radius",
|
|
7642
|
+
"cssVar": "--feature-item-icon-radius",
|
|
6871
7643
|
"type": "dimension",
|
|
6872
|
-
"
|
|
7644
|
+
"description": "FeatureItem icon plate radius 10px per Figma /Feature-item canonical.",
|
|
7645
|
+
"value": "10px"
|
|
6873
7646
|
},
|
|
6874
7647
|
{
|
|
6875
|
-
"name": "
|
|
6876
|
-
"cssVar": "--
|
|
7648
|
+
"name": "feature-item-icon-size",
|
|
7649
|
+
"cssVar": "--feature-item-icon-size",
|
|
6877
7650
|
"type": "dimension",
|
|
6878
|
-
"
|
|
7651
|
+
"description": "FeatureItem icon plate size 40px per Figma /Feature-item canonical.",
|
|
7652
|
+
"value": "40px"
|
|
6879
7653
|
},
|
|
6880
7654
|
{
|
|
6881
|
-
"name": "
|
|
6882
|
-
"cssVar": "--
|
|
7655
|
+
"name": "feature-item-link-color",
|
|
7656
|
+
"cssVar": "--feature-item-link-color",
|
|
6883
7657
|
"type": "color",
|
|
6884
|
-
"value": "oklch(
|
|
7658
|
+
"value": "oklch(56.08% 0.1221 160.56)"
|
|
6885
7659
|
},
|
|
6886
7660
|
{
|
|
6887
|
-
"name": "
|
|
6888
|
-
"cssVar": "--
|
|
6889
|
-
"type": "
|
|
6890
|
-
"value": "
|
|
7661
|
+
"name": "feature-item-link-font-size",
|
|
7662
|
+
"cssVar": "--feature-item-link-font-size",
|
|
7663
|
+
"type": "fontSize",
|
|
7664
|
+
"value": "12px"
|
|
6891
7665
|
},
|
|
6892
7666
|
{
|
|
6893
|
-
"name": "
|
|
6894
|
-
"cssVar": "--
|
|
6895
|
-
"type": "
|
|
6896
|
-
"value": "
|
|
7667
|
+
"name": "feature-item-link-gap",
|
|
7668
|
+
"cssVar": "--feature-item-link-gap",
|
|
7669
|
+
"type": "dimension",
|
|
7670
|
+
"value": "4px"
|
|
6897
7671
|
},
|
|
6898
7672
|
{
|
|
6899
|
-
"name": "
|
|
6900
|
-
"cssVar": "--
|
|
7673
|
+
"name": "feature-item-link-margin-top",
|
|
7674
|
+
"cssVar": "--feature-item-link-margin-top",
|
|
6901
7675
|
"type": "dimension",
|
|
6902
|
-
"value": "
|
|
7676
|
+
"value": "4px"
|
|
6903
7677
|
},
|
|
6904
7678
|
{
|
|
6905
|
-
"name": "
|
|
6906
|
-
"cssVar": "--
|
|
7679
|
+
"name": "feature-item-root-gap",
|
|
7680
|
+
"cssVar": "--feature-item-root-gap",
|
|
6907
7681
|
"type": "dimension",
|
|
6908
|
-
"value": "
|
|
7682
|
+
"value": "14px"
|
|
6909
7683
|
},
|
|
6910
7684
|
{
|
|
6911
|
-
"name": "
|
|
6912
|
-
"cssVar": "--
|
|
7685
|
+
"name": "feature-item-root-padding",
|
|
7686
|
+
"cssVar": "--feature-item-root-padding",
|
|
6913
7687
|
"type": "dimension",
|
|
6914
|
-
"value": "
|
|
7688
|
+
"value": "4px"
|
|
6915
7689
|
},
|
|
6916
7690
|
{
|
|
6917
|
-
"name": "
|
|
6918
|
-
"cssVar": "--
|
|
6919
|
-
"type": "
|
|
6920
|
-
"value": "0.
|
|
7691
|
+
"name": "feature-item-title-color",
|
|
7692
|
+
"cssVar": "--feature-item-title-color",
|
|
7693
|
+
"type": "color",
|
|
7694
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
6921
7695
|
},
|
|
6922
7696
|
{
|
|
6923
|
-
"name": "
|
|
6924
|
-
"cssVar": "--
|
|
6925
|
-
"type": "
|
|
6926
|
-
"value": "
|
|
7697
|
+
"name": "feature-item-title-font-size",
|
|
7698
|
+
"cssVar": "--feature-item-title-font-size",
|
|
7699
|
+
"type": "fontSize",
|
|
7700
|
+
"value": "14px"
|
|
6927
7701
|
},
|
|
6928
7702
|
{
|
|
6929
|
-
"name": "
|
|
6930
|
-
"cssVar": "--
|
|
7703
|
+
"name": "feature-item-tone-brand-bg",
|
|
7704
|
+
"cssVar": "--feature-item-tone-brand-bg",
|
|
6931
7705
|
"type": "color",
|
|
6932
|
-
"value": "oklch(
|
|
7706
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
6933
7707
|
},
|
|
6934
7708
|
{
|
|
6935
|
-
"name": "
|
|
6936
|
-
"cssVar": "--
|
|
6937
|
-
"type": "
|
|
6938
|
-
"value": "0.
|
|
7709
|
+
"name": "feature-item-tone-brand-fg",
|
|
7710
|
+
"cssVar": "--feature-item-tone-brand-fg",
|
|
7711
|
+
"type": "color",
|
|
7712
|
+
"value": "oklch(18.34% 0.0338 166.67)"
|
|
6939
7713
|
},
|
|
6940
7714
|
{
|
|
6941
|
-
"name": "
|
|
6942
|
-
"cssVar": "--
|
|
7715
|
+
"name": "feature-item-tone-info-bg",
|
|
7716
|
+
"cssVar": "--feature-item-tone-info-bg",
|
|
6943
7717
|
"type": "color",
|
|
6944
|
-
"value": "oklch(
|
|
7718
|
+
"value": "oklch(97.05% 0.0142 254.60)"
|
|
6945
7719
|
},
|
|
6946
7720
|
{
|
|
6947
|
-
"name": "
|
|
6948
|
-
"cssVar": "--
|
|
7721
|
+
"name": "feature-item-tone-info-fg",
|
|
7722
|
+
"cssVar": "--feature-item-tone-info-fg",
|
|
6949
7723
|
"type": "color",
|
|
6950
|
-
"value": "oklch(
|
|
7724
|
+
"value": "oklch(48.82% 0.2172 264.38)"
|
|
6951
7725
|
},
|
|
6952
7726
|
{
|
|
6953
|
-
"name": "
|
|
6954
|
-
"cssVar": "--
|
|
7727
|
+
"name": "feature-item-tone-subtle-bg",
|
|
7728
|
+
"cssVar": "--feature-item-tone-subtle-bg",
|
|
6955
7729
|
"type": "color",
|
|
6956
|
-
"value": "oklch(
|
|
7730
|
+
"value": "oklch(97.65% 0.0243 170.99)"
|
|
6957
7731
|
},
|
|
6958
7732
|
{
|
|
6959
|
-
"name": "
|
|
6960
|
-
"cssVar": "--
|
|
6961
|
-
"
|
|
7733
|
+
"name": "feature-item-tone-subtle-fg",
|
|
7734
|
+
"cssVar": "--feature-item-tone-subtle-fg",
|
|
7735
|
+
"type": "color",
|
|
7736
|
+
"value": "oklch(56.08% 0.1221 160.56)"
|
|
6962
7737
|
},
|
|
6963
7738
|
{
|
|
6964
|
-
"name": "
|
|
6965
|
-
"cssVar": "--
|
|
6966
|
-
"type": "
|
|
6967
|
-
"value": "
|
|
7739
|
+
"name": "feature-item-tone-warning-bg",
|
|
7740
|
+
"cssVar": "--feature-item-tone-warning-bg",
|
|
7741
|
+
"type": "color",
|
|
7742
|
+
"value": "oklch(98.73% 0.0262 102.21)"
|
|
6968
7743
|
},
|
|
6969
7744
|
{
|
|
6970
|
-
"name": "
|
|
6971
|
-
"cssVar": "--
|
|
6972
|
-
"type": "
|
|
6973
|
-
"value": "
|
|
7745
|
+
"name": "feature-item-tone-warning-fg",
|
|
7746
|
+
"cssVar": "--feature-item-tone-warning-fg",
|
|
7747
|
+
"type": "color",
|
|
7748
|
+
"value": "oklch(55.38% 0.1207 66.44)"
|
|
6974
7749
|
},
|
|
6975
7750
|
{
|
|
6976
|
-
"name": "
|
|
6977
|
-
"cssVar": "--
|
|
6978
|
-
"type": "
|
|
6979
|
-
"value": "
|
|
7751
|
+
"name": "featured-icon-color-brand-bg",
|
|
7752
|
+
"cssVar": "--featured-icon-color-brand-bg",
|
|
7753
|
+
"type": "color",
|
|
7754
|
+
"value": "oklch(97.65% 0.0243 170.99)"
|
|
6980
7755
|
},
|
|
6981
7756
|
{
|
|
6982
|
-
"name": "
|
|
6983
|
-
"cssVar": "--
|
|
6984
|
-
"type": "
|
|
6985
|
-
"value": "0.
|
|
7757
|
+
"name": "featured-icon-color-brand-fg",
|
|
7758
|
+
"cssVar": "--featured-icon-color-brand-fg",
|
|
7759
|
+
"type": "color",
|
|
7760
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
6986
7761
|
},
|
|
6987
7762
|
{
|
|
6988
|
-
"name": "
|
|
6989
|
-
"cssVar": "--
|
|
7763
|
+
"name": "featured-icon-color-default-bg",
|
|
7764
|
+
"cssVar": "--featured-icon-color-default-bg",
|
|
7765
|
+
"type": "color",
|
|
7766
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
7767
|
+
},
|
|
7768
|
+
{
|
|
7769
|
+
"name": "featured-icon-color-default-fg",
|
|
7770
|
+
"cssVar": "--featured-icon-color-default-fg",
|
|
6990
7771
|
"type": "color",
|
|
6991
7772
|
"value": "oklch(55.55% 0.0000 0)"
|
|
6992
7773
|
},
|
|
6993
7774
|
{
|
|
6994
|
-
"name": "
|
|
6995
|
-
"cssVar": "--
|
|
6996
|
-
"type": "
|
|
6997
|
-
"value": "
|
|
7775
|
+
"name": "featured-icon-color-destructive-bg",
|
|
7776
|
+
"cssVar": "--featured-icon-color-destructive-bg",
|
|
7777
|
+
"type": "color",
|
|
7778
|
+
"value": "oklch(97.05% 0.0129 17.38)"
|
|
6998
7779
|
},
|
|
6999
7780
|
{
|
|
7000
|
-
"name": "
|
|
7001
|
-
"cssVar": "--
|
|
7781
|
+
"name": "featured-icon-color-destructive-fg",
|
|
7782
|
+
"cssVar": "--featured-icon-color-destructive-fg",
|
|
7002
7783
|
"type": "color",
|
|
7003
|
-
"value": "oklch(
|
|
7784
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
7004
7785
|
},
|
|
7005
7786
|
{
|
|
7006
|
-
"name": "
|
|
7787
|
+
"name": "featured-icon-color-info-bg",
|
|
7788
|
+
"cssVar": "--featured-icon-color-info-bg",
|
|
7789
|
+
"type": "color",
|
|
7790
|
+
"value": "oklch(97.05% 0.0142 254.60)"
|
|
7791
|
+
},
|
|
7792
|
+
{
|
|
7793
|
+
"name": "featured-icon-color-info-fg",
|
|
7794
|
+
"cssVar": "--featured-icon-color-info-fg",
|
|
7795
|
+
"type": "color",
|
|
7796
|
+
"value": "oklch(54.61% 0.2152 262.88)"
|
|
7797
|
+
},
|
|
7798
|
+
{
|
|
7799
|
+
"name": "featured-icon-color-success-bg",
|
|
7800
|
+
"cssVar": "--featured-icon-color-success-bg",
|
|
7801
|
+
"type": "color",
|
|
7802
|
+
"value": "oklch(98.19% 0.0181 155.83)"
|
|
7803
|
+
},
|
|
7804
|
+
{
|
|
7805
|
+
"name": "featured-icon-color-success-fg",
|
|
7806
|
+
"cssVar": "--featured-icon-color-success-fg",
|
|
7807
|
+
"type": "color",
|
|
7808
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
7809
|
+
},
|
|
7810
|
+
{
|
|
7811
|
+
"name": "featured-icon-color-warning-bg",
|
|
7812
|
+
"cssVar": "--featured-icon-color-warning-bg",
|
|
7813
|
+
"type": "color",
|
|
7814
|
+
"value": "oklch(98.73% 0.0262 102.21)"
|
|
7815
|
+
},
|
|
7816
|
+
{
|
|
7817
|
+
"name": "featured-icon-color-warning-fg",
|
|
7818
|
+
"cssVar": "--featured-icon-color-warning-fg",
|
|
7819
|
+
"type": "color",
|
|
7820
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
7821
|
+
},
|
|
7822
|
+
{
|
|
7823
|
+
"name": "featured-icon-radius-circle",
|
|
7824
|
+
"cssVar": "--featured-icon-radius-circle",
|
|
7825
|
+
"type": "dimension",
|
|
7826
|
+
"value": "9999px"
|
|
7827
|
+
},
|
|
7828
|
+
{
|
|
7829
|
+
"name": "featured-icon-radius-default",
|
|
7830
|
+
"cssVar": "--featured-icon-radius-default",
|
|
7831
|
+
"type": "dimension",
|
|
7832
|
+
"description": "FeaturedIcon default plate radius (8px) per Figma /Featured-Icon canonical.",
|
|
7833
|
+
"value": "8px"
|
|
7834
|
+
},
|
|
7835
|
+
{
|
|
7836
|
+
"name": "featured-icon-size-2xl-icon",
|
|
7837
|
+
"cssVar": "--featured-icon-size-2xl-icon",
|
|
7838
|
+
"type": "dimension",
|
|
7839
|
+
"value": "48px"
|
|
7840
|
+
},
|
|
7841
|
+
{
|
|
7842
|
+
"name": "featured-icon-size-2xl-plate",
|
|
7843
|
+
"cssVar": "--featured-icon-size-2xl-plate",
|
|
7844
|
+
"type": "dimension",
|
|
7845
|
+
"value": "80px"
|
|
7846
|
+
},
|
|
7847
|
+
{
|
|
7848
|
+
"name": "featured-icon-size-lg-icon",
|
|
7849
|
+
"cssVar": "--featured-icon-size-lg-icon",
|
|
7850
|
+
"type": "dimension",
|
|
7851
|
+
"value": "24px"
|
|
7852
|
+
},
|
|
7853
|
+
{
|
|
7854
|
+
"name": "featured-icon-size-lg-plate",
|
|
7855
|
+
"cssVar": "--featured-icon-size-lg-plate",
|
|
7856
|
+
"type": "dimension",
|
|
7857
|
+
"value": "48px"
|
|
7858
|
+
},
|
|
7859
|
+
{
|
|
7860
|
+
"name": "featured-icon-size-md-icon",
|
|
7861
|
+
"cssVar": "--featured-icon-size-md-icon",
|
|
7862
|
+
"type": "dimension",
|
|
7863
|
+
"value": "20px"
|
|
7864
|
+
},
|
|
7865
|
+
{
|
|
7866
|
+
"name": "featured-icon-size-md-plate",
|
|
7867
|
+
"cssVar": "--featured-icon-size-md-plate",
|
|
7868
|
+
"type": "dimension",
|
|
7869
|
+
"value": "44px"
|
|
7870
|
+
},
|
|
7871
|
+
{
|
|
7872
|
+
"name": "featured-icon-size-sm-icon",
|
|
7873
|
+
"cssVar": "--featured-icon-size-sm-icon",
|
|
7874
|
+
"type": "dimension",
|
|
7875
|
+
"value": "16px"
|
|
7876
|
+
},
|
|
7877
|
+
{
|
|
7878
|
+
"name": "featured-icon-size-sm-plate",
|
|
7879
|
+
"cssVar": "--featured-icon-size-sm-plate",
|
|
7880
|
+
"type": "dimension",
|
|
7881
|
+
"value": "32px"
|
|
7882
|
+
},
|
|
7883
|
+
{
|
|
7884
|
+
"name": "featured-icon-size-xl-icon",
|
|
7885
|
+
"cssVar": "--featured-icon-size-xl-icon",
|
|
7886
|
+
"type": "dimension",
|
|
7887
|
+
"value": "32px"
|
|
7888
|
+
},
|
|
7889
|
+
{
|
|
7890
|
+
"name": "featured-icon-size-xl-plate",
|
|
7891
|
+
"cssVar": "--featured-icon-size-xl-plate",
|
|
7892
|
+
"type": "dimension",
|
|
7893
|
+
"value": "56px"
|
|
7894
|
+
},
|
|
7895
|
+
{
|
|
7896
|
+
"name": "featured-icon-size-xs-icon",
|
|
7897
|
+
"cssVar": "--featured-icon-size-xs-icon",
|
|
7898
|
+
"type": "dimension",
|
|
7899
|
+
"value": "12px"
|
|
7900
|
+
},
|
|
7901
|
+
{
|
|
7902
|
+
"name": "featured-icon-size-xs-plate",
|
|
7903
|
+
"cssVar": "--featured-icon-size-xs-plate",
|
|
7904
|
+
"type": "dimension",
|
|
7905
|
+
"description": "FeaturedIcon xs plate size per Figma /Featured-Icon frame.",
|
|
7906
|
+
"value": "28px"
|
|
7907
|
+
},
|
|
7908
|
+
{
|
|
7909
|
+
"name": "feed-content-description-color",
|
|
7910
|
+
"cssVar": "--feed-content-description-color",
|
|
7911
|
+
"type": "color",
|
|
7912
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
7913
|
+
},
|
|
7914
|
+
{
|
|
7915
|
+
"name": "feed-content-description-size",
|
|
7916
|
+
"cssVar": "--feed-content-description-size",
|
|
7917
|
+
"type": "dimension",
|
|
7918
|
+
"value": "0.875rem"
|
|
7919
|
+
},
|
|
7920
|
+
{
|
|
7921
|
+
"name": "feed-content-title-weight",
|
|
7922
|
+
"cssVar": "--feed-content-title-weight",
|
|
7923
|
+
"value": "500"
|
|
7924
|
+
},
|
|
7925
|
+
{
|
|
7926
|
+
"name": "feed-icon-background",
|
|
7927
|
+
"cssVar": "--feed-icon-background",
|
|
7928
|
+
"type": "color",
|
|
7929
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
7930
|
+
},
|
|
7931
|
+
{
|
|
7932
|
+
"name": "feed-icon-color",
|
|
7933
|
+
"cssVar": "--feed-icon-color",
|
|
7934
|
+
"type": "color",
|
|
7935
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
7936
|
+
},
|
|
7937
|
+
{
|
|
7938
|
+
"name": "feed-icon-radius",
|
|
7939
|
+
"cssVar": "--feed-icon-radius",
|
|
7940
|
+
"type": "dimension",
|
|
7941
|
+
"value": "9999px"
|
|
7942
|
+
},
|
|
7943
|
+
{
|
|
7944
|
+
"name": "feed-icon-size",
|
|
7945
|
+
"cssVar": "--feed-icon-size",
|
|
7946
|
+
"type": "dimension",
|
|
7947
|
+
"value": "32px"
|
|
7948
|
+
},
|
|
7949
|
+
{
|
|
7950
|
+
"name": "feed-item-background-active",
|
|
7951
|
+
"cssVar": "--feed-item-background-active",
|
|
7952
|
+
"type": "color",
|
|
7953
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
7954
|
+
},
|
|
7955
|
+
{
|
|
7956
|
+
"name": "feed-item-background-highlight",
|
|
7957
|
+
"cssVar": "--feed-item-background-highlight",
|
|
7958
|
+
"type": "color",
|
|
7959
|
+
"value": "oklch(100.00% 0.0000 0 / 94.9%)"
|
|
7960
|
+
},
|
|
7961
|
+
{
|
|
7962
|
+
"name": "feed-item-border-color",
|
|
7963
|
+
"cssVar": "--feed-item-border-color",
|
|
7964
|
+
"type": "color",
|
|
7965
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
7966
|
+
},
|
|
7967
|
+
{
|
|
7968
|
+
"name": "feed-item-gap",
|
|
7969
|
+
"cssVar": "--feed-item-gap",
|
|
7970
|
+
"type": "dimension",
|
|
7971
|
+
"value": "12px"
|
|
7972
|
+
},
|
|
7973
|
+
{
|
|
7974
|
+
"name": "feed-item-padding-x",
|
|
7975
|
+
"cssVar": "--feed-item-padding-x",
|
|
7976
|
+
"type": "dimension",
|
|
7977
|
+
"value": "16px"
|
|
7978
|
+
},
|
|
7979
|
+
{
|
|
7980
|
+
"name": "feed-item-padding-y",
|
|
7981
|
+
"cssVar": "--feed-item-padding-y",
|
|
7982
|
+
"type": "dimension",
|
|
7983
|
+
"value": "16px"
|
|
7984
|
+
},
|
|
7985
|
+
{
|
|
7986
|
+
"name": "feed-item-radius",
|
|
7987
|
+
"cssVar": "--feed-item-radius",
|
|
7988
|
+
"type": "dimension",
|
|
7989
|
+
"value": "0.375rem"
|
|
7990
|
+
},
|
|
7991
|
+
{
|
|
7992
|
+
"name": "feed-root-gap",
|
|
7993
|
+
"cssVar": "--feed-root-gap",
|
|
7994
|
+
"type": "dimension",
|
|
7995
|
+
"value": "16px"
|
|
7996
|
+
},
|
|
7997
|
+
{
|
|
7998
|
+
"name": "feed-timestamp-color",
|
|
7999
|
+
"cssVar": "--feed-timestamp-color",
|
|
8000
|
+
"type": "color",
|
|
8001
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
8002
|
+
},
|
|
8003
|
+
{
|
|
8004
|
+
"name": "feed-timestamp-size",
|
|
8005
|
+
"cssVar": "--feed-timestamp-size",
|
|
8006
|
+
"type": "dimension",
|
|
8007
|
+
"value": "0.75rem"
|
|
8008
|
+
},
|
|
8009
|
+
{
|
|
8010
|
+
"name": "file-upload-dropzone-background",
|
|
8011
|
+
"cssVar": "--file-upload-dropzone-background",
|
|
8012
|
+
"type": "color",
|
|
8013
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
8014
|
+
},
|
|
8015
|
+
{
|
|
8016
|
+
"name": "file-upload-dropzone-background-hover",
|
|
8017
|
+
"cssVar": "--file-upload-dropzone-background-hover",
|
|
8018
|
+
"type": "color",
|
|
8019
|
+
"value": "oklch(95.21% 0.0467 171.12)"
|
|
8020
|
+
},
|
|
8021
|
+
{
|
|
8022
|
+
"name": "file-upload-dropzone-border-color",
|
|
8023
|
+
"cssVar": "--file-upload-dropzone-border-color",
|
|
8024
|
+
"type": "color",
|
|
8025
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
8026
|
+
},
|
|
8027
|
+
{
|
|
8028
|
+
"name": "file-upload-dropzone-border-style",
|
|
8029
|
+
"cssVar": "--file-upload-dropzone-border-style",
|
|
8030
|
+
"value": "dashed"
|
|
8031
|
+
},
|
|
8032
|
+
{
|
|
8033
|
+
"name": "file-upload-dropzone-border-width",
|
|
8034
|
+
"cssVar": "--file-upload-dropzone-border-width",
|
|
8035
|
+
"type": "dimension",
|
|
8036
|
+
"value": "2px"
|
|
8037
|
+
},
|
|
8038
|
+
{
|
|
8039
|
+
"name": "file-upload-dropzone-gap",
|
|
8040
|
+
"cssVar": "--file-upload-dropzone-gap",
|
|
8041
|
+
"type": "dimension",
|
|
8042
|
+
"value": "16px"
|
|
8043
|
+
},
|
|
8044
|
+
{
|
|
8045
|
+
"name": "file-upload-dropzone-padding",
|
|
8046
|
+
"cssVar": "--file-upload-dropzone-padding",
|
|
8047
|
+
"type": "dimension",
|
|
8048
|
+
"value": "40px"
|
|
8049
|
+
},
|
|
8050
|
+
{
|
|
8051
|
+
"name": "file-upload-dropzone-radius",
|
|
8052
|
+
"cssVar": "--file-upload-dropzone-radius",
|
|
8053
|
+
"type": "dimension",
|
|
8054
|
+
"description": "FileDropzone radius 12px (radius/lg) aligned with Figma canonical (frame 1636:5682) — pre-fix was 0.5rem (8px).",
|
|
8055
|
+
"value": "12px"
|
|
8056
|
+
},
|
|
8057
|
+
{
|
|
8058
|
+
"name": "file-upload-icon-color",
|
|
8059
|
+
"cssVar": "--file-upload-icon-color",
|
|
8060
|
+
"type": "color",
|
|
8061
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
8062
|
+
},
|
|
8063
|
+
{
|
|
8064
|
+
"name": "file-upload-icon-size",
|
|
8065
|
+
"cssVar": "--file-upload-icon-size",
|
|
8066
|
+
"type": "dimension",
|
|
8067
|
+
"value": "40px"
|
|
8068
|
+
},
|
|
8069
|
+
{
|
|
8070
|
+
"name": "file-upload-item-border",
|
|
8071
|
+
"cssVar": "--file-upload-item-border",
|
|
8072
|
+
"type": "color",
|
|
8073
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
8074
|
+
},
|
|
8075
|
+
{
|
|
8076
|
+
"name": "file-upload-item-gap",
|
|
7007
8077
|
"cssVar": "--file-upload-item-gap",
|
|
7008
8078
|
"type": "dimension",
|
|
7009
8079
|
"value": "12px"
|
|
@@ -7104,6 +8174,55 @@
|
|
|
7104
8174
|
"type": "dimension",
|
|
7105
8175
|
"value": "14px"
|
|
7106
8176
|
},
|
|
8177
|
+
{
|
|
8178
|
+
"name": "header-root-bg",
|
|
8179
|
+
"cssVar": "--header-root-bg",
|
|
8180
|
+
"type": "color",
|
|
8181
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
8182
|
+
},
|
|
8183
|
+
{
|
|
8184
|
+
"name": "header-root-border-color",
|
|
8185
|
+
"cssVar": "--header-root-border-color",
|
|
8186
|
+
"type": "color",
|
|
8187
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
8188
|
+
},
|
|
8189
|
+
{
|
|
8190
|
+
"name": "header-root-padding-x",
|
|
8191
|
+
"cssVar": "--header-root-padding-x",
|
|
8192
|
+
"type": "dimension",
|
|
8193
|
+
"value": "16px"
|
|
8194
|
+
},
|
|
8195
|
+
{
|
|
8196
|
+
"name": "header-root-padding-y",
|
|
8197
|
+
"cssVar": "--header-root-padding-y",
|
|
8198
|
+
"type": "dimension",
|
|
8199
|
+
"value": "12px"
|
|
8200
|
+
},
|
|
8201
|
+
{
|
|
8202
|
+
"name": "header-size-lg-height",
|
|
8203
|
+
"cssVar": "--header-size-lg-height",
|
|
8204
|
+
"type": "dimension",
|
|
8205
|
+
"value": "80px"
|
|
8206
|
+
},
|
|
8207
|
+
{
|
|
8208
|
+
"name": "header-size-md-height",
|
|
8209
|
+
"cssVar": "--header-size-md-height",
|
|
8210
|
+
"type": "dimension",
|
|
8211
|
+
"value": "64px"
|
|
8212
|
+
},
|
|
8213
|
+
{
|
|
8214
|
+
"name": "header-size-sm-height",
|
|
8215
|
+
"cssVar": "--header-size-sm-height",
|
|
8216
|
+
"type": "dimension",
|
|
8217
|
+
"value": "48px"
|
|
8218
|
+
},
|
|
8219
|
+
{
|
|
8220
|
+
"name": "header-sticky-z-index",
|
|
8221
|
+
"cssVar": "--header-sticky-z-index",
|
|
8222
|
+
"type": "number",
|
|
8223
|
+
"description": "Header sticky z-index per DES-1272 — between content (10) and dropdowns (50).",
|
|
8224
|
+
"value": "30"
|
|
8225
|
+
},
|
|
7107
8226
|
{
|
|
7108
8227
|
"name": "hover-card-content-border-width",
|
|
7109
8228
|
"cssVar": "--hover-card-content-border-width",
|
|
@@ -7169,34 +8288,100 @@
|
|
|
7169
8288
|
"value": "currentColor"
|
|
7170
8289
|
},
|
|
7171
8290
|
{
|
|
7172
|
-
"name": "icon-color-destructive",
|
|
7173
|
-
"cssVar": "--icon-color-destructive",
|
|
8291
|
+
"name": "icon-color-destructive",
|
|
8292
|
+
"cssVar": "--icon-color-destructive",
|
|
8293
|
+
"type": "color",
|
|
8294
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
8295
|
+
},
|
|
8296
|
+
{
|
|
8297
|
+
"name": "icon-color-muted",
|
|
8298
|
+
"cssVar": "--icon-color-muted",
|
|
8299
|
+
"type": "color",
|
|
8300
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
8301
|
+
},
|
|
8302
|
+
{
|
|
8303
|
+
"name": "icon-color-primary",
|
|
8304
|
+
"cssVar": "--icon-color-primary",
|
|
8305
|
+
"type": "color",
|
|
8306
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
8307
|
+
},
|
|
8308
|
+
{
|
|
8309
|
+
"name": "icon-color-success",
|
|
8310
|
+
"cssVar": "--icon-color-success",
|
|
8311
|
+
"type": "color",
|
|
8312
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
8313
|
+
},
|
|
8314
|
+
{
|
|
8315
|
+
"name": "icon-color-warning",
|
|
8316
|
+
"cssVar": "--icon-color-warning",
|
|
8317
|
+
"type": "color",
|
|
8318
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
8319
|
+
},
|
|
8320
|
+
{
|
|
8321
|
+
"name": "ifta-label-label-color-destructive",
|
|
8322
|
+
"cssVar": "--ifta-label-label-color-destructive",
|
|
8323
|
+
"type": "color",
|
|
8324
|
+
"description": "IftaLabel label color in invalid state.",
|
|
8325
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
8326
|
+
},
|
|
8327
|
+
{
|
|
8328
|
+
"name": "ifta-label-label-color-foreground",
|
|
8329
|
+
"cssVar": "--ifta-label-label-color-foreground",
|
|
8330
|
+
"type": "color",
|
|
8331
|
+
"description": "IftaLabel label color when input is focused or filled (DES-1274).",
|
|
8332
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
8333
|
+
},
|
|
8334
|
+
{
|
|
8335
|
+
"name": "ifta-label-label-color-muted",
|
|
8336
|
+
"cssVar": "--ifta-label-label-color-muted",
|
|
8337
|
+
"type": "color",
|
|
8338
|
+
"description": "IftaLabel default label color (placeholder-shown state).",
|
|
8339
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
8340
|
+
},
|
|
8341
|
+
{
|
|
8342
|
+
"name": "ifta-label-ring-destructive",
|
|
8343
|
+
"cssVar": "--ifta-label-ring-destructive",
|
|
7174
8344
|
"type": "color",
|
|
7175
8345
|
"value": "oklch(63.68% 0.2078 25.33)"
|
|
7176
8346
|
},
|
|
7177
8347
|
{
|
|
7178
|
-
"name": "
|
|
7179
|
-
"cssVar": "--
|
|
8348
|
+
"name": "ifta-label-ring-primary",
|
|
8349
|
+
"cssVar": "--ifta-label-ring-primary",
|
|
7180
8350
|
"type": "color",
|
|
7181
|
-
"
|
|
8351
|
+
"description": "IftaLabel focus ring primary color per DES-1274.",
|
|
8352
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
7182
8353
|
},
|
|
7183
8354
|
{
|
|
7184
|
-
"name": "
|
|
7185
|
-
"cssVar": "--
|
|
7186
|
-
"type": "
|
|
7187
|
-
"value": "
|
|
8355
|
+
"name": "ifta-label-ring-width",
|
|
8356
|
+
"cssVar": "--ifta-label-ring-width",
|
|
8357
|
+
"type": "dimension",
|
|
8358
|
+
"value": "3px"
|
|
7188
8359
|
},
|
|
7189
8360
|
{
|
|
7190
|
-
"name": "
|
|
7191
|
-
"cssVar": "--
|
|
7192
|
-
"type": "
|
|
7193
|
-
"value": "
|
|
8361
|
+
"name": "ifta-label-wrapper-disabled-opacity",
|
|
8362
|
+
"cssVar": "--ifta-label-wrapper-disabled-opacity",
|
|
8363
|
+
"type": "number",
|
|
8364
|
+
"value": "0.5"
|
|
7194
8365
|
},
|
|
7195
8366
|
{
|
|
7196
|
-
"name": "
|
|
7197
|
-
"cssVar": "--
|
|
7198
|
-
"type": "
|
|
7199
|
-
"
|
|
8367
|
+
"name": "ifta-label-wrapper-height",
|
|
8368
|
+
"cssVar": "--ifta-label-wrapper-height",
|
|
8369
|
+
"type": "dimension",
|
|
8370
|
+
"description": "IftaLabel wrapper height 60px aligned with Figma canonical (frame 1397:3493, all variants 60h) — pre-fix was 48px.",
|
|
8371
|
+
"value": "60px"
|
|
8372
|
+
},
|
|
8373
|
+
{
|
|
8374
|
+
"name": "ifta-label-wrapper-padding-bottom",
|
|
8375
|
+
"cssVar": "--ifta-label-wrapper-padding-bottom",
|
|
8376
|
+
"type": "dimension",
|
|
8377
|
+
"value": "8px"
|
|
8378
|
+
},
|
|
8379
|
+
{
|
|
8380
|
+
"name": "ifta-label-wrapper-padding-top",
|
|
8381
|
+
"cssVar": "--ifta-label-wrapper-padding-top",
|
|
8382
|
+
"type": "dimension",
|
|
8383
|
+
"description": "IftaLabel input wrapper top padding (24px to accommodate floating label).",
|
|
8384
|
+
"value": "24px"
|
|
7200
8385
|
},
|
|
7201
8386
|
{
|
|
7202
8387
|
"name": "image-rounded-circle",
|
|
@@ -7312,6 +8497,20 @@
|
|
|
7312
8497
|
"type": "color",
|
|
7313
8498
|
"value": "oklch(55.55% 0.0000 0)"
|
|
7314
8499
|
},
|
|
8500
|
+
{
|
|
8501
|
+
"name": "input-group-button-radius",
|
|
8502
|
+
"cssVar": "--input-group-button-radius",
|
|
8503
|
+
"type": "dimension",
|
|
8504
|
+
"description": "InputGroup inner button border-radius. Per Bowser audit InputGroup BUG-2 — pre-fix was rounded-[calc(var(--radius)-5px)] which evaluated to -1px (clamped to 0px).",
|
|
8505
|
+
"value": "4px"
|
|
8506
|
+
},
|
|
8507
|
+
{
|
|
8508
|
+
"name": "input-group-radius",
|
|
8509
|
+
"cssVar": "--input-group-radius",
|
|
8510
|
+
"type": "dimension",
|
|
8511
|
+
"description": "InputGroup container border-radius aligned with Figma radius/md (8px) per Bowser audit InputGroup BUG-1 — pre-fix was rounded-md utility resolving to 0px.",
|
|
8512
|
+
"value": "8px"
|
|
8513
|
+
},
|
|
7315
8514
|
{
|
|
7316
8515
|
"name": "input-icon-padding-lg",
|
|
7317
8516
|
"cssVar": "--input-icon-padding-lg",
|
|
@@ -7463,7 +8662,8 @@
|
|
|
7463
8662
|
"name": "input-otp-slot-size-lg-radius",
|
|
7464
8663
|
"cssVar": "--input-otp-slot-size-lg-radius",
|
|
7465
8664
|
"type": "dimension",
|
|
7466
|
-
"
|
|
8665
|
+
"description": "Slot border-radius aligned with Figma radius/md (8px) per Bowser audit InputOTP — pre-fix was 0.375rem (6px).",
|
|
8666
|
+
"value": "8px"
|
|
7467
8667
|
},
|
|
7468
8668
|
{
|
|
7469
8669
|
"name": "input-otp-slot-size-lg-size",
|
|
@@ -7481,13 +8681,15 @@
|
|
|
7481
8681
|
"name": "input-otp-slot-size-md-radius",
|
|
7482
8682
|
"cssVar": "--input-otp-slot-size-md-radius",
|
|
7483
8683
|
"type": "dimension",
|
|
7484
|
-
"
|
|
8684
|
+
"description": "Slot border-radius aligned with Figma radius/md (8px) per Bowser audit InputOTP — pre-fix was 0.375rem (6px).",
|
|
8685
|
+
"value": "8px"
|
|
7485
8686
|
},
|
|
7486
8687
|
{
|
|
7487
8688
|
"name": "input-otp-slot-size-md-size",
|
|
7488
8689
|
"cssVar": "--input-otp-slot-size-md-size",
|
|
7489
8690
|
"type": "dimension",
|
|
7490
|
-
"
|
|
8691
|
+
"description": "InputOTP md slot size 44px aligned with Figma canonical (frame 1389:15484, all variants 44h) — pre-fix was 40px.",
|
|
8692
|
+
"value": "44px"
|
|
7491
8693
|
},
|
|
7492
8694
|
{
|
|
7493
8695
|
"name": "input-otp-slot-size-md-text",
|
|
@@ -7499,7 +8701,8 @@
|
|
|
7499
8701
|
"name": "input-otp-slot-size-sm-radius",
|
|
7500
8702
|
"cssVar": "--input-otp-slot-size-sm-radius",
|
|
7501
8703
|
"type": "dimension",
|
|
7502
|
-
"
|
|
8704
|
+
"description": "Slot border-radius aligned with Figma radius/md (8px) per Bowser audit InputOTP — pre-fix was 0.375rem (6px).",
|
|
8705
|
+
"value": "8px"
|
|
7503
8706
|
},
|
|
7504
8707
|
{
|
|
7505
8708
|
"name": "input-otp-slot-size-sm-size",
|
|
@@ -7523,7 +8726,8 @@
|
|
|
7523
8726
|
"name": "input-size-lg-h",
|
|
7524
8727
|
"cssVar": "--input-size-lg-h",
|
|
7525
8728
|
"type": "dimension",
|
|
7526
|
-
"
|
|
8729
|
+
"description": "Input lg height 44px aligned with Figma canonical (frame 1384:8287, Size=lg = 44h) — pre-fix was spacing.10 (40px).",
|
|
8730
|
+
"value": "44px"
|
|
7527
8731
|
},
|
|
7528
8732
|
{
|
|
7529
8733
|
"name": "input-size-lg-px",
|
|
@@ -7547,7 +8751,8 @@
|
|
|
7547
8751
|
"name": "input-size-md-h",
|
|
7548
8752
|
"cssVar": "--input-size-md-h",
|
|
7549
8753
|
"type": "dimension",
|
|
7550
|
-
"
|
|
8754
|
+
"description": "Input md height 40px aligned with Figma canonical (frame 1384:8287, Size=md = 40h) — pre-fix was spacing.9 (36px).",
|
|
8755
|
+
"value": "40px"
|
|
7551
8756
|
},
|
|
7552
8757
|
{
|
|
7553
8758
|
"name": "input-size-md-px",
|
|
@@ -7571,7 +8776,8 @@
|
|
|
7571
8776
|
"name": "input-size-sm-h",
|
|
7572
8777
|
"cssVar": "--input-size-sm-h",
|
|
7573
8778
|
"type": "dimension",
|
|
7574
|
-
"
|
|
8779
|
+
"description": "Input sm height 36px aligned with Figma canonical (frame 1384:8287, Size=sm = 36h) — pre-fix was spacing.8 (32px).",
|
|
8780
|
+
"value": "36px"
|
|
7575
8781
|
},
|
|
7576
8782
|
{
|
|
7577
8783
|
"name": "input-size-sm-px",
|
|
@@ -7989,7 +9195,8 @@
|
|
|
7989
9195
|
"name": "label-root-line-height",
|
|
7990
9196
|
"cssVar": "--label-root-line-height",
|
|
7991
9197
|
"type": "lineHeight",
|
|
7992
|
-
"
|
|
9198
|
+
"description": "Aligned with Figma style Paragraph/P3 — text/line-height/sm (20px)",
|
|
9199
|
+
"value": "20px"
|
|
7993
9200
|
},
|
|
7994
9201
|
{
|
|
7995
9202
|
"name": "label-root-user-select",
|
|
@@ -7997,6 +9204,45 @@
|
|
|
7997
9204
|
"type": "other",
|
|
7998
9205
|
"value": "none"
|
|
7999
9206
|
},
|
|
9207
|
+
{
|
|
9208
|
+
"name": "label-size-lg-font-size",
|
|
9209
|
+
"cssVar": "--label-size-lg-font-size",
|
|
9210
|
+
"type": "fontSize",
|
|
9211
|
+
"description": "Label lg font-size (16px) — Figma canonical (components-label.html).",
|
|
9212
|
+
"value": "16px"
|
|
9213
|
+
},
|
|
9214
|
+
{
|
|
9215
|
+
"name": "label-size-lg-line-height",
|
|
9216
|
+
"cssVar": "--label-size-lg-line-height",
|
|
9217
|
+
"type": "lineHeight",
|
|
9218
|
+
"value": "24px"
|
|
9219
|
+
},
|
|
9220
|
+
{
|
|
9221
|
+
"name": "label-size-md-font-size",
|
|
9222
|
+
"cssVar": "--label-size-md-font-size",
|
|
9223
|
+
"type": "fontSize",
|
|
9224
|
+
"description": "Label md (default) font-size (14px) — same as root.",
|
|
9225
|
+
"value": "14px"
|
|
9226
|
+
},
|
|
9227
|
+
{
|
|
9228
|
+
"name": "label-size-md-line-height",
|
|
9229
|
+
"cssVar": "--label-size-md-line-height",
|
|
9230
|
+
"type": "lineHeight",
|
|
9231
|
+
"value": "20px"
|
|
9232
|
+
},
|
|
9233
|
+
{
|
|
9234
|
+
"name": "label-size-sm-font-size",
|
|
9235
|
+
"cssVar": "--label-size-sm-font-size",
|
|
9236
|
+
"type": "fontSize",
|
|
9237
|
+
"description": "Label sm font-size (12px) — Figma canonical (components-label.html).",
|
|
9238
|
+
"value": "12px"
|
|
9239
|
+
},
|
|
9240
|
+
{
|
|
9241
|
+
"name": "label-size-sm-line-height",
|
|
9242
|
+
"cssVar": "--label-size-sm-line-height",
|
|
9243
|
+
"type": "lineHeight",
|
|
9244
|
+
"value": "16px"
|
|
9245
|
+
},
|
|
8000
9246
|
{
|
|
8001
9247
|
"name": "lightbox-button-background",
|
|
8002
9248
|
"cssVar": "--lightbox-button-background",
|
|
@@ -8213,6 +9459,80 @@
|
|
|
8213
9459
|
"type": "dimension",
|
|
8214
9460
|
"value": "8px"
|
|
8215
9461
|
},
|
|
9462
|
+
{
|
|
9463
|
+
"name": "menu-item-bg-default",
|
|
9464
|
+
"cssVar": "--menu-item-bg-default",
|
|
9465
|
+
"type": "color",
|
|
9466
|
+
"value": "transparent"
|
|
9467
|
+
},
|
|
9468
|
+
{
|
|
9469
|
+
"name": "menu-item-bg-hover",
|
|
9470
|
+
"cssVar": "--menu-item-bg-hover",
|
|
9471
|
+
"type": "color",
|
|
9472
|
+
"value": "oklch(95.21% 0.0467 171.12)"
|
|
9473
|
+
},
|
|
9474
|
+
{
|
|
9475
|
+
"name": "menu-item-fg-default",
|
|
9476
|
+
"cssVar": "--menu-item-fg-default",
|
|
9477
|
+
"type": "color",
|
|
9478
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
9479
|
+
},
|
|
9480
|
+
{
|
|
9481
|
+
"name": "menu-item-fg-destructive",
|
|
9482
|
+
"cssVar": "--menu-item-fg-destructive",
|
|
9483
|
+
"type": "color",
|
|
9484
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
9485
|
+
},
|
|
9486
|
+
{
|
|
9487
|
+
"name": "menu-item-fg-hover",
|
|
9488
|
+
"cssVar": "--menu-item-fg-hover",
|
|
9489
|
+
"type": "color",
|
|
9490
|
+
"value": "oklch(26.88% 0.0527 163.85)"
|
|
9491
|
+
},
|
|
9492
|
+
{
|
|
9493
|
+
"name": "menu-item-gap",
|
|
9494
|
+
"cssVar": "--menu-item-gap",
|
|
9495
|
+
"type": "dimension",
|
|
9496
|
+
"value": "8px"
|
|
9497
|
+
},
|
|
9498
|
+
{
|
|
9499
|
+
"name": "menu-item-padding-x",
|
|
9500
|
+
"cssVar": "--menu-item-padding-x",
|
|
9501
|
+
"type": "dimension",
|
|
9502
|
+
"value": "8px"
|
|
9503
|
+
},
|
|
9504
|
+
{
|
|
9505
|
+
"name": "menu-item-padding-y",
|
|
9506
|
+
"cssVar": "--menu-item-padding-y",
|
|
9507
|
+
"type": "dimension",
|
|
9508
|
+
"value": "6px"
|
|
9509
|
+
},
|
|
9510
|
+
{
|
|
9511
|
+
"name": "menu-item-radius",
|
|
9512
|
+
"cssVar": "--menu-item-radius",
|
|
9513
|
+
"type": "dimension",
|
|
9514
|
+
"description": "Menu item radius per DES-1282.",
|
|
9515
|
+
"value": "4px"
|
|
9516
|
+
},
|
|
9517
|
+
{
|
|
9518
|
+
"name": "menu-item-text-size",
|
|
9519
|
+
"cssVar": "--menu-item-text-size",
|
|
9520
|
+
"type": "dimension",
|
|
9521
|
+
"value": "0.875rem"
|
|
9522
|
+
},
|
|
9523
|
+
{
|
|
9524
|
+
"name": "menu-root-gap",
|
|
9525
|
+
"cssVar": "--menu-root-gap",
|
|
9526
|
+
"type": "dimension",
|
|
9527
|
+
"value": "2px"
|
|
9528
|
+
},
|
|
9529
|
+
{
|
|
9530
|
+
"name": "menu-root-padding",
|
|
9531
|
+
"cssVar": "--menu-root-padding",
|
|
9532
|
+
"type": "dimension",
|
|
9533
|
+
"description": "Menu root padding.",
|
|
9534
|
+
"value": "4px"
|
|
9535
|
+
},
|
|
8216
9536
|
{
|
|
8217
9537
|
"name": "menubar-checkbox-radius",
|
|
8218
9538
|
"cssVar": "--menubar-checkbox-radius",
|
|
@@ -8247,7 +9567,8 @@
|
|
|
8247
9567
|
"name": "menubar-content-radius",
|
|
8248
9568
|
"cssVar": "--menubar-content-radius",
|
|
8249
9569
|
"type": "dimension",
|
|
8250
|
-
"
|
|
9570
|
+
"description": "Menubar content radius aligned with Figma radius/md (8px) per DES-1284 — pre-fix was 0.375rem (6px).",
|
|
9571
|
+
"value": "8px"
|
|
8251
9572
|
},
|
|
8252
9573
|
{
|
|
8253
9574
|
"name": "menubar-content-sub-min-width",
|
|
@@ -8355,12 +9676,13 @@
|
|
|
8355
9676
|
"name": "menubar-root-radius",
|
|
8356
9677
|
"cssVar": "--menubar-root-radius",
|
|
8357
9678
|
"type": "dimension",
|
|
8358
|
-
"value": "
|
|
9679
|
+
"value": "8px"
|
|
8359
9680
|
},
|
|
8360
9681
|
{
|
|
8361
9682
|
"name": "menubar-root-shadow",
|
|
8362
9683
|
"cssVar": "--menubar-root-shadow",
|
|
8363
|
-
"
|
|
9684
|
+
"description": "Menubar root shadow aligned with Figma shadow/xs (null-effect) per DES-1284 item 4 — pre-fix was visible 0 1px 2px shadow.",
|
|
9685
|
+
"value": "none"
|
|
8364
9686
|
},
|
|
8365
9687
|
{
|
|
8366
9688
|
"name": "menubar-separator-height",
|
|
@@ -8390,7 +9712,8 @@
|
|
|
8390
9712
|
"name": "menubar-trigger-padding-x",
|
|
8391
9713
|
"cssVar": "--menubar-trigger-padding-x",
|
|
8392
9714
|
"type": "dimension",
|
|
8393
|
-
"
|
|
9715
|
+
"description": "Menubar trigger padding-x aligned with Figma spacing/3 (12px) per DES-1284 — pre-fix was spacing.2 (8px).",
|
|
9716
|
+
"value": "12px"
|
|
8394
9717
|
},
|
|
8395
9718
|
{
|
|
8396
9719
|
"name": "menubar-trigger-padding-y",
|
|
@@ -8402,7 +9725,7 @@
|
|
|
8402
9725
|
"name": "menubar-trigger-radius",
|
|
8403
9726
|
"cssVar": "--menubar-trigger-radius",
|
|
8404
9727
|
"type": "dimension",
|
|
8405
|
-
"value": "
|
|
9728
|
+
"value": "4px"
|
|
8406
9729
|
},
|
|
8407
9730
|
{
|
|
8408
9731
|
"name": "menubar-trigger-text-size",
|
|
@@ -8444,7 +9767,8 @@
|
|
|
8444
9767
|
"name": "modal-content-radius",
|
|
8445
9768
|
"cssVar": "--modal-content-radius",
|
|
8446
9769
|
"type": "dimension",
|
|
8447
|
-
"
|
|
9770
|
+
"description": "Modal/Dialog content radius 12px (radius/lg) aligned with Figma canonical (frames 1409:1503 Dialog + 1425:10036 Modal both use radius/lg) — pre-fix was 0.5rem (8px).",
|
|
9771
|
+
"value": "12px"
|
|
8448
9772
|
},
|
|
8449
9773
|
{
|
|
8450
9774
|
"name": "modal-content-shadow",
|
|
@@ -8485,7 +9809,8 @@
|
|
|
8485
9809
|
"name": "multiselect-content-radius",
|
|
8486
9810
|
"cssVar": "--multiselect-content-radius",
|
|
8487
9811
|
"type": "dimension",
|
|
8488
|
-
"
|
|
9812
|
+
"description": "Content popover border-radius aligned with Figma radius/md (8px) per Bowser audit MultiSelect — pre-fix was 0.375rem (6px).",
|
|
9813
|
+
"value": "8px"
|
|
8489
9814
|
},
|
|
8490
9815
|
{
|
|
8491
9816
|
"name": "multiselect-content-shadow",
|
|
@@ -8603,94 +9928,240 @@
|
|
|
8603
9928
|
"value": "0.375rem"
|
|
8604
9929
|
},
|
|
8605
9930
|
{
|
|
8606
|
-
"name": "multiselect-tag-text-lg",
|
|
8607
|
-
"cssVar": "--multiselect-tag-text-lg",
|
|
9931
|
+
"name": "multiselect-tag-text-lg",
|
|
9932
|
+
"cssVar": "--multiselect-tag-text-lg",
|
|
9933
|
+
"type": "dimension",
|
|
9934
|
+
"value": "0.875rem"
|
|
9935
|
+
},
|
|
9936
|
+
{
|
|
9937
|
+
"name": "multiselect-tag-text-md",
|
|
9938
|
+
"cssVar": "--multiselect-tag-text-md",
|
|
9939
|
+
"type": "dimension",
|
|
9940
|
+
"value": "0.75rem"
|
|
9941
|
+
},
|
|
9942
|
+
{
|
|
9943
|
+
"name": "multiselect-tag-text-sm",
|
|
9944
|
+
"cssVar": "--multiselect-tag-text-sm",
|
|
9945
|
+
"type": "dimension",
|
|
9946
|
+
"value": "0.75rem"
|
|
9947
|
+
},
|
|
9948
|
+
{
|
|
9949
|
+
"name": "multiselect-trigger-min-height-lg",
|
|
9950
|
+
"cssVar": "--multiselect-trigger-min-height-lg",
|
|
9951
|
+
"type": "dimension",
|
|
9952
|
+
"value": "40px"
|
|
9953
|
+
},
|
|
9954
|
+
{
|
|
9955
|
+
"name": "multiselect-trigger-min-height-md",
|
|
9956
|
+
"cssVar": "--multiselect-trigger-min-height-md",
|
|
9957
|
+
"type": "dimension",
|
|
9958
|
+
"value": "36px"
|
|
9959
|
+
},
|
|
9960
|
+
{
|
|
9961
|
+
"name": "multiselect-trigger-min-height-sm",
|
|
9962
|
+
"cssVar": "--multiselect-trigger-min-height-sm",
|
|
9963
|
+
"type": "dimension",
|
|
9964
|
+
"value": "32px"
|
|
9965
|
+
},
|
|
9966
|
+
{
|
|
9967
|
+
"name": "multiselect-trigger-padding-x-lg",
|
|
9968
|
+
"cssVar": "--multiselect-trigger-padding-x-lg",
|
|
9969
|
+
"value": "14px"
|
|
9970
|
+
},
|
|
9971
|
+
{
|
|
9972
|
+
"name": "multiselect-trigger-padding-x-md",
|
|
9973
|
+
"cssVar": "--multiselect-trigger-padding-x-md",
|
|
9974
|
+
"value": "12px"
|
|
9975
|
+
},
|
|
9976
|
+
{
|
|
9977
|
+
"name": "multiselect-trigger-padding-x-sm",
|
|
9978
|
+
"cssVar": "--multiselect-trigger-padding-x-sm",
|
|
9979
|
+
"value": "10px"
|
|
9980
|
+
},
|
|
9981
|
+
{
|
|
9982
|
+
"name": "multiselect-trigger-padding-y-lg",
|
|
9983
|
+
"cssVar": "--multiselect-trigger-padding-y-lg",
|
|
9984
|
+
"value": "8px"
|
|
9985
|
+
},
|
|
9986
|
+
{
|
|
9987
|
+
"name": "multiselect-trigger-padding-y-md",
|
|
9988
|
+
"cssVar": "--multiselect-trigger-padding-y-md",
|
|
9989
|
+
"value": "8px"
|
|
9990
|
+
},
|
|
9991
|
+
{
|
|
9992
|
+
"name": "multiselect-trigger-padding-y-sm",
|
|
9993
|
+
"cssVar": "--multiselect-trigger-padding-y-sm",
|
|
9994
|
+
"value": "4px"
|
|
9995
|
+
},
|
|
9996
|
+
{
|
|
9997
|
+
"name": "multiselect-trigger-radius",
|
|
9998
|
+
"cssVar": "--multiselect-trigger-radius",
|
|
9999
|
+
"type": "dimension",
|
|
10000
|
+
"description": "Trigger border-radius aligned with Figma radius/md (8px) per Bowser audit MultiSelect — was missing.",
|
|
10001
|
+
"value": "8px"
|
|
10002
|
+
},
|
|
10003
|
+
{
|
|
10004
|
+
"name": "multiselect-trigger-text-lg",
|
|
10005
|
+
"cssVar": "--multiselect-trigger-text-lg",
|
|
10006
|
+
"type": "dimension",
|
|
10007
|
+
"value": "1rem"
|
|
10008
|
+
},
|
|
10009
|
+
{
|
|
10010
|
+
"name": "multiselect-trigger-text-md",
|
|
10011
|
+
"cssVar": "--multiselect-trigger-text-md",
|
|
10012
|
+
"type": "dimension",
|
|
10013
|
+
"value": "0.875rem"
|
|
10014
|
+
},
|
|
10015
|
+
{
|
|
10016
|
+
"name": "multiselect-trigger-text-sm",
|
|
10017
|
+
"cssVar": "--multiselect-trigger-text-sm",
|
|
10018
|
+
"type": "dimension",
|
|
10019
|
+
"value": "0.875rem"
|
|
10020
|
+
},
|
|
10021
|
+
{
|
|
10022
|
+
"name": "multiselect-trigger-width",
|
|
10023
|
+
"cssVar": "--multiselect-trigger-width",
|
|
10024
|
+
"type": "dimension",
|
|
10025
|
+
"value": "200px"
|
|
10026
|
+
},
|
|
10027
|
+
{
|
|
10028
|
+
"name": "native-select-focus-ring-color",
|
|
10029
|
+
"cssVar": "--native-select-focus-ring-color",
|
|
10030
|
+
"type": "color",
|
|
10031
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
10032
|
+
},
|
|
10033
|
+
{
|
|
10034
|
+
"name": "native-select-focus-ring-width",
|
|
10035
|
+
"cssVar": "--native-select-focus-ring-width",
|
|
10036
|
+
"type": "dimension",
|
|
10037
|
+
"description": "NativeSelect focus ring width — note Figma uses 2px spread; código atual 3px (a alinhar).",
|
|
10038
|
+
"value": "3px"
|
|
10039
|
+
},
|
|
10040
|
+
{
|
|
10041
|
+
"name": "native-select-root-border-default",
|
|
10042
|
+
"cssVar": "--native-select-root-border-default",
|
|
10043
|
+
"type": "color",
|
|
10044
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
10045
|
+
},
|
|
10046
|
+
{
|
|
10047
|
+
"name": "native-select-root-border-focus",
|
|
10048
|
+
"cssVar": "--native-select-root-border-focus",
|
|
10049
|
+
"type": "color",
|
|
10050
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
10051
|
+
},
|
|
10052
|
+
{
|
|
10053
|
+
"name": "native-select-root-border-width",
|
|
10054
|
+
"cssVar": "--native-select-root-border-width",
|
|
10055
|
+
"type": "dimension",
|
|
10056
|
+
"value": "1px"
|
|
10057
|
+
},
|
|
10058
|
+
{
|
|
10059
|
+
"name": "native-select-root-radius",
|
|
10060
|
+
"cssVar": "--native-select-root-radius",
|
|
8608
10061
|
"type": "dimension",
|
|
8609
|
-
"
|
|
10062
|
+
"description": "NativeSelect root radius aligned with Figma radius/md per DES-1288.",
|
|
10063
|
+
"value": "8px"
|
|
8610
10064
|
},
|
|
8611
10065
|
{
|
|
8612
|
-
"name": "
|
|
8613
|
-
"cssVar": "--
|
|
10066
|
+
"name": "native-select-root-shadow",
|
|
10067
|
+
"cssVar": "--native-select-root-shadow",
|
|
10068
|
+
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
|
|
10069
|
+
},
|
|
10070
|
+
{
|
|
10071
|
+
"name": "native-select-size-lg-height",
|
|
10072
|
+
"cssVar": "--native-select-size-lg-height",
|
|
8614
10073
|
"type": "dimension",
|
|
8615
|
-
"value": "
|
|
10074
|
+
"value": "40px"
|
|
8616
10075
|
},
|
|
8617
10076
|
{
|
|
8618
|
-
"name": "
|
|
8619
|
-
"cssVar": "--
|
|
10077
|
+
"name": "native-select-size-lg-padding-x",
|
|
10078
|
+
"cssVar": "--native-select-size-lg-padding-x",
|
|
8620
10079
|
"type": "dimension",
|
|
8621
|
-
"value": "
|
|
10080
|
+
"value": "14px"
|
|
8622
10081
|
},
|
|
8623
10082
|
{
|
|
8624
|
-
"name": "
|
|
8625
|
-
"cssVar": "--
|
|
10083
|
+
"name": "native-select-size-lg-text",
|
|
10084
|
+
"cssVar": "--native-select-size-lg-text",
|
|
8626
10085
|
"type": "dimension",
|
|
8627
|
-
"value": "
|
|
10086
|
+
"value": "1rem"
|
|
8628
10087
|
},
|
|
8629
10088
|
{
|
|
8630
|
-
"name": "
|
|
8631
|
-
"cssVar": "--
|
|
10089
|
+
"name": "native-select-size-md-height",
|
|
10090
|
+
"cssVar": "--native-select-size-md-height",
|
|
8632
10091
|
"type": "dimension",
|
|
8633
10092
|
"value": "36px"
|
|
8634
10093
|
},
|
|
8635
10094
|
{
|
|
8636
|
-
"name": "
|
|
8637
|
-
"cssVar": "--
|
|
10095
|
+
"name": "native-select-size-md-padding-x",
|
|
10096
|
+
"cssVar": "--native-select-size-md-padding-x",
|
|
8638
10097
|
"type": "dimension",
|
|
8639
|
-
"value": "
|
|
10098
|
+
"value": "12px"
|
|
8640
10099
|
},
|
|
8641
10100
|
{
|
|
8642
|
-
"name": "
|
|
8643
|
-
"cssVar": "--
|
|
8644
|
-
"
|
|
10101
|
+
"name": "native-select-size-md-text",
|
|
10102
|
+
"cssVar": "--native-select-size-md-text",
|
|
10103
|
+
"type": "dimension",
|
|
10104
|
+
"value": "0.875rem"
|
|
8645
10105
|
},
|
|
8646
10106
|
{
|
|
8647
|
-
"name": "
|
|
8648
|
-
"cssVar": "--
|
|
8649
|
-
"
|
|
10107
|
+
"name": "native-select-size-sm-height",
|
|
10108
|
+
"cssVar": "--native-select-size-sm-height",
|
|
10109
|
+
"type": "dimension",
|
|
10110
|
+
"value": "32px"
|
|
8650
10111
|
},
|
|
8651
10112
|
{
|
|
8652
|
-
"name": "
|
|
8653
|
-
"cssVar": "--
|
|
10113
|
+
"name": "native-select-size-sm-padding-x",
|
|
10114
|
+
"cssVar": "--native-select-size-sm-padding-x",
|
|
10115
|
+
"type": "dimension",
|
|
8654
10116
|
"value": "10px"
|
|
8655
10117
|
},
|
|
8656
10118
|
{
|
|
8657
|
-
"name": "
|
|
8658
|
-
"cssVar": "--
|
|
8659
|
-
"
|
|
10119
|
+
"name": "native-select-size-sm-text",
|
|
10120
|
+
"cssVar": "--native-select-size-sm-text",
|
|
10121
|
+
"type": "dimension",
|
|
10122
|
+
"value": "0.875rem"
|
|
8660
10123
|
},
|
|
8661
10124
|
{
|
|
8662
|
-
"name": "
|
|
8663
|
-
"cssVar": "--
|
|
8664
|
-
"
|
|
10125
|
+
"name": "native-select-size-xl-height",
|
|
10126
|
+
"cssVar": "--native-select-size-xl-height",
|
|
10127
|
+
"type": "dimension",
|
|
10128
|
+
"value": "48px"
|
|
8665
10129
|
},
|
|
8666
10130
|
{
|
|
8667
|
-
"name": "
|
|
8668
|
-
"cssVar": "--
|
|
8669
|
-
"
|
|
10131
|
+
"name": "native-select-size-xl-padding-x",
|
|
10132
|
+
"cssVar": "--native-select-size-xl-padding-x",
|
|
10133
|
+
"type": "dimension",
|
|
10134
|
+
"value": "16px"
|
|
8670
10135
|
},
|
|
8671
10136
|
{
|
|
8672
|
-
"name": "
|
|
8673
|
-
"cssVar": "--
|
|
10137
|
+
"name": "native-select-size-xl-text",
|
|
10138
|
+
"cssVar": "--native-select-size-xl-text",
|
|
8674
10139
|
"type": "dimension",
|
|
8675
|
-
"value": "
|
|
10140
|
+
"value": "1.125rem"
|
|
8676
10141
|
},
|
|
8677
10142
|
{
|
|
8678
|
-
"name": "
|
|
8679
|
-
"cssVar": "--
|
|
10143
|
+
"name": "native-select-size-xs-height",
|
|
10144
|
+
"cssVar": "--native-select-size-xs-height",
|
|
8680
10145
|
"type": "dimension",
|
|
8681
|
-
"value": "
|
|
10146
|
+
"value": "28px"
|
|
8682
10147
|
},
|
|
8683
10148
|
{
|
|
8684
|
-
"name": "
|
|
8685
|
-
"cssVar": "--
|
|
10149
|
+
"name": "native-select-size-xs-padding-x",
|
|
10150
|
+
"cssVar": "--native-select-size-xs-padding-x",
|
|
8686
10151
|
"type": "dimension",
|
|
8687
|
-
"value": "
|
|
10152
|
+
"value": "8px"
|
|
8688
10153
|
},
|
|
8689
10154
|
{
|
|
8690
|
-
"name": "
|
|
8691
|
-
"cssVar": "--
|
|
10155
|
+
"name": "native-select-size-xs-text",
|
|
10156
|
+
"cssVar": "--native-select-size-xs-text",
|
|
8692
10157
|
"type": "dimension",
|
|
8693
|
-
"value": "
|
|
10158
|
+
"value": "0.75rem"
|
|
10159
|
+
},
|
|
10160
|
+
{
|
|
10161
|
+
"name": "native-select-variant-filled-bg",
|
|
10162
|
+
"cssVar": "--native-select-variant-filled-bg",
|
|
10163
|
+
"type": "color",
|
|
10164
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
8694
10165
|
},
|
|
8695
10166
|
{
|
|
8696
10167
|
"name": "navbar-item-gap",
|
|
@@ -8879,6 +10350,101 @@
|
|
|
8879
10350
|
"type": "dimension",
|
|
8880
10351
|
"value": "36px"
|
|
8881
10352
|
},
|
|
10353
|
+
{
|
|
10354
|
+
"name": "panel-footer-padding-x",
|
|
10355
|
+
"cssVar": "--panel-footer-padding-x",
|
|
10356
|
+
"type": "dimension",
|
|
10357
|
+
"value": "16px"
|
|
10358
|
+
},
|
|
10359
|
+
{
|
|
10360
|
+
"name": "panel-footer-padding-y",
|
|
10361
|
+
"cssVar": "--panel-footer-padding-y",
|
|
10362
|
+
"type": "dimension",
|
|
10363
|
+
"value": "12px"
|
|
10364
|
+
},
|
|
10365
|
+
{
|
|
10366
|
+
"name": "panel-header-padding-x",
|
|
10367
|
+
"cssVar": "--panel-header-padding-x",
|
|
10368
|
+
"type": "dimension",
|
|
10369
|
+
"value": "16px"
|
|
10370
|
+
},
|
|
10371
|
+
{
|
|
10372
|
+
"name": "panel-header-padding-y",
|
|
10373
|
+
"cssVar": "--panel-header-padding-y",
|
|
10374
|
+
"type": "dimension",
|
|
10375
|
+
"value": "12px"
|
|
10376
|
+
},
|
|
10377
|
+
{
|
|
10378
|
+
"name": "panel-root-border-color",
|
|
10379
|
+
"cssVar": "--panel-root-border-color",
|
|
10380
|
+
"type": "color",
|
|
10381
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
10382
|
+
},
|
|
10383
|
+
{
|
|
10384
|
+
"name": "panel-root-radius",
|
|
10385
|
+
"cssVar": "--panel-root-radius",
|
|
10386
|
+
"type": "dimension",
|
|
10387
|
+
"description": "Panel root radius aligned with Figma radius/md per DES-1292.",
|
|
10388
|
+
"value": "8px"
|
|
10389
|
+
},
|
|
10390
|
+
{
|
|
10391
|
+
"name": "panel-root-shadow",
|
|
10392
|
+
"cssVar": "--panel-root-shadow",
|
|
10393
|
+
"value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
|
|
10394
|
+
},
|
|
10395
|
+
{
|
|
10396
|
+
"name": "panel-size-lg",
|
|
10397
|
+
"cssVar": "--panel-size-lg",
|
|
10398
|
+
"type": "dimension",
|
|
10399
|
+
"description": "Panel lg width — wide panel.",
|
|
10400
|
+
"value": "400px"
|
|
10401
|
+
},
|
|
10402
|
+
{
|
|
10403
|
+
"name": "panel-size-md",
|
|
10404
|
+
"cssVar": "--panel-size-md",
|
|
10405
|
+
"type": "dimension",
|
|
10406
|
+
"description": "Panel md width — medium panel.",
|
|
10407
|
+
"value": "320px"
|
|
10408
|
+
},
|
|
10409
|
+
{
|
|
10410
|
+
"name": "panel-size-sm",
|
|
10411
|
+
"cssVar": "--panel-size-sm",
|
|
10412
|
+
"type": "dimension",
|
|
10413
|
+
"description": "Panel sm width — standard sidebar.",
|
|
10414
|
+
"value": "280px"
|
|
10415
|
+
},
|
|
10416
|
+
{
|
|
10417
|
+
"name": "panel-size-xl",
|
|
10418
|
+
"cssVar": "--panel-size-xl",
|
|
10419
|
+
"type": "dimension",
|
|
10420
|
+
"description": "Panel xl width — extra wide panel.",
|
|
10421
|
+
"value": "480px"
|
|
10422
|
+
},
|
|
10423
|
+
{
|
|
10424
|
+
"name": "panel-size-xs",
|
|
10425
|
+
"cssVar": "--panel-size-xs",
|
|
10426
|
+
"type": "dimension",
|
|
10427
|
+
"description": "Panel xs width — compact sidebar.",
|
|
10428
|
+
"value": "240px"
|
|
10429
|
+
},
|
|
10430
|
+
{
|
|
10431
|
+
"name": "panel-variant-default-bg",
|
|
10432
|
+
"cssVar": "--panel-variant-default-bg",
|
|
10433
|
+
"type": "color",
|
|
10434
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
10435
|
+
},
|
|
10436
|
+
{
|
|
10437
|
+
"name": "panel-variant-elevated-bg",
|
|
10438
|
+
"cssVar": "--panel-variant-elevated-bg",
|
|
10439
|
+
"type": "color",
|
|
10440
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
10441
|
+
},
|
|
10442
|
+
{
|
|
10443
|
+
"name": "panel-variant-subtle-bg",
|
|
10444
|
+
"cssVar": "--panel-variant-subtle-bg",
|
|
10445
|
+
"type": "color",
|
|
10446
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
10447
|
+
},
|
|
8882
10448
|
{
|
|
8883
10449
|
"name": "paragraph-size-base-font-size",
|
|
8884
10450
|
"cssVar": "--paragraph-size-base-font-size",
|
|
@@ -9024,22 +10590,16 @@
|
|
|
9024
10590
|
"value": "16px"
|
|
9025
10591
|
},
|
|
9026
10592
|
{
|
|
9027
|
-
"name": "popover-
|
|
9028
|
-
"cssVar": "--popover-
|
|
9029
|
-
"
|
|
9030
|
-
"value": "
|
|
9031
|
-
},
|
|
9032
|
-
{
|
|
9033
|
-
"name": "popover-border",
|
|
9034
|
-
"cssVar": "--popover-border",
|
|
9035
|
-
"type": "color",
|
|
9036
|
-
"value": "oklch(92.19% 0.0000 0)"
|
|
10593
|
+
"name": "popover-content-animation-duration",
|
|
10594
|
+
"cssVar": "--popover-content-animation-duration",
|
|
10595
|
+
"description": "Popover content animation duration per DES-1294 item 3 — uses moderate (300ms) for dropdown/tooltip/popover entrance.",
|
|
10596
|
+
"value": "300ms"
|
|
9037
10597
|
},
|
|
9038
10598
|
{
|
|
9039
|
-
"name": "popover-content-
|
|
9040
|
-
"cssVar": "--popover-content-
|
|
9041
|
-
"
|
|
9042
|
-
"value": "
|
|
10599
|
+
"name": "popover-content-animation-easing",
|
|
10600
|
+
"cssVar": "--popover-content-animation-easing",
|
|
10601
|
+
"description": "Popover content animation easing per DES-1294 item 3.",
|
|
10602
|
+
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
9043
10603
|
},
|
|
9044
10604
|
{
|
|
9045
10605
|
"name": "popover-content-border-width",
|
|
@@ -9047,12 +10607,6 @@
|
|
|
9047
10607
|
"type": "dimension",
|
|
9048
10608
|
"value": "1px"
|
|
9049
10609
|
},
|
|
9050
|
-
{
|
|
9051
|
-
"name": "popover-content-foreground",
|
|
9052
|
-
"cssVar": "--popover-content-foreground",
|
|
9053
|
-
"type": "color",
|
|
9054
|
-
"value": "oklch(20.46% 0.0000 0)"
|
|
9055
|
-
},
|
|
9056
10610
|
{
|
|
9057
10611
|
"name": "popover-content-padding",
|
|
9058
10612
|
"cssVar": "--popover-content-padding",
|
|
@@ -9063,7 +10617,7 @@
|
|
|
9063
10617
|
"name": "popover-content-radius",
|
|
9064
10618
|
"cssVar": "--popover-content-radius",
|
|
9065
10619
|
"type": "dimension",
|
|
9066
|
-
"value": "
|
|
10620
|
+
"value": "8px"
|
|
9067
10621
|
},
|
|
9068
10622
|
{
|
|
9069
10623
|
"name": "popover-content-shadow",
|
|
@@ -9082,17 +10636,11 @@
|
|
|
9082
10636
|
"type": "number",
|
|
9083
10637
|
"value": "50"
|
|
9084
10638
|
},
|
|
9085
|
-
{
|
|
9086
|
-
"name": "popover-fg",
|
|
9087
|
-
"cssVar": "--popover-fg",
|
|
9088
|
-
"type": "color",
|
|
9089
|
-
"value": "oklch(20.46% 0.0000 0)"
|
|
9090
|
-
},
|
|
9091
10639
|
{
|
|
9092
10640
|
"name": "popover-radius",
|
|
9093
10641
|
"cssVar": "--popover-radius",
|
|
9094
10642
|
"type": "dimension",
|
|
9095
|
-
"value": "
|
|
10643
|
+
"value": "8px"
|
|
9096
10644
|
},
|
|
9097
10645
|
{
|
|
9098
10646
|
"name": "priority-high-bg",
|
|
@@ -9146,7 +10694,8 @@
|
|
|
9146
10694
|
"name": "progress-bar-fill-color-default",
|
|
9147
10695
|
"cssVar": "--progress-bar-fill-color-default",
|
|
9148
10696
|
"type": "color",
|
|
9149
|
-
"
|
|
10697
|
+
"description": "Default indicator mint primary aligned with Figma per Bowser audit ProgressBar — pre-fix was oklch(62.71% 0.1699 149.21) (dark green, naming clash).",
|
|
10698
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
9150
10699
|
},
|
|
9151
10700
|
{
|
|
9152
10701
|
"name": "progress-bar-fill-color-error",
|
|
@@ -9309,31 +10858,36 @@
|
|
|
9309
10858
|
"name": "progress-bar-track-color-error",
|
|
9310
10859
|
"cssVar": "--progress-bar-track-color-error",
|
|
9311
10860
|
"type": "color",
|
|
9312
|
-
"
|
|
10861
|
+
"description": "Track always uses muted gray. Per Bowser audit ProgressBar BUG — pre-fix duplicated indicator.",
|
|
10862
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9313
10863
|
},
|
|
9314
10864
|
{
|
|
9315
10865
|
"name": "progress-bar-track-color-primary",
|
|
9316
10866
|
"cssVar": "--progress-bar-track-color-primary",
|
|
9317
10867
|
"type": "color",
|
|
9318
|
-
"
|
|
10868
|
+
"description": "Track always uses muted gray. Per Bowser audit ProgressBar BUG — pre-fix was oklch(81.75% 0.1821 159.79) (duplicate of indicator).",
|
|
10869
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9319
10870
|
},
|
|
9320
10871
|
{
|
|
9321
10872
|
"name": "progress-bar-track-color-success",
|
|
9322
10873
|
"cssVar": "--progress-bar-track-color-success",
|
|
9323
10874
|
"type": "color",
|
|
9324
|
-
"
|
|
10875
|
+
"description": "Track always uses muted gray. Per Bowser audit ProgressBar BUG — pre-fix duplicated indicator.",
|
|
10876
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9325
10877
|
},
|
|
9326
10878
|
{
|
|
9327
10879
|
"name": "progress-bar-track-color-warning",
|
|
9328
10880
|
"cssVar": "--progress-bar-track-color-warning",
|
|
9329
10881
|
"type": "color",
|
|
9330
|
-
"
|
|
10882
|
+
"description": "Track always uses muted gray. Per Bowser audit ProgressBar BUG — pre-fix duplicated indicator.",
|
|
10883
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9331
10884
|
},
|
|
9332
10885
|
{
|
|
9333
10886
|
"name": "progress-circle-indicator-color-default",
|
|
9334
10887
|
"cssVar": "--progress-circle-indicator-color-default",
|
|
9335
10888
|
"type": "color",
|
|
9336
|
-
"
|
|
10889
|
+
"description": "Default indicator neutral foreground (distinct from primary mint) per Bowser audit.",
|
|
10890
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
9337
10891
|
},
|
|
9338
10892
|
{
|
|
9339
10893
|
"name": "progress-circle-indicator-color-error",
|
|
@@ -9440,25 +10994,29 @@
|
|
|
9440
10994
|
"name": "progress-circle-track-color-error",
|
|
9441
10995
|
"cssVar": "--progress-circle-track-color-error",
|
|
9442
10996
|
"type": "color",
|
|
9443
|
-
"
|
|
10997
|
+
"description": "Track muted gray per Bowser audit ProgressCircle BUG — pre-fix duplicated indicator.",
|
|
10998
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9444
10999
|
},
|
|
9445
11000
|
{
|
|
9446
11001
|
"name": "progress-circle-track-color-primary",
|
|
9447
11002
|
"cssVar": "--progress-circle-track-color-primary",
|
|
9448
11003
|
"type": "color",
|
|
9449
|
-
"
|
|
11004
|
+
"description": "Track muted gray per Bowser audit ProgressCircle BUG — pre-fix duplicated indicator.",
|
|
11005
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9450
11006
|
},
|
|
9451
11007
|
{
|
|
9452
11008
|
"name": "progress-circle-track-color-success",
|
|
9453
11009
|
"cssVar": "--progress-circle-track-color-success",
|
|
9454
11010
|
"type": "color",
|
|
9455
|
-
"
|
|
11011
|
+
"description": "Track muted gray per Bowser audit ProgressCircle BUG — pre-fix duplicated indicator.",
|
|
11012
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9456
11013
|
},
|
|
9457
11014
|
{
|
|
9458
11015
|
"name": "progress-circle-track-color-warning",
|
|
9459
11016
|
"cssVar": "--progress-circle-track-color-warning",
|
|
9460
11017
|
"type": "color",
|
|
9461
|
-
"
|
|
11018
|
+
"description": "Track muted gray per Bowser audit ProgressCircle BUG — pre-fix duplicated indicator.",
|
|
11019
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
9462
11020
|
},
|
|
9463
11021
|
{
|
|
9464
11022
|
"name": "progress-circle-value-color",
|
|
@@ -9471,11 +11029,54 @@
|
|
|
9471
11029
|
"cssVar": "--progress-circle-value-font-weight",
|
|
9472
11030
|
"value": "600"
|
|
9473
11031
|
},
|
|
11032
|
+
{
|
|
11033
|
+
"name": "progress-steps-connector-offset-lg",
|
|
11034
|
+
"cssVar": "--progress-steps-connector-offset-lg",
|
|
11035
|
+
"type": "dimension",
|
|
11036
|
+
"description": "Horizontal connector offset for lg size — half of progress step indicator (48px lg).",
|
|
11037
|
+
"value": "24px"
|
|
11038
|
+
},
|
|
11039
|
+
{
|
|
11040
|
+
"name": "progress-steps-connector-offset-md",
|
|
11041
|
+
"cssVar": "--progress-steps-connector-offset-md",
|
|
11042
|
+
"type": "dimension",
|
|
11043
|
+
"description": "Horizontal connector offset for md size — half of progress step indicator (40px md).",
|
|
11044
|
+
"value": "20px"
|
|
11045
|
+
},
|
|
11046
|
+
{
|
|
11047
|
+
"name": "progress-steps-connector-offset-sm",
|
|
11048
|
+
"cssVar": "--progress-steps-connector-offset-sm",
|
|
11049
|
+
"type": "dimension",
|
|
11050
|
+
"description": "Horizontal connector offset for sm size — half of progress step indicator (32px sm).",
|
|
11051
|
+
"value": "16px"
|
|
11052
|
+
},
|
|
11053
|
+
{
|
|
11054
|
+
"name": "progress-steps-connector-vertical-height-offset-lg",
|
|
11055
|
+
"cssVar": "--progress-steps-connector-vertical-height-offset-lg",
|
|
11056
|
+
"type": "dimension",
|
|
11057
|
+
"description": "Vertical connector calc subtraction for lg size.",
|
|
11058
|
+
"value": "48px"
|
|
11059
|
+
},
|
|
11060
|
+
{
|
|
11061
|
+
"name": "progress-steps-connector-vertical-height-offset-md",
|
|
11062
|
+
"cssVar": "--progress-steps-connector-vertical-height-offset-md",
|
|
11063
|
+
"type": "dimension",
|
|
11064
|
+
"description": "Vertical connector calc subtraction for md size.",
|
|
11065
|
+
"value": "40px"
|
|
11066
|
+
},
|
|
11067
|
+
{
|
|
11068
|
+
"name": "progress-steps-connector-vertical-height-offset-sm",
|
|
11069
|
+
"cssVar": "--progress-steps-connector-vertical-height-offset-sm",
|
|
11070
|
+
"type": "dimension",
|
|
11071
|
+
"description": "Vertical connector calc subtraction for sm — equals step indicator full height.",
|
|
11072
|
+
"value": "32px"
|
|
11073
|
+
},
|
|
9474
11074
|
{
|
|
9475
11075
|
"name": "radio-indicator-color",
|
|
9476
11076
|
"cssVar": "--radio-indicator-color",
|
|
9477
11077
|
"type": "color",
|
|
9478
|
-
"
|
|
11078
|
+
"description": "Mint dot inside checked radio. Per Bowser audit RadioButton Pendência 3 — pre-fix was oklch(18.34% 0.0338 166.67) (dark dot on mint bg, inverted vs Figma).",
|
|
11079
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
9479
11080
|
},
|
|
9480
11081
|
{
|
|
9481
11082
|
"name": "radio-indicator-size-lg",
|
|
@@ -9499,7 +11100,8 @@
|
|
|
9499
11100
|
"name": "radio-root-bg-checked",
|
|
9500
11101
|
"cssVar": "--radio-root-bg-checked",
|
|
9501
11102
|
"type": "color",
|
|
9502
|
-
"
|
|
11103
|
+
"description": "Checked bg stays white. Mint indicator appears inside via border + indicator color. Per Bowser audit RadioButton Pendência 3 — pre-fix was oklch(81.75% 0.1821 159.79) (mint bg) with dark indicator (inverted vs Figma).",
|
|
11104
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
9503
11105
|
},
|
|
9504
11106
|
{
|
|
9505
11107
|
"name": "radio-root-bg-default",
|
|
@@ -9523,7 +11125,8 @@
|
|
|
9523
11125
|
"name": "radio-root-border-default",
|
|
9524
11126
|
"cssVar": "--radio-root-border-default",
|
|
9525
11127
|
"type": "color",
|
|
9526
|
-
"
|
|
11128
|
+
"description": "Unchecked border aligned with Figma core/border/border (#e5e5e5) per Bowser audit RadioButton Pendência 2 — pre-fix was oklch(81.75% 0.1821 159.79) (mint, visual bug, same pattern as Checkbox).",
|
|
11129
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
9527
11130
|
},
|
|
9528
11131
|
{
|
|
9529
11132
|
"name": "radio-root-border-focus",
|
|
@@ -9582,7 +11185,8 @@
|
|
|
9582
11185
|
"name": "rail-width",
|
|
9583
11186
|
"cssVar": "--rail-width",
|
|
9584
11187
|
"type": "dimension",
|
|
9585
|
-
"
|
|
11188
|
+
"description": "Rail width aligned with Figma Secondary 64px per DES-1300 item 3 — pre-fix was 3.5rem (56px).",
|
|
11189
|
+
"value": "4rem"
|
|
9586
11190
|
},
|
|
9587
11191
|
{
|
|
9588
11192
|
"name": "rating-icon-color-empty",
|
|
@@ -9795,6 +11399,31 @@
|
|
|
9795
11399
|
"type": "dimension",
|
|
9796
11400
|
"value": "32px"
|
|
9797
11401
|
},
|
|
11402
|
+
{
|
|
11403
|
+
"name": "section-root-radius",
|
|
11404
|
+
"cssVar": "--section-root-radius",
|
|
11405
|
+
"type": "dimension",
|
|
11406
|
+
"description": "Section root border-radius (8px). Token added so Section.variants.ts can consume it instead of hardcoded `rounded-lg`.",
|
|
11407
|
+
"value": "8px"
|
|
11408
|
+
},
|
|
11409
|
+
{
|
|
11410
|
+
"name": "section-size-default-padding",
|
|
11411
|
+
"cssVar": "--section-size-default-padding",
|
|
11412
|
+
"type": "dimension",
|
|
11413
|
+
"value": "24px"
|
|
11414
|
+
},
|
|
11415
|
+
{
|
|
11416
|
+
"name": "section-size-lg-padding",
|
|
11417
|
+
"cssVar": "--section-size-lg-padding",
|
|
11418
|
+
"type": "dimension",
|
|
11419
|
+
"value": "32px"
|
|
11420
|
+
},
|
|
11421
|
+
{
|
|
11422
|
+
"name": "section-size-sm-padding",
|
|
11423
|
+
"cssVar": "--section-size-sm-padding",
|
|
11424
|
+
"type": "dimension",
|
|
11425
|
+
"value": "16px"
|
|
11426
|
+
},
|
|
9798
11427
|
{
|
|
9799
11428
|
"name": "select-content-bg",
|
|
9800
11429
|
"cssVar": "--select-content-bg",
|
|
@@ -9823,7 +11452,8 @@
|
|
|
9823
11452
|
"name": "select-content-radius",
|
|
9824
11453
|
"cssVar": "--select-content-radius",
|
|
9825
11454
|
"type": "dimension",
|
|
9826
|
-
"
|
|
11455
|
+
"description": "Select content radius aligned with Figma radius/md (8px) per DES-1296 — pre-fix was 0.375rem (6px).",
|
|
11456
|
+
"value": "8px"
|
|
9827
11457
|
},
|
|
9828
11458
|
{
|
|
9829
11459
|
"name": "select-content-shadow",
|
|
@@ -9864,13 +11494,47 @@
|
|
|
9864
11494
|
"name": "select-item-radius",
|
|
9865
11495
|
"cssVar": "--select-item-radius",
|
|
9866
11496
|
"type": "dimension",
|
|
9867
|
-
"
|
|
11497
|
+
"description": "Select item radius aligned with Figma radius-sm per DES-1296 — pre-fix was 0.125rem (2px).",
|
|
11498
|
+
"value": "4px"
|
|
11499
|
+
},
|
|
11500
|
+
{
|
|
11501
|
+
"name": "select-item-text",
|
|
11502
|
+
"cssVar": "--select-item-text",
|
|
11503
|
+
"type": "dimension",
|
|
11504
|
+
"value": "0.875rem"
|
|
11505
|
+
},
|
|
11506
|
+
{
|
|
11507
|
+
"name": "select-trigger-border-focus",
|
|
11508
|
+
"cssVar": "--select-trigger-border-focus",
|
|
11509
|
+
"type": "color",
|
|
11510
|
+
"description": "Focus border color. Mint primary brand color from --ring token.",
|
|
11511
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
11512
|
+
},
|
|
11513
|
+
{
|
|
11514
|
+
"name": "select-trigger-disabled-bg",
|
|
11515
|
+
"cssVar": "--select-trigger-disabled-bg",
|
|
11516
|
+
"type": "color",
|
|
11517
|
+
"description": "Select trigger disabled bg per DES-1296 item 3 (token vs opacity).",
|
|
11518
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
11519
|
+
},
|
|
11520
|
+
{
|
|
11521
|
+
"name": "select-trigger-disabled-border",
|
|
11522
|
+
"cssVar": "--select-trigger-disabled-border",
|
|
11523
|
+
"type": "color",
|
|
11524
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
11525
|
+
},
|
|
11526
|
+
{
|
|
11527
|
+
"name": "select-trigger-disabled-fg",
|
|
11528
|
+
"cssVar": "--select-trigger-disabled-fg",
|
|
11529
|
+
"type": "color",
|
|
11530
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
9868
11531
|
},
|
|
9869
11532
|
{
|
|
9870
|
-
"name": "select-
|
|
9871
|
-
"cssVar": "--select-
|
|
11533
|
+
"name": "select-trigger-gap",
|
|
11534
|
+
"cssVar": "--select-trigger-gap",
|
|
9872
11535
|
"type": "dimension",
|
|
9873
|
-
"
|
|
11536
|
+
"description": "Gap between SelectValue text and chevron icon. Default 8px (spacing.2).",
|
|
11537
|
+
"value": "8px"
|
|
9874
11538
|
},
|
|
9875
11539
|
{
|
|
9876
11540
|
"name": "select-trigger-height-lg",
|
|
@@ -9926,6 +11590,33 @@
|
|
|
9926
11590
|
"type": "dimension",
|
|
9927
11591
|
"value": "4px"
|
|
9928
11592
|
},
|
|
11593
|
+
{
|
|
11594
|
+
"name": "select-trigger-radius",
|
|
11595
|
+
"cssVar": "--select-trigger-radius",
|
|
11596
|
+
"type": "dimension",
|
|
11597
|
+
"description": "Trigger border-radius. Aligned with Figma radius/md (8px) per audit Select.md Pendência 2.",
|
|
11598
|
+
"value": "8px"
|
|
11599
|
+
},
|
|
11600
|
+
{
|
|
11601
|
+
"name": "select-trigger-ring-destructive",
|
|
11602
|
+
"cssVar": "--select-trigger-ring-destructive",
|
|
11603
|
+
"type": "color",
|
|
11604
|
+
"description": "Select trigger focus ring destructive (invalid state).",
|
|
11605
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
11606
|
+
},
|
|
11607
|
+
{
|
|
11608
|
+
"name": "select-trigger-ring-primary",
|
|
11609
|
+
"cssVar": "--select-trigger-ring-primary",
|
|
11610
|
+
"type": "color",
|
|
11611
|
+
"description": "Select trigger focus ring primary per DES-1296 item 4.",
|
|
11612
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
11613
|
+
},
|
|
11614
|
+
{
|
|
11615
|
+
"name": "select-trigger-ring-width",
|
|
11616
|
+
"cssVar": "--select-trigger-ring-width",
|
|
11617
|
+
"type": "dimension",
|
|
11618
|
+
"value": "3px"
|
|
11619
|
+
},
|
|
9929
11620
|
{
|
|
9930
11621
|
"name": "select-trigger-text-lg",
|
|
9931
11622
|
"cssVar": "--select-trigger-text-lg",
|
|
@@ -9944,11 +11635,40 @@
|
|
|
9944
11635
|
"type": "dimension",
|
|
9945
11636
|
"value": "0.875rem"
|
|
9946
11637
|
},
|
|
11638
|
+
{
|
|
11639
|
+
"name": "sheet-close-opacity-default",
|
|
11640
|
+
"cssVar": "--sheet-close-opacity-default",
|
|
11641
|
+
"type": "number",
|
|
11642
|
+
"description": "Sheet close button default opacity per DES-1298 item 13.",
|
|
11643
|
+
"value": "0.7"
|
|
11644
|
+
},
|
|
11645
|
+
{
|
|
11646
|
+
"name": "sheet-close-radius",
|
|
11647
|
+
"cssVar": "--sheet-close-radius",
|
|
11648
|
+
"type": "dimension",
|
|
11649
|
+
"description": "Sheet close button radius per DES-1298 item 13.",
|
|
11650
|
+
"value": "2px"
|
|
11651
|
+
},
|
|
11652
|
+
{
|
|
11653
|
+
"name": "sheet-close-right",
|
|
11654
|
+
"cssVar": "--sheet-close-right",
|
|
11655
|
+
"type": "dimension",
|
|
11656
|
+
"description": "Sheet close button right offset per DES-1298 item 13.",
|
|
11657
|
+
"value": "16px"
|
|
11658
|
+
},
|
|
11659
|
+
{
|
|
11660
|
+
"name": "sheet-close-top",
|
|
11661
|
+
"cssVar": "--sheet-close-top",
|
|
11662
|
+
"type": "dimension",
|
|
11663
|
+
"description": "Sheet close button top offset per DES-1298 item 13.",
|
|
11664
|
+
"value": "16px"
|
|
11665
|
+
},
|
|
9947
11666
|
{
|
|
9948
11667
|
"name": "sheet-content-bg",
|
|
9949
11668
|
"cssVar": "--sheet-content-bg",
|
|
9950
11669
|
"type": "color",
|
|
9951
|
-
"
|
|
11670
|
+
"description": "Sheet content bg aligned with Figma core/background/surface (fafafa) per DES-1298 item 3 — pre-fix was light.base.background (white).",
|
|
11671
|
+
"value": "oklch(98.51% 0.0000 0)"
|
|
9952
11672
|
},
|
|
9953
11673
|
{
|
|
9954
11674
|
"name": "sheet-content-border",
|
|
@@ -9956,18 +11676,33 @@
|
|
|
9956
11676
|
"type": "color",
|
|
9957
11677
|
"value": "oklch(92.19% 0.0000 0)"
|
|
9958
11678
|
},
|
|
11679
|
+
{
|
|
11680
|
+
"name": "sheet-content-max-height-default",
|
|
11681
|
+
"cssVar": "--sheet-content-max-height-default",
|
|
11682
|
+
"type": "dimension",
|
|
11683
|
+
"description": "Sheet default max-height (384px) — DES-1298 item 8 tokenization.",
|
|
11684
|
+
"value": "24rem"
|
|
11685
|
+
},
|
|
9959
11686
|
{
|
|
9960
11687
|
"name": "sheet-content-max-height-lg",
|
|
9961
11688
|
"cssVar": "--sheet-content-max-height-lg",
|
|
9962
11689
|
"type": "dimension",
|
|
9963
|
-
"description": "
|
|
9964
|
-
"value": "
|
|
11690
|
+
"description": "Sheet lg max-height aligned with Figma 819.2px per DES-1298 item 6 — pre-fix was 600px (73%).",
|
|
11691
|
+
"value": "820px"
|
|
11692
|
+
},
|
|
11693
|
+
{
|
|
11694
|
+
"name": "sheet-content-max-height-sm",
|
|
11695
|
+
"cssVar": "--sheet-content-max-height-sm",
|
|
11696
|
+
"type": "dimension",
|
|
11697
|
+
"description": "Sheet sm max-height (256px) — DES-1298 item 8 tokenization.",
|
|
11698
|
+
"value": "16rem"
|
|
9965
11699
|
},
|
|
9966
11700
|
{
|
|
9967
11701
|
"name": "sheet-content-padding",
|
|
9968
11702
|
"cssVar": "--sheet-content-padding",
|
|
9969
11703
|
"type": "dimension",
|
|
9970
|
-
"
|
|
11704
|
+
"description": "Sheet content padding aligned with Figma spacing/s-32 per DES-1298 item 7 — pre-fix was 24px (spacing.6).",
|
|
11705
|
+
"value": "32px"
|
|
9971
11706
|
},
|
|
9972
11707
|
{
|
|
9973
11708
|
"name": "sheet-content-shadow",
|
|
@@ -9984,19 +11719,21 @@
|
|
|
9984
11719
|
"name": "sheet-content-width-lg",
|
|
9985
11720
|
"cssVar": "--sheet-content-width-lg",
|
|
9986
11721
|
"type": "dimension",
|
|
9987
|
-
"
|
|
11722
|
+
"description": "Sheet lg width aligned with Figma 1152px per DES-1298 item 5 — pre-fix was 32rem (512px, 2.25x off).",
|
|
11723
|
+
"value": "72rem"
|
|
9988
11724
|
},
|
|
9989
11725
|
{
|
|
9990
11726
|
"name": "sheet-content-width-sm",
|
|
9991
11727
|
"cssVar": "--sheet-content-width-sm",
|
|
9992
11728
|
"type": "dimension",
|
|
9993
|
-
"
|
|
11729
|
+
"description": "Sheet sm width aligned with Figma 576px per DES-1298 item 4 — pre-fix was 18rem (288px, 2x off).",
|
|
11730
|
+
"value": "36rem"
|
|
9994
11731
|
},
|
|
9995
11732
|
{
|
|
9996
11733
|
"name": "sheet-overlay-bg-blur",
|
|
9997
11734
|
"cssVar": "--sheet-overlay-bg-blur",
|
|
9998
11735
|
"type": "color",
|
|
9999
|
-
"value": "oklch(0
|
|
11736
|
+
"value": "oklch(0% 0 0 / 30%)"
|
|
10000
11737
|
},
|
|
10001
11738
|
{
|
|
10002
11739
|
"name": "sheet-overlay-bg-default",
|
|
@@ -10008,7 +11745,28 @@
|
|
|
10008
11745
|
"name": "sheet-overlay-bg-light",
|
|
10009
11746
|
"cssVar": "--sheet-overlay-bg-light",
|
|
10010
11747
|
"type": "color",
|
|
10011
|
-
"value": "oklch(
|
|
11748
|
+
"value": "oklch(100% 0 0 / 50%)"
|
|
11749
|
+
},
|
|
11750
|
+
{
|
|
11751
|
+
"name": "sidebar-container-background",
|
|
11752
|
+
"cssVar": "--sidebar-container-background",
|
|
11753
|
+
"type": "color",
|
|
11754
|
+
"description": "Sidebar container bg = surface #fafafa (Figma 1091:9106).",
|
|
11755
|
+
"value": "oklch(98.51% 0.0000 0)"
|
|
11756
|
+
},
|
|
11757
|
+
{
|
|
11758
|
+
"name": "sidebar-container-padding-x",
|
|
11759
|
+
"cssVar": "--sidebar-container-padding-x",
|
|
11760
|
+
"type": "dimension",
|
|
11761
|
+
"description": "Sidebar (rail) container horizontal padding = 12px (Figma px-[var(--spacing/s-12,12px)]).",
|
|
11762
|
+
"value": "12px"
|
|
11763
|
+
},
|
|
11764
|
+
{
|
|
11765
|
+
"name": "sidebar-container-padding-y",
|
|
11766
|
+
"cssVar": "--sidebar-container-padding-y",
|
|
11767
|
+
"type": "dimension",
|
|
11768
|
+
"description": "Sidebar (rail) container vertical padding = 24px (Figma py-[var(--spacing/s-24,24px)]).",
|
|
11769
|
+
"value": "24px"
|
|
10012
11770
|
},
|
|
10013
11771
|
{
|
|
10014
11772
|
"name": "sidebar-group-padding",
|
|
@@ -10039,28 +11797,333 @@
|
|
|
10039
11797
|
"cssVar": "--sidebar-input-shadow",
|
|
10040
11798
|
"value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
|
|
10041
11799
|
},
|
|
11800
|
+
{
|
|
11801
|
+
"name": "sidebar-logo-background",
|
|
11802
|
+
"cssVar": "--sidebar-logo-background",
|
|
11803
|
+
"type": "color",
|
|
11804
|
+
"description": "Logo plate bg = brand-primary #19e699 (Figma 1087:323).",
|
|
11805
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
11806
|
+
},
|
|
11807
|
+
{
|
|
11808
|
+
"name": "sidebar-logo-foreground",
|
|
11809
|
+
"cssVar": "--sidebar-logo-foreground",
|
|
11810
|
+
"type": "color",
|
|
11811
|
+
"description": "Logo glyph color = brand-primary-foreground #02170f (Figma 1087:323).",
|
|
11812
|
+
"value": "oklch(18.34% 0.0338 166.67)"
|
|
11813
|
+
},
|
|
11814
|
+
{
|
|
11815
|
+
"name": "sidebar-logo-icon-size",
|
|
11816
|
+
"cssVar": "--sidebar-logo-icon-size",
|
|
11817
|
+
"type": "dimension",
|
|
11818
|
+
"description": "Logo inner mark size = 16px (Figma 1087:304 Logo size-[16px]).",
|
|
11819
|
+
"value": "1rem"
|
|
11820
|
+
},
|
|
11821
|
+
{
|
|
11822
|
+
"name": "sidebar-logo-padding",
|
|
11823
|
+
"cssVar": "--sidebar-logo-padding",
|
|
11824
|
+
"type": "dimension",
|
|
11825
|
+
"description": "Logo inner padding = 4px (Figma p-[var(--spacing/s-4,4px)]).",
|
|
11826
|
+
"value": "4px"
|
|
11827
|
+
},
|
|
11828
|
+
{
|
|
11829
|
+
"name": "sidebar-logo-radius",
|
|
11830
|
+
"cssVar": "--sidebar-logo-radius",
|
|
11831
|
+
"type": "dimension",
|
|
11832
|
+
"description": "Logo border-radius = 4px rounded-md (Figma rounded-[var(--border-radius/rounded-md,4px)]).",
|
|
11833
|
+
"value": "4px"
|
|
11834
|
+
},
|
|
11835
|
+
{
|
|
11836
|
+
"name": "sidebar-logo-size",
|
|
11837
|
+
"cssVar": "--sidebar-logo-size",
|
|
11838
|
+
"type": "dimension",
|
|
11839
|
+
"description": "Logo total size = 32px (Figma size-[32px]).",
|
|
11840
|
+
"value": "2rem"
|
|
11841
|
+
},
|
|
11842
|
+
{
|
|
11843
|
+
"name": "sidebar-nav-item-bg-default",
|
|
11844
|
+
"cssVar": "--sidebar-nav-item-bg-default",
|
|
11845
|
+
"type": "color",
|
|
11846
|
+
"description": "Panel nav-item bg default = transparent.",
|
|
11847
|
+
"value": "transparent"
|
|
11848
|
+
},
|
|
11849
|
+
{
|
|
11850
|
+
"name": "sidebar-nav-item-bg-hover",
|
|
11851
|
+
"cssVar": "--sidebar-nav-item-bg-hover",
|
|
11852
|
+
"type": "color",
|
|
11853
|
+
"description": "Panel nav-item bg hover/active = muted #f5f5f5.",
|
|
11854
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
11855
|
+
},
|
|
11856
|
+
{
|
|
11857
|
+
"name": "sidebar-nav-item-fg-active",
|
|
11858
|
+
"cssVar": "--sidebar-nav-item-fg-active",
|
|
11859
|
+
"type": "color",
|
|
11860
|
+
"description": "Panel nav-item label color active = foreground #0a0a0a.",
|
|
11861
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
11862
|
+
},
|
|
11863
|
+
{
|
|
11864
|
+
"name": "sidebar-nav-item-fg-default",
|
|
11865
|
+
"cssVar": "--sidebar-nav-item-fg-default",
|
|
11866
|
+
"type": "color",
|
|
11867
|
+
"description": "Panel nav-item label color default = muted-foreground #737373 (Figma).",
|
|
11868
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
11869
|
+
},
|
|
11870
|
+
{
|
|
11871
|
+
"name": "sidebar-nav-item-font-size",
|
|
11872
|
+
"cssVar": "--sidebar-nav-item-font-size",
|
|
11873
|
+
"type": "dimension",
|
|
11874
|
+
"description": "Panel nav-item label font-size = 14px (Figma text-[14px]).",
|
|
11875
|
+
"value": "0.875rem"
|
|
11876
|
+
},
|
|
11877
|
+
{
|
|
11878
|
+
"name": "sidebar-nav-item-gap",
|
|
11879
|
+
"cssVar": "--sidebar-nav-item-gap",
|
|
11880
|
+
"type": "dimension",
|
|
11881
|
+
"description": "Gap between icon and text in panel nav-item = 12px (Figma gap-[var(--spacing/s-12,12px)]).",
|
|
11882
|
+
"value": "12px"
|
|
11883
|
+
},
|
|
11884
|
+
{
|
|
11885
|
+
"name": "sidebar-nav-item-icon-size",
|
|
11886
|
+
"cssVar": "--sidebar-nav-item-icon-size",
|
|
11887
|
+
"type": "dimension",
|
|
11888
|
+
"description": "Panel nav-item icon size = 20px.",
|
|
11889
|
+
"value": "1.25rem"
|
|
11890
|
+
},
|
|
11891
|
+
{
|
|
11892
|
+
"name": "sidebar-nav-item-line-height",
|
|
11893
|
+
"cssVar": "--sidebar-nav-item-line-height",
|
|
11894
|
+
"type": "number",
|
|
11895
|
+
"description": "Panel nav-item label line-height = 1 (Figma leading-none).",
|
|
11896
|
+
"value": "1"
|
|
11897
|
+
},
|
|
11898
|
+
{
|
|
11899
|
+
"name": "sidebar-nav-item-padding",
|
|
11900
|
+
"cssVar": "--sidebar-nav-item-padding",
|
|
11901
|
+
"type": "dimension",
|
|
11902
|
+
"description": "Panel nav-item padding = 8px (Figma p-[var(--spacing/2,8px)]).",
|
|
11903
|
+
"value": "8px"
|
|
11904
|
+
},
|
|
11905
|
+
{
|
|
11906
|
+
"name": "sidebar-nav-item-radius",
|
|
11907
|
+
"cssVar": "--sidebar-nav-item-radius",
|
|
11908
|
+
"type": "dimension",
|
|
11909
|
+
"description": "Panel nav-item radius = 4px (Figma rounded-md).",
|
|
11910
|
+
"value": "4px"
|
|
11911
|
+
},
|
|
11912
|
+
{
|
|
11913
|
+
"name": "sidebar-panel-background",
|
|
11914
|
+
"cssVar": "--sidebar-panel-background",
|
|
11915
|
+
"type": "color",
|
|
11916
|
+
"description": "Secondary panel bg = surface #fafafa (Figma 1092:542).",
|
|
11917
|
+
"value": "oklch(98.51% 0.0000 0)"
|
|
11918
|
+
},
|
|
11919
|
+
{
|
|
11920
|
+
"name": "sidebar-panel-border-color",
|
|
11921
|
+
"cssVar": "--sidebar-panel-border-color",
|
|
11922
|
+
"type": "color",
|
|
11923
|
+
"description": "Secondary panel left border = border #e5e5e5 (Figma 1092:542 border-l).",
|
|
11924
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
11925
|
+
},
|
|
11926
|
+
{
|
|
11927
|
+
"name": "sidebar-panel-gap",
|
|
11928
|
+
"cssVar": "--sidebar-panel-gap",
|
|
11929
|
+
"type": "dimension",
|
|
11930
|
+
"description": "Panel vertical gap between header and section blocks = 28px (Figma gap-[28px]).",
|
|
11931
|
+
"value": "1.75rem"
|
|
11932
|
+
},
|
|
11933
|
+
{
|
|
11934
|
+
"name": "sidebar-panel-header-color",
|
|
11935
|
+
"cssVar": "--sidebar-panel-header-color",
|
|
11936
|
+
"type": "color",
|
|
11937
|
+
"description": "Panel title color = foreground #0a0a0a.",
|
|
11938
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
11939
|
+
},
|
|
11940
|
+
{
|
|
11941
|
+
"name": "sidebar-panel-header-font-size",
|
|
11942
|
+
"cssVar": "--sidebar-panel-header-font-size",
|
|
11943
|
+
"type": "dimension",
|
|
11944
|
+
"description": "Panel title font-size = 16px (Figma Inter Bold 16px — text-[16px] node I1092:542;1092:441).",
|
|
11945
|
+
"value": "1rem"
|
|
11946
|
+
},
|
|
11947
|
+
{
|
|
11948
|
+
"name": "sidebar-panel-header-line-height",
|
|
11949
|
+
"cssVar": "--sidebar-panel-header-line-height",
|
|
11950
|
+
"type": "dimension",
|
|
11951
|
+
"description": "Panel title line-height = 24px (Figma leading-[24px]).",
|
|
11952
|
+
"value": "1.5rem"
|
|
11953
|
+
},
|
|
11954
|
+
{
|
|
11955
|
+
"name": "sidebar-panel-header-padding-x",
|
|
11956
|
+
"cssVar": "--sidebar-panel-header-padding-x",
|
|
11957
|
+
"type": "dimension",
|
|
11958
|
+
"description": "Panel title horizontal padding = 16px (Figma px-[var(--spacing/s-16,16px)]).",
|
|
11959
|
+
"value": "16px"
|
|
11960
|
+
},
|
|
11961
|
+
{
|
|
11962
|
+
"name": "sidebar-panel-padding-bottom",
|
|
11963
|
+
"cssVar": "--sidebar-panel-padding-bottom",
|
|
11964
|
+
"type": "dimension",
|
|
11965
|
+
"description": "Panel bottom padding = 80px (Figma pb-[80px]).",
|
|
11966
|
+
"value": "5rem"
|
|
11967
|
+
},
|
|
11968
|
+
{
|
|
11969
|
+
"name": "sidebar-panel-padding-top",
|
|
11970
|
+
"cssVar": "--sidebar-panel-padding-top",
|
|
11971
|
+
"type": "dimension",
|
|
11972
|
+
"description": "Panel top padding = 28px (Figma pt-[28px]).",
|
|
11973
|
+
"value": "1.75rem"
|
|
11974
|
+
},
|
|
10042
11975
|
{
|
|
10043
11976
|
"name": "sidebar-panel-width",
|
|
10044
11977
|
"cssVar": "--sidebar-panel-width",
|
|
10045
11978
|
"type": "dimension",
|
|
11979
|
+
"description": "Secondary panel width = 216px (Figma 1091:9106 Secondary mode panel column, node 1092:542).",
|
|
10046
11980
|
"value": "13.5rem"
|
|
10047
11981
|
},
|
|
11982
|
+
{
|
|
11983
|
+
"name": "sidebar-rail-group-gap",
|
|
11984
|
+
"cssVar": "--sidebar-rail-group-gap",
|
|
11985
|
+
"type": "dimension",
|
|
11986
|
+
"description": "Vertical gap between rail groups (logo block vs nav block) = 24px (Figma gap-[var(--spacing/s-24,24px)]).",
|
|
11987
|
+
"value": "24px"
|
|
11988
|
+
},
|
|
11989
|
+
{
|
|
11990
|
+
"name": "sidebar-rail-item-bg-default",
|
|
11991
|
+
"cssVar": "--sidebar-rail-item-bg-default",
|
|
11992
|
+
"type": "color",
|
|
11993
|
+
"description": "Rail nav-item bg default = transparent.",
|
|
11994
|
+
"value": "transparent"
|
|
11995
|
+
},
|
|
11996
|
+
{
|
|
11997
|
+
"name": "sidebar-rail-item-bg-hover",
|
|
11998
|
+
"cssVar": "--sidebar-rail-item-bg-hover",
|
|
11999
|
+
"type": "color",
|
|
12000
|
+
"description": "Rail nav-item bg hover/active = muted #f5f5f5 (Figma 1087:204 status=Hover/Active).",
|
|
12001
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
12002
|
+
},
|
|
12003
|
+
{
|
|
12004
|
+
"name": "sidebar-rail-item-fg-active",
|
|
12005
|
+
"cssVar": "--sidebar-rail-item-fg-active",
|
|
12006
|
+
"type": "color",
|
|
12007
|
+
"description": "Rail nav-item icon color active = foreground #0a0a0a (Figma 1087:204 status=Active).",
|
|
12008
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
12009
|
+
},
|
|
12010
|
+
{
|
|
12011
|
+
"name": "sidebar-rail-item-fg-default",
|
|
12012
|
+
"cssVar": "--sidebar-rail-item-fg-default",
|
|
12013
|
+
"type": "color",
|
|
12014
|
+
"description": "Rail nav-item icon color default = muted-foreground #737373 (Figma 1087:204 status=Default).",
|
|
12015
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
12016
|
+
},
|
|
12017
|
+
{
|
|
12018
|
+
"name": "sidebar-rail-item-gap",
|
|
12019
|
+
"cssVar": "--sidebar-rail-item-gap",
|
|
12020
|
+
"type": "dimension",
|
|
12021
|
+
"description": "Vertical gap between rail nav items = 20px (Figma gap-[var(--spacing/s-20,20px)]).",
|
|
12022
|
+
"value": "20px"
|
|
12023
|
+
},
|
|
12024
|
+
{
|
|
12025
|
+
"name": "sidebar-rail-item-icon-size",
|
|
12026
|
+
"cssVar": "--sidebar-rail-item-icon-size",
|
|
12027
|
+
"type": "dimension",
|
|
12028
|
+
"description": "Rail icon size = 20px (Figma size-[20px] across all icons in 1087:204).",
|
|
12029
|
+
"value": "1.25rem"
|
|
12030
|
+
},
|
|
12031
|
+
{
|
|
12032
|
+
"name": "sidebar-rail-item-padding",
|
|
12033
|
+
"cssVar": "--sidebar-rail-item-padding",
|
|
12034
|
+
"type": "dimension",
|
|
12035
|
+
"description": "Rail nav-item padding (all sides) = 8px (Figma p-[var(--spacing/2,8px)]).",
|
|
12036
|
+
"value": "8px"
|
|
12037
|
+
},
|
|
12038
|
+
{
|
|
12039
|
+
"name": "sidebar-rail-item-radius",
|
|
12040
|
+
"cssVar": "--sidebar-rail-item-radius",
|
|
12041
|
+
"type": "dimension",
|
|
12042
|
+
"description": "Rail nav-item border-radius = 4px (Figma rounded-md).",
|
|
12043
|
+
"value": "4px"
|
|
12044
|
+
},
|
|
12045
|
+
{
|
|
12046
|
+
"name": "sidebar-rail-width",
|
|
12047
|
+
"cssVar": "--sidebar-rail-width",
|
|
12048
|
+
"type": "dimension",
|
|
12049
|
+
"description": "Rail strip width = 64px (Figma 1091:9106 Secondary mode rail column).",
|
|
12050
|
+
"value": "4rem"
|
|
12051
|
+
},
|
|
12052
|
+
{
|
|
12053
|
+
"name": "sidebar-section-content-gap",
|
|
12054
|
+
"cssVar": "--sidebar-section-content-gap",
|
|
12055
|
+
"type": "dimension",
|
|
12056
|
+
"description": "Vertical gap between nav items in panel = 8px (Figma gap-[var(--spacing/s-8,8px)]).",
|
|
12057
|
+
"value": "8px"
|
|
12058
|
+
},
|
|
12059
|
+
{
|
|
12060
|
+
"name": "sidebar-section-content-padding-x",
|
|
12061
|
+
"cssVar": "--sidebar-section-content-padding-x",
|
|
12062
|
+
"type": "dimension",
|
|
12063
|
+
"description": "Nav items wrapper horizontal padding = 4px (Figma px-[var(--spacing/s-4,4px)]).",
|
|
12064
|
+
"value": "4px"
|
|
12065
|
+
},
|
|
12066
|
+
{
|
|
12067
|
+
"name": "sidebar-section-gap",
|
|
12068
|
+
"cssVar": "--sidebar-section-gap",
|
|
12069
|
+
"type": "dimension",
|
|
12070
|
+
"description": "Section vertical gap between title and items = 16px (Figma gap-[var(--spacing/s-16,16px)]).",
|
|
12071
|
+
"value": "16px"
|
|
12072
|
+
},
|
|
12073
|
+
{
|
|
12074
|
+
"name": "sidebar-section-padding-x",
|
|
12075
|
+
"cssVar": "--sidebar-section-padding-x",
|
|
12076
|
+
"type": "dimension",
|
|
12077
|
+
"description": "Section block horizontal padding = 8px (Figma px-[8px] on Sub Categoria block I1092:542;1092:442).",
|
|
12078
|
+
"value": "8px"
|
|
12079
|
+
},
|
|
12080
|
+
{
|
|
12081
|
+
"name": "sidebar-section-title-color",
|
|
12082
|
+
"cssVar": "--sidebar-section-title-color",
|
|
12083
|
+
"type": "color",
|
|
12084
|
+
"description": "Section title color = muted-foreground #737373 (Figma colors/neutral/foreground/tertiary).",
|
|
12085
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
12086
|
+
},
|
|
12087
|
+
{
|
|
12088
|
+
"name": "sidebar-section-title-font-size",
|
|
12089
|
+
"cssVar": "--sidebar-section-title-font-size",
|
|
12090
|
+
"type": "dimension",
|
|
12091
|
+
"description": "Section title font-size = 10px (Figma text-[10px] I1092:542;1092:444).",
|
|
12092
|
+
"value": "0.625rem"
|
|
12093
|
+
},
|
|
12094
|
+
{
|
|
12095
|
+
"name": "sidebar-section-title-line-height",
|
|
12096
|
+
"cssVar": "--sidebar-section-title-line-height",
|
|
12097
|
+
"type": "number",
|
|
12098
|
+
"description": "Section title line-height = 1 (Figma leading-none).",
|
|
12099
|
+
"value": "1"
|
|
12100
|
+
},
|
|
12101
|
+
{
|
|
12102
|
+
"name": "sidebar-section-title-padding-x",
|
|
12103
|
+
"cssVar": "--sidebar-section-title-padding-x",
|
|
12104
|
+
"type": "dimension",
|
|
12105
|
+
"description": "Section title (Dashboards label) horizontal padding = 8px (Figma px-[var(--spacing/s-8,8px)]).",
|
|
12106
|
+
"value": "8px"
|
|
12107
|
+
},
|
|
10048
12108
|
{
|
|
10049
12109
|
"name": "sidebar-width",
|
|
10050
12110
|
"cssVar": "--sidebar-width",
|
|
10051
12111
|
"type": "dimension",
|
|
10052
|
-
"
|
|
12112
|
+
"description": "Sidebar expanded total width = 272px (Figma 1091:9106 status=Expanded).",
|
|
12113
|
+
"value": "17rem"
|
|
10053
12114
|
},
|
|
10054
12115
|
{
|
|
10055
12116
|
"name": "sidebar-width-icon",
|
|
10056
12117
|
"cssVar": "--sidebar-width-icon",
|
|
10057
12118
|
"type": "dimension",
|
|
10058
|
-
"
|
|
12119
|
+
"description": "Sidebar collapsed (rail-only) width = 64px (Figma 1091:9106 status=Collapsed).",
|
|
12120
|
+
"value": "4rem"
|
|
10059
12121
|
},
|
|
10060
12122
|
{
|
|
10061
12123
|
"name": "sidebar-width-mobile",
|
|
10062
12124
|
"cssVar": "--sidebar-width-mobile",
|
|
10063
12125
|
"type": "dimension",
|
|
12126
|
+
"description": "Sidebar mobile drawer width (~288px).",
|
|
10064
12127
|
"value": "18rem"
|
|
10065
12128
|
},
|
|
10066
12129
|
{
|
|
@@ -10078,7 +12141,8 @@
|
|
|
10078
12141
|
{
|
|
10079
12142
|
"name": "single-stat-label-weight",
|
|
10080
12143
|
"cssVar": "--single-stat-label-weight",
|
|
10081
|
-
"
|
|
12144
|
+
"description": "SingleStat label weight aligned with Figma normal (400) per DES-1302 — pre-fix was medium (500).",
|
|
12145
|
+
"value": "400"
|
|
10082
12146
|
},
|
|
10083
12147
|
{
|
|
10084
12148
|
"name": "single-stat-value-color",
|
|
@@ -10310,6 +12374,38 @@
|
|
|
10310
12374
|
"type": "dimension",
|
|
10311
12375
|
"value": "64px"
|
|
10312
12376
|
},
|
|
12377
|
+
{
|
|
12378
|
+
"name": "slider-focus-ring-primary",
|
|
12379
|
+
"cssVar": "--slider-focus-ring-primary",
|
|
12380
|
+
"type": "color",
|
|
12381
|
+
"description": "Slider thumb focus-ring primary per DES-1304 item 2.",
|
|
12382
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
12383
|
+
},
|
|
12384
|
+
{
|
|
12385
|
+
"name": "slider-focus-ring-width",
|
|
12386
|
+
"cssVar": "--slider-focus-ring-width",
|
|
12387
|
+
"type": "dimension",
|
|
12388
|
+
"description": "Slider thumb focus ring width (outer halo around the thumb).",
|
|
12389
|
+
"value": "4px"
|
|
12390
|
+
},
|
|
12391
|
+
{
|
|
12392
|
+
"name": "slider-label-color",
|
|
12393
|
+
"cssVar": "--slider-label-color",
|
|
12394
|
+
"type": "color",
|
|
12395
|
+
"description": "Slider label color per DES-1304 item 2.",
|
|
12396
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
12397
|
+
},
|
|
12398
|
+
{
|
|
12399
|
+
"name": "slider-label-size",
|
|
12400
|
+
"cssVar": "--slider-label-size",
|
|
12401
|
+
"type": "dimension",
|
|
12402
|
+
"value": "0.875rem"
|
|
12403
|
+
},
|
|
12404
|
+
{
|
|
12405
|
+
"name": "slider-label-weight",
|
|
12406
|
+
"cssVar": "--slider-label-weight",
|
|
12407
|
+
"value": "500"
|
|
12408
|
+
},
|
|
10313
12409
|
{
|
|
10314
12410
|
"name": "slider-range-bg-default",
|
|
10315
12411
|
"cssVar": "--slider-range-bg-default",
|
|
@@ -10328,6 +12424,13 @@
|
|
|
10328
12424
|
"type": "color",
|
|
10329
12425
|
"value": "oklch(81.75% 0.1821 159.79)"
|
|
10330
12426
|
},
|
|
12427
|
+
{
|
|
12428
|
+
"name": "slider-thumb-drop-shadow",
|
|
12429
|
+
"cssVar": "--slider-thumb-drop-shadow",
|
|
12430
|
+
"type": "shadow",
|
|
12431
|
+
"description": "Slider thumb base drop shadow (composed alongside focus ring on focus-visible).",
|
|
12432
|
+
"value": "0 1px 2px 0 var(--drop-shadow-lg-color), 0 1px 3px 0 var(--drop-shadow-md-color)"
|
|
12433
|
+
},
|
|
10331
12434
|
{
|
|
10332
12435
|
"name": "slider-thumb-size-lg",
|
|
10333
12436
|
"cssVar": "--slider-thumb-size-lg",
|
|
@@ -10344,31 +12447,55 @@
|
|
|
10344
12447
|
"name": "slider-thumb-size-sm",
|
|
10345
12448
|
"cssVar": "--slider-thumb-size-sm",
|
|
10346
12449
|
"type": "dimension",
|
|
10347
|
-
"
|
|
12450
|
+
"description": "Slider thumb sm aligned with Figma 16px per DES-1304 item 3 — pre-fix was 20px.",
|
|
12451
|
+
"value": "16px"
|
|
12452
|
+
},
|
|
12453
|
+
{
|
|
12454
|
+
"name": "slider-tooltip-bg",
|
|
12455
|
+
"cssVar": "--slider-tooltip-bg",
|
|
12456
|
+
"type": "color",
|
|
12457
|
+
"description": "Slider tooltip bg per DES-1304 item 2.",
|
|
12458
|
+
"value": "oklch(100.00% 0.0000 0)"
|
|
12459
|
+
},
|
|
12460
|
+
{
|
|
12461
|
+
"name": "slider-tooltip-fg",
|
|
12462
|
+
"cssVar": "--slider-tooltip-fg",
|
|
12463
|
+
"type": "color",
|
|
12464
|
+
"value": "oklch(20.46% 0.0000 0)"
|
|
12465
|
+
},
|
|
12466
|
+
{
|
|
12467
|
+
"name": "slider-tooltip-radius",
|
|
12468
|
+
"cssVar": "--slider-tooltip-radius",
|
|
12469
|
+
"type": "dimension",
|
|
12470
|
+
"value": "4px"
|
|
10348
12471
|
},
|
|
10349
12472
|
{
|
|
10350
12473
|
"name": "slider-track-bg",
|
|
10351
12474
|
"cssVar": "--slider-track-bg",
|
|
10352
12475
|
"type": "color",
|
|
10353
|
-
"
|
|
12476
|
+
"description": "Track background aligned with Figma core/background/muted (gray) per Bowser audit Slider BUG-1 — pre-fix was oklch(87.82% 0.2037 137.75) (mint green, visual bug).",
|
|
12477
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
10354
12478
|
},
|
|
10355
12479
|
{
|
|
10356
12480
|
"name": "slider-track-height-lg",
|
|
10357
12481
|
"cssVar": "--slider-track-height-lg",
|
|
10358
12482
|
"type": "dimension",
|
|
10359
|
-
"
|
|
12483
|
+
"description": "Slider track lg 8px — scaled above Figma canonical md=6px.",
|
|
12484
|
+
"value": "8px"
|
|
10360
12485
|
},
|
|
10361
12486
|
{
|
|
10362
12487
|
"name": "slider-track-height-md",
|
|
10363
12488
|
"cssVar": "--slider-track-height-md",
|
|
10364
12489
|
"type": "dimension",
|
|
10365
|
-
"
|
|
12490
|
+
"description": "Slider track md 6px aligned with Figma canonical (frame 1400:10368, both Range variants = 6h) — pre-fix was 8px.",
|
|
12491
|
+
"value": "6px"
|
|
10366
12492
|
},
|
|
10367
12493
|
{
|
|
10368
12494
|
"name": "slider-track-height-sm",
|
|
10369
12495
|
"cssVar": "--slider-track-height-sm",
|
|
10370
12496
|
"type": "dimension",
|
|
10371
|
-
"
|
|
12497
|
+
"description": "Slider track sm 4px — scaled below Figma canonical md=6px.",
|
|
12498
|
+
"value": "4px"
|
|
10372
12499
|
},
|
|
10373
12500
|
{
|
|
10374
12501
|
"name": "spacer-size-2xl",
|
|
@@ -10465,7 +12592,8 @@
|
|
|
10465
12592
|
"name": "spinner-size-lg",
|
|
10466
12593
|
"cssVar": "--spinner-size-lg",
|
|
10467
12594
|
"type": "dimension",
|
|
10468
|
-
"
|
|
12595
|
+
"description": "Spinner lg 28px aligned with Figma canonical (components-spinner-skeleton.html) — pre-fix was 24px (spacing.6).",
|
|
12596
|
+
"value": "28px"
|
|
10469
12597
|
},
|
|
10470
12598
|
{
|
|
10471
12599
|
"name": "spinner-size-md",
|
|
@@ -10483,7 +12611,8 @@
|
|
|
10483
12611
|
"name": "spinner-size-xl",
|
|
10484
12612
|
"cssVar": "--spinner-size-xl",
|
|
10485
12613
|
"type": "dimension",
|
|
10486
|
-
"
|
|
12614
|
+
"description": "Spinner xl 40px aligned with Figma canonical (components-spinner-skeleton.html) — pre-fix was 32px (spacing.8).",
|
|
12615
|
+
"value": "40px"
|
|
10487
12616
|
},
|
|
10488
12617
|
{
|
|
10489
12618
|
"name": "spinner-size-xs",
|
|
@@ -10647,6 +12776,13 @@
|
|
|
10647
12776
|
"type": "color",
|
|
10648
12777
|
"value": "oklch(45% 0.15 250)"
|
|
10649
12778
|
},
|
|
12779
|
+
{
|
|
12780
|
+
"name": "status-indicator-dot-color-destructive",
|
|
12781
|
+
"cssVar": "--status-indicator-dot-color-destructive",
|
|
12782
|
+
"type": "color",
|
|
12783
|
+
"description": "Alias for error — aligns naming with Figma canonical (skill uses `destructive`, code historically used `error`).",
|
|
12784
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
12785
|
+
},
|
|
10650
12786
|
{
|
|
10651
12787
|
"name": "status-indicator-dot-color-error",
|
|
10652
12788
|
"cssVar": "--status-indicator-dot-color-error",
|
|
@@ -10663,7 +12799,8 @@
|
|
|
10663
12799
|
"name": "status-indicator-dot-color-neutral",
|
|
10664
12800
|
"cssVar": "--status-indicator-dot-color-neutral",
|
|
10665
12801
|
"type": "color",
|
|
10666
|
-
"
|
|
12802
|
+
"description": "Neutral status uses light gray border token (L ~92%) per Bowser audit StatusIndicator SEVERE — pre-fix was muted-foreground (L 55%, too dark, visually active vs inactive).",
|
|
12803
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
10667
12804
|
},
|
|
10668
12805
|
{
|
|
10669
12806
|
"name": "status-indicator-dot-color-success",
|
|
@@ -10677,6 +12814,13 @@
|
|
|
10677
12814
|
"type": "color",
|
|
10678
12815
|
"value": "oklch(86.06% 0.1731 91.94)"
|
|
10679
12816
|
},
|
|
12817
|
+
{
|
|
12818
|
+
"name": "status-indicator-dot-size-2xl",
|
|
12819
|
+
"cssVar": "--status-indicator-dot-size-2xl",
|
|
12820
|
+
"type": "dimension",
|
|
12821
|
+
"description": "StatusIndicator dot 2xl (16px) added per DES-1080.",
|
|
12822
|
+
"value": "16px"
|
|
12823
|
+
},
|
|
10680
12824
|
{
|
|
10681
12825
|
"name": "status-indicator-dot-size-default",
|
|
10682
12826
|
"cssVar": "--status-indicator-dot-size-default",
|
|
@@ -10695,6 +12839,13 @@
|
|
|
10695
12839
|
"type": "dimension",
|
|
10696
12840
|
"value": "8px"
|
|
10697
12841
|
},
|
|
12842
|
+
{
|
|
12843
|
+
"name": "status-indicator-dot-size-xl",
|
|
12844
|
+
"cssVar": "--status-indicator-dot-size-xl",
|
|
12845
|
+
"type": "dimension",
|
|
12846
|
+
"description": "StatusIndicator dot xl (14px) added per DES-1080.",
|
|
12847
|
+
"value": "14px"
|
|
12848
|
+
},
|
|
10698
12849
|
{
|
|
10699
12850
|
"name": "status-indicator-dot-size-xs",
|
|
10700
12851
|
"cssVar": "--status-indicator-dot-size-xs",
|
|
@@ -10767,6 +12918,48 @@
|
|
|
10767
12918
|
"type": "color",
|
|
10768
12919
|
"value": "oklch(45% 0.18 25)"
|
|
10769
12920
|
},
|
|
12921
|
+
{
|
|
12922
|
+
"name": "stepper-connector-offset-default",
|
|
12923
|
+
"cssVar": "--stepper-connector-offset-default",
|
|
12924
|
+
"type": "dimension",
|
|
12925
|
+
"description": "Horizontal connector offset for default size — half of step indicator (48px default circle).",
|
|
12926
|
+
"value": "24px"
|
|
12927
|
+
},
|
|
12928
|
+
{
|
|
12929
|
+
"name": "stepper-connector-offset-lg",
|
|
12930
|
+
"cssVar": "--stepper-connector-offset-lg",
|
|
12931
|
+
"type": "dimension",
|
|
12932
|
+
"description": "Horizontal connector offset for lg size — half of step indicator (60px lg circle).",
|
|
12933
|
+
"value": "30px"
|
|
12934
|
+
},
|
|
12935
|
+
{
|
|
12936
|
+
"name": "stepper-connector-offset-sm",
|
|
12937
|
+
"cssVar": "--stepper-connector-offset-sm",
|
|
12938
|
+
"type": "dimension",
|
|
12939
|
+
"description": "Horizontal connector offset for sm size — half of step indicator (40px sm circle).",
|
|
12940
|
+
"value": "20px"
|
|
12941
|
+
},
|
|
12942
|
+
{
|
|
12943
|
+
"name": "stepper-connector-vertical-height-offset-default",
|
|
12944
|
+
"cssVar": "--stepper-connector-vertical-height-offset-default",
|
|
12945
|
+
"type": "dimension",
|
|
12946
|
+
"description": "Vertical connector calc subtraction for default size.",
|
|
12947
|
+
"value": "48px"
|
|
12948
|
+
},
|
|
12949
|
+
{
|
|
12950
|
+
"name": "stepper-connector-vertical-height-offset-lg",
|
|
12951
|
+
"cssVar": "--stepper-connector-vertical-height-offset-lg",
|
|
12952
|
+
"type": "dimension",
|
|
12953
|
+
"description": "Vertical connector calc subtraction for lg size.",
|
|
12954
|
+
"value": "56px"
|
|
12955
|
+
},
|
|
12956
|
+
{
|
|
12957
|
+
"name": "stepper-connector-vertical-height-offset-sm",
|
|
12958
|
+
"cssVar": "--stepper-connector-vertical-height-offset-sm",
|
|
12959
|
+
"type": "dimension",
|
|
12960
|
+
"description": "Vertical connector calc subtraction for sm — equals step indicator height.",
|
|
12961
|
+
"value": "40px"
|
|
12962
|
+
},
|
|
10770
12963
|
{
|
|
10771
12964
|
"name": "stepper-indicator-background-active",
|
|
10772
12965
|
"cssVar": "--stepper-indicator-background-active",
|
|
@@ -10976,6 +13169,26 @@
|
|
|
10976
13169
|
"cssVar": "--switch-track-radius",
|
|
10977
13170
|
"value": "9999px"
|
|
10978
13171
|
},
|
|
13172
|
+
{
|
|
13173
|
+
"name": "switch-track-ring-ghost",
|
|
13174
|
+
"cssVar": "--switch-track-ring-ghost",
|
|
13175
|
+
"type": "color",
|
|
13176
|
+
"description": "Switch track focus ring ghost variant per DES-1308.",
|
|
13177
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
13178
|
+
},
|
|
13179
|
+
{
|
|
13180
|
+
"name": "switch-track-ring-primary",
|
|
13181
|
+
"cssVar": "--switch-track-ring-primary",
|
|
13182
|
+
"type": "color",
|
|
13183
|
+
"description": "Switch track focus ring primary per DES-1308.",
|
|
13184
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
13185
|
+
},
|
|
13186
|
+
{
|
|
13187
|
+
"name": "switch-track-ring-width",
|
|
13188
|
+
"cssVar": "--switch-track-ring-width",
|
|
13189
|
+
"type": "dimension",
|
|
13190
|
+
"value": "3px"
|
|
13191
|
+
},
|
|
10979
13192
|
{
|
|
10980
13193
|
"name": "switch-track-shadow",
|
|
10981
13194
|
"cssVar": "--switch-track-shadow",
|
|
@@ -11131,10 +13344,35 @@
|
|
|
11131
13344
|
"cssVar": "--tabs-trigger-active-shadow",
|
|
11132
13345
|
"value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
|
|
11133
13346
|
},
|
|
13347
|
+
{
|
|
13348
|
+
"name": "tabs-trigger-badge-bg",
|
|
13349
|
+
"cssVar": "--tabs-trigger-badge-bg",
|
|
13350
|
+
"type": "color",
|
|
13351
|
+
"description": "Tabs trigger badge bg per DES-1310 item 5.",
|
|
13352
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
13353
|
+
},
|
|
13354
|
+
{
|
|
13355
|
+
"name": "tabs-trigger-badge-fg",
|
|
13356
|
+
"cssVar": "--tabs-trigger-badge-fg",
|
|
13357
|
+
"type": "color",
|
|
13358
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
13359
|
+
},
|
|
13360
|
+
{
|
|
13361
|
+
"name": "tabs-trigger-badge-padding-x",
|
|
13362
|
+
"cssVar": "--tabs-trigger-badge-padding-x",
|
|
13363
|
+
"type": "dimension",
|
|
13364
|
+
"value": "6px"
|
|
13365
|
+
},
|
|
13366
|
+
{
|
|
13367
|
+
"name": "tabs-trigger-badge-radius",
|
|
13368
|
+
"cssVar": "--tabs-trigger-badge-radius",
|
|
13369
|
+
"type": "dimension",
|
|
13370
|
+
"value": "9999px"
|
|
13371
|
+
},
|
|
11134
13372
|
{
|
|
11135
13373
|
"name": "tabs-trigger-base-gap",
|
|
11136
13374
|
"cssVar": "--tabs-trigger-base-gap",
|
|
11137
|
-
"value": "
|
|
13375
|
+
"value": "8px"
|
|
11138
13376
|
},
|
|
11139
13377
|
{
|
|
11140
13378
|
"name": "tabs-trigger-base-padding-x",
|
|
@@ -11150,7 +13388,7 @@
|
|
|
11150
13388
|
"name": "tabs-trigger-base-radius",
|
|
11151
13389
|
"cssVar": "--tabs-trigger-base-radius",
|
|
11152
13390
|
"type": "dimension",
|
|
11153
|
-
"value": "
|
|
13391
|
+
"value": "4px"
|
|
11154
13392
|
},
|
|
11155
13393
|
{
|
|
11156
13394
|
"name": "tabs-trigger-base-text",
|
|
@@ -11161,7 +13399,8 @@
|
|
|
11161
13399
|
{
|
|
11162
13400
|
"name": "tabs-trigger-base-weight",
|
|
11163
13401
|
"cssVar": "--tabs-trigger-base-weight",
|
|
11164
|
-
"
|
|
13402
|
+
"description": "Tabs trigger weight aligned with Figma Paragraph/P3 normal (400) per DES-1310 — pre-fix was medium (500).",
|
|
13403
|
+
"value": "400"
|
|
11165
13404
|
},
|
|
11166
13405
|
{
|
|
11167
13406
|
"name": "tabs-trigger-focus-ring",
|
|
@@ -11173,7 +13412,8 @@
|
|
|
11173
13412
|
"name": "tabs-trigger-inactive-fg",
|
|
11174
13413
|
"cssVar": "--tabs-trigger-inactive-fg",
|
|
11175
13414
|
"type": "color",
|
|
11176
|
-
"
|
|
13415
|
+
"description": "Tabs trigger inactive fg aligned with Figma surface-foreground per DES-1310 item 7.",
|
|
13416
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
11177
13417
|
},
|
|
11178
13418
|
{
|
|
11179
13419
|
"name": "tag-checkbox-bg-checked",
|
|
@@ -11235,12 +13475,33 @@
|
|
|
11235
13475
|
"type": "color",
|
|
11236
13476
|
"value": "oklch(92.19% 0.0000 0)"
|
|
11237
13477
|
},
|
|
13478
|
+
{
|
|
13479
|
+
"name": "tag-color-dot",
|
|
13480
|
+
"cssVar": "--tag-color-dot",
|
|
13481
|
+
"type": "color",
|
|
13482
|
+
"description": "Tag dot indicator color (mint primary). Per Bowser audit Tag BUG-3 — pre-fix was muted-foreground (gray).",
|
|
13483
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
13484
|
+
},
|
|
11238
13485
|
{
|
|
11239
13486
|
"name": "tag-color-text-default",
|
|
11240
13487
|
"cssVar": "--tag-color-text-default",
|
|
11241
13488
|
"type": "color",
|
|
11242
13489
|
"value": "oklch(14.48% 0.0000 0)"
|
|
11243
13490
|
},
|
|
13491
|
+
{
|
|
13492
|
+
"name": "tag-count-radius",
|
|
13493
|
+
"cssVar": "--tag-count-radius",
|
|
13494
|
+
"type": "dimension",
|
|
13495
|
+
"description": "Tag count pill border-radius. Per Bowser audit Tag BUG-2 — pre-fix was rounded-sm utility resolving to 0px.",
|
|
13496
|
+
"value": "4px"
|
|
13497
|
+
},
|
|
13498
|
+
{
|
|
13499
|
+
"name": "tag-radius",
|
|
13500
|
+
"cssVar": "--tag-radius",
|
|
13501
|
+
"type": "dimension",
|
|
13502
|
+
"description": "Tag border-radius aligned with Figma radius/md (8px) per Bowser audit Tag BUG-1 — pre-fix was rounded-md utility resolving to 0px.",
|
|
13503
|
+
"value": "8px"
|
|
13504
|
+
},
|
|
11244
13505
|
{
|
|
11245
13506
|
"name": "tag-size-checkbox-lg",
|
|
11246
13507
|
"cssVar": "--tag-size-checkbox-lg",
|
|
@@ -11559,12 +13820,26 @@
|
|
|
11559
13820
|
"type": "color",
|
|
11560
13821
|
"value": "oklch(97.02% 0.0000 0)"
|
|
11561
13822
|
},
|
|
13823
|
+
{
|
|
13824
|
+
"name": "textarea-bg-filled",
|
|
13825
|
+
"cssVar": "--textarea-bg-filled",
|
|
13826
|
+
"type": "color",
|
|
13827
|
+
"description": "Textarea filled variant bg per DES-1316 item 4.",
|
|
13828
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
13829
|
+
},
|
|
11562
13830
|
{
|
|
11563
13831
|
"name": "textarea-border-default",
|
|
11564
13832
|
"cssVar": "--textarea-border-default",
|
|
11565
13833
|
"type": "color",
|
|
11566
13834
|
"value": "oklch(92.19% 0.0000 0)"
|
|
11567
13835
|
},
|
|
13836
|
+
{
|
|
13837
|
+
"name": "textarea-border-disabled",
|
|
13838
|
+
"cssVar": "--textarea-border-disabled",
|
|
13839
|
+
"type": "color",
|
|
13840
|
+
"description": "Textarea disabled border color per DES-1316 item 2.",
|
|
13841
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
13842
|
+
},
|
|
11568
13843
|
{
|
|
11569
13844
|
"name": "textarea-border-error",
|
|
11570
13845
|
"cssVar": "--textarea-border-error",
|
|
@@ -11604,7 +13879,22 @@
|
|
|
11604
13879
|
{
|
|
11605
13880
|
"name": "textarea-radius",
|
|
11606
13881
|
"cssVar": "--textarea-radius",
|
|
11607
|
-
"
|
|
13882
|
+
"type": "dimension",
|
|
13883
|
+
"description": "Textarea border-radius aligned with Figma radius/md (8px) per Bowser audit — pre-fix was 0.375rem (6px).",
|
|
13884
|
+
"value": "8px"
|
|
13885
|
+
},
|
|
13886
|
+
{
|
|
13887
|
+
"name": "textarea-ring-primary",
|
|
13888
|
+
"cssVar": "--textarea-ring-primary",
|
|
13889
|
+
"type": "color",
|
|
13890
|
+
"description": "Textarea focus ring primary per DES-1316 item 3.",
|
|
13891
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
13892
|
+
},
|
|
13893
|
+
{
|
|
13894
|
+
"name": "textarea-ring-width",
|
|
13895
|
+
"cssVar": "--textarea-ring-width",
|
|
13896
|
+
"type": "dimension",
|
|
13897
|
+
"value": "3px"
|
|
11608
13898
|
},
|
|
11609
13899
|
{
|
|
11610
13900
|
"name": "textarea-shadow",
|
|
@@ -11615,7 +13905,8 @@
|
|
|
11615
13905
|
"name": "textarea-size-lg-min-h",
|
|
11616
13906
|
"cssVar": "--textarea-size-lg-min-h",
|
|
11617
13907
|
"type": "dimension",
|
|
11618
|
-
"
|
|
13908
|
+
"description": "Textarea lg min-height shifted to 160px (was 96px) to align scale with Figma canonical md=128px.",
|
|
13909
|
+
"value": "160px"
|
|
11619
13910
|
},
|
|
11620
13911
|
{
|
|
11621
13912
|
"name": "textarea-size-lg-px",
|
|
@@ -11637,7 +13928,8 @@
|
|
|
11637
13928
|
"name": "textarea-size-md-min-h",
|
|
11638
13929
|
"cssVar": "--textarea-size-md-min-h",
|
|
11639
13930
|
"type": "dimension",
|
|
11640
|
-
"
|
|
13931
|
+
"description": "Textarea md min-height 128px aligned with Figma canonical (frame 1386:13761) — pre-fix was 80px.",
|
|
13932
|
+
"value": "128px"
|
|
11641
13933
|
},
|
|
11642
13934
|
{
|
|
11643
13935
|
"name": "textarea-size-md-px",
|
|
@@ -11659,7 +13951,8 @@
|
|
|
11659
13951
|
"name": "textarea-size-sm-min-h",
|
|
11660
13952
|
"cssVar": "--textarea-size-sm-min-h",
|
|
11661
13953
|
"type": "dimension",
|
|
11662
|
-
"
|
|
13954
|
+
"description": "Textarea sm min-height shifted to 96px (was 64px) to align scale with Figma canonical md=128px.",
|
|
13955
|
+
"value": "96px"
|
|
11663
13956
|
},
|
|
11664
13957
|
{
|
|
11665
13958
|
"name": "textarea-size-sm-px",
|
|
@@ -11686,20 +13979,22 @@
|
|
|
11686
13979
|
{
|
|
11687
13980
|
"name": "thumbnail-rounded-default",
|
|
11688
13981
|
"cssVar": "--thumbnail-rounded-default",
|
|
11689
|
-
"type": "
|
|
11690
|
-
"
|
|
13982
|
+
"type": "dimension",
|
|
13983
|
+
"description": "Thumbnail default radius aligned with Figma 8px per Bowser audit Thumbnail — pre-fix was 0.375rem (6px). Also fixed $type.",
|
|
13984
|
+
"value": "8px"
|
|
11691
13985
|
},
|
|
11692
13986
|
{
|
|
11693
13987
|
"name": "thumbnail-rounded-full",
|
|
11694
13988
|
"cssVar": "--thumbnail-rounded-full",
|
|
11695
|
-
"type": "
|
|
13989
|
+
"type": "dimension",
|
|
11696
13990
|
"value": "9999px"
|
|
11697
13991
|
},
|
|
11698
13992
|
{
|
|
11699
13993
|
"name": "thumbnail-rounded-lg",
|
|
11700
13994
|
"cssVar": "--thumbnail-rounded-lg",
|
|
11701
|
-
"type": "
|
|
11702
|
-
"
|
|
13995
|
+
"type": "dimension",
|
|
13996
|
+
"description": "Thumbnail lg radius aligned with Figma 12px per Bowser audit Thumbnail — pre-fix was 0.5rem (8px). Also fixed $type.",
|
|
13997
|
+
"value": "12px"
|
|
11703
13998
|
},
|
|
11704
13999
|
{
|
|
11705
14000
|
"name": "thumbnail-rounded-none",
|
|
@@ -11710,8 +14005,9 @@
|
|
|
11710
14005
|
{
|
|
11711
14006
|
"name": "thumbnail-rounded-sm",
|
|
11712
14007
|
"cssVar": "--thumbnail-rounded-sm",
|
|
11713
|
-
"type": "
|
|
11714
|
-
"
|
|
14008
|
+
"type": "dimension",
|
|
14009
|
+
"description": "Thumbnail sm radius aligned with Figma 4px per Bowser audit Thumbnail — pre-fix was 0.125rem (2px). Also fixed $type from color to dimension.",
|
|
14010
|
+
"value": "4px"
|
|
11715
14011
|
},
|
|
11716
14012
|
{
|
|
11717
14013
|
"name": "thumbnail-size-default-width",
|
|
@@ -11741,30 +14037,56 @@
|
|
|
11741
14037
|
"name": "thumbnail-size-xs-width",
|
|
11742
14038
|
"cssVar": "--thumbnail-size-xs-width",
|
|
11743
14039
|
"type": "dimension",
|
|
11744
|
-
"
|
|
14040
|
+
"description": "Thumbnail xs 48px aligned with Figma canonical (frame 1372:2929) — pre-fix was spacing.10 (40px).",
|
|
14041
|
+
"value": "48px"
|
|
11745
14042
|
},
|
|
11746
14043
|
{
|
|
11747
|
-
"name": "time-picker-
|
|
11748
|
-
"cssVar": "--time-picker-
|
|
11749
|
-
"
|
|
14044
|
+
"name": "time-picker-focus-ring-destructive",
|
|
14045
|
+
"cssVar": "--time-picker-focus-ring-destructive",
|
|
14046
|
+
"type": "color",
|
|
14047
|
+
"description": "TimePicker destructive focus ring (invalid state) per DES-1320.",
|
|
14048
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
14049
|
+
},
|
|
14050
|
+
{
|
|
14051
|
+
"name": "time-picker-focus-ring-primary",
|
|
14052
|
+
"cssVar": "--time-picker-focus-ring-primary",
|
|
14053
|
+
"type": "color",
|
|
14054
|
+
"description": "TimePicker primary focus ring color per DES-1320.",
|
|
14055
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
11750
14056
|
},
|
|
11751
14057
|
{
|
|
11752
|
-
"name": "time-picker-
|
|
11753
|
-
"cssVar": "--time-picker-
|
|
14058
|
+
"name": "time-picker-focus-ring-width",
|
|
14059
|
+
"cssVar": "--time-picker-focus-ring-width",
|
|
11754
14060
|
"type": "dimension",
|
|
11755
|
-
"value": "
|
|
14061
|
+
"value": "3px"
|
|
11756
14062
|
},
|
|
11757
14063
|
{
|
|
11758
|
-
"name": "time-picker-
|
|
11759
|
-
"cssVar": "--time-picker-
|
|
14064
|
+
"name": "time-picker-trigger-height-lg",
|
|
14065
|
+
"cssVar": "--time-picker-trigger-height-lg",
|
|
11760
14066
|
"type": "dimension",
|
|
11761
|
-
"
|
|
14067
|
+
"description": "TimePicker trigger lg height (44px), aligned with DatePicker pattern.",
|
|
14068
|
+
"value": "44px"
|
|
11762
14069
|
},
|
|
11763
14070
|
{
|
|
11764
|
-
"name": "time-picker-
|
|
11765
|
-
"cssVar": "--time-picker-
|
|
14071
|
+
"name": "time-picker-trigger-height-md",
|
|
14072
|
+
"cssVar": "--time-picker-trigger-height-md",
|
|
11766
14073
|
"type": "dimension",
|
|
11767
|
-
"
|
|
14074
|
+
"description": "TimePicker trigger md height 40px aligned with Figma canonical (frame 1400:10543 default = 40h) — pre-fix was h-9 (36px). Matches DatePicker.",
|
|
14075
|
+
"value": "40px"
|
|
14076
|
+
},
|
|
14077
|
+
{
|
|
14078
|
+
"name": "time-picker-trigger-height-sm",
|
|
14079
|
+
"cssVar": "--time-picker-trigger-height-sm",
|
|
14080
|
+
"type": "dimension",
|
|
14081
|
+
"description": "TimePicker trigger sm height (36px), aligned with DatePicker pattern.",
|
|
14082
|
+
"value": "36px"
|
|
14083
|
+
},
|
|
14084
|
+
{
|
|
14085
|
+
"name": "time-picker-trigger-radius",
|
|
14086
|
+
"cssVar": "--time-picker-trigger-radius",
|
|
14087
|
+
"type": "dimension",
|
|
14088
|
+
"description": "Trigger border-radius aligned with Figma radius/md (8px) per Bowser audit TimePicker — was missing, code used rounded-md utility resolving to 0px.",
|
|
14089
|
+
"value": "8px"
|
|
11768
14090
|
},
|
|
11769
14091
|
{
|
|
11770
14092
|
"name": "timeline-connector-offset-compact",
|
|
@@ -11812,7 +14134,8 @@
|
|
|
11812
14134
|
"name": "timeline-connector-width",
|
|
11813
14135
|
"cssVar": "--timeline-connector-width",
|
|
11814
14136
|
"type": "dimension",
|
|
11815
|
-
"
|
|
14137
|
+
"description": "Timeline connector width aligned with Figma separator 1px per DES-1318 item 3 — pre-fix was 2px.",
|
|
14138
|
+
"value": "1px"
|
|
11816
14139
|
},
|
|
11817
14140
|
{
|
|
11818
14141
|
"name": "timeline-item-gap-compact",
|
|
@@ -11842,13 +14165,85 @@
|
|
|
11842
14165
|
"name": "timeline-marker-border-width",
|
|
11843
14166
|
"cssVar": "--timeline-marker-border-width",
|
|
11844
14167
|
"type": "dimension",
|
|
11845
|
-
"
|
|
14168
|
+
"description": "Timeline marker border width aligned with Figma 1px per DES-1318 item 2 — pre-fix was 2px.",
|
|
14169
|
+
"value": "1px"
|
|
14170
|
+
},
|
|
14171
|
+
{
|
|
14172
|
+
"name": "timeline-marker-color-default",
|
|
14173
|
+
"cssVar": "--timeline-marker-color-default",
|
|
14174
|
+
"type": "color",
|
|
14175
|
+
"description": "Timeline marker default color per DES-1318 item 7.",
|
|
14176
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
14177
|
+
},
|
|
14178
|
+
{
|
|
14179
|
+
"name": "timeline-marker-color-error",
|
|
14180
|
+
"cssVar": "--timeline-marker-color-error",
|
|
14181
|
+
"type": "color",
|
|
14182
|
+
"description": "Timeline marker error color per DES-1318 item 7.",
|
|
14183
|
+
"value": "oklch(63.68% 0.2078 25.33)"
|
|
14184
|
+
},
|
|
14185
|
+
{
|
|
14186
|
+
"name": "timeline-marker-color-muted",
|
|
14187
|
+
"cssVar": "--timeline-marker-color-muted",
|
|
14188
|
+
"type": "color",
|
|
14189
|
+
"description": "Timeline marker muted (pending) color per DES-1318 item 7.",
|
|
14190
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
14191
|
+
},
|
|
14192
|
+
{
|
|
14193
|
+
"name": "timeline-marker-color-success",
|
|
14194
|
+
"cssVar": "--timeline-marker-color-success",
|
|
14195
|
+
"type": "color",
|
|
14196
|
+
"description": "Timeline marker success color per DES-1318 item 7.",
|
|
14197
|
+
"value": "oklch(62.71% 0.1699 149.21)"
|
|
14198
|
+
},
|
|
14199
|
+
{
|
|
14200
|
+
"name": "timeline-marker-color-warning",
|
|
14201
|
+
"cssVar": "--timeline-marker-color-warning",
|
|
14202
|
+
"type": "color",
|
|
14203
|
+
"description": "Timeline marker warning color per DES-1318 item 7.",
|
|
14204
|
+
"value": "oklch(86.06% 0.1731 91.94)"
|
|
14205
|
+
},
|
|
14206
|
+
{
|
|
14207
|
+
"name": "timeline-marker-disabled-bg",
|
|
14208
|
+
"cssVar": "--timeline-marker-disabled-bg",
|
|
14209
|
+
"type": "color",
|
|
14210
|
+
"description": "Timeline marker disabled bg per DES-1318 item 4 (triplet).",
|
|
14211
|
+
"value": "oklch(97.02% 0.0000 0)"
|
|
14212
|
+
},
|
|
14213
|
+
{
|
|
14214
|
+
"name": "timeline-marker-disabled-border",
|
|
14215
|
+
"cssVar": "--timeline-marker-disabled-border",
|
|
14216
|
+
"type": "color",
|
|
14217
|
+
"description": "Timeline marker disabled border per DES-1318 item 4 (triplet).",
|
|
14218
|
+
"value": "oklch(92.19% 0.0000 0)"
|
|
14219
|
+
},
|
|
14220
|
+
{
|
|
14221
|
+
"name": "timeline-marker-disabled-fg",
|
|
14222
|
+
"cssVar": "--timeline-marker-disabled-fg",
|
|
14223
|
+
"type": "color",
|
|
14224
|
+
"description": "Timeline marker disabled fg per DES-1318 item 4 (triplet).",
|
|
14225
|
+
"value": "oklch(55.55% 0.0000 0)"
|
|
14226
|
+
},
|
|
14227
|
+
{
|
|
14228
|
+
"name": "timeline-marker-focus-ring-color",
|
|
14229
|
+
"cssVar": "--timeline-marker-focus-ring-color",
|
|
14230
|
+
"type": "color",
|
|
14231
|
+
"description": "Timeline marker focus-ring per DES-1318 item 5.",
|
|
14232
|
+
"value": "oklch(81.75% 0.1821 159.79)"
|
|
14233
|
+
},
|
|
14234
|
+
{
|
|
14235
|
+
"name": "timeline-marker-focus-ring-width",
|
|
14236
|
+
"cssVar": "--timeline-marker-focus-ring-width",
|
|
14237
|
+
"type": "dimension",
|
|
14238
|
+
"description": "Timeline marker focus-ring width per DES-1318 item 5 — matches Figma Focus rings/ring-primary spread 4.",
|
|
14239
|
+
"value": "4px"
|
|
11846
14240
|
},
|
|
11847
14241
|
{
|
|
11848
14242
|
"name": "timeline-marker-size-default",
|
|
11849
14243
|
"cssVar": "--timeline-marker-size-default",
|
|
11850
14244
|
"type": "dimension",
|
|
11851
|
-
"
|
|
14245
|
+
"description": "Timeline marker default aligned with Figma StatusDot 16px per DES-1318 — pre-fix was spacing.3 (12px).",
|
|
14246
|
+
"value": "16px"
|
|
11852
14247
|
},
|
|
11853
14248
|
{
|
|
11854
14249
|
"name": "timeline-marker-size-icon-default",
|
|
@@ -11872,13 +14267,15 @@
|
|
|
11872
14267
|
"name": "timeline-marker-size-lg",
|
|
11873
14268
|
"cssVar": "--timeline-marker-size-lg",
|
|
11874
14269
|
"type": "dimension",
|
|
11875
|
-
"
|
|
14270
|
+
"description": "Timeline marker lg aligned per DES-1318 cascade — pre-fix was spacing.4 (16px).",
|
|
14271
|
+
"value": "20px"
|
|
11876
14272
|
},
|
|
11877
14273
|
{
|
|
11878
14274
|
"name": "timeline-marker-size-sm",
|
|
11879
14275
|
"cssVar": "--timeline-marker-size-sm",
|
|
11880
14276
|
"type": "dimension",
|
|
11881
|
-
"
|
|
14277
|
+
"description": "Timeline marker sm aligned per DES-1318 cascade — pre-fix was spacing.2 (8px).",
|
|
14278
|
+
"value": "12px"
|
|
11882
14279
|
},
|
|
11883
14280
|
{
|
|
11884
14281
|
"name": "timeline-root-gap-compact",
|
|
@@ -11973,13 +14370,15 @@
|
|
|
11973
14370
|
"name": "toggle-root-border-radius-pill",
|
|
11974
14371
|
"cssVar": "--toggle-root-border-radius-pill",
|
|
11975
14372
|
"type": "dimension",
|
|
14373
|
+
"description": "Pill shape (code-only — Figma uses radius/md/sm). Maintained for backward compatibility.",
|
|
11976
14374
|
"value": "9999px"
|
|
11977
14375
|
},
|
|
11978
14376
|
{
|
|
11979
14377
|
"name": "toggle-root-border-radius-rounded",
|
|
11980
14378
|
"cssVar": "--toggle-root-border-radius-rounded",
|
|
11981
14379
|
"type": "dimension",
|
|
11982
|
-
"
|
|
14380
|
+
"description": "Rounded shape aligned with Figma radius/md (8px) per Bowser audit Toggle DES-932 cascade — pre-fix was 0.375rem (6px).",
|
|
14381
|
+
"value": "8px"
|
|
11983
14382
|
},
|
|
11984
14383
|
{
|
|
11985
14384
|
"name": "toggle-root-border-width",
|
|
@@ -12062,13 +14461,14 @@
|
|
|
12062
14461
|
"name": "toggle-size-sm-height",
|
|
12063
14462
|
"cssVar": "--toggle-size-sm-height",
|
|
12064
14463
|
"type": "dimension",
|
|
12065
|
-
"
|
|
14464
|
+
"description": "Toggle sm height 24px (spacing.6) aligned with Figma per Bowser audit — pre-fix was spacing.8 (32px).",
|
|
14465
|
+
"value": "24px"
|
|
12066
14466
|
},
|
|
12067
14467
|
{
|
|
12068
14468
|
"name": "toggle-size-sm-min-width",
|
|
12069
14469
|
"cssVar": "--toggle-size-sm-min-width",
|
|
12070
14470
|
"type": "dimension",
|
|
12071
|
-
"value": "
|
|
14471
|
+
"value": "24px"
|
|
12072
14472
|
},
|
|
12073
14473
|
{
|
|
12074
14474
|
"name": "toggle-size-sm-padding-x",
|
|
@@ -12092,7 +14492,7 @@
|
|
|
12092
14492
|
"name": "toggle-variant-default-bg-on",
|
|
12093
14493
|
"cssVar": "--toggle-variant-default-bg-on",
|
|
12094
14494
|
"type": "color",
|
|
12095
|
-
"value": "oklch(
|
|
14495
|
+
"value": "oklch(95.21% 0.0467 171.12)"
|
|
12096
14496
|
},
|
|
12097
14497
|
{
|
|
12098
14498
|
"name": "toggle-variant-default-border",
|
|
@@ -12116,7 +14516,7 @@
|
|
|
12116
14516
|
"name": "toggle-variant-default-color-on",
|
|
12117
14517
|
"cssVar": "--toggle-variant-default-color-on",
|
|
12118
14518
|
"type": "color",
|
|
12119
|
-
"value": "oklch(
|
|
14519
|
+
"value": "oklch(14.48% 0.0000 0)"
|
|
12120
14520
|
},
|
|
12121
14521
|
{
|
|
12122
14522
|
"name": "toggle-variant-outline-bg-default",
|
|
@@ -12182,7 +14582,8 @@
|
|
|
12182
14582
|
"name": "toolbar-button-height",
|
|
12183
14583
|
"cssVar": "--toolbar-button-height",
|
|
12184
14584
|
"type": "dimension",
|
|
12185
|
-
"
|
|
14585
|
+
"description": "Toolbar button height aligned with Figma height/h-8 (32px) per DES-1324 item 3 — pre-fix was spacing.9 (36px).",
|
|
14586
|
+
"value": "32px"
|
|
12186
14587
|
},
|
|
12187
14588
|
{
|
|
12188
14589
|
"name": "toolbar-button-padding-x",
|
|
@@ -12194,12 +14595,14 @@
|
|
|
12194
14595
|
"name": "toolbar-button-radius",
|
|
12195
14596
|
"cssVar": "--toolbar-button-radius",
|
|
12196
14597
|
"type": "dimension",
|
|
12197
|
-
"
|
|
14598
|
+
"description": "Toolbar button radius aligned with Figma radius/md (8px) per DES-1324 — pre-fix was 0.375rem (6px).",
|
|
14599
|
+
"value": "8px"
|
|
12198
14600
|
},
|
|
12199
14601
|
{
|
|
12200
14602
|
"name": "toolbar-root-background",
|
|
12201
14603
|
"cssVar": "--toolbar-root-background",
|
|
12202
14604
|
"type": "color",
|
|
14605
|
+
"description": "Toolbar root bg aligned with Figma core/background/card per DES-1324 item 4.",
|
|
12203
14606
|
"value": "oklch(100.00% 0.0000 0)"
|
|
12204
14607
|
},
|
|
12205
14608
|
{
|
|
@@ -12220,11 +14623,26 @@
|
|
|
12220
14623
|
"type": "dimension",
|
|
12221
14624
|
"value": "8px"
|
|
12222
14625
|
},
|
|
14626
|
+
{
|
|
14627
|
+
"name": "toolbar-root-padding-x",
|
|
14628
|
+
"cssVar": "--toolbar-root-padding-x",
|
|
14629
|
+
"type": "dimension",
|
|
14630
|
+
"description": "Toolbar root horizontal padding split per DES-1324 item 6.",
|
|
14631
|
+
"value": "8px"
|
|
14632
|
+
},
|
|
14633
|
+
{
|
|
14634
|
+
"name": "toolbar-root-padding-y",
|
|
14635
|
+
"cssVar": "--toolbar-root-padding-y",
|
|
14636
|
+
"type": "dimension",
|
|
14637
|
+
"description": "Toolbar root vertical padding split per DES-1324 item 6.",
|
|
14638
|
+
"value": "8px"
|
|
14639
|
+
},
|
|
12223
14640
|
{
|
|
12224
14641
|
"name": "toolbar-root-radius",
|
|
12225
14642
|
"cssVar": "--toolbar-root-radius",
|
|
12226
14643
|
"type": "dimension",
|
|
12227
|
-
"
|
|
14644
|
+
"description": "Toolbar root radius aligned with Figma radius/md (8px) per DES-1324 — pre-fix was 0.375rem (6px).",
|
|
14645
|
+
"value": "8px"
|
|
12228
14646
|
},
|
|
12229
14647
|
{
|
|
12230
14648
|
"name": "toolbar-separator-color",
|
|
@@ -12268,6 +14686,12 @@
|
|
|
12268
14686
|
"type": "color",
|
|
12269
14687
|
"value": "oklch(100.00% 0.0000 0)"
|
|
12270
14688
|
},
|
|
14689
|
+
{
|
|
14690
|
+
"name": "tooltip-content-max-width",
|
|
14691
|
+
"cssVar": "--tooltip-content-max-width",
|
|
14692
|
+
"type": "dimension",
|
|
14693
|
+
"value": "24rem"
|
|
14694
|
+
},
|
|
12271
14695
|
{
|
|
12272
14696
|
"name": "tooltip-content-padding-x",
|
|
12273
14697
|
"cssVar": "--tooltip-content-padding-x",
|
|
@@ -12284,7 +14708,8 @@
|
|
|
12284
14708
|
"name": "tooltip-content-radius",
|
|
12285
14709
|
"cssVar": "--tooltip-content-radius",
|
|
12286
14710
|
"type": "dimension",
|
|
12287
|
-
"
|
|
14711
|
+
"description": "Tooltip radius 8px (radius/md) aligned with Figma canonical (frame 1420:9373) — pre-fix was radius-sm (4px).",
|
|
14712
|
+
"value": "8px"
|
|
12288
14713
|
},
|
|
12289
14714
|
{
|
|
12290
14715
|
"name": "tooltip-content-text-size",
|