@eaera-com/eaera-widgets-v2 0.1.75 → 0.1.76

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

@@ -13,11 +13,19 @@
 //   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
+//   sm → h=24px  px=6px   gap=4px  icon=12px  radius=corner/xs(6px)   typo=label/md
+//   md → h=32px  px=8px   gap=4px  icon=16px  radius=corner/sm(8px)   typo=label/lg  [default]
+//   lg → h=40px  px=12px  gap=6px  icon=16px  radius=corner/md(12px)  typo=label/lg
+//   xl → h=48px  px=16px  gap=8px  icon=20px  radius=corner/md(12px)  typo=title/md
 //
-// Disabled: opacity-50 on same colors (Figma: is-disabled = opacity 0.5)
+// States (Figma): default → hover → pressed, disabled = opacity-50 trên cùng màu
+//   solid: bg+border = action/{type}-default → -hover → -pressed
+//   plain: transparent bg, border stays, hover/pressed = subtle bg
+//   ghost: transparent bg+border, text stays, hover/pressed = subtle bg
+//
+// Extension color (success):
+//   Không có trong Figma UI Kit — map local theo green palette tokens
+//   (500→600→700), dùng chung pattern solid/plain/ghost/link của core.
 // ============================================================================
 
 @use "../themes/aurora/typography/typography-utils" as typo;
@@ -118,7 +126,7 @@
   @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
+  padding: 0 var(--er-shape-spacing-100) !important; // Figma: md px=8px, 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;
@@ -132,8 +140,8 @@
   }
 
   svg {
-    width: var(--er-control-height-xs);
-    height: var(--er-control-height-xs);
+    width: var(--er-shape-spacing-200); // Figma: icon md/lg = 16px
+    height: var(--er-shape-spacing-200);
   }
 
   // ─────────────────────────────────────────────────────────────────────────
@@ -149,20 +157,20 @@
     border-radius: var(--er-shape-corner-75);
 
     svg {
-      width: var(--er-shape-spacing-200);
-      height: var(--er-shape-spacing-200);
+      width: var(--er-shape-spacing-150); // Figma: icon sm = 12px
+      height: var(--er-shape-spacing-150);
     }
   }
 
-  // LG — Figma: h=40px, px=12px, gap=8px, radius=corner/md(12px)
+  // LG — Figma: h=40px, px=12px, gap=6px, icon=16px, 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);
+    padding: 0 var(--er-shape-spacing-150) !important;
+    gap: var(--er-shape-spacing-75);
     border-radius: var(--er-shape-corner-150);
 
-    > span { 
-      gap: var(--er-shape-spacing-100);
+    > span {
+      gap: var(--er-shape-spacing-75);
     }
   }
 
@@ -179,8 +187,8 @@
     }
 
     svg {
-      width: var(--er-control-height-sm);
-      height: var(--er-control-height-sm);
+      width: var(--er-shape-spacing-250); // Figma: icon xl = 20px
+      height: var(--er-shape-spacing-250);
     }
   }
 
@@ -189,18 +197,18 @@
   // ─────────────────────────────────────────────────────────────────────────
 
   // ── 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)
+  // Figma: type=primary (bg map theo token --er-primary-* của theme active)
+  // Default: bg=action/primary-default  text=text/on-action
+  // Hover:   bg=action/primary-hover
+  // Pressed: bg=action/primary-pressed
   // 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
+    // Default: transparent bg  border=border/brand-subtle  text=action/primary-default
+    // Hover:   bg=action/primary-subtle-hover  border stays
+    // Pressed: bg=action/primary-subtle-pressed  border stays
     &.is-plain {
       @include btn-plain(
         var(--er-border-brand-subtle),
@@ -212,8 +220,8 @@
 
     // 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
+    // Hover:   bg=action/primary-subtle-hover  text stays
+    // Pressed: bg=action/primary-subtle-pressed  text stays
     &.is-ghost {
       @include btn-ghost(var(--er-action-primary-default), var(--er-action-primary-subtle-hover), var(--er-action-primary-subtle-pressed));
     }
@@ -221,9 +229,9 @@
 
   // ── 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)
+  // Default: bg=action/danger-default(#dc2626)  text=text/on-action(#fafafa)
+  // Hover:   bg=action/danger-hover(#b91c1c)
+  // Pressed: bg=action/danger-pressed(#9f1d1d)
   &.danger {
     @include btn-solid(var(--er-action-danger-default), var(--er-action-danger-hover), var(--er-action-danger-pressed), var(--er-text-on-action));
 
@@ -272,46 +280,40 @@
     }
   }
 
-  // ── 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 (local extension — green scale) ──────────────────────────────
+  // Default: bg=action/success-default  text=text/on-action
+  // Hover:   bg=action/success-hover
+  // Pressed: bg=action/success-pressed
   &.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
+    // Plain — transparent bg  border=border/success-subtle  text=text/success
+    // Hover/Pressed: bg=action/success-subtle-*, 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
+    // Ghost — transparent bg, no border, 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)
+    // Link — renders as a success text link (unchanged behavior)
     &.is-link {
-      color: var(--er-action-primary-default) !important;
+      color: var(--er-text-success) !important;
 
       &:hover:not(:disabled):not(.is-disabled) {
-        color: var(--er-action-primary-hover) !important;
+        color: var(--er-action-success-hover) !important;
       }
 
       &:active:not(:disabled):not(.is-disabled) {
-        color: var(--er-action-primary-pressed) !important;
+        color: var(--er-action-success-pressed) !important;
       }
 
       &:disabled,
       &.is-disabled {
         opacity: 0.5;
-        color: var(--er-action-primary-default) !important;
+        color: var(--er-text-success) !important;
       }
     }
   }

package/dist/eaera-widgets-v2.es.js

@@ -174,6 +174,7 @@ const Z5 = /* @__PURE__ */ s1({
     plain: { type: Boolean, default: !1 },
     link: { type: Boolean, default: !1 },
     ghost: { type: Boolean, default: !1 },
+    round: { type: Boolean, default: !1 },
     unsetWidth: { type: Boolean },
     isIconOnly: { type: Boolean, default: !1 }
   },
@@ -185,6 +186,7 @@ const Z5 = /* @__PURE__ */ s1({
       e.box && "is-box",
       !e.background && "no-background",
       e.ghost && "is-ghost",
+      e.round && "is-round",
       e.unsetWidth && "unset-width",
       e.isIconOnly && "is-icon-only"
     ]);
@@ -82938,7 +82940,7 @@ const MP1 = [
         footer: z(() => [
           o("div", bT1, [
             A(x, {
-              color: "secondary",
+              color: "contrast",
               onClick: u
             }, {
               default: z(() => [...C[2] || (C[2] = [
@@ -83552,7 +83554,7 @@ const MP1 = [
           }, null, 8, ["modelValue", "disabled"]),
           A(m(T1), {
             class: "custom-order-actions__button custom-order-actions__button--fill custom-order-actions__button--padded",
-            color: "error",
+            color: "danger",
             loading: m(n)[m(z4).Sell],
             disabled: m(c).disabled,
             onClick: t1[2] || (t1[2] = (q) => k(m(z4).Sell))
@@ -85243,7 +85245,7 @@ const b4 = /* @__PURE__ */ G6(tN1), X2 = {
             o("div", pN1, [
               A(G, {
                 class: "custom-trading-table__column-dialog-action-button",
-                color: "secondary",
+                color: "contrast",
                 onClick: m(c)
               }, {
                 default: z(() => [
@@ -90705,7 +90707,7 @@ const $q1 = (t) => typeof t == "object" && t !== null, c0 = (t, e) => $q1(t) &&
         footer: z(() => [
           o("div", Eq1, [
             A(c, {
-              color: "secondary",
+              color: "contrast",
               onClick: n[1] || (n[1] = (h) => s("close"))
             }, {
               default: z(() => [...n[5] || (n[5] = [
@@ -90792,7 +90794,7 @@ const $q1 = (t) => typeof t == "object" && t !== null, c0 = (t, e) => $q1(t) &&
         footer: z(() => [
           o("div", Wq1, [
             A(h, {
-              color: "secondary",
+              color: "contrast",
               onClick: i[1] || (i[1] = (v) => s("close"))
             }, {
               default: z(() => [...i[7] || (i[7] = [
@@ -91182,7 +91184,7 @@ const rK1 = { class: "grid grid-cols-2 gap-lg" }, nK1 = { class: "flex items-cen
               footer: z(() => [
                 A(z1, {
                   size: "sm",
-                  color: "secondary",
+                  color: "contrast",
                   background: !1,
                   class: "w-full",
                   onClick: m(d1)