@tempots/beatui 0.91.0 → 0.93.0

package/dist/beatui.tailwind.css

@@ -2330,8 +2330,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);
 }
 
@@ -2359,15 +2359,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;
 }
@@ -2411,7 +2411,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);
@@ -2965,8 +2965,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%;
@@ -3051,7 +3051,7 @@ a:focus-visible {
 }
 
 .bc-color-swatch-input__alpha {
-  width: 5rem;
+  width: calc(var(--spacing-base) * 20);
   margin-inline-start: var(--spacing-md);
 }
 
@@ -3068,8 +3068,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);
   }
 }
 
@@ -3235,7 +3235,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;
@@ -3445,26 +3445,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) {
@@ -3644,7 +3649,7 @@ a:focus-visible {
   width: auto;
   height: auto;
   align-self: stretch;
-  min-height: 1rem;
+  min-height: var(--spacing-lg);
 }
 
 /* Tone variants */
@@ -3708,7 +3713,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 {
@@ -4159,7 +4164,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) */
@@ -4187,7 +4192,7 @@ a:focus-visible {
   flex-grow: 1;
   overflow: hidden;
   line-height: var(--line-height-normal);
-  height: 2rem;
+  height: var(--spacing-2xl);
 }
 
 /* Text content */
@@ -5222,12 +5227,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;
@@ -5257,8 +5262,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 */
@@ -5266,7 +5271,7 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 16px;
+  width: var(--spacing-lg);
   flex-shrink: 0;
   position: relative;
 }
@@ -5274,8 +5279,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);
@@ -5287,11 +5292,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;
 }
 
@@ -5304,8 +5309,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 {
@@ -5323,38 +5328,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);
@@ -5367,7 +5372,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);
@@ -5423,28 +5428,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 {
@@ -6310,8 +6315,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;
@@ -6419,7 +6424,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;
 }
@@ -7142,7 +7147,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;
@@ -7190,8 +7195,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;
   }
@@ -7201,8 +7206,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 {
@@ -7213,8 +7218,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 {
@@ -7225,8 +7230,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 {
@@ -7237,8 +7242,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 {
@@ -7249,8 +7254,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 {
@@ -7261,8 +7266,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;
   }
@@ -7272,8 +7277,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 {
@@ -7285,8 +7290,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);
@@ -7295,8 +7300,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 {
@@ -7308,7 +7313,7 @@ a:focus-visible {
   }
 
   .bc-lexical-editor li {
-    margin: 0.25rem 0;
+    margin: var(--spacing-sm) 0;
   }
 
   .bc-lexical-editor code {
@@ -7316,13 +7321,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;
@@ -7349,7 +7354,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);
   }
@@ -7379,7 +7384,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);
   }
 
@@ -7393,8 +7398,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,
@@ -7618,7 +7623,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);
@@ -7640,8 +7645,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);
   }
@@ -7674,7 +7679,7 @@ a:focus-visible {
 
   .bc-lexical-toolbar-color-icon--highlight {
     background-color: #ffff00;
-    padding: 0 2px;
+    padding: 0 var(--spacing-xs);
     border-radius: 2px;
   }
 
@@ -7782,8 +7787,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 {
@@ -7795,7 +7800,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 {
@@ -7813,7 +7818,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;
@@ -7851,8 +7856,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);
@@ -7894,7 +7899,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;
   }
@@ -7906,7 +7911,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;
@@ -7934,15 +7939,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;
   }
@@ -8022,8 +8029,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);
@@ -8120,17 +8127,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 */
@@ -8628,7 +8635,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 {
@@ -8646,7 +8653,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);
   }
 
@@ -9416,7 +9423,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%;
 }
 
@@ -9880,7 +9887,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;
@@ -9987,7 +9994,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;
 }
 
@@ -9998,7 +10005,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;
@@ -10348,7 +10355,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))
@@ -10374,7 +10381,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 {
@@ -10433,7 +10440,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   position: relative;
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--spacing-xs);
 }
 
 /* Sliding indicator */
@@ -10922,7 +10929,7 @@ span.bc-sidebar-link {
 /* Variant: Rectangle */
 .bc-skeleton--rect {
   width: 100%;
-  min-height: 2rem;
+  min-height: var(--spacing-2xl);
 }
 
 /* Variant: Circle */
@@ -11126,7 +11133,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;
@@ -11791,17 +11798,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 {
@@ -12087,8 +12094,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 */
@@ -12196,12 +12203,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,
@@ -12229,28 +12236,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);
 }
 
@@ -12258,8 +12265,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);
@@ -12282,7 +12289,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);
@@ -12349,8 +12356,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 */
@@ -12712,7 +12719,7 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   user-select: none;
-  gap: 1px;
+  gap: var(--spacing-px);
 }
 
 .bc-tree-item {
@@ -12723,7 +12730,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;
@@ -12742,27 +12749,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 {
@@ -12770,8 +12777,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;
@@ -12786,7 +12793,7 @@ span.bc-sidebar-link {
 }
 
 .bc-tree-item__toggle-spacer {
-  width: 20px;
+  width: var(--spacing-lgh);
   flex-shrink: 0;
 }
 
@@ -12807,7 +12814,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;
@@ -12819,7 +12826,7 @@ span.bc-sidebar-link {
 .bc-tree-item__children {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--spacing-px);
 }
 
 /* Dark mode */
@@ -13319,8 +13326,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;
@@ -13332,7 +13339,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);
@@ -13451,7 +13458,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;
 }
@@ -13459,7 +13466,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);
@@ -13468,7 +13475,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 {
@@ -13478,7 +13485,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 {
@@ -13490,7 +13497,7 @@ span.bc-sidebar-link {
   border: none;
   cursor: pointer;
   color: var(--color-base-400);
-  padding: 2px;
+  padding: var(--spacing-xs);
   display: flex;
 }
 
@@ -13503,8 +13510,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;
@@ -13523,8 +13530,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;
@@ -13542,20 +13549,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);
 }
@@ -13569,8 +13576,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);
 }
@@ -13580,8 +13587,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);
 }
@@ -14744,19 +14751,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 {
@@ -14769,19 +14776,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 {
@@ -14794,19 +14801,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 {
@@ -14819,19 +14826,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 {
@@ -14844,19 +14853,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 {
@@ -15165,131 +15174,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);
 }
 
@@ -15377,8 +15386,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 {
@@ -15386,8 +15395,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 {
@@ -15395,15 +15404,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);
 }
@@ -15412,8 +15421,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);
 }