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

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

@@ -0,0 +1,64 @@
+// ============================================================================
+// LINK — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40065-6518
+// ============================================================================
+// Variants:
+//   type = primary | default
+//   size = md (default) | sm
+//   state = default | hover | disabled
+// ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin link-variant($color-default, $color-hover) {
+  color: $color-default;
+
+  &:hover {
+    color: $color-hover;
+    &::after {
+      border-bottom-color: $color-hover;
+    }
+  }
+}
+
+.custom-link.el-link {
+  @include typo.label-md;
+
+  &.is-underline,
+  &.is-hover-underline {
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: 1px solid currentColor;
+    }
+  }
+
+  &.el-link--primary {
+    @include link-variant(var(--er-action-primary-default), var(--er-action-primary-hover));
+  }
+
+  &.el-link--default {
+    @include link-variant(var(--er-action-neutral-default), var(--er-action-neutral-hover));
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &::after {
+      display: none;
+    }
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &.sm {
+    @include typo.label-sm;
+  }
+}

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

@@ -0,0 +1,89 @@
+// ============================================================================
+// LOADING COMPONENT STYLES
+// ============================================================================
+// Source: Figma UI Kit Core
+//   49 Loading: node-id=40788:8781
+// Based on: Element Plus v-loading directive / ElLoading component
+// NOTE: No custom Vue wrapper component — styles applied directly to El-Plus loading
+//
+// ELEMENT PLUS LOADING STRUCTURE:
+// .el-loading-mask                ← Overlay mask
+//   .el-loading-spinner           ← Centered spinner container
+//     svg.circular                ← SVG element
+//       circle.path               ← Animated arc (stroke property drives color)
+//     .el-loading-text            ← Optional loading text
+//
+// FIGMA VARIANTS:
+//   type=primary  — bar: action/primary-default (#3B82F6), runway: neutral/200 (#E4E4E7)
+//   type=contrast — bar: icon/primary (#18181B), runway: neutral/200 (#E4E4E7)
+//   type=on-action — bar: white (#FFFFFF), runway: rgba(255,255,255,0.3)
+//
+//   size=sm  — 20×20px
+//   size=md  — 24×24px
+//   size=lg  — 32×32px
+//   size=xl  — 40×40px (default El-Plus: controlled by --el-loading-spinner-size)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// TYPE: primary (default)
+// bar = action/primary-default, runway = neutral/200
+// ─────────────────────────────────────────────────────────────────────────
+
+// ============================================================================
+// LOADING COMPONENT STYLES
+// ============================================================================
+
+// ─── Mixins ──────────────────────────────────────────────────────────────────
+
+@mixin loading-spinner-color($color-var) {
+  .el-loading-spinner .circular .path {
+    stroke: var(#{$color-var});
+  }
+}
+
+@mixin loading-size($size) {
+  --el-loading-spinner-size: #{$size};
+}
+
+// ─── TYPE: primary (default) ─────────────────────────────────────────────────
+
+.el-loading-spinner {
+  .circular .path {
+    stroke: var(--er-action-primary-default);
+    stroke-width: 4;
+  }
+
+  .el-loading-text {
+    color: var(--er-text-primary);
+  }
+}
+
+// ─── SIZES ───────────────────────────────────────────────────────────────────
+
+$loading-sizes: (
+  'sm': var(--er-control-height-xs),
+  'md': var(--er-control-height-sm),
+  'lg': var(--er-control-height-md),
+  'xl': var(--er-control-height-lg),
+);
+
+@each $name, $size in $loading-sizes {
+  .el-loading-parent--relative.#{$name},
+  .#{$name} > .el-loading-mask {
+    @include loading-size($size);
+  }
+}
+
+// ─── TYPE: contrast ──────────────────────────────────────────────────────────
+
+.el-loading-parent--relative.loading-contrast > .el-loading-mask,
+.loading-contrast > .el-loading-mask {
+  @include loading-spinner-color(--er-icon-primary);
+}
+
+// ─── TYPE: on-action ─────────────────────────────────────────────────────────
+
+.el-loading-parent--relative.loading-on-action > .el-loading-mask,
+.loading-on-action > .el-loading-mask {
+  @include loading-spinner-color(--er-text-inverse);
+}