@sigx/lynx-daisyui 0.1.0

package/dist/styles/components/form-field.css

@@ -0,0 +1,25 @@
+/* Form Field — .form-control, .label, .label-text */
+
+.form-control {
+  gap: 4px;
+}
+
+.label {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.label-text {
+  font-size: var(--font-sm);
+  color: var(--color-base-content);
+}
+
+.label-text-alt {
+  font-size: var(--font-xs);
+  color: var(--color-base-content);
+}
+
+.label-text-error {
+  font-size: var(--font-xs);
+  color: var(--color-error);
+}

package/dist/styles/components/input.css

@@ -0,0 +1,31 @@
+/* Input — .input + variants, sizes, colors */
+
+.input {
+  height: var(--size-md);
+  padding-left: var(--padding-btn-md);
+  padding-right: var(--padding-btn-md);
+  border-radius: var(--rounded-btn);
+  font-size: var(--font-md);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  border-width: 0;
+  border-color: transparent;
+}
+
+/* Variants */
+.input-bordered { border-width: var(--border-btn); border-color: var(--color-base-300); }
+.input-ghost { background-color: transparent; }
+
+/* Sizes */
+.input-xs { height: var(--size-xs); padding-left: var(--padding-btn-xs); padding-right: var(--padding-btn-xs); font-size: var(--font-xs); }
+.input-sm { height: var(--size-sm); padding-left: var(--padding-btn-sm); padding-right: var(--padding-btn-sm); font-size: var(--font-sm); }
+.input-lg { height: var(--size-lg); padding-left: 20px; padding-right: 20px; font-size: var(--font-lg); }
+
+/* Color variants */
+.input-primary { border-width: var(--border-btn); border-color: var(--color-primary); }
+.input-secondary { border-width: var(--border-btn); border-color: var(--color-secondary); }
+.input-accent { border-width: var(--border-btn); border-color: var(--color-accent); }
+.input-info { border-width: var(--border-btn); border-color: var(--color-info); }
+.input-success { border-width: var(--border-btn); border-color: var(--color-success); }
+.input-warning { border-width: var(--border-btn); border-color: var(--color-warning); }
+.input-error { border-width: var(--border-btn); border-color: var(--color-error); }

package/dist/styles/components/loading.css

@@ -0,0 +1,33 @@
+/* Loading — .loading + type variants */
+
+@keyframes spin {
+  0% { transform: rotateZ(0deg); }
+  100% { transform: rotateZ(360deg); }
+}
+
+.loading {
+  width: var(--checkbox-md);
+  height: var(--checkbox-md);
+  border-radius: 9999px;
+  border-width: 3px;
+  border-color: transparent;
+  border-top-color: var(--color-base-300);
+  background-color: transparent;
+  align-self: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  animation: spin 800ms linear infinite;
+}
+
+/* Size variants */
+.loading-xs { width: var(--checkbox-xs); height: var(--checkbox-xs); border-width: 2px; }
+.loading-sm { width: var(--checkbox-sm); height: var(--checkbox-sm); border-width: 2px; }
+.loading-lg { width: var(--step-indicator); height: var(--step-indicator); border-width: 4px; }
+
+/* Type variants (visual distinction where possible) */
+.loading-spinner { border-radius: 9999px; }
+.loading-dots { border-radius: 4px; }
+.loading-ring { border-radius: 9999px; border-width: 2px; }
+.loading-ball { border-radius: 9999px; }
+.loading-bars { border-radius: 2px; }
+.loading-infinity { border-radius: 9999px; }

package/dist/styles/components/modal.css

@@ -0,0 +1,41 @@
+/* Modal — overlay, box, header, body, actions */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-box {
+  max-width: var(--modal-max-width);
+  width: 90%;
+  border-radius: var(--rounded-box);
+  background-color: var(--color-base-200);
+  padding: 0;
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: var(--padding-box);
+  padding-bottom: var(--padding-box-compact);
+}
+
+.modal-body {
+  padding: var(--padding-box);
+  padding-top: var(--padding-box-compact);
+  padding-bottom: var(--padding-box-compact);
+}
+
+.modal-action {
+  padding: var(--padding-box);
+  padding-top: var(--padding-box-compact);
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--gap-box);
+}

package/dist/styles/components/progress.css

@@ -0,0 +1,24 @@
+/* Progress — .progress track + bar */
+
+.progress {
+  height: var(--progress-height);
+  border-radius: 9999px;
+  background-color: var(--color-base-200);
+  overflow: hidden;
+  align-self: stretch;
+}
+
+.progress-bar {
+  height: var(--progress-height);
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+/* Color variants */
+.progress-primary .progress-bar { background-color: var(--color-primary); }
+.progress-secondary .progress-bar { background-color: var(--color-secondary); }
+.progress-accent .progress-bar { background-color: var(--color-accent); }
+.progress-info .progress-bar { background-color: var(--color-info); }
+.progress-success .progress-bar { background-color: var(--color-success); }
+.progress-warning .progress-bar { background-color: var(--color-warning); }
+.progress-error .progress-bar { background-color: var(--color-error); }

package/dist/styles/components/radio.css

@@ -0,0 +1,50 @@
+/* Radio — .radio + colors, checked state */
+
+.radio {
+  width: var(--checkbox-md);
+  height: var(--checkbox-md);
+  border-radius: 9999px;
+  border-width: 2px;
+  border-color: var(--color-base-300);
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Size variants */
+.radio-xs { width: var(--checkbox-xs); height: var(--checkbox-xs); }
+.radio-sm { width: var(--checkbox-sm); height: var(--checkbox-sm); }
+.radio-lg { width: var(--checkbox-lg); height: var(--checkbox-lg); }
+
+/* Inner dot (when checked) */
+.radio-mark {
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+/* Color variants */
+.radio-primary { border-color: var(--color-primary); }
+.radio-primary .radio-mark { background-color: var(--color-primary); }
+.radio-secondary { border-color: var(--color-secondary); }
+.radio-secondary .radio-mark { background-color: var(--color-secondary); }
+.radio-accent { border-color: var(--color-accent); }
+.radio-accent .radio-mark { background-color: var(--color-accent); }
+.radio-info { border-color: var(--color-info); }
+.radio-info .radio-mark { background-color: var(--color-info); }
+.radio-success { border-color: var(--color-success); }
+.radio-success .radio-mark { background-color: var(--color-success); }
+.radio-warning { border-color: var(--color-warning); }
+.radio-warning .radio-mark { background-color: var(--color-warning); }
+.radio-error { border-color: var(--color-error); }
+.radio-error .radio-mark { background-color: var(--color-error); }
+
+/* Checked state — border matches color */
+.radio-checked { border-color: var(--color-primary); }
+.radio-checked.radio-secondary { border-color: var(--color-secondary); }
+.radio-checked.radio-accent { border-color: var(--color-accent); }
+.radio-checked.radio-info { border-color: var(--color-info); }
+.radio-checked.radio-success { border-color: var(--color-success); }
+.radio-checked.radio-warning { border-color: var(--color-warning); }
+.radio-checked.radio-error { border-color: var(--color-error); }

package/dist/styles/components/select.css

@@ -0,0 +1,56 @@
+/* Select — .select + dropdown, options */
+
+.select {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: var(--size-md);
+  padding-left: var(--padding-btn-md);
+  padding-right: var(--padding-btn-md);
+  border-radius: var(--rounded-btn);
+  font-size: var(--font-md);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  border-width: 0;
+  border-color: transparent;
+}
+
+/* Variants */
+.select-bordered { border-width: var(--border-btn); border-color: var(--color-base-300); }
+.select-ghost { background-color: transparent; }
+
+/* Sizes */
+.select-xs { height: var(--size-xs); padding-left: var(--padding-btn-xs); padding-right: var(--padding-btn-xs); font-size: var(--font-xs); }
+.select-sm { height: var(--size-sm); padding-left: var(--padding-btn-sm); padding-right: var(--padding-btn-sm); font-size: var(--font-sm); }
+.select-lg { height: var(--size-lg); padding-left: 20px; padding-right: 20px; font-size: var(--font-lg); }
+
+/* Color variants */
+.select-primary { border-width: var(--border-btn); border-color: var(--color-primary); }
+.select-secondary { border-width: var(--border-btn); border-color: var(--color-secondary); }
+.select-accent { border-width: var(--border-btn); border-color: var(--color-accent); }
+.select-info { border-width: var(--border-btn); border-color: var(--color-info); }
+.select-success { border-width: var(--border-btn); border-color: var(--color-success); }
+.select-warning { border-width: var(--border-btn); border-color: var(--color-warning); }
+.select-error { border-width: var(--border-btn); border-color: var(--color-error); }
+
+/* Dropdown */
+.select-dropdown {
+  background-color: var(--color-base-100);
+  border-width: var(--border-btn);
+  border-color: var(--color-base-300);
+  border-radius: var(--rounded-btn);
+  overflow: hidden;
+}
+
+/* Options */
+.select-option {
+  padding: 12px;
+  padding-left: var(--padding-btn-md);
+  padding-right: var(--padding-btn-md);
+  color: var(--color-base-content);
+}
+
+.select-option-active {
+  background-color: var(--color-primary);
+  color: var(--color-primary-content);
+}

package/dist/styles/components/skeleton.css

@@ -0,0 +1,6 @@
+/* Skeleton — placeholder element */
+
+.skeleton {
+  background-color: var(--color-base-300);
+  border-radius: var(--rounded-btn);
+}

package/dist/styles/components/steps.css

@@ -0,0 +1,40 @@
+/* Steps — .steps, .step, .step-indicator */
+
+.steps {
+  gap: 4px;
+}
+
+.steps-horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.steps-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.step {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.step-indicator {
+  width: var(--step-indicator);
+  height: var(--step-indicator);
+  border-radius: 9999px;
+  background-color: var(--color-base-300);
+  justify-content: center;
+  align-items: center;
+}
+
+/* Color variants */
+.step-primary .step-indicator { background-color: var(--color-primary); color: var(--color-primary-content); }
+.step-secondary .step-indicator { background-color: var(--color-secondary); color: var(--color-secondary-content); }
+.step-accent .step-indicator { background-color: var(--color-accent); color: var(--color-accent-content); }
+.step-neutral .step-indicator { background-color: var(--color-neutral); color: var(--color-neutral-content); }
+.step-info .step-indicator { background-color: var(--color-info); color: var(--color-info-content); }
+.step-success .step-indicator { background-color: var(--color-success); color: var(--color-success-content); }
+.step-warning .step-indicator { background-color: var(--color-warning); color: var(--color-warning-content); }
+.step-error .step-indicator { background-color: var(--color-error); color: var(--color-error-content); }

package/dist/styles/components/tabs.css

@@ -0,0 +1,23 @@
+/* Tabs — .tabs, .tab, .tab-active */
+
+.tabs {
+  flex-direction: row;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--color-base-300);
+}
+
+.tab {
+  padding-left: var(--padding-btn-md);
+  padding-right: var(--padding-btn-md);
+  padding-top: var(--padding-btn-xs);
+  padding-bottom: var(--padding-btn-xs);
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  color: var(--color-base-content);
+}
+
+.tab-active {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+}

package/dist/styles/components/textarea.css

@@ -0,0 +1,31 @@
+/* Textarea — .textarea + variants, sizes */
+
+.textarea {
+  padding: 12px;
+  padding-left: var(--padding-btn-md);
+  padding-right: var(--padding-btn-md);
+  border-radius: var(--rounded-btn);
+  font-size: var(--font-md);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  border-width: 0;
+  border-color: transparent;
+}
+
+/* Variants */
+.textarea-bordered { border-width: var(--border-btn); border-color: var(--color-base-300); }
+.textarea-ghost { background-color: transparent; }
+
+/* Sizes */
+.textarea-xs { padding: var(--padding-btn-xs); font-size: var(--font-xs); }
+.textarea-sm { padding: 10px; font-size: var(--font-sm); }
+.textarea-lg { padding: var(--padding-btn-md); font-size: var(--font-lg); }
+
+/* Color variants */
+.textarea-primary { border-width: var(--border-btn); border-color: var(--color-primary); }
+.textarea-secondary { border-width: var(--border-btn); border-color: var(--color-secondary); }
+.textarea-accent { border-width: var(--border-btn); border-color: var(--color-accent); }
+.textarea-info { border-width: var(--border-btn); border-color: var(--color-info); }
+.textarea-success { border-width: var(--border-btn); border-color: var(--color-success); }
+.textarea-warning { border-width: var(--border-btn); border-color: var(--color-warning); }
+.textarea-error { border-width: var(--border-btn); border-color: var(--color-error); }

package/dist/styles/components/toggle.css

@@ -0,0 +1,46 @@
+/* Toggle — .toggle track + .toggle-thumb */
+
+.toggle {
+  justify-content: center;
+  padding-left: 4px;
+  padding-right: 4px;
+  background-color: var(--color-base-300);
+}
+
+/* Size variants — track dimensions */
+.toggle-xs { width: var(--toggle-width-xs); height: var(--toggle-height-xs); border-radius: var(--rounded-toggle); }
+.toggle-sm { width: var(--toggle-width-sm); height: var(--toggle-height-sm); border-radius: var(--rounded-toggle); }
+.toggle-md { width: var(--toggle-width-md); height: var(--toggle-height-md); border-radius: var(--rounded-toggle); }
+.toggle-lg { width: var(--toggle-width-lg); height: var(--toggle-height-lg); border-radius: var(--rounded-toggle); }
+
+/* Thumb */
+.toggle-thumb {
+  background-color: var(--color-base-100);
+  border-radius: 9999px;
+}
+
+.toggle-xs .toggle-thumb { width: var(--toggle-thumb-xs); height: var(--toggle-thumb-xs); }
+.toggle-sm .toggle-thumb { width: var(--toggle-thumb-sm); height: var(--toggle-thumb-sm); }
+.toggle-md .toggle-thumb { width: var(--toggle-thumb-md); height: var(--toggle-thumb-md); }
+.toggle-lg .toggle-thumb { width: var(--toggle-thumb-lg); height: var(--toggle-thumb-lg); }
+
+/* Checked state */
+.toggle-checked { background-color: var(--color-primary); }
+.toggle-checked.toggle-secondary { background-color: var(--color-secondary); }
+.toggle-checked.toggle-accent { background-color: var(--color-accent); }
+.toggle-checked.toggle-info { background-color: var(--color-info); }
+.toggle-checked.toggle-success { background-color: var(--color-success); }
+.toggle-checked.toggle-warning { background-color: var(--color-warning); }
+.toggle-checked.toggle-error { background-color: var(--color-error); }
+
+/* Color variants (checked) */
+.toggle-primary.toggle-checked { background-color: var(--color-primary); }
+.toggle-secondary.toggle-checked { background-color: var(--color-secondary); }
+.toggle-accent.toggle-checked { background-color: var(--color-accent); }
+.toggle-info.toggle-checked { background-color: var(--color-info); }
+.toggle-success.toggle-checked { background-color: var(--color-success); }
+.toggle-warning.toggle-checked { background-color: var(--color-warning); }
+.toggle-error.toggle-checked { background-color: var(--color-error); }
+
+/* Disabled */
+.toggle-disabled { opacity: var(--disabled-opacity); }

package/dist/styles/components/typography.css

@@ -0,0 +1,32 @@
+/* Typography — text color utilities for semantic colors */
+
+.text-primary { color: var(--color-primary); }
+.text-primary-content { color: var(--color-primary-content); }
+.text-secondary { color: var(--color-secondary); }
+.text-secondary-content { color: var(--color-secondary-content); }
+.text-accent { color: var(--color-accent); }
+.text-accent-content { color: var(--color-accent-content); }
+.text-neutral { color: var(--color-neutral); }
+.text-neutral-content { color: var(--color-neutral-content); }
+.text-base-content { color: var(--color-base-content); }
+.text-info { color: var(--color-info); }
+.text-info-content { color: var(--color-info-content); }
+.text-success { color: var(--color-success); }
+.text-success-content { color: var(--color-success-content); }
+.text-warning { color: var(--color-warning); }
+.text-warning-content { color: var(--color-warning-content); }
+.text-error { color: var(--color-error); }
+.text-error-content { color: var(--color-error-content); }
+
+/* Background color utilities for semantic colors */
+.bg-primary { background-color: var(--color-primary); }
+.bg-secondary { background-color: var(--color-secondary); }
+.bg-accent { background-color: var(--color-accent); }
+.bg-neutral { background-color: var(--color-neutral); }
+.bg-base-100 { background-color: var(--color-base-100); }
+.bg-base-200 { background-color: var(--color-base-200); }
+.bg-base-300 { background-color: var(--color-base-300); }
+.bg-info { background-color: var(--color-info); }
+.bg-success { background-color: var(--color-success); }
+.bg-warning { background-color: var(--color-warning); }
+.bg-error { background-color: var(--color-error); }

package/dist/styles/index.css

@@ -0,0 +1,31 @@
+/* @sigx/lynx-daisyui — all themes + component styles */
+
+/* Themes */
+@import './themes/light.css';
+@import './themes/dark.css';
+@import './themes/shapes.css';
+
+/* Base reset */
+@import './base.css';
+
+/* Components */
+@import './components/button.css';
+@import './components/card.css';
+@import './components/badge.css';
+@import './components/alert.css';
+@import './components/checkbox.css';
+@import './components/toggle.css';
+@import './components/radio.css';
+@import './components/input.css';
+@import './components/textarea.css';
+@import './components/select.css';
+@import './components/form-field.css';
+@import './components/progress.css';
+@import './components/loading.css';
+@import './components/modal.css';
+@import './components/tabs.css';
+@import './components/steps.css';
+@import './components/avatar.css';
+@import './components/skeleton.css';
+@import './components/divider.css';
+@import './components/typography.css';

package/dist/styles/themes/dark.css

@@ -0,0 +1,95 @@
+/* DaisyUI Dark Theme — overrides only color tokens */
+/* Scoped under .daisy-dark; CSS inheritance propagates to descendants */
+
+.daisy-dark {
+  /* Apply base colors to the theme root */
+  background-color: #1d232a;
+  color: #a6adbb;
+
+  /* Semantic colors */
+  --color-primary: #7582ff;
+  --color-primary-content: #050617;
+  --color-secondary: #ff71cf;
+  --color-secondary-content: #190211;
+  --color-accent: #00e7d0;
+  --color-accent-content: #001210;
+  --color-neutral: #2a323c;
+  --color-neutral-content: #a6adbb;
+
+  /* Base colors */
+  --color-base-100: #1d232a;
+  --color-base-200: #191e24;
+  --color-base-300: #343b46;
+  --color-base-content: #a6adbb;
+
+  /* Status colors */
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+
+  /* ── Roundness ── */
+  --rounded-box: 16px;
+  --rounded-btn: 8px;
+  --rounded-badge: 9999px;
+  --rounded-tab: 8px;
+  --rounded-selector: 8px;
+  --rounded-toggle: 9999px;
+
+  /* ── Sizing scale ── */
+  --size-xs: 24px;
+  --size-sm: 32px;
+  --size-md: 48px;
+  --size-lg: 64px;
+
+  /* ── Font sizes ── */
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-md: 14px;
+  --font-lg: 18px;
+
+  /* ── Spacing ── */
+  --padding-btn-xs: 8px;
+  --padding-btn-sm: 12px;
+  --padding-btn-md: 16px;
+  --padding-btn-lg: 24px;
+  --padding-box: 16px;
+  --padding-box-compact: 8px;
+  --gap-box: 8px;
+
+  /* ── Borders ── */
+  --border-btn: 1px;
+  --border-card: 1px;
+
+  /* ── Component-specific sizes ── */
+  --checkbox-xs: 16px;
+  --checkbox-sm: 20px;
+  --checkbox-md: 24px;
+  --checkbox-lg: 32px;
+  --toggle-width-xs: 32px;
+  --toggle-width-sm: 40px;
+  --toggle-width-md: 48px;
+  --toggle-width-lg: 56px;
+  --toggle-height-xs: 22px;
+  --toggle-height-sm: 24px;
+  --toggle-height-md: 28px;
+  --toggle-height-lg: 32px;
+  --toggle-thumb-xs: 14px;
+  --toggle-thumb-sm: 16px;
+  --toggle-thumb-md: 20px;
+  --toggle-thumb-lg: 24px;
+  --badge-xs: 16px;
+  --badge-sm: 20px;
+  --badge-md: 24px;
+  --badge-lg: 32px;
+  --step-indicator: 32px;
+  --progress-height: 8px;
+  --modal-max-width: 400px;
+
+  /* ── Opacity ── */
+  --disabled-opacity: 0.5;
+}

package/dist/styles/themes/light.css

@@ -0,0 +1,95 @@
+/* DaisyUI Light Theme — design tokens as CSS custom properties */
+/* Scoped under .daisy-light; CSS inheritance propagates to descendants */
+
+.daisy-light {
+  /* Apply base colors to the theme root */
+  background-color: #ffffff;
+  color: #1f2937;
+
+  /* Semantic colors */
+  --color-primary: #491dff;
+  --color-primary-content: #d3dbff;
+  --color-secondary: #ff20cc;
+  --color-secondary-content: #fff8fc;
+  --color-accent: #00cfbd;
+  --color-accent-content: #00100d;
+  --color-neutral: #2b3440;
+  --color-neutral-content: #d7dde4;
+
+  /* Base colors */
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-base-content: #1f2937;
+
+  /* Status colors */
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+
+  /* ── Roundness ── */
+  --rounded-box: 16px;
+  --rounded-btn: 8px;
+  --rounded-badge: 9999px;
+  --rounded-tab: 8px;
+  --rounded-selector: 8px;
+  --rounded-toggle: 9999px;
+
+  /* ── Sizing scale ── */
+  --size-xs: 24px;
+  --size-sm: 32px;
+  --size-md: 48px;
+  --size-lg: 64px;
+
+  /* ── Font sizes ── */
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-md: 14px;
+  --font-lg: 18px;
+
+  /* ── Spacing ── */
+  --padding-btn-xs: 8px;
+  --padding-btn-sm: 12px;
+  --padding-btn-md: 16px;
+  --padding-btn-lg: 24px;
+  --padding-box: 16px;
+  --padding-box-compact: 8px;
+  --gap-box: 8px;
+
+  /* ── Borders ── */
+  --border-btn: 1px;
+  --border-card: 1px;
+
+  /* ── Component-specific sizes ── */
+  --checkbox-xs: 16px;
+  --checkbox-sm: 20px;
+  --checkbox-md: 24px;
+  --checkbox-lg: 32px;
+  --toggle-width-xs: 32px;
+  --toggle-width-sm: 40px;
+  --toggle-width-md: 48px;
+  --toggle-width-lg: 56px;
+  --toggle-height-xs: 22px;
+  --toggle-height-sm: 24px;
+  --toggle-height-md: 28px;
+  --toggle-height-lg: 32px;
+  --toggle-thumb-xs: 14px;
+  --toggle-thumb-sm: 16px;
+  --toggle-thumb-md: 20px;
+  --toggle-thumb-lg: 24px;
+  --badge-xs: 16px;
+  --badge-sm: 20px;
+  --badge-md: 24px;
+  --badge-lg: 32px;
+  --step-indicator: 32px;
+  --progress-height: 8px;
+  --modal-max-width: 400px;
+
+  /* ── Opacity ── */
+  --disabled-opacity: 0.5;
+}