@talelk/newui-tailwind 0.0.0-stage → 1.0.2

package/src/utilities.css

@@ -0,0 +1,177 @@
+/* Focus rings are drawn with `outline`, not `box-shadow`, so they never
+ * collide with a `shadow-*` utility and survive forced-colors mode. The ring
+ * color comes from the `--focus-outline-*` runtime token, which flips theme. */
+@utility focus-ring {
+  outline: var(--focus-outline-default);
+  outline-offset: 0px;
+}
+@utility focus-ring-gray {
+  outline: var(--focus-outline-default);
+  outline-offset: 0px;
+}
+@utility focus-ring-blue {
+  outline: var(--focus-outline-blue);
+  outline-offset: 0px;
+}
+@utility focus-ring-green {
+  outline: var(--focus-outline-green);
+  outline-offset: 0px;
+}
+@utility focus-ring-amber {
+  outline: var(--focus-outline-amber);
+  outline-offset: 0px;
+}
+@utility focus-ring-red {
+  outline: var(--focus-outline-red);
+  outline-offset: 0px;
+}
+@utility focus-ring-violet {
+  outline: var(--focus-outline-violet);
+  outline-offset: 0px;
+}
+
+/* The padded-row outline: the row (Checkbox/Switch `padded`) draws the ring
+ * around itself while its hidden control holds keyboard focus. Same outline
+ * mechanism as `focus-ring` — never a `ring-*` box-shadow, which would
+ * collide with `shadow-*` and vanish in forced-colors mode. */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: var(--focus-outline-default);
+    outline-offset: 0px;
+  }
+}
+
+/* Stacking and motion scales. The numbers live in `@theme` (`--z-*`,
+ * `--duration-*`, generated from `@talelk/newui-tokens`); these utilities are the
+ * named vocabulary components use, so a layer change is a token edit and the
+ * merge config can treat the names as one axis. */
+@utility z-raised {
+  z-index: var(--z-raised);
+}
+@utility z-floating {
+  z-index: var(--z-floating);
+}
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+@utility z-top {
+  z-index: var(--z-top);
+}
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+}
+@utility duration-base {
+  transition-duration: var(--duration-base);
+}
+@utility duration-moderate {
+  transition-duration: var(--duration-moderate);
+}
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}
+@utility duration-progress {
+  transition-duration: var(--duration-progress);
+}
+
+/* A disclosure panel — the body of an `Accordion` item or a `Collapsible`.
+ *
+ * The panel animates its own height, which a `height: auto` element cannot do.
+ * `grid-template-rows: 0fr → 1fr` is the one height animation that needs no
+ * measurement: the wrapper clips, the inner box holds the padding, and the row
+ * collapses to exactly zero. `visibility` is the accessibility half — a
+ * collapsed panel leaves the tab order and the accessibility tree — and it is
+ * delayed by the transition's duration so the close is still visible before the
+ * panel disappears. (Zag marks the panel `hidden`, which would win over all of
+ * this and snap; the components drop that one prop for this reason.)
+ *
+ * Reduced motion collapses the transition rather than the panel: the panel must
+ * still reach its end states. */
+@utility disclosure-panel {
+  display: grid;
+  grid-template-rows: 1fr;
+  visibility: visible;
+  transition:
+    grid-template-rows var(--duration-moderate) var(--ease-out),
+    visibility 0s 0s;
+
+  &[data-state="closed"] {
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows var(--duration-moderate) var(--ease-out),
+      visibility 0s var(--duration-moderate);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &[data-state="closed"] {
+      transition: none;
+    }
+  }
+}
+
+/* Indeterminate progress: the bar slides across the track. Referenced by
+ * `animate-[progress_1.4s_ease-in-out_infinite]` in the Progress component. */
+@keyframes progress {
+  0% {
+    transform: translateX(-110%);
+  }
+  100% {
+    transform: translateX(410%);
+  }
+}
+
+/* Overlay entrances (speeds are the `--animate-*` tokens in `@theme`; the
+ * global reduced-motion block below collapses every one of them). Popups and
+ * modals fade in over a 2px settle — no scale, no slide theatrics. */
+@keyframes overlay-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bottom-anchored sheets rise the last few pixels into place. */
+@keyframes drawer-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Skeleton sheen: sweeps a wide background gradient across the block. The
+ * consumer supplies the gradient and `background-size: 200% 100%`. */
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* Respect the OS "reduce motion" setting everywhere, once. Animations collapse
+ * to a single near-instant frame instead of being removed, so nothing that
+ * depends on an `animationend` (Zag's presence, our exit transitions) stalls. */
+@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;
+  }
+}