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

package/dist/design-system/themes/aurora/layers/_layer1-palettes.scss

@@ -214,35 +214,6 @@
   --er-red-alpha-400: #ef444447; // #EF4444 @ 27.84%
   --er-red-alpha-500: #ef444466; // #EF4444 @ 40%
 
-  // ─────────────────────────────────────────────────────────────────────────
-  // ORANGE PALETTE
-  // Source: CORE TOKENS (PUBLISH) — Orange core scale (var-set 9541:64774)
-  // File: https://www.figma.com/design/F4HxJOrQoKf8hs5IWTZphW
-  // ─────────────────────────────────────────────────────────────────────────
-  --er-orange-50: #fff7ed;
-  --er-orange-100: #ffedd5;
-  --er-orange-200: #fed7aa;
-  --er-orange-300: #fdba74;
-  --er-orange-400: #fb923c;
-  --er-orange-500: #f97316; // Base color
-  --er-orange-600: #ea580c;
-  --er-orange-700: #c2410c;
-  --er-orange-800: #9a3412;
-  --er-orange-900: #7c2d12;
-  --er-orange-950: #431407;
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // ORANGE ALPHA PALETTE
-  // Figma: Orange Alpha scale — #F97316 (orange-500) with alpha percentages
-  // ─────────────────────────────────────────────────────────────────────────
-  --er-orange-alpha-50: #f973160a; // #F97316 @ 3.92%
-  --er-orange-alpha-75: #f973160f; // #F97316 @ 6%
-  --er-orange-alpha-100: #f9731614; // #F97316 @ 7.84%
-  --er-orange-alpha-200: #f973161f; // #F97316 @ 12.16%
-  --er-orange-alpha-300: #f9731633; // #F97316 @ 20%
-  --er-orange-alpha-400: #f9731647; // #F97316 @ 27.84%
-  --er-orange-alpha-500: #f9731666; // #F97316 @ 40%
-
   // ─────────────────────────────────────────────────────────────────────────
   // SKY CYAN PALETTE (Information)
   // Frame ID: 36985:66

package/dist/design-system/themes/core/layers/_layer1-palettes.scss

@@ -214,35 +214,6 @@
   --er-red-alpha-400: #ef444447; // #EF4444 @ 27.84%
   --er-red-alpha-500: #ef444466; // #EF4444 @ 40%
 
-  // ─────────────────────────────────────────────────────────────────────────
-  // ORANGE PALETTE
-  // Source: CORE TOKENS (PUBLISH) — Orange core scale (var-set 9541:64774)
-  // File: https://www.figma.com/design/F4HxJOrQoKf8hs5IWTZphW
-  // ─────────────────────────────────────────────────────────────────────────
-  --er-orange-50: #fff7ed;
-  --er-orange-100: #ffedd5;
-  --er-orange-200: #fed7aa;
-  --er-orange-300: #fdba74;
-  --er-orange-400: #fb923c;
-  --er-orange-500: #f97316; // Base color
-  --er-orange-600: #ea580c;
-  --er-orange-700: #c2410c;
-  --er-orange-800: #9a3412;
-  --er-orange-900: #7c2d12;
-  --er-orange-950: #431407;
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // ORANGE ALPHA PALETTE
-  // Figma: Orange Alpha scale — #F97316 (orange-500) with alpha percentages
-  // ─────────────────────────────────────────────────────────────────────────
-  --er-orange-alpha-50: #f973160a; // #F97316 @ 3.92%
-  --er-orange-alpha-75: #f973160f; // #F97316 @ 6%
-  --er-orange-alpha-100: #f9731614; // #F97316 @ 7.84%
-  --er-orange-alpha-200: #f973161f; // #F97316 @ 12.16%
-  --er-orange-alpha-300: #f9731633; // #F97316 @ 20%
-  --er-orange-alpha-400: #f9731647; // #F97316 @ 27.84%
-  --er-orange-alpha-500: #f9731666; // #F97316 @ 40%
-
   // ─────────────────────────────────────────────────────────────────────────
   // SKY CYAN PALETTE (Information)
   // Frame ID: 36985:66

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

@@ -0,0 +1,58 @@
+// ============================================================================
+// 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); // #EA580C (primary-600 = orange-600)
+  --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)
+
+  // 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);
+}

package/dist/design-system/themes/netr/elevation/_elevation-tokens.scss

@@ -0,0 +1,67 @@
+// ============================================================================
+// ELEVATION TOKENS (Box Shadows)
+// ============================================================================
+// Source: Figma UI Kit Production — node-id=40237-4324
+// 8 elevation types: level 1–4 (down), top, both, focus, inner
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHADOW COLOR TOKENS
+  // ambient-01..05: progressively darker drop shadows
+  // highlight-01..04: white highlights (for dark-mode lift) + inner
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-shadow-ambient-01: rgba(0, 0, 0, 0.04);
+  --er-shadow-ambient-02: rgba(0, 0, 0, 0.06);
+  --er-shadow-ambient-03: rgba(0, 0, 0, 0.08);
+  --er-shadow-ambient-04: rgba(0, 0, 0, 0.1);
+  --er-shadow-ambient-05: rgba(0, 0, 0, 0.12);
+  --er-shadow-highlight-01: rgba(255, 255, 255, 0);
+  --er-shadow-highlight-02: rgba(255, 255, 255, 0);
+  --er-shadow-highlight-03: rgba(255, 255, 255, 0);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION — default direction (downward)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // level 1 — subtle card / list item
+  --er-elevation-level-1:
+    0px 1px 2px 0px var(--er-shadow-ambient-01), 0px 2px 6px 0px var(--er-shadow-ambient-02),
+    0px -1px 2px 0px var(--er-shadow-highlight-01);
+
+  // level 2 — popovers, dropdowns
+  --er-elevation-level-2:
+    0px 2px 4px 0px var(--er-shadow-ambient-02), 0px 6px 16px 0px var(--er-shadow-ambient-03),
+    0px -1px 3px 0px var(--er-shadow-highlight-01);
+
+  // level 3 — dialogs, modals
+  --er-elevation-level-3:
+    0px 4px 8px 0px var(--er-shadow-ambient-03), 0px 12px 28px 0px var(--er-shadow-ambient-04),
+    0px -1px 4px 0px var(--er-shadow-highlight-02);
+
+  // level 4 — drawers, prominent overlays
+  --er-elevation-level-4:
+    0px 8px 16px 0px var(--er-shadow-ambient-04), 0px 20px 48px 0px var(--er-shadow-ambient-05),
+    0px -2px 6px 0px var(--er-shadow-highlight-03);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION — special directions
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // top — upward shadow (bottom sheets, toast)
+  --er-elevation-top:
+    0px -6px 12px 0px var(--er-shadow-ambient-03), 0px -16px 32px 0px var(--er-shadow-ambient-04),
+    0px 1px 3px 0px var(--er-shadow-highlight-01);
+
+  // both — bidirectional (sticky headers, floating bars)
+  --er-elevation-both:
+    0px 10px 24px 0px var(--er-shadow-ambient-03), 0px -6px 16px 0px var(--er-shadow-ambient-02),
+    0px 0px 40px 0px var(--er-shadow-ambient-04), 0px -1px 3px 0px var(--er-shadow-highlight-02);
+
+  // focus — focused interactive elements
+  --er-elevation-focus:
+    0px 0px 0px 1px var(--er-shadow-ambient-03), 0px 8px 24px 0px var(--er-shadow-ambient-04);
+
+  // inner — inset / pressed state
+  --er-elevation-inner: inset 0px 2px 4px 0px var(--er-shadow-ambient-02);
+}

package/dist/design-system/themes/netr/elevation/_elevation-utils.scss

@@ -0,0 +1,94 @@
+// ============================================================================
+// ELEVATION UTILITIES (Mixins & Classes)
+// ============================================================================
+// SCSS mixins and utility classes for elevation system
+// Source: Figma UI Kit Production — node-id=40237-4324
+// ============================================================================
+
+@use 'elevation-tokens' as *;
+
+// ============================================================================
+// ELEVATION MIXINS
+// ============================================================================
+
+@mixin elevation-level-1 {
+  box-shadow: var(--er-elevation-level-1) !important;
+}
+@mixin elevation-level-2 {
+  box-shadow: var(--er-elevation-level-2) !important;
+}
+@mixin elevation-level-3 {
+  box-shadow: var(--er-elevation-level-3) !important;
+}
+@mixin elevation-level-4 {
+  box-shadow: var(--er-elevation-level-4) !important;
+}
+@mixin elevation-top {
+  box-shadow: var(--er-elevation-top) !important;
+}
+@mixin elevation-both {
+  box-shadow: var(--er-elevation-both) !important;
+}
+@mixin elevation-focus {
+  box-shadow: var(--er-elevation-focus) !important;
+}
+@mixin elevation-inner {
+  box-shadow: var(--er-elevation-inner) !important;
+}
+@mixin elevation-none {
+  box-shadow: none !important;
+}
+
+// ============================================================================
+// UTILITY CLASSES
+// ============================================================================
+
+.elevation-level-1 {
+  @include elevation-level-1;
+}
+.elevation-level-2 {
+  @include elevation-level-2;
+}
+.elevation-level-3 {
+  @include elevation-level-3;
+}
+.elevation-level-4 {
+  @include elevation-level-4;
+}
+.elevation-top {
+  @include elevation-top;
+}
+.elevation-both {
+  @include elevation-both;
+}
+.elevation-focus {
+  @include elevation-focus;
+}
+.elevation-inner {
+  @include elevation-inner;
+}
+.elevation-none {
+  @include elevation-none;
+}
+
+// ============================================================================
+// INTERACTIVE HELPERS
+// ============================================================================
+
+@mixin elevation-transition($duration: 0.2s) {
+  transition: box-shadow $duration ease-in-out;
+}
+
+.elevation-transition {
+  @include elevation-transition;
+}
+
+// Interactive hover: level-1 → level-2
+.elevation-interactive {
+  @include elevation-level-1;
+  @include elevation-transition;
+
+  &:hover {
+    @include elevation-level-2;
+  }
+}

package/dist/design-system/themes/netr/index.scss

@@ -0,0 +1,133 @@
+// ============================================================================
+// DESIGN SYSTEM - MAIN ENTRY POINT
+// ============================================================================
+// Re-exports all design tokens and components
+// Updated to use @forward (Sass 3.0.0 compatible)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 1: Tonal Palettes (primitive colors - never changes)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer1-palettes';
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 2: Alias Tokens (semantic names - can override per project)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer2-alias';
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 3: Component Tokens (usage-specific - uses Layer 2)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer3-tokens';
+
+// ─────────────────────────────────────────────────────────────────────────
+// TOKENS: Border Radius (shape/corner/*)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './tokens/border-radius';
+@forward './tokens/control-height';
+@forward './tokens/screen-size';
+@forward './tokens/spacing';
+
+// ─────────────────────────────────────────────────────────────────────────
+// TYPOGRAPHY SYSTEM
+// ─────────────────────────────────────────────────────────────────────────
+@forward './typography/typography-primitives';
+@forward './typography/typography-semantic';
+@forward './typography/typography-tokens';
+@forward './typography/typography-utils';
+
+// ─────────────────────────────────────────────────────────────────────────
+// ELEVATION SYSTEM
+// ─────────────────────────────────────────────────────────────────────────
+@forward './elevation/elevation-tokens';
+@forward './elevation/elevation-utils';
+
+// ─────────────────────────────────────────────────────────────────────────
+// COMPONENTS
+// ─────────────────────────────────────────────────────────────────────────
+@forward '../../components/popper';
+@forward '../../components/alert';
+@forward '../../components/badge';
+@forward '../../components/button';
+@forward '../../components/checkbox';
+@forward '../../components/checkbox-list';
+@forward '../../components/dialog';
+@forward '../../components/divider';
+@forward '../../components/input';
+@forward '../../components/input-tag';
+@forward '../../components/input-number';
+@forward '../../components/input-code';
+@forward '../../components/progress';
+@forward '../../components/radio';
+@forward '../../components/switch';
+@forward '../../components/switcher';
+@forward '../../components/tag';
+@forward '../../components/tabs';
+@forward '../../components/topbar-menu';
+@forward '../../components/timeline';
+@forward '../../components/breadcrumb';
+@forward '../../components/segmented';
+@forward '../../components/avatar';
+@forward '../../components/avatar-group';
+@forward '../../components/drawer';
+@forward '../../components/popconfirm';
+@forward '../../components/auto-complete';
+@forward '../../components/collapse';
+@forward '../../components/select';
+@forward '../../components/loading';
+@forward '../../components/spinner';
+@forward '../../components/link';
+@forward '../../components/slider';
+@forward '../../components/message';
+@forward '../../components/menu';
+@forward '../../components/tooltip';
+@forward '../../components/skeleton';
+@forward '../../components/carousel';
+@forward '../../components/color-picker';
+@forward '../../components/date-picker';
+@forward '../../components/tree';
+@forward '../../components/tree-select';
+@forward '../../components/pagination';
+@forward '../../components/upload';
+@forward '../../components/time-picker';
+@forward '../../components/time-select';
+@forward '../../components/card';
+@forward '../../components/form';
+@forward '../../components/cascader';
+@forward '../../components/dropdown';
+@forward '../../components/empty';
+@forward '../../components/message-box';
+@forward '../../components/steps';
+@forward '../../components/table';
+@forward '../../components/transfer';
+@forward '../../components/select-country';
+@forward '../../components/country-flag';
+@forward '../../components/currency-icon';
+@forward '../../components/growth-balance-profit-widget';
+@forward '../../components/monthly-gain-widget';
+@forward '../../components/pl-calendar-widget';
+@forward '../../components/trade-volume-widget';
+// ─────────────────────────────────────────────────────────────────────────
+// BRIDGES: Element Plus CSS Variables
+// ─────────────────────────────────────────────────────────────────────────
+@forward './bridges/element-plus-bridge';
+
+// ─────────────────────────────────────────────────────────────────────────
+// THEMES: Dark Mode Support
+// ─────────────────────────────────────────────────────────────────────────
+@forward './themes/dark-mode';
+
+// ============================================================================
+// USAGE IN YOUR APP
+// ============================================================================
+// Import this file once in your main entry point:
+//   import '@eaera/design-system';
+//
+// For project-specific themes:
+//   import '@eaera/design-system/themes/projects/clientportal';
+// ============================================================================
+
+* {
+  box-sizing: border-box;
+  font-family: var(--er-font-brand);
+}