@tempots/beatui 0.87.4 → 0.89.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.
Files changed (90) hide show
  1. package/dist/{ar-Dn7AkNO5.js → ar-MUKILk4c.js} +1 -1
  2. package/dist/auth/index.es.js +1 -1
  3. package/dist/{auth-divider-BZPM2Xd3.js → auth-divider-DvVmqjnk.js} +7 -7
  4. package/dist/beatui.css +737 -671
  5. package/dist/beatui.tailwind.css +719 -662
  6. package/dist/better-auth/index.es.js +5 -5
  7. package/dist/{colors-CatA-RXf.js → colors-BY0Ja_bf.js} +3 -3
  8. package/dist/{de-QYhBiWv7.js → de-CEsW1rVX.js} +1 -1
  9. package/dist/deep-merge-Dgy9xj6w.cjs +1 -0
  10. package/dist/{deep-merge-D076XcC5.js → deep-merge-OvVqSLSN.js} +322 -304
  11. package/dist/{duration-input-6RN16H08.js → duration-input-BCXujp0V.js} +4 -4
  12. package/dist/{duration-input-CJU-yeKk.cjs → duration-input-MJz6UO6E.cjs} +1 -1
  13. package/dist/{editor-toolbar-group-DRCbXeQP.js → editor-toolbar-group-Cnta0SOa.js} +2 -2
  14. package/dist/{es-Ba31pZAd.js → es-ChP-aFwC.js} +1 -1
  15. package/dist/{fa-DvLjl_Ha.js → fa-CNsrlIqh.js} +1 -1
  16. package/dist/{fr-D64yBpAp.js → fr-DgEFKpML.js} +1 -1
  17. package/dist/{he-DHZGEQ7C.js → he-B4TqfISZ.js} +1 -1
  18. package/dist/{hi-CeAXVCvp.js → hi-TSoDsngT.js} +1 -1
  19. package/dist/{index-KNk3k6NI.js → index-1JaBwDB-.js} +1 -1
  20. package/dist/index-B8cqD9ny.js +838 -0
  21. package/dist/index-CN10Cyqr.cjs +1 -0
  22. package/dist/{index-yMrXbIdg.cjs → index-CTcbhnPw.cjs} +1 -1
  23. package/dist/{index-BIGCKfNz.cjs → index-D3QVPAme.cjs} +2 -2
  24. package/dist/{index-Bso_SkEn.cjs → index-D4ZFV8Rs.cjs} +1 -1
  25. package/dist/{index-anrXec7K.cjs → index-DF7RFzD9.cjs} +1 -1
  26. package/dist/{index-DWDC-qRY.js → index-DOc1_-Nm.js} +1 -1
  27. package/dist/{index-BTITknMc.js → index-D_aTUfqS.js} +6 -6
  28. package/dist/{index-BFe-x3-z.js → index-DfPkCwdC.js} +2 -2
  29. package/dist/index.cjs.js +4 -4
  30. package/dist/index.es.js +1500 -1472
  31. package/dist/{input-container-BTyCOubf.js → input-container-BBWCDGTv.js} +1 -1
  32. package/dist/{it-Im0KgKWL.js → it-BrbebXg4.js} +1 -1
  33. package/dist/{ja-lliCbC19.js → ja-DcfOktrV.js} +1 -1
  34. package/dist/json-schema/index.cjs.js +1 -1
  35. package/dist/json-schema/index.es.js +11 -11
  36. package/dist/json-schema-display/index.es.js +1 -1
  37. package/dist/json-structure/index.cjs.js +1 -1
  38. package/dist/json-structure/index.es.js +6 -6
  39. package/dist/{ko-B9W4RBBs.js → ko-73e6t369.js} +1 -1
  40. package/dist/lexical/index.cjs.js +1 -1
  41. package/dist/lexical/index.es.js +7 -7
  42. package/dist/lexical.css +24 -23
  43. package/dist/markdown/index.cjs.js +1 -1
  44. package/dist/markdown/index.es.js +1 -1
  45. package/dist/markdown.css +7 -7
  46. package/dist/{modal-CD3DwAlD.js → modal-BBJWY7NB.js} +3 -3
  47. package/dist/{nl-ba5SyHsw.js → nl-Bq-1-ulc.js} +1 -1
  48. package/dist/{notice-Cc26kgiB.js → notice-AUVH8Lho.js} +4 -4
  49. package/dist/{oneof-branch-detection-DiAtgGQH.js → oneof-branch-detection-BQnRjp9P.js} +1 -1
  50. package/dist/{pl-DCiJAZWC.js → pl-Du9-VCfW.js} +1 -1
  51. package/dist/prosemirror/index.cjs.js +1 -1
  52. package/dist/prosemirror/index.es.js +1 -1
  53. package/dist/prosemirror.css +7 -7
  54. package/dist/{pt-Df5bAGWA.js → pt-B2UqqSAB.js} +1 -1
  55. package/dist/{ru-Dg-c670Y.js → ru-DiWa2inw.js} +1 -1
  56. package/dist/styles-url-4g2WnNJ8.js +4 -0
  57. package/dist/{styles-url-DZhZ-9Bf.js → styles-url-CJYy5nML.js} +1 -1
  58. package/dist/{styles-url-YAJ6Q1GS.cjs → styles-url-D8nVwSmZ.cjs} +1 -1
  59. package/dist/{styles-url-BSUFsmMD.cjs → styles-url-evUdl8tK.cjs} +1 -1
  60. package/dist/{styles-url-BvcVGpBJ.js → styles-url-hKxIOumK.js} +1 -1
  61. package/dist/styles-url-mlDYoWbF.cjs +1 -0
  62. package/dist/tailwind/preset.cjs.js +1 -1
  63. package/dist/tailwind/preset.es.js +2 -2
  64. package/dist/tailwind/vite-plugin.cjs.js +1 -1
  65. package/dist/tailwind/vite-plugin.es.js +1 -1
  66. package/dist/{text-input-Cux5iiUC.js → text-input-6FD7p7hN.js} +1 -1
  67. package/dist/{toolbar-DYmKrtic.js → toolbar-Cr0JGj5h.js} +1 -1
  68. package/dist/{tr-Dhpiq0u_.js → tr-Culcm2Zb.js} +1 -1
  69. package/dist/{translations-COSDzhvR.js → translations-Cttn6w0G.js} +1 -1
  70. package/dist/{translations-BLlzvZgw.js → translations-uEUkO6gJ.js} +19 -19
  71. package/dist/types/components/form/input/step-utils.d.ts +5 -0
  72. package/dist/types/tailwind/preset.d.ts +1 -1
  73. package/dist/types/tailwind/vite-plugin.d.ts +1 -1
  74. package/dist/types/tokens/borders.d.ts +104 -0
  75. package/dist/types/tokens/controls.d.ts +127 -0
  76. package/dist/types/tokens/index.d.ts +2 -0
  77. package/dist/types/tokens/radius.d.ts +14 -14
  78. package/dist/types/tokens/typography.d.ts +33 -33
  79. package/dist/{ur-Lr1p8f9y.js → ur-Deb-uH6b.js} +1 -1
  80. package/dist/{use-form-BfzX3bwL.js → use-form-lg6-7Brc.js} +3 -2
  81. package/dist/{vi-jozfaxSj.js → vi-CUsCVh3n.js} +1 -1
  82. package/dist/{widget-customization-BZqPoojo.cjs → widget-customization-BLvD4Lqt.cjs} +1 -1
  83. package/dist/{widget-customization-fMNSVtuP.js → widget-customization-CDD72zYs.js} +5 -5
  84. package/dist/{zh-BBYKq49d.js → zh-Dil2Jft8.js} +1 -1
  85. package/package.json +11 -11
  86. package/dist/deep-merge-BmxkFFi1.cjs +0 -1
  87. package/dist/index-BywbRDsb.cjs +0 -1
  88. package/dist/index-rHnH2IGb.js +0 -671
  89. package/dist/styles-url-CCopc5pG.js +0 -4
  90. package/dist/styles-url-CEDSZTyZ.cjs +0 -1
package/dist/beatui.css CHANGED
@@ -346,36 +346,36 @@ ol {
346
346
  --spacing-3xl: calc(var(--spacing-base) * 12);
347
347
  --spacing-4xl: calc(var(--spacing-base) * 16);
348
348
  --spacing-full: 2000px;
349
- --base-font-size: 1rem;
350
- --font-size-3xs: calc(var(--base-font-size) * 0.5);
351
- --font-size-3xs-lh: calc(var(--base-font-size) * 0.75);
352
- --font-size-2xs: calc(var(--base-font-size) * 0.625);
353
- --font-size-2xs-lh: calc(var(--base-font-size) * 0.75);
354
- --font-size-xs: calc(var(--base-font-size) * 0.75);
355
- --font-size-xs-lh: var(--base-font-size);
356
- --font-size-sm: calc(var(--base-font-size) * 0.875);
357
- --font-size-sm-lh: calc(var(--base-font-size) * 1.25);
358
- --font-size-md: var(--base-font-size);
359
- --font-size-md-lh: calc(var(--base-font-size) * 1.5);
360
- --font-size-lg: calc(var(--base-font-size) * 1.125);
361
- --font-size-lg-lh: calc(var(--base-font-size) * 1.75);
362
- --font-size-xl: calc(var(--base-font-size) * 1.25);
363
- --font-size-xl-lh: calc(var(--base-font-size) * 1.75);
364
- --font-size-2xl: calc(var(--base-font-size) * 1.5);
365
- --font-size-2xl-lh: calc(var(--base-font-size) * 2);
366
- --font-size-3xl: calc(var(--base-font-size) * 1.875);
367
- --font-size-3xl-lh: calc(var(--base-font-size) * 2.25);
368
- --font-size-4xl: calc(var(--base-font-size) * 2.25);
369
- --font-size-4xl-lh: calc(var(--base-font-size) * 2.5);
370
- --font-size-5xl: calc(var(--base-font-size) * 3);
349
+ --font-size-base: 1rem;
350
+ --font-size-3xs: calc(var(--font-size-base) * 0.5);
351
+ --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
352
+ --font-size-2xs: calc(var(--font-size-base) * 0.625);
353
+ --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
354
+ --font-size-xs: calc(var(--font-size-base) * 0.75);
355
+ --font-size-xs-lh: var(--font-size-base);
356
+ --font-size-sm: calc(var(--font-size-base) * 0.875);
357
+ --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
358
+ --font-size-md: var(--font-size-base);
359
+ --font-size-md-lh: calc(var(--font-size-base) * 1.5);
360
+ --font-size-lg: calc(var(--font-size-base) * 1.125);
361
+ --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
362
+ --font-size-xl: calc(var(--font-size-base) * 1.25);
363
+ --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
364
+ --font-size-2xl: calc(var(--font-size-base) * 1.5);
365
+ --font-size-2xl-lh: calc(var(--font-size-base) * 2);
366
+ --font-size-3xl: calc(var(--font-size-base) * 1.875);
367
+ --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
368
+ --font-size-4xl: calc(var(--font-size-base) * 2.25);
369
+ --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
370
+ --font-size-5xl: calc(var(--font-size-base) * 3);
371
371
  --font-size-5xl-lh: 1;
372
- --font-size-6xl: calc(var(--base-font-size) * 3.75);
372
+ --font-size-6xl: calc(var(--font-size-base) * 3.75);
373
373
  --font-size-6xl-lh: 1;
374
- --font-size-7xl: calc(var(--base-font-size) * 4.5);
374
+ --font-size-7xl: calc(var(--font-size-base) * 4.5);
375
375
  --font-size-7xl-lh: 1;
376
- --font-size-8xl: calc(var(--base-font-size) * 6);
376
+ --font-size-8xl: calc(var(--font-size-base) * 6);
377
377
  --font-size-8xl-lh: 1;
378
- --font-size-9xl: calc(var(--base-font-size) * 8);
378
+ --font-size-9xl: calc(var(--font-size-base) * 8);
379
379
  --font-size-9xl-lh: 1;
380
380
  --font-weight-thin: 100;
381
381
  --font-weight-extralight: 200;
@@ -410,11 +410,11 @@ ol {
410
410
  --breakpoint-xl: 80rem;
411
411
  --breakpoint-2xl: 96rem;
412
412
  --radius-none: 0;
413
- --radius-xs: calc(var(--spacing-base) / 2);
414
- --radius-sm: var(--spacing-base);
415
- --radius-md: calc(var(--spacing-base) * 1.5);
416
- --radius-lg: calc(var(--spacing-base) * 2);
417
- --radius-xl: calc(var(--spacing-base) * 3);
413
+ --radius-xs: var(--spacing-xs);
414
+ --radius-sm: var(--spacing-sm);
415
+ --radius-md: var(--spacing-smh);
416
+ --radius-lg: var(--spacing-md);
417
+ --radius-xl: var(--spacing-mdh);
418
418
  --radius-full: 9999px;
419
419
  --shadow-none: none;
420
420
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -456,6 +456,40 @@ ol {
456
456
  --z-index-popover: 80;
457
457
  --z-index-notification: 90;
458
458
  --z-index-maximum: 100;
459
+ --border-width-none: 0;
460
+ --border-width-thin: 1px;
461
+ --border-width-default: 1.5px;
462
+ --border-width-medium: 2px;
463
+ --border-width-thick: 3px;
464
+ --outline-width-none: 0;
465
+ --outline-width-default: 1px;
466
+ --outline-width-focus: 2px;
467
+ --control-height-xs: calc(var(--spacing-base) * 7);
468
+ --control-height-sm: calc(var(--spacing-base) * 8);
469
+ --control-height-md: calc(var(--spacing-base) * 10);
470
+ --control-height-lg: calc(var(--spacing-base) * 12);
471
+ --control-height-xl: calc(var(--spacing-base) * 14);
472
+ --control-padding-block-xs: var(--spacing-xs);
473
+ --control-padding-block-sm: var(--spacing-sm);
474
+ --control-padding-block-md: var(--spacing-md);
475
+ --control-padding-block-lg: var(--spacing-mdh);
476
+ --control-padding-block-xl: var(--spacing-lg);
477
+ --control-padding-inline-xs: var(--spacing-md);
478
+ --control-padding-inline-sm: var(--spacing-mdh);
479
+ --control-padding-inline-md: var(--spacing-lg);
480
+ --control-padding-inline-lg: var(--spacing-lgh);
481
+ --control-padding-inline-xl: var(--spacing-xl);
482
+ --control-gap-xs: var(--spacing-xs);
483
+ --control-gap-sm: var(--spacing-sm);
484
+ --control-gap-md: var(--spacing-smh);
485
+ --control-gap-lg: var(--spacing-md);
486
+ --control-gap-xl: var(--spacing-mdh);
487
+ --overlay-width-xs: min(20rem, 90vw);
488
+ --overlay-width-sm: min(25rem, 90vw);
489
+ --overlay-width-md: min(37.5rem, 90vw);
490
+ --overlay-width-lg: min(50rem, 90vw);
491
+ --overlay-width-xl: min(62.5rem, 90vw);
492
+ --overlay-width-min-width: 12rem;
459
493
  }
460
494
 
461
495
  :root {
@@ -580,12 +614,12 @@ ol {
580
614
  --font-mono: var(--font-family-mono);
581
615
  --font-ui: var(--font-family-sans);
582
616
  --font-prose: var(--font-family-serif);
583
- --default-font-family: var(--font-body);
584
- --default-heading-font-family: var(--font-heading);
585
- --default-display-font-family: var(--font-display);
586
- --default-ui-font-family: var(--font-ui);
587
- --default-prose-font-family: var(--font-prose);
588
- --default-mono-font-family: var(--font-mono);
617
+ --font-family-default: var(--font-body);
618
+ --font-family-default-heading: var(--font-heading);
619
+ --font-family-default-display: var(--font-display);
620
+ --font-family-default-ui: var(--font-ui);
621
+ --font-family-default-prose: var(--font-prose);
622
+ --font-family-default-mono: var(--font-mono);
589
623
  --radius-control: var(--radius-md);
590
624
  --radius-control-sm: var(--radius-sm);
591
625
  --radius-control-xs: var(--radius-xs);
@@ -606,12 +640,12 @@ ol {
606
640
  --motion-transition-overlay: var(--motion-duration-relaxed);
607
641
  --motion-transition-emphasis: var(--motion-duration-fast);
608
642
  --motion-easing-emphasis: var(--motion-easing-emphasized);
609
- --spacing-stack-2xs: calc(var(--spacing-base) / 2);
610
- --spacing-stack-xs: calc(var(--spacing-base) * 1);
611
- --spacing-stack-sm: calc(var(--spacing-base) * 2);
612
- --spacing-stack-md: calc(var(--spacing-base) * 3);
613
- --spacing-stack-lg: calc(var(--spacing-base) * 4);
614
- --spacing-stack-xl: calc(var(--spacing-base) * 6);
643
+ --spacing-stack-2xs: var(--spacing-xs);
644
+ --spacing-stack-xs: var(--spacing-sm);
645
+ --spacing-stack-sm: var(--spacing-md);
646
+ --spacing-stack-md: var(--spacing-mdh);
647
+ --spacing-stack-lg: var(--spacing-lg);
648
+ --spacing-stack-xl: var(--spacing-xl);
615
649
  --text-shadow-button-filled: var(--text-shadow-sm);
616
650
  --text-shadow-button-light: var(--text-shadow-xs);
617
651
  --text-shadow-button-default: var(--text-shadow-2xs);
@@ -637,7 +671,7 @@ html,
637
671
  -webkit-text-size-adjust: 100%;
638
672
  tab-size: 4;
639
673
  font-family: var(
640
- --default-font-family,
674
+ --font-family-default,
641
675
  ui-sans-serif,
642
676
  system-ui,
643
677
  sans-serif,
@@ -646,8 +680,11 @@ html,
646
680
  'Segoe UI Symbol',
647
681
  'Noto Color Emoji'
648
682
  );
649
- font-feature-settings: var(--default-font-feature-settings, normal);
650
- font-variation-settings: var(--default-font-variation-settings, normal);
683
+ font-feature-settings: var(--font-family-default-feature-settings, normal);
684
+ font-variation-settings: var(
685
+ --font-family-default-variation-settings,
686
+ normal
687
+ );
651
688
  font-size: var(--font-size-base, 1rem);
652
689
  color: var(--text-normal-light, var(--color-neutral-900));
653
690
  background-color: var(--bg-background-light, var(--color-white));
@@ -665,7 +702,7 @@ body {
665
702
  hr {
666
703
  height: 0;
667
704
  color: inherit;
668
- border-top-width: 1px;
705
+ border-top-width: var(--border-width-thin);
669
706
  }
670
707
 
671
708
  abbr:where([title]) {
@@ -682,7 +719,7 @@ h6 {
682
719
  font-size: inherit;
683
720
  font-weight: inherit;
684
721
  font-family: var(
685
- --default-heading-font-family,
722
+ --font-family-default-heading,
686
723
  var(--font-heading, var(--font-body, var(--font-family-sans)))
687
724
  );
688
725
  }
@@ -703,7 +740,7 @@ kbd,
703
740
  samp,
704
741
  pre {
705
742
  font-family: var(
706
- --default-mono-font-family,
743
+ --font-family-default-mono,
707
744
  ui-monospace,
708
745
  SFMono-Regular,
709
746
  Menlo,
@@ -713,8 +750,14 @@ pre {
713
750
  'Courier New',
714
751
  monospace
715
752
  );
716
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
717
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
753
+ font-feature-settings: var(
754
+ --font-family-default-mono-feature-settings,
755
+ normal
756
+ );
757
+ font-variation-settings: var(
758
+ --font-family-default-mono-variation-settings,
759
+ normal
760
+ );
718
761
  font-size: 1em;
719
762
  }
720
763
 
@@ -853,7 +896,7 @@ textarea {
853
896
  }
854
897
 
855
898
  ::-webkit-calendar-picker-indicator {
856
- line-height: 1;
899
+ line-height: var(--line-height-none);
857
900
  }
858
901
 
859
902
  :-moz-ui-invalid {
@@ -993,7 +1036,8 @@ input:where([type='button'], [type='reset'], [type='submit']),
993
1036
 
994
1037
  .b-rtl blockquote,
995
1038
  .b-ltr blockquote {
996
- border-inline-start: 4px solid var(--color-base-300);
1039
+ border-inline-start: calc(2 * var(--border-width-medium)) solid
1040
+ var(--color-base-300);
997
1041
  border-inline-end: none;
998
1042
  padding-inline-start: 1rem;
999
1043
  padding-inline-end: 0;
@@ -1147,7 +1191,7 @@ a:focus-visible {
1147
1191
  padding: var(--spacing-md);
1148
1192
 
1149
1193
  /* Border */
1150
- border: 2px solid var(--action-card-border);
1194
+ border: var(--border-width-medium) solid var(--action-card-border);
1151
1195
  border-radius: var(--radius-lg);
1152
1196
 
1153
1197
  /* Background */
@@ -1288,7 +1332,7 @@ a:focus-visible {
1288
1332
 
1289
1333
  /* Focus styles for accessibility */
1290
1334
  .bc-action-card--clickable:focus-visible {
1291
- outline: 2px solid var(--color-primary-500);
1335
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
1292
1336
  outline-offset: 2px;
1293
1337
  }
1294
1338
 
@@ -1310,7 +1354,7 @@ a:focus-visible {
1310
1354
  --animation-easing: cubic-bezier(0.2, 0, 0, 1);
1311
1355
  --scale-factor: 0.95;
1312
1356
  --transform-origin: center;
1313
- --slide-distance: calc(var(--spacing-base) * 6);
1357
+ --slide-distance: var(--spacing-xl);
1314
1358
 
1315
1359
  transition-property: opacity, transform;
1316
1360
  transition-duration: var(--animation-duration);
@@ -1630,7 +1674,7 @@ a:focus-visible {
1630
1674
  /* High contrast mode support */
1631
1675
  @media (prefers-contrast: high) {
1632
1676
  .bc-auth-container--styled {
1633
- border: 2px solid var(--border-default);
1677
+ border: var(--border-width-medium) solid var(--border-default);
1634
1678
  }
1635
1679
 
1636
1680
  .dark .bc-auth-container--styled {
@@ -1703,7 +1747,7 @@ a:focus-visible {
1703
1747
  .bc-auth-form__social {
1704
1748
  display: flex;
1705
1749
  flex-direction: column;
1706
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
1750
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
1707
1751
  }
1708
1752
 
1709
1753
  /* Form fields */
@@ -1716,7 +1760,7 @@ a:focus-visible {
1716
1760
  .bc-auth-form__fields {
1717
1761
  display: flex;
1718
1762
  flex-direction: column;
1719
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
1763
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
1720
1764
  }
1721
1765
 
1722
1766
  /* Remember me checkbox */
@@ -1790,7 +1834,7 @@ a:focus-visible {
1790
1834
  }
1791
1835
 
1792
1836
  .bc-auth-form__link:focus-visible {
1793
- outline: 2px solid var(--interactive-focus);
1837
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
1794
1838
  outline-offset: 2px;
1795
1839
  }
1796
1840
 
@@ -1806,7 +1850,7 @@ a:focus-visible {
1806
1850
  /* Responsive adjustments */
1807
1851
  @media (width < 40rem) {
1808
1852
  .bc-auth-form {
1809
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
1853
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
1810
1854
  }
1811
1855
 
1812
1856
  .bc-auth-form__title {
@@ -1814,7 +1858,7 @@ a:focus-visible {
1814
1858
  }
1815
1859
 
1816
1860
  .bc-auth-form__fields {
1817
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
1861
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
1818
1862
  }
1819
1863
  }
1820
1864
 
@@ -1834,8 +1878,8 @@ a:focus-visible {
1834
1878
  }
1835
1879
 
1836
1880
  .bc-social-login-buttons.bc-stack {
1837
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
1838
- padding-inline: calc(var(--spacing-base) * 8);
1881
+ gap: var(--spacing-stack-sm, var(--spacing-md));
1882
+ padding-inline: var(--spacing-2xl);
1839
1883
  width: 100%;
1840
1884
  }
1841
1885
 
@@ -1848,7 +1892,7 @@ a:focus-visible {
1848
1892
  align-items: center;
1849
1893
  justify-content: center;
1850
1894
  width: 100%;
1851
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
1895
+ gap: var(--spacing-stack-sm, var(--spacing-md));
1852
1896
  }
1853
1897
 
1854
1898
  .bc-social-login-button__icon {
@@ -1857,7 +1901,7 @@ a:focus-visible {
1857
1901
  justify-content: center;
1858
1902
  background-color: var(--color-white);
1859
1903
  border-radius: var(--radius-full);
1860
- padding: calc(var(--spacing-base) * 1);
1904
+ padding: var(--spacing-sm);
1861
1905
  }
1862
1906
 
1863
1907
  .dark .bc-social-login-button__icon {
@@ -1878,7 +1922,7 @@ a:focus-visible {
1878
1922
  align-items: center;
1879
1923
  justify-content: center;
1880
1924
  text-align: center;
1881
- padding-inline: calc(var(--spacing-base) * 4);
1925
+ padding-inline: var(--spacing-lg);
1882
1926
  }
1883
1927
 
1884
1928
  /* Provider-specific icon backgrounds and colors */
@@ -2039,7 +2083,7 @@ a:focus-visible {
2039
2083
  .bc-two-factor__methods {
2040
2084
  display: flex;
2041
2085
  gap: var(--spacing-sm);
2042
- border-bottom: 1px solid var(--color-neutral-200);
2086
+ border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
2043
2087
  padding-bottom: var(--spacing-sm);
2044
2088
  }
2045
2089
 
@@ -2068,7 +2112,7 @@ a:focus-visible {
2068
2112
  .bc-two-factor__method-button--active {
2069
2113
  color: var(--color-primary-600);
2070
2114
  font-weight: var(--font-weight-semibold);
2071
- border-bottom: 2px solid var(--color-primary-600);
2115
+ border-bottom: var(--border-width-medium) solid var(--color-primary-600);
2072
2116
  }
2073
2117
 
2074
2118
  .dark .bc-two-factor__method-button:hover {
@@ -2178,7 +2222,7 @@ a:focus-visible {
2178
2222
  padding: var(--spacing-sm) var(--spacing-md);
2179
2223
  background-color: var(--color-neutral-50);
2180
2224
  border-radius: var(--radius-md);
2181
- border: 1px solid var(--color-neutral-200);
2225
+ border: var(--border-width-thin) solid var(--color-neutral-200);
2182
2226
  }
2183
2227
 
2184
2228
  .dark .bc-passkey-item {
@@ -2247,7 +2291,7 @@ a:focus-visible {
2247
2291
  background-color: var(--avatar-bg);
2248
2292
  color: var(--avatar-text);
2249
2293
  font-family: var(
2250
- --default-ui-font-family,
2294
+ --font-family-default-ui,
2251
2295
  var(--font-ui, var(--font-body, var(--font-family-sans)))
2252
2296
  );
2253
2297
  user-select: none;
@@ -2266,7 +2310,7 @@ a:focus-visible {
2266
2310
  /* Initials text */
2267
2311
  .bc-avatar__initials {
2268
2312
  font-weight: var(--font-weight-semibold);
2269
- line-height: 1;
2313
+ line-height: var(--line-height-none);
2270
2314
  text-align: center;
2271
2315
  text-transform: uppercase;
2272
2316
  }
@@ -2282,32 +2326,32 @@ a:focus-visible {
2282
2326
 
2283
2327
  /* Size variants */
2284
2328
  .bc-avatar--size-xs {
2285
- width: calc(var(--spacing-base) * 6);
2286
- height: calc(var(--spacing-base) * 6);
2329
+ width: var(--spacing-xl);
2330
+ height: var(--spacing-xl);
2287
2331
  font-size: var(--font-size-xs);
2288
2332
  }
2289
2333
 
2290
2334
  .bc-avatar--size-sm {
2291
- width: calc(var(--spacing-base) * 8);
2292
- height: calc(var(--spacing-base) * 8);
2335
+ width: var(--spacing-2xl);
2336
+ height: var(--spacing-2xl);
2293
2337
  font-size: var(--font-size-sm);
2294
2338
  }
2295
2339
 
2296
2340
  .bc-avatar--size-md {
2297
- width: calc(var(--spacing-base) * 10);
2298
- height: calc(var(--spacing-base) * 10);
2341
+ width: var(--spacing-2xlh);
2342
+ height: var(--spacing-2xlh);
2299
2343
  font-size: var(--font-size-md);
2300
2344
  }
2301
2345
 
2302
2346
  .bc-avatar--size-lg {
2303
- width: calc(var(--spacing-base) * 12);
2304
- height: calc(var(--spacing-base) * 12);
2347
+ width: var(--spacing-3xl);
2348
+ height: var(--spacing-3xl);
2305
2349
  font-size: var(--font-size-lg);
2306
2350
  }
2307
2351
 
2308
2352
  .bc-avatar--size-xl {
2309
- width: calc(var(--spacing-base) * 16);
2310
- height: calc(var(--spacing-base) * 16);
2353
+ width: var(--spacing-4xl);
2354
+ height: var(--spacing-4xl);
2311
2355
  font-size: var(--font-size-xl);
2312
2356
  }
2313
2357
 
@@ -2328,7 +2372,7 @@ a:focus-visible {
2328
2372
 
2329
2373
  /* Bordered variant */
2330
2374
  .bc-avatar--bordered {
2331
- border: 2px solid var(--color-white);
2375
+ border: var(--border-width-medium) solid var(--color-white);
2332
2376
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
2333
2377
  }
2334
2378
 
@@ -2352,7 +2396,7 @@ a:focus-visible {
2352
2396
  /* Add border to overlapping avatars for better separation */
2353
2397
  .bc-avatar-group--spacing-tight > .bc-avatar,
2354
2398
  .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2355
- border: 2px solid var(--color-white);
2399
+ border: var(--border-width-medium) solid var(--color-white);
2356
2400
  }
2357
2401
 
2358
2402
  /* Normal spacing - standard gap */
@@ -2384,12 +2428,12 @@ a:focus-visible {
2384
2428
  /* Accessibility adjustments */
2385
2429
  @media (prefers-contrast: high) {
2386
2430
  .bc-avatar--bordered {
2387
- border-width: 3px;
2431
+ border-width: var(--border-width-thick);
2388
2432
  }
2389
2433
 
2390
2434
  .bc-avatar-group--spacing-tight > .bc-avatar,
2391
2435
  .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2392
- border-width: 3px;
2436
+ border-width: var(--border-width-thick);
2393
2437
  }
2394
2438
  }
2395
2439
 
@@ -2415,13 +2459,13 @@ a:focus-visible {
2415
2459
  display: inline-flex;
2416
2460
  align-items: center;
2417
2461
  justify-content: center;
2418
- border: 1.5px solid var(--badge-border);
2462
+ border: var(--border-width-default) solid var(--badge-border);
2419
2463
  font-family: var(
2420
- --default-ui-font-family,
2464
+ --font-family-default-ui,
2421
2465
  var(--font-ui, var(--font-body, var(--font-family-sans)))
2422
2466
  );
2423
2467
  font-size: inherit;
2424
- line-height: 1;
2468
+ line-height: var(--line-height-none);
2425
2469
  border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
2426
2470
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
2427
2471
  background-color: var(--badge-bg);
@@ -2433,40 +2477,37 @@ a:focus-visible {
2433
2477
  display: flex;
2434
2478
  align-items: center;
2435
2479
  justify-content: center;
2436
- gap: var(
2437
- --badge-gap,
2438
- var(--spacing-stack-2xs, calc(var(--spacing-base) / 2))
2439
- );
2480
+ gap: var(--badge-gap, var(--control-gap-md));
2440
2481
  }
2441
2482
 
2442
2483
  /* Size variants */
2443
2484
  .bc-badge--size-xs {
2444
2485
  font-size: var(--font-size-xs);
2445
- padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1);
2486
+ padding: var(--spacing-xs) var(--spacing-sm);
2446
2487
  --badge-gap: calc(var(--spacing-base) * 0.25);
2447
2488
  }
2448
2489
 
2449
2490
  .bc-badge--size-sm {
2450
2491
  font-size: var(--font-size-sm);
2451
- padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 1.5);
2452
- --badge-gap: calc(var(--spacing-base) * 0.5);
2492
+ padding: calc(var(--spacing-base) * 0.75) var(--spacing-smh);
2493
+ --badge-gap: var(--spacing-xs);
2453
2494
  }
2454
2495
 
2455
2496
  .bc-badge--size-md {
2456
2497
  font-size: var(--font-size-md);
2457
- padding: var(--spacing-base) calc(var(--spacing-base) * 2);
2498
+ padding: var(--spacing-sm) var(--spacing-md);
2458
2499
  --badge-gap: calc(var(--spacing-base) * 0.75);
2459
2500
  }
2460
2501
 
2461
2502
  .bc-badge--size-lg {
2462
2503
  font-size: var(--font-size-lg);
2463
2504
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
2464
- --badge-gap: var(--spacing-base);
2505
+ --badge-gap: var(--spacing-sm);
2465
2506
  }
2466
2507
 
2467
2508
  .bc-badge--size-xl {
2468
2509
  font-size: var(--font-size-xl);
2469
- padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
2510
+ padding: var(--spacing-smh) var(--spacing-mdh);
2470
2511
  --badge-gap: calc(var(--spacing-base) * 1.25);
2471
2512
  }
2472
2513
 
@@ -2479,23 +2520,35 @@ a:focus-visible {
2479
2520
  }
2480
2521
 
2481
2522
  .bc-badge--circle.bc-badge--size-xs {
2482
- min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1 + 3px);
2523
+ min-width: calc(
2524
+ var(--font-size-xs) + var(--spacing-base) * 1 + var(--border-width-thick)
2525
+ );
2483
2526
  }
2484
2527
 
2485
2528
  .bc-badge--circle.bc-badge--size-sm {
2486
- min-width: calc(var(--font-size-sm) + var(--spacing-base) * 1.5 + 3px);
2529
+ min-width: calc(
2530
+ var(--font-size-sm) + var(--spacing-base) * 1.5 + var(--border-width-thick)
2531
+ );
2487
2532
  }
2488
2533
 
2489
2534
  .bc-badge--circle.bc-badge--size-md {
2490
- min-width: calc(var(--font-size-md) + var(--spacing-base) * 2 + 3px);
2535
+ min-width: calc(
2536
+ var(--font-size-md) + var(--spacing-base) * 2 + var(--border-width-thick)
2537
+ );
2491
2538
  }
2492
2539
 
2493
2540
  .bc-badge--circle.bc-badge--size-lg {
2494
- min-width: calc(var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 + 3px);
2541
+ min-width: calc(
2542
+ var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 +
2543
+ var(--border-width-thick)
2544
+ );
2495
2545
  }
2496
2546
 
2497
2547
  .bc-badge--circle.bc-badge--size-xl {
2498
- min-width: calc(var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 + 3px);
2548
+ min-width: calc(
2549
+ var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 +
2550
+ var(--border-width-thick)
2551
+ );
2499
2552
  }
2500
2553
 
2501
2554
  /* Full width variant */
@@ -2506,9 +2559,9 @@ a:focus-visible {
2506
2559
 
2507
2560
  /* Dot variant - small colored circle indicator */
2508
2561
  .bc-badge--dot {
2509
- width: calc(var(--spacing-base) * 2);
2510
- height: calc(var(--spacing-base) * 2);
2511
- min-width: calc(var(--spacing-base) * 2);
2562
+ width: var(--spacing-md);
2563
+ height: var(--spacing-md);
2564
+ min-width: var(--spacing-md);
2512
2565
  padding: 0;
2513
2566
  border-radius: 50%;
2514
2567
  border: none;
@@ -2520,15 +2573,15 @@ a:focus-visible {
2520
2573
 
2521
2574
  /* Dot variant size adjustments */
2522
2575
  .bc-badge--dot.bc-badge--size-xs {
2523
- width: calc(var(--spacing-base) * 1.5);
2524
- height: calc(var(--spacing-base) * 1.5);
2525
- min-width: calc(var(--spacing-base) * 1.5);
2576
+ width: var(--spacing-smh);
2577
+ height: var(--spacing-smh);
2578
+ min-width: var(--spacing-smh);
2526
2579
  }
2527
2580
 
2528
2581
  .bc-badge--dot.bc-badge--size-sm {
2529
- width: calc(var(--spacing-base) * 2);
2530
- height: calc(var(--spacing-base) * 2);
2531
- min-width: calc(var(--spacing-base) * 2);
2582
+ width: var(--spacing-md);
2583
+ height: var(--spacing-md);
2584
+ min-width: var(--spacing-md);
2532
2585
  }
2533
2586
 
2534
2587
  .bc-badge--dot.bc-badge--size-md {
@@ -2538,9 +2591,9 @@ a:focus-visible {
2538
2591
  }
2539
2592
 
2540
2593
  .bc-badge--dot.bc-badge--size-lg {
2541
- width: calc(var(--spacing-base) * 3);
2542
- height: calc(var(--spacing-base) * 3);
2543
- min-width: calc(var(--spacing-base) * 3);
2594
+ width: var(--spacing-mdh);
2595
+ height: var(--spacing-mdh);
2596
+ min-width: var(--spacing-mdh);
2544
2597
  }
2545
2598
 
2546
2599
  .bc-badge--dot.bc-badge--size-xl {
@@ -2564,7 +2617,7 @@ a:focus-visible {
2564
2617
  /* Accessibility adjustments */
2565
2618
  @media (prefers-contrast: high) {
2566
2619
  .bc-badge {
2567
- border-width: 2px;
2620
+ border-width: var(--border-width-medium);
2568
2621
  }
2569
2622
  }
2570
2623
 
@@ -2578,13 +2631,13 @@ a:focus-visible {
2578
2631
  .bc-block-command-palette {
2579
2632
  width: 280px;
2580
2633
  background: var(--color-white);
2581
- border: 1px solid var(--color-base-200);
2634
+ border: var(--border-width-thin) solid var(--color-base-200);
2582
2635
  border-radius: var(--radius-lg, 8px);
2583
2636
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
2584
2637
  overflow: hidden;
2585
2638
  z-index: var(--z-index-popover, 1000);
2586
2639
  font-family: var(
2587
- --default-ui-font-family,
2640
+ --font-family-default-ui,
2588
2641
  var(--font-ui, var(--font-body, var(--font-family-sans)))
2589
2642
  );
2590
2643
  animation: block-command-enter 120ms ease-out;
@@ -2607,7 +2660,7 @@ a:focus-visible {
2607
2660
  align-items: center;
2608
2661
  gap: 6px;
2609
2662
  padding: 8px 12px;
2610
- border-bottom: 1px solid var(--color-base-200);
2663
+ border-bottom: var(--border-width-thin) solid var(--color-base-200);
2611
2664
  }
2612
2665
 
2613
2666
  .bc-block-command-palette__search-prefix {
@@ -2740,7 +2793,7 @@ a:focus-visible {
2740
2793
  .bc-breadcrumbs__item {
2741
2794
  display: inline-flex;
2742
2795
  align-items: center;
2743
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
2796
+ gap: var(--spacing-stack-2xs, var(--spacing-xs));
2744
2797
  list-style: none;
2745
2798
  }
2746
2799
 
@@ -2749,7 +2802,7 @@ a:focus-visible {
2749
2802
  .bc-breadcrumbs__button {
2750
2803
  display: inline-flex;
2751
2804
  align-items: center;
2752
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
2805
+ gap: var(--spacing-stack-2xs, var(--spacing-xs));
2753
2806
  color: var(--text-muted);
2754
2807
  text-decoration: none;
2755
2808
  cursor: pointer;
@@ -2774,7 +2827,7 @@ a:focus-visible {
2774
2827
 
2775
2828
  .bc-breadcrumbs__link:focus-visible,
2776
2829
  .bc-breadcrumbs__button:focus-visible {
2777
- outline: 2px solid var(--color-primary-500);
2830
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
2778
2831
  outline-offset: 2px;
2779
2832
  }
2780
2833
 
@@ -2787,7 +2840,7 @@ a:focus-visible {
2787
2840
  .bc-breadcrumbs__text {
2788
2841
  display: inline-flex;
2789
2842
  align-items: center;
2790
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
2843
+ gap: var(--spacing-stack-2xs, var(--spacing-xs));
2791
2844
  }
2792
2845
 
2793
2846
  /* Current page styling */
@@ -2872,16 +2925,17 @@ a:focus-visible {
2872
2925
  display: inline-flex;
2873
2926
  align-items: center;
2874
2927
  justify-content: center;
2875
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
2876
- border: 1.5px var(--button-border-style) var(--button-border);
2928
+ gap: var(--control-gap-md);
2929
+ border: var(--border-width-default) var(--button-border-style)
2930
+ var(--button-border);
2877
2931
  cursor: pointer;
2878
2932
  font-weight: var(--font-weight-semibold);
2879
2933
  font-family: var(
2880
- --default-ui-font-family,
2934
+ --font-family-default-ui,
2881
2935
  var(--font-ui, var(--font-body, var(--font-family-sans)))
2882
2936
  );
2883
2937
  font-size: inherit;
2884
- line-height: 1;
2938
+ line-height: var(--line-height-none);
2885
2939
  border-radius: var(--radius-button, var(--radius-control, var(--radius-md)));
2886
2940
  transition: all
2887
2941
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -2896,7 +2950,7 @@ a:focus-visible {
2896
2950
  }
2897
2951
 
2898
2952
  .bc-button > span {
2899
- min-height: 10px;
2953
+ min-height: var(--spacing-md);
2900
2954
  }
2901
2955
 
2902
2956
  .bc-button:hover:not(:disabled) {
@@ -2968,7 +3022,7 @@ a:focus-visible {
2968
3022
  /* Accessibility adjustments */
2969
3023
  @media (prefers-contrast: high) {
2970
3024
  .bc-button {
2971
- border-width: 2px;
3025
+ border-width: var(--border-width-medium);
2972
3026
  }
2973
3027
  }
2974
3028
 
@@ -2986,7 +3040,7 @@ a:focus-visible {
2986
3040
  display: flex;
2987
3041
  flex-direction: column;
2988
3042
  border-radius: var(--radius-surface, var(--radius-lg));
2989
- border: 1px solid var(--card-border);
3043
+ border: var(--border-width-thin) solid var(--card-border);
2990
3044
  padding: var(--spacing-lg);
2991
3045
  box-shadow: var(--shadow-surface, var(--shadow-md));
2992
3046
  background-color: var(--card-bg);
@@ -3096,11 +3150,11 @@ a:focus-visible {
3096
3150
  }
3097
3151
 
3098
3152
  .bc-center--gap-md {
3099
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
3153
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
3100
3154
  }
3101
3155
 
3102
3156
  .bc-center--gap-lg {
3103
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
3157
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
3104
3158
  }
3105
3159
 
3106
3160
  .bc-center--gap-xl {
@@ -3153,8 +3207,8 @@ a:focus-visible {
3153
3207
 
3154
3208
  .bc-checkbox-input__checkbox:focus-visible,
3155
3209
  .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
3156
- outline: 1px solid var(--interactive-focus);
3157
- outline-offset: -1px;
3210
+ outline: var(--outline-width-default) solid var(--interactive-focus);
3211
+ outline-offset: calc(-1 * var(--outline-width-default));
3158
3212
  border-radius: var(--radius-lg);
3159
3213
  }
3160
3214
 
@@ -3177,7 +3231,7 @@ a:focus-visible {
3177
3231
 
3178
3232
  .dark .bc-checkbox-input__checkbox:focus-visible,
3179
3233
  .dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
3180
- outline: 2px solid var(--interactive-focus);
3234
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
3181
3235
  outline-offset: 2px;
3182
3236
  }
3183
3237
 
@@ -3228,7 +3282,7 @@ a:focus-visible {
3228
3282
  border-radius: var(--radius-control, var(--radius-md));
3229
3283
  overflow: visible;
3230
3284
  cursor: pointer;
3231
- border: 1px solid var(--color-neutral-300);
3285
+ border: var(--border-width-thin) solid var(--color-neutral-300);
3232
3286
  }
3233
3287
 
3234
3288
  .bc-input-container .bc-color-input__swatch-container {
@@ -3242,7 +3296,7 @@ a:focus-visible {
3242
3296
  width: 1.8rem;
3243
3297
  height: 1.8rem;
3244
3298
  cursor: pointer;
3245
- border: 1px solid var(--color-neutral-300);
3299
+ border: var(--border-width-thin) solid var(--color-neutral-300);
3246
3300
  border-radius: 100%;
3247
3301
  }
3248
3302
 
@@ -3282,7 +3336,7 @@ a:focus-visible {
3282
3336
  }
3283
3337
 
3284
3338
  .bc-color-swatch-input__control:focus-within {
3285
- outline: 2px solid var(--interactive-focus);
3339
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
3286
3340
  outline-offset: 2px;
3287
3341
  }
3288
3342
 
@@ -3297,7 +3351,7 @@ a:focus-visible {
3297
3351
  }
3298
3352
 
3299
3353
  .bc-input-container--error .bc-color-swatch-input__control:focus-within {
3300
- outline: 2px solid var(--color-danger-600);
3354
+ outline: var(--outline-width-focus) solid var(--color-danger-600);
3301
3355
  }
3302
3356
 
3303
3357
  .bc-color-swatch-input__native {
@@ -3326,7 +3380,7 @@ a:focus-visible {
3326
3380
 
3327
3381
  .bc-color-swatch-input__alpha {
3328
3382
  width: 5rem;
3329
- margin-inline-start: calc(var(--spacing-base) * 2);
3383
+ margin-inline-start: var(--spacing-md);
3330
3384
  }
3331
3385
 
3332
3386
  .bc-color-input input[type='text'] {
@@ -3336,7 +3390,7 @@ a:focus-visible {
3336
3390
 
3337
3391
  /* Dark mode */
3338
3392
  .dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
3339
- outline: 2px solid var(--color-danger-400);
3393
+ outline: var(--outline-width-focus) solid var(--color-danger-400);
3340
3394
  }
3341
3395
 
3342
3396
  /* Responsive styles */
@@ -3351,7 +3405,7 @@ a:focus-visible {
3351
3405
  display: flex;
3352
3406
  flex-direction: column;
3353
3407
  background: var(--bg-surface);
3354
- border: 1px solid var(--border-default);
3408
+ border: var(--border-width-thin) solid var(--border-default);
3355
3409
  border-radius: var(--radius-lg);
3356
3410
  box-shadow: var(--shadow-xl);
3357
3411
  overflow: hidden;
@@ -3375,9 +3429,9 @@ a:focus-visible {
3375
3429
  .bc-command-palette__header {
3376
3430
  display: flex;
3377
3431
  align-items: center;
3378
- gap: calc(var(--spacing-base) * 2);
3379
- padding: calc(var(--spacing-base) * 3) calc(var(--spacing-base) * 4);
3380
- border-bottom: 1px solid var(--border-default);
3432
+ gap: var(--spacing-md);
3433
+ padding: var(--spacing-mdh) var(--spacing-lg);
3434
+ border-bottom: var(--border-width-thin) solid var(--border-default);
3381
3435
  }
3382
3436
 
3383
3437
  .bc-command-palette__search-icon {
@@ -3402,22 +3456,22 @@ a:focus-visible {
3402
3456
 
3403
3457
  .bc-command-palette__body {
3404
3458
  overflow-y: auto;
3405
- padding: calc(var(--spacing-base) * 2);
3459
+ padding: var(--spacing-md);
3406
3460
  }
3407
3461
 
3408
3462
  .bc-command-palette__empty {
3409
- padding: calc(var(--spacing-base) * 6) calc(var(--spacing-base) * 4);
3463
+ padding: var(--spacing-xl) var(--spacing-lg);
3410
3464
  text-align: center;
3411
3465
  color: var(--text-muted);
3412
3466
  font-size: var(--font-size-sm);
3413
3467
  }
3414
3468
 
3415
3469
  .bc-command-palette__section + .bc-command-palette__section {
3416
- margin-top: calc(var(--spacing-base) * 2);
3470
+ margin-top: var(--spacing-md);
3417
3471
  }
3418
3472
 
3419
3473
  .bc-command-palette__section-title {
3420
- padding: var(--spacing-base) calc(var(--spacing-base) * 2);
3474
+ padding: var(--spacing-base) var(--spacing-md);
3421
3475
  font-size: var(--font-size-xs);
3422
3476
  font-weight: var(--font-weight-semibold);
3423
3477
  color: var(--text-muted);
@@ -3428,8 +3482,8 @@ a:focus-visible {
3428
3482
  .bc-command-palette__item {
3429
3483
  display: flex;
3430
3484
  align-items: center;
3431
- gap: calc(var(--spacing-base) * 2);
3432
- padding: calc(var(--spacing-base) * 2);
3485
+ gap: var(--spacing-md);
3486
+ padding: var(--spacing-md);
3433
3487
  border-radius: var(--radius-sm);
3434
3488
  cursor: pointer;
3435
3489
  transition: background-color var(--motion-transition-fast)
@@ -3482,11 +3536,11 @@ a:focus-visible {
3482
3536
  outline: none;
3483
3537
  font: inherit;
3484
3538
  color: inherit;
3485
- padding: var(--spacing-base) calc(var(--spacing-base) * 2);
3539
+ padding: var(--spacing-base) var(--spacing-md);
3486
3540
  margin: 0;
3487
3541
  background-color: var(--color-gray-50);
3488
3542
  border-radius: 0;
3489
- border-bottom: 1px solid var(--color-gray-300);
3543
+ border-bottom: var(--border-width-thin) solid var(--color-gray-300);
3490
3544
  }
3491
3545
 
3492
3546
  /* Dark mode */
@@ -3530,8 +3584,8 @@ a:focus-visible {
3530
3584
  display: flex;
3531
3585
  align-items: center;
3532
3586
  justify-content: center;
3533
- width: calc(var(--spacing-base) * 6);
3534
- height: calc(var(--spacing-base) * 6);
3587
+ width: var(--spacing-xl);
3588
+ height: var(--spacing-xl);
3535
3589
  flex-shrink: 0;
3536
3590
  margin-inline-start: var(--spacing-sm);
3537
3591
  margin-inline-end: calc(var(--spacing-base) * -1.25);
@@ -3540,12 +3594,12 @@ a:focus-visible {
3540
3594
  /* Listbox (dropdown) */
3541
3595
  .bc-dropdown__listbox {
3542
3596
  background-color: var(--color-white);
3543
- border: 1px solid var(--color-base-200);
3597
+ border: var(--border-width-thin) solid var(--color-base-200);
3544
3598
  border-radius: var(--radius-popover, var(--radius-md));
3545
3599
  box-shadow: var(--shadow-popover, var(--shadow-lg));
3546
3600
  padding: var(--spacing-xs) 0;
3547
3601
  z-index: var(--z-index-navigation);
3548
- min-width: 12rem;
3602
+ min-width: var(--overlay-min-width);
3549
3603
  max-height: 20rem;
3550
3604
  overflow-y: auto;
3551
3605
  outline: none;
@@ -3555,7 +3609,7 @@ a:focus-visible {
3555
3609
  .bc-dropdown__option {
3556
3610
  display: flex;
3557
3611
  align-items: center;
3558
- padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
3612
+ padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
3559
3613
  border-radius: 0;
3560
3614
  cursor: pointer;
3561
3615
  transition: background-color var(--motion-transition-fast)
@@ -3630,7 +3684,7 @@ a:focus-visible {
3630
3684
  .bc-dropdown__separator {
3631
3685
  margin: var(--spacing-xs) 0;
3632
3686
  border: none;
3633
- border-top: 1px solid var(--color-gray-200);
3687
+ border-top: var(--border-width-thin) solid var(--color-gray-200);
3634
3688
  }
3635
3689
 
3636
3690
  /* Dark mode styles */
@@ -3666,7 +3720,7 @@ a:focus-visible {
3666
3720
  /* Responsive styles */
3667
3721
  @media (width >= 40rem) {
3668
3722
  .bc-dropdown__option {
3669
- padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
3723
+ padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
3670
3724
  }
3671
3725
 
3672
3726
  .bc-dropdown__listbox {
@@ -3695,13 +3749,13 @@ a:focus-visible {
3695
3749
  /* High contrast mode support */
3696
3750
  @media (prefers-contrast: high) {
3697
3751
  .bc-dropdown__option--focused {
3698
- outline: 2px solid currentColor;
3699
- outline-offset: -2px;
3752
+ outline: var(--outline-width-focus) solid currentColor;
3753
+ outline-offset: calc(-1 * var(--outline-width-focus));
3700
3754
  }
3701
3755
 
3702
3756
  .bc-dropdown__option--selected {
3703
- outline: 2px solid currentColor;
3704
- outline-offset: -2px;
3757
+ outline: var(--outline-width-focus) solid currentColor;
3758
+ outline-offset: calc(-1 * var(--outline-width-focus));
3705
3759
  }
3706
3760
  }
3707
3761
 
@@ -3717,43 +3771,48 @@ a:focus-visible {
3717
3771
  }
3718
3772
 
3719
3773
  .bc-control--padding-xs {
3720
- padding: var(--spacing-xs);
3774
+ padding-block: var(--control-padding-block-xs);
3775
+ padding-inline: var(--control-padding-inline-xs);
3721
3776
  }
3722
3777
 
3723
3778
  .bc-control--padding-sm {
3724
- padding: var(--spacing-sm);
3779
+ padding-block: var(--control-padding-block-sm);
3780
+ padding-inline: var(--control-padding-inline-sm);
3725
3781
  }
3726
3782
 
3727
3783
  .bc-control--padding-md {
3728
- padding: var(--spacing-md);
3784
+ padding-block: var(--control-padding-block-md);
3785
+ padding-inline: var(--control-padding-inline-md);
3729
3786
  }
3730
3787
 
3731
3788
  .bc-control--padding-lg {
3732
- padding: var(--spacing-lg);
3789
+ padding-block: var(--control-padding-block-lg);
3790
+ padding-inline: var(--control-padding-inline-lg);
3733
3791
  }
3734
3792
 
3735
3793
  .bc-control--padding-xl {
3736
- padding: var(--spacing-xl);
3794
+ padding-block: var(--control-padding-block-xl);
3795
+ padding-inline: var(--control-padding-inline-xl);
3737
3796
  }
3738
3797
 
3739
3798
  .bc-control--padding-xs:has(> .bc-icon:only-child) {
3740
- padding: var(--spacing-xs);
3799
+ padding: var(--control-padding-block-xs);
3741
3800
  }
3742
3801
 
3743
3802
  .bc-control--padding-sm:has(> .bc-icon:only-child) {
3744
- padding: var(--spacing-sm);
3803
+ padding: var(--control-padding-block-sm);
3745
3804
  }
3746
3805
 
3747
3806
  .bc-control--padding-md:has(> .bc-icon:only-child) {
3748
- padding: var(--spacing-md);
3807
+ padding: var(--control-padding-block-md);
3749
3808
  }
3750
3809
 
3751
3810
  .bc-control--padding-lg:has(> .bc-icon:only-child) {
3752
- padding: var(--spacing-lg);
3811
+ padding: var(--control-padding-block-lg);
3753
3812
  }
3754
3813
 
3755
3814
  .bc-control--padding-xl:has(> .bc-icon:only-child) {
3756
- padding: var(--spacing-xl);
3815
+ padding: var(--control-padding-block-xl);
3757
3816
  }
3758
3817
 
3759
3818
  .bc-control--rounded-none {
@@ -3817,14 +3876,14 @@ a:focus-visible {
3817
3876
  display: flex;
3818
3877
  align-items: center;
3819
3878
  justify-content: space-between;
3820
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
3879
+ gap: var(--spacing-stack-sm, var(--spacing-md));
3821
3880
  }
3822
3881
 
3823
3882
  /* Label container */
3824
3883
  .bc-control-input-wrapper__label {
3825
3884
  display: flex;
3826
3885
  align-items: center;
3827
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
3886
+ gap: var(--spacing-stack-2xs, var(--spacing-xs));
3828
3887
  }
3829
3888
 
3830
3889
  /* Label text styles */
@@ -3895,7 +3954,7 @@ a:focus-visible {
3895
3954
  /* Divider Component */
3896
3955
  .bc-divider {
3897
3956
  border: 0;
3898
- border-top: 1px solid var(--border-divider);
3957
+ border-top: var(--border-width-thin) solid var(--border-divider);
3899
3958
  margin: 0;
3900
3959
  height: 0;
3901
3960
  background: transparent;
@@ -3909,7 +3968,7 @@ a:focus-visible {
3909
3968
  .bc-divider--vertical {
3910
3969
  border-top: none;
3911
3970
  border-top-width: 0;
3912
- border-left: 1px solid var(--border-divider);
3971
+ border-left: var(--border-width-thin) solid var(--border-divider);
3913
3972
  width: auto;
3914
3973
  height: auto;
3915
3974
  align-self: stretch;
@@ -3962,7 +4021,7 @@ a:focus-visible {
3962
4021
  .bc-divider__line {
3963
4022
  flex: 1;
3964
4023
  border: 0;
3965
- border-top: 1px solid var(--border-default);
4024
+ border-top: var(--border-width-thin) solid var(--border-default);
3966
4025
  height: 0;
3967
4026
  background: transparent;
3968
4027
  margin: 0;
@@ -3974,7 +4033,7 @@ a:focus-visible {
3974
4033
  .bc-divider--vertical .bc-divider__line {
3975
4034
  border-top: none;
3976
4035
  border-top-width: 0;
3977
- border-left: 1px solid var(--border-divider);
4036
+ border-left: var(--border-width-thin) solid var(--border-divider);
3978
4037
  width: 0;
3979
4038
  flex: 1;
3980
4039
  min-height: 1rem;
@@ -3986,11 +4045,11 @@ a:focus-visible {
3986
4045
  font-weight: var(--font-weight-medium);
3987
4046
  color: var(--text-muted);
3988
4047
  font-family: var(
3989
- --default-ui-font-family,
4048
+ --font-family-default-ui,
3990
4049
  var(--font-ui, var(--font-body, var(--font-family-sans)))
3991
4050
  );
3992
4051
  white-space: nowrap;
3993
- line-height: 1;
4052
+ line-height: var(--line-height-none);
3994
4053
  }
3995
4054
 
3996
4055
  /* Label alignment */
@@ -4063,7 +4122,7 @@ a:focus-visible {
4063
4122
  @media (prefers-contrast: high) {
4064
4123
  .bc-divider,
4065
4124
  .bc-divider__line {
4066
- border-width: 2px;
4125
+ border-width: var(--border-width-medium);
4067
4126
  }
4068
4127
  }
4069
4128
 
@@ -4342,7 +4401,7 @@ a:focus-visible {
4342
4401
  align-items: center;
4343
4402
  justify-content: space-between;
4344
4403
  padding: var(--spacing-md);
4345
- border-bottom: 1px solid var(--color-base-300);
4404
+ border-bottom: var(--border-width-thin) solid var(--color-base-300);
4346
4405
  background-color: var(--color-base-50);
4347
4406
  flex-shrink: 0;
4348
4407
  }
@@ -4355,7 +4414,7 @@ a:focus-visible {
4355
4414
 
4356
4415
  .bc-drawer__footer {
4357
4416
  padding: var(--spacing-md);
4358
- border-top: 1px solid var(--color-base-300);
4417
+ border-top: var(--border-width-thin) solid var(--color-base-300);
4359
4418
  background-color: var(--color-base-50);
4360
4419
  flex-shrink: 0;
4361
4420
  }
@@ -4364,16 +4423,16 @@ a:focus-visible {
4364
4423
  .dark .bc-drawer {
4365
4424
  background-color: var(--bg-surface);
4366
4425
  color: var(--text-normal);
4367
- border: 1px solid var(--border-default);
4426
+ border: var(--border-width-thin) solid var(--border-default);
4368
4427
  }
4369
4428
 
4370
4429
  .dark .bc-drawer__header {
4371
- border-bottom: 1px solid var(--border-divider);
4430
+ border-bottom: var(--border-width-thin) solid var(--border-divider);
4372
4431
  background-color: var(--bg-elevated);
4373
4432
  }
4374
4433
 
4375
4434
  .dark .bc-drawer__footer {
4376
- border-top: 1px solid var(--border-divider);
4435
+ border-top: var(--border-width-thin) solid var(--border-divider);
4377
4436
  background-color: var(--bg-elevated);
4378
4437
  }
4379
4438
 
@@ -4396,10 +4455,10 @@ a:focus-visible {
4396
4455
 
4397
4456
  /* Editable Text Component */
4398
4457
  .bc-editable-text {
4399
- border-bottom: 1px dashed var(--color-gray-300);
4458
+ border-bottom: var(--border-width-thin) dashed var(--color-gray-300);
4400
4459
  display: flex;
4401
4460
  flex-direction: row;
4402
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4461
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4403
4462
  align-items: flex-start;
4404
4463
  cursor: pointer;
4405
4464
  }
@@ -4421,7 +4480,7 @@ a:focus-visible {
4421
4480
  /* Input state */
4422
4481
  .bc-editable-text__input {
4423
4482
  outline: none;
4424
- padding: 0 calc(var(--spacing-base) / 2);
4483
+ padding: 0 var(--spacing-xs);
4425
4484
  background: transparent;
4426
4485
  border: none;
4427
4486
  font: inherit;
@@ -4438,8 +4497,8 @@ a:focus-visible {
4438
4497
 
4439
4498
  /* Draw the focus on the display container similar to other inputs via focus-within */
4440
4499
  .bc-editable-text:focus-within {
4441
- outline: 2px solid var(--interactive-focus);
4442
- outline-offset: -2px;
4500
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
4501
+ outline-offset: calc(-1 * var(--outline-width-focus));
4443
4502
  border-radius: var(--radius-sm);
4444
4503
  }
4445
4504
 
@@ -4447,11 +4506,11 @@ a:focus-visible {
4447
4506
  .bc-editable-text__display {
4448
4507
  display: flex;
4449
4508
  flex-direction: row;
4450
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4509
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4451
4510
  justify-content: space-between;
4452
4511
  align-items: center;
4453
4512
  cursor: pointer;
4454
- padding: 0 calc(var(--spacing-base) / 2);
4513
+ padding: 0 var(--spacing-xs);
4455
4514
  white-space: nowrap;
4456
4515
  flex-grow: 1;
4457
4516
  overflow: hidden;
@@ -4479,7 +4538,7 @@ a:focus-visible {
4479
4538
  background: transparent;
4480
4539
  border: none;
4481
4540
  cursor: pointer;
4482
- padding: calc(var(--spacing-base) / 2);
4541
+ padding: var(--spacing-xs);
4483
4542
  display: flex;
4484
4543
  align-items: center;
4485
4544
  justify-content: center;
@@ -4583,7 +4642,7 @@ a:focus-visible {
4583
4642
  }
4584
4643
 
4585
4644
  .bc-empty-state--size-lg {
4586
- padding: var(--spacing-2xl, calc(var(--spacing-base) * 10));
4645
+ padding: var(--spacing-2xl, var(--spacing-2xlh));
4587
4646
  max-width: 500px;
4588
4647
  }
4589
4648
 
@@ -4614,7 +4673,7 @@ a:focus-visible {
4614
4673
  .bc-file-input__drop-zone {
4615
4674
  width: 100%;
4616
4675
  min-height: 120px;
4617
- border: 2px dashed var(--color-gray-300);
4676
+ border: var(--border-width-medium) dashed var(--color-gray-300);
4618
4677
  border-radius: var(--radius-control, var(--radius-md));
4619
4678
  transition: all
4620
4679
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -4629,7 +4688,7 @@ a:focus-visible {
4629
4688
  }
4630
4689
 
4631
4690
  .bc-file-input__drop-zone:focus-within {
4632
- outline: 2px solid var(--color-primary-500);
4691
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
4633
4692
  outline-offset: 2px;
4634
4693
  }
4635
4694
 
@@ -4639,11 +4698,11 @@ a:focus-visible {
4639
4698
  flex-direction: column;
4640
4699
  align-items: center;
4641
4700
  justify-content: center;
4642
- padding: calc(var(--spacing-base) * 6);
4701
+ padding: var(--spacing-xl);
4643
4702
  height: 100%;
4644
4703
  min-height: 120px;
4645
4704
  text-align: center;
4646
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4705
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4647
4706
  }
4648
4707
 
4649
4708
  .bc-file-input__drop-zone-content--empty {
@@ -4658,7 +4717,7 @@ a:focus-visible {
4658
4717
  .bc-file-input__drop-zone-content--has-files {
4659
4718
  color: var(--color-gray-500);
4660
4719
  min-height: 80px;
4661
- padding: calc(var(--spacing-base) * 4);
4720
+ padding: var(--spacing-lg);
4662
4721
  }
4663
4722
 
4664
4723
  .bc-file-input__drop-zone-text {
@@ -4674,22 +4733,22 @@ a:focus-visible {
4674
4733
  }
4675
4734
 
4676
4735
  .bc-file-input__file-list {
4677
- margin-top: calc(var(--spacing-base) * 3);
4678
- border-top: 1px solid var(--color-gray-200);
4679
- padding-top: calc(var(--spacing-base) * 3);
4736
+ margin-top: var(--spacing-mdh);
4737
+ border-top: var(--border-width-thin) solid var(--color-gray-200);
4738
+ padding-top: var(--spacing-mdh);
4680
4739
  display: flex;
4681
4740
  flex-direction: row;
4682
4741
  flex-wrap: wrap;
4683
4742
  justify-content: center;
4684
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
4743
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
4685
4744
  }
4686
4745
 
4687
4746
  .bc-file-input__file-item {
4688
4747
  display: flex;
4689
4748
  align-items: center;
4690
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4691
- padding: calc(var(--spacing-base) * 2);
4692
- border: 1px solid var(--color-gray-200);
4749
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4750
+ padding: var(--spacing-md);
4751
+ border: var(--border-width-thin) solid var(--color-gray-200);
4693
4752
  border-radius: var(--radius-sm);
4694
4753
  background-color: var(--color-white);
4695
4754
  transition:
@@ -4717,10 +4776,10 @@ a:focus-visible {
4717
4776
 
4718
4777
  /* Thumbnail Styles */
4719
4778
  .bc-file-input__thumbnail-container {
4720
- min-width: calc(var(--spacing-base) * 12);
4721
- max-width: calc(var(--spacing-base) * 12);
4722
- min-height: calc(var(--spacing-base) * 12);
4723
- max-height: calc(var(--spacing-base) * 12);
4779
+ min-width: var(--spacing-3xl);
4780
+ max-width: var(--spacing-3xl);
4781
+ min-height: var(--spacing-3xl);
4782
+ max-height: var(--spacing-3xl);
4724
4783
  border-radius: var(--radius-sm);
4725
4784
  overflow: hidden;
4726
4785
  background-color: var(--color-gray-100);
@@ -4730,24 +4789,24 @@ a:focus-visible {
4730
4789
  }
4731
4790
 
4732
4791
  .bc-file-input__file-icon .bc-icon {
4733
- min-width: calc(var(--spacing-base) * 12);
4734
- max-width: calc(var(--spacing-base) * 12);
4735
- min-height: calc(var(--spacing-base) * 12);
4736
- max-height: calc(var(--spacing-base) * 12);
4792
+ min-width: var(--spacing-3xl);
4793
+ max-width: var(--spacing-3xl);
4794
+ min-height: var(--spacing-3xl);
4795
+ max-height: var(--spacing-3xl);
4737
4796
  }
4738
4797
 
4739
4798
  .bc-file-input__compact-value-item .bc-icon {
4740
- min-width: calc(var(--spacing-base) * 6);
4741
- max-width: calc(var(--spacing-base) * 6);
4742
- min-height: calc(var(--spacing-base) * 6);
4743
- max-height: calc(var(--spacing-base) * 6);
4799
+ min-width: var(--spacing-xl);
4800
+ max-width: var(--spacing-xl);
4801
+ min-height: var(--spacing-xl);
4802
+ max-height: var(--spacing-xl);
4744
4803
  }
4745
4804
 
4746
4805
  .bc-file-input__compact-value-item .bc-file-input__thumbnail-container {
4747
- min-width: calc(var(--spacing-base) * 6);
4748
- max-width: calc(var(--spacing-base) * 6);
4749
- min-height: calc(var(--spacing-base) * 6);
4750
- max-height: calc(var(--spacing-base) * 6);
4806
+ min-width: var(--spacing-xl);
4807
+ max-width: var(--spacing-xl);
4808
+ min-height: var(--spacing-xl);
4809
+ max-height: var(--spacing-xl);
4751
4810
  }
4752
4811
 
4753
4812
  .bc-file-input__thumbnail {
@@ -4785,8 +4844,8 @@ a:focus-visible {
4785
4844
  display: flex;
4786
4845
  align-items: center;
4787
4846
  justify-content: center;
4788
- width: calc(var(--spacing-base) * 6);
4789
- height: calc(var(--spacing-base) * 6);
4847
+ width: var(--spacing-xl);
4848
+ height: var(--spacing-xl);
4790
4849
  border: none;
4791
4850
  border-radius: var(--radius-sm);
4792
4851
  background-color: transparent;
@@ -4803,7 +4862,7 @@ a:focus-visible {
4803
4862
  }
4804
4863
 
4805
4864
  .bc-file-input__remove-button:focus {
4806
- outline: 2px solid var(--color-danger-500);
4865
+ outline: var(--outline-width-focus) solid var(--color-danger-500);
4807
4866
  outline-offset: 2px;
4808
4867
  }
4809
4868
 
@@ -4814,9 +4873,9 @@ a:focus-visible {
4814
4873
 
4815
4874
  .bc-file-input__clear-all-button {
4816
4875
  display: block;
4817
- margin: calc(var(--spacing-base) * 2) auto 0;
4818
- padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
4819
- border: 1px solid var(--color-gray-300);
4876
+ margin: var(--spacing-md) auto 0;
4877
+ padding: var(--spacing-smh) var(--spacing-mdh);
4878
+ border: var(--border-width-thin) solid var(--color-gray-300);
4820
4879
  border-radius: var(--radius-sm);
4821
4880
  background-color: var(--color-white);
4822
4881
  color: var(--color-gray-600);
@@ -4835,7 +4894,7 @@ a:focus-visible {
4835
4894
  }
4836
4895
 
4837
4896
  .bc-file-input__clear-all-button:focus {
4838
- outline: 2px solid var(--color-danger-500);
4897
+ outline: var(--outline-width-focus) solid var(--color-danger-500);
4839
4898
  outline-offset: 2px;
4840
4899
  }
4841
4900
 
@@ -4880,7 +4939,7 @@ a:focus-visible {
4880
4939
  .bc-file-input__file-item {
4881
4940
  flex-direction: column;
4882
4941
  align-items: flex-start;
4883
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4942
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4884
4943
  }
4885
4944
 
4886
4945
  .bc-file-input__remove-button {
@@ -4921,16 +4980,16 @@ a:focus-visible {
4921
4980
  text-overflow: ellipsis;
4922
4981
  display: flex;
4923
4982
  flex-wrap: wrap;
4924
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
4983
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
4925
4984
  }
4926
4985
 
4927
4986
  .bc-file-input__compact-value-item {
4928
4987
  background-color: var(--color-gray-100);
4929
4988
  border-radius: var(--radius-sm);
4930
- padding: calc(var(--spacing-base) / 2) calc(var(--spacing-base) * 2);
4989
+ padding: var(--spacing-xs) var(--spacing-md);
4931
4990
  display: flex;
4932
4991
  align-items: center;
4933
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
4992
+ gap: var(--spacing-stack-sm, var(--spacing-md));
4934
4993
  flex-wrap: nowrap;
4935
4994
  overflow: hidden;
4936
4995
  text-overflow: ellipsis;
@@ -4940,8 +4999,8 @@ a:focus-visible {
4940
4999
  display: inline-flex;
4941
5000
  align-items: center;
4942
5001
  justify-content: center;
4943
- width: calc(var(--spacing-base) * 6);
4944
- height: calc(var(--spacing-base) * 6);
5002
+ width: var(--spacing-xl);
5003
+ height: var(--spacing-xl);
4945
5004
  border: none;
4946
5005
  border-radius: var(--radius-sm);
4947
5006
  background-color: transparent;
@@ -4973,8 +5032,8 @@ a:focus-visible {
4973
5032
  display: inline-flex;
4974
5033
  align-items: center;
4975
5034
  justify-content: center;
4976
- width: calc(var(--spacing-base) * 6);
4977
- height: calc(var(--spacing-base) * 6);
5035
+ width: var(--spacing-xl);
5036
+ height: var(--spacing-xl);
4978
5037
  border-radius: var(--radius-xs);
4979
5038
  overflow: hidden;
4980
5039
  background-color: var(--color-gray-100);
@@ -4994,14 +5053,14 @@ a:focus-visible {
4994
5053
  .bc-file-input__compact-drop-zone {
4995
5054
  width: 100%;
4996
5055
  min-height: 100px;
4997
- border: 2px dashed var(--color-gray-300);
5056
+ border: var(--border-width-medium) dashed var(--color-gray-300);
4998
5057
  border-radius: var(--radius-control, var(--radius-md));
4999
5058
  transition: all
5000
5059
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
5001
5060
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
5002
5061
  cursor: pointer;
5003
5062
  position: relative;
5004
- padding: calc(var(--spacing-base) * 3);
5063
+ padding: var(--spacing-mdh);
5005
5064
  }
5006
5065
 
5007
5066
  .bc-file-input__compact-drop-zone:hover {
@@ -5010,7 +5069,7 @@ a:focus-visible {
5010
5069
  }
5011
5070
 
5012
5071
  .bc-file-input__compact-drop-zone:focus-within {
5013
- outline: 2px solid var(--color-primary-500);
5072
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
5014
5073
  outline-offset: 2px;
5015
5074
  }
5016
5075
 
@@ -5020,10 +5079,10 @@ a:focus-visible {
5020
5079
  flex-direction: column;
5021
5080
  align-items: center;
5022
5081
  justify-content: center;
5023
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
5082
+ gap: var(--spacing-stack-sm, var(--spacing-md));
5024
5083
  color: var(--color-gray-600);
5025
5084
  text-align: center;
5026
- padding: calc(var(--spacing-base) * 2);
5085
+ padding: var(--spacing-md);
5027
5086
  }
5028
5087
 
5029
5088
  .bc-file-input__compact-placeholder-text {
@@ -5037,15 +5096,15 @@ a:focus-visible {
5037
5096
  display: flex;
5038
5097
  flex-direction: column;
5039
5098
  justify-items: center;
5040
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
5099
+ gap: var(--spacing-stack-sm, var(--spacing-md));
5041
5100
  overflow-y: auto;
5042
5101
  }
5043
5102
 
5044
5103
  .bc-file-input__compact-file-item {
5045
5104
  display: flex;
5046
5105
  align-items: center;
5047
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
5048
- padding: calc(var(--spacing-base) * 1.5);
5106
+ gap: var(--spacing-stack-sm, var(--spacing-md));
5107
+ padding: var(--spacing-smh);
5049
5108
  border-radius: var(--radius-sm);
5050
5109
  background-color: var(--color-gray-50);
5051
5110
  transition: background-color
@@ -5063,17 +5122,17 @@ a:focus-visible {
5063
5122
  }
5064
5123
 
5065
5124
  .bc-file-input__compact-file-icon .bc-icon {
5066
- min-width: calc(var(--spacing-base) * 8);
5067
- max-width: calc(var(--spacing-base) * 8);
5068
- min-height: calc(var(--spacing-base) * 8);
5069
- max-height: calc(var(--spacing-base) * 8);
5125
+ min-width: var(--spacing-2xl);
5126
+ max-width: var(--spacing-2xl);
5127
+ min-height: var(--spacing-2xl);
5128
+ max-height: var(--spacing-2xl);
5070
5129
  }
5071
5130
 
5072
5131
  .bc-file-input__compact-file-icon .bc-file-input__thumbnail-container {
5073
- min-width: calc(var(--spacing-base) * 8);
5074
- max-width: calc(var(--spacing-base) * 8);
5075
- min-height: calc(var(--spacing-base) * 8);
5076
- max-height: calc(var(--spacing-base) * 8);
5132
+ min-width: var(--spacing-2xl);
5133
+ max-width: var(--spacing-2xl);
5134
+ min-height: var(--spacing-2xl);
5135
+ max-height: var(--spacing-2xl);
5077
5136
  }
5078
5137
 
5079
5138
  .bc-file-input__compact-file-info {
@@ -5104,8 +5163,8 @@ a:focus-visible {
5104
5163
  display: flex;
5105
5164
  align-items: center;
5106
5165
  justify-content: center;
5107
- width: calc(var(--spacing-base) * 6);
5108
- height: calc(var(--spacing-base) * 6);
5166
+ width: var(--spacing-xl);
5167
+ height: var(--spacing-xl);
5109
5168
  border: none;
5110
5169
  border-radius: var(--radius-sm);
5111
5170
  background-color: transparent;
@@ -5122,7 +5181,7 @@ a:focus-visible {
5122
5181
  }
5123
5182
 
5124
5183
  .bc-file-input__compact-remove-button:focus {
5125
- outline: 2px solid var(--color-danger-500);
5184
+ outline: var(--outline-width-focus) solid var(--color-danger-500);
5126
5185
  outline-offset: 2px;
5127
5186
  }
5128
5187
 
@@ -5384,7 +5443,7 @@ a:focus-visible {
5384
5443
  .bc-flyout {
5385
5444
  /* Base flyout styles */
5386
5445
  background-color: var(--color-neutral-50);
5387
- border: 1px solid var(--color-neutral-200);
5446
+ border: var(--border-width-thin) solid var(--color-neutral-200);
5388
5447
  border-radius: var(--radius-popover, var(--radius-md));
5389
5448
  box-shadow: var(--shadow-popover, var(--shadow-lg));
5390
5449
  padding: var(--spacing-sm);
@@ -5460,19 +5519,19 @@ a:focus-visible {
5460
5519
  }
5461
5520
 
5462
5521
  .bc-group--gap-1 {
5463
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
5522
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
5464
5523
  }
5465
5524
 
5466
5525
  .bc-group--gap-2 {
5467
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
5526
+ gap: var(--spacing-stack-sm, var(--spacing-md));
5468
5527
  }
5469
5528
 
5470
5529
  .bc-group--gap-4 {
5471
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
5530
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
5472
5531
  }
5473
5532
 
5474
5533
  .bc-group--gap-md {
5475
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
5534
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
5476
5535
  }
5477
5536
 
5478
5537
  .bc-group--grow {
@@ -5482,7 +5541,7 @@ a:focus-visible {
5482
5541
  /* History Timeline */
5483
5542
  .bc-history-timeline {
5484
5543
  font-family: var(
5485
- --default-ui-font-family,
5544
+ --font-family-default-ui,
5486
5545
  var(--font-ui, var(--font-body, var(--font-family-sans)))
5487
5546
  );
5488
5547
  }
@@ -5497,7 +5556,7 @@ a:focus-visible {
5497
5556
 
5498
5557
  .bc-history-timeline__filter {
5499
5558
  padding: 4px 12px;
5500
- border: 1px solid var(--color-base-200);
5559
+ border: var(--border-width-thin) solid var(--color-base-200);
5501
5560
  border-radius: var(--radius-full, 9999px);
5502
5561
  background: transparent;
5503
5562
  font-size: var(--font-size-xs);
@@ -5736,7 +5795,7 @@ a:focus-visible {
5736
5795
  color: var(--color-neutral-500);
5737
5796
  white-space: nowrap;
5738
5797
  user-select: none;
5739
- line-height: 1;
5798
+ line-height: var(--line-height-none);
5740
5799
  align-self: stretch;
5741
5800
  }
5742
5801
 
@@ -5812,10 +5871,10 @@ a:focus-visible {
5812
5871
  .bc-input-container {
5813
5872
  width: 100%;
5814
5873
  /* Add a transparent border to match button height math */
5815
- border: 1.5px solid transparent;
5874
+ border: var(--border-width-default) solid transparent;
5816
5875
  border-radius: var(--radius-control, var(--radius-md));
5817
5876
  box-shadow: var(--shadow-xs);
5818
- line-height: 1;
5877
+ line-height: var(--line-height-none);
5819
5878
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
5820
5879
  align-items: stretch;
5821
5880
  }
@@ -5828,8 +5887,8 @@ a:focus-visible {
5828
5887
 
5829
5888
  .bc-input-container--default {
5830
5889
  background-color: var(--color-white);
5831
- outline: 1px solid var(--border-divider);
5832
- outline-offset: -1px;
5890
+ outline: var(--outline-width-default) solid var(--border-divider);
5891
+ outline-offset: calc(-1 * var(--outline-width-default));
5833
5892
  }
5834
5893
 
5835
5894
  .bc-base-input-container ::placeholder,
@@ -5846,26 +5905,26 @@ a:focus-visible {
5846
5905
 
5847
5906
  .bc-input-container--disabled {
5848
5907
  background-color: var(--color-neutral-200);
5849
- outline: 2px solid var(--border-divider);
5850
- outline-offset: -2px;
5908
+ outline: var(--outline-width-focus) solid var(--border-divider);
5909
+ outline-offset: calc(-1 * var(--outline-width-focus));
5851
5910
  }
5852
5911
 
5853
5912
  /* Focus within state */
5854
5913
  .bc-input-container:focus-within {
5855
5914
  z-index: var(--z-index-navigation);
5856
- outline: 2px solid var(--interactive-focus);
5857
- outline-offset: -2px;
5915
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
5916
+ outline-offset: calc(-1 * var(--outline-width-focus));
5858
5917
  }
5859
5918
 
5860
5919
  /* Error state */
5861
5920
  .bc-input-container--error {
5862
- outline: 2px solid var(--color-danger-600);
5863
- outline-offset: -2px;
5921
+ outline: var(--outline-width-focus) solid var(--color-danger-600);
5922
+ outline-offset: calc(-1 * var(--outline-width-focus));
5864
5923
  }
5865
5924
 
5866
5925
  .bc-input-container--error:focus-within {
5867
- outline: 2px solid var(--color-danger-600);
5868
- outline-offset: -2px;
5926
+ outline: var(--outline-width-focus) solid var(--color-danger-600);
5927
+ outline-offset: calc(-1 * var(--outline-width-focus));
5869
5928
  }
5870
5929
 
5871
5930
  /* Before and after elements */
@@ -5885,7 +5944,7 @@ a:focus-visible {
5885
5944
  align-items: center;
5886
5945
  min-width: 0;
5887
5946
  /* Horizontal padding only; vertical padding comes from size classes */
5888
- padding-inline: calc(var(--spacing-base) * 4);
5947
+ padding-inline: var(--spacing-lg);
5889
5948
  }
5890
5949
 
5891
5950
  .bc-input-container__input--grow {
@@ -5908,10 +5967,9 @@ a:focus-visible {
5908
5967
  /* Normalize native element heights for consistent input container sizing */
5909
5968
  .bc-input-container input,
5910
5969
  .bc-input-container select {
5911
- min-height: 19px;
5912
5970
  padding: 0;
5913
- padding-block: 1.5px;
5914
- line-height: 1;
5971
+ padding-block: var(--spacing-px);
5972
+ line-height: var(--line-height-none);
5915
5973
  }
5916
5974
 
5917
5975
  /* Password toggle button */
@@ -5987,11 +6045,11 @@ a:focus-visible {
5987
6045
  .dark .bc-input-container--default {
5988
6046
  background-color: var(--bg-surface);
5989
6047
  color: var(--text-normal);
5990
- outline: 2px solid var(--border-default);
6048
+ outline: var(--outline-width-focus) solid var(--border-default);
5991
6049
  }
5992
6050
 
5993
6051
  .dark .bc-input-container--default:focus-within {
5994
- outline: 2px solid var(--interactive-focus);
6052
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
5995
6053
  background-color: var(--bg-elevated);
5996
6054
  }
5997
6055
 
@@ -6002,17 +6060,17 @@ a:focus-visible {
6002
6060
 
6003
6061
  .dark .bc-input-container--disabled {
6004
6062
  background-color: var(--bg-subtle);
6005
- outline: 2px solid var(--border-divider);
6063
+ outline: var(--outline-width-focus) solid var(--border-divider);
6006
6064
  opacity: 0.6;
6007
6065
  }
6008
6066
 
6009
6067
  .dark .bc-input-container--error {
6010
- outline: 2px solid var(--color-danger-400);
6068
+ outline: var(--outline-width-focus) solid var(--color-danger-400);
6011
6069
  background-color: var(--color-danger-950);
6012
6070
  }
6013
6071
 
6014
6072
  .dark .bc-input-container--error:focus-within {
6015
- outline: 2px solid var(--color-danger-400);
6073
+ outline: var(--outline-width-focus) solid var(--color-danger-400);
6016
6074
  background-color: var(--color-danger-900);
6017
6075
  }
6018
6076
 
@@ -6043,7 +6101,7 @@ a:focus-visible {
6043
6101
  @media (width >= 40rem) {
6044
6102
  .bc-input-container {
6045
6103
  /* Do not force font-size; sizing classes control this */
6046
- line-height: 1;
6104
+ line-height: var(--line-height-none);
6047
6105
  }
6048
6106
  }
6049
6107
 
@@ -6051,7 +6109,7 @@ a:focus-visible {
6051
6109
  @media (prefers-contrast: high) {
6052
6110
  .bc-input-container,
6053
6111
  .bc-input {
6054
- border-width: 2px;
6112
+ border-width: var(--border-width-medium);
6055
6113
  }
6056
6114
  }
6057
6115
 
@@ -6079,7 +6137,7 @@ a:focus-visible {
6079
6137
  display: grid;
6080
6138
  grid-template-columns: auto 1fr;
6081
6139
  align-items: center;
6082
- gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
6140
+ gap: var(--spacing-sm, var(--spacing-lg));
6083
6141
  }
6084
6142
 
6085
6143
  /* Horizontal with label on right */
@@ -6105,7 +6163,7 @@ a:focus-visible {
6105
6163
  display: flex;
6106
6164
  align-items: center;
6107
6165
  justify-content: space-between;
6108
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
6166
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6109
6167
  }
6110
6168
 
6111
6169
  /* Label section container */
@@ -6118,7 +6176,7 @@ a:focus-visible {
6118
6176
  .bc-input-wrapper__label {
6119
6177
  display: flex;
6120
6178
  align-items: center;
6121
- gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
6179
+ gap: var(--spacing-stack-2xs, var(--spacing-xs));
6122
6180
  }
6123
6181
 
6124
6182
  /* Label text styles */
@@ -6199,8 +6257,8 @@ a:focus-visible {
6199
6257
  }
6200
6258
 
6201
6259
  .bc-json-schema-object {
6202
- border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
6203
- padding-inline-start: calc(var(--spacing-base) * 2);
6260
+ border-left: var(--spacing-md) solid var(--color-base-200);
6261
+ padding-inline-start: var(--spacing-md);
6204
6262
  }
6205
6263
 
6206
6264
  .dark .bc-json-schema-object {
@@ -6212,7 +6270,7 @@ a:focus-visible {
6212
6270
  }
6213
6271
 
6214
6272
  .bc-schema-grid--gap-4 {
6215
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
6273
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
6216
6274
  }
6217
6275
 
6218
6276
  .bc-schema-grid--cols-1 {
@@ -6398,7 +6456,7 @@ a:focus-visible {
6398
6456
 
6399
6457
  .bc-object-helpers__row {
6400
6458
  display: grid;
6401
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
6459
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6402
6460
  grid-template-columns: 2fr 3fr min-content;
6403
6461
  }
6404
6462
 
@@ -6413,7 +6471,7 @@ a:focus-visible {
6413
6471
  }
6414
6472
 
6415
6473
  .bc-object-helpers__remove {
6416
- padding-top: calc(var(--spacing-base) * 3);
6474
+ padding-top: var(--spacing-mdh);
6417
6475
  flex-shrink: 1;
6418
6476
  }
6419
6477
 
@@ -6437,7 +6495,7 @@ a:focus-visible {
6437
6495
  .bc-json-schema-display__object {
6438
6496
  display: grid;
6439
6497
  grid-template-columns: auto 1fr;
6440
- column-gap: calc(var(--spacing-base) * 3);
6498
+ column-gap: var(--spacing-mdh);
6441
6499
  }
6442
6500
 
6443
6501
  /* Each field spans both parent columns and inherits their sizing via subgrid */
@@ -6460,7 +6518,7 @@ a:focus-visible {
6460
6518
  .bc-json-schema-display__label-row {
6461
6519
  display: flex;
6462
6520
  align-items: center;
6463
- gap: calc(var(--spacing-base) * 1);
6521
+ gap: var(--spacing-sm);
6464
6522
  grid-column: 1;
6465
6523
  max-width: 16rem;
6466
6524
  overflow: hidden;
@@ -6497,7 +6555,7 @@ a:focus-visible {
6497
6555
  font-size: var(--font-size-xs);
6498
6556
  color: var(--color-warning-600);
6499
6557
  background-color: var(--color-warning-100);
6500
- padding: 0.1em calc(var(--spacing-base) * 1);
6558
+ padding: 0.1em var(--spacing-sm);
6501
6559
  border-radius: var(--radius-sm);
6502
6560
  font-weight: var(--font-weight-medium);
6503
6561
  }
@@ -6545,7 +6603,7 @@ a:focus-visible {
6545
6603
  .bc-json-schema-display__value-context {
6546
6604
  font-size: var(--font-size-xs);
6547
6605
  color: var(--color-neutral-400);
6548
- margin-left: calc(var(--spacing-base) * 1);
6606
+ margin-left: var(--spacing-sm);
6549
6607
  }
6550
6608
 
6551
6609
  .dark .bc-json-schema-display__value-context {
@@ -6575,7 +6633,7 @@ a:focus-visible {
6575
6633
  .bc-json-schema-display__color-display {
6576
6634
  display: inline-flex;
6577
6635
  align-items: center;
6578
- gap: calc(var(--spacing-base) * 1);
6636
+ gap: var(--spacing-sm);
6579
6637
  }
6580
6638
 
6581
6639
  .bc-json-schema-display__color-swatch {
@@ -6583,7 +6641,7 @@ a:focus-visible {
6583
6641
  width: 1.25rem;
6584
6642
  height: 1.25rem;
6585
6643
  border-radius: var(--radius-sm);
6586
- border: 1px solid var(--color-neutral-300);
6644
+ border: var(--border-width-thin) solid var(--color-neutral-300);
6587
6645
  vertical-align: middle;
6588
6646
  }
6589
6647
 
@@ -6604,9 +6662,9 @@ a:focus-visible {
6604
6662
  white-space: pre-wrap;
6605
6663
  word-break: break-word;
6606
6664
  background-color: var(--color-neutral-50);
6607
- padding: calc(var(--spacing-base) * 2);
6665
+ padding: var(--spacing-md);
6608
6666
  border-radius: var(--radius-md);
6609
- border: 1px solid var(--color-neutral-200);
6667
+ border: var(--border-width-thin) solid var(--color-neutral-200);
6610
6668
  margin: 0;
6611
6669
  overflow-x: auto;
6612
6670
  }
@@ -6621,7 +6679,7 @@ a:focus-visible {
6621
6679
  display: inline-block;
6622
6680
  font-size: var(--font-size-sm);
6623
6681
  font-weight: var(--font-weight-medium);
6624
- padding: 0 calc(var(--spacing-base) * 1.5);
6682
+ padding: 0 var(--spacing-smh);
6625
6683
  border-radius: var(--radius-full);
6626
6684
  line-height: 1.6;
6627
6685
  }
@@ -6648,8 +6706,8 @@ a:focus-visible {
6648
6706
 
6649
6707
  /* Object */
6650
6708
  .bc-json-schema-display__object {
6651
- border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
6652
- padding-inline-start: calc(var(--spacing-base) * 2);
6709
+ border-left: var(--spacing-md) solid var(--color-base-200);
6710
+ padding-inline-start: var(--spacing-md);
6653
6711
  }
6654
6712
 
6655
6713
  .dark .bc-json-schema-display__object {
@@ -6659,8 +6717,8 @@ a:focus-visible {
6659
6717
  /* Extra properties */
6660
6718
  .bc-json-schema-display__extra-property {
6661
6719
  opacity: 0.7;
6662
- border-left: 2px dashed var(--color-warning-400);
6663
- padding-inline-start: calc(var(--spacing-base) * 2);
6720
+ border-left: var(--border-width-medium) dashed var(--color-warning-400);
6721
+ padding-inline-start: var(--spacing-md);
6664
6722
  }
6665
6723
 
6666
6724
  .dark .bc-json-schema-display__extra-property {
@@ -6675,7 +6733,7 @@ a:focus-visible {
6675
6733
 
6676
6734
  .bc-json-schema-display__array-item {
6677
6735
  display: flex;
6678
- gap: calc(var(--spacing-base) * 1.5);
6736
+ gap: var(--spacing-smh);
6679
6737
  align-items: baseline;
6680
6738
  }
6681
6739
 
@@ -6713,11 +6771,11 @@ a:focus-visible {
6713
6771
  font-size: var(--font-size-xs);
6714
6772
  font-weight: var(--font-weight-medium);
6715
6773
  color: var(--color-primary-600);
6716
- padding: 0 calc(var(--spacing-base) * 1);
6774
+ padding: 0 var(--spacing-sm);
6717
6775
  background-color: var(--color-primary-50);
6718
6776
  border-radius: var(--radius-sm);
6719
6777
  display: inline-block;
6720
- margin-bottom: calc(var(--spacing-base) * 1);
6778
+ margin-bottom: var(--spacing-sm);
6721
6779
  }
6722
6780
 
6723
6781
  .dark .bc-json-schema-display__branch-label {
@@ -6749,13 +6807,13 @@ a:focus-visible {
6749
6807
  .bc-json-schema-display__mismatches {
6750
6808
  display: flex;
6751
6809
  flex-wrap: wrap;
6752
- gap: calc(var(--spacing-base) * 1);
6810
+ gap: var(--spacing-sm);
6753
6811
  }
6754
6812
 
6755
6813
  .bc-json-schema-display__mismatch {
6756
6814
  font-size: var(--font-size-xs);
6757
6815
  font-weight: var(--font-weight-medium);
6758
- padding: 0 calc(var(--spacing-base) * 1.5);
6816
+ padding: 0 var(--spacing-smh);
6759
6817
  border-radius: var(--radius-full);
6760
6818
  line-height: 1.6;
6761
6819
  }
@@ -6794,7 +6852,7 @@ a:focus-visible {
6794
6852
  font-size: var(--font-size-xs);
6795
6853
  color: var(--color-danger-600);
6796
6854
  font-style: italic;
6797
- margin-left: calc(var(--spacing-base) * 1);
6855
+ margin-left: var(--spacing-sm);
6798
6856
  }
6799
6857
 
6800
6858
  .dark .bc-json-schema-display__mismatch--type-mismatch,
@@ -6833,7 +6891,7 @@ a:focus-visible {
6833
6891
  .bc-json-structure-form {
6834
6892
  display: flex;
6835
6893
  flex-direction: column;
6836
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
6894
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
6837
6895
  }
6838
6896
 
6839
6897
  /* =============================================================================
@@ -6841,18 +6899,18 @@ a:focus-visible {
6841
6899
  ============================================================================= */
6842
6900
 
6843
6901
  .bc-json-structure-object {
6844
- border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
6845
- padding-inline-start: calc(var(--spacing-base) * 2);
6902
+ border-left: var(--spacing-md) solid var(--color-base-200);
6903
+ padding-inline-start: var(--spacing-md);
6846
6904
  }
6847
6905
 
6848
6906
  .bc-json-structure-object-fields {
6849
6907
  display: flex;
6850
6908
  flex-direction: column;
6851
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
6909
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
6852
6910
  }
6853
6911
 
6854
6912
  .bc-json-structure-object--nested {
6855
- margin-top: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
6913
+ margin-top: var(--spacing-stack-sm, var(--spacing-md));
6856
6914
  }
6857
6915
 
6858
6916
  /* Additional properties */
@@ -6860,8 +6918,8 @@ a:focus-visible {
6860
6918
  display: flex;
6861
6919
  flex-direction: column;
6862
6920
  gap: var(--spacing-stack-xs, var(--spacing-base));
6863
- padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
6864
- border: 1px solid var(--color-base-200);
6921
+ padding: var(--spacing-inline-sm, var(--spacing-md));
6922
+ border: var(--border-width-thin) solid var(--color-base-200);
6865
6923
  border-radius: var(--radius-sm);
6866
6924
  background: var(--color-base-50);
6867
6925
  }
@@ -6870,11 +6928,11 @@ a:focus-visible {
6870
6928
  display: flex;
6871
6929
  justify-content: space-between;
6872
6930
  align-items: center;
6873
- gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
6931
+ gap: var(--spacing-inline-sm, var(--spacing-md));
6874
6932
  }
6875
6933
 
6876
6934
  .bc-json-structure-additional-property-value {
6877
- padding-inline-start: calc(var(--spacing-base) * 2);
6935
+ padding-inline-start: var(--spacing-md);
6878
6936
  }
6879
6937
 
6880
6938
  /* =============================================================================
@@ -6886,7 +6944,7 @@ a:focus-visible {
6886
6944
  .bc-json-structure-map {
6887
6945
  display: flex;
6888
6946
  flex-direction: column;
6889
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
6947
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6890
6948
  }
6891
6949
 
6892
6950
  .bc-json-structure-array-items,
@@ -6894,7 +6952,7 @@ a:focus-visible {
6894
6952
  .bc-json-structure-map-entries {
6895
6953
  display: flex;
6896
6954
  flex-direction: column;
6897
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
6955
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6898
6956
  }
6899
6957
 
6900
6958
  .bc-json-structure-array-item,
@@ -6902,7 +6960,7 @@ a:focus-visible {
6902
6960
  .bc-json-structure-map-entry {
6903
6961
  display: flex;
6904
6962
  align-items: flex-start;
6905
- gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
6963
+ gap: var(--spacing-inline-sm, var(--spacing-md));
6906
6964
  }
6907
6965
 
6908
6966
  .bc-json-structure-array-item-content,
@@ -6927,7 +6985,7 @@ a:focus-visible {
6927
6985
  display: flex;
6928
6986
  justify-content: space-between;
6929
6987
  align-items: center;
6930
- gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
6988
+ gap: var(--spacing-inline-sm, var(--spacing-md));
6931
6989
  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
6932
6990
  }
6933
6991
 
@@ -6938,7 +6996,7 @@ a:focus-visible {
6938
6996
  }
6939
6997
 
6940
6998
  .bc-json-structure-map-entry-value {
6941
- padding-inline-start: calc(var(--spacing-base) * 2);
6999
+ padding-inline-start: var(--spacing-md);
6942
7000
  }
6943
7001
 
6944
7002
  /* Set error indicator */
@@ -6955,7 +7013,7 @@ a:focus-visible {
6955
7013
  .bc-json-structure-tuple {
6956
7014
  display: flex;
6957
7015
  flex-direction: column;
6958
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
7016
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6959
7017
  }
6960
7018
 
6961
7019
  .bc-json-structure-tuple-label {
@@ -6973,7 +7031,7 @@ a:focus-visible {
6973
7031
  .bc-json-structure-tuple-elements {
6974
7032
  display: flex;
6975
7033
  flex-direction: column;
6976
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
7034
+ gap: var(--spacing-stack-sm, var(--spacing-md));
6977
7035
  }
6978
7036
 
6979
7037
  .bc-json-structure-tuple-element {
@@ -7001,7 +7059,7 @@ a:focus-visible {
7001
7059
  }
7002
7060
 
7003
7061
  .bc-json-structure-tuple-element-control {
7004
- padding-inline-start: calc(var(--spacing-base) * 2);
7062
+ padding-inline-start: var(--spacing-md);
7005
7063
  }
7006
7064
 
7007
7065
  /* =============================================================================
@@ -7011,15 +7069,15 @@ a:focus-visible {
7011
7069
  .bc-json-structure-choice {
7012
7070
  display: flex;
7013
7071
  flex-direction: column;
7014
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
7072
+ gap: var(--spacing-stack-sm, var(--spacing-md));
7015
7073
  }
7016
7074
 
7017
7075
  .bc-json-structure-choice-selector {
7018
- margin-bottom: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
7076
+ margin-bottom: var(--spacing-stack-sm, var(--spacing-md));
7019
7077
  }
7020
7078
 
7021
7079
  .bc-json-structure-choice-options {
7022
- padding-inline-start: calc(var(--spacing-base) * 2);
7080
+ padding-inline-start: var(--spacing-md);
7023
7081
  }
7024
7082
 
7025
7083
  /* =============================================================================
@@ -7031,7 +7089,7 @@ a:focus-visible {
7031
7089
  }
7032
7090
 
7033
7091
  .bc-structure-grid--gap-4 {
7034
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
7092
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
7035
7093
  }
7036
7094
 
7037
7095
  .bc-structure-grid--cols-1 {
@@ -7168,7 +7226,7 @@ a:focus-visible {
7168
7226
  font-family: var(--font-family-mono);
7169
7227
  background: var(--color-base-100);
7170
7228
  padding: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5))
7171
- var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
7229
+ var(--spacing-inline-sm, var(--spacing-md));
7172
7230
  border-radius: var(--radius-sm);
7173
7231
  color: var(--color-base-600);
7174
7232
  }
@@ -7197,8 +7255,8 @@ a:focus-visible {
7197
7255
  display: flex;
7198
7256
  flex-direction: column;
7199
7257
  gap: var(--spacing-stack-xs, var(--spacing-base));
7200
- padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
7201
- border: 1px dashed var(--color-base-300);
7258
+ padding: var(--spacing-inline-sm, var(--spacing-md));
7259
+ border: var(--border-width-thin) dashed var(--color-base-300);
7202
7260
  border-radius: var(--radius-md);
7203
7261
  background: var(--color-base-50);
7204
7262
  }
@@ -7213,8 +7271,8 @@ a:focus-visible {
7213
7271
  display: flex;
7214
7272
  flex-direction: column;
7215
7273
  gap: var(--spacing-stack-xs, var(--spacing-base));
7216
- padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
7217
- border: 1px solid var(--color-warning-300);
7274
+ padding: var(--spacing-inline-sm, var(--spacing-md));
7275
+ border: var(--border-width-thin) solid var(--color-warning-300);
7218
7276
  border-radius: var(--radius-md);
7219
7277
  background: var(--color-warning-50);
7220
7278
  color: var(--color-warning-700);
@@ -7297,11 +7355,11 @@ a:focus-visible {
7297
7355
  justify-content: center;
7298
7356
  font-family: var(--font-family-mono);
7299
7357
  font-weight: var(--font-weight-medium);
7300
- line-height: 1;
7358
+ line-height: var(--line-height-none);
7301
7359
  border-radius: var(--radius-xs);
7302
7360
  background-color: var(--bg-surface);
7303
7361
  color: var(--text-muted);
7304
- border: 1px solid var(--border-subtle);
7362
+ border: var(--border-width-thin) solid var(--border-subtle);
7305
7363
  box-shadow: rgb(229, 229, 229) 0px 1px 0px;
7306
7364
  white-space: nowrap;
7307
7365
  vertical-align: middle;
@@ -7319,13 +7377,13 @@ a:focus-visible {
7319
7377
 
7320
7378
  .bc-kbd--size-sm {
7321
7379
  font-size: var(--font-size-sm);
7322
- padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1.5);
7380
+ padding: calc(var(--spacing-base) * 0.5) var(--spacing-smh);
7323
7381
  min-width: calc(var(--font-size-sm) + var(--spacing-base) * 2);
7324
7382
  }
7325
7383
 
7326
7384
  .bc-kbd--size-md {
7327
7385
  font-size: var(--font-size-md);
7328
- padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 2);
7386
+ padding: calc(var(--spacing-base) * 0.5) var(--spacing-md);
7329
7387
  min-width: calc(var(--font-size-md) + var(--spacing-base) * 2.5);
7330
7388
  }
7331
7389
 
@@ -7341,7 +7399,7 @@ a:focus-visible {
7341
7399
  /* Accessibility adjustments */
7342
7400
  @media (prefers-contrast: high) {
7343
7401
  .bc-kbd {
7344
- border-width: 2px;
7402
+ border-width: var(--border-width-medium);
7345
7403
  }
7346
7404
  }
7347
7405
 
@@ -7355,7 +7413,7 @@ a:focus-visible {
7355
7413
  font-size: var(--font-size-sm);
7356
7414
  line-height: var(--line-height-normal);
7357
7415
  font-family: var(
7358
- --default-ui-font-family,
7416
+ --font-family-default-ui,
7359
7417
  var(--font-ui, var(--font-body, var(--font-family-sans)))
7360
7418
  );
7361
7419
  }
@@ -7394,7 +7452,7 @@ a:focus-visible {
7394
7452
  .bc-lexical-editor-container {
7395
7453
  display: flex;
7396
7454
  flex-direction: column;
7397
- border: 1px solid var(--color-neutral-200);
7455
+ border: var(--border-width-thin) solid var(--color-neutral-200);
7398
7456
  border-radius: var(--radius-control, var(--radius-md));
7399
7457
  background-color: var(--color-neutral-50);
7400
7458
  overflow: hidden;
@@ -7557,7 +7615,8 @@ a:focus-visible {
7557
7615
  .bc-lexical-editor blockquote {
7558
7616
  margin: 1rem 0;
7559
7617
  padding-left: 1rem;
7560
- border-left: 4px solid var(--color-neutral-300);
7618
+ border-left: calc(2 * var(--border-width-medium)) solid
7619
+ var(--color-neutral-300);
7561
7620
  color: var(--color-neutral-700);
7562
7621
  font-style: italic;
7563
7622
  }
@@ -7595,7 +7654,7 @@ a:focus-visible {
7595
7654
  background-color: var(--color-neutral-100);
7596
7655
  border-radius: var(--radius-md, 0.5rem);
7597
7656
  overflow-x: auto;
7598
- border: 1px solid var(--color-neutral-200);
7657
+ border: var(--border-width-thin) solid var(--color-neutral-200);
7599
7658
  }
7600
7659
 
7601
7660
  .bc-lexical-editor pre code {
@@ -7620,7 +7679,7 @@ a:focus-visible {
7620
7679
  .bc-lexical-editor hr {
7621
7680
  margin: 1.5rem 0;
7622
7681
  border: none;
7623
- border-top: 2px solid var(--color-neutral-200);
7682
+ border-top: var(--border-width-medium) solid var(--color-neutral-200);
7624
7683
  }
7625
7684
 
7626
7685
  .bc-lexical-editor strong,
@@ -7674,7 +7733,7 @@ a:focus-visible {
7674
7733
  top: 0.35em;
7675
7734
  width: 1em;
7676
7735
  height: 1em;
7677
- border: 2px solid var(--color-neutral-400);
7736
+ border: var(--border-width-medium) solid var(--color-neutral-400);
7678
7737
  border-radius: var(--radius-xs, 0.25rem);
7679
7738
  cursor: pointer;
7680
7739
  }
@@ -7691,8 +7750,8 @@ a:focus-visible {
7691
7750
  top: 0.45em;
7692
7751
  width: 0.5em;
7693
7752
  height: 0.25em;
7694
- border-left: 2px solid white;
7695
- border-bottom: 2px solid white;
7753
+ border-left: var(--border-width-medium) solid white;
7754
+ border-bottom: var(--border-width-medium) solid white;
7696
7755
  transform: rotate(-45deg);
7697
7756
  }
7698
7757
 
@@ -7831,7 +7890,7 @@ a:focus-visible {
7831
7890
 
7832
7891
  @media (prefers-contrast: high) {
7833
7892
  .bc-lexical-editor-container {
7834
- border-width: 2px;
7893
+ border-width: var(--border-width-medium);
7835
7894
  }
7836
7895
 
7837
7896
  .bc-lexical-editor-container:focus-within {
@@ -7849,7 +7908,7 @@ a:focus-visible {
7849
7908
 
7850
7909
  /* Toolbar positioned at top of editor container */
7851
7910
  .bc-lexical-toolbar {
7852
- border-bottom: 1px solid var(--color-neutral-200);
7911
+ border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
7853
7912
  border-radius: 0;
7854
7913
  border: none;
7855
7914
  background-color: var(--color-neutral-50);
@@ -7863,7 +7922,7 @@ a:focus-visible {
7863
7922
 
7864
7923
  /* When toolbar is inside the editor container, add bottom border */
7865
7924
  .bc-lexical-editor-container > .bc-lexical-toolbar {
7866
- border-bottom: 1px solid var(--color-neutral-200);
7925
+ border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
7867
7926
  }
7868
7927
 
7869
7928
  .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
@@ -7873,7 +7932,7 @@ a:focus-visible {
7873
7932
  /* Bottom position variant */
7874
7933
  .bc-lexical-toolbar--bottom {
7875
7934
  border-bottom: none;
7876
- border-top: 1px solid var(--color-neutral-200);
7935
+ border-top: var(--border-width-thin) solid var(--color-neutral-200);
7877
7936
  }
7878
7937
 
7879
7938
  .dark .bc-lexical-toolbar--bottom {
@@ -7889,7 +7948,7 @@ a:focus-visible {
7889
7948
  .bc-lexical-toolbar-select {
7890
7949
  height: 28px;
7891
7950
  padding: 0 var(--spacing-xs);
7892
- border: 1px solid var(--color-neutral-300);
7951
+ border: var(--border-width-thin) solid var(--color-neutral-300);
7893
7952
  border-radius: var(--radius-sm);
7894
7953
  background-color: var(--bg-surface);
7895
7954
  color: var(--color-neutral-900);
@@ -7938,7 +7997,7 @@ a:focus-visible {
7938
7997
  font-size: 0.875rem;
7939
7998
  font-weight: 700;
7940
7999
  pointer-events: none;
7941
- line-height: 1;
8000
+ line-height: var(--line-height-none);
7942
8001
  }
7943
8002
 
7944
8003
  .bc-lexical-toolbar-color-icon--highlight {
@@ -7970,7 +8029,7 @@ a:focus-visible {
7970
8029
  padding: var(--spacing-xs);
7971
8030
  border-radius: var(--radius-md);
7972
8031
  background-color: var(--color-white);
7973
- border: 1px solid var(--color-neutral-200);
8032
+ border: var(--border-width-thin) solid var(--color-neutral-200);
7974
8033
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
7975
8034
  z-index: 1000;
7976
8035
  animation: bc-floating-toolbar-enter 0.15s ease-out;
@@ -8002,7 +8061,7 @@ a:focus-visible {
8002
8061
  overflow-y: auto;
8003
8062
  border-radius: var(--radius-md);
8004
8063
  background-color: var(--color-white);
8005
- border: 1px solid var(--color-neutral-200);
8064
+ border: var(--border-width-thin) solid var(--color-neutral-200);
8006
8065
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
8007
8066
  padding: var(--spacing-xs);
8008
8067
  z-index: 1000;
@@ -8122,7 +8181,7 @@ a:focus-visible {
8122
8181
  justify-content: center;
8123
8182
  width: 24px;
8124
8183
  height: 24px;
8125
- border: 1px solid var(--color-neutral-200);
8184
+ border: var(--border-width-thin) solid var(--color-neutral-200);
8126
8185
  border-radius: var(--radius-sm);
8127
8186
  background-color: var(--color-white);
8128
8187
  color: var(--color-neutral-400);
@@ -8169,12 +8228,12 @@ a:focus-visible {
8169
8228
  }
8170
8229
 
8171
8230
  .bc-lexical-table-row {
8172
- border-bottom: 1px solid var(--color-neutral-200);
8231
+ border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
8173
8232
  }
8174
8233
 
8175
8234
  .bc-lexical-table-cell,
8176
8235
  .bc-lexical-table-cell-header {
8177
- border: 1px solid var(--color-neutral-200);
8236
+ border: var(--border-width-thin) solid var(--color-neutral-200);
8178
8237
  padding: 0.5rem 0.75rem;
8179
8238
  position: relative;
8180
8239
  vertical-align: top;
@@ -8190,8 +8249,8 @@ a:focus-visible {
8190
8249
  /* Selected cell highlight */
8191
8250
  .bc-lexical-table-cell--selected {
8192
8251
  background-color: var(--color-primary-50);
8193
- outline: 2px solid var(--color-primary-500);
8194
- outline-offset: -2px;
8252
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
8253
+ outline-offset: calc(-1 * var(--outline-width-focus));
8195
8254
  }
8196
8255
 
8197
8256
  /* Table context menu */
@@ -8273,7 +8332,7 @@ a:focus-visible {
8273
8332
  @media (prefers-contrast: high) {
8274
8333
  .bc-lexical-table-cell,
8275
8334
  .bc-lexical-table-cell-header {
8276
- border-width: 2px;
8335
+ border-width: var(--border-width-medium);
8277
8336
  }
8278
8337
 
8279
8338
  .bc-lexical-table-cell--selected {
@@ -8291,7 +8350,7 @@ a:focus-visible {
8291
8350
  margin: 1rem 0;
8292
8351
  padding: 1rem;
8293
8352
  background-color: var(--color-neutral-50);
8294
- border: 1px solid var(--color-neutral-200);
8353
+ border: var(--border-width-thin) solid var(--color-neutral-200);
8295
8354
  border-radius: var(--radius-md);
8296
8355
  overflow-x: auto;
8297
8356
  font-family:
@@ -8504,7 +8563,7 @@ a:focus-visible {
8504
8563
 
8505
8564
  @media (prefers-contrast: high) {
8506
8565
  .bc-lexical-code-block {
8507
- border-width: 2px;
8566
+ border-width: var(--border-width-medium);
8508
8567
  }
8509
8568
  }
8510
8569
  }
@@ -8518,13 +8577,13 @@ a:focus-visible {
8518
8577
  .bc-list-item-controls--aside {
8519
8578
  flex-direction: row;
8520
8579
  align-items: center;
8521
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
8580
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
8522
8581
  }
8523
8582
 
8524
8583
  /* Below layout: column, controls under content */
8525
8584
  .bc-list-item-controls--below {
8526
8585
  flex-direction: column;
8527
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
8586
+ gap: var(--spacing-stack-sm, var(--spacing-md));
8528
8587
  }
8529
8588
 
8530
8589
  /* Content area */
@@ -8551,7 +8610,7 @@ a:focus-visible {
8551
8610
  /* Move buttons group */
8552
8611
  .bc-list-item-controls__move {
8553
8612
  display: flex;
8554
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
8613
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
8555
8614
  }
8556
8615
 
8557
8616
  .bc-list-item-controls--aside .bc-list-item-controls__move {
@@ -8589,7 +8648,7 @@ a:focus-visible {
8589
8648
  }
8590
8649
 
8591
8650
  .bc-link:focus-visible {
8592
- outline: 2px solid currentColor;
8651
+ outline: var(--outline-width-focus) solid currentColor;
8593
8652
  outline-offset: 2px;
8594
8653
  border-radius: var(--radius-xs);
8595
8654
  }
@@ -8636,7 +8695,7 @@ a:focus-visible {
8636
8695
 
8637
8696
  .bc-link--plain {
8638
8697
  text-decoration: none;
8639
- border-bottom: 2px solid currentColor;
8698
+ border-bottom: var(--border-width-medium) solid currentColor;
8640
8699
  }
8641
8700
 
8642
8701
  .bc-link--hover {
@@ -8659,16 +8718,16 @@ a:focus-visible {
8659
8718
  /* Menu Component */
8660
8719
  .bc-menu {
8661
8720
  background-color: var(--color-white);
8662
- border: 1px solid var(--color-base-200);
8721
+ border: var(--border-width-thin) solid var(--color-base-200);
8663
8722
  border-radius: var(--radius-popover, var(--radius-md));
8664
8723
  box-shadow: var(--shadow-popover, var(--shadow-lg));
8665
8724
  padding: var(--spacing-xs) 0;
8666
8725
  z-index: var(--z-index-popover);
8667
- min-width: 12rem;
8726
+ min-width: var(--overlay-min-width);
8668
8727
  max-height: 20rem;
8669
8728
  overflow-y: auto;
8670
8729
  outline: none;
8671
- font-family: var(--default-ui-font-family, inherit);
8730
+ font-family: var(--font-family-default-ui, inherit);
8672
8731
  }
8673
8732
 
8674
8733
  /* Dark mode styles */
@@ -8687,7 +8746,7 @@ a:focus-visible {
8687
8746
  display: flex;
8688
8747
  align-items: center;
8689
8748
  gap: var(--spacing-stack-md, var(--spacing-md));
8690
- padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
8749
+ padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
8691
8750
  border-radius: 0;
8692
8751
  cursor: pointer;
8693
8752
  transition: background-color
@@ -8779,7 +8838,8 @@ a:focus-visible {
8779
8838
  /* Menu Separator Component */
8780
8839
  .bc-menu-separator {
8781
8840
  margin: var(--spacing-xs) var(--spacing-sm);
8782
- border-top: 1px solid var(--border-divider, var(--color-base-200));
8841
+ border-top: var(--border-width-thin) solid
8842
+ var(--border-divider, var(--color-base-200));
8783
8843
  position: relative;
8784
8844
  }
8785
8845
 
@@ -8806,24 +8866,24 @@ a:focus-visible {
8806
8866
 
8807
8867
  /* Focus styles for accessibility */
8808
8868
  .bc-menu-item:focus-visible {
8809
- outline: 2px solid var(--interactive-focus);
8810
- outline-offset: -2px;
8869
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
8870
+ outline-offset: calc(-1 * var(--outline-width-focus));
8811
8871
  border-radius: var(--radius-sm);
8812
8872
  }
8813
8873
 
8814
8874
  /* High contrast mode support */
8815
8875
  @media (prefers-contrast: high) {
8816
8876
  .bc-menu {
8817
- border-width: 2px;
8877
+ border-width: var(--border-width-medium);
8818
8878
  }
8819
8879
 
8820
8880
  .bc-menu-item--focused {
8821
- outline: 2px solid currentColor;
8822
- outline-offset: -2px;
8881
+ outline: var(--outline-width-focus) solid currentColor;
8882
+ outline-offset: calc(-1 * var(--outline-width-focus));
8823
8883
  }
8824
8884
 
8825
8885
  .bc-menu-separator {
8826
- border-width: 2px;
8886
+ border-width: var(--border-width-medium);
8827
8887
  }
8828
8888
  }
8829
8889
 
@@ -8841,7 +8901,7 @@ a:focus-visible {
8841
8901
  }
8842
8902
 
8843
8903
  .bc-menu--size-sm .bc-menu-item {
8844
- padding: var(--spacing-xs) calc(var(--spacing-base) * 2);
8904
+ padding: var(--spacing-xs) var(--spacing-md);
8845
8905
  font-size: var(--font-size-xs);
8846
8906
  }
8847
8907
 
@@ -8851,7 +8911,7 @@ a:focus-visible {
8851
8911
  }
8852
8912
 
8853
8913
  .bc-menu--size-lg .bc-menu-item {
8854
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3.5);
8914
+ padding: var(--spacing-md) calc(var(--spacing-base) * 3.5);
8855
8915
  font-size: var(--font-size-md);
8856
8916
  }
8857
8917
 
@@ -8912,7 +8972,7 @@ a:focus-visible {
8912
8972
  @media (hover: none) and (pointer: coarse) {
8913
8973
  .bc-menu-item {
8914
8974
  min-height: 44px; /* Minimum touch target */
8915
- padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
8975
+ padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
8916
8976
  }
8917
8977
 
8918
8978
  .bc-menu-item:hover {
@@ -8955,7 +9015,7 @@ a:focus-visible {
8955
9015
  border-radius: var(--radius-overlay, var(--radius-lg));
8956
9016
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
8957
9017
  background-color: var(--color-base-100);
8958
- border: 3px solid var(--color-base-300);
9018
+ border: var(--border-width-thick) solid var(--color-base-300);
8959
9019
  overflow: hidden;
8960
9020
  transition: all var(--motion-transition-overlay) var(--motion-easing-emphasis);
8961
9021
  }
@@ -8989,7 +9049,7 @@ a:focus-visible {
8989
9049
 
8990
9050
  /* Modal positioning - Top */
8991
9051
  .bc-modal--position-top.bc-modal--container-body {
8992
- top: calc(var(--spacing-base) * 8);
9052
+ top: var(--spacing-2xl);
8993
9053
  left: 50%;
8994
9054
  transform: translateX(-50%);
8995
9055
  }
@@ -9002,7 +9062,7 @@ a:focus-visible {
9002
9062
 
9003
9063
  /* Modal positioning - Bottom */
9004
9064
  .bc-modal--position-bottom.bc-modal--container-body {
9005
- bottom: calc(var(--spacing-base) * 8);
9065
+ bottom: var(--spacing-2xl);
9006
9066
  left: 50%;
9007
9067
  transform: translateX(-50%);
9008
9068
  }
@@ -9016,7 +9076,7 @@ a:focus-visible {
9016
9076
  /* Modal positioning - Left */
9017
9077
  .bc-modal--position-left.bc-modal--container-body {
9018
9078
  top: 50%;
9019
- left: calc(var(--spacing-base) * 8);
9079
+ left: var(--spacing-2xl);
9020
9080
  transform: translateY(-50%);
9021
9081
  }
9022
9082
 
@@ -9029,7 +9089,7 @@ a:focus-visible {
9029
9089
  /* Modal positioning - Right */
9030
9090
  .bc-modal--position-right.bc-modal--container-body {
9031
9091
  top: 50%;
9032
- right: calc(var(--spacing-base) * 8);
9092
+ right: var(--spacing-2xl);
9033
9093
  transform: translateY(-50%);
9034
9094
  }
9035
9095
 
@@ -9041,8 +9101,8 @@ a:focus-visible {
9041
9101
 
9042
9102
  /* Modal positioning - Top Left */
9043
9103
  .bc-modal--position-top-start.bc-modal--container-body {
9044
- top: calc(var(--spacing-base) * 8);
9045
- left: calc(var(--spacing-base) * 8);
9104
+ top: var(--spacing-2xl);
9105
+ left: var(--spacing-2xl);
9046
9106
  }
9047
9107
 
9048
9108
  .bc-modal--position-top-start.bc-modal--container-element {
@@ -9052,8 +9112,8 @@ a:focus-visible {
9052
9112
 
9053
9113
  /* Modal positioning - Top Right */
9054
9114
  .bc-modal--position-top-end.bc-modal--container-body {
9055
- top: calc(var(--spacing-base) * 8);
9056
- right: calc(var(--spacing-base) * 8);
9115
+ top: var(--spacing-2xl);
9116
+ right: var(--spacing-2xl);
9057
9117
  }
9058
9118
 
9059
9119
  .bc-modal--position-top-end.bc-modal--container-element {
@@ -9063,8 +9123,8 @@ a:focus-visible {
9063
9123
 
9064
9124
  /* Modal positioning - Bottom Left */
9065
9125
  .bc-modal--position-bottom-start.bc-modal--container-body {
9066
- bottom: calc(var(--spacing-base) * 8);
9067
- left: calc(var(--spacing-base) * 8);
9126
+ bottom: var(--spacing-2xl);
9127
+ left: var(--spacing-2xl);
9068
9128
  }
9069
9129
 
9070
9130
  .bc-modal--position-bottom-start.bc-modal--container-element {
@@ -9074,8 +9134,8 @@ a:focus-visible {
9074
9134
 
9075
9135
  /* Modal positioning - Bottom Right */
9076
9136
  .bc-modal--position-bottom-end.bc-modal--container-body {
9077
- bottom: calc(var(--spacing-base) * 8);
9078
- right: calc(var(--spacing-base) * 8);
9137
+ bottom: var(--spacing-2xl);
9138
+ right: var(--spacing-2xl);
9079
9139
  }
9080
9140
 
9081
9141
  .bc-modal--position-bottom-end.bc-modal--container-element {
@@ -9086,7 +9146,7 @@ a:focus-visible {
9086
9146
  /* Direction-aware modal positioning - Inline Start */
9087
9147
  .bc-modal--position-inline-start.bc-modal--container-body {
9088
9148
  top: 50%;
9089
- inset-inline-start: calc(var(--spacing-base) * 8);
9149
+ inset-inline-start: var(--spacing-2xl);
9090
9150
  transform: translateY(-50%);
9091
9151
  }
9092
9152
 
@@ -9099,7 +9159,7 @@ a:focus-visible {
9099
9159
  /* Direction-aware modal positioning - Inline End */
9100
9160
  .bc-modal--position-inline-end.bc-modal--container-body {
9101
9161
  top: 50%;
9102
- inset-inline-end: calc(var(--spacing-base) * 8);
9162
+ inset-inline-end: var(--spacing-2xl);
9103
9163
  transform: translateY(-50%);
9104
9164
  }
9105
9165
 
@@ -9111,8 +9171,8 @@ a:focus-visible {
9111
9171
 
9112
9172
  /* Direction-aware modal positioning - Top Inline Start */
9113
9173
  .bc-modal--position-top-inline-start.bc-modal--container-body {
9114
- top: calc(var(--spacing-base) * 8);
9115
- inset-inline-start: calc(var(--spacing-base) * 8);
9174
+ top: var(--spacing-2xl);
9175
+ inset-inline-start: var(--spacing-2xl);
9116
9176
  }
9117
9177
 
9118
9178
  .bc-modal--position-top-inline-start.bc-modal--container-element {
@@ -9122,8 +9182,8 @@ a:focus-visible {
9122
9182
 
9123
9183
  /* Direction-aware modal positioning - Top Inline End */
9124
9184
  .bc-modal--position-top-inline-end.bc-modal--container-body {
9125
- top: calc(var(--spacing-base) * 8);
9126
- inset-inline-end: calc(var(--spacing-base) * 8);
9185
+ top: var(--spacing-2xl);
9186
+ inset-inline-end: var(--spacing-2xl);
9127
9187
  }
9128
9188
 
9129
9189
  .bc-modal--position-top-inline-end.bc-modal--container-element {
@@ -9133,8 +9193,8 @@ a:focus-visible {
9133
9193
 
9134
9194
  /* Direction-aware modal positioning - Bottom Inline Start */
9135
9195
  .bc-modal--position-bottom-inline-start.bc-modal--container-body {
9136
- bottom: calc(var(--spacing-base) * 8);
9137
- inset-inline-start: calc(var(--spacing-base) * 8);
9196
+ bottom: var(--spacing-2xl);
9197
+ inset-inline-start: var(--spacing-2xl);
9138
9198
  }
9139
9199
 
9140
9200
  .bc-modal--position-bottom-inline-start.bc-modal--container-element {
@@ -9144,8 +9204,8 @@ a:focus-visible {
9144
9204
 
9145
9205
  /* Direction-aware modal positioning - Bottom Inline End */
9146
9206
  .bc-modal--position-bottom-inline-end.bc-modal--container-body {
9147
- bottom: calc(var(--spacing-base) * 8);
9148
- inset-inline-end: calc(var(--spacing-base) * 8);
9207
+ bottom: var(--spacing-2xl);
9208
+ inset-inline-end: var(--spacing-2xl);
9149
9209
  }
9150
9210
 
9151
9211
  .bc-modal--position-bottom-inline-end.bc-modal--container-element {
@@ -9155,19 +9215,19 @@ a:focus-visible {
9155
9215
 
9156
9216
  /* Modal sizes */
9157
9217
  .bc-modal--size-sm {
9158
- width: min(400px, 90vw);
9218
+ width: var(--overlay-width-sm);
9159
9219
  }
9160
9220
 
9161
9221
  .bc-modal--size-md {
9162
- width: min(600px, 90vw);
9222
+ width: var(--overlay-width-md);
9163
9223
  }
9164
9224
 
9165
9225
  .bc-modal--size-lg {
9166
- width: min(800px, 90vw);
9226
+ width: var(--overlay-width-lg);
9167
9227
  }
9168
9228
 
9169
9229
  .bc-modal--size-xl {
9170
- width: min(1000px, 90vw);
9230
+ width: var(--overlay-width-xl);
9171
9231
  }
9172
9232
 
9173
9233
  /* Modal content container */
@@ -9184,7 +9244,7 @@ a:focus-visible {
9184
9244
  align-items: center;
9185
9245
  justify-content: space-between;
9186
9246
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
9187
- border-bottom: 1px solid var(--color-base-300);
9247
+ border-bottom: var(--border-width-thin) solid var(--color-base-300);
9188
9248
  flex-shrink: 0;
9189
9249
  background-color: var(--color-base-100);
9190
9250
  }
@@ -9204,7 +9264,7 @@ a:focus-visible {
9204
9264
  display: flex;
9205
9265
  gap: var(--spacing-stack-md);
9206
9266
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
9207
- border-top: 1px solid var(--color-base-300);
9267
+ border-top: var(--border-width-thin) solid var(--color-base-300);
9208
9268
  flex-shrink: 0;
9209
9269
  background-color: var(--color-base-100);
9210
9270
  align-items: center;
@@ -9227,7 +9287,8 @@ a:focus-visible {
9227
9287
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top,
9228
9288
  .bc-overlay[data-status='closing'] .bc-modal--position-top {
9229
9289
  opacity: 0;
9230
- transform: translateX(-50%) translateY(-20px) scale(0.95);
9290
+ transform: translateX(-50%) translateY(calc(-1 * var(--spacing-lgh)))
9291
+ scale(0.95);
9231
9292
  }
9232
9293
 
9233
9294
  .bc-overlay[data-status='opened'] .bc-modal--position-top,
@@ -9240,7 +9301,7 @@ a:focus-visible {
9240
9301
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
9241
9302
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom {
9242
9303
  opacity: 0;
9243
- transform: translateX(-50%) translateY(20px) scale(0.95);
9304
+ transform: translateX(-50%) translateY(var(--spacing-lgh)) scale(0.95);
9244
9305
  }
9245
9306
 
9246
9307
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom,
@@ -9253,7 +9314,8 @@ a:focus-visible {
9253
9314
  .bc-overlay[data-status='start-opening'] .bc-modal--position-left,
9254
9315
  .bc-overlay[data-status='closing'] .bc-modal--position-left {
9255
9316
  opacity: 0;
9256
- transform: translateY(-50%) translateX(-20px) scale(0.95);
9317
+ transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
9318
+ scale(0.95);
9257
9319
  }
9258
9320
 
9259
9321
  .bc-overlay[data-status='opened'] .bc-modal--position-left,
@@ -9266,7 +9328,7 @@ a:focus-visible {
9266
9328
  .bc-overlay[data-status='start-opening'] .bc-modal--position-right,
9267
9329
  .bc-overlay[data-status='closing'] .bc-modal--position-right {
9268
9330
  opacity: 0;
9269
- transform: translateY(-50%) translateX(20px) scale(0.95);
9331
+ transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
9270
9332
  }
9271
9333
 
9272
9334
  .bc-overlay[data-status='opened'] .bc-modal--position-right,
@@ -9304,7 +9366,8 @@ a:focus-visible {
9304
9366
  .bc-overlay[data-status='start-opening'] .bc-modal--position-inline-start,
9305
9367
  .bc-overlay[data-status='closing'] .bc-modal--position-inline-start {
9306
9368
  opacity: 0;
9307
- transform: translateY(-50%) translateX(-20px) scale(0.95);
9369
+ transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
9370
+ scale(0.95);
9308
9371
  }
9309
9372
 
9310
9373
  .bc-overlay[data-status='opened'] .bc-modal--position-inline-start,
@@ -9317,7 +9380,7 @@ a:focus-visible {
9317
9380
  .bc-overlay[data-status='start-opening'] .bc-modal--position-inline-end,
9318
9381
  .bc-overlay[data-status='closing'] .bc-modal--position-inline-end {
9319
9382
  opacity: 0;
9320
- transform: translateY(-50%) translateX(20px) scale(0.95);
9383
+ transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
9321
9384
  }
9322
9385
 
9323
9386
  .bc-overlay[data-status='opened'] .bc-modal--position-inline-end,
@@ -9378,12 +9441,12 @@ a:focus-visible {
9378
9441
  /* Dark mode styles */
9379
9442
  .dark .bc-modal {
9380
9443
  background-color: var(--bg-surface);
9381
- border: 1px solid var(--border-default);
9444
+ border: var(--border-width-thin) solid var(--border-default);
9382
9445
  color: var(--text-normal);
9383
9446
  }
9384
9447
 
9385
9448
  .dark .bc-modal__header {
9386
- border-bottom: 1px solid var(--border-divider);
9449
+ border-bottom: var(--border-width-thin) solid var(--border-divider);
9387
9450
  background-color: var(--bg-elevated);
9388
9451
  }
9389
9452
 
@@ -9393,7 +9456,7 @@ a:focus-visible {
9393
9456
  }
9394
9457
 
9395
9458
  .dark .bc-modal__footer {
9396
- border-top: 1px solid var(--border-divider);
9459
+ border-top: var(--border-width-thin) solid var(--border-divider);
9397
9460
  background-color: var(--bg-elevated);
9398
9461
  }
9399
9462
 
@@ -9411,22 +9474,22 @@ a:focus-visible {
9411
9474
  }
9412
9475
 
9413
9476
  .dark .bc-modal--confirm .bc-modal__footer {
9414
- border-top: 1px solid var(--color-base-700);
9477
+ border-top: var(--border-width-thin) solid var(--color-base-700);
9415
9478
  background: var(--color-base-800);
9416
9479
  }
9417
9480
 
9418
9481
  /* High contrast mode support */
9419
9482
  @media (prefers-contrast: high) {
9420
9483
  .bc-modal {
9421
- border-width: 2px;
9484
+ border-width: var(--border-width-medium);
9422
9485
  }
9423
9486
 
9424
9487
  .bc-modal__header {
9425
- border-bottom-width: 2px;
9488
+ border-bottom-width: var(--border-width-medium);
9426
9489
  }
9427
9490
 
9428
9491
  .bc-modal__footer {
9429
- border-top-width: 2px;
9492
+ border-top-width: var(--border-width-medium);
9430
9493
  }
9431
9494
  }
9432
9495
 
@@ -9514,8 +9577,7 @@ a:focus-visible {
9514
9577
  display: flex;
9515
9578
  align-items: center;
9516
9579
  gap: calc(var(--spacing-base) * 2.5);
9517
- padding: calc(var(--spacing-base) * 5) calc(var(--spacing-base) * 6)
9518
- calc(var(--spacing-base) * 2.5);
9580
+ padding: var(--spacing-lgh) var(--spacing-xl) calc(var(--spacing-base) * 2.5);
9519
9581
  border-bottom: none;
9520
9582
  }
9521
9583
 
@@ -9530,14 +9592,14 @@ a:focus-visible {
9530
9592
  }
9531
9593
 
9532
9594
  .bc-modal__confirm-body {
9533
- padding: 0 calc(var(--spacing-base) * 6) calc(var(--spacing-base) * 5);
9595
+ padding: 0 var(--spacing-xl) var(--spacing-lgh);
9534
9596
  font-size: var(--font-size-sm);
9535
9597
  color: var(--color-base-600);
9536
9598
  line-height: var(--line-height-normal);
9537
9599
  }
9538
9600
 
9539
9601
  .bc-modal__confirm-consequences {
9540
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
9602
+ padding: var(--spacing-md) var(--spacing-mdh);
9541
9603
  border-radius: var(--radius-md);
9542
9604
  background: var(--color-base-50);
9543
9605
  font-size: var(--font-size-xs);
@@ -9545,12 +9607,12 @@ a:focus-visible {
9545
9607
  display: flex;
9546
9608
  flex-direction: column;
9547
9609
  gap: var(--spacing-base);
9548
- margin-top: calc(var(--spacing-base) * 3);
9610
+ margin-top: var(--spacing-mdh);
9549
9611
  }
9550
9612
 
9551
9613
  .bc-modal__confirm-consequences li {
9552
9614
  display: flex;
9553
- gap: calc(var(--spacing-base) * 1.5);
9615
+ gap: var(--spacing-smh);
9554
9616
  list-style: none;
9555
9617
  }
9556
9618
 
@@ -9560,11 +9622,11 @@ a:focus-visible {
9560
9622
  }
9561
9623
 
9562
9624
  .bc-modal--confirm .bc-modal__footer {
9563
- padding: calc(var(--spacing-base) * 3) calc(var(--spacing-base) * 6);
9564
- border-top: 1px solid var(--color-base-200);
9625
+ padding: var(--spacing-mdh) var(--spacing-xl);
9626
+ border-top: var(--border-width-thin) solid var(--color-base-200);
9565
9627
  display: flex;
9566
9628
  justify-content: flex-end;
9567
- gap: calc(var(--spacing-base) * 2);
9629
+ gap: var(--spacing-md);
9568
9630
  background: var(--color-base-50);
9569
9631
  }
9570
9632
 
@@ -9670,10 +9732,10 @@ a:focus-visible {
9670
9732
  display: flex;
9671
9733
  align-items: center;
9672
9734
  justify-content: center;
9673
- line-height: 1;
9735
+ line-height: var(--line-height-none);
9674
9736
  border-radius: var(--radius-xs);
9675
- outline: 1px solid var(--color-gray-300);
9676
- outline-offset: -1px;
9737
+ outline: var(--outline-width-default) solid var(--color-gray-300);
9738
+ outline-offset: calc(-1 * var(--outline-width-default));
9677
9739
  cursor: pointer;
9678
9740
  transition: all
9679
9741
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -9756,12 +9818,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9756
9818
 
9757
9819
  .bc-popover {
9758
9820
  background: var(--color-white);
9759
- border: 1px solid var(--color-base-200);
9760
- border-radius: var(--radius-md, 5px);
9761
- box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
9762
- min-width: 200px;
9763
- max-width: 400px;
9764
- padding: var(--spacing-md, 12px);
9821
+ border: var(--border-width-thin) solid var(--color-base-200);
9822
+ border-radius: var(--radius-md);
9823
+ box-shadow: var(--shadow-md);
9824
+ min-width: var(--overlay-min-width);
9825
+ max-width: var(--overlay-width-sm);
9826
+ padding: var(--spacing-md);
9765
9827
  color: var(--color-base-700);
9766
9828
  }
9767
9829
 
@@ -9920,32 +9982,32 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9920
9982
  }
9921
9983
 
9922
9984
  .bc-panel--side-all {
9923
- border: 1px solid var(--border-default);
9985
+ border: var(--border-width-thin) solid var(--border-default);
9924
9986
  }
9925
9987
 
9926
9988
  .bc-panel--side-top {
9927
- border-top: 1px solid var(--border-default);
9989
+ border-top: var(--border-width-thin) solid var(--border-default);
9928
9990
  }
9929
9991
 
9930
9992
  .bc-panel--side-bottom {
9931
- border-bottom: 1px solid var(--border-default);
9993
+ border-bottom: var(--border-width-thin) solid var(--border-default);
9932
9994
  }
9933
9995
 
9934
9996
  .bc-panel--side-left {
9935
- border-left: 1px solid var(--border-default);
9997
+ border-left: var(--border-width-thin) solid var(--border-default);
9936
9998
  }
9937
9999
 
9938
10000
  .bc-panel--side-right {
9939
- border-right: 1px solid var(--border-default);
10001
+ border-right: var(--border-width-thin) solid var(--border-default);
9940
10002
  }
9941
10003
 
9942
10004
  /* Direction-aware panel borders */
9943
10005
  .bc-panel--side-inline-start {
9944
- border-inline-start: 1px solid var(--border-default);
10006
+ border-inline-start: var(--border-width-thin) solid var(--border-default);
9945
10007
  }
9946
10008
 
9947
10009
  .bc-panel--side-inline-end {
9948
- border-inline-end: 1px solid var(--border-default);
10010
+ border-inline-end: var(--border-width-thin) solid var(--border-default);
9949
10011
  }
9950
10012
 
9951
10013
  .bc-panel--shadow-sm {
@@ -9966,7 +10028,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9966
10028
  align-items: center;
9967
10029
  gap: var(--spacing-xs);
9968
10030
  font-family: var(
9969
- --default-ui-font-family,
10031
+ --font-family-default-ui,
9970
10032
  var(--font-ui, var(--font-body, var(--font-family-sans)))
9971
10033
  );
9972
10034
  }
@@ -9982,11 +10044,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9982
10044
  display: inline-flex;
9983
10045
  align-items: center;
9984
10046
  justify-content: center;
9985
- min-width: calc(var(--spacing-base) * 8);
9986
- height: calc(var(--spacing-base) * 8);
10047
+ min-width: var(--spacing-2xl);
10048
+ height: var(--spacing-2xl);
9987
10049
  padding: 0;
9988
10050
  cursor: pointer;
9989
- border: 1px solid transparent;
10051
+ border: var(--border-width-thin) solid transparent;
9990
10052
  border-radius: var(--radius-control-sm, var(--radius-sm));
9991
10053
  background: transparent;
9992
10054
  color: var(--color-base-700);
@@ -10003,7 +10065,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10003
10065
  }
10004
10066
 
10005
10067
  .bc-pagination__item:focus-visible {
10006
- outline: 2px solid var(--color-primary-500);
10068
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
10007
10069
  outline-offset: 2px;
10008
10070
  z-index: 1;
10009
10071
  }
@@ -10038,8 +10100,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10038
10100
  display: inline-flex;
10039
10101
  align-items: center;
10040
10102
  justify-content: center;
10041
- min-width: calc(var(--spacing-base) * 8);
10042
- height: calc(var(--spacing-base) * 8);
10103
+ min-width: var(--spacing-2xl);
10104
+ height: var(--spacing-2xl);
10043
10105
  color: var(--color-base-500);
10044
10106
  font-size: var(--font-size-md);
10045
10107
  user-select: none;
@@ -10048,8 +10110,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10048
10110
  /* Size Variants */
10049
10111
  .bc-pagination--size-xs .bc-pagination__item,
10050
10112
  .bc-pagination--size-xs .bc-pagination__dots {
10051
- min-width: calc(var(--spacing-base) * 6);
10052
- height: calc(var(--spacing-base) * 6);
10113
+ min-width: var(--spacing-xl);
10114
+ height: var(--spacing-xl);
10053
10115
  font-size: var(--font-size-xs);
10054
10116
  }
10055
10117
 
@@ -10062,8 +10124,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10062
10124
 
10063
10125
  .bc-pagination--size-md .bc-pagination__item,
10064
10126
  .bc-pagination--size-md .bc-pagination__dots {
10065
- min-width: calc(var(--spacing-base) * 8);
10066
- height: calc(var(--spacing-base) * 8);
10127
+ min-width: var(--spacing-2xl);
10128
+ height: var(--spacing-2xl);
10067
10129
  font-size: var(--font-size-md);
10068
10130
  }
10069
10131
 
@@ -10076,8 +10138,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10076
10138
 
10077
10139
  .bc-pagination--size-xl .bc-pagination__item,
10078
10140
  .bc-pagination--size-xl .bc-pagination__dots {
10079
- min-width: calc(var(--spacing-base) * 10);
10080
- height: calc(var(--spacing-base) * 10);
10141
+ min-width: var(--spacing-2xlh);
10142
+ height: var(--spacing-2xlh);
10081
10143
  font-size: var(--font-size-xl);
10082
10144
  }
10083
10145
 
@@ -10120,7 +10182,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10120
10182
  /* High Contrast Mode Support */
10121
10183
  @media (prefers-contrast: high) {
10122
10184
  .bc-pagination__item {
10123
- border-width: 2px;
10185
+ border-width: var(--border-width-medium);
10124
10186
  }
10125
10187
 
10126
10188
  .bc-pagination__item--active {
@@ -10338,7 +10400,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10338
10400
  @media (prefers-contrast: high) {
10339
10401
  .bc-password-strength__bar,
10340
10402
  .bc-password-strength-bar {
10341
- border: 1px solid var(--border-default);
10403
+ border: var(--border-width-thin) solid var(--border-default);
10342
10404
  }
10343
10405
 
10344
10406
  .dark .bc-password-strength__bar,
@@ -10409,7 +10471,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10409
10471
  line-height: 1.4;
10410
10472
  pointer-events: none;
10411
10473
  font-family: var(
10412
- --default-ui-font-family,
10474
+ --font-family-default-ui,
10413
10475
  var(--font-ui, var(--font-body, var(--font-family-sans)))
10414
10476
  );
10415
10477
  }
@@ -10440,7 +10502,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10440
10502
  .bc-progress-bar-wrapper {
10441
10503
  display: flex;
10442
10504
  flex-direction: column;
10443
- gap: calc(var(--spacing-base) * 1);
10505
+ gap: var(--spacing-sm);
10444
10506
  width: 100%;
10445
10507
  }
10446
10508
 
@@ -10480,11 +10542,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10480
10542
  }
10481
10543
 
10482
10544
  .bc-progress-bar--size-md {
10483
- height: calc(var(--spacing-base) * 2);
10545
+ height: var(--spacing-md);
10484
10546
  }
10485
10547
 
10486
10548
  .bc-progress-bar--size-lg {
10487
- height: calc(var(--spacing-base) * 3);
10549
+ height: var(--spacing-mdh);
10488
10550
  }
10489
10551
 
10490
10552
  /* Indeterminate state - animated sliding bar */
@@ -10510,13 +10572,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10510
10572
  /* Label text */
10511
10573
  .bc-progress-bar__label {
10512
10574
  font-family: var(
10513
- --default-ui-font-family,
10575
+ --font-family-default-ui,
10514
10576
  var(--font-ui, var(--font-body, var(--font-family-sans)))
10515
10577
  );
10516
10578
  font-size: var(--font-size-sm);
10517
10579
  color: var(--text-muted);
10518
10580
  text-align: right;
10519
- line-height: 1;
10581
+ line-height: var(--line-height-none);
10520
10582
  }
10521
10583
 
10522
10584
  /* Dark mode styles */
@@ -10545,13 +10607,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10545
10607
  /* High contrast mode: add borders for better visibility */
10546
10608
  @media (prefers-contrast: high) {
10547
10609
  .bc-progress-bar__track {
10548
- outline: 1px solid currentColor;
10549
- outline-offset: -1px;
10610
+ outline: var(--outline-width-default) solid currentColor;
10611
+ outline-offset: calc(-1 * var(--outline-width-default));
10550
10612
  }
10551
10613
 
10552
10614
  .bc-progress-bar__fill {
10553
- outline: 1px solid var(--progress-fill);
10554
- outline-offset: -1px;
10615
+ outline: var(--outline-width-default) solid var(--progress-fill);
10616
+ outline-offset: calc(-1 * var(--outline-width-default));
10555
10617
  }
10556
10618
  }
10557
10619
 
@@ -10687,7 +10749,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10687
10749
  border-radius: var(--radius-pill, var(--radius-full));
10688
10750
  box-shadow: var(--shadow-surface, var(--shadow-sm));
10689
10751
  position: relative;
10690
- border: 1px solid var(--color-base-300);
10752
+ border: var(--border-width-thin) solid var(--color-base-300);
10691
10753
  padding: var(--spacing-xs);
10692
10754
  display: inline-block;
10693
10755
  }
@@ -10731,7 +10793,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10731
10793
  z-index: 2;
10732
10794
  border-radius: var(--radius-pill, var(--radius-full));
10733
10795
  font-family: var(
10734
- --default-ui-font-family,
10796
+ --font-family-default-ui,
10735
10797
  var(--font-ui, var(--font-body, var(--font-family-sans)))
10736
10798
  );
10737
10799
  }
@@ -10790,7 +10852,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10790
10852
  /* Disabled state */
10791
10853
  .bc-segmented-input--disabled {
10792
10854
  background-color: var(--color-base-300);
10793
- border: 1px solid var(--color-base-300);
10855
+ border: var(--border-width-thin) solid var(--color-base-300);
10794
10856
  cursor: not-allowed;
10795
10857
  }
10796
10858
 
@@ -10812,7 +10874,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10812
10874
  /* Dark mode styles */
10813
10875
  .dark .bc-segmented-input {
10814
10876
  background-color: var(--bg-subtle);
10815
- border: 1px solid var(--border-default);
10877
+ border: var(--border-width-thin) solid var(--border-default);
10816
10878
  }
10817
10879
 
10818
10880
  .dark .bc-segmented-input__indicator {
@@ -10853,7 +10915,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10853
10915
  /* Disabled state (dark) */
10854
10916
  .dark .bc-segmented-input--disabled {
10855
10917
  background-color: var(--bg-background);
10856
- border: 1px solid var(--border-divider);
10918
+ border: var(--border-width-thin) solid var(--border-divider);
10857
10919
  opacity: 0.5;
10858
10920
  }
10859
10921
 
@@ -10891,13 +10953,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10891
10953
  display: flex;
10892
10954
  flex-direction: row;
10893
10955
  align-items: center;
10894
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
10956
+ gap: var(--spacing-stack-sm, var(--spacing-md));
10895
10957
  font-size: var(--font-size-sm);
10896
10958
  line-height: var(--line-height-normal);
10897
10959
  transition: all
10898
10960
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
10899
10961
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
10900
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 2);
10962
+ padding: var(--spacing-md) var(--spacing-md);
10901
10963
  }
10902
10964
 
10903
10965
  .bc-sidebar-group__header {
@@ -10925,8 +10987,8 @@ span.bc-sidebar-link {
10925
10987
  display: flex;
10926
10988
  align-items: center;
10927
10989
  justify-content: center;
10928
- width: calc(var(--spacing-base) * 4);
10929
- height: calc(var(--spacing-base) * 4);
10990
+ width: var(--spacing-lg);
10991
+ height: var(--spacing-lg);
10930
10992
  color: var(--text-muted);
10931
10993
  }
10932
10994
 
@@ -10934,9 +10996,9 @@ span.bc-sidebar-link {
10934
10996
  display: flex;
10935
10997
  align-items: center;
10936
10998
  justify-content: center;
10937
- width: calc(var(--spacing-base) * 6);
10938
- height: calc(var(--spacing-base) * 6);
10939
- border: 1px solid var(--border-default);
10999
+ width: var(--spacing-xl);
11000
+ height: var(--spacing-xl);
11001
+ border: var(--border-width-thin) solid var(--border-default);
10940
11002
  border-radius: var(--radius-control, var(--radius-md));
10941
11003
  cursor: pointer;
10942
11004
  padding: var(--spacing-sm);
@@ -10957,9 +11019,9 @@ span.bc-sidebar-link {
10957
11019
  }
10958
11020
 
10959
11021
  .bc-sidebar-group--rail {
10960
- padding-inline-start: calc(var(--spacing-base) * 2);
11022
+ padding-inline-start: var(--spacing-md);
10961
11023
  margin-left: 1px;
10962
- border-left: 1px solid var(--border-default);
11024
+ border-left: var(--border-width-thin) solid var(--border-default);
10963
11025
  }
10964
11026
 
10965
11027
  .bc-sidebar-group-collapsible-indicator {
@@ -11008,7 +11070,7 @@ span.bc-sidebar-link {
11008
11070
 
11009
11071
  .bc-sidebar--dark-bg .bc-sidebar-link--action {
11010
11072
  color: var(--text-normal);
11011
- border: 1px solid var(--border-default);
11073
+ border: var(--border-width-thin) solid var(--border-default);
11012
11074
  }
11013
11075
 
11014
11076
  .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
@@ -11017,7 +11079,7 @@ span.bc-sidebar-link {
11017
11079
  }
11018
11080
 
11019
11081
  .bc-sidebar--dark-bg .bc-sidebar-group--rail {
11020
- border-inline-start: 1px solid var(--border-default);
11082
+ border-inline-start: var(--border-width-thin) solid var(--border-default);
11021
11083
  }
11022
11084
 
11023
11085
  /* Dark background mode in dark theme - inverted back to light colors */
@@ -11027,8 +11089,8 @@ span.bc-sidebar-link {
11027
11089
 
11028
11090
  .bc-sidebar-separator {
11029
11091
  border: none;
11030
- border-top: 1px solid var(--border-default);
11031
- margin: calc(var(--spacing-base) * 2) 0;
11092
+ border-top: var(--border-width-thin) solid var(--border-default);
11093
+ margin: var(--spacing-md) 0;
11032
11094
  }
11033
11095
 
11034
11096
  /* Sink Component */
@@ -11036,7 +11098,7 @@ span.bc-sidebar-link {
11036
11098
  display: flex;
11037
11099
  flex-direction: column;
11038
11100
  border-radius: var(--radius-surface, var(--radius-lg));
11039
- border: 1px solid var(--color-base-300);
11101
+ border: var(--border-width-thin) solid var(--color-base-300);
11040
11102
  padding: var(--spacing-md);
11041
11103
  box-shadow: var(
11042
11104
  --shadow-sink,
@@ -11065,7 +11127,7 @@ span.bc-sidebar-link {
11065
11127
 
11066
11128
  .bc-sink--flat {
11067
11129
  box-shadow: var(--shadow-sink-flat, none);
11068
- border: 1px solid var(--color-base-200);
11130
+ border: var(--border-width-thin) solid var(--color-base-200);
11069
11131
  }
11070
11132
 
11071
11133
  /* Sink sizes */
@@ -11117,7 +11179,7 @@ span.bc-sidebar-link {
11117
11179
  /* Dark mode styles */
11118
11180
  .dark .bc-sink {
11119
11181
  background-color: var(--bg-background);
11120
- border: 1px solid var(--border-default);
11182
+ border: var(--border-width-thin) solid var(--border-default);
11121
11183
  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
11122
11184
  color: var(--text-normal);
11123
11185
  }
@@ -11138,7 +11200,7 @@ span.bc-sidebar-link {
11138
11200
 
11139
11201
  .dark .bc-sink--flat {
11140
11202
  box-shadow: var(--shadow-sink-dark-flat, none);
11141
- border: 1px solid var(--border-divider);
11203
+ border: var(--border-width-thin) solid var(--border-divider);
11142
11204
  background-color: var(--bg-subtle);
11143
11205
  }
11144
11206
 
@@ -11198,7 +11260,7 @@ span.bc-sidebar-link {
11198
11260
  .bc-skeleton__lines-container {
11199
11261
  display: flex;
11200
11262
  flex-direction: column;
11201
- gap: calc(var(--spacing-base) * 1.5);
11263
+ gap: var(--spacing-smh);
11202
11264
  width: 100%;
11203
11265
  }
11204
11266
 
@@ -11228,8 +11290,8 @@ span.bc-sidebar-link {
11228
11290
  /* High contrast mode: add subtle border */
11229
11291
  @media (prefers-contrast: high) {
11230
11292
  .bc-skeleton {
11231
- outline: 1px solid currentColor;
11232
- outline-offset: -1px;
11293
+ outline: var(--outline-width-default) solid currentColor;
11294
+ outline-offset: calc(-1 * var(--outline-width-default));
11233
11295
  }
11234
11296
  }
11235
11297
 
@@ -11240,15 +11302,15 @@ span.bc-sidebar-link {
11240
11302
  }
11241
11303
 
11242
11304
  .bc-stack--gap-1 {
11243
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
11305
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
11244
11306
  }
11245
11307
 
11246
11308
  .bc-stack--gap-2 {
11247
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
11309
+ gap: var(--spacing-stack-sm, var(--spacing-md));
11248
11310
  }
11249
11311
 
11250
11312
  .bc-stack--gap-4 {
11251
- gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
11313
+ gap: var(--spacing-stack-lg, var(--spacing-lg));
11252
11314
  }
11253
11315
 
11254
11316
  .bc-stack--align-center {
@@ -11278,17 +11340,17 @@ span.bc-sidebar-link {
11278
11340
  align-items: center;
11279
11341
  border-radius: var(--radius-pill, var(--radius-full));
11280
11342
  line-height: 1.2;
11281
- border: 1px solid var(--tag-border);
11343
+ border: var(--border-width-thin) solid var(--tag-border);
11282
11344
  transition: all
11283
11345
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
11284
11346
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
11285
11347
  font-size: var(--font-size-md);
11286
- padding: 0 calc(var(--spacing-base) * 2);
11287
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
11348
+ padding: 0 var(--spacing-md);
11349
+ gap: var(--spacing-stack-sm, var(--spacing-md));
11288
11350
  background-color: var(--tag-bg);
11289
11351
  color: var(--tag-text);
11290
11352
  font-family: var(
11291
- --default-ui-font-family,
11353
+ --font-family-default-ui,
11292
11354
  var(--font-ui, var(--font-body, var(--font-family-sans)))
11293
11355
  );
11294
11356
  }
@@ -11300,12 +11362,12 @@ span.bc-sidebar-link {
11300
11362
 
11301
11363
  .bc-tag--xs {
11302
11364
  font-size: var(--font-size-xs);
11303
- padding: 0 calc(var(--spacing-base) * 1);
11365
+ padding: 0 var(--spacing-sm);
11304
11366
  }
11305
11367
 
11306
11368
  .bc-tag--sm {
11307
11369
  font-size: var(--font-size-sm);
11308
- padding: 0 calc(var(--spacing-base) * 1.5);
11370
+ padding: 0 var(--spacing-smh);
11309
11371
  }
11310
11372
 
11311
11373
  .bc-tag--lg {
@@ -11315,7 +11377,7 @@ span.bc-sidebar-link {
11315
11377
 
11316
11378
  .bc-tag--xl {
11317
11379
  font-size: var(--font-size-xl);
11318
- padding: 0 calc(var(--spacing-base) * 3);
11380
+ padding: 0 var(--spacing-mdh);
11319
11381
  }
11320
11382
 
11321
11383
  .bc-tag:has(.bc-tag__close) {
@@ -11331,13 +11393,13 @@ span.bc-sidebar-link {
11331
11393
  display: flex;
11332
11394
  align-items: center;
11333
11395
  justify-content: center;
11334
- width: calc(var(--spacing-base) * 4);
11335
- height: calc(var(--spacing-base) * 4);
11396
+ width: var(--spacing-lg);
11397
+ height: var(--spacing-lg);
11336
11398
  border-radius: var(--radius-full);
11337
11399
  transition: all
11338
11400
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
11339
11401
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
11340
- border: 1px solid transparent;
11402
+ border: var(--border-width-thin) solid transparent;
11341
11403
  }
11342
11404
 
11343
11405
  .bc-tag__close:hover {
@@ -11395,7 +11457,7 @@ span.bc-sidebar-link {
11395
11457
  display: flex;
11396
11458
  align-items: center;
11397
11459
  justify-content: flex-end;
11398
- gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
11460
+ gap: var(--spacing-stack-sm, var(--spacing-md));
11399
11461
  }
11400
11462
 
11401
11463
  /* Switch Component */
@@ -11454,7 +11516,7 @@ span.bc-sidebar-link {
11454
11516
  transition: background-color var(--motion-transition-fast)
11455
11517
  var(--motion-easing-standard);
11456
11518
  cursor: pointer;
11457
- padding: calc(var(--spacing-base)) var(--spacing-base);
11519
+ padding: var(--spacing-sm) var(--spacing-base);
11458
11520
  }
11459
11521
 
11460
11522
  /* Switch track - off state */
@@ -11482,18 +11544,18 @@ span.bc-sidebar-link {
11482
11544
  .bc-switch__track-label--off {
11483
11545
  justify-content: flex-end;
11484
11546
  padding-inline-end: var(--spacing-base);
11485
- padding-inline-start: calc(var(--spacing-base) * 5);
11547
+ padding-inline-start: var(--spacing-lgh);
11486
11548
  color: var(--color-gray-600);
11487
- line-height: 1;
11549
+ line-height: var(--line-height-none);
11488
11550
  }
11489
11551
 
11490
11552
  /* On label positioning and styling */
11491
11553
  .bc-switch__track-label--on {
11492
11554
  justify-content: flex-start;
11493
- padding-inline-end: calc(var(--spacing-base) * 5);
11555
+ padding-inline-end: var(--spacing-lgh);
11494
11556
  padding-inline-start: var(--spacing-base);
11495
11557
  color: var(--switch-track-on-label, var(--color-gray-100));
11496
- line-height: 1;
11558
+ line-height: var(--line-height-none);
11497
11559
  }
11498
11560
 
11499
11561
  .bc-switch--size-xs .bc-switch__track-label {
@@ -11529,8 +11591,8 @@ span.bc-sidebar-link {
11529
11591
  .bc-switch__thumb {
11530
11592
  grid-area: stack;
11531
11593
  position: relative;
11532
- width: calc(var(--spacing-base) * 4); /* 16px equivalent */
11533
- height: calc(var(--spacing-base) * 4);
11594
+ width: var(--spacing-lg); /* 16px equivalent */
11595
+ height: var(--spacing-lg);
11534
11596
  border-radius: var(--radius-full);
11535
11597
  background-color: var(--color-white);
11536
11598
  box-shadow: var(
@@ -11549,23 +11611,23 @@ span.bc-sidebar-link {
11549
11611
  automatically via the logical property. calc(100% - thumbWidth) moves
11550
11612
  the thumb to the far end of the grid area regardless of track width. */
11551
11613
  .bc-switch__thumb--on {
11552
- inset-inline-start: calc(100% - var(--spacing-base) * 4);
11614
+ inset-inline-start: calc(100% - var(--spacing-lg));
11553
11615
  }
11554
11616
 
11555
11617
  /* Size variants for track and thumb */
11556
11618
  .bc-switch--xs .bc-switch__thumb {
11557
- width: calc(var(--spacing-base) * 3); /* 12px equivalent */
11558
- height: calc(var(--spacing-base) * 3);
11619
+ width: var(--spacing-mdh); /* 12px equivalent */
11620
+ height: var(--spacing-mdh);
11559
11621
  }
11560
11622
  .bc-switch--xs .bc-switch__thumb--on {
11561
- inset-inline-start: calc(100% - var(--spacing-base) * 3);
11623
+ inset-inline-start: calc(100% - var(--spacing-mdh));
11562
11624
  }
11563
11625
  .bc-switch--xs .bc-switch__track-label--off {
11564
11626
  padding-inline-end: var(--spacing-base);
11565
- padding-inline-start: calc(var(--spacing-base) * 4);
11627
+ padding-inline-start: var(--spacing-lg);
11566
11628
  }
11567
11629
  .bc-switch--xs .bc-switch__track-label--on {
11568
- padding-inline-end: calc(var(--spacing-base) * 4);
11630
+ padding-inline-end: var(--spacing-lg);
11569
11631
  padding-inline-start: var(--spacing-base);
11570
11632
  }
11571
11633
  .bc-switch--xs .bc-switch__track {
@@ -11581,10 +11643,10 @@ span.bc-sidebar-link {
11581
11643
  }
11582
11644
  .bc-switch--sm .bc-switch__track-label--off {
11583
11645
  padding-inline-end: var(--spacing-base);
11584
- padding-inline-start: calc(var(--spacing-base) * 5);
11646
+ padding-inline-start: var(--spacing-lgh);
11585
11647
  }
11586
11648
  .bc-switch--sm .bc-switch__track-label--on {
11587
- padding-inline-end: calc(var(--spacing-base) * 5);
11649
+ padding-inline-end: var(--spacing-lgh);
11588
11650
  padding-inline-start: var(--spacing-base);
11589
11651
  }
11590
11652
  .bc-switch--sm .bc-switch__track {
@@ -11592,18 +11654,18 @@ span.bc-sidebar-link {
11592
11654
  }
11593
11655
 
11594
11656
  .bc-switch--md .bc-switch__thumb {
11595
- width: calc(var(--spacing-base) * 4); /* 20px equivalent */
11596
- height: calc(var(--spacing-base) * 4);
11657
+ width: var(--spacing-lg); /* 20px equivalent */
11658
+ height: var(--spacing-lg);
11597
11659
  }
11598
11660
  .bc-switch--md .bc-switch__thumb--on {
11599
- inset-inline-start: calc(100% - var(--spacing-base) * 4);
11661
+ inset-inline-start: calc(100% - var(--spacing-lg));
11600
11662
  }
11601
11663
  .bc-switch--md .bc-switch__track-label--off {
11602
11664
  padding-inline-end: var(--spacing-base);
11603
- padding-inline-start: calc(var(--spacing-base) * 6);
11665
+ padding-inline-start: var(--spacing-xl);
11604
11666
  }
11605
11667
  .bc-switch--md .bc-switch__track-label--on {
11606
- padding-inline-end: calc(var(--spacing-base) * 6);
11668
+ padding-inline-end: var(--spacing-xl);
11607
11669
  padding-inline-start: var(--spacing-base);
11608
11670
  }
11609
11671
  .bc-switch--md .bc-switch__track {
@@ -11611,11 +11673,11 @@ span.bc-sidebar-link {
11611
11673
  }
11612
11674
 
11613
11675
  .bc-switch--lg .bc-switch__thumb {
11614
- width: calc(var(--spacing-base) * 5); /* 20px equivalent */
11615
- height: calc(var(--spacing-base) * 5);
11676
+ width: var(--spacing-lgh); /* 20px equivalent */
11677
+ height: var(--spacing-lgh);
11616
11678
  }
11617
11679
  .bc-switch--lg .bc-switch__thumb--on {
11618
- inset-inline-start: calc(100% - var(--spacing-base) * 5);
11680
+ inset-inline-start: calc(100% - var(--spacing-lgh));
11619
11681
  }
11620
11682
  .bc-switch--lg .bc-switch__track-label--off {
11621
11683
  padding-inline-end: var(--spacing-base);
@@ -11626,15 +11688,15 @@ span.bc-sidebar-link {
11626
11688
  padding-inline-start: var(--spacing-base);
11627
11689
  }
11628
11690
  .bc-switch--lg .bc-switch__track {
11629
- min-width: calc(var(--spacing-base) * 12);
11691
+ min-width: var(--spacing-3xl);
11630
11692
  }
11631
11693
 
11632
11694
  .bc-switch--xl .bc-switch__thumb {
11633
- width: calc(var(--spacing-base) * 6); /* 24px equivalent */
11634
- height: calc(var(--spacing-base) * 6);
11695
+ width: var(--spacing-xl); /* 24px equivalent */
11696
+ height: var(--spacing-xl);
11635
11697
  }
11636
11698
  .bc-switch--xl .bc-switch__thumb--on {
11637
- inset-inline-start: calc(100% - var(--spacing-base) * 6);
11699
+ inset-inline-start: calc(100% - var(--spacing-xl));
11638
11700
  }
11639
11701
  .bc-switch--xl .bc-switch__track-label--off {
11640
11702
  padding-inline-end: var(--spacing-base);
@@ -11651,19 +11713,19 @@ span.bc-sidebar-link {
11651
11713
  /* Match input height — adds vertical padding so the switch occupies the same
11652
11714
  height as text inputs at the corresponding size. */
11653
11715
  .bc-switch--match-input.bc-switch--xs {
11654
- padding-block: calc(var(--spacing-base) * 1.5);
11716
+ padding-block: var(--spacing-smh);
11655
11717
  }
11656
11718
  .bc-switch--match-input.bc-switch--sm {
11657
- padding-block: calc(var(--spacing-base) * 2);
11719
+ padding-block: var(--spacing-md);
11658
11720
  }
11659
11721
  .bc-switch--match-input.bc-switch--md {
11660
11722
  padding-block: calc(var(--spacing-base) * 1.75);
11661
11723
  }
11662
11724
  .bc-switch--match-input.bc-switch--lg {
11663
- padding-block: calc(var(--spacing-base) * 2);
11725
+ padding-block: var(--spacing-md);
11664
11726
  }
11665
11727
  .bc-switch--match-input.bc-switch--xl {
11666
- padding-block: calc(var(--spacing-base) * 2);
11728
+ padding-block: var(--spacing-md);
11667
11729
  }
11668
11730
 
11669
11731
  /* Focus styles are handled by the base focus system */
@@ -11685,12 +11747,13 @@ span.bc-sidebar-link {
11685
11747
 
11686
11748
  .dark .bc-switch__track--off {
11687
11749
  background-color: var(--bg-subtle);
11688
- border: 1px solid var(--border-default);
11750
+ border: var(--border-width-thin) solid var(--border-default);
11689
11751
  }
11690
11752
 
11691
11753
  .dark .bc-switch__track--on {
11692
11754
  background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
11693
- border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
11755
+ border: var(--border-width-thin) solid
11756
+ var(--switch-track-on-border-dark, var(--color-primary-500));
11694
11757
  }
11695
11758
 
11696
11759
  .dark .bc-switch__track-label--on {
@@ -11738,7 +11801,7 @@ span.bc-sidebar-link {
11738
11801
  background-color: var(--table-bg);
11739
11802
  color: var(--table-text);
11740
11803
  font-family: var(
11741
- --default-ui-font-family,
11804
+ --font-family-default-ui,
11742
11805
  var(--font-ui, var(--font-body, var(--font-family-sans)))
11743
11806
  );
11744
11807
  font-size: var(--font-size-md);
@@ -11792,7 +11855,7 @@ span.bc-sidebar-link {
11792
11855
 
11793
11856
  /* With table border */
11794
11857
  .bc-table-container--with-table-border {
11795
- border: 1px solid var(--table-border);
11858
+ border: var(--border-width-thin) solid var(--table-border);
11796
11859
  }
11797
11860
 
11798
11861
  /* With row borders */
@@ -11802,7 +11865,7 @@ span.bc-sidebar-link {
11802
11865
  .bc-table--with-row-borders > tbody > tr > td,
11803
11866
  .bc-table--with-row-borders > tfoot > tr > th,
11804
11867
  .bc-table--with-row-borders > tfoot > tr > td {
11805
- border-bottom: 1px solid var(--table-border);
11868
+ border-bottom: var(--border-width-thin) solid var(--table-border);
11806
11869
  }
11807
11870
 
11808
11871
  /* With column borders */
@@ -11812,7 +11875,7 @@ span.bc-sidebar-link {
11812
11875
  .bc-table--with-column-borders > tbody > tr > td,
11813
11876
  .bc-table--with-column-borders > tfoot > tr > th,
11814
11877
  .bc-table--with-column-borders > tfoot > tr > td {
11815
- border-right: 1px solid var(--table-border);
11878
+ border-right: var(--border-width-thin) solid var(--table-border);
11816
11879
  }
11817
11880
 
11818
11881
  .bc-table--with-column-borders > thead > tr > th:last-child,
@@ -11854,7 +11917,7 @@ span.bc-sidebar-link {
11854
11917
  .bc-table--size-sm > tbody > tr > td,
11855
11918
  .bc-table--size-sm > tfoot > tr > th,
11856
11919
  .bc-table--size-sm > tfoot > tr > td {
11857
- padding: calc(var(--spacing-base) * 1.5);
11920
+ padding: var(--spacing-smh);
11858
11921
  font-size: var(--font-size-sm);
11859
11922
  }
11860
11923
 
@@ -11873,7 +11936,7 @@ span.bc-sidebar-link {
11873
11936
  .bc-table--size-xl > tbody > tr > td,
11874
11937
  .bc-table--size-xl > tfoot > tr > th,
11875
11938
  .bc-table--size-xl > tfoot > tr > td {
11876
- padding: calc(var(--spacing-base) * 5);
11939
+ padding: var(--spacing-lgh);
11877
11940
  font-size: var(--font-size-lg);
11878
11941
  }
11879
11942
 
@@ -11892,7 +11955,7 @@ span.bc-sidebar-link {
11892
11955
  .bc-table__footer {
11893
11956
  background-color: var(--table-header-bg);
11894
11957
  font-weight: var(--font-weight-semibold);
11895
- border-top: 2px solid var(--table-border);
11958
+ border-top: var(--border-width-medium) solid var(--table-border);
11896
11959
  }
11897
11960
 
11898
11961
  /* Dark mode styles */
@@ -11946,7 +12009,7 @@ span.bc-sidebar-link {
11946
12009
  display: flex;
11947
12010
  position: relative;
11948
12011
  background-color: var(--color-base-100);
11949
- border-bottom: 2px solid var(--color-base-200);
12012
+ border-bottom: var(--border-width-medium) solid var(--color-base-200);
11950
12013
  overflow-x: auto;
11951
12014
  overflow-y: hidden;
11952
12015
  scrollbar-width: none;
@@ -11962,7 +12025,7 @@ span.bc-sidebar-link {
11962
12025
  .bc-tabs--vertical .bc-tabs__list {
11963
12026
  flex-direction: column;
11964
12027
  border-bottom: none;
11965
- border-right: 2px solid var(--color-base-200);
12028
+ border-right: var(--border-width-medium) solid var(--color-base-200);
11966
12029
  min-width: 200px;
11967
12030
  overflow-x: hidden;
11968
12031
  overflow-y: auto;
@@ -11977,7 +12040,7 @@ span.bc-sidebar-link {
11977
12040
  border: none;
11978
12041
  cursor: pointer;
11979
12042
  font-family: var(
11980
- --default-ui-font-family,
12043
+ --font-family-default-ui,
11981
12044
  var(--font-ui, var(--font-body, var(--font-family-sans)))
11982
12045
  );
11983
12046
  font-weight: var(--font-weight-medium);
@@ -12033,8 +12096,8 @@ span.bc-sidebar-link {
12033
12096
  }
12034
12097
 
12035
12098
  .bc-tab:focus-visible {
12036
- outline: 2px solid var(--color-primary-500);
12037
- outline-offset: -2px;
12099
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
12100
+ outline-offset: calc(-1 * var(--outline-width-focus));
12038
12101
  z-index: 1;
12039
12102
  }
12040
12103
 
@@ -12103,8 +12166,8 @@ span.bc-sidebar-link {
12103
12166
  }
12104
12167
 
12105
12168
  .bc-tabs__panel:focus-visible {
12106
- outline: 2px solid var(--color-primary-500);
12107
- outline-offset: -2px;
12169
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
12170
+ outline-offset: calc(-1 * var(--outline-width-focus));
12108
12171
  }
12109
12172
 
12110
12173
  /* Responsive Design */
@@ -12150,7 +12213,7 @@ span.bc-sidebar-link {
12150
12213
  /* High contrast mode support */
12151
12214
  @media (prefers-contrast: high) {
12152
12215
  .bc-tabs__list {
12153
- border-width: 3px;
12216
+ border-width: var(--border-width-thick);
12154
12217
  }
12155
12218
 
12156
12219
  .bc-tab--active::after {
@@ -12246,8 +12309,8 @@ span.bc-sidebar-link {
12246
12309
  }
12247
12310
  .bc-tabs--variant-outline .bc-tab {
12248
12311
  background-color: var(--color-base-50);
12249
- border: 1px solid var(--color-base-300);
12250
- border-bottom: 1px solid var(--color-base-300);
12312
+ border: var(--border-width-thin) solid var(--color-base-300);
12313
+ border-bottom: var(--border-width-thin) solid var(--color-base-300);
12251
12314
  border-radius: var(--radius-control-sm, var(--radius-sm))
12252
12315
  var(--radius-control-sm, var(--radius-sm)) 0 0;
12253
12316
  }
@@ -12305,7 +12368,7 @@ span.bc-sidebar-link {
12305
12368
  /* Underline variant: minimal, clean underline style */
12306
12369
  .bc-tabs--variant-underline .bc-tabs__list {
12307
12370
  background-color: transparent;
12308
- border-bottom: 1px solid var(--color-base-200);
12371
+ border-bottom: var(--border-width-thin) solid var(--color-base-200);
12309
12372
  }
12310
12373
 
12311
12374
  .bc-tabs--variant-underline .bc-tab {
@@ -12375,7 +12438,7 @@ span.bc-sidebar-link {
12375
12438
  }
12376
12439
 
12377
12440
  .bc-tabs--variant-pill .bc-tab--sm {
12378
- padding: var(--spacing-base) calc(var(--spacing-base) * 3);
12441
+ padding: var(--spacing-base) var(--spacing-mdh);
12379
12442
  }
12380
12443
 
12381
12444
  .bc-tabs--variant-pill .bc-tab--md {
@@ -12383,11 +12446,11 @@ span.bc-sidebar-link {
12383
12446
  }
12384
12447
 
12385
12448
  .bc-tabs--variant-pill .bc-tab--lg {
12386
- padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 4);
12449
+ padding: var(--spacing-smh) var(--spacing-lg);
12387
12450
  }
12388
12451
 
12389
12452
  .bc-tabs--variant-pill .bc-tab--xl {
12390
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 5);
12453
+ padding: var(--spacing-md) var(--spacing-lgh);
12391
12454
  }
12392
12455
 
12393
12456
  .bc-tabs--variant-pill
@@ -12460,7 +12523,7 @@ span.bc-sidebar-link {
12460
12523
  align-items: center;
12461
12524
  gap: 4px;
12462
12525
  padding: 4px 8px;
12463
- border: 1px solid var(--color-base-300);
12526
+ border: var(--border-width-thin) solid var(--color-base-300);
12464
12527
  border-radius: var(--radius-md, 5px);
12465
12528
  background: var(--color-white);
12466
12529
  min-height: 34px;
@@ -12546,7 +12609,7 @@ span.bc-sidebar-link {
12546
12609
  padding: 0;
12547
12610
  margin-left: 2px;
12548
12611
  font-size: 14px;
12549
- line-height: 1;
12612
+ line-height: var(--line-height-none);
12550
12613
  color: var(--color-base-400);
12551
12614
  opacity: 0.5;
12552
12615
  transition: opacity 120ms ease;
@@ -12601,7 +12664,7 @@ span.bc-sidebar-link {
12601
12664
  font-size: var(--font-size-sm);
12602
12665
  line-height: var(--font-size-sm-lh);
12603
12666
  font-weight: var(--font-weight-medium);
12604
- max-width: 200px;
12667
+ max-width: var(--overlay-width-xs);
12605
12668
  word-wrap: break-word;
12606
12669
  z-index: var(--z-index-tooltip);
12607
12670
  box-shadow: var(--shadow-popover, var(--shadow-md));
@@ -12677,7 +12740,7 @@ span.bc-sidebar-link {
12677
12740
  .dark .bc-tooltip {
12678
12741
  background-color: var(--bg-elevated);
12679
12742
  color: var(--text-normal);
12680
- border: 1px solid var(--border-default);
12743
+ border: var(--border-width-thin) solid var(--border-default);
12681
12744
  box-shadow: var(
12682
12745
  --shadow-tooltip-dark,
12683
12746
  0 10px 15px -3px var(--shadow-color-dark),
@@ -12694,11 +12757,11 @@ span.bc-sidebar-link {
12694
12757
  /* High contrast mode */
12695
12758
  @media (prefers-contrast: high) {
12696
12759
  .bc-tooltip {
12697
- border: 1px solid var(--color-neutral-600);
12760
+ border: var(--border-width-thin) solid var(--color-neutral-600);
12698
12761
  }
12699
12762
 
12700
12763
  .dark .bc-tooltip {
12701
- border: 1px solid var(--color-neutral-400);
12764
+ border: var(--border-width-thin) solid var(--color-neutral-400);
12702
12765
  }
12703
12766
  }
12704
12767
 
@@ -12715,7 +12778,7 @@ span.bc-sidebar-link {
12715
12778
  align-items: center;
12716
12779
  gap: var(--spacing-stack-sm);
12717
12780
  padding: var(--spacing-sm);
12718
- border: 1px solid var(--color-neutral-200);
12781
+ border: var(--border-width-thin) solid var(--color-neutral-200);
12719
12782
  border-radius: var(--radius-control, var(--radius-md));
12720
12783
  background-color: var(--color-neutral-50);
12721
12784
  width: 100%;
@@ -12734,7 +12797,7 @@ span.bc-sidebar-link {
12734
12797
 
12735
12798
  .bc-toolbar__divider {
12736
12799
  width: 1px;
12737
- height: calc(var(--spacing-base) * 6);
12800
+ height: var(--spacing-xl);
12738
12801
  background-color: var(--color-neutral-300);
12739
12802
  margin: 0 var(--spacing-xs);
12740
12803
  }
@@ -12763,9 +12826,9 @@ span.bc-sidebar-link {
12763
12826
 
12764
12827
  .bc-toolbar .bc-input-container {
12765
12828
  /* Reduce horizontal padding in toolbar but keep vertical from size */
12766
- padding-inline: calc(var(--spacing-base) * 3);
12829
+ padding-inline: var(--spacing-mdh);
12767
12830
  outline-width: 1px;
12768
- outline-offset: -1px;
12831
+ outline-offset: calc(-1 * var(--outline-width-default));
12769
12832
  width: auto;
12770
12833
  box-shadow: var(--shadow-none, none);
12771
12834
  }
@@ -12778,7 +12841,7 @@ span.bc-sidebar-link {
12778
12841
  }
12779
12842
 
12780
12843
  .bc-toolbar__divider {
12781
- height: calc(var(--spacing-base) * 4);
12844
+ height: var(--spacing-lg);
12782
12845
  margin: 0 var(--spacing-xs);
12783
12846
  }
12784
12847
 
@@ -12907,7 +12970,7 @@ span.bc-sidebar-link {
12907
12970
  background: var(--color-white);
12908
12971
  border-radius: var(--radius-lg);
12909
12972
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
12910
- border: 1px solid var(--color-base-200);
12973
+ border: var(--border-width-thin) solid var(--color-base-200);
12911
12974
  width: auto;
12912
12975
  }
12913
12976
 
@@ -12938,7 +13001,7 @@ span.bc-sidebar-link {
12938
13001
 
12939
13002
  .bc-toolbar--floating .bc-toolbar__divider {
12940
13003
  width: 1px;
12941
- height: calc(var(--spacing-base) * 5);
13004
+ height: var(--spacing-lgh);
12942
13005
  background: var(--color-base-200);
12943
13006
  margin: 0 calc(var(--spacing-base) * 0.5);
12944
13007
  flex-shrink: 0;
@@ -13073,7 +13136,7 @@ span.bc-sidebar-link {
13073
13136
  background: oklch(0.95 0 0);
13074
13137
  border-radius: var(--radius-sm);
13075
13138
  font-weight: 500;
13076
- line-height: 1;
13139
+ line-height: var(--line-height-none);
13077
13140
  display: inline-flex;
13078
13141
  align-items: center;
13079
13142
  }
@@ -13123,8 +13186,8 @@ span.bc-sidebar-link {
13123
13186
 
13124
13187
  /* Focus styles for keyboard navigation */
13125
13188
  .bc-tree-item__row:focus-visible {
13126
- outline: 2px solid var(--color-primary-500);
13127
- outline-offset: -2px;
13189
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
13190
+ outline-offset: calc(-1 * var(--outline-width-focus));
13128
13191
  }
13129
13192
 
13130
13193
  .dark .bc-tree-item__row:focus-visible {
@@ -13134,7 +13197,7 @@ span.bc-sidebar-link {
13134
13197
  /* Rating Input Component */
13135
13198
  .bc-rating-input {
13136
13199
  display: inline-flex;
13137
- gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
13200
+ gap: var(--spacing-stack-xs, var(--spacing-sm));
13138
13201
  }
13139
13202
 
13140
13203
  .bc-rating-input__icon-container {
@@ -13208,12 +13271,12 @@ span.bc-sidebar-link {
13208
13271
 
13209
13272
  /* Custom radio indicator */
13210
13273
  .bc-radio-group__indicator {
13211
- width: calc(var(--spacing-base) * 5);
13212
- height: calc(var(--spacing-base) * 5);
13213
- min-width: calc(var(--spacing-base) * 5);
13214
- min-height: calc(var(--spacing-base) * 5);
13274
+ width: var(--spacing-lgh);
13275
+ height: var(--spacing-lgh);
13276
+ min-width: var(--spacing-lgh);
13277
+ min-height: var(--spacing-lgh);
13215
13278
  border-radius: 50%;
13216
- border: 1px solid var(--color-base-400);
13279
+ border: var(--border-width-thin) solid var(--color-base-400);
13217
13280
  background-color: --color-white;
13218
13281
  flex-shrink: 0;
13219
13282
  position: relative;
@@ -13233,8 +13296,8 @@ span.bc-sidebar-link {
13233
13296
  .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
13234
13297
  content: '';
13235
13298
  position: absolute;
13236
- width: calc(var(--spacing-base) * 2);
13237
- height: calc(var(--spacing-base) * 2);
13299
+ width: var(--spacing-md);
13300
+ height: var(--spacing-md);
13238
13301
  border-radius: 50%;
13239
13302
  background-color: var(--color-primary-500);
13240
13303
  transition: all var(--motion-duration-fast) var(--motion-easing-standard);
@@ -13242,7 +13305,7 @@ span.bc-sidebar-link {
13242
13305
 
13243
13306
  /* Focus state */
13244
13307
  .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
13245
- outline: 2px solid var(--interactive-focus);
13308
+ outline: var(--outline-width-focus) solid var(--interactive-focus);
13246
13309
  outline-offset: 2px;
13247
13310
  }
13248
13311
 
@@ -13291,8 +13354,8 @@ span.bc-sidebar-link {
13291
13354
  .bc-radio-group__item--size-xs
13292
13355
  .bc-radio-group__input:checked
13293
13356
  + .bc-radio-group__indicator::after {
13294
- width: calc(var(--spacing-base) * 1.5);
13295
- height: calc(var(--spacing-base) * 1.5);
13357
+ width: var(--spacing-smh);
13358
+ height: var(--spacing-smh);
13296
13359
  }
13297
13360
 
13298
13361
  .bc-radio-group__item--size-xs .bc-radio-group__label {
@@ -13304,10 +13367,10 @@ span.bc-sidebar-link {
13304
13367
  }
13305
13368
 
13306
13369
  .bc-radio-group__item--size-sm .bc-radio-group__indicator {
13307
- width: calc(var(--spacing-base) * 4);
13308
- height: calc(var(--spacing-base) * 4);
13309
- min-width: calc(var(--spacing-base) * 4);
13310
- min-height: calc(var(--spacing-base) * 4);
13370
+ width: var(--spacing-lg);
13371
+ height: var(--spacing-lg);
13372
+ min-width: var(--spacing-lg);
13373
+ min-height: var(--spacing-lg);
13311
13374
  }
13312
13375
 
13313
13376
  .bc-radio-group__item--size-sm
@@ -13328,10 +13391,10 @@ span.bc-sidebar-link {
13328
13391
  /* md is default */
13329
13392
 
13330
13393
  .bc-radio-group__item--size-lg .bc-radio-group__indicator {
13331
- width: calc(var(--spacing-base) * 5);
13332
- height: calc(var(--spacing-base) * 5);
13333
- min-width: calc(var(--spacing-base) * 5);
13334
- min-height: calc(var(--spacing-base) * 5);
13394
+ width: var(--spacing-lgh);
13395
+ height: var(--spacing-lgh);
13396
+ min-width: var(--spacing-lgh);
13397
+ min-height: var(--spacing-lgh);
13335
13398
  }
13336
13399
 
13337
13400
  .bc-radio-group__item--size-lg
@@ -13404,7 +13467,7 @@ span.bc-sidebar-link {
13404
13467
  .bc-notice {
13405
13468
  display: flex;
13406
13469
  flex-direction: row;
13407
- gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
13470
+ gap: var(--spacing-stack-md, var(--spacing-mdh));
13408
13471
  align-items: start;
13409
13472
  border-radius: var(--radius-control, var(--radius-md));
13410
13473
  padding: var(--spacing-md);
@@ -13427,12 +13490,12 @@ span.bc-sidebar-link {
13427
13490
 
13428
13491
  /* Tones */
13429
13492
  .bc-notice--tone-subtle {
13430
- border: 1px solid var(--border-default);
13493
+ border: var(--border-width-thin) solid var(--border-default);
13431
13494
  background-color: var(--bg-surface);
13432
13495
  }
13433
13496
 
13434
13497
  .bc-notice--tone-prominent {
13435
- border: 1px solid var(--border-default);
13498
+ border: var(--border-width-thin) solid var(--border-default);
13436
13499
  }
13437
13500
 
13438
13501
  /* Variants base color variables per tone */
@@ -13571,7 +13634,7 @@ span.bc-sidebar-link {
13571
13634
  border-radius: var(--notification-radius);
13572
13635
  background-color: var(--notification-bg);
13573
13636
  color: var(--notification-text-color);
13574
- border: 1px solid var(--notification-border-color);
13637
+ border: var(--border-width-thin) solid var(--notification-border-color);
13575
13638
  box-shadow: var(--shadow-md);
13576
13639
  }
13577
13640
 
@@ -13698,12 +13761,12 @@ span.bc-sidebar-link {
13698
13761
  display: flex;
13699
13762
  flex-direction: column;
13700
13763
  background: var(--color-white);
13701
- border: 1px solid var(--color-base-200);
13764
+ border: var(--border-width-thin) solid var(--color-base-200);
13702
13765
  border-radius: var(--radius-lg, 8px);
13703
13766
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
13704
13767
  overflow: hidden;
13705
13768
  font-family: var(
13706
- --default-ui-font-family,
13769
+ --font-family-default-ui,
13707
13770
  var(--font-ui, var(--font-body, var(--font-family-sans)))
13708
13771
  );
13709
13772
  }
@@ -13714,7 +13777,7 @@ span.bc-sidebar-link {
13714
13777
  align-items: center;
13715
13778
  justify-content: space-between;
13716
13779
  padding: 12px 16px;
13717
- border-bottom: 1px solid var(--color-base-200);
13780
+ border-bottom: var(--border-width-thin) solid var(--color-base-200);
13718
13781
  flex-shrink: 0;
13719
13782
  }
13720
13783
 
@@ -13995,7 +14058,7 @@ span.bc-sidebar-link {
13995
14058
  bottom: 0;
13996
14059
  overflow: hidden;
13997
14060
  opacity: 0.2;
13998
- line-height: 1;
14061
+ line-height: var(--line-height-none);
13999
14062
  text-align: initial;
14000
14063
  forced-color-adjust: none;
14001
14064
  transform-origin: 0 0;
@@ -14122,7 +14185,7 @@ span.bc-sidebar-link {
14122
14185
  .buttonWidgetAnnotation.radioButton
14123
14186
  input {
14124
14187
  background-image: none;
14125
- border: 1px solid transparent;
14188
+ border: var(--border-width-thin) solid transparent;
14126
14189
  box-sizing: border-box;
14127
14190
  font: calc(9px * var(--scale-factor)) sans-serif;
14128
14191
  height: 100%;
@@ -14155,7 +14218,7 @@ span.bc-sidebar-link {
14155
14218
  .buttonWidgetAnnotation.radioButton
14156
14219
  input[disabled] {
14157
14220
  background: none;
14158
- border: 1px solid transparent;
14221
+ border: var(--border-width-thin) solid transparent;
14159
14222
  cursor: not-allowed;
14160
14223
  }
14161
14224
 
@@ -14168,14 +14231,14 @@ span.bc-sidebar-link {
14168
14231
  .bc-pdf-page-viewer__annotation-layer
14169
14232
  .buttonWidgetAnnotation.radioButton
14170
14233
  input:hover {
14171
- border: 1px solid rgba(0, 0, 0, 1);
14234
+ border: var(--border-width-thin) solid rgba(0, 0, 0, 1);
14172
14235
  }
14173
14236
 
14174
14237
  .bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input:focus,
14175
14238
  .bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea:focus,
14176
14239
  .bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select:focus {
14177
14240
  background: none;
14178
- border: 1px solid transparent;
14241
+ border: var(--border-width-thin) solid transparent;
14179
14242
  }
14180
14243
 
14181
14244
  .bc-pdf-page-viewer__annotation-layer
@@ -14286,7 +14349,7 @@ span.bc-sidebar-link {
14286
14349
  }
14287
14350
 
14288
14351
  .bc-pdf-page-viewer__annotation-layer .popupContent {
14289
- border-top: 1px solid rgba(51, 51, 51, 1);
14352
+ border-top: var(--border-width-thin) solid rgba(51, 51, 51, 1);
14290
14353
  margin-top: calc(2px * var(--scale-factor));
14291
14354
  padding-top: calc(2px * var(--scale-factor));
14292
14355
  }
@@ -14384,7 +14447,7 @@ span.bc-sidebar-link {
14384
14447
  }
14385
14448
 
14386
14449
  .bc-dialog__consequences {
14387
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
14450
+ padding: var(--spacing-md) var(--spacing-mdh);
14388
14451
  border-radius: var(--radius-md);
14389
14452
  background: var(--bg-subtle);
14390
14453
  font-size: var(--font-size-xs);
@@ -14392,13 +14455,13 @@ span.bc-sidebar-link {
14392
14455
  display: flex;
14393
14456
  flex-direction: column;
14394
14457
  gap: var(--spacing-base);
14395
- margin: calc(var(--spacing-base) * 3) 0 0;
14458
+ margin: var(--spacing-mdh) 0 0;
14396
14459
  list-style: none;
14397
14460
  }
14398
14461
 
14399
14462
  .bc-dialog__consequences li {
14400
14463
  display: flex;
14401
- gap: calc(var(--spacing-base) * 1.5);
14464
+ gap: var(--spacing-smh);
14402
14465
  }
14403
14466
 
14404
14467
  .bc-dialog__consequences li::before {
@@ -14410,23 +14473,24 @@ span.bc-sidebar-link {
14410
14473
  .bc-dialog__actions {
14411
14474
  display: flex;
14412
14475
  justify-content: flex-end;
14413
- gap: calc(var(--spacing-base) * 2);
14476
+ gap: var(--spacing-md);
14414
14477
  width: 100%;
14415
14478
  }
14416
14479
 
14417
14480
  .bc-dialog__input {
14418
14481
  display: block;
14419
14482
  width: 100%;
14420
- padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
14421
- margin-top: calc(var(--spacing-base) * 3);
14422
- border: 1px solid var(--border-input);
14483
+ padding: var(--spacing-md) var(--spacing-mdh);
14484
+ margin-top: var(--spacing-mdh);
14485
+ border: var(--border-width-thin) solid var(--border-input);
14423
14486
  border-radius: var(--radius-md);
14424
14487
  background: var(--bg-background);
14425
14488
  color: var(--text-normal);
14426
14489
  font-size: var(--font-size-sm);
14427
14490
  font-family: inherit;
14428
14491
  outline: none;
14429
- transition: border-color 0.15s ease;
14492
+ transition: border-color var(--motion-duration-fast)
14493
+ var(--motion-easing-standard);
14430
14494
  }
14431
14495
 
14432
14496
  .bc-dialog__input::placeholder {
@@ -14520,7 +14584,8 @@ span.bc-sidebar-link {
14520
14584
  /* High contrast */
14521
14585
  @media (prefers-contrast: more) {
14522
14586
  .bc-ribbon {
14523
- outline: 1px solid var(--border-border-light, var(--color-neutral-500));
14587
+ outline: var(--outline-width-default) solid
14588
+ var(--border-border-light, var(--color-neutral-500));
14524
14589
  }
14525
14590
  }
14526
14591
 
@@ -14540,13 +14605,13 @@ span.bc-sidebar-link {
14540
14605
 
14541
14606
  /* Default variant: bordered list */
14542
14607
  .bc-accordion--default {
14543
- border: 1px solid var(--border-default);
14608
+ border: var(--border-width-thin) solid var(--border-default);
14544
14609
  border-radius: var(--radius-md);
14545
14610
  overflow: hidden;
14546
14611
  }
14547
14612
 
14548
14613
  .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
14549
- border-top: 1px solid var(--border-default);
14614
+ border-top: var(--border-width-thin) solid var(--border-default);
14550
14615
  }
14551
14616
 
14552
14617
  /* Separated variant: cards with gaps */
@@ -14555,7 +14620,7 @@ span.bc-sidebar-link {
14555
14620
  }
14556
14621
 
14557
14622
  .bc-accordion--separated .bc-accordion__item {
14558
- border: 1px solid var(--border-default);
14623
+ border: var(--border-width-thin) solid var(--border-default);
14559
14624
  border-radius: var(--radius-md);
14560
14625
  overflow: hidden;
14561
14626
  }
@@ -14591,8 +14656,8 @@ span.bc-sidebar-link {
14591
14656
  }
14592
14657
 
14593
14658
  .bc-accordion__header:focus-visible {
14594
- outline: 2px solid var(--color-primary-500);
14595
- outline-offset: -2px;
14659
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
14660
+ outline-offset: calc(-1 * var(--outline-width-focus));
14596
14661
  }
14597
14662
 
14598
14663
  .bc-accordion__header:disabled {
@@ -14622,8 +14687,8 @@ span.bc-sidebar-link {
14622
14687
  display: inline-block;
14623
14688
  width: 0.5em;
14624
14689
  height: 0.5em;
14625
- border-right: 2px solid currentColor;
14626
- border-bottom: 2px solid currentColor;
14690
+ border-right: var(--border-width-medium) solid currentColor;
14691
+ border-bottom: var(--border-width-medium) solid currentColor;
14627
14692
  transform: rotate(45deg);
14628
14693
  margin-top: -0.15em;
14629
14694
  }
@@ -14723,7 +14788,7 @@ span.bc-sidebar-link {
14723
14788
  display: inline-flex;
14724
14789
  flex-direction: column;
14725
14790
  background-color: var(--bg-background);
14726
- border: 1px solid var(--border-default);
14791
+ border: var(--border-width-thin) solid var(--border-default);
14727
14792
  border-radius: var(--radius-md);
14728
14793
  padding: var(--spacing-md);
14729
14794
  user-select: none;
@@ -14748,14 +14813,14 @@ span.bc-sidebar-link {
14748
14813
  align-items: center;
14749
14814
  justify-content: center;
14750
14815
  background: none;
14751
- border: 1px solid transparent;
14816
+ border: var(--border-width-thin) solid transparent;
14752
14817
  border-radius: var(--radius-sm);
14753
14818
  cursor: pointer;
14754
14819
  color: var(--text-normal);
14755
14820
  font-weight: var(--font-weight-semibold);
14756
14821
  transition: background-color var(--motion-transition-fast)
14757
14822
  var(--motion-easing-standard);
14758
- line-height: 1;
14823
+ line-height: var(--line-height-none);
14759
14824
  }
14760
14825
 
14761
14826
  .bc-calendar__nav-btn:hover:not(:disabled) {
@@ -14763,8 +14828,8 @@ span.bc-sidebar-link {
14763
14828
  }
14764
14829
 
14765
14830
  .bc-calendar__nav-btn:focus-visible {
14766
- outline: 2px solid var(--color-primary-500);
14767
- outline-offset: -2px;
14831
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
14832
+ outline-offset: calc(-1 * var(--outline-width-focus));
14768
14833
  }
14769
14834
 
14770
14835
  .bc-calendar__nav-btn:disabled {
@@ -14803,8 +14868,8 @@ span.bc-sidebar-link {
14803
14868
  }
14804
14869
 
14805
14870
  .bc-calendar__title-btn:focus-visible {
14806
- outline: 2px solid var(--color-primary-500);
14807
- outline-offset: -2px;
14871
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
14872
+ outline-offset: calc(-1 * var(--outline-width-focus));
14808
14873
  }
14809
14874
 
14810
14875
  .bc-calendar__title-btn:disabled {
@@ -14857,8 +14922,8 @@ span.bc-sidebar-link {
14857
14922
  }
14858
14923
 
14859
14924
  .bc-calendar__day:focus-visible {
14860
- outline: 2px solid var(--cal-selected-bg);
14861
- outline-offset: -2px;
14925
+ outline: var(--outline-width-focus) solid var(--cal-selected-bg);
14926
+ outline-offset: calc(-1 * var(--outline-width-focus));
14862
14927
  }
14863
14928
 
14864
14929
  .bc-calendar__day--outside {
@@ -14931,8 +14996,8 @@ span.bc-sidebar-link {
14931
14996
  }
14932
14997
 
14933
14998
  .bc-calendar__month-cell:focus-visible {
14934
- outline: 2px solid var(--cal-selected-bg);
14935
- outline-offset: -2px;
14999
+ outline: var(--outline-width-focus) solid var(--cal-selected-bg);
15000
+ outline-offset: calc(-1 * var(--outline-width-focus));
14936
15001
  }
14937
15002
 
14938
15003
  .bc-calendar__month-cell--current {
@@ -14977,8 +15042,8 @@ span.bc-sidebar-link {
14977
15042
  }
14978
15043
 
14979
15044
  .bc-calendar__year-cell:focus-visible {
14980
- outline: 2px solid var(--cal-selected-bg);
14981
- outline-offset: -2px;
15045
+ outline: var(--outline-width-focus) solid var(--cal-selected-bg);
15046
+ outline-offset: calc(-1 * var(--outline-width-focus));
14982
15047
  }
14983
15048
 
14984
15049
  .bc-calendar__year-cell--current {
@@ -15332,7 +15397,7 @@ span.bc-sidebar-link {
15332
15397
  /* Thumb */
15333
15398
  .bc-advanced-slider__thumb {
15334
15399
  background-color: var(--color-white);
15335
- border: 2px solid var(--slider-color);
15400
+ border: var(--border-width-medium) solid var(--slider-color);
15336
15401
  border-radius: var(--radius-full);
15337
15402
  cursor: grab;
15338
15403
  box-shadow: var(--shadow-sm);
@@ -15352,7 +15417,7 @@ span.bc-sidebar-link {
15352
15417
  }
15353
15418
 
15354
15419
  .bc-advanced-slider__thumb:focus-visible {
15355
- outline: 2px solid var(--color-primary-500);
15420
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
15356
15421
  outline-offset: 2px;
15357
15422
  }
15358
15423
 
@@ -15370,7 +15435,7 @@ span.bc-sidebar-link {
15370
15435
  }
15371
15436
 
15372
15437
  .bc-advanced-slider__thumb-custom:focus-visible {
15373
- outline: 2px solid var(--color-primary-500);
15438
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
15374
15439
  outline-offset: 2px;
15375
15440
  }
15376
15441
 
@@ -15384,7 +15449,7 @@ span.bc-sidebar-link {
15384
15449
  font-weight: var(--font-weight-semibold);
15385
15450
  pointer-events: none;
15386
15451
  text-align: center;
15387
- line-height: 1;
15452
+ line-height: var(--line-height-none);
15388
15453
  }
15389
15454
 
15390
15455
  /* Ticks container */
@@ -15610,7 +15675,7 @@ span.bc-sidebar-link {
15610
15675
  font-variant-numeric: tabular-nums;
15611
15676
  color: var(--text-normal);
15612
15677
  background-color: var(--bg-background);
15613
- border: 1.5px solid var(--border-default);
15678
+ border: var(--border-width-default) solid var(--border-default);
15614
15679
  border-radius: var(--radius-md);
15615
15680
  outline: none;
15616
15681
  caret-color: var(--otp-focus-color);
@@ -15718,14 +15783,15 @@ span.bc-sidebar-link {
15718
15783
  align-items: center;
15719
15784
  justify-content: center;
15720
15785
  gap: var(--spacing-stack-2xs);
15721
- border: 1.5px var(--toggle-border-style) var(--toggle-border);
15786
+ border: var(--border-width-default) var(--toggle-border-style)
15787
+ var(--toggle-border);
15722
15788
  cursor: pointer;
15723
15789
  font-family: inherit;
15724
15790
  font-weight: var(--font-weight-semibold);
15725
15791
  background-color: var(--toggle-bg);
15726
15792
  color: var(--toggle-text);
15727
15793
  text-shadow: var(--toggle-text-shadow);
15728
- line-height: 1;
15794
+ line-height: var(--line-height-none);
15729
15795
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
15730
15796
  user-select: none;
15731
15797
  }
@@ -15746,7 +15812,7 @@ span.bc-sidebar-link {
15746
15812
  }
15747
15813
 
15748
15814
  .bc-toggle-button:focus-visible {
15749
- outline: 2px solid var(--color-primary-500);
15815
+ outline: var(--outline-width-focus) solid var(--color-primary-500);
15750
15816
  outline-offset: 2px;
15751
15817
  }
15752
15818
 
@@ -15763,8 +15829,8 @@ span.bc-sidebar-link {
15763
15829
  /* Size variants */
15764
15830
  .bc-toggle-button--size-xs {
15765
15831
  font-size: var(--font-size-xs);
15766
- min-height: calc(var(--spacing-base) * 6);
15767
- min-width: calc(var(--spacing-base) * 6);
15832
+ min-height: var(--spacing-xl);
15833
+ min-width: var(--spacing-xl);
15768
15834
  }
15769
15835
 
15770
15836
  .bc-toggle-button--size-sm {
@@ -15775,20 +15841,20 @@ span.bc-sidebar-link {
15775
15841
 
15776
15842
  .bc-toggle-button--size-md {
15777
15843
  font-size: var(--font-size-md);
15778
- min-height: calc(var(--spacing-base) * 8);
15779
- min-width: calc(var(--spacing-base) * 8);
15844
+ min-height: var(--spacing-2xl);
15845
+ min-width: var(--spacing-2xl);
15780
15846
  }
15781
15847
 
15782
15848
  .bc-toggle-button--size-lg {
15783
15849
  font-size: var(--font-size-lg);
15784
- min-height: calc(var(--spacing-base) * 10);
15785
- min-width: calc(var(--spacing-base) * 10);
15850
+ min-height: var(--spacing-2xlh);
15851
+ min-width: var(--spacing-2xlh);
15786
15852
  }
15787
15853
 
15788
15854
  .bc-toggle-button--size-xl {
15789
15855
  font-size: var(--font-size-xl);
15790
- min-height: calc(var(--spacing-base) * 12);
15791
- min-width: calc(var(--spacing-base) * 12);
15856
+ min-height: var(--spacing-3xl);
15857
+ min-width: var(--spacing-3xl);
15792
15858
  }
15793
15859
 
15794
15860
  /* Dark mode */
@@ -15814,7 +15880,7 @@ span.bc-sidebar-link {
15814
15880
  /* High contrast */
15815
15881
  @media (prefers-contrast: high) {
15816
15882
  .bc-toggle-button {
15817
- border-width: 2px;
15883
+ border-width: var(--border-width-medium);
15818
15884
  }
15819
15885
  }
15820
15886