@tempots/beatui 0.22.0 → 0.24.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/README.md +9 -0
- package/dist/{2019-DsAbc1I5.cjs → 2019-7ojCcWUJ.cjs} +1 -1
- package/dist/{2019-BD_R8GCb.js → 2019-JwkYbae8.js} +2 -2
- package/dist/{2020-j6NLRYni.cjs → 2020-BLYgDBO4.cjs} +1 -1
- package/dist/{2020-DZOE7XZH.js → 2020-kK0rQWn9.js} +2 -2
- package/dist/{ar-CYAprS9_.cjs → ar-BAb4yHZS.cjs} +1 -1
- package/dist/{ar-DuYtkwHz.js → ar-BgrUqaxG.js} +1 -1
- package/dist/auth/index.cjs.js +1 -1
- package/dist/auth/index.es.js +3 -3
- package/dist/beatui.css +610 -394
- package/dist/beatui.tailwind.css +606 -394
- package/dist/{colors-B8HoRLA_.cjs → colors-Qc1mmmfr.cjs} +1 -1
- package/dist/{colors-5Nwx_gSj.js → colors-WfmhQ5e1.js} +63 -67
- package/dist/{de-BSxDfb1B.js → de-D_sdCcAw.js} +1 -1
- package/dist/{de-rQvC-Ydh.cjs → de-Dn2CdXgD.cjs} +1 -1
- package/dist/{es-BvmzhRc0.cjs → es-CEPxKSog.cjs} +1 -1
- package/dist/{es-CAIPTBfa.js → es-DczvLqEV.js} +1 -1
- package/dist/{fa-COTldXuh.js → fa-DhPP5Tgo.js} +1 -1
- package/dist/{fa-B3IJgHCh.cjs → fa-NvkKjIQ6.cjs} +1 -1
- package/dist/{fr-Djxzcm-x.js → fr-D3WwoeQg.js} +1 -1
- package/dist/{fr-C9hsLGOb.cjs → fr-cR59lx1A.cjs} +1 -1
- package/dist/{he-C_CvtpO2.js → he-CFhi-6Rs.js} +1 -1
- package/dist/{he-CHrcixO3.cjs → he-CxSHPJMg.cjs} +1 -1
- package/dist/{hi-C47vc5OG.js → hi-Cqy8JcS7.js} +1 -1
- package/dist/{hi-CpbCblie.cjs → hi-DLnz3lCX.cjs} +1 -1
- package/dist/{index-CeyxEbJL.cjs → index-0nXL1jt0.cjs} +1 -1
- package/dist/{index-C0yFCSoy.cjs → index-4MNPHZD0.cjs} +1 -1
- package/dist/{index-YbpU8b-b.cjs → index-4pbqdHdu.cjs} +1 -1
- package/dist/{index-m-1yJOxv.js → index-5kvan4pZ.js} +3 -3
- package/dist/{index--c2sxg96.js → index-8xL7lFvb.js} +2 -2
- package/dist/{index-KlPMACee.js → index-B8jOeOOB.js} +2 -2
- package/dist/{index-CW3QYddJ.js → index-BCaOVY88.js} +2 -2
- package/dist/{index-CsPpB1Kw.js → index-BICIDfB6.js} +1 -1
- package/dist/{index-BNQL8moK.js → index-BKHqr1z2.js} +2 -2
- package/dist/{index-BiHxJSI9.js → index-BSaEXg56.js} +3 -3
- package/dist/{index-B8EM1O9d.cjs → index-BSfK-Qwf.cjs} +1 -1
- package/dist/{index-SP-G4Erl.cjs → index-Bc-5l3Cz.cjs} +1 -1
- package/dist/{index-CjQ-nqcq.js → index-BeoVum6H.js} +1 -1
- package/dist/{index-BJZGXsLQ.cjs → index-Bk0BtvLD.cjs} +1 -1
- package/dist/{index-BUE3WeDh.cjs → index-BvXl7BJD.cjs} +1 -1
- package/dist/{index-DS0bdfOa.cjs → index-BzaR8uM1.cjs} +1 -1
- package/dist/{index-BIBYSE0O.js → index-C5uZbosj.js} +3 -3
- package/dist/{index-CcB11LV-.cjs → index-C7L2gKXf.cjs} +1 -1
- package/dist/{index-BtAze4TI.js → index-C7NeFFtL.js} +3 -3
- package/dist/{index-DtpMK8Ak.js → index-CEvEqrWz.js} +2 -2
- package/dist/{index-o4bA2Ymm.cjs → index-CGAE3ijj.cjs} +1 -1
- package/dist/{index-2J0cohRF.js → index-CJIznGSs.js} +2 -2
- package/dist/{index-h82qauh2.js → index-CKRtOTlW.js} +4 -4
- package/dist/{index-OUX19p46.js → index-CN4vYjXL.js} +2 -2
- package/dist/{index-CtlfDEiP.cjs → index-CPUSDEhf.cjs} +1 -1
- package/dist/{index-DPHERztz.cjs → index-CTiwmXQv.cjs} +1 -1
- package/dist/{index-c5HMVa4V.cjs → index-CflXJ8xJ.cjs} +1 -1
- package/dist/{index-BK8EFVAw.cjs → index-CgH6d8ie.cjs} +1 -1
- package/dist/{index-C4wKda5M.js → index-CiwYKSUt.js} +2 -2
- package/dist/{index-jLIz3LSI.js → index-Cwsc5H7D.js} +2 -2
- package/dist/{index-BLjWV-YV.cjs → index-D1rYqvi5.cjs} +2 -2
- package/dist/{index-BXHmDsV_.js → index-D6aavhaa.js} +2 -2
- package/dist/{index-C_T9Gzw8.js → index-DAdi5JJz.js} +2 -2
- package/dist/{index-CSK499Fw.cjs → index-DKyf2VGu.cjs} +1 -1
- package/dist/{index-CBlls5Ux.cjs → index-DXB8LND-.cjs} +1 -1
- package/dist/{index-D7a7hidA.js → index-DYmfX0jE.js} +100 -100
- package/dist/{index-_0aF8UPX.js → index-DZRUtuQ1.js} +2 -2
- package/dist/{index-CQcRWw-d.js → index-DqP1O6vK.js} +2 -2
- package/dist/{index-D3y-KMW-.js → index-Dr0vUVGJ.js} +4 -4
- package/dist/{index-CngY8bhO.cjs → index-DrNo6z9a.cjs} +1 -1
- package/dist/{index-C-UADaTN.cjs → index-Dsgj-jNd.cjs} +1 -1
- package/dist/index-Dvc6ZVJ3.cjs +1 -0
- package/dist/index-OrV7N-wE.js +680 -0
- package/dist/{index-Du_-zpYu.js → index-SPJ46EtH.js} +4 -4
- package/dist/{index-zcRhAq4N.cjs → index-ZuS9yWom.cjs} +1 -1
- package/dist/{index-BHOzetMx.cjs → index-ljok1ep6.cjs} +1 -1
- package/dist/{index-BIbSEVsf.cjs → index-uOI0LXHI.cjs} +1 -1
- package/dist/{index-jr-7RW3y.cjs → index-zvVNcjMi.cjs} +1 -1
- package/dist/index.cjs.js +4 -4
- package/dist/index.es.js +1731 -1731
- package/dist/{it-iA1CUA-2.cjs → it-C7Kv6j-_.cjs} +1 -1
- package/dist/{it-l8u4xqsP.js → it-CtMArqSp.js} +1 -1
- package/dist/{ja-CRKtLvpo.cjs → ja-BPL80aw5.cjs} +1 -1
- package/dist/{ja-Dr2Azv8X.js → ja-UFqZT78C.js} +1 -1
- package/dist/json-schema/index.cjs.js +1 -1
- package/dist/json-schema/index.es.js +1 -1
- package/dist/{ko-C97MbNN9.js → ko-B5LB1_X_.js} +1 -1
- package/dist/{ko-DAqjjbor.cjs → ko-Cmt_34Xp.cjs} +1 -1
- package/dist/markdown/index.cjs.js +1 -1
- package/dist/markdown/index.es.js +1 -1
- package/dist/markdown.css +52 -3
- package/dist/milkdown/index.cjs.js +1 -1
- package/dist/milkdown/index.es.js +1 -1
- package/dist/{milkdown-input-Dp-upGqQ.js → milkdown-input-BI5TwGax.js} +26 -26
- package/dist/{milkdown-input-EMBZNdma.cjs → milkdown-input-CdJ7N_YZ.cjs} +2 -2
- package/dist/{milkdown-url-DgMTahqt.js → milkdown-url-D99P-nA-.js} +1 -1
- package/dist/{milkdown-url-DjKYrEOH.cjs → milkdown-url-DqoUZH3u.cjs} +1 -1
- package/dist/milkdown.css +4 -4
- package/dist/{modal-at2TcO_O.js → modal-C2Aa-aVN.js} +1 -1
- package/dist/{modal-hr4K3edu.cjs → modal-UsqvSvHy.cjs} +1 -1
- package/dist/{nl-CCa2fPh7.cjs → nl-B-WL9SX2.cjs} +1 -1
- package/dist/{nl-BnDPAHZz.js → nl-DCfHVqzQ.js} +1 -1
- package/dist/notice-C7I6EmRh.cjs +1 -0
- package/dist/{notice-DhynzVip.js → notice-c9Vbv45l.js} +836 -821
- package/dist/{pl-BVuQd0i3.cjs → pl-TGqkSi2w.cjs} +1 -1
- package/dist/{pl-DYEVmpx5.js → pl-UcTv39q1.js} +1 -1
- package/dist/{pt-C-cIHGoh.js → pt-CXsgmVtb.js} +1 -1
- package/dist/{pt-BFGThC8F.cjs → pt-Ua_e-1JE.cjs} +1 -1
- package/dist/{ru-M4WO0h1a.cjs → ru-9YWCN6fR.cjs} +1 -1
- package/dist/{ru-n2tT3Gv-.js → ru-C0MvZW2g.js} +1 -1
- package/dist/styles-url-B3p8AqBy.cjs +1 -0
- package/dist/styles-url-COuz9fVH.js +4 -0
- package/dist/tailwind/index.cjs.js +1 -1
- package/dist/tailwind/index.es.js +2 -2
- package/dist/tailwind/preset.cjs.js +1 -1
- package/dist/tailwind/preset.es.js +3 -3
- package/dist/tailwind/vite-plugin.cjs.js +13 -6
- package/dist/tailwind/vite-plugin.es.js +478 -161
- package/dist/{tr-CFUAqbmS.js → tr-CIIkc1uL.js} +1 -1
- package/dist/{tr-KxY4CbD3.cjs → tr-D70Oy8aN.cjs} +1 -1
- package/dist/{translations-DGCYRUSw.js → translations-CB6iJ1Rn.js} +1 -1
- package/dist/translations-DpZ-btu9.cjs +2 -0
- package/dist/{translations-924E7r4Q.js → translations-GO9sIajX.js} +235 -203
- package/dist/{translations-Do79R-x4.cjs → translations-NYxsXjMT.cjs} +1 -1
- package/dist/types/components/button/button.d.ts +1 -1
- package/dist/types/components/form/input/checkbox-input.d.ts +8 -1
- package/dist/types/components/form/input/switch.d.ts +3 -1
- package/dist/types/components/misc/notice.d.ts +1 -1
- package/dist/types/components/navigation/link/link.d.ts +1 -1
- package/dist/types/components/theme/types.d.ts +1 -1
- package/dist/types/components/typography/label.d.ts +1 -1
- package/dist/types/tailwind/google-fonts.d.ts +45 -0
- package/dist/types/tailwind/preset.d.ts +34 -0
- package/dist/types/tailwind/vite-plugin.d.ts +4 -0
- package/dist/types/tokens/colors.d.ts +6 -6
- package/dist/types/tokens/index.d.ts +19 -1
- package/dist/types/tokens/motion.d.ts +25 -0
- package/dist/types/tokens/radius.d.ts +5 -0
- package/dist/types/tokens/shadows.d.ts +5 -0
- package/dist/types/tokens/spacing.d.ts +5 -0
- package/dist/types/tokens/text-shadows.d.ts +5 -0
- package/dist/types/tokens/typography.d.ts +9 -1
- package/dist/{ur-B7kT0PwV.js → ur-Cpx9oyTV.js} +1 -1
- package/dist/{ur-GeXcd9eA.cjs → ur-DmxXuJ9O.cjs} +1 -1
- package/dist/{vi-DYvrvqim.cjs → vi-Cboo_ueb.cjs} +1 -1
- package/dist/{vi-CA85io1z.js → vi-D24AUQ01.js} +1 -1
- package/dist/{zh-cLh5uTFh.js → zh-25YFRjoV.js} +1 -1
- package/dist/{zh-EIWIyzbZ.cjs → zh-BXivX7rD.cjs} +1 -1
- package/package.json +1 -1
- package/dist/index-Br70wXYb.cjs +0 -1
- package/dist/index-DVdM4Oz7.js +0 -420
- package/dist/notice-CplKL-zm.cjs +0 -1
- package/dist/styles-url-CIhMtnm4.js +0 -4
- package/dist/styles-url-SkuBc_7K.cjs +0 -1
- package/dist/translations-BtAHDMLA.cjs +0 -2
package/dist/beatui.tailwind.css
CHANGED
|
@@ -301,11 +301,19 @@
|
|
|
301
301
|
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
302
302
|
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
303
303
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
304
|
+
--font-sans:
|
|
305
|
+
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
306
|
+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
307
|
+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
304
308
|
--font-family-serif:
|
|
305
309
|
ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
310
|
+
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
306
311
|
--font-family-mono:
|
|
307
312
|
ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
|
|
308
313
|
monospace;
|
|
314
|
+
--font-mono:
|
|
315
|
+
ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
|
|
316
|
+
monospace;
|
|
309
317
|
--breakpoint-sm: 40rem;
|
|
310
318
|
--breakpoint-md: 48rem;
|
|
311
319
|
--breakpoint-lg: 64rem;
|
|
@@ -339,6 +347,15 @@
|
|
|
339
347
|
--shadow-top-xl:
|
|
340
348
|
0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
341
349
|
--shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
|
|
350
|
+
--motion-duration-instant: 0s;
|
|
351
|
+
--motion-duration-fast: 120ms;
|
|
352
|
+
--motion-duration-base: 200ms;
|
|
353
|
+
--motion-duration-slow: 320ms;
|
|
354
|
+
--motion-duration-relaxed: 480ms;
|
|
355
|
+
--motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
356
|
+
--motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
|
|
357
|
+
--motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
|
|
358
|
+
--motion-easing-exit: cubic-bezier(0.8, 0, 0.6, 1);
|
|
342
359
|
--text-shadow-none: none;
|
|
343
360
|
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
|
344
361
|
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
|
@@ -421,17 +438,17 @@
|
|
|
421
438
|
--color-warning-800: var(--color-amber-800);
|
|
422
439
|
--color-warning-900: var(--color-amber-900);
|
|
423
440
|
--color-warning-950: var(--color-amber-950);
|
|
424
|
-
--color-
|
|
425
|
-
--color-
|
|
426
|
-
--color-
|
|
427
|
-
--color-
|
|
428
|
-
--color-
|
|
429
|
-
--color-
|
|
430
|
-
--color-
|
|
431
|
-
--color-
|
|
432
|
-
--color-
|
|
433
|
-
--color-
|
|
434
|
-
--color-
|
|
441
|
+
--color-danger-50: var(--color-red-50);
|
|
442
|
+
--color-danger-100: var(--color-red-100);
|
|
443
|
+
--color-danger-200: var(--color-red-200);
|
|
444
|
+
--color-danger-300: var(--color-red-300);
|
|
445
|
+
--color-danger-400: var(--color-red-400);
|
|
446
|
+
--color-danger-500: var(--color-red-500);
|
|
447
|
+
--color-danger-600: var(--color-red-600);
|
|
448
|
+
--color-danger-700: var(--color-red-700);
|
|
449
|
+
--color-danger-800: var(--color-red-800);
|
|
450
|
+
--color-danger-900: var(--color-red-900);
|
|
451
|
+
--color-danger-950: var(--color-red-950);
|
|
435
452
|
--color-info-50: var(--color-blue-50);
|
|
436
453
|
--color-info-100: var(--color-blue-100);
|
|
437
454
|
--color-info-200: var(--color-blue-200);
|
|
@@ -443,36 +460,80 @@
|
|
|
443
460
|
--color-info-800: var(--color-blue-800);
|
|
444
461
|
--color-info-900: var(--color-blue-900);
|
|
445
462
|
--color-info-950: var(--color-blue-950);
|
|
446
|
-
--bg-background-light: var(--color-
|
|
447
|
-
--bg-surface-light: var(--color-
|
|
448
|
-
--bg-subtle-light: var(--color-
|
|
449
|
-
--bg-elevated-light: var(--color-
|
|
450
|
-
--bg-raised-light: var(--color-
|
|
451
|
-
--bg-overlay-light: var(--color-
|
|
452
|
-
--bg-background-dark: var(--color-
|
|
453
|
-
--bg-surface-dark: var(--color-
|
|
454
|
-
--bg-subtle-dark: var(--color-
|
|
455
|
-
--bg-elevated-dark: var(--color-
|
|
456
|
-
--bg-raised-dark: var(--color-
|
|
457
|
-
--bg-overlay-dark: var(--color-
|
|
458
|
-
--text-normal-light: var(--color-
|
|
459
|
-
--text-muted-light: var(--color-
|
|
460
|
-
--text-inverted-light: var(--color-
|
|
461
|
-
--text-normal-dark: var(--color-
|
|
462
|
-
--text-muted-dark: var(--color-
|
|
463
|
-
--text-inverted-dark: var(--color-
|
|
464
|
-
--border-border-light: var(--color-
|
|
465
|
-
--border-divider-light: var(--color-
|
|
466
|
-
--border-inverted-light: var(--color-
|
|
467
|
-
--border-border-dark: var(--color-
|
|
468
|
-
--border-divider-dark: var(--color-
|
|
469
|
-
--border-inverted-dark: var(--color-
|
|
470
|
-
--interactive-focus-light: var(--color-
|
|
471
|
-
--interactive-hover-light: var(--color-
|
|
472
|
-
--interactive-active-light: var(--color-
|
|
473
|
-
--interactive-focus-dark: var(--color-
|
|
474
|
-
--interactive-hover-dark: var(--color-
|
|
475
|
-
--interactive-active-dark: var(--color-
|
|
463
|
+
--bg-background-light: var(--color-base-50);
|
|
464
|
+
--bg-surface-light: var(--color-base-100);
|
|
465
|
+
--bg-subtle-light: var(--color-base-200);
|
|
466
|
+
--bg-elevated-light: var(--color-base-300);
|
|
467
|
+
--bg-raised-light: var(--color-base-400);
|
|
468
|
+
--bg-overlay-light: var(--color-base-500);
|
|
469
|
+
--bg-background-dark: var(--color-base-950);
|
|
470
|
+
--bg-surface-dark: var(--color-base-900);
|
|
471
|
+
--bg-subtle-dark: var(--color-base-800);
|
|
472
|
+
--bg-elevated-dark: var(--color-base-700);
|
|
473
|
+
--bg-raised-dark: var(--color-base-600);
|
|
474
|
+
--bg-overlay-dark: var(--color-base-500);
|
|
475
|
+
--text-normal-light: var(--color-base-900);
|
|
476
|
+
--text-muted-light: var(--color-base-600);
|
|
477
|
+
--text-inverted-light: var(--color-base-100);
|
|
478
|
+
--text-normal-dark: var(--color-base-100);
|
|
479
|
+
--text-muted-dark: var(--color-base-400);
|
|
480
|
+
--text-inverted-dark: var(--color-base-900);
|
|
481
|
+
--border-border-light: var(--color-base-200);
|
|
482
|
+
--border-divider-light: var(--color-base-300);
|
|
483
|
+
--border-inverted-light: var(--color-base-100);
|
|
484
|
+
--border-border-dark: var(--color-base-700);
|
|
485
|
+
--border-divider-dark: var(--color-base-600);
|
|
486
|
+
--border-inverted-dark: var(--color-base-900);
|
|
487
|
+
--interactive-focus-light: var(--color-primary-700);
|
|
488
|
+
--interactive-hover-light: var(--color-base-100);
|
|
489
|
+
--interactive-active-light: var(--color-base-200);
|
|
490
|
+
--interactive-focus-dark: var(--color-primary-300);
|
|
491
|
+
--interactive-hover-dark: var(--color-base-800);
|
|
492
|
+
--interactive-active-dark: var(--color-base-700);
|
|
493
|
+
--font-body: var(--font-family-sans);
|
|
494
|
+
--font-heading: var(--font-family-sans);
|
|
495
|
+
--font-display: var(--font-family-sans);
|
|
496
|
+
--font-mono: var(--font-family-mono);
|
|
497
|
+
--font-ui: var(--font-family-sans);
|
|
498
|
+
--font-prose: var(--font-family-serif);
|
|
499
|
+
--default-font-family: var(--font-body);
|
|
500
|
+
--default-heading-font-family: var(--font-heading);
|
|
501
|
+
--default-display-font-family: var(--font-display);
|
|
502
|
+
--default-ui-font-family: var(--font-ui);
|
|
503
|
+
--default-prose-font-family: var(--font-prose);
|
|
504
|
+
--default-mono-font-family: var(--font-mono);
|
|
505
|
+
--radius-control: var(--radius-md);
|
|
506
|
+
--radius-control-sm: var(--radius-sm);
|
|
507
|
+
--radius-control-xs: var(--radius-xs);
|
|
508
|
+
--radius-button: var(--radius-md);
|
|
509
|
+
--radius-surface: var(--radius-lg);
|
|
510
|
+
--radius-overlay: var(--radius-lg);
|
|
511
|
+
--radius-popover: var(--radius-md);
|
|
512
|
+
--radius-pill: var(--radius-full);
|
|
513
|
+
--radius-focus: var(--radius-sm);
|
|
514
|
+
--shadow-surface: var(--shadow-sm);
|
|
515
|
+
--shadow-surface-elevated: var(--shadow-md);
|
|
516
|
+
--shadow-popover: var(--shadow-lg);
|
|
517
|
+
--shadow-overlay: var(--shadow-xl);
|
|
518
|
+
--shadow-button: var(--shadow-xs);
|
|
519
|
+
--motion-transition-fast: var(--motion-duration-fast);
|
|
520
|
+
--motion-transition-medium: var(--motion-duration-base);
|
|
521
|
+
--motion-transition-slow: var(--motion-duration-slow);
|
|
522
|
+
--motion-transition-overlay: var(--motion-duration-relaxed);
|
|
523
|
+
--motion-transition-emphasis: var(--motion-duration-fast);
|
|
524
|
+
--motion-easing-standard: var(--motion-easing-standard);
|
|
525
|
+
--motion-easing-emphasis: var(--motion-easing-emphasized);
|
|
526
|
+
--motion-easing-entrance: var(--motion-easing-entrance);
|
|
527
|
+
--motion-easing-exit: var(--motion-easing-exit);
|
|
528
|
+
--spacing-stack-2xs: calc(var(--spacing-base) / 2);
|
|
529
|
+
--spacing-stack-xs: calc(var(--spacing-base) * 1);
|
|
530
|
+
--spacing-stack-sm: calc(var(--spacing-base) * 2);
|
|
531
|
+
--spacing-stack-md: calc(var(--spacing-base) * 3);
|
|
532
|
+
--spacing-stack-lg: calc(var(--spacing-base) * 4);
|
|
533
|
+
--spacing-stack-xl: calc(var(--spacing-base) * 6);
|
|
534
|
+
--text-shadow-button-filled: var(--text-shadow-sm);
|
|
535
|
+
--text-shadow-button-light: var(--text-shadow-xs);
|
|
536
|
+
--text-shadow-button-default: var(--text-shadow-2xs);
|
|
476
537
|
}
|
|
477
538
|
|
|
478
539
|
}
|
|
@@ -567,7 +628,7 @@
|
|
|
567
628
|
*:focus-visible {
|
|
568
629
|
outline: 2px solid var(--interactive-focus-light);
|
|
569
630
|
outline-offset: -2px;
|
|
570
|
-
border-radius: var(--radius-sm);
|
|
631
|
+
border-radius: var(--radius-focus, var(--radius-sm));
|
|
571
632
|
}
|
|
572
633
|
|
|
573
634
|
/* Dark mode focus styles */
|
|
@@ -604,7 +665,7 @@ select:focus-visible,
|
|
|
604
665
|
/* Link elements */
|
|
605
666
|
a:focus-visible {
|
|
606
667
|
outline-offset: -2px;
|
|
607
|
-
border-radius: var(--radius-xs);
|
|
668
|
+
border-radius: var(--radius-focus, var(--radius-xs));
|
|
608
669
|
}
|
|
609
670
|
|
|
610
671
|
/* Custom component focus styles */
|
|
@@ -615,7 +676,7 @@ a:focus-visible {
|
|
|
615
676
|
.bc-switch:focus-visible .bc-switch__track {
|
|
616
677
|
outline: 2px solid var(--interactive-focus-light);
|
|
617
678
|
outline-offset: -2px;
|
|
618
|
-
border-radius: var(--radius-full);
|
|
679
|
+
border-radius: var(--radius-pill, var(--radius-full));
|
|
619
680
|
}
|
|
620
681
|
|
|
621
682
|
.b-dark .bc-switch:focus-visible .bc-switch__track {
|
|
@@ -627,7 +688,7 @@ a:focus-visible {
|
|
|
627
688
|
.bc-radio-input__radio:focus-visible {
|
|
628
689
|
outline: 2px solid var(--interactive-focus-light);
|
|
629
690
|
outline-offset: 2px;
|
|
630
|
-
border-radius: var(--radius-sm);
|
|
691
|
+
border-radius: var(--radius-focus, var(--radius-sm));
|
|
631
692
|
}
|
|
632
693
|
|
|
633
694
|
.b-dark .bc-checkbox-input__checkbox:focus-visible,
|
|
@@ -690,9 +751,11 @@ a:focus-visible {
|
|
|
690
751
|
margin: 0 auto;
|
|
691
752
|
padding: var(--spacing-2xl);
|
|
692
753
|
background-color: var(--bg-surface-light);
|
|
693
|
-
border-radius: var(--radius-lg);
|
|
694
|
-
box-shadow: var(--shadow-md);
|
|
695
|
-
transition: all
|
|
754
|
+
border-radius: var(--radius-surface, var(--radius-lg));
|
|
755
|
+
box-shadow: var(--shadow-surface, var(--shadow-md));
|
|
756
|
+
transition: all
|
|
757
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
758
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
696
759
|
}
|
|
697
760
|
|
|
698
761
|
/* Dark mode */
|
|
@@ -720,7 +783,7 @@ a:focus-visible {
|
|
|
720
783
|
margin: 0;
|
|
721
784
|
padding: var(--spacing-lg);
|
|
722
785
|
border-radius: 0;
|
|
723
|
-
box-shadow: none;
|
|
786
|
+
box-shadow: var(--shadow-none, none);
|
|
724
787
|
min-height: 100vh;
|
|
725
788
|
justify-content: center;
|
|
726
789
|
}
|
|
@@ -781,7 +844,7 @@ a:focus-visible {
|
|
|
781
844
|
.bc-auth-form {
|
|
782
845
|
display: flex;
|
|
783
846
|
flex-direction: column;
|
|
784
|
-
gap: var(--spacing-xl);
|
|
847
|
+
gap: var(--spacing-stack-xl, var(--spacing-xl));
|
|
785
848
|
width: 100%;
|
|
786
849
|
}
|
|
787
850
|
|
|
@@ -815,33 +878,33 @@ a:focus-visible {
|
|
|
815
878
|
.bc-auth-form__social {
|
|
816
879
|
display: flex;
|
|
817
880
|
flex-direction: column;
|
|
818
|
-
gap: var(--spacing-md);
|
|
881
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
819
882
|
}
|
|
820
883
|
|
|
821
884
|
/* Form fields */
|
|
822
885
|
.bc-auth-form__form {
|
|
823
886
|
display: flex;
|
|
824
887
|
flex-direction: column;
|
|
825
|
-
gap: var(--spacing-xl);
|
|
888
|
+
gap: var(--spacing-stack-xl, var(--spacing-xl));
|
|
826
889
|
}
|
|
827
890
|
|
|
828
891
|
.bc-auth-form__fields {
|
|
829
892
|
display: flex;
|
|
830
893
|
flex-direction: column;
|
|
831
|
-
gap: var(--spacing-lg);
|
|
894
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
832
895
|
}
|
|
833
896
|
|
|
834
897
|
/* Remember me checkbox */
|
|
835
898
|
.bc-auth-form__remember-me {
|
|
836
899
|
display: flex;
|
|
837
900
|
align-items: center;
|
|
838
|
-
gap: var(--spacing-sm);
|
|
901
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
839
902
|
}
|
|
840
903
|
|
|
841
904
|
.bc-auth-form__checkbox-label {
|
|
842
905
|
display: flex;
|
|
843
906
|
align-items: center;
|
|
844
|
-
gap: var(--spacing-sm);
|
|
907
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
845
908
|
font-size: var(--font-size-sm);
|
|
846
909
|
color: var(--text-normal-light);
|
|
847
910
|
cursor: pointer;
|
|
@@ -856,18 +919,18 @@ a:focus-visible {
|
|
|
856
919
|
.bc-auth-form__terms {
|
|
857
920
|
display: flex;
|
|
858
921
|
flex-direction: column;
|
|
859
|
-
gap: var(--spacing-xs);
|
|
922
|
+
gap: var(--spacing-stack-xs, var(--spacing-xs));
|
|
860
923
|
}
|
|
861
924
|
|
|
862
925
|
/* Field error */
|
|
863
926
|
.bc-auth-form__field-error {
|
|
864
927
|
font-size: var(--font-size-xs);
|
|
865
|
-
color: var(--color-
|
|
928
|
+
color: var(--color-danger-600);
|
|
866
929
|
margin-top: var(--spacing-xs);
|
|
867
930
|
}
|
|
868
931
|
|
|
869
932
|
.b-dark .bc-auth-form__field-error {
|
|
870
|
-
color: var(--color-
|
|
933
|
+
color: var(--color-danger-400);
|
|
871
934
|
}
|
|
872
935
|
|
|
873
936
|
/* Submit button */
|
|
@@ -881,7 +944,7 @@ a:focus-visible {
|
|
|
881
944
|
.bc-auth-form__footer {
|
|
882
945
|
display: flex;
|
|
883
946
|
flex-direction: column;
|
|
884
|
-
gap: var(--spacing-sm);
|
|
947
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
885
948
|
align-items: center;
|
|
886
949
|
text-align: center;
|
|
887
950
|
}
|
|
@@ -895,7 +958,9 @@ a:focus-visible {
|
|
|
895
958
|
cursor: pointer;
|
|
896
959
|
padding: var(--spacing-xs);
|
|
897
960
|
border-radius: var(--radius-sm);
|
|
898
|
-
transition: all
|
|
961
|
+
transition: all
|
|
962
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
963
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
899
964
|
}
|
|
900
965
|
|
|
901
966
|
.bc-auth-form__link:hover {
|
|
@@ -924,7 +989,7 @@ a:focus-visible {
|
|
|
924
989
|
/* Responsive adjustments */
|
|
925
990
|
@media (width < 40rem) {
|
|
926
991
|
.bc-auth-form {
|
|
927
|
-
gap: var(--spacing-lg);
|
|
992
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
928
993
|
}
|
|
929
994
|
|
|
930
995
|
.bc-auth-form__title {
|
|
@@ -932,7 +997,7 @@ a:focus-visible {
|
|
|
932
997
|
}
|
|
933
998
|
|
|
934
999
|
.bc-auth-form__fields {
|
|
935
|
-
gap: var(--spacing-md);
|
|
1000
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
936
1001
|
}
|
|
937
1002
|
}
|
|
938
1003
|
|
|
@@ -952,7 +1017,7 @@ a:focus-visible {
|
|
|
952
1017
|
}
|
|
953
1018
|
|
|
954
1019
|
.bc-social-login-buttons.bc-stack {
|
|
955
|
-
gap: calc(var(--spacing-base) * 2);
|
|
1020
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
956
1021
|
padding-inline: calc(var(--spacing-base) * 8);
|
|
957
1022
|
width: 100%;
|
|
958
1023
|
}
|
|
@@ -966,7 +1031,7 @@ a:focus-visible {
|
|
|
966
1031
|
align-items: center;
|
|
967
1032
|
justify-content: center;
|
|
968
1033
|
width: 100%;
|
|
969
|
-
gap: calc(var(--spacing-base) * 2);
|
|
1034
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
970
1035
|
}
|
|
971
1036
|
|
|
972
1037
|
.bc-social-login-button__icon {
|
|
@@ -1032,22 +1097,29 @@ a:focus-visible {
|
|
|
1032
1097
|
--button-border: transparent;
|
|
1033
1098
|
--button-border-dark: transparent;
|
|
1034
1099
|
--button-hover-decoration: none;
|
|
1100
|
+
--button-text-shadow: var(--text-shadow-none);
|
|
1101
|
+
--button-text-shadow-dark: var(--text-shadow-none);
|
|
1035
1102
|
|
|
1036
1103
|
display: inline-flex;
|
|
1037
1104
|
align-items: center;
|
|
1038
1105
|
justify-content: center;
|
|
1039
|
-
gap: calc(var(--spacing-base) / 2);
|
|
1106
|
+
gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
|
|
1040
1107
|
border: 1.5px solid var(--button-border);
|
|
1041
1108
|
cursor: pointer;
|
|
1042
1109
|
font-weight: var(--font-weight-semibold);
|
|
1043
|
-
font-family:
|
|
1110
|
+
font-family: var(
|
|
1111
|
+
--default-ui-font-family,
|
|
1112
|
+
var(--font-ui, var(--font-body, var(--font-family-sans)))
|
|
1113
|
+
);
|
|
1044
1114
|
font-size: inherit;
|
|
1045
1115
|
line-height: 1;
|
|
1046
|
-
border-radius: var(--radius-md);
|
|
1047
|
-
transition: all
|
|
1048
|
-
|
|
1116
|
+
border-radius: var(--radius-button, var(--radius-control, var(--radius-md)));
|
|
1117
|
+
transition: all
|
|
1118
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
1119
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
1049
1120
|
background-color: var(--button-bg);
|
|
1050
1121
|
color: var(--button-text);
|
|
1122
|
+
text-shadow: var(--button-text-shadow, var(--text-shadow-none));
|
|
1051
1123
|
}
|
|
1052
1124
|
|
|
1053
1125
|
.bc-button > span {
|
|
@@ -1099,6 +1171,10 @@ a:focus-visible {
|
|
|
1099
1171
|
background-color: var(--button-bg-dark);
|
|
1100
1172
|
color: var(--button-text-dark);
|
|
1101
1173
|
border-color: var(--button-border-dark);
|
|
1174
|
+
text-shadow: var(
|
|
1175
|
+
--button-text-shadow-dark,
|
|
1176
|
+
var(--button-text-shadow, var(--text-shadow-none))
|
|
1177
|
+
);
|
|
1102
1178
|
}
|
|
1103
1179
|
|
|
1104
1180
|
.b-dark .bc-button:hover:not(:disabled) {
|
|
@@ -1127,26 +1203,28 @@ a:focus-visible {
|
|
|
1127
1203
|
.bc-card {
|
|
1128
1204
|
display: flex;
|
|
1129
1205
|
flex-direction: column;
|
|
1130
|
-
border-radius: var(--radius-lg);
|
|
1206
|
+
border-radius: var(--radius-surface, var(--radius-lg));
|
|
1131
1207
|
border: 1px solid var(--color-base-200);
|
|
1132
1208
|
padding: var(--spacing-md);
|
|
1133
|
-
box-shadow: var(--shadow-md);
|
|
1209
|
+
box-shadow: var(--shadow-surface, var(--shadow-md));
|
|
1134
1210
|
background-color: var(--color-base-50);
|
|
1135
|
-
transition:
|
|
1211
|
+
transition: transform
|
|
1212
|
+
var(--motion-transition-medium, var(--motion-duration-base, 0.2s))
|
|
1213
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
1136
1214
|
}
|
|
1137
1215
|
|
|
1138
1216
|
/* Card variants */
|
|
1139
1217
|
.bc-card--elevated {
|
|
1140
|
-
box-shadow: var(--shadow-lg);
|
|
1218
|
+
box-shadow: var(--shadow-surface-elevated, var(--shadow-lg));
|
|
1141
1219
|
}
|
|
1142
1220
|
|
|
1143
1221
|
.bc-card--flat {
|
|
1144
|
-
box-shadow: none;
|
|
1222
|
+
box-shadow: var(--shadow-none, none);
|
|
1145
1223
|
border: 1px solid var(--color-base-200);
|
|
1146
1224
|
}
|
|
1147
1225
|
|
|
1148
1226
|
.bc-card--outlined {
|
|
1149
|
-
box-shadow: none;
|
|
1227
|
+
box-shadow: var(--shadow-none, none);
|
|
1150
1228
|
border: 2px solid var(--color-base-300);
|
|
1151
1229
|
}
|
|
1152
1230
|
|
|
@@ -1199,7 +1277,7 @@ a:focus-visible {
|
|
|
1199
1277
|
/* Dark mode styles */
|
|
1200
1278
|
.b-dark .bc-card {
|
|
1201
1279
|
background-color: var(--bg-surface-dark);
|
|
1202
|
-
border: 1px solid var(--border-dark);
|
|
1280
|
+
border: 1px solid var(--border-border-dark);
|
|
1203
1281
|
color: var(--text-normal-dark);
|
|
1204
1282
|
}
|
|
1205
1283
|
|
|
@@ -1209,12 +1287,12 @@ a:focus-visible {
|
|
|
1209
1287
|
|
|
1210
1288
|
.b-dark .bc-card--flat {
|
|
1211
1289
|
border: 1px solid var(--border-divider-dark);
|
|
1212
|
-
box-shadow: none;
|
|
1290
|
+
box-shadow: var(--shadow-none, none);
|
|
1213
1291
|
}
|
|
1214
1292
|
|
|
1215
1293
|
.b-dark .bc-card--outlined {
|
|
1216
|
-
border: 2px solid var(--border-dark);
|
|
1217
|
-
box-shadow: none;
|
|
1294
|
+
border: 2px solid var(--border-border-dark);
|
|
1295
|
+
box-shadow: var(--shadow-none, none);
|
|
1218
1296
|
}
|
|
1219
1297
|
|
|
1220
1298
|
/* Center Component */
|
|
@@ -1225,7 +1303,7 @@ a:focus-visible {
|
|
|
1225
1303
|
justify-content: center;
|
|
1226
1304
|
height: 100%;
|
|
1227
1305
|
width: 100%;
|
|
1228
|
-
gap: var(--spacing-lg);
|
|
1306
|
+
gap: var(--spacing-stack-lg, var(--spacing-lg));
|
|
1229
1307
|
}
|
|
1230
1308
|
|
|
1231
1309
|
/* Center Horizontal Only */
|
|
@@ -1243,23 +1321,23 @@ a:focus-visible {
|
|
|
1243
1321
|
}
|
|
1244
1322
|
|
|
1245
1323
|
.bc-center--gap-xs {
|
|
1246
|
-
gap: var(--spacing-xs);
|
|
1324
|
+
gap: var(--spacing-stack-xs, var(--spacing-xs));
|
|
1247
1325
|
}
|
|
1248
1326
|
|
|
1249
1327
|
.bc-center--gap-sm {
|
|
1250
|
-
gap: var(--spacing-sm);
|
|
1328
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
1251
1329
|
}
|
|
1252
1330
|
|
|
1253
1331
|
.bc-center--gap-md {
|
|
1254
|
-
gap: var(--spacing-md);
|
|
1332
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
1255
1333
|
}
|
|
1256
1334
|
|
|
1257
1335
|
.bc-center--gap-lg {
|
|
1258
|
-
gap: var(--spacing-lg);
|
|
1336
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
1259
1337
|
}
|
|
1260
1338
|
|
|
1261
1339
|
.bc-center--gap-xl {
|
|
1262
|
-
gap: var(--spacing-xl);
|
|
1340
|
+
gap: var(--spacing-stack-xl, var(--spacing-xl));
|
|
1263
1341
|
}
|
|
1264
1342
|
|
|
1265
1343
|
/* Center content wrapper */
|
|
@@ -1275,94 +1353,70 @@ a:focus-visible {
|
|
|
1275
1353
|
display: flex;
|
|
1276
1354
|
flex-direction: row;
|
|
1277
1355
|
align-items: center;
|
|
1278
|
-
gap: calc(var(--spacing-base) * 2);
|
|
1356
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
1279
1357
|
}
|
|
1280
1358
|
|
|
1281
|
-
/* Checkbox element - custom styled */
|
|
1282
1359
|
.bc-checkbox-input__checkbox {
|
|
1283
|
-
|
|
1360
|
+
display: inline-flex;
|
|
1361
|
+
align-items: center;
|
|
1362
|
+
justify-content: center;
|
|
1284
1363
|
width: calc(var(--spacing-base) * 7);
|
|
1285
1364
|
height: calc(var(--spacing-base) * 7);
|
|
1286
|
-
|
|
1287
|
-
--svg: url('https://api.iconify.design/akar-icons/box.svg');
|
|
1288
|
-
-webkit-mask-image: var(--svg);
|
|
1289
|
-
mask-image: var(--svg);
|
|
1290
|
-
-webkit-mask-repeat: no-repeat;
|
|
1291
|
-
mask-repeat: no-repeat;
|
|
1292
|
-
-webkit-mask-size: 100% 100%;
|
|
1293
|
-
mask-size: 100% 100%;
|
|
1294
|
-
background-repeat: no-repeat;
|
|
1295
|
-
background-size: 100% 100%;
|
|
1365
|
+
color: var(--color-base-400);
|
|
1296
1366
|
cursor: pointer;
|
|
1297
|
-
transition:
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
justify-content: center;
|
|
1367
|
+
transition: color
|
|
1368
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
1369
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
1301
1370
|
flex-shrink: 0;
|
|
1371
|
+
line-height: 0;
|
|
1302
1372
|
}
|
|
1303
1373
|
|
|
1304
|
-
/* Focus styles are handled by the base focus system */
|
|
1305
|
-
|
|
1306
|
-
/* Checked state */
|
|
1307
1374
|
.bc-checkbox-input__checkbox--checked {
|
|
1308
|
-
|
|
1309
|
-
}
|
|
1310
|
-
|
|
1311
|
-
Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
1312
|
-
content: '';
|
|
1313
|
-
position: absolute;
|
|
1314
|
-
width: calc(var(--spacing-base) * 2);
|
|
1315
|
-
height: calc(var(--spacing-base) * 1);
|
|
1316
|
-
border: 2px solid transparent;
|
|
1317
|
-
border-left: 2px solid var(--color-white);
|
|
1318
|
-
border-bottom: 2px solid var(--color-white);
|
|
1319
|
-
transform: rotate(-45deg) scale(0);
|
|
1320
|
-
transition: transform 0.15s ease-in-out;
|
|
1375
|
+
color: var(--color-primary-600);
|
|
1321
1376
|
}
|
|
1322
1377
|
|
|
1323
|
-
.bc-checkbox-input__checkbox--
|
|
1324
|
-
|
|
1378
|
+
.bc-checkbox-input__checkbox--unchecked {
|
|
1379
|
+
color: var(--color-base-400);
|
|
1325
1380
|
}
|
|
1326
1381
|
|
|
1327
|
-
/* Disabled state */
|
|
1328
1382
|
.bc-checkbox-input__checkbox--disabled {
|
|
1329
|
-
background-color: var(--bg-subtle-light);
|
|
1330
|
-
border-color: var(--border-divider-light);
|
|
1331
1383
|
cursor: not-allowed;
|
|
1384
|
+
color: var(--text-muted-light);
|
|
1332
1385
|
opacity: 0.6;
|
|
1333
1386
|
}
|
|
1334
1387
|
|
|
1335
|
-
.bc-checkbox-input__checkbox
|
|
1336
|
-
|
|
1337
|
-
|
|
1388
|
+
.bc-checkbox-input__checkbox:focus-visible,
|
|
1389
|
+
.bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
|
|
1390
|
+
outline: 1px solid var(--interactive-focus-light);
|
|
1391
|
+
outline-offset: -1px;
|
|
1392
|
+
border-radius: var(--radius-lg);
|
|
1338
1393
|
}
|
|
1339
1394
|
|
|
1340
|
-
/* Checkbox label */
|
|
1341
1395
|
.bc-checkbox-input__label {
|
|
1342
1396
|
cursor: pointer;
|
|
1343
1397
|
user-select: none;
|
|
1344
1398
|
}
|
|
1345
1399
|
|
|
1346
|
-
/* Dark mode styles */
|
|
1347
1400
|
.b-dark .bc-checkbox-input__checkbox {
|
|
1348
|
-
|
|
1349
|
-
border-color: var(--border-dark);
|
|
1401
|
+
color: var(--color-base-500);
|
|
1350
1402
|
}
|
|
1351
1403
|
|
|
1352
1404
|
.b-dark .bc-checkbox-input__checkbox--checked {
|
|
1353
|
-
|
|
1354
|
-
|
|
1405
|
+
color: var(--color-primary-400);
|
|
1406
|
+
}
|
|
1407
|
+
|
|
1408
|
+
.b-dark .bc-checkbox-input__checkbox--unchecked {
|
|
1409
|
+
color: var(--color-base-500);
|
|
1355
1410
|
}
|
|
1356
1411
|
|
|
1357
1412
|
.b-dark .bc-checkbox-input__checkbox--disabled {
|
|
1358
|
-
|
|
1359
|
-
border-color: var(--border-divider-dark);
|
|
1360
|
-
opacity: 0.5;
|
|
1413
|
+
color: var(--text-muted-dark);
|
|
1361
1414
|
}
|
|
1362
1415
|
|
|
1363
|
-
.b-dark .bc-checkbox-input__checkbox
|
|
1364
|
-
|
|
1365
|
-
|
|
1416
|
+
.b-dark .bc-checkbox-input__checkbox:focus-visible,
|
|
1417
|
+
.b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
|
|
1418
|
+
outline: 2px solid var(--interactive-focus-dark);
|
|
1419
|
+
outline-offset: 2px;
|
|
1366
1420
|
}
|
|
1367
1421
|
|
|
1368
1422
|
.b-dark .bc-checkbox-input__label {
|
|
@@ -1371,7 +1425,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1371
1425
|
|
|
1372
1426
|
.bc-collapse {
|
|
1373
1427
|
overflow: hidden;
|
|
1374
|
-
transition: height
|
|
1428
|
+
transition: height
|
|
1429
|
+
var(--motion-transition-slow, var(--motion-duration-slow, 0.4s))
|
|
1430
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
1375
1431
|
--collapse-height: auto;
|
|
1376
1432
|
}
|
|
1377
1433
|
|
|
@@ -1392,7 +1448,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1392
1448
|
.bc-color-input__control {
|
|
1393
1449
|
position: relative;
|
|
1394
1450
|
display: inline-block;
|
|
1395
|
-
border-radius: var(--radius-md);
|
|
1451
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
1396
1452
|
overflow: visible;
|
|
1397
1453
|
cursor: pointer;
|
|
1398
1454
|
border: 1px solid var(--color-neutral-300);
|
|
@@ -1401,10 +1457,26 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1401
1457
|
.bc-color-input__control--alpha {
|
|
1402
1458
|
/* subtle checkerboard background to visualize transparency */
|
|
1403
1459
|
background-image:
|
|
1404
|
-
linear-gradient(
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1460
|
+
linear-gradient(
|
|
1461
|
+
45deg,
|
|
1462
|
+
color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
|
|
1463
|
+
transparent 25%
|
|
1464
|
+
),
|
|
1465
|
+
linear-gradient(
|
|
1466
|
+
-45deg,
|
|
1467
|
+
color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
|
|
1468
|
+
transparent 25%
|
|
1469
|
+
),
|
|
1470
|
+
linear-gradient(
|
|
1471
|
+
45deg,
|
|
1472
|
+
transparent 75%,
|
|
1473
|
+
color-mix(in srgb, var(--color-black) 8%, transparent) 75%
|
|
1474
|
+
),
|
|
1475
|
+
linear-gradient(
|
|
1476
|
+
-45deg,
|
|
1477
|
+
transparent 75%,
|
|
1478
|
+
color-mix(in srgb, var(--color-black) 8%, transparent) 75%
|
|
1479
|
+
);
|
|
1408
1480
|
background-size: 10px 10px;
|
|
1409
1481
|
background-position:
|
|
1410
1482
|
0 0,
|
|
@@ -1414,7 +1486,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1414
1486
|
}
|
|
1415
1487
|
|
|
1416
1488
|
.bc-color-input__control:focus-within {
|
|
1417
|
-
outline: 2px solid var(--
|
|
1489
|
+
outline: 2px solid var(--interactive-focus-light);
|
|
1418
1490
|
outline-offset: 2px;
|
|
1419
1491
|
}
|
|
1420
1492
|
|
|
@@ -1423,11 +1495,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1423
1495
|
width: 100%;
|
|
1424
1496
|
height: 100%;
|
|
1425
1497
|
pointer-events: none; /* ensure clicks go to the native input */
|
|
1426
|
-
filter: drop-shadow(
|
|
1498
|
+
filter: drop-shadow(
|
|
1499
|
+
0 1px 1px color-mix(in srgb, var(--color-black) 10%, transparent)
|
|
1500
|
+
);
|
|
1427
1501
|
}
|
|
1428
1502
|
|
|
1429
1503
|
.bc-input-container--error .bc-color-input__control:focus-within {
|
|
1430
|
-
outline: 2px solid var(--color-
|
|
1504
|
+
outline: 2px solid var(--color-danger-600);
|
|
1431
1505
|
}
|
|
1432
1506
|
|
|
1433
1507
|
.bc-color-input__native {
|
|
@@ -1465,7 +1539,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1465
1539
|
}
|
|
1466
1540
|
|
|
1467
1541
|
.b-dark .bc-input-container--error .bc-color-input__control:focus-within {
|
|
1468
|
-
outline: 2px solid var(--color-
|
|
1542
|
+
outline: 2px solid var(--color-danger-400);
|
|
1469
1543
|
}
|
|
1470
1544
|
|
|
1471
1545
|
/* Responsive styles */
|
|
@@ -1507,7 +1581,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1507
1581
|
display: flex;
|
|
1508
1582
|
align-items: center;
|
|
1509
1583
|
justify-content: space-between;
|
|
1510
|
-
gap: calc(var(--spacing-base) * 2);
|
|
1584
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
1511
1585
|
}
|
|
1512
1586
|
|
|
1513
1587
|
/* Display area for selected value */
|
|
@@ -1535,8 +1609,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1535
1609
|
.bc-dropdown__listbox {
|
|
1536
1610
|
background-color: var(--color-white);
|
|
1537
1611
|
border: 1px solid var(--color-gray-300);
|
|
1538
|
-
border-radius: var(--radius-md);
|
|
1539
|
-
box-shadow: var(--shadow-lg);
|
|
1612
|
+
border-radius: var(--radius-popover, var(--radius-md));
|
|
1613
|
+
box-shadow: var(--shadow-popover, var(--shadow-lg));
|
|
1540
1614
|
padding: 0;
|
|
1541
1615
|
z-index: var(--z-index-popover);
|
|
1542
1616
|
min-width: 12rem;
|
|
@@ -1550,9 +1624,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1550
1624
|
display: flex;
|
|
1551
1625
|
align-items: center;
|
|
1552
1626
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
1553
|
-
border-radius: var(--radius-sm);
|
|
1627
|
+
border-radius: var(--radius-control-sm, var(--radius-sm));
|
|
1554
1628
|
cursor: pointer;
|
|
1555
|
-
transition:
|
|
1629
|
+
transition: background-color
|
|
1630
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
1631
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
1556
1632
|
color: var(--color-gray-900);
|
|
1557
1633
|
background-color: transparent;
|
|
1558
1634
|
}
|
|
@@ -1562,12 +1638,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1562
1638
|
}
|
|
1563
1639
|
|
|
1564
1640
|
.bc-dropdown__option--focused {
|
|
1565
|
-
background-color: var(--color-
|
|
1566
|
-
color: var(--color-
|
|
1641
|
+
background-color: var(--color-primary-100);
|
|
1642
|
+
color: var(--color-primary-900);
|
|
1567
1643
|
}
|
|
1568
1644
|
|
|
1569
1645
|
.bc-dropdown__option--selected {
|
|
1570
|
-
background-color: var(--color-
|
|
1646
|
+
background-color: var(--color-primary-600);
|
|
1571
1647
|
color: var(--color-white);
|
|
1572
1648
|
}
|
|
1573
1649
|
|
|
@@ -1581,7 +1657,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1581
1657
|
.bc-dropdown__option-content {
|
|
1582
1658
|
display: flex;
|
|
1583
1659
|
align-items: center;
|
|
1584
|
-
gap: var(--spacing-sm);
|
|
1660
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
1585
1661
|
width: 100%;
|
|
1586
1662
|
}
|
|
1587
1663
|
|
|
@@ -1628,7 +1704,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1628
1704
|
/* Dark mode styles */
|
|
1629
1705
|
.b-dark .bc-dropdown__listbox {
|
|
1630
1706
|
background-color: var(--bg-surface-dark);
|
|
1631
|
-
border-color: var(--border-dark);
|
|
1707
|
+
border-color: var(--border-border-dark);
|
|
1632
1708
|
color: var(--text-normal-dark);
|
|
1633
1709
|
}
|
|
1634
1710
|
|
|
@@ -1641,12 +1717,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1641
1717
|
}
|
|
1642
1718
|
|
|
1643
1719
|
.b-dark .bc-dropdown__option--focused {
|
|
1644
|
-
background-color: var(--color-
|
|
1645
|
-
color: var(--color-
|
|
1720
|
+
background-color: var(--color-primary-900);
|
|
1721
|
+
color: var(--color-primary-100);
|
|
1646
1722
|
}
|
|
1647
1723
|
|
|
1648
1724
|
.b-dark .bc-dropdown__option--selected {
|
|
1649
|
-
background-color: var(--color-
|
|
1725
|
+
background-color: var(--color-primary-500);
|
|
1650
1726
|
color: var(--color-white);
|
|
1651
1727
|
}
|
|
1652
1728
|
|
|
@@ -1790,14 +1866,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1790
1866
|
display: flex;
|
|
1791
1867
|
align-items: center;
|
|
1792
1868
|
justify-content: space-between;
|
|
1793
|
-
gap: calc(var(--spacing-base) * 2);
|
|
1869
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
1794
1870
|
}
|
|
1795
1871
|
|
|
1796
1872
|
/* Label container */
|
|
1797
1873
|
.bc-control-input-wrapper__label {
|
|
1798
1874
|
display: flex;
|
|
1799
1875
|
align-items: center;
|
|
1800
|
-
gap: calc(var(--spacing-base) / 2);
|
|
1876
|
+
gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
|
|
1801
1877
|
}
|
|
1802
1878
|
|
|
1803
1879
|
/* Label text styles */
|
|
@@ -1818,14 +1894,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1818
1894
|
}
|
|
1819
1895
|
|
|
1820
1896
|
.bc-control-input-wrapper__label-text--error {
|
|
1821
|
-
color: var(--color-
|
|
1897
|
+
color: var(--color-danger-600);
|
|
1822
1898
|
font-weight: var(--font-weight-normal);
|
|
1823
1899
|
}
|
|
1824
1900
|
|
|
1825
1901
|
/* Required symbol */
|
|
1826
1902
|
.bc-control-input-wrapper__required {
|
|
1827
1903
|
font-size: var(--font-size-xs);
|
|
1828
|
-
color: var(--color-
|
|
1904
|
+
color: var(--color-danger-600);
|
|
1829
1905
|
vertical-align: top;
|
|
1830
1906
|
}
|
|
1831
1907
|
|
|
@@ -1844,7 +1920,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1844
1920
|
/* Error message */
|
|
1845
1921
|
.bc-control-input-wrapper__error {
|
|
1846
1922
|
font-size: var(--font-size-sm);
|
|
1847
|
-
color: var(--color-
|
|
1923
|
+
color: var(--color-danger-500);
|
|
1848
1924
|
line-height: var(--line-height-normal);
|
|
1849
1925
|
}
|
|
1850
1926
|
|
|
@@ -1858,11 +1934,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1858
1934
|
}
|
|
1859
1935
|
|
|
1860
1936
|
.b-dark .bc-control-input-wrapper__label-text--error {
|
|
1861
|
-
color: var(--color-
|
|
1937
|
+
color: var(--color-danger-300);
|
|
1862
1938
|
}
|
|
1863
1939
|
|
|
1864
1940
|
.b-dark .bc-control-input-wrapper__required {
|
|
1865
|
-
color: var(--color-
|
|
1941
|
+
color: var(--color-danger-400);
|
|
1866
1942
|
}
|
|
1867
1943
|
|
|
1868
1944
|
.b-dark .bc-control-input-wrapper__description {
|
|
@@ -1870,7 +1946,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1870
1946
|
}
|
|
1871
1947
|
|
|
1872
1948
|
.b-dark .bc-control-input-wrapper__error {
|
|
1873
|
-
color: var(--color-
|
|
1949
|
+
color: var(--color-danger-400);
|
|
1874
1950
|
}
|
|
1875
1951
|
|
|
1876
1952
|
/* Drawer Component */
|
|
@@ -1878,10 +1954,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
1878
1954
|
z-index: var(--z-index-modal);
|
|
1879
1955
|
display: flex;
|
|
1880
1956
|
flex-direction: column;
|
|
1881
|
-
box-shadow: var(--shadow-xl);
|
|
1957
|
+
box-shadow: var(--shadow-overlay, var(--shadow-xl));
|
|
1882
1958
|
background-color: var(--color-base-100);
|
|
1883
1959
|
overflow: hidden;
|
|
1884
|
-
transition: transform
|
|
1960
|
+
transition: transform
|
|
1961
|
+
var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
|
|
1962
|
+
var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
|
|
1885
1963
|
}
|
|
1886
1964
|
|
|
1887
1965
|
/* Animation states for drawer sliding - specific transforms are defined per side below */
|
|
@@ -2161,7 +2239,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2161
2239
|
.b-dark .bc-drawer {
|
|
2162
2240
|
background-color: var(--bg-surface-dark);
|
|
2163
2241
|
color: var(--text-normal-dark);
|
|
2164
|
-
border: 1px solid var(--border-dark);
|
|
2242
|
+
border: 1px solid var(--border-border-dark);
|
|
2165
2243
|
}
|
|
2166
2244
|
|
|
2167
2245
|
.b-dark .bc-drawer__header {
|
|
@@ -2196,7 +2274,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2196
2274
|
border-bottom: 1px dashed var(--color-gray-300);
|
|
2197
2275
|
display: flex;
|
|
2198
2276
|
flex-direction: row;
|
|
2199
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2277
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2200
2278
|
align-items: flex-start;
|
|
2201
2279
|
cursor: pointer;
|
|
2202
2280
|
}
|
|
@@ -2248,7 +2326,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2248
2326
|
.bc-editable-text__display {
|
|
2249
2327
|
display: flex;
|
|
2250
2328
|
flex-direction: row;
|
|
2251
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2329
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2252
2330
|
justify-content: space-between;
|
|
2253
2331
|
align-items: center;
|
|
2254
2332
|
cursor: pointer;
|
|
@@ -2284,7 +2362,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2284
2362
|
display: flex;
|
|
2285
2363
|
align-items: center;
|
|
2286
2364
|
justify-content: center;
|
|
2287
|
-
transition: background-color
|
|
2365
|
+
transition: background-color
|
|
2366
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2367
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2288
2368
|
}
|
|
2289
2369
|
|
|
2290
2370
|
.bc-editable-text__edit-button:focus-visible {
|
|
@@ -2301,7 +2381,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2301
2381
|
|
|
2302
2382
|
/* Dark mode styles */
|
|
2303
2383
|
.b-dark .bc-editable-text {
|
|
2304
|
-
border-bottom-color: var(--border-dark);
|
|
2384
|
+
border-bottom-color: var(--border-border-dark);
|
|
2305
2385
|
color: var(--text-normal-dark);
|
|
2306
2386
|
}
|
|
2307
2387
|
|
|
@@ -2332,8 +2412,10 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2332
2412
|
width: 100%;
|
|
2333
2413
|
min-height: 120px;
|
|
2334
2414
|
border: 2px dashed var(--color-gray-300);
|
|
2335
|
-
border-radius: var(--radius-md);
|
|
2336
|
-
transition: all
|
|
2415
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
2416
|
+
transition: all
|
|
2417
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2418
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2337
2419
|
cursor: pointer;
|
|
2338
2420
|
position: relative;
|
|
2339
2421
|
}
|
|
@@ -2358,7 +2440,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2358
2440
|
height: 100%;
|
|
2359
2441
|
min-height: 120px;
|
|
2360
2442
|
text-align: center;
|
|
2361
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2443
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2362
2444
|
}
|
|
2363
2445
|
|
|
2364
2446
|
.bc-file-input__drop-zone-content--empty {
|
|
@@ -2396,24 +2478,29 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2396
2478
|
flex-direction: row;
|
|
2397
2479
|
flex-wrap: wrap;
|
|
2398
2480
|
justify-content: center;
|
|
2399
|
-
gap: calc(var(--spacing-base) * 3);
|
|
2481
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
2400
2482
|
}
|
|
2401
2483
|
|
|
2402
2484
|
.bc-file-input__file-item {
|
|
2403
2485
|
display: flex;
|
|
2404
2486
|
align-items: center;
|
|
2405
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2487
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2406
2488
|
padding: calc(var(--spacing-base) * 2);
|
|
2407
2489
|
border: 1px solid var(--color-gray-200);
|
|
2408
2490
|
border-radius: var(--radius-sm);
|
|
2409
2491
|
background-color: var(--color-white);
|
|
2410
|
-
transition:
|
|
2492
|
+
transition:
|
|
2493
|
+
border-color
|
|
2494
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2495
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
|
|
2496
|
+
box-shadow var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2497
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2411
2498
|
width: 18rem;
|
|
2412
2499
|
}
|
|
2413
2500
|
|
|
2414
2501
|
.bc-file-input__file-item:hover {
|
|
2415
2502
|
border-color: var(--color-gray-300);
|
|
2416
|
-
box-shadow: var(--shadow-sm);
|
|
2503
|
+
box-shadow: var(--shadow-surface, var(--shadow-sm));
|
|
2417
2504
|
}
|
|
2418
2505
|
|
|
2419
2506
|
.bc-file-input__file-item:last-child {
|
|
@@ -2502,16 +2589,18 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2502
2589
|
background-color: transparent;
|
|
2503
2590
|
color: var(--color-gray-400);
|
|
2504
2591
|
cursor: pointer;
|
|
2505
|
-
transition: all
|
|
2592
|
+
transition: all
|
|
2593
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2594
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2506
2595
|
}
|
|
2507
2596
|
|
|
2508
2597
|
.bc-file-input__remove-button:hover {
|
|
2509
|
-
background-color: var(--color-
|
|
2510
|
-
color: var(--color-
|
|
2598
|
+
background-color: var(--color-danger-50);
|
|
2599
|
+
color: var(--color-danger-500);
|
|
2511
2600
|
}
|
|
2512
2601
|
|
|
2513
2602
|
.bc-file-input__remove-button:focus {
|
|
2514
|
-
outline: 2px solid var(--color-
|
|
2603
|
+
outline: 2px solid var(--color-danger-500);
|
|
2515
2604
|
outline-offset: 2px;
|
|
2516
2605
|
}
|
|
2517
2606
|
|
|
@@ -2531,17 +2620,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2531
2620
|
font-size: var(--font-size-xs);
|
|
2532
2621
|
font-weight: var(--font-weight-medium);
|
|
2533
2622
|
cursor: pointer;
|
|
2534
|
-
transition: all
|
|
2623
|
+
transition: all
|
|
2624
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2625
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2535
2626
|
}
|
|
2536
2627
|
|
|
2537
2628
|
.bc-file-input__clear-all-button:hover {
|
|
2538
|
-
border-color: var(--color-
|
|
2539
|
-
background-color: var(--color-
|
|
2540
|
-
color: var(--color-
|
|
2629
|
+
border-color: var(--color-danger-300);
|
|
2630
|
+
background-color: var(--color-danger-50);
|
|
2631
|
+
color: var(--color-danger-600);
|
|
2541
2632
|
}
|
|
2542
2633
|
|
|
2543
2634
|
.bc-file-input__clear-all-button:focus {
|
|
2544
|
-
outline: 2px solid var(--color-
|
|
2635
|
+
outline: 2px solid var(--color-danger-500);
|
|
2545
2636
|
outline-offset: 2px;
|
|
2546
2637
|
}
|
|
2547
2638
|
|
|
@@ -2552,12 +2643,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2552
2643
|
|
|
2553
2644
|
/* Error State */
|
|
2554
2645
|
.bc-base-input-container--error .bc-file-input__drop-zone {
|
|
2555
|
-
border-color: var(--color-
|
|
2646
|
+
border-color: var(--color-danger-300);
|
|
2556
2647
|
}
|
|
2557
2648
|
|
|
2558
2649
|
.bc-base-input-container--error .bc-file-input__drop-zone:hover {
|
|
2559
|
-
border-color: var(--color-
|
|
2560
|
-
background-color: var(--color-
|
|
2650
|
+
border-color: var(--color-danger-400);
|
|
2651
|
+
background-color: var(--color-danger-50);
|
|
2561
2652
|
}
|
|
2562
2653
|
|
|
2563
2654
|
/* Disabled State */
|
|
@@ -2586,7 +2677,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2586
2677
|
.bc-file-input__file-item {
|
|
2587
2678
|
flex-direction: column;
|
|
2588
2679
|
align-items: flex-start;
|
|
2589
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2680
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2590
2681
|
}
|
|
2591
2682
|
|
|
2592
2683
|
.bc-file-input__remove-button {
|
|
@@ -2622,7 +2713,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2622
2713
|
text-overflow: ellipsis;
|
|
2623
2714
|
display: flex;
|
|
2624
2715
|
flex-wrap: wrap;
|
|
2625
|
-
gap: calc(var(--spacing-base));
|
|
2716
|
+
gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
|
|
2626
2717
|
}
|
|
2627
2718
|
|
|
2628
2719
|
.bc-file-input__compact-value-item {
|
|
@@ -2631,7 +2722,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2631
2722
|
padding: calc(var(--spacing-base) / 2) calc(var(--spacing-base) * 2);
|
|
2632
2723
|
display: flex;
|
|
2633
2724
|
align-items: center;
|
|
2634
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2725
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2635
2726
|
flex-wrap: nowrap;
|
|
2636
2727
|
overflow: hidden;
|
|
2637
2728
|
text-overflow: ellipsis;
|
|
@@ -2648,12 +2739,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2648
2739
|
background-color: transparent;
|
|
2649
2740
|
color: var(--color-gray-400);
|
|
2650
2741
|
cursor: pointer;
|
|
2651
|
-
transition: all
|
|
2742
|
+
transition: all
|
|
2743
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2744
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2652
2745
|
}
|
|
2653
2746
|
|
|
2654
2747
|
.bc-file-input__compact-clear:hover {
|
|
2655
|
-
background-color: var(--color-
|
|
2656
|
-
color: var(--color-
|
|
2748
|
+
background-color: var(--color-danger-50);
|
|
2749
|
+
color: var(--color-danger-500);
|
|
2657
2750
|
}
|
|
2658
2751
|
|
|
2659
2752
|
.bc-file-input__compact-clear:disabled {
|
|
@@ -2693,8 +2786,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2693
2786
|
/* Base flyout styles */
|
|
2694
2787
|
background-color: var(--color-neutral-50);
|
|
2695
2788
|
border: 1px solid var(--color-neutral-200);
|
|
2696
|
-
border-radius: var(--radius-md);
|
|
2697
|
-
box-shadow: var(--shadow-lg);
|
|
2789
|
+
border-radius: var(--radius-popover, var(--radius-md));
|
|
2790
|
+
box-shadow: var(--shadow-popover, var(--shadow-lg));
|
|
2698
2791
|
padding: var(--spacing-sm);
|
|
2699
2792
|
z-index: var(--z-index-popover);
|
|
2700
2793
|
}
|
|
@@ -2751,7 +2844,6 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2751
2844
|
display: flex;
|
|
2752
2845
|
flex-direction: row;
|
|
2753
2846
|
align-items: center;
|
|
2754
|
-
gap: var(--spacing-md);
|
|
2755
2847
|
}
|
|
2756
2848
|
|
|
2757
2849
|
.bc-group--direction-column {
|
|
@@ -2791,19 +2883,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2791
2883
|
}
|
|
2792
2884
|
|
|
2793
2885
|
.bc-group--gap-1 {
|
|
2794
|
-
gap: calc(var(--spacing-base) * 1);
|
|
2886
|
+
gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
|
|
2795
2887
|
}
|
|
2796
2888
|
|
|
2797
2889
|
.bc-group--gap-2 {
|
|
2798
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2890
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2799
2891
|
}
|
|
2800
2892
|
|
|
2801
2893
|
.bc-group--gap-4 {
|
|
2802
|
-
gap: calc(var(--spacing-base) * 4);
|
|
2894
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
2803
2895
|
}
|
|
2804
2896
|
|
|
2805
2897
|
.bc-group--gap-md {
|
|
2806
|
-
gap: var(--spacing-md);
|
|
2898
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
2807
2899
|
}
|
|
2808
2900
|
|
|
2809
2901
|
.bc-group--grow {
|
|
@@ -2861,7 +2953,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2861
2953
|
display: flex;
|
|
2862
2954
|
flex-direction: row;
|
|
2863
2955
|
align-items: center;
|
|
2864
|
-
gap: calc(var(--spacing-base) * 2);
|
|
2956
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
2865
2957
|
overflow: hidden;
|
|
2866
2958
|
}
|
|
2867
2959
|
|
|
@@ -2869,9 +2961,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2869
2961
|
width: 100%;
|
|
2870
2962
|
padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 4);
|
|
2871
2963
|
border: 0;
|
|
2872
|
-
border-radius: var(--radius-md);
|
|
2873
|
-
box-shadow: var(--shadow-sm);
|
|
2874
|
-
transition: all
|
|
2964
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
2965
|
+
box-shadow: var(--shadow-surface, var(--shadow-sm));
|
|
2966
|
+
transition: all
|
|
2967
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
2968
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
2875
2969
|
}
|
|
2876
2970
|
|
|
2877
2971
|
/* Default state */
|
|
@@ -2882,7 +2976,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2882
2976
|
|
|
2883
2977
|
.bc-input-container--default {
|
|
2884
2978
|
background-color: var(--color-white);
|
|
2885
|
-
outline: 1px solid var(--
|
|
2979
|
+
outline: 1px solid var(--border-divider-light);
|
|
2886
2980
|
outline-offset: -1px;
|
|
2887
2981
|
}
|
|
2888
2982
|
|
|
@@ -2900,7 +2994,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2900
2994
|
|
|
2901
2995
|
.bc-input-container--disabled {
|
|
2902
2996
|
background-color: var(--color-gray-200);
|
|
2903
|
-
outline: 2px solid var(--
|
|
2997
|
+
outline: 2px solid var(--border-divider-light);
|
|
2904
2998
|
outline-offset: -2px;
|
|
2905
2999
|
}
|
|
2906
3000
|
|
|
@@ -2911,18 +3005,18 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
2911
3005
|
/* Focus within state */
|
|
2912
3006
|
.bc-input-container:focus-within {
|
|
2913
3007
|
z-index: 10;
|
|
2914
|
-
outline: 2px solid var(--
|
|
3008
|
+
outline: 2px solid var(--interactive-focus-light);
|
|
2915
3009
|
outline-offset: -2px;
|
|
2916
3010
|
}
|
|
2917
3011
|
|
|
2918
3012
|
/* Error state */
|
|
2919
3013
|
.bc-input-container--error {
|
|
2920
|
-
outline: 2px solid var(--color-
|
|
3014
|
+
outline: 2px solid var(--color-danger-600);
|
|
2921
3015
|
outline-offset: -2px;
|
|
2922
3016
|
}
|
|
2923
3017
|
|
|
2924
3018
|
.bc-input-container--error:focus-within {
|
|
2925
|
-
outline: 2px solid var(--color-
|
|
3019
|
+
outline: 2px solid var(--color-danger-600);
|
|
2926
3020
|
outline-offset: -2px;
|
|
2927
3021
|
}
|
|
2928
3022
|
|
|
@@ -3008,7 +3102,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3008
3102
|
display: flex;
|
|
3009
3103
|
flex-direction: row;
|
|
3010
3104
|
flex-wrap: wrap;
|
|
3011
|
-
gap: calc(var(--spacing-base) * 2);
|
|
3105
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
3012
3106
|
align-items: center;
|
|
3013
3107
|
}
|
|
3014
3108
|
|
|
@@ -3025,7 +3119,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3025
3119
|
.b-dark .bc-input-container--default {
|
|
3026
3120
|
background-color: var(--bg-surface-dark);
|
|
3027
3121
|
color: var(--text-normal-dark);
|
|
3028
|
-
outline: 2px solid var(--border-dark);
|
|
3122
|
+
outline: 2px solid var(--border-border-dark);
|
|
3029
3123
|
}
|
|
3030
3124
|
|
|
3031
3125
|
.b-dark .bc-input-container--default:focus-within {
|
|
@@ -3049,13 +3143,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3049
3143
|
}
|
|
3050
3144
|
|
|
3051
3145
|
.b-dark .bc-input-container--error {
|
|
3052
|
-
outline: 2px solid var(--color-
|
|
3053
|
-
background-color: var(--color-
|
|
3146
|
+
outline: 2px solid var(--color-danger-400);
|
|
3147
|
+
background-color: var(--color-danger-950);
|
|
3054
3148
|
}
|
|
3055
3149
|
|
|
3056
3150
|
.b-dark .bc-input-container--error:focus-within {
|
|
3057
|
-
outline: 2px solid var(--color-
|
|
3058
|
-
background-color: var(--color-
|
|
3151
|
+
outline: 2px solid var(--color-danger-400);
|
|
3152
|
+
background-color: var(--color-danger-900);
|
|
3059
3153
|
}
|
|
3060
3154
|
|
|
3061
3155
|
.b-dark .bc-input-container__password-toggle {
|
|
@@ -3111,7 +3205,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3111
3205
|
.bc-input-wrapper--horizontal {
|
|
3112
3206
|
flex-direction: row;
|
|
3113
3207
|
align-items: center;
|
|
3114
|
-
gap: calc(var(--spacing-base) * 4);
|
|
3208
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
3115
3209
|
}
|
|
3116
3210
|
|
|
3117
3211
|
/* Label header container */
|
|
@@ -3119,7 +3213,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3119
3213
|
display: flex;
|
|
3120
3214
|
align-items: center;
|
|
3121
3215
|
justify-content: space-between;
|
|
3122
|
-
gap: calc(var(--spacing-base) * 2);
|
|
3216
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
3123
3217
|
}
|
|
3124
3218
|
|
|
3125
3219
|
/* Label section container */
|
|
@@ -3132,7 +3226,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3132
3226
|
.bc-input-wrapper__label {
|
|
3133
3227
|
display: flex;
|
|
3134
3228
|
align-items: center;
|
|
3135
|
-
gap: calc(var(--spacing-base) / 2);
|
|
3229
|
+
gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
|
|
3136
3230
|
}
|
|
3137
3231
|
|
|
3138
3232
|
/* Label text styles */
|
|
@@ -3154,14 +3248,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3154
3248
|
}
|
|
3155
3249
|
|
|
3156
3250
|
.bc-input-wrapper__label-text--error {
|
|
3157
|
-
color: var(--color-
|
|
3251
|
+
color: var(--color-danger-600);
|
|
3158
3252
|
font-weight: var(--font-weight-normal);
|
|
3159
3253
|
}
|
|
3160
3254
|
|
|
3161
3255
|
/* Required symbol */
|
|
3162
3256
|
.bc-input-wrapper__required {
|
|
3163
3257
|
font-size: var(--font-size-xs);
|
|
3164
|
-
color: var(--color-
|
|
3258
|
+
color: var(--color-danger-600);
|
|
3165
3259
|
vertical-align: top;
|
|
3166
3260
|
}
|
|
3167
3261
|
|
|
@@ -3197,7 +3291,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3197
3291
|
/* Error message */
|
|
3198
3292
|
.bc-input-wrapper__error {
|
|
3199
3293
|
font-size: var(--font-size-sm);
|
|
3200
|
-
color: var(--color-
|
|
3294
|
+
color: var(--color-danger-500);
|
|
3201
3295
|
line-height: var(--line-height-normal);
|
|
3202
3296
|
}
|
|
3203
3297
|
|
|
@@ -3211,11 +3305,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3211
3305
|
}
|
|
3212
3306
|
|
|
3213
3307
|
.b-dark .bc-input-wrapper__label-text--error {
|
|
3214
|
-
color: var(--color-
|
|
3308
|
+
color: var(--color-danger-300);
|
|
3215
3309
|
}
|
|
3216
3310
|
|
|
3217
3311
|
.b-dark .bc-input-wrapper__required {
|
|
3218
|
-
color: var(--color-
|
|
3312
|
+
color: var(--color-danger-400);
|
|
3219
3313
|
}
|
|
3220
3314
|
|
|
3221
3315
|
.b-dark .bc-input-wrapper__description {
|
|
@@ -3223,7 +3317,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3223
3317
|
}
|
|
3224
3318
|
|
|
3225
3319
|
.b-dark .bc-input-wrapper__error {
|
|
3226
|
-
color: var(--color-
|
|
3320
|
+
color: var(--color-danger-400);
|
|
3227
3321
|
}
|
|
3228
3322
|
|
|
3229
3323
|
.bc-json-schema-object {
|
|
@@ -3236,7 +3330,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3236
3330
|
}
|
|
3237
3331
|
|
|
3238
3332
|
.bc-schema-grid--gap-4 {
|
|
3239
|
-
gap: calc(var(--spacing-base) * 4);
|
|
3333
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
3240
3334
|
}
|
|
3241
3335
|
|
|
3242
3336
|
.bc-schema-grid--cols-1 {
|
|
@@ -3384,19 +3478,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3384
3478
|
}
|
|
3385
3479
|
|
|
3386
3480
|
.bc-array-control__indicator--error {
|
|
3387
|
-
color: var(--color-
|
|
3481
|
+
color: var(--color-danger-600);
|
|
3388
3482
|
}
|
|
3389
3483
|
|
|
3390
3484
|
.bc-array-control__indicator--success {
|
|
3391
|
-
color: var(--color-
|
|
3485
|
+
color: var(--color-success-600);
|
|
3392
3486
|
}
|
|
3393
3487
|
|
|
3394
3488
|
.b-dark .bc-array-control__indicator--error {
|
|
3395
|
-
color: var(--color-
|
|
3489
|
+
color: var(--color-danger-400);
|
|
3396
3490
|
}
|
|
3397
3491
|
|
|
3398
3492
|
.b-dark .bc-array-control__indicator--success {
|
|
3399
|
-
color: var(--color-
|
|
3493
|
+
color: var(--color-success-400);
|
|
3400
3494
|
}
|
|
3401
3495
|
|
|
3402
3496
|
.bc-array-control__summary {
|
|
@@ -3404,31 +3498,31 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3404
3498
|
}
|
|
3405
3499
|
|
|
3406
3500
|
.bc-array-control__summary--success {
|
|
3407
|
-
color: var(--color-
|
|
3501
|
+
color: var(--color-success-600);
|
|
3408
3502
|
}
|
|
3409
3503
|
|
|
3410
3504
|
.bc-array-control__summary--error {
|
|
3411
|
-
color: var(--color-
|
|
3505
|
+
color: var(--color-danger-600);
|
|
3412
3506
|
font-weight: var(--font-weight-medium);
|
|
3413
3507
|
}
|
|
3414
3508
|
|
|
3415
3509
|
.b-dark .bc-array-control__summary--success {
|
|
3416
|
-
color: var(--color-
|
|
3510
|
+
color: var(--color-success-300);
|
|
3417
3511
|
}
|
|
3418
3512
|
|
|
3419
3513
|
.b-dark .bc-array-control__summary--error {
|
|
3420
|
-
color: var(--color-
|
|
3514
|
+
color: var(--color-danger-300);
|
|
3421
3515
|
}
|
|
3422
3516
|
|
|
3423
3517
|
.bc-object-helpers__row {
|
|
3424
3518
|
display: grid;
|
|
3425
|
-
gap: calc(var(--spacing-base) * 2);
|
|
3519
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
3426
3520
|
grid-template-columns: 2fr 3fr min-content;
|
|
3427
3521
|
}
|
|
3428
3522
|
|
|
3429
3523
|
.bc-object-helpers__error {
|
|
3430
3524
|
font-size: var(--font-size-sm);
|
|
3431
|
-
color: var(--color-
|
|
3525
|
+
color: var(--color-danger-600);
|
|
3432
3526
|
}
|
|
3433
3527
|
|
|
3434
3528
|
.bc-object-helpers__description {
|
|
@@ -3442,7 +3536,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3442
3536
|
}
|
|
3443
3537
|
|
|
3444
3538
|
.b-dark .bc-object-helpers__error {
|
|
3445
|
-
color: var(--color-
|
|
3539
|
+
color: var(--color-danger-400);
|
|
3446
3540
|
}
|
|
3447
3541
|
|
|
3448
3542
|
.b-dark .bc-object-helpers__description {
|
|
@@ -3450,17 +3544,21 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3450
3544
|
}
|
|
3451
3545
|
|
|
3452
3546
|
.bc-json-schema-form__error {
|
|
3453
|
-
color: var(--color-
|
|
3547
|
+
color: var(--color-danger-600);
|
|
3454
3548
|
font-size: var(--font-size-sm);
|
|
3455
3549
|
}
|
|
3456
3550
|
|
|
3457
3551
|
.b-dark .bc-json-schema-form__error {
|
|
3458
|
-
color: var(--color-
|
|
3552
|
+
color: var(--color-danger-400);
|
|
3459
3553
|
}
|
|
3460
3554
|
|
|
3461
3555
|
.bc-label {
|
|
3462
3556
|
font-size: var(--font-size-sm);
|
|
3463
3557
|
line-height: var(--line-height-normal);
|
|
3558
|
+
font-family: var(
|
|
3559
|
+
--default-ui-font-family,
|
|
3560
|
+
var(--font-ui, var(--font-body, var(--font-family-sans)))
|
|
3561
|
+
);
|
|
3464
3562
|
}
|
|
3465
3563
|
|
|
3466
3564
|
.bc-label--emphasis {
|
|
@@ -3476,9 +3574,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3476
3574
|
opacity: 0.5;
|
|
3477
3575
|
}
|
|
3478
3576
|
|
|
3479
|
-
.bc-label--
|
|
3577
|
+
.bc-label--danger {
|
|
3480
3578
|
font-weight: var(--font-weight-medium);
|
|
3481
|
-
color: var(--color-
|
|
3579
|
+
color: var(--color-danger-500);
|
|
3482
3580
|
}
|
|
3483
3581
|
|
|
3484
3582
|
/* Dark mode styles */
|
|
@@ -3490,8 +3588,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3490
3588
|
color: var(--text-muted-dark);
|
|
3491
3589
|
}
|
|
3492
3590
|
|
|
3493
|
-
.b-dark .bc-label--
|
|
3494
|
-
color: var(--color-
|
|
3591
|
+
.b-dark .bc-label--danger {
|
|
3592
|
+
color: var(--color-danger-400);
|
|
3495
3593
|
}
|
|
3496
3594
|
|
|
3497
3595
|
/* Link Component */
|
|
@@ -3501,7 +3599,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3501
3599
|
--link-hover-color: var(--link-color);
|
|
3502
3600
|
--link-hover-color-dark: var(--link-color-dark);
|
|
3503
3601
|
|
|
3504
|
-
transition: color
|
|
3602
|
+
transition: color
|
|
3603
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
3604
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
3505
3605
|
cursor: pointer;
|
|
3506
3606
|
color: var(--link-color);
|
|
3507
3607
|
}
|
|
@@ -3590,8 +3690,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3590
3690
|
.bc-menu {
|
|
3591
3691
|
background-color: var(--color-neutral-50);
|
|
3592
3692
|
border: 1px solid var(--color-neutral-200);
|
|
3593
|
-
border-radius: var(--radius-md);
|
|
3594
|
-
box-shadow: var(--shadow-lg);
|
|
3693
|
+
border-radius: var(--radius-popover, var(--radius-md));
|
|
3694
|
+
box-shadow: var(--shadow-popover, var(--shadow-lg));
|
|
3595
3695
|
padding: var(--spacing-xs);
|
|
3596
3696
|
z-index: var(--z-index-popover);
|
|
3597
3697
|
min-width: 12rem;
|
|
@@ -3615,11 +3715,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3615
3715
|
.bc-menu-item {
|
|
3616
3716
|
display: flex;
|
|
3617
3717
|
align-items: center;
|
|
3618
|
-
gap: var(--spacing-sm);
|
|
3718
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
3619
3719
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
3620
|
-
border-radius: var(--radius-sm);
|
|
3720
|
+
border-radius: var(--radius-control-sm, var(--radius-sm));
|
|
3621
3721
|
cursor: pointer;
|
|
3622
|
-
transition:
|
|
3722
|
+
transition: background-color
|
|
3723
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.15s))
|
|
3724
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
3623
3725
|
color: var(--text-normal-light);
|
|
3624
3726
|
font-size: var(--font-size-sm);
|
|
3625
3727
|
line-height: var(--line-height-normal);
|
|
@@ -3812,13 +3914,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3812
3914
|
.bc-menu {
|
|
3813
3915
|
min-width: 100%;
|
|
3814
3916
|
max-width: 100vw;
|
|
3815
|
-
border-radius: var(--radius-
|
|
3917
|
+
border-radius: var(--radius-popover, var(--radius-lg))
|
|
3918
|
+
var(--radius-popover, var(--radius-lg)) 0 0;
|
|
3816
3919
|
position: fixed;
|
|
3817
3920
|
bottom: 0;
|
|
3818
3921
|
left: 0;
|
|
3819
3922
|
right: 0;
|
|
3820
3923
|
max-height: 50vh;
|
|
3821
|
-
box-shadow: var(--shadow-xl);
|
|
3924
|
+
box-shadow: var(--shadow-overlay, var(--shadow-xl));
|
|
3822
3925
|
}
|
|
3823
3926
|
|
|
3824
3927
|
.bc-menu-item {
|
|
@@ -3883,12 +3986,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
3883
3986
|
width: 100%;
|
|
3884
3987
|
display: flex;
|
|
3885
3988
|
flex-direction: column;
|
|
3886
|
-
border-radius: var(--radius-lg);
|
|
3887
|
-
box-shadow: var(--shadow-xl);
|
|
3989
|
+
border-radius: var(--radius-overlay, var(--radius-lg));
|
|
3990
|
+
box-shadow: var(--shadow-overlay, var(--shadow-xl));
|
|
3888
3991
|
background-color: var(--color-base-100);
|
|
3889
3992
|
border: 3px solid var(--color-base-300);
|
|
3890
3993
|
overflow: hidden;
|
|
3891
|
-
transition: all
|
|
3994
|
+
transition: all
|
|
3995
|
+
var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
|
|
3996
|
+
var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
|
|
3892
3997
|
}
|
|
3893
3998
|
|
|
3894
3999
|
/* Modal anchored to body (default) */
|
|
@@ -4133,7 +4238,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
4133
4238
|
/* Modal footer */
|
|
4134
4239
|
.bc-modal__footer {
|
|
4135
4240
|
display: flex;
|
|
4136
|
-
gap: var(--spacing-md);
|
|
4241
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
4137
4242
|
padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
|
|
4138
4243
|
border-top: 1px solid var(--color-base-300);
|
|
4139
4244
|
flex-shrink: 0;
|
|
@@ -4414,7 +4519,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
4414
4519
|
.bc-modal__actions {
|
|
4415
4520
|
display: flex;
|
|
4416
4521
|
justify-content: flex-end;
|
|
4417
|
-
gap: calc(var(--spacing-base) * 2);
|
|
4522
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
4418
4523
|
}
|
|
4419
4524
|
|
|
4420
4525
|
.bc-native-select {
|
|
@@ -4526,7 +4631,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
|
|
|
4526
4631
|
outline: 1px solid var(--color-gray-300);
|
|
4527
4632
|
outline-offset: -1px;
|
|
4528
4633
|
cursor: pointer;
|
|
4529
|
-
transition: all
|
|
4634
|
+
transition: all
|
|
4635
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
4636
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
4530
4637
|
}
|
|
4531
4638
|
|
|
4532
4639
|
.bc-number-input-steppers-button .bc-icon {
|
|
@@ -4556,13 +4663,15 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4556
4663
|
width: 100%;
|
|
4557
4664
|
height: 100%;
|
|
4558
4665
|
z-index: var(--z-index-overlay);
|
|
4559
|
-
transition: background-color
|
|
4666
|
+
transition: background-color
|
|
4667
|
+
var(--motion-transition-overlay, var(--motion-duration-relaxed, 0.3s))
|
|
4668
|
+
var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
|
|
4560
4669
|
}
|
|
4561
4670
|
|
|
4562
4671
|
.bc-overlay[data-status='start-opening'],
|
|
4563
4672
|
.bc-overlay[data-status='closing'] {
|
|
4564
4673
|
backdrop-filter: blur(0);
|
|
4565
|
-
background-color:
|
|
4674
|
+
background-color: transparent;
|
|
4566
4675
|
}
|
|
4567
4676
|
|
|
4568
4677
|
.bc-overlay > * {
|
|
@@ -4574,23 +4683,23 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4574
4683
|
}
|
|
4575
4684
|
|
|
4576
4685
|
.bc-overlay--effect-transparent {
|
|
4577
|
-
background-color:
|
|
4686
|
+
background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
|
|
4578
4687
|
}
|
|
4579
4688
|
|
|
4580
4689
|
.bc-overlay--effect-opaque[data-status='opened'],
|
|
4581
4690
|
.bc-overlay--effect-opaque[data-status='opening'] {
|
|
4582
|
-
background-color:
|
|
4691
|
+
background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
|
|
4583
4692
|
backdrop-filter: blur(2px);
|
|
4584
4693
|
}
|
|
4585
4694
|
|
|
4586
4695
|
/* Dark mode styles */
|
|
4587
4696
|
.b-dark .bc-overlay--effect-transparent {
|
|
4588
|
-
background-color:
|
|
4697
|
+
background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
|
|
4589
4698
|
}
|
|
4590
4699
|
|
|
4591
4700
|
.b-dark .bc-overlay--effect-opaque[data-status='opened'],
|
|
4592
4701
|
.b-dark .bc-overlay--effect-opaque[data-status='opening'] {
|
|
4593
|
-
background-color:
|
|
4702
|
+
background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
|
|
4594
4703
|
backdrop-filter: blur(4px);
|
|
4595
4704
|
}
|
|
4596
4705
|
|
|
@@ -4615,72 +4724,72 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4615
4724
|
}
|
|
4616
4725
|
|
|
4617
4726
|
.bc-panel--side-all {
|
|
4618
|
-
border: 1px solid var(--border-light);
|
|
4727
|
+
border: 1px solid var(--border-border-light);
|
|
4619
4728
|
}
|
|
4620
4729
|
|
|
4621
4730
|
.bc-panel--side-top {
|
|
4622
|
-
border-top: 1px solid var(--border-light);
|
|
4731
|
+
border-top: 1px solid var(--border-border-light);
|
|
4623
4732
|
}
|
|
4624
4733
|
|
|
4625
4734
|
.bc-panel--side-bottom {
|
|
4626
|
-
border-bottom: 1px solid var(--border-light);
|
|
4735
|
+
border-bottom: 1px solid var(--border-border-light);
|
|
4627
4736
|
}
|
|
4628
4737
|
|
|
4629
4738
|
.bc-panel--side-left {
|
|
4630
|
-
border-left: 1px solid var(--border-light);
|
|
4739
|
+
border-left: 1px solid var(--border-border-light);
|
|
4631
4740
|
}
|
|
4632
4741
|
|
|
4633
4742
|
.bc-panel--side-right {
|
|
4634
|
-
border-right: 1px solid var(--border-light);
|
|
4743
|
+
border-right: 1px solid var(--border-border-light);
|
|
4635
4744
|
}
|
|
4636
4745
|
|
|
4637
4746
|
/* Direction-aware panel borders */
|
|
4638
4747
|
.bc-panel--side-inline-start {
|
|
4639
|
-
border-inline-start: 1px solid var(--border-light);
|
|
4748
|
+
border-inline-start: 1px solid var(--border-border-light);
|
|
4640
4749
|
}
|
|
4641
4750
|
|
|
4642
4751
|
.bc-panel--side-inline-end {
|
|
4643
|
-
border-inline-end: 1px solid var(--border-light);
|
|
4752
|
+
border-inline-end: 1px solid var(--border-border-light);
|
|
4644
4753
|
}
|
|
4645
4754
|
|
|
4646
4755
|
.bc-panel--shadow-sm {
|
|
4647
|
-
box-shadow: var(--shadow-sm);
|
|
4756
|
+
box-shadow: var(--shadow-surface, var(--shadow-sm));
|
|
4648
4757
|
}
|
|
4649
4758
|
|
|
4650
4759
|
.bc-panel--shadow-md {
|
|
4651
|
-
box-shadow: var(--shadow-md);
|
|
4760
|
+
box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
|
|
4652
4761
|
}
|
|
4653
4762
|
|
|
4654
4763
|
.bc-panel--shadow-lg {
|
|
4655
|
-
box-shadow: var(--shadow-lg);
|
|
4764
|
+
box-shadow: var(--shadow-overlay, var(--shadow-lg));
|
|
4656
4765
|
}
|
|
4657
4766
|
|
|
4658
4767
|
/* Dark mode styles */
|
|
4659
4768
|
.b-dark .bc-panel--side-all {
|
|
4660
|
-
border: 1px solid var(--border-dark);
|
|
4769
|
+
border: 1px solid var(--border-border-dark);
|
|
4661
4770
|
}
|
|
4662
4771
|
|
|
4663
4772
|
.b-dark .bc-panel--side-top {
|
|
4664
|
-
border-top: 1px solid var(--border-dark);
|
|
4773
|
+
border-top: 1px solid var(--border-border-dark);
|
|
4665
4774
|
}
|
|
4666
4775
|
|
|
4667
4776
|
.b-dark .bc-panel--side-bottom {
|
|
4668
|
-
border-bottom: 1px solid var(--border-dark);
|
|
4777
|
+
border-bottom: 1px solid var(--border-border-dark);
|
|
4669
4778
|
}
|
|
4670
4779
|
|
|
4671
4780
|
.b-dark .bc-panel--side-left {
|
|
4672
|
-
border-left: 1px solid var(--border-dark);
|
|
4781
|
+
border-left: 1px solid var(--border-border-dark);
|
|
4673
4782
|
}
|
|
4674
4783
|
|
|
4675
4784
|
.b-dark .bc-panel--side-right {
|
|
4676
|
-
border-right: 1px solid var(--border-dark);
|
|
4785
|
+
border-right: 1px solid var(--border-border-dark);
|
|
4677
4786
|
}
|
|
4678
4787
|
|
|
4679
4788
|
/* Password Strength Indicator Component */
|
|
4680
4789
|
.bc-password-strength {
|
|
4681
4790
|
display: flex;
|
|
4682
4791
|
flex-direction: column;
|
|
4683
|
-
gap: var(--spacing-sm);
|
|
4792
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
4684
4793
|
width: 100%;
|
|
4685
4794
|
}
|
|
4686
4795
|
|
|
@@ -4700,13 +4809,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4700
4809
|
.bc-password-strength__fill {
|
|
4701
4810
|
height: 100%;
|
|
4702
4811
|
border-radius: var(--radius-full);
|
|
4703
|
-
transition:
|
|
4704
|
-
|
|
4812
|
+
transition:
|
|
4813
|
+
background-color
|
|
4814
|
+
var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
|
|
4815
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
|
|
4816
|
+
width var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
|
|
4817
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
4818
|
+
background-color: var(--color-danger-500);
|
|
4705
4819
|
}
|
|
4706
4820
|
|
|
4707
4821
|
/* Strength levels */
|
|
4708
4822
|
.bc-password-strength--weak .bc-password-strength__fill {
|
|
4709
|
-
background-color: var(--color-
|
|
4823
|
+
background-color: var(--color-danger-500);
|
|
4710
4824
|
}
|
|
4711
4825
|
|
|
4712
4826
|
.bc-password-strength--fair .bc-password-strength__fill {
|
|
@@ -4729,7 +4843,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4729
4843
|
}
|
|
4730
4844
|
|
|
4731
4845
|
.bc-password-strength--weak .bc-password-strength__label {
|
|
4732
|
-
color: var(--color-
|
|
4846
|
+
color: var(--color-danger-600);
|
|
4733
4847
|
}
|
|
4734
4848
|
|
|
4735
4849
|
.bc-password-strength--fair .bc-password-strength__label {
|
|
@@ -4745,7 +4859,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4745
4859
|
}
|
|
4746
4860
|
|
|
4747
4861
|
.b-dark .bc-password-strength--weak .bc-password-strength__label {
|
|
4748
|
-
color: var(--color-
|
|
4862
|
+
color: var(--color-danger-400);
|
|
4749
4863
|
}
|
|
4750
4864
|
|
|
4751
4865
|
.b-dark .bc-password-strength--fair .bc-password-strength__label {
|
|
@@ -4764,16 +4878,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4764
4878
|
.bc-password-strength__requirements {
|
|
4765
4879
|
display: flex;
|
|
4766
4880
|
flex-direction: column;
|
|
4767
|
-
gap: var(--spacing-xs);
|
|
4881
|
+
gap: var(--spacing-stack-xs, var(--spacing-xs));
|
|
4768
4882
|
}
|
|
4769
4883
|
|
|
4770
4884
|
.bc-password-strength__requirement {
|
|
4771
4885
|
display: flex;
|
|
4772
4886
|
align-items: center;
|
|
4773
|
-
gap: var(--spacing-xs);
|
|
4887
|
+
gap: var(--spacing-stack-xs, var(--spacing-xs));
|
|
4774
4888
|
font-size: var(--font-size-xs);
|
|
4775
4889
|
color: var(--text-muted-light);
|
|
4776
|
-
transition: color
|
|
4890
|
+
transition: color
|
|
4891
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
4892
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
4777
4893
|
}
|
|
4778
4894
|
|
|
4779
4895
|
.b-dark .bc-password-strength__requirement {
|
|
@@ -4815,12 +4931,14 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4815
4931
|
.bc-password-strength-bar__fill {
|
|
4816
4932
|
height: 100%;
|
|
4817
4933
|
border-radius: var(--radius-full);
|
|
4818
|
-
transition: all
|
|
4819
|
-
|
|
4934
|
+
transition: all
|
|
4935
|
+
var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
|
|
4936
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
4937
|
+
background-color: var(--color-danger-500);
|
|
4820
4938
|
}
|
|
4821
4939
|
|
|
4822
4940
|
.bc-password-strength-bar--weak .bc-password-strength-bar__fill {
|
|
4823
|
-
background-color: var(--color-
|
|
4941
|
+
background-color: var(--color-danger-500);
|
|
4824
4942
|
}
|
|
4825
4943
|
|
|
4826
4944
|
.bc-password-strength-bar--fair .bc-password-strength-bar__fill {
|
|
@@ -4842,7 +4960,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4842
4960
|
}
|
|
4843
4961
|
|
|
4844
4962
|
.bc-password-strength-text--weak {
|
|
4845
|
-
color: var(--color-
|
|
4963
|
+
color: var(--color-danger-600);
|
|
4846
4964
|
}
|
|
4847
4965
|
|
|
4848
4966
|
.bc-password-strength-text--fair {
|
|
@@ -4858,7 +4976,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4858
4976
|
}
|
|
4859
4977
|
|
|
4860
4978
|
.b-dark .bc-password-strength-text--weak {
|
|
4861
|
-
color: var(--color-
|
|
4979
|
+
color: var(--color-danger-400);
|
|
4862
4980
|
}
|
|
4863
4981
|
|
|
4864
4982
|
.b-dark .bc-password-strength-text--fair {
|
|
@@ -4956,9 +5074,10 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4956
5074
|
width: 100%;
|
|
4957
5075
|
height: 20px;
|
|
4958
5076
|
position: absolute;
|
|
4959
|
-
transition:
|
|
4960
|
-
|
|
4961
|
-
|
|
5077
|
+
transition: box-shadow
|
|
5078
|
+
var(--motion-transition-slow, var(--motion-duration-slow, 0.5s))
|
|
5079
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5080
|
+
box-shadow: var(--shadow-scrollable-panel-idle, 0 0 0 transparent);
|
|
4962
5081
|
background-color: transparent;
|
|
4963
5082
|
}
|
|
4964
5083
|
|
|
@@ -4967,7 +5086,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4967
5086
|
}
|
|
4968
5087
|
|
|
4969
5088
|
.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
|
|
4970
|
-
box-shadow: var(--shadow-md);
|
|
5089
|
+
box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
|
|
4971
5090
|
}
|
|
4972
5091
|
|
|
4973
5092
|
.bc-scrollable-panel--footer-shadow > div {
|
|
@@ -4990,7 +5109,9 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
4990
5109
|
.bc-scrollable-panel__body::-webkit-scrollbar-thumb {
|
|
4991
5110
|
background: var(--color-base-400);
|
|
4992
5111
|
border-radius: var(--radius-sm);
|
|
4993
|
-
transition: background-color
|
|
5112
|
+
transition: background-color
|
|
5113
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5114
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
4994
5115
|
}
|
|
4995
5116
|
|
|
4996
5117
|
.bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
|
|
@@ -5024,8 +5145,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5024
5145
|
/* Segmented Control Component */
|
|
5025
5146
|
.bc-segmented-control {
|
|
5026
5147
|
background-color: var(--color-base-200);
|
|
5027
|
-
border-radius: var(--radius-full);
|
|
5028
|
-
box-shadow: var(--shadow-sm);
|
|
5148
|
+
border-radius: var(--radius-pill, var(--radius-full));
|
|
5149
|
+
box-shadow: var(--shadow-surface, var(--shadow-sm));
|
|
5029
5150
|
position: relative;
|
|
5030
5151
|
border: 1px solid var(--color-base-300);
|
|
5031
5152
|
padding: var(--spacing-sm);
|
|
@@ -5039,23 +5160,23 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5039
5160
|
}
|
|
5040
5161
|
|
|
5041
5162
|
.bc-segmented-control--size-xs .bc-segmented-control__container {
|
|
5042
|
-
gap: var(--spacing-xs);
|
|
5163
|
+
gap: var(--spacing-stack-xs, var(--spacing-xs));
|
|
5043
5164
|
}
|
|
5044
5165
|
|
|
5045
5166
|
.bc-segmented-control--size-sm .bc-segmented-control__container {
|
|
5046
|
-
gap: var(--spacing-sm);
|
|
5167
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
5047
5168
|
}
|
|
5048
5169
|
|
|
5049
5170
|
.bc-segmented-control--size-md .bc-segmented-control__container {
|
|
5050
|
-
gap: var(--spacing-md);
|
|
5171
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
5051
5172
|
}
|
|
5052
5173
|
|
|
5053
5174
|
.bc-segmented-control--size-lg .bc-segmented-control__container {
|
|
5054
|
-
gap: var(--spacing-lg);
|
|
5175
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
5055
5176
|
}
|
|
5056
5177
|
|
|
5057
5178
|
.bc-segmented-control--size-xl .bc-segmented-control__container {
|
|
5058
|
-
gap: var(--spacing-xl);
|
|
5179
|
+
gap: var(--spacing-stack-xl, var(--spacing-xl));
|
|
5059
5180
|
}
|
|
5060
5181
|
|
|
5061
5182
|
/* Sliding indicator */
|
|
@@ -5063,10 +5184,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5063
5184
|
position: absolute;
|
|
5064
5185
|
height: 100%;
|
|
5065
5186
|
background-color: var(--color-base-50);
|
|
5066
|
-
transition:
|
|
5187
|
+
transition: transform
|
|
5188
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5189
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5067
5190
|
transform: translateX(0);
|
|
5068
|
-
border-radius: var(--radius-full);
|
|
5069
|
-
box-shadow: var(--shadow-sm);
|
|
5191
|
+
border-radius: var(--radius-pill, var(--radius-full));
|
|
5192
|
+
box-shadow: var(--shadow-surface, var(--shadow-sm));
|
|
5070
5193
|
z-index: 1;
|
|
5071
5194
|
}
|
|
5072
5195
|
|
|
@@ -5083,9 +5206,15 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5083
5206
|
font-weight: var(--font-weight-semibold);
|
|
5084
5207
|
text-transform: capitalize;
|
|
5085
5208
|
color: var(--color-base-700);
|
|
5086
|
-
transition: color
|
|
5209
|
+
transition: color
|
|
5210
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5211
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5087
5212
|
z-index: 2;
|
|
5088
|
-
border-radius: var(--radius-full);
|
|
5213
|
+
border-radius: var(--radius-pill, var(--radius-full));
|
|
5214
|
+
font-family: var(
|
|
5215
|
+
--default-ui-font-family,
|
|
5216
|
+
var(--font-ui, var(--font-body, var(--font-family-sans)))
|
|
5217
|
+
);
|
|
5089
5218
|
}
|
|
5090
5219
|
|
|
5091
5220
|
.bc-segmented-control--size-xs .bc-segmented-control__segment {
|
|
@@ -5151,14 +5280,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5151
5280
|
|
|
5152
5281
|
.b-dark .bc-segmented-control__indicator {
|
|
5153
5282
|
background-color: var(--bg-elevated-dark);
|
|
5154
|
-
box-shadow:
|
|
5283
|
+
box-shadow: var(
|
|
5284
|
+
--shadow-segmented-control-indicator-dark,
|
|
5155
5285
|
0 1px 3px var(--shadow-color-dark),
|
|
5156
|
-
0 0 0 1px var(--shadow-highlight-dark)
|
|
5286
|
+
0 0 0 1px var(--shadow-highlight-dark)
|
|
5287
|
+
);
|
|
5157
5288
|
}
|
|
5158
5289
|
|
|
5159
5290
|
.b-dark .bc-segmented-control__segment {
|
|
5160
5291
|
color: var(--text-muted-dark);
|
|
5161
|
-
transition: all
|
|
5292
|
+
transition: all
|
|
5293
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5294
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5162
5295
|
border-radius: var(--radius-full);
|
|
5163
5296
|
}
|
|
5164
5297
|
|
|
@@ -5190,7 +5323,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5190
5323
|
|
|
5191
5324
|
.b-dark .bc-segmented-control--disabled .bc-segmented-control__indicator {
|
|
5192
5325
|
background-color: var(--bg-subtle-dark);
|
|
5193
|
-
box-shadow: none;
|
|
5326
|
+
box-shadow: var(--shadow-none, none);
|
|
5194
5327
|
}
|
|
5195
5328
|
|
|
5196
5329
|
.b-dark .bc-segmented-control--disabled .bc-segmented-control__segment {
|
|
@@ -5236,10 +5369,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5236
5369
|
display: flex;
|
|
5237
5370
|
flex-direction: row;
|
|
5238
5371
|
align-items: center;
|
|
5239
|
-
gap: calc(var(--spacing-base) * 2);
|
|
5372
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
5240
5373
|
font-size: var(--font-size-sm);
|
|
5241
5374
|
line-height: var(--line-height-normal);
|
|
5242
|
-
transition: all
|
|
5375
|
+
transition: all
|
|
5376
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5377
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5243
5378
|
padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 2);
|
|
5244
5379
|
}
|
|
5245
5380
|
|
|
@@ -5279,8 +5414,8 @@ span.bc-sidebar-link {
|
|
|
5279
5414
|
justify-content: center;
|
|
5280
5415
|
width: calc(var(--spacing-base) * 6);
|
|
5281
5416
|
height: calc(var(--spacing-base) * 6);
|
|
5282
|
-
border: 1px solid var(--border-light);
|
|
5283
|
-
border-radius: var(--radius-md);
|
|
5417
|
+
border: 1px solid var(--border-border-light);
|
|
5418
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
5284
5419
|
cursor: pointer;
|
|
5285
5420
|
padding: var(--spacing-sm);
|
|
5286
5421
|
color: var(--text-normal-light);
|
|
@@ -5306,7 +5441,9 @@ span.bc-sidebar-link {
|
|
|
5306
5441
|
}
|
|
5307
5442
|
|
|
5308
5443
|
.bc-sidebar-group-collapsible-indicator {
|
|
5309
|
-
transition:
|
|
5444
|
+
transition: transform
|
|
5445
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5446
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5310
5447
|
}
|
|
5311
5448
|
|
|
5312
5449
|
.bc-sidebar-group-collapsible--open .bc-sidebar-group-collapsible-indicator {
|
|
@@ -5344,7 +5481,7 @@ span.bc-sidebar-link {
|
|
|
5344
5481
|
|
|
5345
5482
|
.b-dark .bc-sidebar-link--action {
|
|
5346
5483
|
color: var(--text-normal-dark);
|
|
5347
|
-
border: 1px solid var(--border-dark);
|
|
5484
|
+
border: 1px solid var(--border-border-dark);
|
|
5348
5485
|
}
|
|
5349
5486
|
|
|
5350
5487
|
.b-dark .bc-sidebar-link--action:hover {
|
|
@@ -5353,7 +5490,7 @@ span.bc-sidebar-link {
|
|
|
5353
5490
|
}
|
|
5354
5491
|
|
|
5355
5492
|
.b-dark .bc-sidebar-group--rail {
|
|
5356
|
-
border-inline-start: 1px solid var(--border-dark);
|
|
5493
|
+
border-inline-start: 1px solid var(--border-border-dark);
|
|
5357
5494
|
}
|
|
5358
5495
|
|
|
5359
5496
|
/* Dark background mode styles - inverted colors in light theme */
|
|
@@ -5376,7 +5513,7 @@ span.bc-sidebar-link {
|
|
|
5376
5513
|
|
|
5377
5514
|
.bc-sidebar--dark-bg .bc-sidebar-link--action {
|
|
5378
5515
|
color: var(--text-normal-dark);
|
|
5379
|
-
border: 1px solid var(--border-dark);
|
|
5516
|
+
border: 1px solid var(--border-border-dark);
|
|
5380
5517
|
}
|
|
5381
5518
|
|
|
5382
5519
|
.bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
|
|
@@ -5385,7 +5522,7 @@ span.bc-sidebar-link {
|
|
|
5385
5522
|
}
|
|
5386
5523
|
|
|
5387
5524
|
.bc-sidebar--dark-bg .bc-sidebar-group--rail {
|
|
5388
|
-
border-inline-start: 1px solid var(--border-dark);
|
|
5525
|
+
border-inline-start: 1px solid var(--border-border-dark);
|
|
5389
5526
|
}
|
|
5390
5527
|
|
|
5391
5528
|
/* Dark background mode in dark theme - inverted back to light colors */
|
|
@@ -5408,7 +5545,7 @@ span.bc-sidebar-link {
|
|
|
5408
5545
|
|
|
5409
5546
|
.b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action {
|
|
5410
5547
|
color: var(--text-normal-light);
|
|
5411
|
-
border: 1px solid var(--border-light);
|
|
5548
|
+
border: 1px solid var(--border-border-light);
|
|
5412
5549
|
}
|
|
5413
5550
|
|
|
5414
5551
|
.b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
|
|
@@ -5417,12 +5554,12 @@ span.bc-sidebar-link {
|
|
|
5417
5554
|
}
|
|
5418
5555
|
|
|
5419
5556
|
.b-dark .bc-sidebar--dark-bg .bc-sidebar-group--rail {
|
|
5420
|
-
border-inline-start: 1px solid var(--border-light);
|
|
5557
|
+
border-inline-start: 1px solid var(--border-border-light);
|
|
5421
5558
|
}
|
|
5422
5559
|
|
|
5423
5560
|
.bc-sidebar-separator {
|
|
5424
5561
|
border: none;
|
|
5425
|
-
border-top: 1px solid var(--border-light);
|
|
5562
|
+
border-top: 1px solid var(--border-border-light);
|
|
5426
5563
|
margin: calc(var(--spacing-base) * 2) 0;
|
|
5427
5564
|
}
|
|
5428
5565
|
|
|
@@ -5430,25 +5567,36 @@ span.bc-sidebar-link {
|
|
|
5430
5567
|
.bc-sink {
|
|
5431
5568
|
display: flex;
|
|
5432
5569
|
flex-direction: column;
|
|
5433
|
-
border-radius: var(--radius-lg);
|
|
5570
|
+
border-radius: var(--radius-surface, var(--radius-lg));
|
|
5434
5571
|
border: 1px solid var(--color-base-300);
|
|
5435
5572
|
padding: var(--spacing-md);
|
|
5436
|
-
box-shadow:
|
|
5573
|
+
box-shadow: var(
|
|
5574
|
+
--shadow-sink,
|
|
5575
|
+
inset 0 0 0.25rem color-mix(in srgb, var(--color-black) 20%, transparent)
|
|
5576
|
+
);
|
|
5437
5577
|
background-color: var(--color-base-50);
|
|
5438
|
-
transition: all
|
|
5578
|
+
transition: all
|
|
5579
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5580
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5439
5581
|
}
|
|
5440
5582
|
|
|
5441
5583
|
/* Sink variants */
|
|
5442
5584
|
.bc-sink--deep {
|
|
5443
|
-
box-shadow:
|
|
5585
|
+
box-shadow: var(
|
|
5586
|
+
--shadow-sink-deep,
|
|
5587
|
+
inset 0 0 0.5rem color-mix(in srgb, var(--color-black) 30%, transparent)
|
|
5588
|
+
);
|
|
5444
5589
|
}
|
|
5445
5590
|
|
|
5446
5591
|
.bc-sink--shallow {
|
|
5447
|
-
box-shadow:
|
|
5592
|
+
box-shadow: var(
|
|
5593
|
+
--shadow-sink-shallow,
|
|
5594
|
+
inset 0 0 0.125rem color-mix(in srgb, var(--color-black) 10%, transparent)
|
|
5595
|
+
);
|
|
5448
5596
|
}
|
|
5449
5597
|
|
|
5450
5598
|
.bc-sink--flat {
|
|
5451
|
-
box-shadow: none;
|
|
5599
|
+
box-shadow: var(--shadow-sink-flat, none);
|
|
5452
5600
|
border: 1px solid var(--color-base-200);
|
|
5453
5601
|
}
|
|
5454
5602
|
|
|
@@ -5501,21 +5649,27 @@ span.bc-sidebar-link {
|
|
|
5501
5649
|
/* Dark mode styles */
|
|
5502
5650
|
.b-dark .bc-sink {
|
|
5503
5651
|
background-color: var(--bg-background-dark);
|
|
5504
|
-
border: 1px solid var(--border-dark);
|
|
5505
|
-
box-shadow: inset 0 2px 4px var(--shadow-color-dark);
|
|
5652
|
+
border: 1px solid var(--border-border-dark);
|
|
5653
|
+
box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
|
|
5506
5654
|
color: var(--text-normal-dark);
|
|
5507
5655
|
}
|
|
5508
5656
|
|
|
5509
5657
|
.b-dark .bc-sink--deep {
|
|
5510
|
-
box-shadow:
|
|
5658
|
+
box-shadow: var(
|
|
5659
|
+
--shadow-sink-dark-deep,
|
|
5660
|
+
inset 0 4px 8px var(--shadow-color-dark)
|
|
5661
|
+
);
|
|
5511
5662
|
}
|
|
5512
5663
|
|
|
5513
5664
|
.b-dark .bc-sink--shallow {
|
|
5514
|
-
box-shadow:
|
|
5665
|
+
box-shadow: var(
|
|
5666
|
+
--shadow-sink-dark-shallow,
|
|
5667
|
+
inset 0 1px 2px var(--shadow-color-dark)
|
|
5668
|
+
);
|
|
5515
5669
|
}
|
|
5516
5670
|
|
|
5517
5671
|
.b-dark .bc-sink--flat {
|
|
5518
|
-
box-shadow: none;
|
|
5672
|
+
box-shadow: var(--shadow-sink-dark-flat, none);
|
|
5519
5673
|
border: 1px solid var(--border-divider-dark);
|
|
5520
5674
|
background-color: var(--bg-subtle-dark);
|
|
5521
5675
|
}
|
|
@@ -5523,21 +5677,19 @@ span.bc-sidebar-link {
|
|
|
5523
5677
|
.bc-stack {
|
|
5524
5678
|
display: flex;
|
|
5525
5679
|
flex-direction: column;
|
|
5526
|
-
align-items: flex-start;
|
|
5527
5680
|
scroll-behavior: smooth;
|
|
5528
|
-
gap: 0;
|
|
5529
5681
|
}
|
|
5530
5682
|
|
|
5531
5683
|
.bc-stack--gap-1 {
|
|
5532
|
-
gap: calc(var(--spacing-base) * 1);
|
|
5684
|
+
gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
|
|
5533
5685
|
}
|
|
5534
5686
|
|
|
5535
5687
|
.bc-stack--gap-2 {
|
|
5536
|
-
gap: calc(var(--spacing-base) * 2);
|
|
5688
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
5537
5689
|
}
|
|
5538
5690
|
|
|
5539
5691
|
.bc-stack--gap-4 {
|
|
5540
|
-
gap: calc(var(--spacing-base) * 4);
|
|
5692
|
+
gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
|
|
5541
5693
|
}
|
|
5542
5694
|
|
|
5543
5695
|
.bc-stack--align-center {
|
|
@@ -5565,15 +5717,21 @@ span.bc-sidebar-link {
|
|
|
5565
5717
|
display: inline-flex;
|
|
5566
5718
|
flex-direction: row;
|
|
5567
5719
|
align-items: center;
|
|
5568
|
-
border-radius: var(--radius-full);
|
|
5720
|
+
border-radius: var(--radius-pill, var(--radius-full));
|
|
5569
5721
|
line-height: 1.2;
|
|
5570
5722
|
border: 1px solid var(--tag-border);
|
|
5571
|
-
transition: all
|
|
5723
|
+
transition: all
|
|
5724
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5725
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5572
5726
|
font-size: var(--font-size-base);
|
|
5573
5727
|
padding: 0 calc(var(--spacing-base) * 2);
|
|
5574
|
-
gap: calc(var(--spacing-base) * 2);
|
|
5728
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
5575
5729
|
background-color: var(--tag-bg);
|
|
5576
5730
|
color: var(--tag-text);
|
|
5731
|
+
font-family: var(
|
|
5732
|
+
--default-ui-font-family,
|
|
5733
|
+
var(--font-ui, var(--font-body, var(--font-family-sans)))
|
|
5734
|
+
);
|
|
5577
5735
|
}
|
|
5578
5736
|
|
|
5579
5737
|
.bc-tag:hover {
|
|
@@ -5616,12 +5774,14 @@ span.bc-sidebar-link {
|
|
|
5616
5774
|
width: calc(var(--spacing-base) * 4);
|
|
5617
5775
|
height: calc(var(--spacing-base) * 4);
|
|
5618
5776
|
border-radius: var(--radius-full);
|
|
5619
|
-
transition: all
|
|
5777
|
+
transition: all
|
|
5778
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5779
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5620
5780
|
border: 1px solid transparent;
|
|
5621
5781
|
}
|
|
5622
5782
|
|
|
5623
5783
|
.bc-tag__close:hover {
|
|
5624
|
-
color: white;
|
|
5784
|
+
color: var(--color-white);
|
|
5625
5785
|
border-color: var(--color-gray-300);
|
|
5626
5786
|
}
|
|
5627
5787
|
|
|
@@ -5662,7 +5822,7 @@ span.bc-sidebar-link {
|
|
|
5662
5822
|
|
|
5663
5823
|
.b-dark .bc-tag__close:hover:not(:disabled) {
|
|
5664
5824
|
color: var(--text-normal-dark);
|
|
5665
|
-
border-color: var(--border-dark);
|
|
5825
|
+
border-color: var(--border-border-dark);
|
|
5666
5826
|
}
|
|
5667
5827
|
|
|
5668
5828
|
.bc-input-container__tags-selector {
|
|
@@ -5675,7 +5835,7 @@ span.bc-sidebar-link {
|
|
|
5675
5835
|
display: flex;
|
|
5676
5836
|
align-items: center;
|
|
5677
5837
|
justify-content: flex-end;
|
|
5678
|
-
gap: calc(var(--spacing-base) * 2);
|
|
5838
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
5679
5839
|
}
|
|
5680
5840
|
|
|
5681
5841
|
/* Switch Component */
|
|
@@ -5683,8 +5843,13 @@ span.bc-sidebar-link {
|
|
|
5683
5843
|
display: inline-flex;
|
|
5684
5844
|
flex-direction: row;
|
|
5685
5845
|
align-items: center;
|
|
5686
|
-
gap: calc(var(--spacing-base) * 2);
|
|
5846
|
+
gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
|
|
5687
5847
|
cursor: pointer;
|
|
5848
|
+
--switch-track-on-bg: var(--color-primary-500);
|
|
5849
|
+
--switch-track-on-label: var(--color-gray-100);
|
|
5850
|
+
--switch-track-on-bg-dark: var(--color-primary-600);
|
|
5851
|
+
--switch-track-on-label-dark: var(--text-normal-dark);
|
|
5852
|
+
--switch-track-on-border-dark: var(--color-primary-500);
|
|
5688
5853
|
}
|
|
5689
5854
|
|
|
5690
5855
|
/* Switch label */
|
|
@@ -5723,8 +5888,14 @@ span.bc-sidebar-link {
|
|
|
5723
5888
|
display: grid;
|
|
5724
5889
|
grid-template-areas: 'stack';
|
|
5725
5890
|
border-radius: var(--radius-full);
|
|
5726
|
-
box-shadow:
|
|
5727
|
-
|
|
5891
|
+
box-shadow: var(
|
|
5892
|
+
--shadow-switch-track,
|
|
5893
|
+
inset 0 0 calc(var(--spacing-base))
|
|
5894
|
+
color-mix(in srgb, var(--color-black) 20%, transparent)
|
|
5895
|
+
);
|
|
5896
|
+
transition: background-color
|
|
5897
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5898
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5728
5899
|
cursor: pointer;
|
|
5729
5900
|
padding: calc(var(--spacing-base)) var(--spacing-base);
|
|
5730
5901
|
}
|
|
@@ -5736,7 +5907,7 @@ span.bc-sidebar-link {
|
|
|
5736
5907
|
|
|
5737
5908
|
/* Switch track - on state */
|
|
5738
5909
|
.bc-switch__track--on {
|
|
5739
|
-
background-color: var(--color-primary-500);
|
|
5910
|
+
background-color: var(--switch-track-on-bg, var(--color-primary-500));
|
|
5740
5911
|
}
|
|
5741
5912
|
|
|
5742
5913
|
/* Switch labels inside track */
|
|
@@ -5745,7 +5916,9 @@ span.bc-sidebar-link {
|
|
|
5745
5916
|
display: flex;
|
|
5746
5917
|
align-items: center;
|
|
5747
5918
|
z-index: 1;
|
|
5748
|
-
transition: opacity
|
|
5919
|
+
transition: opacity
|
|
5920
|
+
var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
|
|
5921
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5749
5922
|
pointer-events: none;
|
|
5750
5923
|
}
|
|
5751
5924
|
|
|
@@ -5763,10 +5936,30 @@ span.bc-sidebar-link {
|
|
|
5763
5936
|
justify-content: flex-start;
|
|
5764
5937
|
padding-inline-end: calc(var(--spacing-base) * 5);
|
|
5765
5938
|
padding-inline-start: var(--spacing-base);
|
|
5766
|
-
color: var(--color-gray-100);
|
|
5939
|
+
color: var(--switch-track-on-label, var(--color-gray-100));
|
|
5767
5940
|
line-height: 1;
|
|
5768
5941
|
}
|
|
5769
5942
|
|
|
5943
|
+
.bc-switch--size-xs .bc-switch__track-label {
|
|
5944
|
+
font-size: var(--font-size-2xs);
|
|
5945
|
+
}
|
|
5946
|
+
|
|
5947
|
+
.bc-switch--size-sm .bc-switch__track-label {
|
|
5948
|
+
font-size: var(--font-size-xs);
|
|
5949
|
+
}
|
|
5950
|
+
|
|
5951
|
+
.bc-switch--size-md .bc-switch__track-label {
|
|
5952
|
+
font-size: var(--font-size-sm);
|
|
5953
|
+
}
|
|
5954
|
+
|
|
5955
|
+
.bc-switch--size-lg .bc-switch__track-label {
|
|
5956
|
+
font-size: var(--font-size-md);
|
|
5957
|
+
}
|
|
5958
|
+
|
|
5959
|
+
.bc-switch--size-xl .bc-switch__track-label {
|
|
5960
|
+
font-size: var(--font-size-lg);
|
|
5961
|
+
}
|
|
5962
|
+
|
|
5770
5963
|
/* Label visibility states */
|
|
5771
5964
|
.bc-switch__track-label--visible {
|
|
5772
5965
|
opacity: 1;
|
|
@@ -5784,11 +5977,15 @@ span.bc-sidebar-link {
|
|
|
5784
5977
|
/* margin-top: calc(var(--spacing-base) / 2); */
|
|
5785
5978
|
border-radius: var(--radius-full);
|
|
5786
5979
|
background-color: var(--color-white);
|
|
5787
|
-
box-shadow:
|
|
5788
|
-
|
|
5789
|
-
0 1px
|
|
5980
|
+
box-shadow: var(
|
|
5981
|
+
--shadow-switch-thumb,
|
|
5982
|
+
0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
|
|
5983
|
+
0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
|
|
5984
|
+
);
|
|
5790
5985
|
z-index: 1;
|
|
5791
|
-
transition: transform
|
|
5986
|
+
transition: transform
|
|
5987
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
5988
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5792
5989
|
pointer-events: none;
|
|
5793
5990
|
}
|
|
5794
5991
|
|
|
@@ -5897,12 +6094,12 @@ span.bc-sidebar-link {
|
|
|
5897
6094
|
|
|
5898
6095
|
.b-dark .bc-switch__track--off {
|
|
5899
6096
|
background-color: var(--bg-subtle-dark);
|
|
5900
|
-
border: 1px solid var(--border-dark);
|
|
6097
|
+
border: 1px solid var(--border-border-dark);
|
|
5901
6098
|
}
|
|
5902
6099
|
|
|
5903
6100
|
.b-dark .bc-switch__track--on {
|
|
5904
|
-
background-color: var(--color-primary-600);
|
|
5905
|
-
border: 1px solid var(--color-primary-500);
|
|
6101
|
+
background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
|
|
6102
|
+
border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
|
|
5906
6103
|
}
|
|
5907
6104
|
|
|
5908
6105
|
.b-dark .bc-switch__track-label--off {
|
|
@@ -5910,12 +6107,12 @@ span.bc-sidebar-link {
|
|
|
5910
6107
|
}
|
|
5911
6108
|
|
|
5912
6109
|
.b-dark .bc-switch__track-label--on {
|
|
5913
|
-
color: var(--text-normal-dark);
|
|
6110
|
+
color: var(--switch-track-on-label-dark, var(--text-normal-dark));
|
|
5914
6111
|
}
|
|
5915
6112
|
|
|
5916
6113
|
.b-dark .bc-switch__thumb {
|
|
5917
6114
|
background-color: var(--text-normal-dark);
|
|
5918
|
-
box-shadow: var(--shadow-md);
|
|
6115
|
+
box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
|
|
5919
6116
|
}
|
|
5920
6117
|
|
|
5921
6118
|
/* Tabs Component */
|
|
@@ -5973,18 +6170,25 @@ span.bc-sidebar-link {
|
|
|
5973
6170
|
background: none;
|
|
5974
6171
|
border: none;
|
|
5975
6172
|
cursor: pointer;
|
|
5976
|
-
font-family:
|
|
6173
|
+
font-family: var(
|
|
6174
|
+
--default-ui-font-family,
|
|
6175
|
+
var(--font-ui, var(--font-body, var(--font-family-sans)))
|
|
6176
|
+
);
|
|
5977
6177
|
font-weight: var(--font-weight-medium);
|
|
5978
6178
|
color: var(--color-base-600);
|
|
5979
|
-
transition: all
|
|
6179
|
+
transition: all
|
|
6180
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
6181
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
5980
6182
|
white-space: nowrap;
|
|
5981
6183
|
position: relative;
|
|
5982
|
-
border-radius: var(--radius-sm
|
|
6184
|
+
border-radius: var(--radius-control-sm, var(--radius-sm))
|
|
6185
|
+
var(--radius-control-sm, var(--radius-sm)) 0 0;
|
|
5983
6186
|
}
|
|
5984
6187
|
|
|
5985
6188
|
.bc-tabs--vertical .bc-tab {
|
|
5986
6189
|
justify-content: flex-start;
|
|
5987
|
-
border-radius: var(--radius-sm
|
|
6190
|
+
border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
|
|
6191
|
+
var(--radius-control-sm, var(--radius-sm));
|
|
5988
6192
|
}
|
|
5989
6193
|
|
|
5990
6194
|
/* Tab Sizes */
|
|
@@ -6040,7 +6244,9 @@ span.bc-sidebar-link {
|
|
|
6040
6244
|
content: '';
|
|
6041
6245
|
position: absolute;
|
|
6042
6246
|
background-color: var(--color-primary-500);
|
|
6043
|
-
transition: all
|
|
6247
|
+
transition: all
|
|
6248
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
6249
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
6044
6250
|
}
|
|
6045
6251
|
|
|
6046
6252
|
.bc-tabs--horizontal .bc-tab--active::after {
|
|
@@ -6083,12 +6289,14 @@ span.bc-sidebar-link {
|
|
|
6083
6289
|
.bc-tabs__panel {
|
|
6084
6290
|
padding: var(--spacing-lg);
|
|
6085
6291
|
background-color: var(--color-white);
|
|
6086
|
-
border-radius: 0 0 var(--radius-
|
|
6292
|
+
border-radius: 0 0 var(--radius-popover, var(--radius-md))
|
|
6293
|
+
var(--radius-popover, var(--radius-md));
|
|
6087
6294
|
min-height: 200px;
|
|
6088
6295
|
}
|
|
6089
6296
|
|
|
6090
6297
|
.bc-tabs--vertical .bc-tabs__panel {
|
|
6091
|
-
border-radius: 0 var(--radius-
|
|
6298
|
+
border-radius: 0 var(--radius-popover, var(--radius-md))
|
|
6299
|
+
var(--radius-popover, var(--radius-md)) 0;
|
|
6092
6300
|
height: 100%;
|
|
6093
6301
|
overflow-y: auto;
|
|
6094
6302
|
}
|
|
@@ -6180,7 +6388,7 @@ span.bc-sidebar-link {
|
|
|
6180
6388
|
max-width: 200px;
|
|
6181
6389
|
word-wrap: break-word;
|
|
6182
6390
|
z-index: var(--z-index-tooltip);
|
|
6183
|
-
box-shadow: var(--shadow-md);
|
|
6391
|
+
box-shadow: var(--shadow-popover, var(--shadow-md));
|
|
6184
6392
|
|
|
6185
6393
|
/* Ensure tooltip text doesn't interfere with pointer events */
|
|
6186
6394
|
pointer-events: none;
|
|
@@ -6197,7 +6405,7 @@ span.bc-sidebar-link {
|
|
|
6197
6405
|
.bc-tooltip__arrow svg {
|
|
6198
6406
|
width: 100%;
|
|
6199
6407
|
height: 100%;
|
|
6200
|
-
filter: drop-shadow(var(--shadow-md));
|
|
6408
|
+
filter: drop-shadow(var(--shadow-popover, var(--shadow-md)));
|
|
6201
6409
|
}
|
|
6202
6410
|
|
|
6203
6411
|
.bc-tooltip__arrow svg path {
|
|
@@ -6254,9 +6462,11 @@ span.bc-sidebar-link {
|
|
|
6254
6462
|
background-color: var(--bg-elevated-dark);
|
|
6255
6463
|
color: var(--text-normal-dark);
|
|
6256
6464
|
border: 1px solid var(--border-border-dark);
|
|
6257
|
-
box-shadow:
|
|
6465
|
+
box-shadow: var(
|
|
6466
|
+
--shadow-tooltip-dark,
|
|
6258
6467
|
0 10px 15px -3px var(--shadow-color-dark),
|
|
6259
|
-
0 4px 6px -2px var(--shadow-color-dark)
|
|
6468
|
+
0 4px 6px -2px var(--shadow-color-dark)
|
|
6469
|
+
);
|
|
6260
6470
|
}
|
|
6261
6471
|
|
|
6262
6472
|
.b-dark .bc-tooltip__arrow svg path {
|
|
@@ -6287,10 +6497,10 @@ span.bc-sidebar-link {
|
|
|
6287
6497
|
.bc-toolbar {
|
|
6288
6498
|
display: flex;
|
|
6289
6499
|
align-items: center;
|
|
6290
|
-
gap: var(--spacing-sm);
|
|
6500
|
+
gap: var(--spacing-stack-sm, var(--spacing-sm));
|
|
6291
6501
|
padding: var(--spacing-sm);
|
|
6292
6502
|
border: 1px solid var(--color-neutral-200);
|
|
6293
|
-
border-radius: var(--radius-md);
|
|
6503
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
6294
6504
|
background-color: var(--color-neutral-50);
|
|
6295
6505
|
width: 100%;
|
|
6296
6506
|
}
|
|
@@ -6339,7 +6549,7 @@ span.bc-sidebar-link {
|
|
|
6339
6549
|
outline-width: 1px;
|
|
6340
6550
|
outline-offset: -1px;
|
|
6341
6551
|
width: auto;
|
|
6342
|
-
box-shadow: none;
|
|
6552
|
+
box-shadow: var(--shadow-none, none);
|
|
6343
6553
|
}
|
|
6344
6554
|
|
|
6345
6555
|
/* Container queries for responsive behavior */
|
|
@@ -6378,13 +6588,15 @@ span.bc-sidebar-link {
|
|
|
6378
6588
|
/* Rating Input Component */
|
|
6379
6589
|
.bc-rating-input {
|
|
6380
6590
|
display: inline-flex;
|
|
6381
|
-
gap: calc(var(--spacing-base) * 1);
|
|
6591
|
+
gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
|
|
6382
6592
|
}
|
|
6383
6593
|
|
|
6384
6594
|
.bc-rating-input__icon-container {
|
|
6385
6595
|
position: relative;
|
|
6386
6596
|
cursor: pointer;
|
|
6387
|
-
transition: all
|
|
6597
|
+
transition: all
|
|
6598
|
+
var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
|
|
6599
|
+
var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
6388
6600
|
}
|
|
6389
6601
|
|
|
6390
6602
|
.bc-rating-input__icon-empty,
|
|
@@ -6414,9 +6626,9 @@ span.bc-sidebar-link {
|
|
|
6414
6626
|
.bc-notice {
|
|
6415
6627
|
display: flex;
|
|
6416
6628
|
flex-direction: row;
|
|
6417
|
-
gap: var(--spacing-md);
|
|
6629
|
+
gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
|
|
6418
6630
|
align-items: start;
|
|
6419
|
-
border-radius: var(--radius-md);
|
|
6631
|
+
border-radius: var(--radius-control, var(--radius-md));
|
|
6420
6632
|
padding: var(--spacing-md);
|
|
6421
6633
|
font-size: var(--font-size-sm);
|
|
6422
6634
|
}
|
|
@@ -6463,10 +6675,10 @@ span.bc-sidebar-link {
|
|
|
6463
6675
|
color: var(--color-warning-900);
|
|
6464
6676
|
}
|
|
6465
6677
|
|
|
6466
|
-
.bc-notice--
|
|
6467
|
-
background-color: var(--color-
|
|
6468
|
-
border-color: var(--color-
|
|
6469
|
-
color: var(--color-
|
|
6678
|
+
.bc-notice--danger.bc-notice--tone-prominent {
|
|
6679
|
+
background-color: var(--color-danger-50);
|
|
6680
|
+
border-color: var(--color-danger-200);
|
|
6681
|
+
color: var(--color-danger-900);
|
|
6470
6682
|
}
|
|
6471
6683
|
|
|
6472
6684
|
.bc-notice--info.bc-notice--tone-subtle {
|
|
@@ -6484,9 +6696,9 @@ span.bc-sidebar-link {
|
|
|
6484
6696
|
color: var(--color-warning-800);
|
|
6485
6697
|
}
|
|
6486
6698
|
|
|
6487
|
-
.bc-notice--
|
|
6699
|
+
.bc-notice--danger.bc-notice--tone-subtle {
|
|
6488
6700
|
background-color: var(--bg-surface-light);
|
|
6489
|
-
color: var(--color-
|
|
6701
|
+
color: var(--color-danger-800);
|
|
6490
6702
|
}
|
|
6491
6703
|
|
|
6492
6704
|
.bc-notice__body {
|