@auronui/styles 1.0.17 → 1.0.19

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "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" },
     },
   },
 });