@horon-ai/react 0.0.0-stage → 0.1.1

package/src/styles/globals.css

@@ -0,0 +1,564 @@
+@import "tailwindcss";
+@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
+@import "@fontsource-variable/geist-mono";
+@import "@horon-ai/tokens/theme.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body {
+    background-color: var(--color-bg-default);
+    color: var(--color-text-primary);
+  }
+}
+
+/* iOS Safari zooms the whole page in when a focused form control's font size is
+ * under 16px, and it does not zoom back out on blur, so one tap on a 14px field
+ * leaves the layout cropped. A 16px floor on the control removes the trigger and
+ * the page stays at 1x. `maximum-scale` and `user-scalable=no` would also stop
+ * the zoom but take the user's own pinch zoom away, so this rule is the only
+ * remedy used. Coarse pointers only: a mouse-driven screen never zooms on focus,
+ * so it keeps the designed 13/14px field text, and coarse is the closest signal
+ * for the devices that do. max(16px, 1em) leaves text on a larger scale alone
+ * instead of shrinking it. Unlayered on purpose: field utilities such as
+ * `text-body-sm` sit in Tailwind's `utilities` layer and would otherwise win,
+ * leaving the control at 14px and the zoom in place. */
+@media (pointer: coarse) {
+  input,
+  textarea,
+  select {
+    font-size: max(16px, 1em);
+  }
+}
+
+/* Glass, the material in @horon-ai/tokens glass.ts that Flutter's
+ * HoronLiquidGlass draws with the same values: the backdrop blurred and
+ * saturated, under the host's own fill, and a rim ring on the edge. Only
+ * backdrop-filter, gradients and masks, so Chromium, Safari and Firefox match. */
+@layer components {
+  .liquid-layers {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  }
+
+  /* The rim: a vertical gradient cut down to a ring by masking the border-box
+   * against the content-box. A host tints it for a state (selected, pending,
+   * danger) by setting --glass-edge to a colour; a field in error does it
+   * through data-invalid. Longhands, not the `mask` shorthand: the site's CSS
+   * minifier drops the `exclude` operator from the shorthand and the ring would
+   * fill the whole surface. */
+  .liquid-layers::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--glass-rim-width);
+    background: var(
+      --glass-edge,
+      linear-gradient(
+        to bottom,
+        var(--glass-rim-top),
+        var(--glass-rim-mid) var(--glass-rim-mid-stop),
+        var(--glass-rim-bottom)
+      )
+    );
+    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    mask-clip: content-box, border-box;
+    mask-composite: exclude;
+    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    -webkit-mask-clip: content-box, border-box;
+    -webkit-mask-composite: xor;
+  }
+
+  /* The tint is the host's own: every glass host resets it, so a glass button
+   * inside a pending card keeps its plain rim. Zero specificity, so the host's
+   * `[--glass-edge:…]` utility still wins. */
+  :where(:has(> .liquid-layers)) {
+    --glass-edge: initial;
+  }
+
+  :is([data-invalid], :has(> [data-invalid])) > .liquid-layers {
+    --glass-edge: var(--color-border-danger);
+  }
+
+  /* No translucency by request, or no backdrop filter in the engine: a frosted
+   * fill that keeps the text readable. The rim stays. */
+  @media (prefers-reduced-transparency: reduce) {
+    .liquid-layers {
+      background: var(--color-glass-fill-frost);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    .liquid-layers {
+      background: var(--color-glass-fill-frost);
+    }
+  }
+
+  /* The veil, glass.ts `veil`: the light glass of fields (`veil-field`) and
+   * overlays (`veil-overlay`). An 8px blur with 160% saturation, a fill, a 1px
+   * ring drawn as a shadow and a soft drop shadow; no rim, no liquid layers.
+   * A field in error swaps the ring for the danger colour. */
+  .veil-field,
+  .veil-overlay {
+    -webkit-backdrop-filter: blur(var(--veil-blur)) saturate(var(--veil-saturate));
+    backdrop-filter: blur(var(--veil-blur)) saturate(var(--veil-saturate));
+    border-color: transparent;
+  }
+
+  .veil-field {
+    background-color: var(--veil-field);
+    box-shadow:
+      0 0 0 var(--veil-ring-width) var(--veil-ring),
+      0 2px 10px var(--veil-field-shadow);
+  }
+
+  .veil-field:focus-within {
+    background-color: var(--veil-field-focus);
+  }
+
+  .veil-field:is([data-invalid], :has([data-invalid])) {
+    box-shadow: 0 0 0 var(--veil-ring-width) var(--color-border-danger);
+  }
+
+  .veil-overlay {
+    background-color: var(--veil-overlay);
+    box-shadow:
+      0 0 0 var(--veil-ring-width) var(--veil-ring),
+      0 6px 24px var(--veil-overlay-shadow);
+  }
+
+  /* File drop: the veil's blur, fill and soft shadow without the ring, because
+   * the target's 1.5px dashed border is the only outline it should show. */
+  .veil-drop {
+    -webkit-backdrop-filter: blur(var(--veil-blur)) saturate(var(--veil-saturate));
+    backdrop-filter: blur(var(--veil-blur)) saturate(var(--veil-saturate));
+    background-color: var(--veil-field);
+    box-shadow: 0 2px 10px var(--veil-field-shadow);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .veil-field,
+    .veil-overlay,
+    .veil-drop {
+      background-color: var(--color-glass-fill-frost);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    .veil-field,
+    .veil-overlay,
+    .veil-drop {
+      background-color: var(--color-glass-fill-frost);
+    }
+  }
+}
+
+/* Motion. The Figma file defines no motion variables, so the library's motion
+ * lives here: three easings, a few keyframes, and utilities components compose.
+ * Durations: 120-150ms for color and press feedback, 180-240ms for popups and
+ * panels, ~280ms for indicators that travel between items. */
+@theme {
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
+
+  --animate-shimmer: shimmer 1.6s linear infinite;
+  --animate-live-pulse: live-pulse 2s var(--ease-out-quint) infinite;
+  --animate-caret: caret-blink 1s steps(1, end) infinite;
+  --animate-thinking: thinking-dot 1.2s ease-in-out infinite;
+  --animate-pop-in: pop-in 220ms var(--ease-spring) both;
+  --animate-pop-out: pop-out 130ms ease-in both;
+  --animate-wave: wave-level 900ms ease-in-out infinite;
+  --animate-slide-next: slide-next 200ms var(--ease-out-quint) both;
+  --animate-slide-prev: slide-prev 200ms var(--ease-out-quint) both;
+  --animate-slide-shift-next: slide-shift-next 200ms var(--ease-out-quint) both;
+  --animate-slide-shift-prev: slide-shift-prev 200ms var(--ease-out-quint) both;
+  --animate-swap-move: swap-move 200ms var(--ease-out-quint) both;
+  --animate-fade-in: fade-in 160ms var(--ease-out-quint) both;
+  --animate-scale-out: scale-out 120ms ease-in both;
+  --animate-sweep: sweep 1.4s var(--ease-out-quint) infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes live-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent);
+    }
+    70%,
+    100% {
+      box-shadow: 0 0 0 6px transparent;
+    }
+  }
+
+  @keyframes caret-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes thinking-dot {
+    0%,
+    80%,
+    100% {
+      opacity: 0.3;
+      translate: 0 0;
+    }
+    40% {
+      opacity: 1;
+      translate: 0 -2px;
+    }
+  }
+
+  @keyframes tab-panel-in {
+    from {
+      opacity: 0;
+      translate: 0 4px;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes pop-in {
+    from {
+      opacity: 0;
+      scale: 0.6;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+    to {
+      opacity: 0;
+      scale: 0.97;
+    }
+  }
+
+  @keyframes wave-level {
+    0%,
+    100% {
+      scale: 1 0.35;
+    }
+    50% {
+      scale: 1 1;
+    }
+  }
+
+  @keyframes slide-next {
+    from {
+      opacity: 0;
+      translate: 12px 0;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes slide-prev {
+    from {
+      opacity: 0;
+      translate: -12px 0;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* Opacity-free variants of slide-next/prev: a panel that is replaced in place moves in without a
+   * blank first frame. */
+  @keyframes slide-shift-next {
+    from {
+      translate: 12px 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes slide-shift-prev {
+    from {
+      translate: -12px 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  /* The same, for content that is swapped rather than slid: a short rise with no fade. */
+  @keyframes swap-move {
+    from {
+      translate: 0 4px;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  /* In-place text and value changes: a label, caret or number that is replaced, not moved. */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Deeper than pop-out, for small glyphs (checkmarks, radio dots) leaving a fixed slot. */
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+    to {
+      opacity: 0;
+      scale: 0.6;
+    }
+  }
+
+  /* Indeterminate progress: a bar one third of the track wide that crosses it and re-enters. */
+  @keyframes sweep {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 400% 0;
+    }
+  }
+}
+
+/* Optical centering for one-line labels in fixed-height pills and controls: the label box is trimmed to the
+ * cap height and the alphabetic baseline, so `items-center` centres the letters instead of the font's
+ * ascent/descent box, whatever the font. Put it on the label element (a flex item), not the container: an
+ * anonymous text run is not trimmed. Only inside a fixed height, since it shrinks the label box. Browsers
+ * without `text-box` keep the plain line box. */
+@utility text-trim {
+  text-box: trim-both cap alphabetic;
+}
+
+/* Panel, lane and row entrance; stagger with animation-delay: calc(var(--i) * 30ms). */
+@utility motion-rise {
+  animation: tab-panel-in 220ms var(--ease-out-quint) both;
+}
+
+/* Popups (Select, Menu, Tooltip, Popover, Dialog): fade and grow from the
+ * anchor (Base UI sets --transform-origin), leave a little faster. Uses the
+ * `scale` property so it never fights a positioner's transform. */
+@utility motion-popup {
+  transform-origin: var(--transform-origin, center);
+  transition-property: opacity, scale, translate;
+  transition-duration: 200ms;
+  transition-timing-function: var(--ease-out-quint);
+
+  &[data-starting-style] {
+    opacity: 0;
+    scale: 0.95;
+  }
+
+  &[data-ending-style] {
+    opacity: 0;
+    scale: 0.97;
+    transition-duration: 130ms;
+    transition-timing-function: ease-in;
+  }
+}
+
+/* Backdrops and other plain fades. */
+@utility motion-fade {
+  transition-property: opacity;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+/* Base UI Collapsible / Accordion panels: animate to and from the measured
+ * --collapsible-panel-height. */
+@utility motion-collapse {
+  overflow: hidden;
+  height: var(--collapsible-panel-height);
+  transition-property: height, opacity;
+  transition-duration: 240ms;
+  transition-timing-function: var(--ease-out-quint);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* A <details> whose body opens and closes by height instead of snapping. Chromium 131+ and
+ * Safari 18.4+ animate ::details-content; other browsers keep the instant toggle. */
+@utility motion-details {
+  interpolate-size: allow-keywords;
+
+  &::details-content {
+    block-size: 0;
+    overflow: hidden;
+    transition-property: block-size, content-visibility;
+    transition-duration: 240ms;
+    transition-timing-function: var(--ease-out-quint);
+    transition-behavior: allow-discrete;
+  }
+
+  &[open]::details-content {
+    block-size: auto;
+  }
+}
+
+/* An inline block that opens and closes in place where Base UI's Collapsible is not used, so
+ * --collapsible-panel-height is not available: one grid row animates between 1fr (open) and 0fr.
+ * Wrap exactly one child; the child clips its own overflow. The wrapper is open by default — add
+ * data-collapsed to close it, and give focusable descendants `inert` while it is collapsed. */
+@utility motion-reveal {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition-property: grid-template-rows, opacity;
+  transition-duration: 200ms, 150ms;
+  transition-timing-function: var(--ease-out-quint), ease-out;
+
+  > * {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  &[data-collapsed] {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+
+/* The horizontal counterpart of motion-reveal, for a slot that appears beside other content
+ * (an action button, a badge). Same contract: open by default, data-collapsed to close. */
+@utility motion-reveal-x {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  opacity: 1;
+  transition-property: grid-template-columns, opacity;
+  transition-duration: 200ms, 150ms;
+  transition-timing-function: var(--ease-out-quint), ease-out;
+
+  > * {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &[data-collapsed] {
+    grid-template-columns: minmax(0, 0fr);
+    opacity: 0;
+  }
+}
+
+/* One slot, two states: stack both children in the same grid cell and put data-hidden on the
+ * inactive one, so a control's icon, label or action crossfades instead of swapping. The slot is
+ * as wide as the larger child. Also give the inactive child aria-hidden and tabIndex={-1}. */
+@utility motion-swap {
+  display: grid;
+  grid-template-areas: "swap";
+
+  > * {
+    grid-area: swap;
+    transition-property: opacity, scale;
+    transition-duration: 150ms;
+    transition-timing-function: var(--ease-out-quint);
+  }
+
+  > [data-hidden] {
+    opacity: 0;
+    scale: 0.95;
+    pointer-events: none;
+  }
+}
+
+/* An indicator that travels between items (tabs, segmented control, tab bar). */
+@utility motion-indicator {
+  transition-property: translate, left, top, width, height, opacity;
+  transition-duration: 280ms;
+  transition-timing-function: var(--ease-emphasized);
+}
+
+/* Color feedback for hover, focus, selection and validation. */
+@utility motion-colors {
+  transition-property: color, background-color, border-color, outline-color, box-shadow, opacity, fill, stroke;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+/* Pressable controls: color feedback plus a small press-in. */
+@utility motion-press {
+  transition-property: color, background-color, border-color, box-shadow, opacity, scale;
+  transition-duration: 150ms;
+  transition-timing-function: var(--ease-out-quint);
+
+  &:active:not(:disabled, [data-disabled], [aria-disabled="true"]) {
+    scale: 0.97;
+  }
+}
+
+/* Users who ask for less motion get instant state changes; looping animations stop after one frame. */
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/* Paper sidebar ground: #EEF3F8 under the Horon photo (bottom-anchored cover) and a 55% white veil. */
+@utility bg-sidebar-photo {
+  background-color: #eef3f8;
+  background-image: linear-gradient(#ffffff8c, #ffffff8c), url("../assets/sidebar-photo.jpg");
+  background-size: auto, cover;
+  background-position:
+    center,
+    50% 100%;
+  background-repeat: no-repeat;
+}