@tempots/beatui 0.91.0 → 0.92.0

package/dist/beatui.css

@@ -2664,8 +2664,8 @@ a:focus-visible {
 .bc-block-command-palette__search {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
+  gap: var(--spacing-smh);
+  padding: var(--spacing-md) var(--spacing-mdh);
   border-bottom: var(--border-width-thin) solid var(--color-base-200);
 }
 
@@ -2693,15 +2693,15 @@ a:focus-visible {
 .bc-block-command-palette__list {
   max-height: 260px;
   overflow-y: auto;
-  padding: 4px 0;
+  padding: var(--spacing-sm) 0;
 }
 
 /* Item */
 .bc-block-command-palette__item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 7px 12px;
+  gap: var(--spacing-md);
+  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   cursor: pointer;
   transition: background-color 80ms ease;
 }
@@ -2745,7 +2745,7 @@ a:focus-visible {
 
 /* Empty state */
 .bc-block-command-palette__empty {
-  padding: 16px;
+  padding: var(--spacing-lg);
   text-align: center;
   font-size: var(--font-size-sm);
   color: var(--color-base-400);
@@ -3299,8 +3299,8 @@ a:focus-visible {
 }
 
 .bc-input-container .bc-color-input__swatch {
-  width: 1.8rem;
-  height: 1.8rem;
+  width: calc(var(--spacing-base) * 7.2);
+  height: calc(var(--spacing-base) * 7.2);
   cursor: pointer;
   border: var(--border-width-thin) solid var(--color-neutral-300);
   border-radius: 100%;
@@ -3385,7 +3385,7 @@ a:focus-visible {
 }
 
 .bc-color-swatch-input__alpha {
-  width: 5rem;
+  width: calc(var(--spacing-base) * 20);
   margin-inline-start: var(--spacing-md);
 }
 
@@ -3402,8 +3402,8 @@ a:focus-visible {
 /* Responsive styles */
 @media (width >= 40rem) {
   .bc-color-swatch-input__control {
-    width: 2.75rem;
-    height: 2.25rem;
+    width: calc(var(--spacing-base) * 11);
+    height: calc(var(--spacing-base) * 9);
   }
 }
 
@@ -3569,7 +3569,7 @@ a:focus-visible {
 
 .bc-dropdown__trigger {
   width: 100%;
-  height: 19px;
+  height: calc(var(--spacing-base) * 4.75);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3779,26 +3779,31 @@ a:focus-visible {
 .bc-control--padding-xs {
   padding-block: var(--control-padding-block-xs);
   padding-inline: var(--control-padding-inline-xs);
+  min-height: var(--control-height-xs);
 }
 
 .bc-control--padding-sm {
   padding-block: var(--control-padding-block-sm);
   padding-inline: var(--control-padding-inline-sm);
+  min-height: var(--control-height-sm);
 }
 
 .bc-control--padding-md {
   padding-block: var(--control-padding-block-md);
   padding-inline: var(--control-padding-inline-md);
+  min-height: var(--control-height-md);
 }
 
 .bc-control--padding-lg {
   padding-block: var(--control-padding-block-lg);
   padding-inline: var(--control-padding-inline-lg);
+  min-height: var(--control-height-lg);
 }
 
 .bc-control--padding-xl {
   padding-block: var(--control-padding-block-xl);
   padding-inline: var(--control-padding-inline-xl);
+  min-height: var(--control-height-xl);
 }
 
 .bc-control--padding-xs:has(> .bc-icon:only-child) {
@@ -3978,7 +3983,7 @@ a:focus-visible {
   width: auto;
   height: auto;
   align-self: stretch;
-  min-height: 1rem;
+  min-height: var(--spacing-lg);
 }
 
 /* Tone variants */
@@ -4042,7 +4047,7 @@ a:focus-visible {
   border-left: var(--border-width-thin) solid var(--border-divider);
   width: 0;
   flex: 1;
-  min-height: 1rem;
+  min-height: var(--spacing-lg);
 }
 
 .bc-divider__label {
@@ -4493,7 +4498,7 @@ a:focus-visible {
   color: inherit;
   flex-grow: 1;
   line-height: var(--line-height-normal);
-  height: 2rem;
+  height: var(--spacing-2xl);
 }
 
 /* Use base focus system for inputs (consistent with TextInput) */
@@ -4521,7 +4526,7 @@ a:focus-visible {
   flex-grow: 1;
   overflow: hidden;
   line-height: var(--line-height-normal);
-  height: 2rem;
+  height: var(--spacing-2xl);
 }
 
 /* Text content */
@@ -5556,12 +5561,12 @@ a:focus-visible {
 .bc-history-timeline__filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 16px;
+  gap: var(--spacing-smh);
+  margin-bottom: var(--spacing-lg);
 }
 
 .bc-history-timeline__filter {
-  padding: 4px 12px;
+  padding: var(--spacing-sm) var(--spacing-mdh);
   border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-full, 9999px);
   background: transparent;
@@ -5591,8 +5596,8 @@ a:focus-visible {
 /* Entry */
 .bc-history-timeline__entry {
   display: flex;
-  gap: 12px;
-  padding-bottom: 20px;
+  gap: var(--spacing-mdh);
+  padding-bottom: var(--spacing-lgh);
 }
 
 /* Timeline line + dot */
@@ -5600,7 +5605,7 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 16px;
+  width: var(--spacing-lg);
   flex-shrink: 0;
   position: relative;
 }
@@ -5608,8 +5613,8 @@ a:focus-visible {
 .bc-history-timeline__line::after {
   content: '';
   position: absolute;
-  top: 16px;
-  bottom: -4px;
+  top: var(--spacing-lg);
+  bottom: calc(-1 * var(--spacing-sm));
   left: 50%;
   width: 1.5px;
   background: var(--color-base-200);
@@ -5621,11 +5626,11 @@ a:focus-visible {
 }
 
 .bc-history-timeline__dot {
-  width: 10px;
-  height: 10px;
+  width: calc(var(--spacing-base) * 2.5);
+  height: calc(var(--spacing-base) * 2.5);
   border-radius: 50%;
   flex-shrink: 0;
-  margin-top: 3px;
+  margin-top: calc(var(--spacing-base) * 0.75);
   z-index: 1;
 }
 
@@ -5638,8 +5643,8 @@ a:focus-visible {
 .bc-history-timeline__content-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
 }
 
 .bc-history-timeline__action {
@@ -5657,38 +5662,38 @@ a:focus-visible {
 .bc-history-timeline__target {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-base-800);
-  margin-bottom: 2px;
+  margin-bottom: var(--spacing-xs);
 }
 
 .bc-history-timeline__detail {
   font-size: var(--font-size-xs);
   color: var(--color-base-500);
   line-height: 1.4;
-  margin-bottom: 6px;
+  margin-bottom: var(--spacing-smh);
 }
 
 .bc-history-timeline__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: var(--spacing-md);
 }
 
 .bc-history-timeline__actor {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-smh);
   font-size: var(--font-size-xs);
   color: var(--color-base-500);
 }
 
 .bc-history-timeline__avatar {
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
   border-radius: 50%;
   background: var(--color-primary-100);
   color: var(--color-primary-700);
@@ -5701,7 +5706,7 @@ a:focus-visible {
 
 /* Empty state */
 .bc-history-timeline__empty {
-  padding: 24px;
+  padding: var(--spacing-xl);
   text-align: center;
   font-size: var(--font-size-sm);
   color: var(--color-base-400);
@@ -5757,28 +5762,28 @@ a:focus-visible {
 }
 
 .bc-icon--xs {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--spacing-mdh);
+  height: var(--spacing-mdh);
 }
 
 .bc-icon--sm {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
 }
 
 .bc-icon--md {
-  width: 1.2rem;
-  height: 1.2rem;
+  width: calc(var(--spacing-base) * 4.8);
+  height: calc(var(--spacing-base) * 4.8);
 }
 
 .bc-icon--lg {
-  width: 2rem;
-  height: 2rem;
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
 }
 
 .bc-icon--xl {
-  width: 3rem;
-  height: 3rem;
+  width: var(--spacing-3xl);
+  height: var(--spacing-3xl);
 }
 
 .bc-icon-badge {
@@ -6644,8 +6649,8 @@ a:focus-visible {
 
 .bc-json-schema-display__color-swatch {
   display: inline-block;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
   border-radius: var(--radius-sm);
   border: var(--border-width-thin) solid var(--color-neutral-300);
   vertical-align: middle;
@@ -6753,7 +6758,7 @@ a:focus-visible {
   font-weight: var(--font-weight-normal);
   color: var(--color-neutral-400);
   font-family: var(--font-family-mono, monospace);
-  min-width: 2rem;
+  min-width: var(--spacing-2xl);
   text-align: right;
   flex-shrink: 0;
 }
@@ -7476,7 +7481,7 @@ a:focus-visible {
   .bc-lexical-editor {
     position: relative;
     min-height: 150px;
-    padding: 1rem;
+    padding: var(--spacing-lg);
     outline: none;
     font-family: inherit;
     font-size: inherit;
@@ -7524,8 +7529,8 @@ a:focus-visible {
     color: var(--color-neutral-400);
     pointer-events: none;
     position: absolute;
-    top: 1rem;
-    left: 1rem;
+    top: var(--spacing-lg);
+    left: var(--spacing-lg);
     user-select: none;
     font-style: italic;
   }
@@ -7535,8 +7540,8 @@ a:focus-visible {
     font-size: 2rem;
     font-weight: 700;
     line-height: 1.2;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
+    margin-top: var(--spacing-xl);
+    margin-bottom: var(--spacing-mdh);
   }
 
   .bc-lexical-editor h1:first-child {
@@ -7547,8 +7552,8 @@ a:focus-visible {
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1.3;
-    margin-top: 1.25rem;
-    margin-bottom: 0.625rem;
+    margin-top: var(--spacing-lgh);
+    margin-bottom: calc(var(--spacing-base) * 2.5);
   }
 
   .bc-lexical-editor h2:first-child {
@@ -7559,8 +7564,8 @@ a:focus-visible {
     font-size: 1.25rem;
     font-weight: 600;
     line-height: 1.4;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
   }
 
   .bc-lexical-editor h3:first-child {
@@ -7571,8 +7576,8 @@ a:focus-visible {
     font-size: 1.125rem;
     font-weight: 600;
     line-height: 1.5;
-    margin-top: 0.875rem;
-    margin-bottom: 0.5rem;
+    margin-top: calc(var(--spacing-base) * 3.5);
+    margin-bottom: var(--spacing-md);
   }
 
   .bc-lexical-editor h4:first-child {
@@ -7583,8 +7588,8 @@ a:focus-visible {
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.5;
-    margin-top: 0.75rem;
-    margin-bottom: 0.5rem;
+    margin-top: var(--spacing-mdh);
+    margin-bottom: var(--spacing-md);
   }
 
   .bc-lexical-editor h5:first-child {
@@ -7595,8 +7600,8 @@ a:focus-visible {
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1.5;
-    margin-top: 0.75rem;
-    margin-bottom: 0.5rem;
+    margin-top: var(--spacing-mdh);
+    margin-bottom: var(--spacing-md);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -7606,8 +7611,8 @@ a:focus-visible {
   }
 
   .bc-lexical-editor p {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
   }
 
   .bc-lexical-editor p:first-child {
@@ -7619,8 +7624,8 @@ a:focus-visible {
   }
 
   .bc-lexical-editor blockquote {
-    margin: 1rem 0;
-    padding-left: 1rem;
+    margin: var(--spacing-lg) 0;
+    padding-left: var(--spacing-lg);
     border-left: calc(2 * var(--border-width-medium)) solid
       var(--color-neutral-300);
     color: var(--color-neutral-700);
@@ -7629,8 +7634,8 @@ a:focus-visible {
 
   .bc-lexical-editor ul,
   .bc-lexical-editor ol {
-    margin: 0.75rem 0;
-    padding-left: 1.5rem;
+    margin: var(--spacing-mdh) 0;
+    padding-left: var(--spacing-xl);
   }
 
   .bc-lexical-editor ul {
@@ -7642,7 +7647,7 @@ a:focus-visible {
   }
 
   .bc-lexical-editor li {
-    margin: 0.25rem 0;
+    margin: var(--spacing-sm) 0;
   }
 
   .bc-lexical-editor code {
@@ -7650,13 +7655,13 @@ a:focus-visible {
     font-size: 0.875em;
     background-color: var(--color-neutral-100);
     color: var(--color-neutral-800);
-    padding: 0.125rem 0.375rem;
+    padding: var(--spacing-xs) var(--spacing-smh);
     border-radius: var(--radius-xs, 0.25rem);
   }
 
   .bc-lexical-editor pre {
-    margin: 1rem 0;
-    padding: 1rem;
+    margin: var(--spacing-lg) 0;
+    padding: var(--spacing-lg);
     background-color: var(--color-neutral-100);
     border-radius: var(--radius-md, 0.5rem);
     overflow-x: auto;
@@ -7683,7 +7688,7 @@ a:focus-visible {
   }
 
   .bc-lexical-editor hr {
-    margin: 1.5rem 0;
+    margin: var(--spacing-xl) 0;
     border: none;
     border-top: var(--border-width-medium) solid var(--color-neutral-200);
   }
@@ -7713,7 +7718,7 @@ a:focus-visible {
     font-size: 0.875em;
     background-color: var(--color-neutral-100);
     color: var(--color-neutral-800);
-    padding: 0.125rem 0.375rem;
+    padding: var(--spacing-xs) var(--spacing-smh);
     border-radius: var(--radius-xs, 0.25rem);
   }
 
@@ -7727,8 +7732,8 @@ a:focus-visible {
   .bc-lexical-li-unchecked {
     list-style-type: none;
     position: relative;
-    padding-left: 1.5rem;
-    margin-left: -1.5rem;
+    padding-left: var(--spacing-xl);
+    margin-left: calc(-1 * var(--spacing-xl));
   }
 
   .bc-lexical-li-checked::before,
@@ -7952,7 +7957,7 @@ a:focus-visible {
 
   /* Toolbar selects (font family/size) */
   .bc-lexical-toolbar-select {
-    height: 28px;
+    height: calc(var(--spacing-base) * 7);
     padding: 0 var(--spacing-xs);
     border: var(--border-width-thin) solid var(--color-neutral-300);
     border-radius: var(--radius-sm);
@@ -7974,8 +7979,8 @@ a:focus-visible {
     align-items: center;
     justify-content: center;
     position: relative;
-    width: 28px;
-    height: 28px;
+    width: calc(var(--spacing-base) * 7);
+    height: calc(var(--spacing-base) * 7);
     cursor: pointer;
     border-radius: var(--radius-sm);
   }
@@ -8008,7 +8013,7 @@ a:focus-visible {
 
   .bc-lexical-toolbar-color-icon--highlight {
     background-color: #ffff00;
-    padding: 0 2px;
+    padding: 0 var(--spacing-xs);
     border-radius: 2px;
   }
 
@@ -8116,8 +8121,8 @@ a:focus-visible {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 20px;
-    height: 20px;
+    width: var(--spacing-lgh);
+    height: var(--spacing-lgh);
   }
 
   .bc-slash-command-palette__content {
@@ -8129,7 +8134,7 @@ a:focus-visible {
     font-weight: 500;
     font-size: var(--font-size-sm);
     color: var(--color-neutral-900);
-    margin-bottom: 2px;
+    margin-bottom: var(--spacing-xs);
   }
 
   .dark .bc-slash-command-palette__label {
@@ -8147,7 +8152,7 @@ a:focus-visible {
   .bc-slash-command-palette__category {
     font-size: var(--font-size-xs);
     color: var(--color-neutral-500);
-    padding: 2px 6px;
+    padding: var(--spacing-xs) var(--spacing-smh);
     border-radius: var(--radius-sm);
     background-color: var(--color-neutral-100);
     flex-shrink: 0;
@@ -8185,8 +8190,8 @@ a:focus-visible {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
+    width: var(--spacing-xl);
+    height: var(--spacing-xl);
     border: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: var(--radius-sm);
     background-color: var(--color-white);
@@ -8228,7 +8233,7 @@ a:focus-visible {
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
-    margin: 1rem 0;
+    margin: var(--spacing-lg) 0;
     overflow: hidden;
     table-layout: fixed;
   }
@@ -8240,7 +8245,7 @@ a:focus-visible {
   .bc-lexical-table-cell,
   .bc-lexical-table-cell-header {
     border: var(--border-width-thin) solid var(--color-neutral-200);
-    padding: 0.5rem 0.75rem;
+    padding: var(--spacing-md) var(--spacing-mdh);
     position: relative;
     vertical-align: top;
     min-width: 75px;
@@ -8268,15 +8273,17 @@ a:focus-visible {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: var(--spacing-lgh);
+    height: var(--spacing-lgh);
     padding: 0;
     border: var(--border-width-thin) solid var(--color-neutral-300);
     border-radius: var(--radius-sm);
     background-color: var(--color-surface);
     color: var(--color-neutral-600);
     cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s;
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
     font-size: 0;
     line-height: 1;
   }
@@ -8356,8 +8363,8 @@ a:focus-visible {
   /* Code block structure */
   .bc-lexical-code-block {
     position: relative;
-    margin: 1rem 0;
-    padding: 1rem;
+    margin: var(--spacing-lg) 0;
+    padding: var(--spacing-lg);
     background-color: var(--color-neutral-50);
     border: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: var(--radius-md);
@@ -8454,17 +8461,17 @@ a:focus-visible {
 
   /* Line numbers (optional) */
   .bc-lexical-code-block--with-line-numbers {
-    padding-left: 3.5rem;
+    padding-left: calc(var(--spacing-base) * 14);
   }
 
   .bc-lexical-code-block .line-number {
     position: absolute;
     left: 0;
-    width: 3rem;
+    width: var(--spacing-3xl);
     text-align: right;
     color: var(--color-neutral-400);
     user-select: none;
-    padding-right: 1rem;
+    padding-right: var(--spacing-lg);
   }
 
   /* Dark mode styles */
@@ -8962,7 +8969,7 @@ a:focus-visible {
   .bc-menu-item {
     padding: var(--spacing-md) var(--spacing-lg);
     font-size: var(--font-size-md);
-    min-height: 44px; /* Touch target size */
+    min-height: calc(var(--spacing-base) * 11); /* Touch target size */
   }
 
   .bc-submenu {
@@ -8980,7 +8987,7 @@ a:focus-visible {
 /* Touch device optimizations */
 @media (hover: none) and (pointer: coarse) {
   .bc-menu-item {
-    min-height: 44px; /* Minimum touch target */
+    min-height: calc(var(--spacing-base) * 11); /* Minimum touch target */
     padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   }
 
@@ -9750,7 +9757,7 @@ a:focus-visible {
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 
-  width: 1rem;
+  width: var(--spacing-lg);
   height: 50%;
 }
 
@@ -10214,7 +10221,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Strength bar */
 .bc-password-strength__bar {
   width: 100%;
-  height: 4px;
+  height: var(--spacing-sm);
   background-color: var(--color-gray-200);
   border-radius: var(--radius-full);
   overflow: hidden;
@@ -10321,7 +10328,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-password-strength__requirement-icon {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
-  width: 12px;
+  width: var(--spacing-mdh);
   text-align: center;
 }
 
@@ -10332,7 +10339,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Simplified bar variant */
 .bc-password-strength-bar {
   width: 100%;
-  height: 4px;
+  height: var(--spacing-sm);
   background-color: var(--color-gray-200);
   border-radius: var(--radius-full);
   overflow: hidden;
@@ -10682,7 +10689,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-scrollable-panel--header-shadow > div,
 .bc-scrollable-panel--footer-shadow > div {
   width: 100%;
-  height: 20px;
+  height: var(--spacing-lgh);
   position: absolute;
   transition: box-shadow
     var(--motion-transition-slow, var(--motion-duration-slow, 0.5s))
@@ -10708,7 +10715,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 /* Custom scrollbar styling (webkit browsers) */
 .bc-scrollable-panel__body::-webkit-scrollbar {
-  width: 0.5rem;
+  width: var(--spacing-md);
 }
 
 .bc-scrollable-panel__body::-webkit-scrollbar-track {
@@ -10767,7 +10774,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   position: relative;
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--spacing-xs);
 }
 
 /* Sliding indicator */
@@ -11256,7 +11263,7 @@ span.bc-sidebar-link {
 /* Variant: Rectangle */
 .bc-skeleton--rect {
   width: 100%;
-  min-height: 2rem;
+  min-height: var(--spacing-2xl);
 }
 
 /* Variant: Circle */
@@ -11460,7 +11467,7 @@ span.bc-sidebar-link {
   flex-grow: 1;
   background-color: transparent;
   min-width: 100px;
-  min-height: 1rem;
+  min-height: var(--spacing-lg);
   align-self: stretch;
   justify-self: stretch;
   display: flex;
@@ -12125,17 +12132,17 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs--horizontal .bc-tab--active::after {
-  bottom: -2px;
+  bottom: calc(-1 * var(--spacing-xs));
   left: 0;
   right: 0;
-  height: 2px;
+  height: var(--spacing-xs);
 }
 
 .bc-tabs--vertical .bc-tab--active::after {
-  right: -2px;
+  right: calc(-1 * var(--spacing-xs));
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--spacing-xs);
 }
 
 .bc-tab--disabled {
@@ -12421,8 +12428,8 @@ span.bc-sidebar-link {
 
 .bc-tabs--variant-underline .bc-tab--active::after {
   background-color: var(--color-primary-500);
-  bottom: -1px;
-  height: 2px;
+  bottom: calc(-1 * var(--spacing-px));
+  height: var(--spacing-xs);
 }
 
 /* Pill variant: segmented button style with contained tabs */
@@ -12530,12 +12537,12 @@ span.bc-sidebar-link {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
   border: var(--border-width-thin) solid var(--color-base-300);
   border-radius: var(--radius-md, 5px);
   background: var(--color-white);
-  min-height: 34px;
+  min-height: calc(var(--spacing-base) * 8.5);
   cursor: text;
   transition:
     border-color 150ms ease,
@@ -12563,28 +12570,28 @@ span.bc-sidebar-link {
 
 /* Size variants */
 .bc-tag-input--xs {
-  min-height: 24px;
-  padding: 2px 4px;
+  min-height: var(--spacing-xl);
+  padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--font-size-xs);
 }
 .bc-tag-input--sm {
-  min-height: 28px;
-  padding: 3px 6px;
+  min-height: calc(var(--spacing-base) * 7);
+  padding: calc(var(--spacing-base) * 0.75) var(--spacing-smh);
   font-size: var(--font-size-xs);
 }
 .bc-tag-input--md {
-  min-height: 34px;
-  padding: 4px 8px;
+  min-height: calc(var(--spacing-base) * 8.5);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-sm);
 }
 .bc-tag-input--lg {
-  min-height: 38px;
-  padding: 5px 10px;
+  min-height: calc(var(--spacing-base) * 9.5);
+  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
   font-size: var(--font-size-md);
 }
 .bc-tag-input--xl {
-  min-height: 44px;
-  padding: 6px 12px;
+  min-height: calc(var(--spacing-base) * 11);
+  padding: var(--spacing-smh) var(--spacing-mdh);
   font-size: var(--font-size-md);
 }
 
@@ -12592,8 +12599,8 @@ span.bc-sidebar-link {
 .bc-tag-input__tag {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-smh);
   background: var(--color-base-100);
   border-radius: var(--radius-sm, 3px);
   font-size: var(--font-size-xs);
@@ -12616,7 +12623,7 @@ span.bc-sidebar-link {
   border: none;
   cursor: pointer;
   padding: 0;
-  margin-left: 2px;
+  margin-left: var(--spacing-xs);
   font-size: 14px;
   line-height: var(--line-height-none);
   color: var(--color-base-400);
@@ -12683,8 +12690,8 @@ span.bc-sidebar-link {
 }
 
 .bc-tooltip__arrow {
-  width: 16px;
-  height: 16px;
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
   position: absolute;
   transform-origin: center;
   /* Remove background and shadow since SVG will handle the styling */
@@ -13046,7 +13053,7 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   user-select: none;
-  gap: 1px;
+  gap: var(--spacing-px);
 }
 
 .bc-tree-item {
@@ -13057,7 +13064,7 @@ span.bc-sidebar-link {
 .bc-tree-item__row {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-sm);
   cursor: pointer;
   border-radius: var(--radius-sm);
   transition: background-color 0.15s ease;
@@ -13076,27 +13083,27 @@ span.bc-sidebar-link {
 }
 
 .bc-tree-item__row--size-sm {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 8px;
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  padding-right: var(--spacing-md);
   font-size: var(--font-size-sm);
-  min-height: 24px;
+  min-height: var(--spacing-xl);
 }
 
 .bc-tree-item__row--size-md {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-right: 8px;
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  padding-right: var(--spacing-md);
   font-size: var(--font-size-md);
-  min-height: 32px;
+  min-height: var(--spacing-2xl);
 }
 
 .bc-tree-item__row--size-lg {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-right: 12px;
+  padding-top: var(--spacing-smh);
+  padding-bottom: var(--spacing-smh);
+  padding-right: var(--spacing-mdh);
   font-size: var(--font-size-lg);
-  min-height: 40px;
+  min-height: var(--spacing-2xlh);
 }
 
 .bc-tree-item__toggle {
@@ -13104,8 +13111,8 @@ span.bc-sidebar-link {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
   transition: transform 0.15s ease;
   color: var(--color-gray-500);
   cursor: pointer;
@@ -13120,7 +13127,7 @@ span.bc-sidebar-link {
 }
 
 .bc-tree-item__toggle-spacer {
-  width: 20px;
+  width: var(--spacing-lgh);
   flex-shrink: 0;
 }
 
@@ -13141,7 +13148,7 @@ span.bc-sidebar-link {
 .bc-tree-item__badge {
   font-size: 0.75em;
   color: var(--color-gray-600);
-  padding: 2px 6px;
+  padding: var(--spacing-xs) var(--spacing-smh);
   background: oklch(0.95 0 0);
   border-radius: var(--radius-sm);
   font-weight: 500;
@@ -13153,7 +13160,7 @@ span.bc-sidebar-link {
 .bc-tree-item__children {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--spacing-px);
 }
 
 /* Dark mode */
@@ -13653,8 +13660,8 @@ span.bc-sidebar-link {
 
   .bc-notification__icon {
     flex-shrink: 0;
-    width: 32px;
-    height: 32px;
+    width: var(--spacing-2xl);
+    height: var(--spacing-2xl);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -13666,7 +13673,7 @@ span.bc-sidebar-link {
 
   .bc-notification__accent {
     margin: 0 var(--spacing-md) 0 0;
-    min-width: 4px;
+    min-width: var(--spacing-sm);
     min-height: 100%;
     border-radius: var(--radius-pill, var(--radius-full));
     background-color: var(--notification-accent-color);
@@ -13785,7 +13792,7 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--spacing-mdh) var(--spacing-lg);
   border-bottom: var(--border-width-thin) solid var(--color-base-200);
   flex-shrink: 0;
 }
@@ -13793,7 +13800,7 @@ span.bc-sidebar-link {
 .bc-notification-panel__header-title {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-md);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-base-800);
@@ -13802,7 +13809,7 @@ span.bc-sidebar-link {
 .bc-notification-panel__header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-md);
 }
 
 .bc-notification-panel__mark-read-btn {
@@ -13812,7 +13819,7 @@ span.bc-sidebar-link {
   font-size: var(--font-size-xs);
   color: var(--color-primary-600);
   font-family: inherit;
-  padding: 2px 4px;
+  padding: var(--spacing-xs) var(--spacing-sm);
 }
 
 .bc-notification-panel__mark-read-btn:hover {
@@ -13824,7 +13831,7 @@ span.bc-sidebar-link {
   border: none;
   cursor: pointer;
   color: var(--color-base-400);
-  padding: 2px;
+  padding: var(--spacing-xs);
   display: flex;
 }
 
@@ -13837,8 +13844,8 @@ span.bc-sidebar-link {
 /* Item */
 .bc-notification-panel__item {
   display: flex;
-  gap: 10px;
-  padding: 10px 16px;
+  gap: calc(var(--spacing-base) * 2.5);
+  padding: calc(var(--spacing-base) * 2.5) var(--spacing-lg);
   cursor: pointer;
   transition: background-color 80ms ease;
   position: relative;
@@ -13857,8 +13864,8 @@ span.bc-sidebar-link {
 }
 
 .bc-notification-panel__item-icon {
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -13876,20 +13883,20 @@ span.bc-sidebar-link {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-base-800);
-  margin-bottom: 2px;
+  margin-bottom: var(--spacing-xs);
 }
 
 .bc-notification-panel__item-body {
   font-size: var(--font-size-xs);
   color: var(--color-base-500);
   line-height: 1.4;
-  margin-bottom: 4px;
+  margin-bottom: var(--spacing-sm);
 }
 
 .bc-notification-panel__item-meta {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-md);
   font-size: 10px;
   color: var(--color-base-400);
 }
@@ -13903,8 +13910,8 @@ span.bc-sidebar-link {
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
-  width: 6px;
-  height: 6px;
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
   border-radius: 50%;
   background: var(--color-primary-500);
 }
@@ -13914,8 +13921,8 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 32px;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
   color: var(--color-base-400);
   font-size: var(--font-size-sm);
 }
@@ -15078,19 +15085,19 @@ span.bc-sidebar-link {
 
 /* Size variants */
 .bc-calendar--size-xs {
-  --cal-cell-size: 24px;
+  --cal-cell-size: var(--spacing-xl);
   padding: var(--spacing-xs);
   font-size: var(--font-size-xs);
-  width: calc(7 * 24px + 2 * var(--spacing-xs) + 2px);
+  width: calc(7 * var(--spacing-xl) + 2 * var(--spacing-xs) + 2px);
 }
 .bc-calendar--size-xs .bc-calendar__nav-btn {
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
   font-size: var(--font-size-xs);
 }
 .bc-calendar--size-xs .bc-calendar__day {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   font-size: var(--font-size-2xs);
 }
 .bc-calendar--size-xs .bc-calendar__weekday {
@@ -15103,19 +15110,19 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar--size-sm {
-  --cal-cell-size: 28px;
+  --cal-cell-size: calc(var(--spacing-base) * 7);
   padding: var(--spacing-sm);
   font-size: var(--font-size-sm);
-  width: calc(7 * 28px + 2 * var(--spacing-sm) + 2px);
+  width: calc(7 * calc(var(--spacing-base) * 7) + 2 * var(--spacing-sm) + 2px);
 }
 .bc-calendar--size-sm .bc-calendar__nav-btn {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   font-size: var(--font-size-sm);
 }
 .bc-calendar--size-sm .bc-calendar__day {
-  width: 28px;
-  height: 28px;
+  width: calc(var(--spacing-base) * 7);
+  height: calc(var(--spacing-base) * 7);
   font-size: var(--font-size-xs);
 }
 .bc-calendar--size-sm .bc-calendar__weekday {
@@ -15128,19 +15135,19 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar--size-md {
-  --cal-cell-size: 36px;
+  --cal-cell-size: calc(var(--spacing-base) * 9);
   padding: var(--spacing-md);
   font-size: var(--font-size-md);
-  width: calc(7 * 36px + 2 * var(--spacing-md) + 2px);
+  width: calc(7 * calc(var(--spacing-base) * 9) + 2 * var(--spacing-md) + 2px);
 }
 .bc-calendar--size-md .bc-calendar__nav-btn {
-  width: 28px;
-  height: 28px;
+  width: calc(var(--spacing-base) * 7);
+  height: calc(var(--spacing-base) * 7);
   font-size: var(--font-size-md);
 }
 .bc-calendar--size-md .bc-calendar__day {
-  width: 36px;
-  height: 36px;
+  width: calc(var(--spacing-base) * 9);
+  height: calc(var(--spacing-base) * 9);
   font-size: var(--font-size-sm);
 }
 .bc-calendar--size-md .bc-calendar__weekday {
@@ -15153,19 +15160,21 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar--size-lg {
-  --cal-cell-size: 42px;
+  --cal-cell-size: calc(var(--spacing-base) * 10.5);
   padding: var(--spacing-lg);
   font-size: var(--font-size-lg);
-  width: calc(7 * 42px + 2 * var(--spacing-lg) + 2px);
+  width: calc(
+    7 * calc(var(--spacing-base) * 10.5) + 2 * var(--spacing-lg) + 2px
+  );
 }
 .bc-calendar--size-lg .bc-calendar__nav-btn {
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   font-size: var(--font-size-lg);
 }
 .bc-calendar--size-lg .bc-calendar__day {
-  width: 42px;
-  height: 42px;
+  width: calc(var(--spacing-base) * 10.5);
+  height: calc(var(--spacing-base) * 10.5);
   font-size: var(--font-size-md);
 }
 .bc-calendar--size-lg .bc-calendar__weekday {
@@ -15178,19 +15187,19 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar--size-xl {
-  --cal-cell-size: 48px;
+  --cal-cell-size: var(--spacing-3xl);
   padding: var(--spacing-xl);
   font-size: var(--font-size-xl);
-  width: calc(7 * 48px + 2 * var(--spacing-xl) + 2px);
+  width: calc(7 * var(--spacing-3xl) + 2 * var(--spacing-xl) + 2px);
 }
 .bc-calendar--size-xl .bc-calendar__nav-btn {
-  width: 36px;
-  height: 36px;
+  width: calc(var(--spacing-base) * 9);
+  height: calc(var(--spacing-base) * 9);
   font-size: var(--font-size-xl);
 }
 .bc-calendar--size-xl .bc-calendar__day {
-  width: 48px;
-  height: 48px;
+  width: var(--spacing-3xl);
+  height: var(--spacing-3xl);
   font-size: var(--font-size-lg);
 }
 .bc-calendar--size-xl .bc-calendar__weekday {
@@ -15499,131 +15508,131 @@ span.bc-sidebar-link {
 
 /* xs */
 .bc-advanced-slider--size-xs {
-  padding: var(--spacing-lg) 6px var(--spacing-md);
+  padding: var(--spacing-lg) var(--spacing-smh) var(--spacing-md);
 }
 .bc-advanced-slider--size-xs .bc-advanced-slider__track {
-  height: 2px;
+  height: var(--spacing-xs);
 }
 .bc-advanced-slider--size-xs .bc-advanced-slider__thumb {
-  width: 10px;
-  height: 10px;
+  width: calc(var(--spacing-base) * 2.5);
+  height: calc(var(--spacing-base) * 2.5);
 }
 .bc-advanced-slider--size-xs .bc-advanced-slider__value-label {
   font-size: var(--font-size-2xs);
-  padding: 1px 4px;
-  bottom: calc(100% + 4px);
+  padding: var(--spacing-px) var(--spacing-sm);
+  bottom: calc(100% + var(--spacing-sm));
 }
 .bc-advanced-slider--size-xs .bc-advanced-slider__tick::before {
-  width: 1px;
-  height: 6px;
-  margin-top: 4px;
+  width: var(--spacing-px);
+  height: var(--spacing-smh);
+  margin-top: var(--spacing-sm);
 }
 .bc-advanced-slider--size-xs .bc-advanced-slider__tick-label {
-  top: 10px;
+  top: calc(var(--spacing-base) * 2.5);
   font-size: var(--font-size-2xs);
 }
 
 /* sm */
 .bc-advanced-slider--size-sm {
-  padding: var(--spacing-xl) 8px var(--spacing-lg);
+  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
 }
 .bc-advanced-slider--size-sm .bc-advanced-slider__track {
-  height: 3px;
+  height: calc(var(--spacing-base) * 0.75);
 }
 .bc-advanced-slider--size-sm .bc-advanced-slider__thumb {
-  width: 14px;
-  height: 14px;
+  width: calc(var(--spacing-base) * 3.5);
+  height: calc(var(--spacing-base) * 3.5);
 }
 .bc-advanced-slider--size-sm .bc-advanced-slider__value-label {
   font-size: var(--font-size-xs);
-  padding: 2px 5px;
-  bottom: calc(100% + 5px);
+  padding: var(--spacing-xs) calc(var(--spacing-base) * 1.25);
+  bottom: calc(100% + calc(var(--spacing-base) * 1.25));
 }
 .bc-advanced-slider--size-sm .bc-advanced-slider__tick::before {
-  width: 1px;
-  height: 8px;
-  margin-top: 5px;
+  width: var(--spacing-px);
+  height: var(--spacing-md);
+  margin-top: calc(var(--spacing-base) * 1.25);
 }
 .bc-advanced-slider--size-sm .bc-advanced-slider__tick-label {
-  top: 14px;
+  top: calc(var(--spacing-base) * 3.5);
   font-size: var(--font-size-2xs);
 }
 
 /* md (default) */
 .bc-advanced-slider--size-md {
-  padding: var(--spacing-2xl) 10px var(--spacing-xl);
+  padding: var(--spacing-2xl) calc(var(--spacing-base) * 2.5) var(--spacing-xl);
 }
 .bc-advanced-slider--size-md .bc-advanced-slider__track {
-  height: 4px;
+  height: var(--spacing-sm);
 }
 .bc-advanced-slider--size-md .bc-advanced-slider__thumb {
-  width: 18px;
-  height: 18px;
+  width: calc(var(--spacing-base) * 4.5);
+  height: calc(var(--spacing-base) * 4.5);
 }
 .bc-advanced-slider--size-md .bc-advanced-slider__value-label {
   font-size: var(--font-size-sm);
-  padding: 2px 6px;
-  bottom: calc(100% + 6px);
+  padding: var(--spacing-xs) var(--spacing-smh);
+  bottom: calc(100% + var(--spacing-smh));
 }
 .bc-advanced-slider--size-md .bc-advanced-slider__tick::before {
-  width: 2px;
-  height: 10px;
-  margin-top: 6px;
+  width: var(--spacing-xs);
+  height: calc(var(--spacing-base) * 2.5);
+  margin-top: var(--spacing-smh);
 }
 .bc-advanced-slider--size-md .bc-advanced-slider__tick-label {
-  top: 18px;
+  top: calc(var(--spacing-base) * 4.5);
   font-size: var(--font-size-xs);
 }
 
 /* lg */
 .bc-advanced-slider--size-lg {
-  padding: var(--spacing-3xl) 12px var(--spacing-2xl);
+  padding: var(--spacing-3xl) var(--spacing-mdh) var(--spacing-2xl);
 }
 .bc-advanced-slider--size-lg .bc-advanced-slider__track {
-  height: 6px;
+  height: var(--spacing-smh);
 }
 .bc-advanced-slider--size-lg .bc-advanced-slider__thumb {
-  width: 22px;
-  height: 22px;
+  width: calc(var(--spacing-base) * 5.5);
+  height: calc(var(--spacing-base) * 5.5);
 }
 .bc-advanced-slider--size-lg .bc-advanced-slider__value-label {
   font-size: var(--font-size-md);
-  padding: 3px 8px;
-  bottom: calc(100% + 8px);
+  padding: calc(var(--spacing-base) * 0.75) var(--spacing-md);
+  bottom: calc(100% + var(--spacing-md));
 }
 .bc-advanced-slider--size-lg .bc-advanced-slider__tick::before {
-  width: 2px;
-  height: 12px;
-  margin-top: 8px;
+  width: var(--spacing-xs);
+  height: var(--spacing-mdh);
+  margin-top: var(--spacing-md);
 }
 .bc-advanced-slider--size-lg .bc-advanced-slider__tick-label {
-  top: 22px;
+  top: calc(var(--spacing-base) * 5.5);
   font-size: var(--font-size-sm);
 }
 
 /* xl */
 .bc-advanced-slider--size-xl {
-  padding: var(--spacing-4xl) 14px var(--spacing-3xl);
+  padding: var(--spacing-4xl) calc(var(--spacing-base) * 3.5) var(--spacing-3xl);
 }
 .bc-advanced-slider--size-xl .bc-advanced-slider__track {
-  height: 8px;
+  height: var(--spacing-md);
 }
 .bc-advanced-slider--size-xl .bc-advanced-slider__thumb {
-  width: 26px;
-  height: 26px;
+  width: calc(var(--spacing-base) * 6.5);
+  height: calc(var(--spacing-base) * 6.5);
 }
 .bc-advanced-slider--size-xl .bc-advanced-slider__value-label {
   font-size: var(--font-size-lg);
-  padding: 4px 10px;
-  bottom: calc(100% + 10px);
+  padding: var(--spacing-sm) calc(var(--spacing-base) * 2.5);
+  bottom: calc(100% + calc(var(--spacing-base) * 2.5));
 }
 .bc-advanced-slider--size-xl .bc-advanced-slider__tick::before {
-  width: 2px;
-  height: 14px;
-  margin-top: 10px;
+  width: var(--spacing-xs);
+  height: calc(var(--spacing-base) * 3.5);
+  margin-top: calc(var(--spacing-base) * 2.5);
 }
 .bc-advanced-slider--size-xl .bc-advanced-slider__tick-label {
-  top: 26px;
+  top: calc(var(--spacing-base) * 6.5);
   font-size: var(--font-size-md);
 }
 
@@ -15711,8 +15720,8 @@ span.bc-sidebar-link {
 
 /* Size variants */
 .bc-otp-input--size-xs .bc-otp-input__cell {
-  width: 28px;
-  height: 28px;
+  width: calc(var(--spacing-base) * 7);
+  height: calc(var(--spacing-base) * 7);
   font-size: var(--font-size-xs);
 }
 .bc-otp-input--size-xs {
@@ -15720,8 +15729,8 @@ span.bc-sidebar-link {
 }
 
 .bc-otp-input--size-sm .bc-otp-input__cell {
-  width: 34px;
-  height: 34px;
+  width: calc(var(--spacing-base) * 8.5);
+  height: calc(var(--spacing-base) * 8.5);
   font-size: var(--font-size-sm);
 }
 .bc-otp-input--size-sm {
@@ -15729,15 +15738,15 @@ span.bc-sidebar-link {
 }
 
 .bc-otp-input--size-md .bc-otp-input__cell {
-  width: 42px;
-  height: 42px;
+  width: calc(var(--spacing-base) * 10.5);
+  height: calc(var(--spacing-base) * 10.5);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
 }
 
 .bc-otp-input--size-lg .bc-otp-input__cell {
-  width: 50px;
-  height: 50px;
+  width: calc(var(--spacing-base) * 12.5);
+  height: calc(var(--spacing-base) * 12.5);
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
 }
@@ -15746,8 +15755,8 @@ span.bc-sidebar-link {
 }
 
 .bc-otp-input--size-xl .bc-otp-input__cell {
-  width: 58px;
-  height: 58px;
+  width: calc(var(--spacing-base) * 14.5);
+  height: calc(var(--spacing-base) * 14.5);
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
 }