@auronui/styles 1.0.0

package/components/alert-dialog.css

@@ -0,0 +1,307 @@
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Component Styles
+ * Block: alert-dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the modal
+ */
+.alert-dialog__trigger {
+  @apply inline-block;
+  @apply cursor-(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 300ms var(--ease-out-quart),
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Active/pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/**
+ * Element: backdrop - the overlay behind the dialog
+ */
+.alert-dialog__backdrop {
+  @apply fixed inset-0 z-50;
+
+  /* Entering animation — Reka UI sets data-state="open" when mounted */
+  &[data-state="open"] {
+    @apply animate-in duration-300 ease-out fade-in-0;
+  }
+
+  /* Exiting animation — Reka UI sets data-state="closed" before unmount */
+  &[data-state="closed"] {
+    @apply animate-out duration-200 ease-out fade-out-0;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-state="open"],
+  &[data-state="closed"] {
+    @apply will-change-[opacity];
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.alert-dialog__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.alert-dialog__backdrop--opaque {
+  @apply bg-backdrop;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.alert-dialog__backdrop--blur {
+  @apply bg-backdrop backdrop-blur-md;
+}
+
+/**
+ * Element: container - the positioning wrapper for the modal
+ */
+.alert-dialog__container {
+  @apply fixed inset-0 z-50;
+  @apply flex flex-col items-center;
+  @apply w-full min-w-0;
+  @apply p-4 sm:p-10;
+  @apply pointer-events-none;
+}
+
+/**
+ * Element: dialog - the content container for the modal
+ */
+.alert-dialog__dialog {
+  @apply relative;
+  @apply flex w-full flex-col;
+  @apply rounded-3xl bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply overflow-hidden;
+  @apply pointer-events-auto;
+
+  &[data-placement="auto"] {
+    @apply mt-auto sm:my-auto;
+  }
+
+  &[data-placement="center"] {
+    @apply my-auto;
+  }
+
+  &[data-placement="bottom"] {
+    @apply mt-auto;
+  }
+
+  &[data-placement="top"] {
+    @apply mt-0;
+  }
+
+  /* Entering animation — Reka UI sets data-state="open" on AlertDialogContent when mounted */
+  &[data-state="open"] {
+    @apply animate-in duration-300 ease-out-quad fade-in-0 zoom-in-95;
+
+    &[data-placement="auto"] {
+      @apply slide-in-from-bottom-1 sm:slide-in-from-bottom-0;
+    }
+
+    &[data-placement="top"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="center"] {
+      @apply slide-in-from-top-0;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-bottom-1;
+    }
+  }
+
+  /* Exiting animation — Reka UI sets data-state="closed" before unmount */
+  &[data-state="closed"] {
+    @apply animate-out duration-200 ease-out-quad fade-out-0 zoom-out-95;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-state="open"],
+  &[data-state="closed"] {
+    @apply will-change-[opacity,transform];
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: dialog--xs
+ */
+.alert-dialog__dialog--xs {
+  @apply max-w-xs;
+}
+
+/**
+ * Modifier: dialog--sm
+ */
+.alert-dialog__dialog--sm {
+  @apply max-w-sm;
+}
+
+/**
+ * Modifier: dialog--md
+ */
+.alert-dialog__dialog--md {
+  @apply max-w-md;
+}
+
+/**
+ * Modifier: dialog--lg
+ */
+.alert-dialog__dialog--lg {
+  @apply max-w-lg;
+}
+
+/**
+ * Modifier: dialog--cover
+ */
+.alert-dialog__dialog--cover {
+  @apply h-full min-h-full w-full;
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.alert-dialog__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+
+  /* When header contains icon, use flex-col layout with gap */
+  & > .alert-dialog__icon {
+    @apply mb-0;
+  }
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.alert-dialog__heading {
+  @apply align-middle;
+  @apply text-sm font-medium text-foreground;
+}
+
+/**
+ * Element: icon - the optional icon indicator
+ */
+.alert-dialog__icon {
+  @apply flex items-center justify-center;
+  @apply size-10 shrink-0;
+  @apply rounded-full select-none;
+
+  [data-slot="alert-dialog-default-icon"] {
+    @apply box-content size-5;
+  }
+}
+
+/**
+ * Modifier: icon--default
+ */
+.alert-dialog__icon--default {
+  @apply bg-default text-foreground;
+}
+
+/**
+ * Modifier: icon--accent
+ */
+.alert-dialog__icon--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+/**
+ * Modifier: icon--success
+ */
+.alert-dialog__icon--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+/**
+ * Modifier: icon--warning
+ */
+.alert-dialog__icon--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+/**
+ * Modifier: icon--danger
+ */
+.alert-dialog__icon--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}
+
+/**
+ * Element: body - the main content area
+ */
+.alert-dialog__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply my-0;
+  @apply max-h-[60vh];
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.alert-dialog__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: close-trigger - the optional x icon button to close the modal
+ */
+.alert-dialog__close-trigger {
+  @apply absolute top-4 right-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.alert-dialog__header + .alert-dialog__body {
+  @apply mt-2;
+}
+
+.alert-dialog__header + .alert-dialog__footer {
+  @apply mt-5;
+}
+
+.alert-dialog__body + .alert-dialog__footer {
+  @apply mt-5;
+}

package/components/alert.css

@@ -0,0 +1,143 @@
+/* -------------------------------------------------------------------------------------------------
+ * Alert Component Styles
+ * Block: alert
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Block: the alert container
+ */
+.alert {
+  @apply relative flex w-full flex-row items-start gap-2.5;
+  @apply rounded-xl border px-3 py-2.5;
+
+  transition:
+    background-color 200ms var(--ease-smooth),
+    border-color 200ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+}
+
+/**
+ * Element: indicator - the icon chip at the start of the alert
+ */
+.alert__indicator {
+  @apply flex shrink-0 items-center justify-center select-none;
+  @apply size-7 rounded-full;
+
+  [data-slot="alert-default-icon"] {
+    @apply size-4;
+  }
+}
+
+/**
+ * Element: content - the title + description column
+ */
+.alert__content {
+  @apply flex min-w-0 flex-1 flex-col items-start text-sm;
+  @apply pt-1;
+}
+
+/**
+ * Element: title - the alert heading
+ */
+.alert__title {
+  @apply text-sm font-semibold leading-5;
+}
+
+/**
+ * Element: description - supporting body copy
+ */
+.alert__description {
+  @apply text-xs leading-[1.125rem] text-muted;
+}
+
+/**
+ * Element: close - positioning for the optional dismiss control
+ */
+.alert > [data-slot="close-button"] {
+  @apply -mr-1;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Variants
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Modifier: default - neutral surface tone
+ */
+.alert--default {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+.alert--default .alert__indicator {
+  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
+  @apply text-foreground;
+}
+
+.alert--default .alert__title {
+  @apply text-foreground;
+}
+
+/**
+ * Modifier: accent - primary / brand tone
+ */
+.alert--accent {
+  background-color: color-mix(in oklab, var(--accent) 8%, var(--surface));
+  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
+}
+
+.alert--accent .alert__indicator {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+.alert--accent .alert__title {
+  color: var(--color-accent-soft-foreground);
+}
+
+/**
+ * Modifier: success
+ */
+.alert--success {
+  background-color: color-mix(in oklab, var(--success) 8%, var(--surface));
+  border-color: color-mix(in oklab, var(--success) 28%, transparent);
+}
+
+.alert--success .alert__indicator {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+.alert--success .alert__title {
+  color: var(--color-success-soft-foreground);
+}
+
+/**
+ * Modifier: warning
+ */
+.alert--warning {
+  background-color: color-mix(in oklab, var(--warning) 9%, var(--surface));
+  border-color: color-mix(in oklab, var(--warning) 30%, transparent);
+}
+
+.alert--warning .alert__indicator {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+.alert--warning .alert__title {
+  color: var(--color-warning-soft-foreground);
+}
+
+/**
+ * Modifier: danger
+ */
+.alert--danger {
+  background-color: color-mix(in oklab, var(--danger) 8%, var(--surface));
+  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
+}
+
+.alert--danger .alert__indicator {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}
+
+.alert--danger .alert__title {
+  color: var(--color-danger-soft-foreground);
+}

package/components/aspect-ratio.css

@@ -0,0 +1,8 @@
+/* AspectRatio component styles */
+.aspect-ratio {
+  @apply relative w-full overflow-hidden;
+
+  & > * {
+    @apply absolute inset-0 size-full object-cover;
+  }
+}