@techsio/ui-kit 0.10.1 → 0.12.0

package/src/tokens/components/molecules/_radio-card.css

@@ -1,196 +1,7 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-radio-card-accent: var(--color-primary);
-  --color-radio-card-accent-hover: var(--color-primary-hover);
-  --color-radio-card-accent-light: var(--color-primary-light);
-  --color-radio-card-accent-light-hover: var(--color-primary-light-hover);
-  --color-radio-card-accent-contrast: var(--color-fg-light);
-  --color-radio-card-danger: var(--color-danger);
-  --color-radio-card-fg: var(--color-fg-primary);
-  --color-radio-card-fg-secondary: var(--color-fg-secondary);
-  --color-radio-card-fg-disabled: var(--color-fg-disabled);
-  --color-radio-card-surface: var(--color-surface);
-  --color-radio-card-border: var(--color-border-primary);
-
-  /* === DERIVED COLORS === */
-  --color-radio-card-item-bg: var(--color-radio-card-surface);
-  --color-radio-card-item-border: var(--color-radio-card-border);
-  --color-radio-card-item-fg: var(--color-radio-card-fg);
-  --color-radio-card-item-description-fg: var(--color-radio-card-fg-secondary);
-  --color-radio-card-item-addon-border: var(--color-radio-card-border);
-  --color-radio-card-item-addon-fg: var(--color-radio-card-fg-secondary);
-  --color-radio-card-item-indicator-border: var(--color-radio-card-border);
-  --color-radio-card-item-indicator-bg: transparent;
-  --color-radio-card-item-indicator-content-fg: var(--color-radio-card-accent);
-
-  /* === STATE VARIATIONS === */
-  --color-radio-card-item-bg-hover: oklch(
-    from var(--color-radio-card-item-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-radio-card-item-border-hover: oklch(
-    from var(--color-radio-card-item-border) calc(l + var(--state-hover)) c h
-  );
-
-  /* === COMPONENT VARIANTS === */
-  --color-radio-card-item-bg-outline-checked: var(--color-radio-card-item-bg);
-  --color-radio-card-item-bg-outline-checked-hover: var(
-    --color-radio-card-item-bg-hover
-  );
-  --color-radio-card-item-border-outline-checked: var(
-    --color-radio-card-accent
-  );
-  --color-radio-card-item-border-outline-checked-hover: var(
-    --color-radio-card-accent-hover
-  );
-  --color-radio-card-item-indicator-border-outline-checked: var(
-    --color-radio-card-accent
-  );
-  --color-radio-card-item-indicator-content-fg-outline-checked: var(
-    --color-radio-card-accent
-  );
-
-  --color-radio-card-item-bg-subtle-checked: var(
-    --color-radio-card-accent-light
-  );
-  --color-radio-card-item-bg-subtle-checked-hover: var(
-    --color-radio-card-accent-light-hover
-  );
-  --color-radio-card-item-border-subtle-checked: var(
-    --color-radio-card-accent-light
-  );
-  --color-radio-card-item-border-subtle-checked-hover: var(
-    --color-radio-card-accent-light-hover
-  );
-  --color-radio-card-item-fg-subtle-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-description-fg-subtle-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-addon-border-subtle-checked: var(
-    --color-radio-card-accent-light-hover
-  );
-  --color-radio-card-item-addon-fg-subtle-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-indicator-border-subtle-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-indicator-content-fg-subtle-checked: var(
-    --color-radio-card-accent-contrast
-  );
-
-  --color-radio-card-item-bg-solid-checked: var(--color-radio-card-accent);
-  --color-radio-card-item-bg-solid-checked-hover: var(
-    --color-radio-card-accent-hover
-  );
-  --color-radio-card-item-border-solid-checked: var(--color-radio-card-accent);
-  --color-radio-card-item-border-solid-checked-hover: var(
-    --color-radio-card-accent-hover
-  );
-  --color-radio-card-item-fg-solid-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-description-fg-solid-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-addon-border-solid-checked: var(
-    --color-radio-card-accent-hover
-  );
-  --color-radio-card-item-addon-fg-solid-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-indicator-bg-solid-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-indicator-border-solid-checked: var(
-    --color-radio-card-accent-contrast
-  );
-  --color-radio-card-item-indicator-content-fg-solid-checked: var(
-    --color-radio-card-accent
-  );
-
-  /* === VALIDATION STATES === */
-  --color-radio-card-item-border-error: var(--color-radio-card-danger);
-
-  /* === DISABLED STATES === */
-  --color-radio-card-item-bg-disabled: var(--color-bg-disabled);
-  --color-radio-card-item-border-disabled: var(--color-border-disabled);
-  --color-radio-card-item-fg-disabled: var(--color-radio-card-fg-disabled);
-  --color-radio-card-item-description-fg-disabled: var(
-    --color-radio-card-fg-disabled
-  );
-  --color-radio-card-item-addon-bg-disabled: var(--color-bg-disabled);
-  --color-radio-card-item-addon-border-disabled: var(--color-border-disabled);
-  --color-radio-card-item-addon-fg-disabled: var(
-    --color-radio-card-fg-disabled
-  );
-  --color-radio-card-item-indicator-border-disabled: var(
-    --color-radio-card-item-border-disabled
-  );
-  --color-radio-card-item-indicator-bg-disabled: transparent;
-  --color-radio-card-item-indicator-content-fg-disabled: var(
-    --color-radio-card-fg-disabled
-  );
-
-  /* === SPACING === */
-  --gap-radio-card-root-sm: var(--spacing-100);
-  --gap-radio-card-root-md: var(--spacing-150);
-  --gap-radio-card-root-lg: var(--spacing-200);
-
-  --gap-radio-card-item-control-sm: var(--spacing-100);
-  --gap-radio-card-item-control-md: var(--spacing-150);
-  --gap-radio-card-item-control-lg: var(--spacing-200);
-
-  --gap-radio-card-item-content-sm: var(--spacing-50);
-  --gap-radio-card-item-content-md: var(--spacing-100);
-  --gap-radio-card-item-content-lg: var(--spacing-100);
-
-  --padding-radio-card-item-control-sm: var(--spacing-150);
-  --padding-radio-card-item-control-md: var(--spacing-200);
-  --padding-radio-card-item-control-lg: var(--spacing-250);
-
-  --padding-radio-card-item-addon-sm: var(--spacing-100);
-  --padding-radio-card-item-addon-md: var(--spacing-150);
-  --padding-radio-card-item-addon-lg: var(--spacing-200);
-
-  --spacing-radio-card-indicator-sm: 1rem;
-  --spacing-radio-card-indicator-md: 1.125rem;
-  --spacing-radio-card-indicator-lg: 1.25rem;
-
-  --spacing-radio-card-indicator-mark-sm: 0.375rem;
-  --spacing-radio-card-indicator-mark-md: 0.5rem;
-  --spacing-radio-card-indicator-mark-lg: 0.625rem;
-
-  /* === TYPOGRAPHY === */
-  --text-radio-card-item-sm: var(--text-sm);
-  --text-radio-card-item-md: var(--text-md);
-  --text-radio-card-item-lg: var(--text-lg);
-
-  --text-radio-card-item-description-sm: var(--text-sm);
-  --text-radio-card-item-description-md: var(--text-sm);
-  --text-radio-card-item-description-lg: var(--text-md);
-
-  --text-radio-card-item-addon-sm: var(--text-xs);
-  --text-radio-card-item-addon-md: var(--text-sm);
-  --text-radio-card-item-addon-lg: var(--text-md);
-
-  --font-weight-radio-card-item: var(--font-weight-medium);
-  --font-weight-radio-card-item-addon: var(--font-weight-medium);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-radio-card: var(--border-width-sm);
-  --border-width-radio-card-addon: var(--border-width-sm);
-  --border-width-radio-card-indicator: var(--border-width-sm);
-  --radius-radio-card-item: var(--radius-md);
-  --radius-radio-card-indicator: var(--radius-full);
-
-  /* === SHADOWS === */
-  --shadow-radio-card-item: var(--shadow-sm);
-
-  /* === FOCUS RINGS === */
-  --color-radio-card-ring: var(--color-ring);
-}
+/*
+ * RadioCard — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ */
 
 @utility token-icon-radio-card-checked {
   @apply token-icon-circle;

package/src/tokens/components/molecules/_radio-group.css

@@ -1,150 +1,14 @@
+/*
+ * RadioGroup — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--radio-group-item-grid` runtime grid template.
+ */
+
 @theme static {
   --radio-group-item-grid: min-content minmax(0, 1fr);
-
-  /* === BASE COLOR MAPPING === */
-  --color-radio-group-accent: var(--color-primary);
-  --color-radio-group-accent-hover: var(--color-primary-hover);
-  --color-radio-group-accent-light: var(--color-primary-light);
-  --color-radio-group-accent-light-hover: var(--color-primary-light-hover);
-  --color-radio-group-accent-contrast: var(--color-fg-dark);
-  --color-radio-group-danger: var(--color-danger);
-  --color-radio-group-fg: var(--color-fg-primary);
-  --color-radio-group-fg-secondary: var(--color-fg-secondary);
-  --color-radio-group-fg-disabled: var(--color-fg-disabled);
-  --color-radio-group-surface: var(--color-fill-active);
-  --color-radio-group-border: var(--color-border-primary);
-
-  /* === DERIVED COLORS === */
-  --color-radio-group-item-control-bg: var(--color-radio-group-surface);
-  --color-radio-group-item-control-border: var(--color-radio-group-border);
-  --color-radio-group-item-indicator: var(--color-radio-group-accent);
-  --color-radio-group-item-fg: var(--color-radio-group-fg);
-  --color-radio-group-item-description: var(--color-radio-group-fg-secondary);
-
-  /* === STATE VARIATIONS === */
-  --color-radio-group-item-control-bg-hover: oklch(
-    from var(--color-radio-group-item-control-bg) calc(l + var(--state-hover)) c
-      h
-  );
-  --color-radio-group-item-control-border-hover: oklch(
-    from var(--color-radio-group-item-control-border)
-      calc(l + var(--state-hover)) c h
-  );
-
-  /* === COMPONENT VARIANTS === */
-  --color-radio-group-item-control-bg-outline-checked: var(
-    --color-radio-group-item-control-bg
-  );
-  --color-radio-group-item-control-bg-outline-checked-hover: var(
-    --color-radio-group-item-control-bg-hover
-  );
-  --color-radio-group-item-control-border-outline-checked: var(
-    --color-radio-group-accent
-  );
-  --color-radio-group-item-control-border-outline-checked-hover: var(
-    --color-radio-group-accent-hover
-  );
-  --color-radio-group-item-indicator-outline: var(
-    --color-radio-group-item-indicator
-  );
-
-  --color-radio-group-item-control-bg-subtle-checked: var(
-    --color-radio-group-accent-light
-  );
-  --color-radio-group-item-control-bg-subtle-checked-hover: var(
-    --color-radio-group-accent-light-hover
-  );
-  --color-radio-group-item-control-border-subtle-checked: var(
-    --color-radio-group-accent-light
-  );
-  --color-radio-group-item-control-border-subtle-checked-hover: var(
-    --color-radio-group-accent-light-hover
-  );
-  --color-radio-group-item-indicator-subtle: var(
-    --color-radio-group-item-indicator
-  );
-
-  --color-radio-group-item-control-bg-solid-checked: var(
-    --color-radio-group-accent
-  );
-  --color-radio-group-item-control-bg-solid-checked-hover: var(
-    --color-radio-group-accent-hover
-  );
-  --color-radio-group-item-control-border-solid-checked: var(
-    --color-radio-group-accent
-  );
-  --color-radio-group-item-control-border-solid-checked-hover: var(
-    --color-radio-group-accent-hover
-  );
-  --color-radio-group-item-indicator-solid: var(
-    --color-radio-group-accent-contrast
-  );
-
-  /* === VALIDATION STATES === */
-  --color-radio-group-item-control-border-error: var(
-    --color-radio-group-danger
-  );
-  --color-radio-group-ring-error: var(--color-radio-group-danger);
-
-  /* === DISABLED STATES === */
-  --color-radio-group-item-control-bg-disabled: var(--color-bg-disabled);
-  --color-radio-group-item-control-border-disabled: var(
-    --color-border-disabled
-  );
-  --color-radio-group-item-indicator-disabled: var(--color-fg-disabled);
-  --color-radio-group-item-fg-disabled: var(--color-radio-group-fg-disabled);
-  --color-radio-group-item-description-disabled: var(
-    --color-radio-group-fg-disabled
-  );
-
-  /* === SPACING === */
-  --gap-radio-group-root-sm: var(--spacing-100);
-  --gap-radio-group-root-md: var(--spacing-150);
-  --gap-radio-group-root-lg: var(--spacing-200);
-
-  --gap-radio-group-items-vertical-sm: var(--spacing-100);
-  --gap-radio-group-items-vertical-md: var(--spacing-150);
-  --gap-radio-group-items-vertical-lg: var(--spacing-200);
-
-  --gap-radio-group-items-horizontal-sm: var(--spacing-150);
-  --gap-radio-group-items-horizontal-md: var(--spacing-250);
-  --gap-radio-group-items-horizontal-lg: var(--spacing-300);
-
-  --gap-radio-group-item-sm: var(--spacing-100);
-  --gap-radio-group-item-md: var(--spacing-150);
-  --gap-radio-group-item-lg: var(--spacing-200);
-
-  --gap-radio-group-item-content-sm: var(--spacing-50);
-  --gap-radio-group-item-content-md: var(--spacing-100);
-  --gap-radio-group-item-content-lg: var(--spacing-100);
-
-  --spacing-radio-group-control-sm: 0.875rem;
-  --spacing-radio-group-control-md: 1rem;
-  --spacing-radio-group-control-lg: 1.125rem;
-  --spacing-radio-group-indicator-sm: 0.5rem;
-  --spacing-radio-group-indicator-md: 0.625rem;
-  --spacing-radio-group-indicator-lg: 0.75rem;
-
-  /* === TYPOGRAPHY === */
-  --text-radio-group-item-sm: var(--text-sm);
-  --text-radio-group-item-md: var(--text-md);
-  --text-radio-group-item-lg: var(--text-lg);
-  --text-radio-group-item-description-sm: var(--text-sm);
-  --text-radio-group-item-description-md: var(--text-sm);
-  --text-radio-group-item-description-lg: var(--text-md);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-radio-group: var(--border-width-sm);
-  --radius-radio-group-control: var(--radius-full);
-
-  /* === SHADOWS === */
-  /* No shadows. */
-
-  /* === FOCUS RINGS === */
-  --color-radio-group-ring: var(--color-ring);
 }
 
-
 @utility token-icon-radio-group-checked {
   @apply token-icon-circle;
 }

package/src/tokens/components/molecules/_search-form.css

@@ -1,14 +1,4 @@
-@theme static {
-  --border-width-search-form: var(--border-width-form-control);
-
-  /* Spacing for stacked layout */
-  --spacing-search-form-sm: var(--spacing-150);
-  --spacing-search-form-md: var(--spacing-200);
-  --spacing-search-form-lg: var(--spacing-250);
-
-  --radius-search-form: var(--radius-form-control);
-  --radius-search-form-sm: var(--radius-form-control-sm);
-  --radius-search-form-md: var(--radius-form-control-md);
-  --radius-search-form-input: 0;
-  --padding-search-form-clear-button: var(--spacing-200);
-}
+/*
+ * SearchForm — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ */

package/src/tokens/components/molecules/_select.css

@@ -1,99 +1,26 @@
+/*
+ * Select — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--color-select-danger` — helper-text color seed (Figma has only
+ *     border validation colors).
+ *   - `--padding-select-item` composite bridge (Figma splits x/y).
+ *   - `--spacing-content` — consumed as a raw var() inside calc() in the
+ *     TSX; aliases Figma's --spacing-select-content.
+ *   - `--z-content` layering (code-side).
+ */
+
 @theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-select: var(--color-form-control-bg);
-  --color-select-accent: var(--color-primary);
   --color-select-danger: var(--color-danger);
-  --color-select-success: var(--color-success);
-  --color-select-warning: var(--color-warning);
-  --color-select-fg: var(--color-fg-primary);
-
-  /* === STATE VARIATIONS === */
-  --color-select-hover: oklch(
-    from var(--color-select) calc(l + var(--state-hover)) c h
-  );
-
-  /* === ROOT === */
-  --gap-select-root: var(--spacing-150);
-
-  /* === TRIGGER === */
-  --color-select-trigger-bg-hover: var(--color-select-hover);
-  --color-select-trigger: var(--color-select-fg);
-  --color-select-trigger-hover: var(--color-select-accent);
-  --color-select-trigger-border-hover: var(--color-form-control-border-hover);
-  --color-select-trigger-border-focus: var(--color-select-accent);
-  --color-select-ring: var(--color-form-control-ring);
-  --padding-select-trigger-sm: var(--padding-input-sm);
-  --padding-select-trigger-md: var(--padding-input-md);
-
-  /* === CLEAR TRIGGER === */
-  --color-select-clear-trigger-fg: var(--color-select-fg);
-  --color-select-clear-trigger-bg: transparent;
-  --padding-select-clear-trigger: var(--spacing-100);
-  --spacing-select-right: var(--spacing-450);
-
-  /* === DROPDOWN CONTENT === */
-  --color-select-content-bg: var(--color-surface);
-  --color-select-content-border: var(--color-border-primary);
-  --shadow-select-content: var(--shadow-md);
-
-  /* === OPTION ITEM === */
-  --color-select-item-bg: transparent;
-  --color-select-item-fg: var(--color-select-fg);
-  --color-select-item-bg-hover: var(--color-select-hover);
-  --color-select-item-bg-selected: oklch(
-    from var(--color-select) calc(l - var(--surface-increment)) c h
-  );
-  --color-select-item-selected-fg: var(--color-select-accent);
-  --padding-select-item: var(--spacing-150) var(--spacing-250);
-
-  /* === INDICATOR === */
-  --color-select-indicator: var(--color-select-accent);
 
-  /* === PLACEHOLDER === */
-  --color-select-placeholder: var(--color-form-control-placeholder);
+  --padding-select-item: var(--padding-select-item-y) var(--padding-select-item-x);
 
-  /* === DISABLED STATES === */
-  --color-select-bg-disabled: var(--color-bg-disabled);
-  --color-select-fg-disabled: var(--color-fg-disabled);
-  --color-select-border-disabled: var(--color-border-disabled);
+  --spacing-content: var(--spacing-select-content);
 
-  /* === SPACING === */
-  --spacing-content: var(--spacing-450);
-
-  /* === TYPOGRAPHY === */
-  /* Trigger typography - size variants */
-  --text-select-trigger-xs: var(--text-xs);
-  --text-select-trigger-sm: var(--text-sm);
-  --text-select-trigger-md: var(--text-md);
-  --text-select-trigger-lg: var(--text-lg);
-
-  /* Item typography - size variants */
-  --text-select-item-xs: var(--text-xs);
-  --text-select-item-sm: var(--text-sm);
-  --text-select-item-md: var(--text-md);
-  --text-select-item-lg: var(--text-lg);
-
-  /* Value text typography - size variants */
-  --text-select-value-xs: var(--text-xs);
-  --text-select-value-sm: var(--text-sm);
-  --text-select-value-md: var(--text-md);
-  --text-select-value-lg: var(--text-lg);
-
-  --text-select-item-group-label-xs: var(--text-xs);
-  --text-select-item-group-label-sm: var(--text-sm);
-  --text-select-item-group-label-md: var(--text-md);
-  --text-select-item-group-label-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-select: var(--border-width-form-control);
-  --radius-select: var(--radius-form-control);
-  --radius-select-sm: var(--radius-form-control-sm);
-  --radius-select-md: var(--radius-form-control-md);
-
-  /* === Z-INDEX === */
   --z-content: 50;
 }
 
+
 /* === ICONS === */
 @utility token-icon-select-indicator {
   @apply token-icon-chevron-down;

package/src/tokens/components/molecules/_slider.css

@@ -1,72 +1,17 @@
-@theme static {
-  --spacing-slider-slim: 2px;
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-slider-primary: var(--color-primary);
-  --color-slider-base: var(--color-surface);
-  --color-slider-error: var(--color-danger);
-  --color-slider-accent: oklch(
-    from var(--color-slider-base) calc(l - var(--surface-increment) * 2) c h
-  );
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-slider-range-bg: var(--color-slider-primary);
-  --color-slider-track-bg: var(--color-slider-base);
-  --color-slider-marker-bg: var(--color-slider-accent);
-  --color-slider-thumb-bg: var(--color-base-light);
-
-  /* Border colors */
-  --color-slider-border: var(--color-border-primary);
-
-  /* === STATE VARIATIONS === */
-  /* Hover states */
-  --color-slider-track-bg-hover: oklch(
-    from var(--color-slider-track-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-slider-range-bg-hover: oklch(
-    from var(--color-slider-range-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-slider-thumb-bg-hover: oklch(
-    from var(--color-slider-thumb-bg) calc(l + var(--state-hover)) c h
-  );
-
-  /* === VALIDATION STATES === */
-  --color-slider-range-bg-error: var(--color-slider-error);
-  --color-slider-border-error: var(--color-slider-error);
-
-  /* === DISABLED STATES === */
-  --color-slider-bg-disabled: var(--color-bg-disabled);
-  --color-slider-thumb-bg-disabled: var(--color-fg-disabled);
-  --color-slider-range-bg-disabled: var(--color-fg-disabled);
-  --color-slider-border-disabled: var(--color-border-disabled);
-
-  /* === SPACING === */
-  --spacing-slider-root: var(--spacing-200);
+/*
+ * Slider — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here (namespace aliases — h-/w- utilities can't read --size-*):
+ *   - track sizes, marker size, vertical marker height.
+ *   - `--padding-marker-text` composite built from the Figma offset.
+ */
 
-  --spacing-slider-thumb-sm: var(--spacing-200);
-  --spacing-slider-thumb-md: var(--spacing-250);
-  --spacing-slider-thumb-lg: var(--spacing-350);
-
-  --spacing-slider-track-sm: var(--spacing-100);
-  --spacing-slider-track-md: var(--spacing-150);
-  --spacing-slider-track-lg: var(--spacing-200);
-
-  --spacing-slider-marker: var(--spacing-slider-slim);
-  --padding-marker-text: 0 0 0 var(--spacing-150);
-
-  /* === TYPOGRAPHY === */
-  --text-slider-value-size: var(--text-sm);
-  --height-marker-vertical: var(--spacing-300);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-slider: var(--border-width-sm);
-  --radius-slider-track: var(--radius-full);
-  --radius-slider-thumb: var(--radius-full);
-
-  /* === SHADOWS === */
-  --shadow-slider-thumb: var(--shadow-sm);
+@theme static {
+  --spacing-slider-track-sm: var(--size-slider-track-sm);
+  --spacing-slider-track-md: var(--size-slider-track-md);
+  --spacing-slider-track-lg: var(--size-slider-track-lg);
 
-  /* === FOCUS RINGS === */
-  --color-slider-ring: var(--color-ring);
+  --spacing-slider-marker: var(--size-slider-marker);
+  --height-marker-vertical: var(--size-slider-marker-vertical-height);
+  --padding-marker-text: 0 0 0 var(--spacing-slider-marker-text);
 }