@vialiq/flux-ui 0.20.0 → 0.21.0

package/README.md

@@ -380,6 +380,28 @@ Works with any JavaScript framework:
 - ✅ Focus states built-in
 - ✅ Semantic HTML patterns
 - ✅ Reduced motion support ready
+- ✅ Responsive `rem` scaling based on root font size
+
+### Responsive Typography & Rem Scaling
+Flux UI strictly uses `rem` units for typography and spacing to ensure accessibility. By default, it assumes a standard browser root font size of `16px`.
+
+If your application uses a custom root font size (such as the `62.5%` or `10px` hack), you must configure Flux UI to scale its internal calculations accordingly:
+
+```scss
+// In your application's main SCSS file:
+@use '@vialiq/flux-ui/styles' with (
+  $vi-rem-base: 10px
+);
+```
+This ensures that a component designed to be `16px` tall will correctly output `1.6rem`, rendering exactly 16 pixels at runtime against your custom 10px root.
+
+### CSS Unit Guidelines
+To maintain a robust, scalable, and accessible UI, Flux UI strictly adheres to the following unit rules:
+
+- **`rem`**: Used for **Typography**, **Spacing** (margin, padding, gap), and **Interactive Form Control Sizing** (button heights, input widths, etc.). This guarantees that everything defining the core layout grid and text hierarchy scales fluidly when a user changes their browser root font size for accessibility.
+- **`px`**: Reserved exclusively for rigid geometries that must never scale or blur. Used for **Borders** (`1px solid`), **Shadows** (offsets and blurs), small **Optical Adjustments** (e.g. `2px` focus outline offset), and **Visually Hidden Hacks** (e.g. `1px` clipping for screen readers).
+- **`dvh` / `dvw`** (with `vh` / `vw` fallback): Used for **Viewport-Relative Layouts**, such as full-screen modal overlays, drawer max-heights, or sticky banners that must span the entire screen regardless of the parent container size. Dynamic viewport units correctly account for mobile browser UI (like address bars) expanding and contracting.
+- **`%`**: Used for **Container-Relative Fluidity**, such as a button being `width: 100%` of its parent column, or grid layouts.
 
 ## Contributing
 

package/components/_accordion.scss

@@ -8,8 +8,8 @@ $accordion-border-radius: var(--vi-accordion-border-radius, tokens.$border-radiu
 $accordion-gap: var(--vi-accordion-gap, 0px);
 $accordion-animation-duration: var(--vi-accordion-animation-duration, 200ms);
 
-$accordion-item-header-padding: var(--vi-accordion-item-header-padding, 14px 16px);
-$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 16px 16px);
+$accordion-item-header-padding: var(--vi-accordion-item-header-padding, #{tokens.$spacing-sm} #{tokens.$spacing-md});
+$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 #{tokens.$spacing-md} #{tokens.$spacing-md});
 $accordion-item-header-bg: var(--vi-accordion-item-header-bg, transparent);
 $accordion-item-header-bg-hover: var(--vi-accordion-item-header-bg-hover, tokens.$layer-hover-01);
 $accordion-item-header-bg-open: var(--vi-accordion-item-header-bg-open, transparent);
@@ -43,8 +43,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   padding: $accordion-item-header-padding;
   background-color: $accordion-item-header-bg;
   color: $accordion-item-label-color;
-  font-family: tokens.$font-family-base;
-  font-size: var(--vi-accordion-item-header-font-size, tokens.$font-size-base);
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: var(--vi-accordion-item-header-font-size, #{tokens.$font-size-base});
   font-weight: $accordion-item-label-font-weight;
   text-align: left;
   border: none;
@@ -91,8 +91,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   margin-inline-start: tokens.$spacing-xs;
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: #{tokens.$spacing-md};
+    height: #{tokens.$spacing-md};
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
@@ -112,9 +112,9 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion-panel-inner {
   padding: $accordion-item-body-padding;
-  font-family: tokens.$font-family-base;
-  font-size: tokens.$font-size-sm;
-  color: tokens.$text-secondary;
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: #{tokens.$font-size-sm};
+  color: #{tokens.$text-secondary};
   box-sizing: border-box;
 }
 
@@ -168,8 +168,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--sm,
 .accordion-item--sm {
-  --vi-accordion-item-header-padding: 10px 12px;
-  --vi-accordion-item-body-padding: 0 12px 12px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-xs} #{tokens.$spacing-sm};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-sm} #{tokens.$spacing-sm};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-sm};
 }
 
@@ -182,8 +182,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--lg,
 .accordion-item--lg {
-  --vi-accordion-item-header-padding: 18px 20px;
-  --vi-accordion-item-body-padding: 0 20px 20px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-lg} #{tokens.$spacing-xl};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-xl} #{tokens.$spacing-xl};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-lg};
 }
 

package/components/_alert.scss

@@ -15,15 +15,15 @@
     box-sizing: border-box;
     width: 100%;
 
-    border-radius: var(--vi-alert-border-radius, 6px);
-    padding: var(--vi-alert-padding, 12px 16px);
-    gap: var(--vi-alert-gap, 12px);
+    border-radius: var(--vi-alert-border-radius, #{tokens.$border-radius-lg});
+    padding: var(--vi-alert-padding, #{tokens.$spacing-xs} #{tokens.$spacing-md});
+    gap: var(--vi-alert-gap, #{tokens.$spacing-sm});
     border-width: var(--vi-alert-border-width, 1px);
     border-style: solid;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-sm;
-    line-height: tokens.$line-height-normal;
+    font-family: var(--vi-alert-font-family, #{tokens.$font-family-base});
+    font-size: #{tokens.$font-size-sm};
+    line-height: #{tokens.$line-height-normal};
   }
 
   .alert-icon {
@@ -45,7 +45,7 @@
 
   .alert-title {
     font-weight: tokens.$font-weight-semibold;
-    margin-bottom: 4px;
+    margin-bottom: #{tokens.$spacing-unit};
     display: block;
   }
 

package/components/_animation.scss

@@ -25,7 +25,7 @@
   --vi-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --vi-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  --vi-animation-expand-max-height: 100vh;
+  --vi-animation-expand-max-height: 100dvh;
   --vi-animation-expand-max-width: 100vw;
 }
 
@@ -186,11 +186,11 @@
 // Expand & Collapse Keyframes
 @keyframes vi-expand-vertical {
   from { max-height: 0; opacity: 0; }
-  to { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  to { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
 }
 
 @keyframes vi-collapse-vertical {
-  from { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  from { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
   to { max-height: 0; opacity: 0; }
 }
 

package/components/_badge.scss

@@ -16,19 +16,21 @@
     white-space: nowrap;
     box-sizing: border-box;
 
-    font-size: var(--vi-badge-font-size, 11px);
+    // 20px = standard badge height (not on the spacing scale); kept explicit
+    height: var(--vi-badge-height, 20px);
+    font-size: var(--vi-badge-font-size, #{tokens.$font-size-xs});
     font-weight: var(--vi-badge-font-weight, #{tokens.$font-weight-semibold});
-    padding: var(--vi-badge-padding, 2px 8px);
-    border-radius: var(--vi-badge-border-radius, 9999px);
-    gap: var(--vi-badge-gap, 4px);
+    padding: var(--vi-badge-padding, 0 #{tokens.$spacing-xs});
+    border-radius: var(--vi-badge-border-radius, #{tokens.$border-radius-full});
+    gap: var(--vi-badge-gap, #{tokens.$spacing-unit});
 
     border: #{tokens.$border-width-thin} solid transparent;
   }
 
   .dot {
     display: inline-block;
-    width: var(--vi-badge-dot-size, 8px);
-    height: var(--vi-badge-dot-size, 8px);
+    width: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
+    height: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
     border-radius: 50%;
     background-color: currentColor;
     flex-shrink: 0;

package/components/_checkbox.scss

@@ -7,12 +7,13 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   .checkbox-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-checkbox-label-gap, 8px);
+    gap: var(--vi-checkbox-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-checkbox-label-font-size, #{tokens.$font-size-base});
@@ -41,10 +42,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-checkbox-size, 18px);
-    height: var(--vi-checkbox-size, 18px);
+    width: var(--vi-checkbox-size, #{tokens.$spacing-md});
+    height: var(--vi-checkbox-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-checkbox-border-color, #{tokens.$outline});
-    border-radius: var(--vi-checkbox-border-radius, 3px);
+    border-radius: var(--vi-checkbox-border-radius, #{func.to-rem(4px)});
     background-color: var(--vi-checkbox-background-color, #{tokens.$color-background});
     transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
     flex-shrink: 0;

package/components/_chip.scss

@@ -12,13 +12,13 @@
     border-style: solid;
 
     // Tokens mapped directly from docs
-    height: var(--vi-chip-height, var(--vi-chip-height-md, 32px));
+    height: var(--vi-chip-height, var(--vi-chip-height-md, #{tokens.$spacing-xl}));
     padding: var(--vi-chip-padding, 0 10px);
-    border-radius: var(--vi-chip-border-radius, 999px);
+    border-radius: var(--vi-chip-border-radius, #{tokens.$border-radius-full});
     border-width: var(--vi-chip-border-width, 1px);
     gap: var(--vi-chip-gap, 6px);
-    font-size: var(--vi-chip-font-size, var(--vi-font-size-sm));
-    font-weight: var(--vi-chip-font-weight, var(--vi-font-weight-medium));
+    font-size: var(--vi-chip-font-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-chip-font-weight, #{tokens.$font-weight-medium});
     transition: all var(--vi-chip-transition, 100ms ease);
 
     // Color tokens to be overridden by vi-chip variant

package/components/_index.scss

@@ -22,3 +22,4 @@
 @forward 'tabs';
 @forward 'tab';
 @forward 'tab-panel';
+@forward 'spin';

package/components/_label.scss

@@ -14,8 +14,8 @@
     --vi-label-required-color: var(--vi-color-error, #{tokens.$color-error});
     // --vi-label-optional-color: var(--vi-text-helper)
     --vi-label-optional-color: var(--vi-text-helper, #{tokens.$text-helper});
-    // --vi-label-gap: 4px
-    --vi-label-gap: 4px;
+    // --vi-label-gap: $spacing-unit (4px)
+    --vi-label-gap: #{tokens.$spacing-unit};
   }
 
   .vi-label {
@@ -25,7 +25,7 @@
     font-size: var(--vi-label-font-size);
     font-weight: var(--vi-label-font-weight);
     color: var(--vi-label-color);
-    line-height: 1.5;
+    line-height: #{tokens.$line-height-normal};
     margin: 0;
 
     &.size-sm {

package/components/_modal.scss

@@ -25,14 +25,15 @@
     margin: auto;
     width: 100%;
     max-width: tokens.$modal-max-width-md;
-    max-height: 90vh; // Fallback max-height
+    max-height: 90vh;
+    max-height: 90dvh;
 
     z-index: tokens.$modal-z-index;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-base;
-    line-height: tokens.$line-height-normal;
-    color: tokens.$text-primary;
+    font-family: var(--vi-modal-font-family, #{tokens.$font-family-base});
+    font-size: var(--vi-modal-font-size, #{tokens.$font-size-base});
+    line-height: var(--vi-modal-line-height, #{tokens.$line-height-normal});
+    color: #{tokens.$text-primary};
 
     &[open] {
       display: flex;
@@ -230,6 +231,7 @@
       width: 100vw !important;
       width: 100dvw !important;
       max-height: 100vh !important;
+      max-height: 100dvh !important;
       height: 100vh !important;
       height: 100dvh !important;
       border-radius: 0 !important;

package/components/_radio.scss

@@ -34,7 +34,7 @@
 
   .radio-group-items {
     display: flex;
-    gap: var(--vi-radio-group-gap, 8px);
+    gap: var(--vi-radio-group-gap, #{tokens.$spacing-xs});
 
     &[orientation="vertical"] {
       flex-direction: column;
@@ -76,7 +76,7 @@
   .radio-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: var(--vi-radio-label-gap, 8px);
+    gap: var(--vi-radio-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-radio-label-font-size, #{tokens.$font-size-base});
@@ -104,8 +104,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-radio-size, 18px);
-    height: var(--vi-radio-size, 18px);
+    width: var(--vi-radio-size, #{tokens.$spacing-md});
+    height: var(--vi-radio-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$outline});
     border-radius: 50%;
     background-color: var(--vi-radio-background-color, #{tokens.$color-background});
@@ -115,8 +115,9 @@
 
   .radio-dot {
     box-sizing: border-box;
-    width: var(--vi-radio-dot-size, 8px);
-    height: var(--vi-radio-dot-size, 8px);
+    // 8px dot is half of the 16px ($spacing-md) circle; this ratio is intentional
+    width: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
+    height: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
     border-radius: 50%;
     background-color: var(--vi-radio-dot-color, #{tokens.$color-primary});
     transform: scale(0);

package/components/_select.scss

@@ -6,6 +6,7 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // -------------------------------------------------------------------------
@@ -38,14 +39,14 @@
     justify-content: space-between;
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--vi-select-sizing-min-height, 40px);
-    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-xs})
-             var(--vi-select-spacing-padding-inline, #{tokens.$spacing-sm});
+    min-height: var(--vi-select-sizing-min-height, #{tokens.$spacing-xl});
+    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-unit})
+             var(--vi-select-spacing-padding-inline, #{func.to-rem(11px)});
     background-color: var(--vi-select-background-color, #{tokens.$color-background});
     border: var(--vi-select-border-width, #{tokens.$border-width-thin}) solid var(--vi-select-border-color, #{tokens.$border-03});
-    border-radius: var(--vi-select-shape-border-radius, #{tokens.$border-radius-lg});
+    border-radius: var(--vi-select-shape-border-radius, #{func.to-rem(6px)});
     font-family: inherit;
-    font-size: var(--vi-font-size-base, #{tokens.$font-size-base});
+    font-size: var(--vi-font-size-base, #{func.to-rem(14px)});
     color: var(--vi-select-text-color, #{tokens.$color-foreground});
     transition: border-color 150ms ease, box-shadow 150ms ease;
     cursor: pointer;

package/components/_switch.scss

@@ -1,4 +1,5 @@
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // ── Wrapper ──────────────────────────────────────────────────────────────────
@@ -10,7 +11,7 @@
   .switch-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-switch-label-gap, 8px);
+    gap: var(--vi-switch-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-switch-label-font-size, #{tokens.$font-size-base});
@@ -52,15 +53,15 @@
   .switch-track {
     box-sizing: border-box;
     position: relative;
-    width: var(--vi-switch-track-width, 44px);
-    height: var(--vi-switch-track-height, 24px);
+    width: var(--vi-switch-track-width, func.to-rem(44px));
+    height: var(--vi-switch-track-height, func.to-rem(22px));
     background-color: var(--vi-switch-track-color-off, #{tokens.$border-03});
-    border-radius: var(--vi-border-radius-full, 9999px);
+    border-radius: var(--vi-border-radius-full, #{tokens.$border-radius-full});
     transition: background-color var(--vi-switch-transition-duration, 150ms) ease;
     flex-shrink: 0;
     // Align track centre with first-line cap-height
     margin-top: calc(
-      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, 24px)) / 2
+      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, func.to-rem(24px))) / 2
     );
   }
 
@@ -69,10 +70,10 @@
   .switch-thumb {
     position: absolute;
     top: 50%;
-    left: var(--vi-switch-thumb-offset, 2px);
+    left: var(--vi-switch-thumb-offset, func.to-rem(2px));
     transform: translateY(-50%);
-    width: var(--vi-switch-thumb-size, 18px);
-    height: var(--vi-switch-thumb-size, 18px);
+    width: var(--vi-switch-thumb-size, func.to-rem(18px));
+    height: var(--vi-switch-thumb-size, func.to-rem(18px));
     background-color: var(--vi-switch-thumb-color, #{tokens.$text-primary-inverse});
     border-radius: 50%;
     box-shadow: var(--vi-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
@@ -86,7 +87,7 @@
 
     .switch-thumb {
       left: calc(
-        100% - var(--vi-switch-thumb-size, 18px) - var(--vi-switch-thumb-offset, 2px)
+        100% - var(--vi-switch-thumb-size, func.to-rem(18px)) - var(--vi-switch-thumb-offset, func.to-rem(2px))
       );
     }
   }
@@ -107,11 +108,11 @@
     opacity: var(--vi-switch-disabled-opacity, 0.5);
 
     .switch-track {
-      background-color: #{tokens.$border-03};
+      background-color: var(--vi-switch-track-color-disabled, #{tokens.$border-03});
     }
 
     .switch-input:checked ~ .switch-track {
-      background-color: #{tokens.$text-disabled};
+      background-color: var(--vi-switch-track-color-on-disabled, #{tokens.$text-disabled});
     }
   }
 

package/components/_tab-panel.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -12,7 +13,7 @@
     &:focus-visible {
       outline: 2px solid var(--vi-tabs-indicator-color, #{tokens.$color-primary});
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: #{func.to-rem(2px)};
     }
   }
 

package/components/_tab.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -22,11 +23,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--vi-tab-icon-gap, 6px);
+    gap: var(--vi-tab-icon-gap, #{tokens.$spacing-xs});
     padding: var(--vi-tab-padding, 0 20px);
     min-width: var(--vi-tab-min-width, 90px);
     max-width: var(--vi-tab-max-width, 240px);
-    min-height: var(--vi-tab-height, 44px);
+    min-height: var(--vi-tab-height, 40px);
     width: 100%;
     height: 100%;
     position: relative;
@@ -40,7 +41,7 @@
 
     // Typography — clear nav-link feel, not body text
     font-family: inherit;
-    font-size: var(--vi-tab-font-size, 13.5px);
+    font-size: var(--vi-tab-font-size, #{tokens.$font-size-base});
     font-weight: var(--vi-tab-font-weight, 500);
     letter-spacing: 0.015em;
     color: var(--vi-tab-color, #{tokens.$text-secondary});
@@ -55,7 +56,7 @@
       content: '';
       position: absolute;
       inset: 4px;
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
       background: currentColor;
       opacity: 0;
       transform: scale(0.85);
@@ -114,7 +115,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    font-size: var(--vi-tab-icon-size, 15px);
+    font-size: var(--vi-tab-icon-size, #{func.to-rem(15px)});
     opacity: 0.6;
     position: relative;
     z-index: 1;
@@ -147,8 +148,8 @@
     min-width: var(--vi-tab-close-size, 18px);
     height: var(--vi-tab-close-size, 18px);
     padding: var(--vi-tab-badge-padding, 0 5px);
-    border-radius: 9px;
-    font-size: 10px;
+    border-radius: #{func.to-rem(9px)};
+    font-size: #{func.to-rem(10px)};
     font-weight: 700;
     line-height: 1;
     letter-spacing: 0;

package/components/_tabs.scss

@@ -1,4 +1,5 @@
 @use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
 
@@ -102,7 +103,7 @@
     }
 
     &:focus-visible {
-      border-radius: 4px; // Square focus ring for accessibility
+      border-radius: #{func.to-rem(4px)}; // Square focus ring for accessibility
       outline: 2px solid var(--vi-tabs-focus-ring, #{tokens.$color-primary});
       outline-offset: 2px;
     }
@@ -163,7 +164,7 @@
     height: var(--vi-tabs-indicator-thickness, 2px);
     width: 0;
     background: var(--vi-tabs-indicator-color, #{tokens.$color-primary});
-    border-radius: 2px 2px 0 0;
+    border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
     opacity: 0;
     pointer-events: none;
     z-index: 2;
@@ -201,7 +202,7 @@
       bottom: -1px;
       height: 2px;
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
-      border-radius: 2px 2px 0 0;
+      border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
       box-shadow: 0 0 0 0 transparent; // no glow on line variant — keep clean
     }
   }
@@ -218,7 +219,7 @@
     .vi-tabs__tablist {
       background: var(--vi-tabs-pill-bg, #{tokens.$color-grey-100});
       border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-      border-radius: 10px;
+      border-radius: #{func.to-rem(10px)};
       padding: var(--vi-tabs-spacing-xs, 4px);
       gap: var(--vi-tabs-gap-xs, 2px);
       // Inset shadow creates a "recessed tray" feel
@@ -229,7 +230,7 @@
     .vi-tabs__cursor {
       display: block;
       inset: 4px auto;          // matches tablist padding
-      border-radius: 7px;
+      border-radius: #{func.to-rem(7px)};
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
       // Multi-layer shadow for floating card feel
       box-shadow:
@@ -261,7 +262,7 @@
       bottom: -1px;
       height: 2px;
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
-      border-radius: 2px 2px 0 0;
+      border-radius: #{func.to-rem(2px)} #{func.to-rem(2px)} 0 0;
     }
   }
 
@@ -286,7 +287,7 @@
     .vi-tabs__cursor {
       $surface-color: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
       display: block;
-      border-radius: 8px 8px 0 0;
+      border-radius: #{func.to-rem(8px)} #{func.to-rem(8px)} 0 0;
       background: $surface-color;
       border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
       border-bottom-color: $surface-color; // Merges with content below
@@ -306,7 +307,7 @@
 
   .vi-tabs--enclosed {
     border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-    border-radius: 10px;
+    border-radius: #{func.to-rem(10px)};
     overflow: clip;  // Enclosed: clip cursor inside rounded border box
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
 
@@ -367,7 +368,7 @@
       left: 4px !important;
       right: 4px;
       width: calc(100% - 8px) !important; // Override JS width — fills sidebar
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
       box-shadow:
         0 1px 3px rgba(0, 0, 0, 0.08),
@@ -382,7 +383,7 @@
       right: 0;
       width: 3px !important;
       height: 0;
-      border-radius: 3px 0 0 3px;
+      border-radius: #{func.to-rem(3px)} 0 0 #{func.to-rem(3px)};
       background: var(--vi-tabs-primary-color, #{tokens.$color-primary});
       box-shadow: 0 0 6px color-mix(in srgb, #{tokens.$color-primary} 40%, transparent);
     }
@@ -395,7 +396,7 @@
 
     &.vi-tabs--line ::slotted(vi-tab[active]) {
       background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
-      border-radius: 8px;
+      border-radius: #{func.to-rem(8px)};
     }
   }
 
@@ -482,10 +483,10 @@
     background: transparent;
     cursor: pointer;
     font-family: inherit;
-    font-size: 13px;
+    font-size: #{func.to-rem(13px)};
     font-weight: 500;
     color: var(--vi-tabs-text-secondary, #{tokens.$text-secondary});
-    border-radius: 6px 6px 0 0;
+    border-radius: #{func.to-rem(6px)} #{func.to-rem(6px)} 0 0;
     transition: color 150ms ease, background-color 150ms ease;
 
     &:hover {
@@ -516,7 +517,7 @@
     min-width: 180px;
     background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
     border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
-    border-radius: 8px;
+    border-radius: #{func.to-rem(8px)};
     box-shadow:
       0 4px 6px -1px rgba(0, 0, 0, 0.10),
       0 2px 4px -1px rgba(0, 0, 0, 0.06),
@@ -538,10 +539,10 @@
     width: 100%;
     padding: var(--vi-tabs-spacing-md-lg, 8px 12px);
     border: none;
-    border-radius: 6px;
+    border-radius: #{func.to-rem(6px)};
     background: transparent;
     font-family: inherit;
-    font-size: 13.5px;
+    font-size: #{func.to-rem(13.5px)};
     font-weight: 500;
     color: var(--vi-tabs-text-secondary, #{tokens.$text-secondary});
     cursor: pointer;