@eaera-com/eaera-widgets-v2 0.1.80 → 0.1.81

package/dist/design-system/themes/netr/layers/_layer3-tokens.scss

@@ -0,0 +1,242 @@
+// ============================================================================
+// LAYER 3: COMPONENT TOKENS
+// ============================================================================
+// Usage-specific tokens mapped from Layer 2 aliases
+// Source: Figma UI Kit Core - Color Guidance - Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Node: Color Guidance - Component Tokens (36925:1463)
+//
+// IMPORTANT: Only tokens defined in Figma are included here
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION (Buttons, interactive elements)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Action tokens — Primary (Figma: action/primary-*)
+  --er-action-primary-default: var(
+    --er-primary-600
+  ); // Figma: action/primary-default = primary/600
+  --er-action-primary-hover: var(
+    --er-primary-700
+  ); // Figma: action/primary-hover = primary/700
+  --er-action-primary-pressed: var(
+    --er-primary-800
+  ); // Figma: action/primary-pressed = primary/800
+  --er-action-primary-subtle: var(
+    --er-primary-alpha-100
+  ); // Figma: action/primary-subtle = primary alpha/100
+  --er-action-primary-subtle-hover: var(
+    --er-primary-alpha-200
+  ); // Figma: action/primary-subtle-hover = primary alpha/200
+  --er-action-primary-subtle-pressed: var(
+    --er-primary-alpha-300
+  ); // Figma: action/primary-subtle-pressed = primary alpha/300
+
+  // Action tokens — Neutral (Figma: action/neutral-*)
+  --er-action-neutral-default: var(
+    --er-neutral-950
+  ); // Figma: action/neutral-default = neutral/950 = #09090B
+  --er-action-neutral-hover: var(
+    --er-neutral-600
+  ); // Figma: action/neutral-hover = neutral/600 = #52525B
+  --er-action-neutral-pressed: var(
+    --er-neutral-800
+  ); // Figma: action/neutral-pressed = neutral/800 = #27272A
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-white
+  ); // Figma: action/neutral-subtle-default = neutral/white = #FFFFFF
+  --er-action-neutral-subtle-hover: var(
+    --er-neutral-alpha-50
+  ); // Figma: action/neutral-subtle-hover = neutral alpha/50 = #11161C @ 3.92%
+  --er-action-neutral-subtle-pressed: var(
+    --er-neutral-alpha-100
+  ); // Figma: action/neutral-subtle-pressed = neutral alpha/100 = #11161C @ 7.84%
+
+  // Action tokens — Danger (Figma: action/danger-*)
+  --er-action-danger-default: var(
+    --er-danger-600
+  ); // Figma: action/danger-default = danger/600
+  --er-action-danger-hover: var(
+    --er-danger-700
+  ); // Figma: action/danger-hover = danger/700
+  --er-action-danger-pressed: var(
+    --er-danger-800
+  ); // Figma: action/danger-pressed = danger/800
+  --er-action-danger-subtle-default: var(
+    --er-danger-alpha-100
+  ); // Figma: action/danger-subtle-default = danger alpha/100
+  --er-action-danger-subtle-hover: var(
+    --er-danger-alpha-200
+  ); // Figma: action/danger-subtle-hover = danger alpha/200
+  --er-action-danger-subtle-pressed: var(
+    --er-danger-alpha-300
+  ); // Figma: action/danger-subtle-pressed = danger alpha/300
+
+  // Action tokens — Success (local extension — not in Figma UI Kit, mirrors danger)
+  --er-action-success-default: var(
+    --er-success-default
+  ); // action/success-default = success/default = #10B981
+  --er-action-success-hover: var(
+    --er-success-600
+  ); // action/success-hover = success/600 = #059669
+  --er-action-success-pressed: var(
+    --er-success-700
+  ); // action/success-pressed = success/700 = #047857
+  --er-action-success-subtle-default: var(
+    --er-success-alpha-50
+  ); // action/success-subtle-default = success alpha/50 = #10B981 @ 3.92%
+  --er-action-success-subtle-hover: var(
+    --er-success-alpha-100
+  ); // action/success-subtle-hover = success alpha/100 = #10B981 @ 7.84%
+  --er-action-success-subtle-pressed: var(
+    --er-success-alpha-200
+  ); // action/success-subtle-pressed = success alpha/200 = #10B981 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE (Backgrounds, cards, panels)
+  // Frame 36984:1625 - Surface section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(
+    --er-neutral-white
+  ); // Figma: surface/page = neutral/white = #FFFFFF (main app canvas)
+  --er-surface-container: var(
+    --er-neutral-white
+  ); // Figma: surface/container = neutral/white = #FFFFFF (cards, panels)
+  --er-surface-elevated: var(
+    --er-neutral-white
+  ); // Figma: surface/elevated = neutral/white = #FFFFFF (modals, dropdowns, tooltips)
+  --er-surface-subtle: var(
+    --er-neutral-50
+  ); // Figma: surface/subtle = neutral/50 = #FAFAFA (alternating rows, quiet sections)
+  --er-surface-muted: var(
+    --er-neutral-100
+  ); // Figma: surface/muted = neutral/100 = #F4F4F5 (default/neutral tag bg)
+  --er-surface-track: var(
+    --er-neutral-100
+  ); // Figma: surface/track = elevation/50 = #F8F9FB @ 3.92%
+  --er-surface-inverse: var(
+    --er-neutral-900
+  ); // Figma: surface/inverse = neutral/900 = #18181B (dark headers, inverted sections)
+  --er-surface-neutral-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: surface/neutral-subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-surface-brand-subtle: var(
+    --er-primary-alpha-100
+  ); // Figma: surface/brand-subtle = primary alpha/100 = #F97316 @ 7.84%
+  --er-surface-success-subtle: var(
+    --er-success-alpha-100
+  ); // Figma: surface/success-subtle = success alpha/100 = #10B981 @ 7.84%
+  --er-surface-warning-subtle: var(
+    --er-warning-alpha-100
+  ); // Figma: surface/warning-subtle = warning alpha/100 = #F59E0B @ 7.84%
+  --er-surface-danger-subtle: var(
+    --er-danger-alpha-100
+  ); // Figma: surface/danger-subtle = danger alpha/100 = #EF4444 @ 7.84%
+  --er-surface-information-subtle: var(
+    --er-information-alpha-100
+  ); // Figma: surface/information-subtle = information alpha/100 = #0EA5E9 @ 7.84%
+  --er-surface-fixed-white: var(
+    --er-neutral-white
+  ); // Figma: surface/fixed-white = neutral/white = #FFFFFF
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT (Typography, labels, content)
+  // Frame 36984:1701 - Text section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: text/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-text-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: text/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-text-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: text/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-text-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: text/muted = neutral alpha/600 = #11161C @ 40%
+  --er-text-inverse: var(--er-neutral-50); // Figma: text/inverse = neutral/50 = #FAFAFA
+  --er-text-brand: var(--er-primary-600); // Figma: text/brand = primary/600
+  --er-text-on-action: var(--er-neutral-50); // Figma: text/on-action = neutral/50 = #FAFAFA
+  --er-text-success: var(--er-success-700); // Figma: text/success = success/700
+  --er-text-warning: var(--er-warning-700); // Figma: text/warning = warning/700
+  --er-text-danger: var(--er-danger-700); // Figma: text/danger = danger/700
+  --er-text-information: var(
+    --er-information-700
+  ); // Figma: text/information = information/700
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON (Icons, decorative elements)
+  // Frame 36984:1770 - Icon section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: icon/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-icon-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: icon/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-icon-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: icon/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-icon-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: icon/muted = neutral alpha/600 = #11161C @ 40%
+  --er-icon-inverse: var(--er-neutral-50); // Figma: icon/inverse = neutral/50 = #FAFAFA
+  --er-icon-brand: var(--er-primary-600); // Figma: icon/brand = primary/600
+  --er-icon-on-action: var(--er-neutral-50); // Figma: icon/on-action = neutral/50 = #FAFAFA
+  --er-icon-success: var(--er-success-700); // Figma: icon/success = success/700
+  --er-icon-warning: var(--er-warning-700); // Figma: icon/warning = warning/700
+  --er-icon-danger: var(--er-danger-700); // Figma: icon/danger = danger/700
+  --er-icon-information: var(
+    --er-information-700
+  ); // Figma: icon/information = information/700
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER (Borders, outlines, dividers)
+  // Frame 36984:1817 - Border section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(
+    --er-neutral-alpha-200
+  ); // Figma: border/default = neutral alpha/200 = #11161C @ 12.16%
+  --er-border-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: border/subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-border-strong: var(
+    --er-neutral-alpha-400
+  ); // Figma: border/strong = neutral alpha/400 = #11161C @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // Figma: border/on-action = neutral/50 = #FAFAFA
+  --er-border-brand: var(--er-primary-default); // Figma: border/brand = primary/default = #F97316
+  --er-border-brand-subtle: var(
+    --er-primary-alpha-300
+  ); // Figma: border/brand-subtle = primary alpha/300 = #F97316 @ 20%
+  --er-border-success: var(--er-success-default); // Figma: border/success = success/default = #10B981
+  --er-border-success-subtle: var(
+    --er-success-alpha-300
+  ); // Figma: border/success-subtle = success alpha/300 = #10B981 @ 20%
+  --er-border-warning: var(--er-warning-default); // Figma: border/warning = warning/default = #F59E0B
+  --er-border-warning-subtle: var(
+    --er-warning-alpha-300
+  ); // Figma: border/warning-subtle = warning alpha/300 = #F59E0B @ 20%
+  --er-border-danger: var(--er-danger-default); // Figma: border/danger = danger/default = #EF4444
+  --er-border-danger-subtle: var(
+    --er-danger-alpha-300
+  ); // Figma: border/danger-subtle = danger alpha/300 = #EF4444 @ 20%
+  --er-border-information: var(
+    --er-information-default
+  ); // Figma: border/information = information/default = #0EA5E9
+  --er-border-information-subtle: var(
+    --er-information-alpha-300
+  ); // Figma: border/information-subtle = information alpha/300 = #0EA5E9 @ 20%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(--er-action-neutral-subtle-hover);
+  --er-component-segmented-item-active: var(
+    --er-action-neutral-subtle-default
+  ); // segmented item active = action/neutral-subtle-default
+  --er-surface-overlay: rgb(0, 0, 0, 0.5);
+}

package/dist/design-system/themes/netr/themes/_dark-mode.scss

@@ -0,0 +1,177 @@
+// ============================================================================
+// DARK MODE TOKEN OVERRIDES
+// ============================================================================
+// Source: Figma UI Kit Core — Color Guidance — Dark Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Nodes:
+//   action  — 40424:8223
+//   surface — 40424:8245
+//   text    — 40424:8258
+//   icon    — 40424:8271
+//   border  — 40424:8283
+//
+// Applied when:
+//   - html.dark          (global preference)
+//   - [data-theme="dark"] (attribute-based)
+//   - .dark              (class-based — used by showcase toggle)
+// ============================================================================
+
+html.dark,
+[data-theme='dark'],
+.dark {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION
+  // ─────────────────────────────────────────────────────────────────────────
+  // Primary action — unchanged between light/dark
+  --er-action-primary-default: var(--er-primary-600); // primary/600 (same as light)
+  --er-action-primary-hover: var(--er-primary-700); // primary/700 (same as light)
+  --er-action-primary-pressed: var(--er-primary-800); // primary/800 (same as light)
+
+  // Primary subtle — raised alpha steps for dark backgrounds
+  --er-action-primary-subtle: var(--er-primary-alpha-300); // primary alpha/300
+  --er-action-primary-subtle-hover: var(--er-primary-alpha-400); // primary alpha/400
+  --er-action-primary-subtle-pressed: var(--er-primary-alpha-500); // primary alpha/500
+
+  // Neutral action — inverted from dark to light
+  --er-action-neutral-default: var(
+    --er-neutral-white
+  ); // neutral/white = #FFFFFF (light: neutral/950)
+  --er-action-neutral-hover: var(--er-neutral-100); // neutral/100 = #F4F4F5 (light: neutral/600)
+  --er-action-neutral-pressed: var(--er-neutral-300); // neutral/300 = #D4D4D8 (light: neutral/800)
+
+  // Neutral subtle — black base + elevation (white alpha) overlays
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-black
+  ); // neutral/black = #000000 (light: neutral/white)
+  --er-action-neutral-subtle-hover: var(
+    --er-elevation-50
+  ); // elevation/50 = #F8F9FB @ 3.92% (light: neutral alpha/50)
+  --er-action-neutral-subtle-pressed: var(
+    --er-elevation-100
+  ); // elevation/100 = #F8F9FB @ 7.84% (light: neutral alpha/100)
+
+  // Danger action
+  --er-action-danger-default: var(--er-danger-600); // danger/600 (same as light)
+  --er-action-danger-hover: var(--er-danger-700); // danger/700 (same as light)
+  --er-action-danger-pressed: var(--er-danger-800); // danger/800 (same as light)
+
+  // Danger subtle — raised alpha steps for dark backgrounds
+  --er-action-danger-subtle-default: var(--er-danger-alpha-300); // danger alpha/300
+  --er-action-danger-subtle-hover: var(--er-danger-alpha-400); // danger alpha/400
+  --er-action-danger-subtle-pressed: var(--er-danger-alpha-500); // danger alpha/500
+
+  // Success action — shifted to -600/-700/-800 in dark mode for better contrast (mirrors danger)
+  --er-action-success-default: var(--er-success-600); // success/600 = #059669 (light: success/500)
+  --er-action-success-hover: var(--er-success-700); // success/700 = #047857 (light: success/600)
+  --er-action-success-pressed: var(--er-success-800); // success/800 = #065F46 (light: success/700)
+
+  // Success subtle — unchanged (alpha-based, works on dark)
+  --er-action-success-subtle-default: var(--er-success-alpha-50); // success alpha/50 @ 3.92%
+  --er-action-success-subtle-hover: var(--er-success-alpha-100); // success alpha/100 @ 7.84%
+  --er-action-success-subtle-pressed: var(--er-success-alpha-200); // success alpha/200 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(--er-neutral-950); // surface/page = neutral/950 = #09090B
+  --er-surface-container: var(--er-neutral-900); // surface/container = neutral/900 = #18181B
+  --er-surface-elevated: var(--er-neutral-800); // surface/elevated = neutral/800 = #27272A
+  --er-surface-subtle: var(--er-neutral-800); // surface/subtle = neutral/800 = #27272A
+  --er-surface-muted: var(--er-neutral-700); // surface/muted = neutral/700 = #3F3F46
+  --er-surface-track: var(--er-elevation-100); // surface/track = elevation/50 (unchanged)
+  --er-surface-inverse: var(--er-neutral-50); // surface/inverse = neutral/50 = #FAFAFA
+
+  // Subtle surfaces — unchanged (alpha-based, work on dark)
+  --er-surface-neutral-subtle: var(--er-elevation-100); // surface/neutral-subtle = elevation/100 = #F8F9FB @ 7.84%
+  --er-surface-brand-subtle: var(--er-primary-alpha-100); // primary alpha/100 (unchanged)
+  --er-surface-success-subtle: var(--er-success-alpha-100); // success alpha/100 (unchanged)
+  --er-surface-warning-subtle: var(--er-warning-alpha-100); // warning alpha/100 (unchanged)
+  --er-surface-danger-subtle: var(--er-danger-alpha-100); // danger alpha/100 (unchanged)
+  --er-surface-information-subtle: var(--er-information-alpha-100); // information alpha/100 (unchanged)
+
+  // Fixed white — never changes between light/dark
+  --er-surface-fixed-white: var(--er-neutral-white); // always #FFFFFF
+
+  // Overlay / loading mask — dark translucent overlay so `.el-loading-mask`
+  // (v-loading / ElLoading) no longer washes out to white in dark mode.
+  // Maps to neutral/950 = #09090B at 90% (matches light-mode opacity).
+  --el-mask-color: rgba(9, 9, 11, 0.9);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(--er-elevation-950); // text/primary = elevation/950 = #F8F9FB @ 96.08%
+  --er-text-secondary: var(--er-elevation-800); // text/secondary = elevation/800 @ 72.16%
+  --er-text-tertiary: var(--er-elevation-600); // text/tertiary = elevation/600 @ 40%
+  --er-text-muted: var(--er-elevation-600); // text/muted = elevation/600 @ 40%
+  --er-text-inverse: var(--er-neutral-900); // text/inverse = neutral/900 = #18181B
+  --er-text-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-text-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-text-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-text-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-text-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-text-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(--er-elevation-950); // icon/primary = elevation/950
+  --er-icon-secondary: var(--er-elevation-800); // icon/secondary = elevation/800
+  --er-icon-tertiary: var(--er-elevation-700); // icon/tertiary = elevation/700 @ 56.08%
+  --er-icon-muted: var(--er-elevation-600); // icon/muted = elevation/600 @ 40%
+  --er-icon-inverse: var(--er-neutral-900); // icon/inverse = neutral/900 = #18181B
+  --er-icon-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-icon-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-icon-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-icon-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-icon-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-icon-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(--er-elevation-200); // border/default = elevation/200 = #F8F9FB @ 12.16%
+  --er-border-subtle: var(--er-elevation-100); // border/subtle = elevation/100 @ 7.84%
+  --er-border-strong: var(--er-elevation-400); // border/strong = elevation/400 @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+
+  // Semantic borders — unchanged (alpha-based or solid brand hues)
+  --er-border-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-border-brand-subtle: var(--er-primary-alpha-300); // primary alpha/300 @ 20% (unchanged)
+
+  --er-border-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-border-success-subtle: var(--er-success-alpha-300); // success alpha/300 @ 20% (unchanged)
+
+  --er-border-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-border-warning-subtle: var(--er-warning-alpha-300); // warning alpha/300 @ 20% (unchanged)
+
+  --er-border-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-border-danger-subtle: var(--er-danger-alpha-300); // danger alpha/300 @ 20% (unchanged)
+
+  --er-border-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+  --er-border-information-subtle: var(--er-information-alpha-300); // information alpha/300 @ 20% (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHADOW
+  // ─────────────────────────────────────────────────────────────────────────
+  // Ambient shadows (black with varying opacity)
+  --er-shadow-ambient-01: rgba(0, 0, 0, 0.16); // 16% (light: 4%)
+  --er-shadow-ambient-02: rgba(0, 0, 0, 0.2); // 20% (light: 6%)
+  --er-shadow-ambient-03: rgba(0, 0, 0, 0.24); // 24% (light: 8%)
+  --er-shadow-ambient-04: rgba(0, 0, 0, 0.28); // 28% (light: 10%)
+  --er-shadow-ambient-05: rgba(0, 0, 0, 0.32); // 32% (light: 12%)
+
+  // Highlight shadows (white with varying opacity)
+  --er-shadow-highlight-01: rgba(255, 255, 255, 0.03); // 3% (light: 0%)
+  --er-shadow-highlight-02: rgba(255, 255, 255, 0.05); // 5% (light: 0%)
+  --er-shadow-highlight-03: rgba(255, 255, 255, 0.07); // 7% (light: 0%)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(
+    --er-action-neutral-subtle-hover
+  ); // same as light
+  --er-component-segmented-item-active: var(--er-surface-muted); // surface/muted
+}

package/dist/design-system/themes/netr/tokens/_border-radius.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// BORDER RADIUS TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Corner radius scale
+// Node: 36930:106
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // CORNER RADIUS SCALE (13 values from Figma)
+  // Figma variables: shape/corner/* → SCSS: --er-shape-corner-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-corner-0: 0; // Figma: shape/corner/0 - core 0
+  --er-shape-corner-25: 2px; // Figma: shape/corner/25 - core 2
+  --er-shape-corner-50: 4px; // Figma: shape/corner/50 - core 4
+  --er-shape-corner-75: 6px; // Figma: shape/corner/75 - core 6
+  --er-shape-corner-100: 8px; // Figma: shape/corner/100 - core 8
+  --er-shape-corner-150: 12px; // Figma: shape/corner/150 - core 12
+  --er-shape-corner-200: 16px; // Figma: shape/corner/200 - core 16
+  --er-shape-corner-250: 20px; // Figma: shape/corner/250 - core 20
+  --er-shape-corner-300: 24px; // Figma: shape/corner/300 - core 24
+  --er-shape-corner-350: 28px; // Figma: shape/corner/350 - core 28
+  --er-shape-corner-400: 32px; // Figma: shape/corner/400 - core 32
+  --er-shape-corner-450: 48px; // Figma: shape/corner/450 - core 48
+  --er-shape-corner-full: 1000px; // Figma: shape/corner/full - core 1000, pill/stadium shape (CSS clamps to height/2)
+}

package/dist/design-system/themes/netr/tokens/_control-height.scss

@@ -0,0 +1,18 @@
+// ============================================================================
+// CONTROL / COMPONENT HEIGHT TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Control height scale
+// Values alias the shape/spacing/* scale
+// Version: 1.1.0
+// ============================================================================
+
+:root {
+  --er-control-height-xxs: var(--er-shape-spacing-200); // 16px - Figma: xxs → shape/spacing/200
+  --er-control-height-xs: var(--er-shape-spacing-250); // 20px - Figma: xs → shape/spacing/250
+  --er-control-height-sm: var(--er-shape-spacing-300); // 24px - Figma: sm → shape/spacing/300
+  --er-control-height-md: var(--er-shape-spacing-400); // 32px - Figma: md → shape/spacing/400
+  --er-control-height-lg: var(--er-shape-spacing-500); // 40px - Figma: lg → shape/spacing/500
+  --er-control-height-xl: var(--er-shape-spacing-600); // 48px - Figma: xl → shape/spacing/600
+  --er-control-height-2xl: var(--er-shape-spacing-800); // 64px - Figma: 2xl → shape/spacing/800
+  --er-control-height-3xl: var(--er-shape-spacing-900); // 72px - Figma: 3xl → shape/spacing/900
+}

package/dist/design-system/themes/netr/tokens/_screen-size.scss

@@ -0,0 +1,10 @@
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (13 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-screen-desktop: 1376px;
+  --er-screen-tablet: 744px;
+  --er-screen-lg: 393px;
+}

package/dist/design-system/themes/netr/tokens/_spacing.scss

@@ -0,0 +1,29 @@
+// ============================================================================
+// SPACING TOKENS (Shape / Spacing)
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Spacing scale
+// Node: (from design tokens) — values follow Figma spacing scale
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (14 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-spacing-50: 4px; // Figma: shape/spacing/50 - core 4
+  --er-shape-spacing-75: 6px; // Figma: shape/spacing/75 - core 6
+  --er-shape-spacing-100: 8px; // Figma: shape/spacing/100 - core 8
+  --er-shape-spacing-150: 12px; // Figma: shape/spacing/150 - core 12
+  --er-shape-spacing-200: 16px; // Figma: shape/spacing/200 - core 16
+  --er-shape-spacing-250: 20px; // Figma: shape/spacing/250 - core 20
+  --er-shape-spacing-300: 24px; // Figma: shape/spacing/300 - core 24
+  --er-shape-spacing-400: 32px; // Figma: shape/spacing/400 - core 32
+  --er-shape-spacing-450: 36px; // Figma: shape/spacing/450 - core 36
+  --er-shape-spacing-500: 40px; // Figma: shape/spacing/500 - core 40
+  --er-shape-spacing-600: 48px; // Figma: shape/spacing/600 - core 48
+  --er-shape-spacing-700: 56px; // Figma: shape/spacing/700 - core 56
+  --er-shape-spacing-800: 64px; // Figma: shape/spacing/800 - core 64
+  --er-shape-spacing-900: 72px; // Figma: shape/spacing/900 - core 72
+}

package/dist/design-system/themes/netr/typography/_typography-primitives.scss

@@ -0,0 +1,11 @@
+:root {
+  // typography-primitives.scss
+  --er-font-brand: 'Geist';
+  --er-font-plain: 'Geist';
+
+  --er-font-weight-400: 500;
+  --er-font-weight-500: 500;
+  --er-font-weight-600: 600;
+  --er-font-weight-700: 700;
+  --er-font-weight-800: 800;
+}

package/dist/design-system/themes/netr/typography/_typography-semantic.scss

@@ -0,0 +1,5 @@
+:root{
+  --er-wg-regular: 400;
+  --er-wg-semi: 500;
+  --er-wg-bold: 600;
+}