@scattered-light/base-ui-theme 0.1.0

package/dist/styles/semantic/select.css

@@ -0,0 +1,197 @@
+/* Select Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TRIGGER (inherits from input)
+     ============================================ */
+  
+  --select-trigger-display: flex;
+  --select-trigger-align-items: center;
+  --select-trigger-justify-content: space-between;
+  --select-trigger-width: var(--input-width);
+  --select-trigger-height: var(--input-height);
+  --select-trigger-padding-block: var(--input-padding-block);
+  --select-trigger-padding-inline: var(--input-padding-inline);
+  --select-trigger-font-family: var(--input-font-family);
+  --select-trigger-font-size: var(--input-font-size);
+  --select-trigger-font-weight: var(--input-font-weight);
+  --select-trigger-line-height: var(--input-line-height);
+  --select-trigger-letter-spacing: var(--input-letter-spacing);
+  --select-trigger-color: var(--input-color);
+  --select-trigger-background: var(--input-background);
+  --select-trigger-border-width: var(--input-border-width);
+  --select-trigger-border-color: var(--input-border-color);
+  --select-trigger-border-radius: var(--input-border-radius);
+  --select-trigger-transition: var(--input-transition);
+  --select-trigger-cursor: pointer;
+  
+  /* Trigger states */
+  --select-trigger-border-color-hover: var(--input-border-color-hover);
+  --select-trigger-border-color-focus: var(--input-border-color-focus);
+  --select-trigger-shadow-focus: var(--input-shadow-focus);
+  --select-trigger-background-disabled: var(--input-background-disabled);
+  --select-trigger-color-disabled: var(--input-color-disabled);
+  --select-trigger-cursor-disabled: var(--input-cursor-disabled);
+  
+  /* ============================================
+     VALUE
+     ============================================ */
+  
+  --select-value-color: var(--text-primary);
+  --select-value-color-placeholder: var(--input-placeholder-color);
+  
+  /* ============================================
+     ICON (chevron)
+     ============================================ */
+  
+  --select-icon-size: 16px;
+  --select-icon-color: var(--text-tertiary);
+  --select-icon-transition: transform 0.2s ease;
+  
+  /* ============================================
+     POSITIONER & POPUP
+     ============================================ */
+  
+  --select-positioner-z-index: 1500;
+  
+  --select-popup-background: var(--surface-base);
+  --select-popup-border-width: var(--theme-stroke-default);
+  --select-popup-border-color: var(--border-default);
+  --select-popup-border-radius: var(--input-border-radius);
+  --select-popup-box-shadow: var(--shadow-lg);
+  --select-popup-padding: var(--space-1);
+  --select-popup-animation-duration: 0.2s;
+  --select-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     LIST
+     ============================================ */
+  
+  --select-list-max-height: 300px;
+  --select-list-overflow: auto;
+  
+  /* ============================================
+     ITEM
+     ============================================ */
+  
+  --select-item-display: flex;
+  --select-item-align-items: center;
+  --select-item-gap: var(--space-2);
+  --select-item-padding-block: var(--space-2-5);
+  --select-item-padding-inline: var(--space-3);
+  --select-item-font-family: var(--theme-font-base-font-family);
+  --select-item-font-size: var(--theme-font-base-font-size);
+  --select-item-font-weight: var(--theme-font-base-font-weight);
+  --select-item-line-height: var(--theme-font-base-line-height);
+  --select-item-letter-spacing: var(--theme-font-base-letter-spacing);
+  --select-item-color: var(--text-primary);
+  --select-item-cursor: pointer;
+  --select-item-border-radius: var(--theme-radius-item);
+  --select-item-transition: all 0.15s ease;
+  
+  /* Item states */
+  --select-item-background-hover: var(--theme-primary-100);
+  --select-item-color-hover: var(--theme-primary-800);
+  --select-item-background-selected: var(--theme-primary-200);
+  --select-item-color-selected: var(--theme-primary-900);
+  --select-item-background-highlighted: var(--theme-neutral-200);
+  --select-item-color-disabled: var(--text-disabled);
+  --select-item-cursor-disabled: not-allowed;
+  
+  /* ============================================
+     ITEM INDICATOR
+     ============================================ */
+  
+  --select-item-indicator-display: flex;
+  --select-item-indicator-align-items: center;
+  --select-item-indicator-justify-content: center;
+  --select-item-indicator-width: 16px;
+  --select-item-indicator-height: 16px;
+  --select-item-indicator-color: var(--theme-primary-600);
+  
+  /* ============================================
+     GROUP
+     ============================================ */
+  
+  --select-group-display: flex;
+  --select-group-flex-direction: column;
+  --select-group-gap: var(--space-1);
+  
+  --select-group-label-padding-block-start: var(--space-2);
+  --select-group-label-padding-block-end: var(--space-1);
+  --select-group-label-padding-inline: var(--space-3);
+  --select-group-label-font-family: var(--theme-font-minimize-subtitle-label-font-family);
+  --select-group-label-font-size: var(--theme-font-minimize-subtitle-label-font-size);
+  --select-group-label-font-weight: var(--theme-font-minimize-subtitle-label-font-weight);
+  --select-group-label-line-height: var(--theme-font-minimize-subtitle-label-line-height);
+  --select-group-label-letter-spacing: var(--theme-font-minimize-subtitle-label-letter-spacing);
+  --select-group-label-color: var(--text-secondary);
+  --select-group-label-text-transform: var(--theme-font-minimize-subtitle-label-text-transform);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --select-separator-height: var(--theme-stroke-default);
+  --select-separator-background: var(--border-subtle);
+  --select-separator-margin-block: var(--space-1);
+  
+  /* ============================================
+     SCROLL ARROWS
+     ============================================ */
+  
+  --select-scroll-arrow-display: flex;
+  --select-scroll-arrow-align-items: center;
+  --select-scroll-arrow-justify-content: center;
+  --select-scroll-arrow-height: 24px;
+  --select-scroll-arrow-color: var(--text-secondary);
+  --select-scroll-arrow-background: var(--surface-base);
+  --select-scroll-arrow-cursor: pointer;
+  
+  --select-scroll-arrow-background-hover: var(--theme-neutral-100);
+  
+  /* ============================================
+     BACKDROP
+     ============================================ */
+  
+  --select-backdrop-background: color-mix(in srgb, var(--theme-overlay-base) 30%, transparent);
+  --select-backdrop-z-index: 1499;
+  
+  /* ============================================
+     ARROW (popup pointer)
+     ============================================ */
+  
+  --select-arrow-width: 10px;
+  --select-arrow-height: 10px;
+  --select-arrow-fill: var(--surface-base);
+  --select-arrow-stroke: var(--border-default);
+  --select-arrow-stroke-width: var(--theme-stroke-default);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --select-trigger-background: var(--theme-neutral-50);
+    --select-trigger-border-color: var(--theme-neutral-600);
+    --select-popup-background: var(--theme-neutral-50);
+    --select-popup-border-color: var(--theme-neutral-600);
+    --select-scroll-arrow-background: var(--theme-neutral-50);
+    --select-scroll-arrow-background-hover: var(--theme-neutral-100);
+    --select-arrow-fill: var(--theme-neutral-50);
+    --select-arrow-stroke: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --select-trigger-background: var(--theme-neutral-50);
+  --select-trigger-border-color: var(--theme-neutral-600);
+  --select-popup-background: var(--theme-neutral-50);
+  --select-popup-border-color: var(--theme-neutral-600);
+  --select-scroll-arrow-background: var(--theme-neutral-50);
+  --select-scroll-arrow-background-hover: var(--theme-neutral-100);
+  --select-arrow-fill: var(--theme-neutral-50);
+  --select-arrow-stroke: var(--theme-neutral-600);
+}

package/dist/styles/semantic/separator.css

@@ -0,0 +1,37 @@
+/* Separator Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --separator-width: 100%;
+  --separator-height: var(--theme-stroke-default);
+  --separator-background: var(--border-default);
+  --separator-margin-block: var(--space-4);
+  --separator-margin-inline: 0;
+  
+  /* ============================================
+     ORIENTATION VARIANTS
+     ============================================ */
+  
+  /* Vertical separator */
+  --separator-vertical-width: var(--theme-stroke-default);
+  --separator-vertical-height: 100%;
+  --separator-vertical-margin-block: 0;
+  --separator-vertical-margin-inline: var(--space-4);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --separator-background: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --separator-background: var(--theme-neutral-600);
+}

package/dist/styles/semantic/slider.css

@@ -0,0 +1,120 @@
+/* Slider Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT
+     ============================================ */
+  
+  --slider-root-display: flex;
+  --slider-root-flex-direction: column;
+  --slider-root-gap: var(--space-2);
+  --slider-root-width: 100%;
+  
+  /* ============================================
+     CONTROL
+     ============================================ */
+  
+  --slider-control-display: flex;
+  --slider-control-align-items: center;
+  --slider-control-position: relative;
+  --slider-control-touch-action: none;
+  --slider-control-cursor: pointer;
+  
+  /* Disabled state */
+  --slider-control-cursor-disabled: not-allowed;
+  --slider-control-opacity-disabled: 0.5;
+  
+  /* ============================================
+     TRACK
+     ============================================ */
+  
+  --slider-track-width: 100%;
+  --slider-track-height: 4px;
+  --slider-track-background: var(--theme-neutral-300);
+  --slider-track-border-radius: var(--theme-radius-pill);
+  --slider-track-position: relative;
+  
+  /* ============================================
+     INDICATOR
+     ============================================ */
+  
+  --slider-indicator-background: var(--theme-primary-600);
+  --slider-indicator-border-radius: var(--theme-radius-pill);
+  --slider-indicator-position: absolute;
+  --slider-indicator-height: 100%;
+  
+  /* ============================================
+     THUMB
+     ============================================ */
+  
+  --slider-thumb-width: 20px;
+  --slider-thumb-height: 20px;
+  --slider-thumb-background: var(--theme-surface-canvas);
+  --slider-thumb-border: var(--theme-stroke-emphasis) solid var(--theme-primary-600);
+  --slider-thumb-border-radius: var(--theme-radius-pill);
+  --slider-thumb-position: absolute;
+  --slider-thumb-cursor: grab;
+  --slider-thumb-transition: box-shadow 0.2s ease;
+  
+  /* Hover state */
+  --slider-thumb-box-shadow-hover: 0 0 0 4px var(--theme-primary-100);
+  
+  /* Focus state */
+  --slider-thumb-box-shadow-focus: 0 0 0 4px var(--theme-primary-200);
+  --slider-thumb-outline-focus: var(--theme-a11y-focus-outline-width) solid var(--theme-primary-600);
+  --slider-thumb-outline-offset-focus: var(--theme-a11y-focus-outline-offset);
+  
+  /* Active/dragging state */
+  --slider-thumb-cursor-active: grabbing;
+  --slider-thumb-box-shadow-active: 0 0 0 6px var(--theme-primary-200);
+  
+  /* Disabled state */
+  --slider-thumb-cursor-disabled: not-allowed;
+  --slider-thumb-background-disabled: var(--theme-neutral-200);
+  --slider-thumb-border-disabled: var(--theme-stroke-emphasis) solid var(--theme-neutral-400);
+  
+  /* ============================================
+     VALUE DISPLAY
+     ============================================ */
+  
+  --slider-value-font-family: var(--theme-font-base-label-font-family);
+  --slider-value-font-size: var(--theme-font-base-label-font-size);
+  --slider-value-font-weight: var(--theme-font-base-label-font-weight);
+  --slider-value-line-height: var(--theme-font-base-label-line-height);
+  --slider-value-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --slider-value-color: var(--text-secondary);
+  
+  /* ============================================
+     MARKS
+     ============================================ */
+  
+  --slider-mark-width: 2px;
+  --slider-mark-height: 8px;
+  --slider-mark-background: var(--theme-neutral-400);
+  --slider-mark-border-radius: var(--theme-radius-pill);
+  
+  /* ============================================
+     VERTICAL ORIENTATION
+     ============================================ */
+  
+  --slider-vertical-control-height: 200px;
+  --slider-vertical-control-width: auto;
+  --slider-vertical-track-width: 4px;
+  --slider-vertical-track-height: 100%;
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --slider-track-background: var(--theme-neutral-600);
+    --slider-thumb-background: var(--theme-neutral-100);
+  }
+}
+
+[data-theme='dark'] {
+  --slider-track-background: var(--theme-neutral-600);
+  --slider-thumb-background: var(--theme-neutral-100);
+}

package/dist/styles/semantic/switch.css

@@ -0,0 +1,158 @@
+/* Switch Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT
+     ============================================ */
+  
+  --switch-root-display: inline-flex;
+  --switch-root-align-items: center;
+  --switch-root-gap: var(--space-2);
+  --switch-root-user-select: none;
+  
+  /* Disabled state */
+  --switch-root-opacity-disabled: 0.6;
+  
+  /* ============================================
+     TRACK
+     ============================================ */
+  
+  --switch-track-position: relative;
+  --switch-track-display: flex;
+  --switch-track-align-items: center;
+  --switch-track-width: 48px;
+  --switch-track-height: 24px;
+  --switch-track-padding: 2px;
+  --switch-track-background: var(--theme-neutral-300);
+  --switch-track-background-checked: var(--theme-primary-600);
+  --switch-track-border: var(--theme-stroke-default) solid var(--theme-neutral-400);
+  --switch-track-border-radius: var(--theme-radius-pill);
+  --switch-track-cursor: pointer;
+  --switch-track-flex-shrink: 0;
+  --switch-track-transition: background-color var(--transition-duration-normal) var(--transition-easing-in-out);
+  
+  /* Hover state */
+  --switch-track-background-hover: var(--theme-neutral-400);
+  --switch-track-background-checked-hover: var(--theme-primary-700);
+  
+  /* Focus state */
+  --switch-track-box-shadow-focus: var(--theme-focus-shadow-3px-primary-soft);
+  --switch-track-border-color-focus: var(--theme-primary-600);
+  
+  /* Disabled state */
+  --switch-track-background-disabled: var(--theme-neutral-200);
+  --switch-track-cursor-disabled: not-allowed;
+  
+  /* ============================================
+     TRACK TEXT (ON/OFF)
+     ============================================ */
+  
+  --switch-track-text-font-family: var(--theme-font-condense-subtitle-label-font-family);
+  --switch-track-text-font-size: var(--theme-font-base-switch-font-size);
+  --switch-track-text-font-weight: var(--theme-font-condense-subtitle-label-font-weight);
+  --switch-track-text-line-height: 1;
+  --switch-track-text-color: var(--theme-neutral-600);
+  --switch-track-text-color-checked: var(--theme-text-on-primary);
+  --switch-track-text-text-transform: uppercase;
+  --switch-track-text-letter-spacing: var(--theme-font-condense-subtitle-label-letter-spacing);
+  --switch-track-text-transition: opacity var(--transition-duration-normal) var(--transition-easing-in-out);
+  --switch-track-text-pointer-events: none;
+  
+  /* Positioning */
+  --switch-track-text-position: absolute;
+  --switch-track-text-off-right: 4px;
+  --switch-track-text-on-left: 6px;
+  
+  /* ============================================
+     THUMB
+     ============================================ */
+  
+  --switch-thumb-background: var(--theme-surface-canvas);
+  --switch-thumb-border-radius: var(--theme-radius-pill);
+  --switch-thumb-box-shadow: var(--shadow-sm);
+  --switch-thumb-transition: translate var(--transition-duration-normal) var(--transition-easing-in-out);
+  --switch-thumb-transform-checked: 24px 0;
+  
+  /* Disabled state */
+  --switch-thumb-background-disabled: var(--theme-neutral-400);
+  
+  /* ============================================
+     LABEL
+     ============================================ */
+  
+  --switch-label-font-family: var(--theme-font-base-label-font-family);
+  --switch-label-font-size: var(--theme-font-base-label-font-size);
+  --switch-label-font-weight: var(--theme-font-base-label-font-weight);
+  --switch-label-line-height: var(--theme-font-base-label-line-height);
+  --switch-label-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --switch-label-color: var(--text-primary);
+  --switch-label-cursor: pointer;
+  
+  /* Disabled state */
+  --switch-label-cursor-disabled: not-allowed;
+  --switch-label-opacity-disabled: 0.6;
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  /* Small */
+  --switch-track-width-sm: 44px;
+  --switch-track-height-sm: 20px;
+  --switch-track-padding-sm: 2px;
+  --switch-thumb-transform-checked-sm: 24px 0;
+  --switch-track-text-font-size-sm: var(--theme-font-condense-switch-font-size);
+  --switch-track-text-off-right-sm: 5px;
+  --switch-track-text-on-left-sm: 7px;
+  --switch-label-font-family-sm: var(--theme-font-minimize-font-family);
+  --switch-label-font-size-sm: var(--theme-font-minimize-font-size);
+  --switch-label-font-weight-sm: var(--theme-font-minimize-font-weight);
+  --switch-label-line-height-sm: var(--theme-font-minimize-line-height);
+  --switch-label-letter-spacing-sm: var(--theme-font-minimize-letter-spacing);
+  
+  /* Large */
+  --switch-track-width-lg: 68px;
+  --switch-track-height-lg: 32px;
+  --switch-track-padding-lg: 2px;
+  --switch-thumb-transform-checked-lg: 36px 0;
+  --switch-track-text-font-size-lg: var(--theme-font-magnify-switch-font-size);
+  --switch-track-text-off-right-lg: 7px;
+  --switch-track-text-on-left-lg: 9px;
+  --switch-label-font-family-lg: var(--theme-font-base-font-family);
+  --switch-label-font-size-lg: var(--theme-font-base-font-size);
+  --switch-label-font-weight-lg: var(--theme-font-base-font-weight);
+  --switch-label-line-height-lg: var(--theme-font-base-line-height);
+  --switch-label-letter-spacing-lg: var(--theme-font-base-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --switch-track-background: var(--theme-neutral-700);
+    --switch-track-background-checked: var(--theme-primary-500);
+    --switch-track-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+    --switch-track-background-hover: var(--theme-neutral-600);
+    --switch-track-background-checked-hover: var(--theme-primary-600);
+    --switch-track-background-disabled: var(--theme-neutral-800);
+    --switch-track-text-color: var(--theme-neutral-400);
+    --switch-track-text-color-checked: var(--theme-neutral-100);
+    --switch-thumb-background: var(--theme-neutral-100);
+    --switch-thumb-background-disabled: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --switch-track-background: var(--theme-neutral-700);
+  --switch-track-background-checked: var(--theme-primary-500);
+  --switch-track-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+  --switch-track-background-hover: var(--theme-neutral-600);
+  --switch-track-background-checked-hover: var(--theme-primary-600);
+  --switch-track-background-disabled: var(--theme-neutral-800);
+  --switch-track-text-color: var(--theme-neutral-400);
+  --switch-track-text-color-checked: var(--theme-neutral-100);
+  --switch-thumb-background: var(--theme-neutral-100);
+  --switch-thumb-background-disabled: var(--theme-neutral-600);
+}

package/dist/styles/semantic/tabs.css

@@ -0,0 +1,150 @@
+/* Tabs Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT
+     ============================================ */
+  
+  --tabs-root-display: flex;
+  --tabs-root-flex-direction: column;
+  --tabs-root-gap: var(--space-0);
+  
+  /* ============================================
+     TAB LIST
+     ============================================ */
+  
+  --tabs-list-display: flex;
+  --tabs-list-gap: var(--space-0);
+  --tabs-list-border-bottom: var(--theme-stroke-default) solid var(--theme-neutral-300);
+  --tabs-list-padding: var(--space-0);
+  
+  /* ============================================
+     TAB (Trigger)
+     ============================================ */
+  
+  --tabs-tab-display: inline-flex;
+  --tabs-tab-align-items: center;
+  --tabs-tab-justify-content: center;
+  --tabs-tab-padding: var(--space-2) var(--space-4);
+  --tabs-tab-font-family: var(--theme-font-base-label-font-family);
+  --tabs-tab-font-size: var(--theme-font-base-label-font-size);
+  --tabs-tab-font-weight: var(--theme-font-base-label-font-weight);
+  --tabs-tab-line-height: var(--theme-font-base-label-line-height);
+  --tabs-tab-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --tabs-tab-color: var(--text-secondary);
+  --tabs-tab-background: transparent;
+  --tabs-tab-border: none;
+  --tabs-tab-border-bottom: var(--theme-stroke-emphasis) solid transparent;
+  --tabs-tab-border-radius: 0;
+  --tabs-tab-cursor: pointer;
+  --tabs-tab-transition: all var(--transition-duration-fast) var(--transition-easing-in-out);
+  --tabs-tab-white-space: nowrap;
+  
+  /* Hover state */
+  --tabs-tab-color-hover: var(--text-primary);
+  --tabs-tab-background-hover: var(--theme-neutral-100);
+  
+  /* Active state */
+  --tabs-tab-color-active: var(--theme-primary-700);
+  --tabs-tab-border-bottom-active: var(--theme-stroke-emphasis) solid var(--theme-primary-600);
+  --tabs-tab-font-weight-active: var(--theme-font-base-label-active-font-weight);
+  
+  /* Focus state */
+  --tabs-tab-outline-focus: var(--theme-a11y-focus-outline-width) solid var(--theme-primary-600);
+  --tabs-tab-outline-offset-focus: calc(-1 * var(--theme-a11y-focus-outline-offset));
+  
+  /* Disabled state */
+  --tabs-tab-color-disabled: var(--text-disabled);
+  --tabs-tab-cursor-disabled: not-allowed;
+  --tabs-tab-opacity-disabled: 0.5;
+  
+  /* ============================================
+     TAB PANEL
+     ============================================ */
+  
+  --tabs-panel-padding: var(--space-4);
+  --tabs-panel-font-family: var(--theme-font-base-font-family);
+  --tabs-panel-font-size: var(--theme-font-base-font-size);
+  --tabs-panel-font-weight: var(--theme-font-base-font-weight);
+  --tabs-panel-line-height: var(--theme-font-base-line-height);
+  --tabs-panel-letter-spacing: var(--theme-font-base-letter-spacing);
+  --tabs-panel-color: var(--text-primary);
+  --tabs-panel-background: transparent;
+  
+  /* Focus state */
+  --tabs-panel-outline-focus: var(--theme-a11y-focus-outline-width) solid var(--theme-primary-600);
+  --tabs-panel-outline-offset-focus: var(--theme-a11y-focus-outline-offset);
+  
+  /* ============================================
+     ORIENTATION VARIANTS
+     ============================================ */
+  
+  /* Vertical */
+  --tabs-root-flex-direction-vertical: row;
+  --tabs-list-flex-direction-vertical: column;
+  --tabs-list-border-bottom-vertical: none;
+  --tabs-list-border-right-vertical: var(--theme-stroke-default) solid var(--theme-neutral-300);
+  --tabs-tab-border-bottom-vertical: none;
+  --tabs-tab-border-right-vertical: var(--theme-stroke-emphasis) solid transparent;
+  --tabs-tab-border-right-active-vertical: var(--theme-stroke-emphasis) solid var(--theme-primary-600);
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  /* Small */
+  --tabs-tab-padding-sm: var(--space-1-5) var(--space-3);
+  --tabs-tab-font-family-sm: var(--theme-font-minimize-font-family);
+  --tabs-tab-font-size-sm: var(--theme-font-minimize-font-size);
+  --tabs-tab-font-weight-sm: var(--theme-font-minimize-font-weight);
+  --tabs-tab-line-height-sm: var(--theme-font-minimize-line-height);
+  --tabs-tab-letter-spacing-sm: var(--theme-font-minimize-letter-spacing);
+  --tabs-panel-padding-sm: var(--space-3);
+  --tabs-panel-font-family-sm: var(--theme-font-minimize-font-family);
+  --tabs-panel-font-size-sm: var(--theme-font-minimize-font-size);
+  --tabs-panel-font-weight-sm: var(--theme-font-minimize-font-weight);
+  --tabs-panel-line-height-sm: var(--theme-font-minimize-line-height);
+  --tabs-panel-letter-spacing-sm: var(--theme-font-minimize-letter-spacing);
+  
+  /* Large */
+  --tabs-tab-padding-lg: var(--space-3) var(--space-6);
+  --tabs-tab-font-family-lg: var(--theme-font-base-font-family);
+  --tabs-tab-font-size-lg: var(--theme-font-base-font-size);
+  --tabs-tab-font-weight-lg: var(--theme-font-base-font-weight);
+  --tabs-tab-line-height-lg: var(--theme-font-base-line-height);
+  --tabs-tab-letter-spacing-lg: var(--theme-font-base-letter-spacing);
+  --tabs-panel-padding-lg: var(--space-6);
+  --tabs-panel-font-family-lg: var(--theme-font-base-font-family);
+  --tabs-panel-font-size-lg: var(--theme-font-base-font-size);
+  --tabs-panel-font-weight-lg: var(--theme-font-base-font-weight);
+  --tabs-panel-line-height-lg: var(--theme-font-base-line-height);
+  --tabs-panel-letter-spacing-lg: var(--theme-font-base-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --tabs-list-border-bottom: var(--theme-stroke-default) solid var(--theme-neutral-700);
+    --tabs-tab-color: var(--text-secondary);
+    --tabs-tab-color-hover: var(--text-primary);
+    --tabs-tab-background-hover: var(--theme-neutral-800);
+    --tabs-tab-color-active: var(--theme-primary-300);
+    --tabs-tab-border-bottom-active: var(--theme-stroke-emphasis) solid var(--theme-primary-500);
+    --tabs-list-border-right-vertical: var(--theme-stroke-default) solid var(--theme-neutral-700);
+    --tabs-tab-border-right-active-vertical: var(--theme-stroke-emphasis) solid var(--theme-primary-500);
+  }
+}
+
+[data-theme='dark'] {
+  --tabs-list-border-bottom: var(--theme-stroke-default) solid var(--theme-neutral-700);
+  --tabs-tab-color: var(--text-secondary);
+  --tabs-tab-color-hover: var(--text-primary);
+  --tabs-tab-background-hover: var(--theme-neutral-800);
+  --tabs-tab-color-active: var(--theme-primary-300);
+  --tabs-tab-border-bottom-active: var(--theme-stroke-emphasis) solid var(--theme-primary-500);
+  --tabs-list-border-right-vertical: var(--theme-stroke-default) solid var(--theme-neutral-700);
+  --tabs-tab-border-right-active-vertical: var(--theme-stroke-emphasis) solid var(--theme-primary-500);
+}