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

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

@@ -0,0 +1,378 @@
+// ============================================================================
+// BUTTON COMPONENT — EAERA DESIGN SYSTEM
+// ============================================================================
+// Source: Figma UI Kit Core
+// Node:   https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40017-3727
+// Component: EaeraButton.vue (wraps el-button)
+//
+// Figma variant → EaeraButton prop:
+//   type=primary  → color="primary"
+//   type=danger   → color="danger"
+//   type=contrast → color="contrast"
+//   is-plain=yes  → :plain="true"  → adds .is-plain (Element Plus)
+//   is-ghost=yes  → :ghost="true"  → adds .is-ghost (custom prop)
+//
+// Sizes (Figma):
+//   sm → h=24px  px=8px   gap=4px  radius=corner/xs(4px)   icon=16px  typo=label/md
+//   md → h=32px  px=12px  gap=4px  radius=corner/sm(8px)   icon=20px  typo=label/lg  [default]
+//   lg → h=40px  px=16px  gap=8px  radius=corner/md(12px)  icon=20px  typo=label/lg
+//
+// Disabled: opacity-50 on same colors (Figma: is-disabled = opacity 0.5)
+// ============================================================================
+
+@use "../themes/aurora/typography/typography-utils" as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// MIXINS
+// ─────────────────────────────────────────────────────────────────────────
+
+// Solid (filled) variant — bg+border change on hover/active, disabled = opacity 0.5
+@mixin btn-solid($bg, $bg-hover, $bg-active, $text) {
+  background-color: $bg;
+  border-color: $bg;
+  color: $text !important;
+
+  &:hover:not(:disabled):not(.is-disabled) {
+    background-color: $bg-hover;
+    border-color: $bg-hover;
+    color: $text !important;
+  }
+
+  &:active:not(:disabled):not(.is-disabled) {
+    background-color: $bg-active;
+    border-color: $bg-active;
+    color: $text !important;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.5;
+    background-color: $bg;
+    border-color: $bg;
+    color: $text !important;
+  }
+}
+
+// Plain (outlined) variant — transparent bg, border stays on hover/active
+@mixin btn-plain($border, $text, $bg-hover, $bg-active: $bg-hover) {
+  background-color: transparent;
+  border-color: $border;
+  color: $text !important;
+
+  &:hover:not(:disabled):not(.is-disabled) {
+    background-color: $bg-hover;
+    border-color: $border;
+    color: $text !important;
+  }
+
+  &:active:not(:disabled):not(.is-disabled) {
+    background-color: $bg-active;
+    border-color: $border;
+    color: $text !important;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.5;
+    background-color: transparent;
+    border-color: $border;
+    color: $text !important;
+  }
+}
+
+// Ghost (no border) variant — transparent bg+border, text never changes color on any state
+@mixin btn-ghost($text, $bg-hover, $bg-active: $bg-hover) {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: $text !important;
+
+  &:hover:not(:disabled):not(.is-disabled) {
+    background-color: $bg-hover !important;
+    border-color: transparent !important;
+    color: $text !important;
+  }
+
+  &:active:not(:disabled):not(.is-disabled) {
+    background-color: $bg-active !important;
+    border-color: transparent !important;
+    color: $text !important;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.5;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    color: $text !important;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// BASE — MD default
+// ─────────────────────────────────────────────────────────────────────────
+.el-button + .el-button {
+  margin-left: 0 !important; // Override Element's default margin between buttons
+}
+
+.custom-button.el-button {
+  @include typo.label-lg; // 14px / 600 / 20px lh / 0.1px tracking
+
+  height: var(--er-control-height-md); // Figma: control-height/md
+  padding: 0 var(--er-shape-spacing-100) !important; // Figma: shape/spacing/md (16px) + override Element's default padding
+  gap: var(--er-shape-spacing-50);
+  border-radius: var(--er-shape-corner-100); // Figma: shape/corner/sm
+  box-shadow: none !important;
+  border-width: 1px;
+
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--er-shape-spacing-50);
+  }
+
+  svg {
+    width: var(--er-control-height-xs);
+    height: var(--er-control-height-xs);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SIZES
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // SM — Figma: h=24px, px=6px, gap=4px, radius=corner/xs(6px), icon=16px
+  &.sm {
+    @include typo.label-md; // 12px / 600 / 16px lh / 0.5px tracking
+    height: var(--er-control-height-sm);
+    padding: 0 var(--er-shape-spacing-75) !important;
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-75);
+
+    svg {
+      width: var(--er-shape-spacing-200);
+      height: var(--er-shape-spacing-200);
+    }
+  }
+
+  // LG — Figma: h=40px, px=12px, gap=8px, radius=corner/md(12px)
+  &.lg {
+    height: var(--er-control-height-lg);
+    padding: 0 var(--er-shape-spacing-200) !important;
+    gap: var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-150);
+
+    > span { 
+      gap: var(--er-shape-spacing-100);
+    }
+  }
+
+  // LG — Figma: h=48px, px=16px, gap=8px, radius=corner/md(12px)
+  &.xl {
+    @include typo.title-md;
+    height: var(--er-control-height-xl);
+    padding: 0 var(--er-shape-spacing-200) !important;
+    gap: var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-150);
+
+    > span {
+      gap: var(--er-shape-spacing-100);
+    }
+
+    svg {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COLOR VARIANTS  (EaeraButton `color` prop → CSS class)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // ── PRIMARY ──────────────────────────────────────────────────────────────
+  // Figma: type=primary
+  // Default: bg=action/primary-default(#3b82f6)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/primary-hover(#2563eb)
+  // Pressed: bg=action/primary-pressed(#1d4ce0)
+  // Disabled: same colors + opacity-50
+  &.primary {
+    @include btn-solid(var(--er-action-primary-default), var(--er-action-primary-hover), var(--er-action-primary-pressed), var(--er-text-on-action));
+
+    // Plain — Figma: type=primary is-plain=yes
+    // Default: transparent bg  border=border/brand-subtle(#93c5fd)  text=action/primary-default
+    // Hover:   bg=action/primary-subtle-hover(#dbeafe)  border stays
+    // Pressed: bg=action/primary-subtle-pressed(#bfdbfe)  border stays
+    &.is-plain {
+      @include btn-plain(
+        var(--er-border-brand-subtle),
+        var(--er-action-primary-default),
+        var(--er-action-primary-subtle-hover),
+        var(--er-action-primary-subtle-pressed)
+      );
+    }
+
+    // Ghost — Figma: type=primary is-ghost=yes
+    // Default: transparent bg  no border  text=action/primary-default
+    // Hover:   bg=action/primary-subtle-hover(#dbeafe)  text stays
+    // Pressed: bg=action/primary-subtle-pressed(#bfdbfe)  text stays
+    &.is-ghost {
+      @include btn-ghost(var(--er-action-primary-default), var(--er-action-primary-subtle-hover), var(--er-action-primary-subtle-pressed));
+    }
+  }
+
+  // ── DANGER ───────────────────────────────────────────────────────────────
+  // Figma: type=danger
+  // Default: bg=action/danger-default(#ef4444)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/danger-hover(#dc2626)
+  // Pressed: bg=action/danger-pressed(#b91c1c)
+  &.danger {
+    @include btn-solid(var(--er-action-danger-default), var(--er-action-danger-hover), var(--er-action-danger-pressed), var(--er-text-on-action));
+
+    // Plain — Figma: type=danger is-plain=yes
+    // Default: transparent bg  border=border/danger-subtle(#fca5a5)  text=text/danger(#ef4444)
+    // Hover:   bg=action/danger-subtle-hover(#fee2e2)  border stays
+    // Pressed: bg=action/danger-subtle-pressed(#fecaca)  border stays
+    &.is-plain {
+      @include btn-plain(var(--er-border-danger-subtle), var(--er-text-danger), var(--er-action-danger-subtle-hover), var(--er-action-danger-subtle-pressed));
+    }
+
+    // Ghost — Figma: type=danger is-ghost=yes
+    // Default: transparent bg  no border  text=text/danger(#ef4444)
+    // Hover:   bg=action/danger-subtle-hover(#fee2e2)  text stays
+    // Pressed: bg=action/danger-subtle-pressed(#fecaca)  text stays
+    &.is-ghost {
+      @include btn-ghost(var(--er-text-danger), var(--er-action-danger-subtle-hover), var(--er-action-danger-subtle-pressed));
+    }
+  }
+
+  // ── Contrast (Figma: type=contrast) ────────────────────────────────────
+  // Default: bg=action/neutral-default(#09090b)  text=text/inverse(#fafafa)
+  // Hover:   bg=action/neutral-hover(#52525b)
+  // Pressed: bg=action/neutral-pressed(#27272a)
+  &.contrast {
+    @include btn-solid(var(--er-action-neutral-default), var(--er-action-neutral-hover), var(--er-action-neutral-pressed), var(--er-text-inverse));
+
+    &.is-link {
+      @include btn-solid(var(--er-action-neutral-default), var(--er-action-neutral-hover), var(--er-action-neutral-pressed), var(--er-action-neutral-default));
+    }
+
+    // Plain — Figma: type=contrast is-plain=yes
+    // Default: transparent bg  border=border/default(#e4e4e7)  text=text/primary(#18181b)
+    // Hover:   bg=action/neutral-subtle-hover(#fafafa)  border stays
+    // Pressed: bg=action/neutral-subtle-pressed(#f4f4f5)  border stays
+    &.is-plain {
+      @include btn-plain(var(--er-border-default), var(--er-text-primary), var(--er-action-neutral-subtle-hover), var(--er-action-neutral-subtle-pressed));
+    }
+
+    // Ghost — Figma: type=contrast is-ghost=yes
+    // Default: transparent bg  no border  text=text/primary(#18181b)
+    // Hover:   bg=action/neutral-subtle-hover(#fafafa)  text stays
+    // Pressed: bg=action/neutral-subtle-pressed(#f4f4f5)  text stays
+    &.is-ghost {
+      @include btn-ghost(var(--er-text-primary), var(--er-action-neutral-subtle-hover), var(--er-action-neutral-subtle-pressed));
+    }
+  }
+
+  // ── SUCCESS ──────────────────────────────────────────────────────────────
+  // Not in Figma UI Kit — local extension (tokens mirror danger).
+  // Default: bg=action/success-default(#10b981)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/success-hover(#059669)
+  // Pressed: bg=action/success-pressed(#047857)
+  &.success {
+    @include btn-solid(var(--er-action-success-default), var(--er-action-success-hover), var(--er-action-success-pressed), var(--er-text-on-action));
+
+    // Plain — local extension, mirrors danger plain
+    // Default: transparent bg  border=border/success-subtle  text=text/success(#10b981)
+    // Hover:   bg=action/success-subtle-hover  border stays
+    // Pressed: bg=action/success-subtle-pressed  border stays
+    &.is-plain {
+      @include btn-plain(var(--er-border-success-subtle), var(--er-text-success), var(--er-action-success-subtle-hover), var(--er-action-success-subtle-pressed));
+    }
+
+    // Ghost — local extension, mirrors danger ghost
+    // Default: transparent bg  no border  text=text/success(#10b981)
+    // Hover:   bg=action/success-subtle-hover  text stays
+    // Pressed: bg=action/success-subtle-pressed  text stays
+    &.is-ghost {
+      @include btn-ghost(var(--er-text-success), var(--er-action-success-subtle-hover), var(--er-action-success-subtle-pressed));
+    }
+
+    // Link — renders as a primary text link (unchanged behavior)
+    &.is-link {
+      color: var(--er-action-primary-default) !important;
+
+      &:hover:not(:disabled):not(.is-disabled) {
+        color: var(--er-action-primary-hover) !important;
+      }
+
+      &:active:not(:disabled):not(.is-disabled) {
+        color: var(--er-action-primary-pressed) !important;
+      }
+
+      &:disabled,
+      &.is-disabled {
+        opacity: 0.5;
+        color: var(--er-action-primary-default) !important;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // MODIFIERS  (EaeraButton non-color props)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // unset-width (unsetWidth=true)
+  &.unset-width {
+    min-width: unset;
+  }
+
+  // is-link (link=true) — text link, no bg/border/padding
+  &.is-link {
+    background-color: transparent !important;
+    border-width: 0;
+    padding: 0 !important;
+    min-width: unset;
+    // color: var(--er-action-primary-default) !important;
+
+    // &:hover {
+    //   color: var(--er-action-primary-hover) !important;
+    // }
+  }
+
+  // is-box (box=true) — sharp corners
+  &.is-box {
+    border-radius: var(--er-shape-corner-50);
+  }
+
+  // is-round / is-circle (btnIcon.type = 'round' | 'circle') — pill shape
+  &.is-circle,
+  &.is-round {
+    border-radius: var(--er-shape-corner-full);
+  }
+
+  // button-activation — attached to adjacent input (search/filter combos)
+  &.button-activation {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.is-icon-only {
+    padding: 0 !important;
+    width: var(--er-control-height-md);
+    height: var(--er-control-height-md);
+
+    &.sm {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+    }
+
+    &.lg {
+      width: var(--er-control-height-lg);
+      height: var(--er-control-height-lg);
+    }
+
+    &.xl {
+      width: var(--er-control-height-xl);
+      height: var(--er-control-height-xl);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+.custom-card.el-card {
+  border-radius: var(--er-shape-corner-200);
+  border: 1px solid var(--er-border-default);
+  background: var(--er-surface-container);
+  box-shadow: none;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+
+  .el-card__body,
+  .el-card__footer,
+  .el-card__header {
+    width: 100%;
+  }
+
+  &.padding-all .el-card__body {
+    padding: var(--er-shape-spacing-200);
+  }
+
+  &.padding-top-down .el-card__body {
+    padding: var(--er-shape-spacing-200) 0;
+  }
+
+  &.padding-none .el-card__body {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,104 @@
+// ============================================================================
+// CAROUSEL — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=41093-7538
+// ============================================================================
+// Variants:
+//   style=arrow-inline    — prev/next arrows overlaid on the slide edges
+//   style=arrow-separate  — navigation bar (indicators + pill nav buttons) below slide
+// ============================================================================
+
+// ─── Outer wrapper (always rendered by EaeraCarousel)
+.custom-carousel-wrapper {
+  .carousel-nav-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--er-shape-spacing-100);
+
+    &__indicators {
+      display: flex;
+      align-items: center;
+      gap: var(--er-shape-spacing-50);
+    }
+
+    &__dot {
+      display: block;
+      width: var(--er-control-height-xs);
+      height: 2px;
+      border-radius: var(--er-shape-corner-50);
+      background: var(--er-surface-muted);
+
+      &.is-active {
+        background: var(--er-surface-inverse);
+      }
+    }
+
+    &__controls {
+      display: flex;
+      align-items: center;
+      gap: var(--er-shape-spacing-50);
+
+      .custom-button.el-button {
+        width: var(--er-control-height-sm);
+        margin: 0;
+      }
+    }
+  }
+}
+
+.custom-carousel.el-carousel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--er-shape-spacing-100);
+  // ─── Slide item card
+  .el-carousel__item {
+    background: var(--er-surface-container);
+    border: 1px solid var(--er-border-default);
+    border-radius: var(--er-shape-corner-100);
+    padding: var(--er-shape-spacing-100);
+  }
+
+  // ─── Arrow buttons (style=arrow-inline)
+  // Positioned left/right inside the container, vertically centered
+  .el-carousel__arrow {
+    width: var(--er-control-height-sm); // 24px
+    height: var(--er-control-height-sm); // 24px
+    border-radius: var(--er-shape-corner-50);
+    background-color: transparent;
+    color: var(--er-icon-secondary);
+    font-size: 16px;
+
+    &.el-carousel__arrow--left {
+      left: 0;
+    }
+
+    &.el-carousel__arrow--right {
+      right: 0;
+    }
+  }
+
+  .el-carousel__indicators.el-carousel__indicators--horizontal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--er-shape-spacing-50);
+    position: static;
+    transform: none;
+  }
+
+  // ─── Single indicator button (the 2px bar)
+  .el-carousel__indicator {
+    padding: 0;
+
+    .el-carousel__button {
+      width: var(--er-control-height-xs);
+      border-radius: var(--er-shape-corner-50);
+      background-color: var(--er-surface-muted);
+    }
+
+    &.is-active .el-carousel__button {
+      background-color: var(--er-surface-inverse) !important;
+      width: var(--er-control-height-xs);
+    }
+  }
+}