@talelk/newui-tailwind 0.0.0-stage → 1.0.0

package/src/utilities.css

@@ -0,0 +1,120 @@
+/* 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;
+}
+
+/* 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-fast {
+  transition-duration: var(--duration-fast);
+}
+@utility duration-base {
+  transition-duration: var(--duration-base);
+}
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}
+
+/* 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 200ms cubic-bezier(0.23, 1, 0.32, 1),
+    visibility 0s 0s;
+
+  &[data-state="closed"] {
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1),
+      visibility 0s 200ms;
+  }
+
+  @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%);
+  }
+}
+
+/* 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;
+  }
+}