@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.65

package/dist/design-system/themes/aurora/typography/_typography-tokens.scss

@@ -0,0 +1,185 @@
+// NOTE: Google Fonts (Geist) are loaded via <link> tags in nuxt.config.ts app.head
+// (preconnect + stylesheet) instead of a render-blocking CSS @import.
+
+// ============================================================================
+// TYPOGRAPHY TOKENS
+// ============================================================================
+// Typography system for clear, scalable, and consistent interfaces
+// Source: Figma UI Kit Production - Typography v1.0.0
+// File: https://www.figma.com/design/I9lA8XsNx4Tmn9d0dysJ2A/UI-KIT---PRODUCT
+// Frame: Typography (36924:101)
+//
+// Font: Geist
+// Naming: typo/{category}-{size}/{property}
+// Categories: dis (Display), head (Headline), title (Title), label (Label), body (Body)
+// Sizes: lg (Large), md (Medium), sm (Small)
+// Properties: font, sz, line-hg, wg, tracking
+// IMPORTANT: Variable names MUST match Figma exactly:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // DISPLAY (Largest text: Hero sections, marketing pages)
+  // Frame 36924:291 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Display Large - 57/64 Regular (Frame 36924:292)
+  // typo/dis-lg/{property}
+  --er-typo-dis-lg-font: var(--er-font-brand);
+  --er-typo-dis-lg-sz: 57px;
+  --er-typo-dis-lg-line-hg: 64px;
+  --er-typo-dis-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-lg-tracking: -0.25px;
+
+  // Display Medium - 45/52 Regular (Frame 36924:299)
+  // typo/dis-md/{property}
+  --er-typo-dis-md-font: var(--er-font-brand);
+  --er-typo-dis-md-sz: 45px;
+  --er-typo-dis-md-line-hg: 52px;
+  --er-typo-dis-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-md-tracking: 0;
+
+  // Display Small - 36/44 Regular (Frame 36924:306)
+  // typo/dis-sm/{property}
+  --er-typo-dis-sm-font: var(--er-font-brand);
+  --er-typo-dis-sm-sz: 36px;
+  --er-typo-dis-sm-line-hg: 44px;
+  --er-typo-dis-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // HEADLINE (Page titles, section headers)
+  // Frame 36924:313 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Headline Large - 32/40 Regular (Frame 36924:313)
+  // typo/head-lg/{property}
+  --er-typo-head-lg-font: var(--er-font-brand);
+  --er-typo-head-lg-sz: 32px;
+  --er-typo-head-lg-line-hg: 40px;
+  --er-typo-head-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-lg-tracking: 0;
+
+  // Headline Medium - 28/36 Regular (Frame 36924:320)
+  // typo/head-md/{property}
+  --er-typo-head-md-font: var(--er-font-brand);
+  --er-typo-head-md-sz: 28px;
+  --er-typo-head-md-line-hg: 36px;
+  --er-typo-head-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-md-tracking: 0;
+
+  // Headline Small - 24/32 Regular (Frame 36924:327)
+  // typo/head-sm/{property}
+  --er-typo-head-sm-font: var(--er-font-brand);
+  --er-typo-head-sm-sz: 24px;
+  --er-typo-head-sm-line-hg: 32px;
+  --er-typo-head-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TITLE (Card titles, dialog headers, component headings)
+  // Frame 36924:334 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Title Large - 20/28 Regular (Frame 36924:334)
+  // typo/title-lg/{property}
+  --er-typo-title-lg-font: var(--er-font-brand);
+  --er-typo-title-lg-sz: 20px;
+  --er-typo-title-lg-line-hg: 28px;
+  --er-typo-title-lg-wg: var(--er-wg-semi); // Semi
+  --er-typo-title-lg-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-title-lg-tracking: 0;
+
+  // Title Medium - 16/24 Medium (Frame 36924:341)
+  // typo/title-md/{property}
+  --er-typo-title-md-font: var(--er-font-brand);
+  --er-typo-title-md-sz: 16px;
+  --er-typo-title-md-line-hg: 24px;
+  --er-typo-title-md-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-md-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-md-tracking: 0.15px;
+
+  // Title Small - 14/20 Medium (Frame 36924:348)
+  // typo/title-sm/{property}
+  --er-typo-title-sm-font: var(--er-font-brand);
+  --er-typo-title-sm-sz: 14px;
+  --er-typo-title-sm-line-hg: 20px;
+  --er-typo-title-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-sm-tracking: 0.1px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // LABEL (Form labels, button text, badges, chips)
+  // Frame 36924:355 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Label Large - 14/20 Medium (Frame 36924:355)
+  // typo/label-lg/{property}
+  --er-typo-label-lg-font: var(--er-font-brand);
+  --er-typo-label-lg-sz: 14px;
+  --er-typo-label-lg-line-hg: 20px;
+  --er-typo-label-lg-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-lg-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-lg-tracking: 0.1px;
+
+  // Label Medium - 12/16 Medium (Frame 36924:362)
+  // typo/label-md/{property}
+  --er-typo-label-md-font: var(--er-font-brand);
+  --er-typo-label-md-sz: 12px;
+  --er-typo-label-md-line-hg: 16px;
+  --er-typo-label-md-wg: var(--er-wg-semi); // Semi Bold
+  --er-typo-label-md-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-label-md-tracking: 0.5px;
+
+  // Label Small - 11/16 Medium (Frame 36924:369)
+  // typo/label-sm/{property}
+  --er-typo-label-sm-font: var(--er-font-brand);
+  --er-typo-label-sm-sz: 11px;
+  --er-typo-label-sm-line-hg: 16px;
+  --er-typo-label-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-sm-tracking: 0.5px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BODY (Paragraphs, descriptions, table content)
+  // Frame 36924:376 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Body Large - 16/24 Regular (Frame 36924:376)
+  // typo/body-lg/{property}
+  --er-typo-body-lg-font: var(--er-font-brand);
+  --er-typo-body-lg-sz: 16px;
+  --er-typo-body-lg-line-hg: 24px;
+  --er-typo-body-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-lg-tracking: 0.5px;
+
+  // Body Medium - 14/20 Regular (Frame 36924:383)
+  // typo/body-md/{property}
+  --er-typo-body-md-font: var(--er-font-brand);
+  --er-typo-body-md-sz: 14px;
+  --er-typo-body-md-line-hg: 20px;
+  --er-typo-body-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-md-tracking: 0.25px;
+
+  // Body Small - 12/16 Regular (Frame 36924:390)
+  // typo/body-sm/{property}
+  --er-typo-body-sm-font: var(--er-font-brand);
+  --er-typo-body-sm-sz: 12px;
+  --er-typo-body-sm-line-hg: 16px;
+  --er-typo-body-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-sm-tracking: 0.4px;
+}

package/dist/design-system/themes/aurora/typography/_typography-utils.scss

@@ -0,0 +1,375 @@
+// ============================================================================
+// TYPOGRAPHY UTILITIES
+// ============================================================================
+// Helper mixins and classes for applying typography tokens
+// Usage:
+//   @use '../typography/typography-utils' as typo;
+//   .my-element { @include typo.display-lg; }
+// Or use CSS classes directly: <h1 class="typo-dis-lg">
+//
+// IMPORTANT: Uses Figma naming convention:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// MIXINS - Use in SCSS
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display styles
+@mixin display-lg {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-lg-em {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg-em);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-md {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-md-em {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg-em);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-sm {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+@mixin display-sm-em {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg-em);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+// Headline styles
+@mixin headline-lg {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-lg-em {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg-em);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-md {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-md-em {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg-em);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-sm {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+@mixin headline-sm-em {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg-em);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+// Title styles
+@mixin title-lg {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  line-height: var(--er-typo-title-lg-line-hg);
+  font-weight: var(--er-typo-title-lg-wg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-lg-em {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  font-weight: var(--er-typo-title-lg-wg-em);
+  line-height: var(--er-typo-title-lg-line-hg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-md {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-md-em {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg-em);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-sm {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+@mixin title-sm-em {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg-em);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+// Label styles
+@mixin label-lg {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-lg-em {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg-em);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-md {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-md-em {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg-em);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-sm {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+@mixin label-sm-em {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg-em);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+// Body styles
+@mixin body-lg {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-lg-em {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg-em);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md-em {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg-em);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm-em {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg-em);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// UTILITY CLASSES - Use in HTML
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display classes
+.typo-dis-lg {
+  @include display-lg;
+}
+.typo-dis-lg-em {
+  @include display-lg-em;
+}
+.typo-dis-md {
+  @include display-md;
+}
+.typo-dis-md-em {
+  @include display-md-em;
+}
+.typo-dis-sm {
+  @include display-sm;
+}
+.typo-dis-sm-em {
+  @include display-sm-em;
+}
+
+// Headline classes
+.typo-head-lg {
+  @include headline-lg;
+}
+.typo-head-lg-em {
+  @include headline-lg-em;
+}
+.typo-head-md {
+  @include headline-md;
+}
+.typo-head-md-em {
+  @include headline-md-em;
+}
+.typo-head-sm {
+  @include headline-sm;
+}
+.typo-head-sm-em {
+  @include headline-sm-em;
+}
+
+// Title classes
+.typo-title-lg {
+  @include title-lg;
+}
+.typo-title-lg-em {
+  @include title-lg-em;
+}
+.typo-title-md {
+  @include title-md;
+}
+.typo-title-md-em {
+  @include title-md-em;
+}
+.typo-title-sm {
+  @include title-sm;
+}
+.typo-title-sm-em {
+  @include title-sm-em;
+}
+
+// Label classes
+.typo-label-lg {
+  @include label-lg;
+}
+.typo-label-lg-em {
+  @include label-lg-em;
+}
+.typo-label-md {
+  @include label-md;
+}
+.typo-label-md-em {
+  @include label-md-em;
+}
+.typo-label-sm {
+  @include label-sm;
+}
+.typo-label-sm-em {
+  @include label-sm-em;
+}
+
+// Body classes
+.typo-body-lg {
+  @include body-lg;
+}
+.typo-body-lg-em {
+  @include body-lg-em;
+}
+.typo-body-md {
+  @include body-md;
+}
+.typo-body-md-em {
+  @include body-md-em;
+}
+.typo-body-sm {
+  @include body-sm;
+}
+.typo-body-sm-em {
+  @include body-sm-em;
+}

package/dist/design-system/themes/core/bridges/_element-plus-bridge.scss

@@ -0,0 +1,82 @@
+// ============================================================================
+// ELEMENT PLUS BRIDGE
+// ============================================================================
+// Maps EAERA Design System tokens (--er-*) to Element Plus CSS variables (--el-*)
+// IMPORTANT: Only uses colors from Layer 3 Component Tokens
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // GLOBAL COLORS (from Layer 3)
+  // ─────────────────────────────────────────────────────────────────────────
+  // Primary semantic colors
+  --el-color-primary: var(--er-action-primary-default); // #3B82F6 (primary-500)
+  --el-color-success: var(--er-text-success); // #10B981 (success-500)
+  --el-color-warning: var(--er-text-warning); // #F59E0B (warning-500)
+  --el-color-danger: var(--er-text-danger); // #EF4444 (danger-500)
+  --el-color-error: var(--er-text-danger); // #EF4444 (danger-500)
+  --el-color-info: var(--er-text-information); // #0EA5E9 (information-500)
+
+  // Background colors
+  --el-bg-color: var(--er-surface-page); // #FFFFFF (neutral-white)
+  --el-bg-color-page: var(--er-surface-page); // #FFFFFF (neutral-white)
+
+  // Fill colors — component canvas / quiet fills. EP defaults are fixed light
+  // values (#fff, #f5f7fa…); unmapped, every fill consumer (el-descriptions
+  // body & bordered labels, el-card, el-table body) stays white in dark mode.
+  // Mapped tokens flip under html.dark (surface/container = neutral-900) or
+  // are alpha-based, so both themes resolve.
+  --el-fill-color-blank: var(--er-surface-container); // el-descriptions body, el-card/table canvas
+  --el-fill-color: var(--er-surface-subtle); // hover fills
+  --el-fill-color-light: var(--er-surface-neutral-subtle); // el-descriptions bordered label bg
+  --el-fill-color-lighter: var(--er-surface-subtle);
+  --el-fill-color-extra-light: var(--er-surface-container);
+  --el-fill-color-dark: var(--er-surface-muted);
+  --el-fill-color-darker: var(--er-surface-muted);
+
+  // Border colors — same class of bug: EP ships fixed light greys
+  // (#dcdfe6…#ebeef5). Mapped er tokens are alpha-based (#11161C light /
+  // #F8F9FB dark at 8–24% opacity), visually equivalent in light mode and
+  // correct on dark surfaces.
+  --el-border-color: var(--er-border-default);
+  --el-border-color-light: var(--er-border-default);
+  --el-border-color-lighter: var(--er-border-subtle); // el-descriptions table borders
+  --el-border-color-extra-light: var(--er-border-subtle);
+  --el-border-color-dark: var(--er-border-strong);
+  --el-border-color-darker: var(--er-border-strong);
+
+  // Floating-panel background (dropdown menus, select poppers, popconfirm,
+  // tooltips). EP defaults this to #ffffff and it was never mapped, so every
+  // overlay panel washed out white in dark mode. surface/elevated resolves to
+  // #FFFFFF (light) / #18181B (dark).
+  --el-bg-color-overlay: var(--er-surface-elevated);
+
+  // Overlay / loading mask — white in light mode; overridden to neutral-950 in
+  // dark mode (themes/_dark-mode.scss). Fixes the white loading washout.
+  --el-mask-color: rgba(255, 255, 255, 0.9);
+
+  // Text colors — EP defaults these to light-mode values (#303133, #606266,
+  // #909399, #a8abb2). Without mapping, every overlay (dropdowns, selects,
+  // popconfirm) shows light grey/white text on the dark elevated surface.
+  --el-text-color-primary: var(--er-text-primary);
+  --el-text-color-regular: var(--er-text-secondary);
+  --el-text-color-secondary: var(--er-text-muted);
+  --el-text-color-placeholder: var(--er-text-muted);
+  --el-text-color-disabled: var(--er-text-muted);
+
+  // Disabled state
+  --el-disabled-bg-color: var(--er-surface-muted); // #A1A1AA (neutral-400)
+  --el-disabled-text-color: var(--er-text-muted); // #D4D4D8 (neutral-300)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION (from elevation tokens)
+  // ─────────────────────────────────────────────────────────────────────────
+  --el-box-shadow: var(--er-elevation-soft-down); // Default shadow
+  --el-box-shadow-light: var(--er-elevation-soft-down);
+  --el-box-shadow-dark: var(--er-elevation-strong-down);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TYPOGRAPHY (font family only, from Layer 3)
+  // ─────────────────────────────────────────────────────────────────────────
+  --el-font-family: var(--er-font-brand);
+}