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

package/dist/design-system/components/_upload.scss

@@ -0,0 +1,226 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─── Upload Field ─────────────────────────────────────────────────────────────
+
+.custom-upload-default {
+  // ─── Drag zone ──────────────────────────────────────────────────────────────
+
+  .el-upload {
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      .el-upload-dragger {
+        background-color: var(--er-surface-subtle);
+      }
+
+      .el-upload-dragger:hover {
+        border-color: var(--er-border-default);
+      }
+    }
+
+    &:focus {
+      border-color: var(--er-border-default);
+      color: var(--er-icon-secondary);
+      .el-upload-dragger {
+        border-color: var(--er-action-primary-hover);
+      }
+    }
+
+    &-dragger {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--er-shape-spacing-150);
+      padding: var(--er-shape-spacing-200);
+      background: var(--er-surface-subtle);
+      border: 1px dashed var(--er-border-default);
+      border-radius: var(--er-shape-corner-150);
+      text-align: center;
+
+      &:hover {
+        border-color: var(--er-action-primary-hover);
+      }
+
+      &.is-dragover {
+        border-width: 2px;
+        border-color: var(--er-action-primary-hover);
+        padding: calc(var(--er-shape-spacing-200) - 1px);
+      }
+    }
+  }
+
+  // ─── Icon button inside drag zone ───────────────────────────────────────────
+
+  .upload-field {
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--er-control-height-lg);
+      height: var(--er-control-height-lg);
+      background: var(--er-action-neutral-subtle-default);
+      border: 1px solid var(--er-border-default);
+      border-radius: var(--er-shape-corner-150);
+      color: var(--er-icon-secondary);
+    }
+
+    &__title {
+      @include typo.title-sm;
+      color: var(--er-text-secondary);
+    }
+
+    &__description {
+      @include typo.body-sm;
+      color: var(--er-text-muted);
+    }
+
+    &__tip {
+      @include typo.body-sm;
+      color: var(--er-text-secondary);
+      margin-top: var(--er-shape-spacing-100);
+    }
+  }
+
+  // ─── Picture-card (80×80) ───────────────────────────────────────────────────
+  .el-upload-list--picture-card {
+    gap: var(--er-shape-spacing-50);
+
+    .el-upload-list__item {
+      width: 80px;
+      height: 80px;
+      border: none;
+      border-radius: var(--er-shape-corner-150);
+      margin: 0;
+    }
+  }
+
+  .el-upload--picture-card {
+    width: 80px;
+    height: 80px;
+    background: var(--er-surface-subtle);
+    border: 1px dashed var(--er-border-default);
+    border-radius: var(--er-shape-corner-100);
+    color: var(--er-icon-secondary);
+
+    &:hover {
+      border-color: var(--er-action-primary-hover);
+      color: var(--er-icon-secondary);
+    }
+  }
+
+  // ─── Upload list ─────────────────────────────────────────────────────────────
+
+  .el-upload-list {
+    margin-top: var(--er-shape-spacing-100);
+    padding: 0;
+
+    &.el-upload-list--text {
+      .el-upload-list__item {
+        border-radius: var(--er-shape-corner-150);
+
+        &:hover {
+          background: unset;
+        }
+      }
+    }
+
+    &.is-disabled {
+      opacity: 0.5;
+      * {
+        cursor: not-allowed;
+      }
+    }
+
+    &__item-info {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-width: 0;
+      margin-left: 0;
+      width: auto;
+    }
+
+    &__item-name {
+      @include typo.label-lg;
+      color: var(--er-text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:hover,
+      &:focus {
+        color: var(--er-text-primary);
+      }
+    }
+  }
+
+  // ─── File item ───────────────────────────────────────────────────────────────
+
+  .upload-file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--er-shape-spacing-100);
+    width: 100%;
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--er-icon-secondary);
+      padding: var(--er-shape-spacing-100);
+      border-radius: var(--er-shape-corner-100);
+
+      &.file {
+        background: var(--er-accent-50);
+
+        svg {
+          stroke: var(--er-accent-500);
+        }
+      }
+
+      &.image {
+        background: var(--er-teal-50);
+
+        svg {
+          stroke: var(--er-secondary-500);
+        }
+      }
+    }
+
+    &.block {
+      display: flex !important;
+    }
+
+    &__info {
+      display: flex;
+      flex: 1;
+
+      &.block {
+        flex-direction: column;
+      }
+
+      &.compact {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--er-shape-spacing-50);
+      }
+    }
+
+    &__name {
+      @include typo.label-lg;
+      color: var(--er-text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 250px;
+    }
+
+    &__size {
+      @include typo.body-sm;
+      color: var(--er-text-muted);
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+  }
+}

package/dist/design-system/themes/aurora/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); // #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)
+
+  // 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/aurora/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/aurora/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/aurora/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);
+}