@auronui/styles 1.0.16 → 1.0.18

package/components/button.css

@@ -20,7 +20,8 @@
   /* Default tokens (fallback behavior) */
   --button-bg: transparent;
   --button-bg-hover: var(--button-bg);
-  --button-bg-pressed: var(--button-bg-hover);
+  /* Pressed is slightly darker than hover for tactile contrast */
+  --button-bg-pressed: color-mix(in oklab, var(--button-bg-hover) 82%, black);
   --button-fg: currentColor;
 
   background-color: var(--button-bg);
@@ -43,11 +44,12 @@
     @apply status-pending;
   }
 
-  /* Active / pressed */
+  /* Active / pressed — snap down fast (60ms), spring back slow (300ms from base) */
   &:active,
   &[data-pressed="true"] {
     background-color: var(--button-bg-pressed);
-    transform: scale(0.97);
+    transform: scale(0.95);
+    transition-duration: 60ms;
   }
 
   /* Selected / toggle-on state */
@@ -78,11 +80,6 @@
   & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
     @apply size-3.5;
   }
-
-  &:active,
-  &[data-pressed="true"] {
-    transform: scale(0.98);
-  }
 }
 
 .button--sm {
@@ -91,11 +88,6 @@
   & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
     @apply size-3.5;
   }
-
-  &:active,
-  &[data-pressed="true"] {
-    transform: scale(0.98);
-  }
 }
 
 .button--md {
@@ -113,58 +105,115 @@
     @apply size-5;
   }
 
-  &:active,
-  &[data-pressed="true"] {
-    transform: scale(0.96);
-  }
 }
 
-/* Color variants - only set custom property values */
-.button--primary {
-  --button-bg: var(--color-accent);
-  --button-bg-hover: var(--color-accent-hover);
-  --button-bg-pressed: var(--color-accent-hover);
-  --button-fg: var(--color-accent-foreground);
-}
+/* ============================================================
+   Variant classes — visual behavior (structural)
+   ============================================================ */
 
-.button--secondary {
-  --button-bg: var(--color-default);
-  --button-bg-hover: var(--color-default-hover);
-  --button-bg-pressed: var(--color-default-hover);
-  --button-fg: var(--color-accent-soft-foreground);
+/* solid: filled background from color palette */
+.button--solid {
+  --button-bg: var(--btn-solid-bg, var(--color-default));
+  --button-bg-hover: var(--btn-solid-bg-hover, var(--color-default-hover));
+  --button-fg: var(--btn-solid-fg, var(--color-default-foreground));
 }
 
-.button--tertiary {
+/* default (tertiary): neutral bg, text tinted by color */
+.button--default {
   --button-bg: var(--color-default);
   --button-bg-hover: var(--color-default-hover);
-  --button-bg-pressed: var(--color-default-hover);
+  --button-bg-pressed: color-mix(in oklab, var(--color-default-hover) 72%, black);
+  --button-fg: var(--btn-tint-fg, var(--color-default-foreground));
 }
 
-.button--ghost,
-.button--outline {
+/* ghost: transparent bg — hover is a light tint, pressed steps up to the stronger tint */
+.button--ghost {
   --button-bg: transparent;
-  --button-bg-hover: var(--color-default);
-  --button-bg-pressed: var(--color-default);
-  --button-fg: var(--color-default-foreground);
+  --button-bg-hover: var(--btn-tint-bg, var(--color-default));
+  --button-bg-pressed: var(--btn-tint-bg-hover, var(--color-default-hover));
+  --button-fg: var(--btn-tint-fg, var(--color-default-foreground));
 }
 
+/* outline: same press logic as ghost */
 .button--outline {
-  @apply border border-border;
-  --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent);
+  --button-bg: transparent;
+  --button-bg-hover: var(--btn-tint-bg, var(--color-default));
+  --button-bg-pressed: var(--btn-tint-bg-hover, var(--color-default-hover));
+  --button-fg: var(--btn-tint-fg, var(--color-default-foreground));
+  @apply border;
+  border-color: currentColor;
 }
 
-.button--danger {
-  --button-bg: var(--color-danger);
-  --button-bg-hover: var(--color-danger-hover);
-  --button-bg-pressed: var(--color-danger-hover);
-  --button-fg: var(--color-danger-foreground);
+/* soft: muted palette — darken more aggressively than solid */
+.button--soft {
+  --button-bg: var(--btn-soft-bg, var(--color-default));
+  --button-bg-hover: var(--btn-soft-bg-hover, var(--color-default-hover));
+  --button-bg-pressed: color-mix(in oklab, var(--btn-soft-bg-hover, var(--color-default-hover)) 72%, black);
+  --button-fg: var(--btn-soft-fg, var(--color-default-foreground));
 }
 
-.button--danger-soft {
-  --button-bg: var(--color-danger-soft);
-  --button-bg-hover: var(--color-danger-soft-hover);
-  --button-bg-pressed: var(--color-danger-soft-hover);
-  --button-fg: var(--color-danger-soft-foreground);
+/* ============================================================
+   Color classes — palette values consumed by variant classes
+   ============================================================ */
+
+.button--color-default {
+  --btn-solid-bg: var(--color-default);
+  --btn-solid-bg-hover: var(--color-default-hover);
+  --btn-solid-fg: var(--color-default-foreground);
+  --btn-soft-bg: var(--color-default);
+  --btn-soft-bg-hover: var(--color-default-hover);
+  --btn-soft-fg: var(--color-default-foreground);
+  --btn-tint-bg: var(--color-default);
+  --btn-tint-bg-hover: var(--color-default-hover);
+  --btn-tint-fg: var(--color-default-foreground);
+}
+
+.button--color-primary {
+  --btn-solid-bg: var(--color-accent);
+  --btn-solid-bg-hover: var(--color-accent-hover);
+  --btn-solid-fg: var(--color-accent-foreground);
+  --btn-soft-bg: var(--color-accent-soft);
+  --btn-soft-bg-hover: var(--color-accent-soft-hover);
+  --btn-soft-fg: var(--color-accent-soft-foreground);
+  --btn-tint-bg: color-mix(in oklab, var(--color-accent) 12%, transparent);
+  --btn-tint-bg-hover: color-mix(in oklab, var(--color-accent) 18%, transparent);
+  --btn-tint-fg: var(--color-accent);
+}
+
+.button--color-success {
+  --btn-solid-bg: var(--color-success);
+  --btn-solid-bg-hover: var(--color-success-hover);
+  --btn-solid-fg: var(--color-success-foreground);
+  --btn-soft-bg: var(--color-success-soft);
+  --btn-soft-bg-hover: var(--color-success-soft-hover);
+  --btn-soft-fg: var(--color-success-soft-foreground);
+  --btn-tint-bg: color-mix(in oklab, var(--color-success) 12%, transparent);
+  --btn-tint-bg-hover: color-mix(in oklab, var(--color-success) 18%, transparent);
+  --btn-tint-fg: var(--color-success);
+}
+
+.button--color-warning {
+  --btn-solid-bg: var(--color-warning);
+  --btn-solid-bg-hover: var(--color-warning-hover);
+  --btn-solid-fg: var(--color-warning-foreground);
+  --btn-soft-bg: var(--color-warning-soft);
+  --btn-soft-bg-hover: var(--color-warning-soft-hover);
+  --btn-soft-fg: var(--color-warning-soft-foreground);
+  --btn-tint-bg: color-mix(in oklab, var(--color-warning) 12%, transparent);
+  --btn-tint-bg-hover: color-mix(in oklab, var(--color-warning) 18%, transparent);
+  --btn-tint-fg: var(--color-warning);
+}
+
+.button--color-danger {
+  --btn-solid-bg: var(--color-danger);
+  --btn-solid-bg-hover: var(--color-danger-hover);
+  --btn-solid-fg: var(--color-danger-foreground);
+  --btn-soft-bg: var(--color-danger-soft);
+  --btn-soft-bg-hover: var(--color-danger-soft-hover);
+  --btn-soft-fg: var(--color-danger-soft-foreground);
+  --btn-tint-bg: color-mix(in oklab, var(--color-danger) 12%, transparent);
+  --btn-tint-bg-hover: color-mix(in oklab, var(--color-danger) 18%, transparent);
+  --btn-tint-fg: var(--color-danger);
 }
 
 /* Radius modifiers - compound selector wins over base/size rounding */
@@ -214,40 +263,6 @@
   @apply w-full;
 }
 
-/* ============================================================
-   Button — Phase 2 extensions (02-01-STYLES)
-   ============================================================ */
-
-/* --- New color variants --- */
-
-.button--success {
-  --button-bg: var(--color-success);
-  --button-bg-hover: var(--color-success-hover);
-  --button-bg-pressed: var(--color-success-hover);
-  --button-fg: var(--color-success-foreground);
-}
-
-.button--success-soft {
-  --button-bg: var(--color-success-soft);
-  --button-bg-hover: var(--color-success-soft-hover);
-  --button-bg-pressed: var(--color-success-soft-hover);
-  --button-fg: var(--color-success-soft-foreground);
-}
-
-.button--warning {
-  --button-bg: var(--color-warning);
-  --button-bg-hover: var(--color-warning-hover);
-  --button-bg-pressed: var(--color-warning-hover);
-  --button-fg: var(--color-warning-foreground);
-}
-
-.button--warning-soft {
-  --button-bg: var(--color-warning-soft);
-  --button-bg-hover: var(--color-warning-soft-hover);
-  --button-bg-pressed: var(--color-warning-soft-hover);
-  --button-fg: var(--color-warning-soft-foreground);
-}
-
 /* --- Loading state --- */
 
 /* Root button in loading state: pointer-events off, cursor change */

package/components/input.css

@@ -1,5 +1,5 @@
 .input {
-  @apply flex items-center gap-2 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none sm:text-xs;
+  @apply flex items-center gap-2 rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none sm:text-xs;
 
   /* Default size - matches input--md (height equivalent to h-9) */
   height: 2.25rem;
@@ -175,19 +175,27 @@
 /* ─── Size modifiers ─────────────────────────────────────────────────────────── */
 
 .input--sm {
-  @apply text-xs px-2 py-1;
+  @apply text-xs;
   height: 1.75rem;
 }
 
+.input--sm .input__input {
+  padding: 0.25rem 0.5rem;
+}
+
 .input--md {
   /* No styles — md is the default size defined on .input base */
 }
 
 .input--lg {
-  @apply text-base px-4 py-2.5;
+  @apply text-base;
   height: 2.75rem;
 }
 
+.input--lg .input__input {
+  padding: 0.625rem 1rem;
+}
+
 /* ─── Color modifiers ────────────────────────────────────────────────────────── */
 
 .input--default {
@@ -297,32 +305,45 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .input__input {
-  @apply flex-1 bg-transparent outline-none border-0 p-0 h-auto text-inherit;
+  @apply flex-1 bg-transparent outline-none border-0 text-inherit;
   @apply placeholder:text-field-placeholder;
+  align-self: stretch;
+  padding: 0.5rem 0.75rem;
+  border-radius: inherit;
 
   &:focus,
   &:focus-visible {
     outline: none;
     box-shadow: none;
   }
+}
 
-  /* Suppress browser autofill background — use inset shadow to paint over it */
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    -webkit-text-fill-color: var(--color-field-foreground);
-    caret-color: var(--color-field-foreground);
-  }
+/* Underlined: no horizontal padding on the input — underline spans edge-to-edge */
+.input--underlined .input__input {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.input__start-content,
+.input__start-content {
+  @apply inline-flex items-center justify-center shrink-0;
+  color: var(--color-field-placeholder);
+  padding-left: 0.75rem;
+}
+
+.input--sm .input__start-content { padding-left: 0.5rem; }
+.input--lg .input__start-content { padding-left: 1rem; }
+.input--underlined .input__start-content { padding-left: 0; }
+
 .input__end-content {
   @apply inline-flex items-center justify-center shrink-0;
   color: var(--color-field-placeholder);
+  padding-right: 0.75rem;
 }
 
+.input--sm .input__end-content { padding-right: 0.5rem; }
+.input--lg .input__end-content { padding-right: 1rem; }
+.input--underlined .input__end-content { padding-right: 0; }
+
 .input__start-content svg,
 .input__end-content svg {
   @apply size-4;
@@ -406,26 +427,27 @@
   transform: translateY(-110%) scale(0.85);
 }
 
-/* Start-content pushes the label's left anchor so it doesn't overlap the icon */
+/* Start-content pushes the label's left anchor so it doesn't overlap the icon.
+   Formula: start-content-pl + icon(1rem) + gap + input-pl */
 .input--label-inside:has(> .input__start-content) .input__label {
-  left: calc(0.75rem + 1rem + 0.5rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(0.75rem + 1rem + 0.5rem + 0.75rem); /* start-content-pl + size-4 + gap-2 + input-pl */
 }
 .input--label-inside.input--underlined:has(> .input__start-content) .input__label {
-  left: calc(1rem + 0.5rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 0.5rem); /* icon + gap-2 (underlined has no pl on start-content or input) */
 }
 
 /* Size-aware offsets for the inside variant */
 .input--label-inside.input--sm .input__label {
   font-size: var(--text-xs, 0.75rem);
-  left: 0.5rem; /* matches .input--sm px-2 */
+  left: 0.5rem; /* matches input--sm input pl-2 */
 }
 
 .input--label-inside.input--sm:has(> .input__start-content) .input__label {
-  left: calc(0.5rem + 1rem + 0.4rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(0.5rem + 1rem + 0.4rem + 0.5rem); /* start-content-pl + size-4 + gap + input-pl */
 }
 
 .input--label-inside.input--underlined.input--sm:has(> .input__start-content) .input__label {
-  left: calc(1rem + 0.4rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 0.4rem); /* icon + gap (underlined has no pl) */
 }
 
 .input--label-inside.input--sm .input__input {
@@ -439,14 +461,14 @@
 
 .input--label-inside.input--lg .input__label {
   font-size: var(--text-base, 1rem);
-  left: 1rem; /* matches .input--lg px-4 */
+  left: 1rem; /* matches input--lg input pl-4 */
 }
 .input--label-inside.input--lg:has(> .input__start-content) .input__label {
-  left: calc(1rem + 1rem + 1rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 1rem + 1rem + 1rem); /* start-content-pl + size-4 + gap-4 + input-pl */
 }
 
 .input--label-inside.input--underlined.input--lg:has(> .input__start-content) .input__label {
-  left: calc(1rem + 1rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 1rem); /* icon + gap-4 (underlined has no pl) */
 }
 
 .input--label-inside.input--lg .input__input {
@@ -539,7 +561,8 @@
 .input__clear-button,
 .input__password-toggle {
   @apply inline-flex items-center justify-center shrink-0;
-  @apply bg-transparent border-0 p-0 cursor-pointer outline-none;
+  @apply bg-transparent border-0 cursor-pointer outline-none;
+  padding: 0 0.75rem 0 0;
   color: var(--color-field-placeholder);
   transition:
     color 300ms var(--ease-smooth),
@@ -552,17 +575,32 @@
   @apply size-4;
 }
 
+.input--sm .input__clear-button,
+.input--sm .input__password-toggle {
+  padding-right: 0.5rem;
+}
+
 .input--sm .input__clear-button svg,
 .input--sm .input__password-toggle svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
+.input--lg .input__clear-button,
+.input--lg .input__password-toggle {
+  padding-right: 1rem;
+}
+
 .input--lg .input__clear-button svg,
 .input--lg .input__password-toggle svg {
   @apply size-5;
 }
 
+.input--underlined .input__clear-button,
+.input--underlined .input__password-toggle {
+  padding-right: 0;
+}
+
 @media (hover: hover) {
   .input__clear-button:hover,
   .input__password-toggle:hover,

package/components/modal.css

@@ -38,12 +38,28 @@
   }
 }
 
+/**
+ * Element: portal - stacking context wrapper for each modal instance.
+ * Wrapping backdrop + container in a single fixed element means each modal
+ * occupies its own stacking context. Later-opened modals render after this
+ * element in the DOM, so at equal z-index their entire portal (backdrop
+ * included) paints on top of the previous one, fixing the issue where the
+ * second modal's backdrop would appear behind the first modal's content.
+ */
+.modal__portal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  pointer-events: none;
+}
+
 /**
  * Element: backdrop - the overlay behind the dialog
  */
 .modal__backdrop {
   @apply fixed inset-0;
   z-index: var(--z-modal-backdrop);
+  pointer-events: auto;
   @apply flex flex-row items-center justify-center;
   @apply h-(--visual-viewport-height) w-full;
 
@@ -173,7 +189,6 @@
   @apply relative;
   @apply flex w-full flex-col;
   @apply rounded-3xl bg-overlay shadow-overlay outline-none;
-  @apply p-6;
   @apply pointer-events-auto;
 
   &[data-placement="auto"] {
@@ -256,8 +271,7 @@
  * Element: header - the top section with the title
  */
 .modal__header {
-  @apply flex flex-col gap-3;
-  @apply mb-0;
+  @apply flex flex-col gap-3 mb-0  p-5;
 
   /* When header contains icon, use flex-col layout with gap */
   & > .modal__icon {
@@ -286,9 +300,7 @@
  * Element: body - the main content area
  */
 .modal__body {
-  @apply min-h-0 flex-1;
-  @apply text-sm leading-[1.43] text-muted;
-  @apply my-0;
+  @apply min-h-0 flex-1 text-sm leading-[1.43] text-muted my-0 p-5 pt-0;
 }
 
 /**

package/components/textarea.css

@@ -1,6 +1,6 @@
 /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
 .textarea {
-  @apply flex items-start gap-2 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none sm:text-xs;
+  @apply flex items-start gap-2 rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none sm:text-xs;
 
   border-width: var(--border-width-field);
   border-color: var(--color-field-border);
@@ -124,7 +124,7 @@
 
 .textarea--underlined {
   /* Bottom border only — always-visible underline */
-  @apply rounded-none shadow-none bg-transparent !px-0;
+  @apply rounded-none shadow-none bg-transparent;
   border-top: none;
   border-left: none;
   border-right: none;
@@ -174,7 +174,11 @@
 /* ─── Size modifiers ─────────────────────────────────────────────────────────── */
 
 .textarea--sm {
-  @apply text-xs px-2 py-1;
+  @apply text-xs;
+}
+
+.textarea--sm .textarea__input {
+  padding: 0.25rem 0.5rem;
 }
 
 .textarea--md {
@@ -182,7 +186,11 @@
 }
 
 .textarea--lg {
-  @apply text-base px-4 py-2.5;
+  @apply text-base;
+}
+
+.textarea--lg .textarea__input {
+  padding: 0.625rem 1rem;
 }
 
 /* ─── Color modifiers ────────────────────────────────────────────────────────── */
@@ -284,9 +292,11 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .textarea__input {
-  @apply flex-1 bg-transparent outline-none border-0 p-0 text-inherit resize-none;
+  @apply flex-1 bg-transparent outline-none border-0 text-inherit resize-none;
   @apply placeholder:text-field-placeholder;
   min-height: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: inherit;
 
   &:focus,
   &:focus-visible {
@@ -297,20 +307,41 @@
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    box-shadow: 0 0 0px 1000px var(--color-field) inset;
+    -webkit-box-shadow: 0 0 0px 1000px color-mix(in oklch, #006fee 8%, var(--color-field, white)) inset;
+    box-shadow: 0 0 0px 1000px color-mix(in oklch, #006fee 8%, var(--color-field, white)) inset;
     -webkit-text-fill-color: var(--color-field-foreground);
     caret-color: var(--color-field-foreground);
   }
 }
 
-.textarea__start-content,
+.textarea--underlined .textarea__input {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.textarea__start-content {
+  @apply inline-flex items-center justify-center shrink-0;
+  color: var(--color-field-placeholder);
+  padding-top: 0.125rem;
+  padding-left: 0.75rem;
+}
+
 .textarea__end-content {
   @apply inline-flex items-center justify-center shrink-0;
   color: var(--color-field-placeholder);
   padding-top: 0.125rem;
+  padding-right: 0.75rem;
 }
 
+.textarea--sm .textarea__start-content { padding-left: 0.5rem; }
+.textarea--lg .textarea__start-content { padding-left: 1rem; }
+
+.textarea--sm .textarea__end-content { padding-right: 0.5rem; }
+.textarea--lg .textarea__end-content { padding-right: 1rem; }
+
+.textarea--underlined .textarea__start-content { padding-left: 0; }
+.textarea--underlined .textarea__end-content { padding-right: 0; }
+
 .textarea__start-content svg,
 .textarea__end-content svg {
   @apply size-4;
@@ -333,6 +364,9 @@
 
 .textarea--label-inside {
   position: relative;
+}
+
+.textarea--label-inside .textarea__input {
   padding-top: 1.5rem;
 }
 
@@ -372,7 +406,7 @@
 }
 
 .textarea--label-inside:has(> .textarea__start-content) .textarea__label {
-  left: calc(0.75rem + 1rem + 0.5rem);
+  left: calc(0.75rem + 1rem + 0.5rem + 0.75rem);
 }
 .textarea--label-inside.textarea--underlined:has(> .textarea__start-content) .textarea__label {
   left: calc(1rem + 0.5rem);
@@ -384,7 +418,7 @@
 }
 
 .textarea--label-inside.textarea--sm:has(> .textarea__start-content) .textarea__label {
-  left: calc(0.5rem + 1rem + 0.4rem);
+  left: calc(0.5rem + 1rem + 0.4rem + 0.5rem);
 }
 
 .textarea--label-inside.textarea--underlined.textarea--sm:has(> .textarea__start-content) .textarea__label {
@@ -396,7 +430,7 @@
   left: 1rem;
 }
 .textarea--label-inside.textarea--lg:has(> .textarea__start-content) .textarea__label {
-  left: calc(1rem + 1rem + 1rem);
+  left: calc(1rem + 1rem + 1rem + 1rem);
 }
 
 .textarea--label-inside.textarea--underlined.textarea--lg:has(> .textarea__start-content) .textarea__label {
@@ -482,7 +516,8 @@
 
 .textarea__clear-button {
   @apply inline-flex items-center justify-center shrink-0;
-  @apply bg-transparent border-0 p-0 cursor-pointer outline-none;
+  @apply bg-transparent border-0 cursor-pointer outline-none;
+  padding: 0 0.75rem 0 0;
   color: var(--color-field-placeholder);
   transition:
     color 300ms var(--ease-smooth),
@@ -494,6 +529,18 @@
   @apply size-4;
 }
 
+.textarea--sm .textarea__clear-button {
+  padding-right: 0.5rem;
+}
+
+.textarea--lg .textarea__clear-button {
+  padding-right: 1rem;
+}
+
+.textarea--underlined .textarea__clear-button {
+  padding-right: 0;
+}
+
 .textarea--sm .textarea__clear-button svg {
   width: 0.875rem;
   height: 0.875rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/button/button.styles.ts

@@ -14,7 +14,8 @@ export const buttonVariants = tv({
     isIconOnly: false,
     isLoading: false,
     size: "md",
-    variant: "primary",
+    variant: "solid",
+    color: "primary",
   },
   variants: {
     fullWidth: {
@@ -47,17 +48,29 @@ export const buttonVariants = tv({
       xs: { base: "button--xs" },
     },
     variant: {
-      danger: { base: "button--danger" },
-      "danger-soft": { base: "button--danger-soft" },
-      ghost: { base: "button--ghost" },
+      // Current API
+      solid: { base: "button--solid" },
+      default: { base: "button--default" },
       outline: { base: "button--outline" },
-      primary: { base: "button--primary" },
-      secondary: { base: "button--secondary" },
-      success: { base: "button--success" },
-      "success-soft": { base: "button--success-soft" },
-      tertiary: { base: "button--tertiary" },
-      warning: { base: "button--warning" },
-      "warning-soft": { base: "button--warning-soft" },
+      ghost: { base: "button--ghost" },
+      soft: { base: "button--soft" },
+      // Legacy aliases — resolved to new variant+color in Button.vue
+      primary: { base: "button--solid" },
+      secondary: { base: "button--default" },
+      tertiary: { base: "button--default" },
+      danger: { base: "button--solid" },
+      "danger-soft": { base: "button--soft" },
+      success: { base: "button--solid" },
+      "success-soft": { base: "button--soft" },
+      warning: { base: "button--solid" },
+      "warning-soft": { base: "button--soft" },
+    },
+    color: {
+      default: { base: "button--color-default" },
+      primary: { base: "button--color-primary" },
+      success: { base: "button--color-success" },
+      warning: { base: "button--color-warning" },
+      danger: { base: "button--color-danger" },
     },
   },
 });