@auronui/styles 1.0.0

package/components/color-area.css

@@ -0,0 +1,81 @@
+/* ==========================================================================
+   ColorArea - 2D color picker for selecting colors from a gradient area
+   ========================================================================== */
+
+/* Base styles */
+.color-area {
+  @apply relative w-full max-w-56 shrink-0 rounded-2xl no-highlight;
+
+  /* Square aspect ratio */
+  aspect-ratio: 1 / 1;
+
+  /* Color gradient background from React Aria */
+  background: var(--color-area-background);
+
+  /* Inner shadow for depth */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+  /* Disabled state */
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Dots overlay variant
+   ========================================================================== */
+
+.color-area--show-dots {
+  /* Dot pattern overlay using radial gradient */
+  &::after {
+    content: "";
+    @apply pointer-events-none absolute inset-0 rounded-[inherit];
+
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
+    background-size: 8px 8px;
+  }
+}
+
+/* ==========================================================================
+   Thumb element
+   ========================================================================== */
+
+.color-area__thumb {
+  @apply size-4 rounded-full will-change-[width,height];
+
+  /* Current color from React Aria */
+  background-color: var(--color-area-thumb-color);
+
+  /* White border for visibility */
+  border: 3px solid white;
+
+  /* Inner shadow for depth */
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    width 300ms var(--ease-out),
+    height 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Dragging state */
+  &[data-dragging="true"] {
+    @apply size-5;
+  }
+
+  /* Disabled state */
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}

package/components/color-field.css

@@ -0,0 +1,99 @@
+/* ==========================================================================
+   ColorField - Form field for editing hex colors or individual color channels
+   ========================================================================== */
+
+/* Base styles */
+.color-field {
+  @apply flex flex-col gap-1;
+
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+/* Full width modifier */
+.color-field--full-width {
+  @apply w-full;
+}
+
+/* ==========================================================================
+   Label
+   ========================================================================== */
+
+.color-field__label {
+  @apply w-fit text-sm font-medium text-foreground;
+}
+
+/* ==========================================================================
+   Input
+   ========================================================================== */
+
+.color-field__input {
+  @apply rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none sm:text-xs;
+
+  height: 2.25rem;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-smooth),
+    border-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &::placeholder {
+    @apply text-field-placeholder;
+  }
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Readonly state */
+  &[readonly],
+  &[data-readonly] {
+    @apply cursor-default;
+  }
+
+  /* Invalid state */
+  &[aria-invalid="true"],
+  &[data-invalid] {
+    border-color: var(--color-danger);
+  }
+}
+
+/* ==========================================================================
+   Description / error message
+   ========================================================================== */
+
+.color-field__description {
+  @apply px-1 text-xs text-muted;
+}
+
+.color-field__error-message {
+  @apply px-1 text-xs;
+  color: var(--color-danger);
+}

package/components/color-input-group.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   ColorInputGroup - Input group for color field with prefix/suffix support
+   ========================================================================== */
+
+/* Wrapper (label + field + description/error) */
+.color-input-group__wrapper {
+  @apply flex flex-col gap-1;
+}
+
+.color-input-group__label {
+  @apply w-fit text-sm font-medium text-foreground;
+}
+
+.color-input-group__description {
+  @apply px-1 text-xs text-muted;
+}
+
+.color-input-group__error-message {
+  @apply px-1 text-xs;
+  color: var(--color-danger);
+}
+
+/* Base styles */
+.color-input-group {
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-smooth),
+    border-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &:hover:not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply status-focused-field;
+  }
+
+  /* Invalid state */
+  &[aria-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Elements
+   ========================================================================== */
+
+.color-input-group__input {
+  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none outline-none sm:text-sm;
+
+  /* Placeholder styling */
+  &::placeholder {
+    @apply text-field-placeholder;
+  }
+
+  /* Remove border radius on left side when prefix is present */
+  .color-input-group:has([data-slot="color-input-group-prefix"]) & {
+    @apply rounded-l-none pl-2;
+  }
+
+  /* Remove border radius on right side when suffix is present */
+  .color-input-group:has([data-slot="color-input-group-suffix"]) & {
+    @apply rounded-r-none pr-2;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.color-input-group__prefix {
+  @apply shrink-0 text-field-placeholder;
+  @apply mr-0 ml-3 flex items-center;
+}
+
+.color-input-group__suffix {
+  @apply shrink-0 text-field-placeholder;
+  @apply mr-3 flex items-center;
+}
+
+/* ==========================================================================
+   Variant modifiers
+   ========================================================================== */
+
+.color-input-group--primary {
+  /* Default styles - primary variant uses the base field styling */
+}
+
+.color-input-group--secondary {
+  @apply shadow-none;
+  background-color: var(--color-input-group-bg);
+
+  --color-input-group-bg: var(--color-default);
+  --color-input-group-bg-hover: var(--color-default-hover);
+  --color-input-group-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &:hover:not([data-focus-within="true"]) {
+      background-color: var(--color-input-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--color-input-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[aria-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--color-input-group-bg-focus);
+  }
+
+  [data-slot="color-input-group-input"] {
+    @apply bg-transparent;
+  }
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.color-input-group--full-width {
+  @apply w-full;
+}

package/components/color-picker.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   ColorPicker - Color selection component with popover
+   ========================================================================== */
+
+/* Base color-picker styles
+   Vertical panel layout: preview swatch → 2D area → sliders → hex field.
+   Sized to match the ColorArea's max width (14rem / 224px). */
+.color-picker {
+  @apply inline-flex flex-col gap-3 rounded-2xl border bg-overlay p-3;
+
+  width: max-content;
+  border-color: var(--border);
+  box-shadow: var(--shadow-overlay);
+
+  /* Preview swatch at the top, inline with an optional label/summary */
+  > .color-swatch {
+    @apply size-8 rounded-full;
+  }
+
+  /* Ensure child components flex to the panel width */
+  > .color-slider,
+  > .color-field {
+    @apply w-full;
+  }
+}
+
+/* ==========================================================================
+   Trigger
+   ========================================================================== */
+
+.color-picker__trigger {
+  @apply inline-flex items-center gap-3 rounded-sm text-sm no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  [data-slot="label"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Popover
+   ========================================================================== */
+
+.color-picker__popover {
+  @apply min-w-62 origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay px-2 pt-2 pb-3;
+  box-shadow: var(--shadow-overlay);
+  border-radius: calc(var(--radius) * 2.5);
+  /* Content layout */
+  @apply flex flex-col gap-3;
+
+  /* Hide scrollbar */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* For IE and Edge */
+  -ms-overflow-style: none;
+  /* For Firefox */
+  scrollbar-width: none;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  & {
+    @apply animate-in duration-300 ease-smooth fade-in-0 zoom-in-95;
+
+    /* Placement-specific translations */
+    &[data-placement^="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement^="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement^="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement^="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  & {
+    @apply animate-out duration-300 ease-smooth zoom-out-95 fade-out;
+  }
+
+  &,
+  & {
+    @apply will-change-[opacity,transform];
+  }
+}

package/components/color-slider.css

@@ -0,0 +1,266 @@
+/* ==========================================================================
+   ColorSlider - A slider for adjusting individual color channel values
+   ========================================================================== */
+
+/* Base styles */
+.color-slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+
+  /* When neither label nor output exist, collapse to single row */
+  &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
+    grid-template-areas: "track";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    gap: 0;
+  }
+
+  /* When only label exists (no output) */
+  &:has([data-slot="label"]):not(:has(.color-slider__output)) {
+    grid-template-areas:
+      "label"
+      "track";
+    grid-template-columns: 1fr;
+  }
+
+  /* When only output exists (no label) */
+  &:not(:has([data-slot="label"])):has(.color-slider__output) {
+    grid-template-areas:
+      "output"
+      "track";
+    grid-template-columns: 1fr;
+
+    .color-slider__output {
+      justify-self: end;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .color-slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .color-slider__track {
+    @apply relative rounded-full;
+
+    grid-area: track;
+    /* Edge cap pseudo-elements */
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: 0;
+      pointer-events: none;
+    }
+  }
+
+  .color-slider__thumb {
+    /* Flex container for centering */
+    @apply absolute flex cursor-grab items-center justify-center rounded-full no-highlight;
+
+    /* Border to create white ring around the thumb */
+    @apply border-3 border-white shadow-overlay;
+
+    /* Ensure thumb is above edge caps */
+    z-index: 1;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      transform 300ms var(--ease-out),
+      box-shadow 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+    }
+
+    /* Focus state - show focus ring */
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled] {
+      @apply cursor-default bg-default;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    flex-direction: column;
+
+    .color-slider__track {
+      @apply h-5 justify-self-center rounded-none;
+      width: calc(100% - 1.25rem);
+
+      /* Default border for visibility against similar backgrounds */
+      box-shadow:
+        inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+        inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+
+      /* Edge caps for horizontal orientation */
+      &::before,
+      &::after {
+        @apply top-0 h-full;
+        width: 0.625rem; /* Half thumb width + 2px gap */
+      }
+
+      &::before {
+        left: -0.625rem;
+        border-top-left-radius: 999px;
+        border-bottom-left-radius: 999px;
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background:
+          linear-gradient(var(--track-start-color, transparent)),
+          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+      }
+
+      &::after {
+        right: -0.625rem;
+        border-top-right-radius: 999px;
+        border-bottom-right-radius: 999px;
+        box-shadow:
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background-color: var(--track-end-color, transparent);
+      }
+    }
+
+    .color-slider__thumb {
+      @apply top-1/2 size-4;
+      /* Reka sets inline transform: translateX(-50%) for horizontal thumbs,
+         which blocks Tailwind's translate-y utility. Use negative margin
+         to center the thumb vertically on the track without conflicting. */
+      margin-top: -0.5rem;
+    }
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply h-full gap-2;
+
+    flex-direction: row;
+    grid-template-areas:
+      "output"
+      "track"
+      "label";
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-items: center;
+
+    /* When neither label nor output exist in vertical, just show track */
+    &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
+      grid-template-areas: "track";
+      grid-template-rows: 1fr;
+      gap: 0;
+    }
+
+    /* When only label exists in vertical (no output) */
+    &:has([data-slot="label"]):not(:has(.color-slider__output)) {
+      grid-template-areas:
+        "track"
+        "label";
+      grid-template-rows: 1fr auto;
+    }
+
+    /* When only output exists in vertical (no label) */
+    &:not(:has([data-slot="label"])):has(.color-slider__output) {
+      grid-template-areas:
+        "output"
+        "track";
+      grid-template-rows: auto 1fr;
+    }
+
+    .color-slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .color-slider__track {
+      @apply w-5 justify-self-center rounded-none;
+      height: calc(100% - 1.25rem);
+
+      /* Left and right borders for vertical track */
+      box-shadow:
+        inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+        inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
+
+      /* Edge caps for vertical orientation */
+      &::before,
+      &::after {
+        @apply left-0 w-full;
+        height: 0.625rem; /* Half thumb height + 2px gap */
+      }
+
+      &::before {
+        bottom: -0.625rem;
+        border-bottom-left-radius: 999px;
+        border-bottom-right-radius: 999px;
+        /* Left, right, and bottom borders for bottom cap */
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background:
+          linear-gradient(var(--track-start-color, transparent)),
+          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+      }
+
+      &::after {
+        top: -0.625rem;
+        border-top-left-radius: 999px;
+        border-top-right-radius: 999px;
+        /* Left, right, and top borders for top cap */
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
+        background-color: var(--track-end-color, transparent);
+      }
+    }
+
+    .color-slider__thumb {
+      @apply left-1/2 size-4;
+      /* Reka sets inline transform: translateY(-50%) for vertical thumbs,
+         which blocks Tailwind's translate-x utility. Use negative margin
+         to center the thumb horizontally on the track without conflicting. */
+      margin-left: -0.5rem;
+    }
+  }
+}