@setsquare/ui 0.1.0

package/dist/styles/theme.css

@@ -0,0 +1,579 @@
+/* @setsquare/ui theme — generated from tokens/tokens.json by scripts/build-css.mjs. Do not edit. */
+@theme {
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --color-*: initial;
+  --font-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+}
+/* reference: utilities read the token variables; the values here are fallbacks only */
+@theme reference {
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+@theme inline {
+  --color-brand: var(--brand);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-subtle: var(--destructive-subtle);
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-overlay: var(--overlay);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-primary-hover: color-mix(in oklab, var(--primary) 86%, var(--foreground));
+  --color-destructive-hover: color-mix(in oklab, var(--destructive) 86%, var(--foreground));
+  --spacing-target: var(--target-min);
+  /* Layer 1 of a field: the painted box's height, or the target floor if that is taller. Inline, so a
+     subtree that overrides --control-height or --target-min gets its own value. */
+  --spacing-control-target: max(var(--target-min), var(--control-height));
+  --spacing-control: var(--control-height);
+  --spacing-control-sm: var(--control-height-sm);
+  --spacing-control-lg: var(--control-height-lg);
+  /* max-w-site and max-w-site-narrow, for anyone laying a public page out with utilities of their own */
+  --container-site: var(--site-max);
+  --container-site-narrow: var(--site-max-narrow);
+  --spacing-nav-item: var(--nav-item-height);
+  --spacing-header: var(--header-height);
+  --spacing-sidebar: var(--sidebar-width);
+  --spacing-sidebar-collapsed: var(--sidebar-width-collapsed);
+  --spacing-panel: var(--panel-width);
+  --spacing-choice: var(--choice-size);
+}
+
+@utility focus-ring {
+  outline: var(--focus-width) solid var(--ring);
+  outline-offset: var(--focus-offset);
+}
+@utility focus-ring-inset {
+  outline: var(--focus-width) solid var(--ring);
+  outline-offset: calc(var(--focus-width) * -1);
+}
+
+/* A link in running text. Underlined, because colour can't carry it: brand is under 3:1 against body text in
+   every theme (G183 asks for 3:1 when colour is the only cue; F73 is the failure). The underline thickens on
+   hover. The colour comes separately (text-brand, or the surrounding colour), so it can be overridden. */
+@utility text-link {
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  outline: none;
+  &:hover,
+  &[data-hovered] {
+    text-decoration-thickness: 2px;
+  }
+  &:focus-visible,
+  &[data-focus-visible] {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
+  }
+  &[data-disabled],
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    text-decoration-style: dotted;
+  }
+}
+
+/* Fields in three layers. The <input> (or trigger button, or segment group) is Layer 1: it is the whole
+   target, --spacing-control-target tall, with no click handler to route a larger wrapper to it. Layer 2,
+   the box people see, is painted behind it by ::before, inset by the band between the two heights, so a
+   single-line box paints at --control-height. Layer 3 is the text.
+   States go on the pseudo-element: focus-within:before:focus-ring, group-data-invalid/field:before:… */
+@utility field-paint {
+  /* The band between the target and the paint, for children that clip their own ground to it. */
+  --field-band: calc((max(var(--target-min), var(--control-height)) - var(--control-height)) / 2);
+  position: relative;
+  isolation: isolate;
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-inline: 0;
+    /* The band off the top and bottom: a single-line box paints at --control-height, and a box that wraps
+       (a date range on a narrow screen) paints around both lines. */
+    inset-block: var(--field-band);
+    border: 1px solid var(--input);
+    border-radius: var(--radius-md);
+    background-color: var(--background);
+    pointer-events: none;
+  }
+}
+/* A text input that is Layer 1 of a field-paint box. The transparent block borders are the band between
+   the target and the paint, so anything the browser paints on the input itself (autofill) stays inside
+   the painted box; the elliptical radius makes the inner corners match it. */
+@utility field-input {
+  --field-band: calc((max(var(--target-min), var(--control-height)) - var(--control-height)) / 2);
+  height: max(var(--target-min), var(--control-height));
+  width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-block-width: calc(var(--field-band) + 1px);
+  border-radius: var(--radius-md) / calc(var(--radius-md) + var(--field-band));
+  background-color: transparent;
+  background-clip: padding-box;
+  outline: none;
+}
+
+/* ---------- the site layer: what a public page is made of, usable from any Tailwind 4 app ----------
+   Structure only: grounds, spacing and widths come from tokens a product can re-point. The React components
+   (Section, Card, Prose…) apply these same utilities. */
+
+/* A box that shows a site shell at its own width, not the viewport's: a preview in documentation, a design
+   review. Inside it the site-md/lg/xl variants follow the box (a container query) instead of the window, and
+   the fluid sizes, which read --site-vw (1vw elsewhere), follow it too. A real page needs none of this: there
+   the shell spans the window and the variants are ordinary media queries. Give it a width; it clips nothing.
+   The fluid tokens are declared again here: on :root their --site-vw has already become 1vw. */
+@utility site-preview {
+  container: site-preview / inline-size;
+  --site-vw: 1cqi;
+  --site-gutter: clamp(20px, calc(3.2 * var(--site-vw, 1vw)), 44px);
+  --section-y: clamp(56px, calc(7 * var(--site-vw, 1vw)), 112px);
+  --section-y-tight: clamp(40px, calc(5 * var(--site-vw, 1vw)), 80px);
+}
+
+/* The content width of a public page, centred, with the gutter either side. */
+@utility site-container {
+  width: 100%;
+  max-width: calc(var(--site-max) + 2 * var(--site-gutter));
+  margin-inline: auto;
+  padding-inline: var(--site-gutter);
+}
+@utility site-container-narrow {
+  width: 100%;
+  max-width: calc(var(--site-max-narrow) + 2 * var(--site-gutter));
+  margin-inline: auto;
+  padding-inline: var(--site-gutter);
+}
+/* A full-width band: one section of the page. For a decorative bleed inside it, add overflow-clip, never
+   overflow-hidden: clip makes no scroll container, so focus can't scroll it. */
+@utility section-band {
+  position: relative;
+  padding-block: var(--section-y);
+}
+@utility section-band-tight {
+  position: relative;
+  padding-block: var(--section-y-tight);
+}
+/* The alternate ground. At AAA the border meets 3:1, so bands read by edge as well as by shade. */
+@utility section-band-raised {
+  position: relative;
+  padding-block: var(--section-y);
+  background-color: var(--card);
+  border-block: 1px solid var(--border);
+}
+/* A section's eyebrow, heading and intro, inside --measure, with the space before its content. */
+@utility section-head {
+  max-width: var(--measure);
+  margin-bottom: var(--space-12);
+  & > * + * {
+    margin-top: var(--space-3);
+  }
+}
+/* A short label above a heading. Sentence case: a product with a brand of its own may capitalise it. */
+@utility eyebrow {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+/* Long text: a privacy notice, a guide. Inside --measure, with --paragraph-gap between blocks (both larger at
+   AAA), and line spacing of 1.6, over 1.4.8's 1.5. Tailwind's reset takes list markers off; these put them
+   back, so lists read as lists. */
+@utility site-prose {
+  max-width: var(--measure);
+  font-size: 1rem;
+  line-height: 1.6;
+  & > * + * {
+    margin-top: var(--paragraph-gap);
+  }
+  & h2 {
+    margin-top: 2em;
+    font-size: 1.375rem;
+    line-height: 1.3;
+    font-weight: 700;
+  }
+  & h3 {
+    margin-top: 1.5em;
+    font-size: 1.125rem;
+    line-height: 1.4;
+    font-weight: 700;
+  }
+  & :is(h2, h3) + * {
+    margin-top: 0.5em;
+  }
+  & ul {
+    list-style: disc;
+    padding-inline-start: 1.5em;
+  }
+  & ol {
+    list-style: decimal;
+    padding-inline-start: 1.5em;
+  }
+  & li + li {
+    margin-top: 0.5em;
+  }
+  & code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: 0.1em 0.35em;
+    border-radius: var(--radius-sm);
+    background-color: var(--muted);
+  }
+  & strong {
+    font-weight: 700;
+  }
+}
+@utility card-surface {
+  position: relative;
+  padding: var(--space-6);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background-color: var(--card);
+}
+/* Cards as many to a row as fit at 18rem or more, one to a row on a phone. */
+@utility card-grid {
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+}
+/* Text beside media, stacking once the two don't fit at 22rem each. min-width: 0 keeps a code block from
+   widening its column past the page. */
+@utility split {
+  display: grid;
+  gap: var(--space-12);
+  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  align-items: center;
+  & > * {
+    min-width: 0;
+  }
+}
+/* Numbered steps on an <ol>. The number is generated content, so it is read out; give the <ol> role="list",
+   because Tailwind's reset takes the markers off and VoiceOver in Safari then drops the list. */
+@utility steps {
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+  counter-reset: step;
+  list-style: none;
+  padding: 0;
+  & > li {
+    counter-increment: step;
+  }
+  & > li::before {
+    content: counter(step);
+    display: block;
+    margin-bottom: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 20px;
+    color: var(--muted-foreground);
+  }
+}
+/* Figures on a <dl>: each <div> holds a <dt> (what it counts) and a <dd> (the figure), shown figure first, and
+   may hold a second <dd>, the figure's source, shown last. The order is visual only; a screen reader reads
+   what it counts, the figure, then the source. */
+@utility stat-list {
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  & dt {
+    font-size: 13px;
+    line-height: 20px;
+    color: var(--muted-foreground);
+  }
+  & dd {
+    margin: 0;
+  }
+  & dd:first-of-type {
+    order: -1;
+    font-size: 2rem;
+    line-height: 1.1;
+    font-weight: 700;
+  }
+  & dd + dd {
+    font-size: 13px;
+    line-height: 20px;
+    color: var(--muted-foreground);
+  }
+}
+/* A short label in a pill: "Open source", "dev only". Not a status; StatusBadge is. */
+@utility tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+@layer base {
+  html {
+    scroll-padding-top: calc(var(--header-height) + var(--space-4));
+    scroll-padding-bottom: calc(var(--toast-region-height, 0px) + var(--space-4));
+  }
+  /* A public page with a sticky SiteHeader: its measured height (SiteHeaderPadding keeps it current), 4rem until
+     that runs. A public page without one needs no top padding. */
+  :root:has([data-site-shell]:not(.site-preview *)) {
+    scroll-padding-top: var(--space-4);
+  }
+  :root:has([data-site-header-sticky]:not(.site-preview *)) {
+    scroll-padding-top: calc(var(--site-header-height, 4rem) + var(--space-4));
+  }
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+  .lucide { stroke-width: 1.75; }
+  /* Tailwind's reset strips links to plain text. A link nobody styled — in Markdown, CMS content or a plain
+     <a> in a paragraph — gets the text-link look back, so it is never marked by colour alone. */
+  a[href]:not([class]) {
+    color: var(--brand);
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+  a[href]:not([class]):hover {
+    text-decoration-thickness: 2px;
+  }
+  /* One cursor rule: the hand on everything that can be pressed, not only links, because a button and a
+     link that look alike should act alike. Disabled things say so. Zero specificity, so any class wins;
+     the components set the same on their targets (Layer 1). No WCAG criterion covers the cursor: this is
+     for consistency. */
+  :where(
+      button,
+      input:is([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='file']),
+      select,
+      summary,
+      label:has(input:is([type='checkbox'], [type='radio'])),
+      [role='button'],
+      [role='link'],
+      [role='tab'],
+      [role='checkbox'],
+      [role='radio'],
+      [role='switch'],
+      [role='option'],
+      [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio']
+    ) {
+    cursor: pointer;
+  }
+  :where(:disabled, [aria-disabled='true'], [data-disabled]) {
+    cursor: not-allowed;
+  }
+  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
+  }
+  @media (forced-colors: active) {
+    [data-focus-visible], :focus-visible { outline-color: Highlight; }
+  }
+}
+
+/* ---------- overlays: slide by motion-distance (0 at AAA: fade only) ---------- */
+[data-overlay][data-entering] { animation: setsquare-fade var(--duration-panel) var(--ease-standard); }
+[data-overlay][data-exiting] { animation: setsquare-fade var(--duration-exit) var(--ease-standard) reverse; }
+[data-sheet][data-entering] { animation: setsquare-sheet var(--duration-panel) var(--ease-standard); }
+[data-sheet][data-exiting] { animation: setsquare-sheet var(--duration-exit) var(--ease-standard) reverse; }
+[data-sheet="right"] { --sheet-from: calc(var(--motion-distance) * 3) 0; }
+[data-sheet="left"] { --sheet-from: calc(var(--motion-distance) * -3) 0; }
+[data-sheet="top"] { --sheet-from: 0 calc(var(--motion-distance) * -1); }
+@keyframes setsquare-fade { from { opacity: 0; } }
+@keyframes setsquare-sheet { from { opacity: 0; translate: var(--sheet-from, 0 0); } }
+@keyframes setsquare-toast { from { opacity: 0; translate: 0 var(--motion-distance); } }
+
+/* ---------- view transitions: the shell is the anchor, content moves ---------- */
+::view-transition { pointer-events: none; }
+::view-transition-group(shell-header), ::view-transition-group(shell-sidebar), ::view-transition-group(site-header) { animation: none; z-index: 100; }
+::view-transition-old(shell-header), ::view-transition-old(shell-sidebar), ::view-transition-old(site-header) { display: none; }
+::view-transition-new(shell-header), ::view-transition-new(shell-sidebar), ::view-transition-new(site-header) { animation: none; }
+/* A page leaves, then the next arrives. Chromium paints only the transition's images, so the new page is hidden
+   until its turn. Safari (WebKit) also paints the live new page beneath them, and ShellMain has no ground of its
+   own, so the new page would show through the old one as it leaves. So for exactly the exit, the old page's place
+   is covered with the ground ShellMain sits on, and the right panel's with its own: in both engines the old page
+   fades into the ground, then Safari shows the new page as the cover lifts and Chromium fades it in. The cover is
+   on the image pair, which holds only the old image. A right panel that stays crossfades in the browser's own way;
+   one that leaves (the next page has none) is opaque already, so it holds until the old page has gone and goes
+   with it, rather than fading over the new page in Safari. */
+::view-transition-image-pair(.page-exit) { animation: var(--duration-exit) linear setsquare-cover; }
+::view-transition-old(.page-exit) { animation: var(--duration-exit) var(--ease-standard) both setsquare-page-out; }
+::view-transition-new(.page-enter) { animation: var(--duration-enter) var(--ease-standard) var(--duration-exit) both setsquare-page-in; }
+::view-transition-old(shell-panel):only-child { animation: var(--duration-exit) step-end both setsquare-cut; }
+@keyframes setsquare-cover { from, to { background-color: var(--background); } }
+@keyframes setsquare-cut { to { opacity: 0; } }
+::view-transition-old(.panel-swap) { animation: var(--duration-exit) var(--ease-standard) both setsquare-fade reverse; }
+::view-transition-new(.panel-swap) { animation: var(--duration-enter) var(--ease-standard) both setsquare-fade; }
+@keyframes setsquare-page-out { to { opacity: 0; translate: 0 calc(var(--motion-distance) * -1); } }
+@keyframes setsquare-page-in { from { opacity: 0; translate: 0 var(--motion-distance); } }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-overlay], [data-sheet] { animation-duration: 0s !important; }
+  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+  }
+}
+
+@utility text-title {
+  font-family: var(--font-sans);
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+@utility text-heading {
+  font-family: var(--font-sans);
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+}
+@utility text-subheading {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+@utility text-body {
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+@utility text-ui {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+@utility text-ui-strong {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+@utility text-caption {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+}
+@utility text-caption-strong {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+}
+@utility text-display {
+  font-family: var(--font-sans);
+  font-size: clamp(36px, calc(1.6667rem + 2.9167 * var(--site-vw, 1vw)), 64px);
+  line-height: 1.05;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  overflow-wrap: break-word;
+}
+@utility text-display-page {
+  font-family: var(--font-sans);
+  font-size: clamp(32px, calc(1.6667rem + 1.6667 * var(--site-vw, 1vw)), 48px);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  overflow-wrap: break-word;
+}
+@utility text-display-section {
+  font-family: var(--font-sans);
+  font-size: clamp(24px, calc(1.25rem + 1.25 * var(--site-vw, 1vw)), 36px);
+  line-height: 1.15;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  overflow-wrap: break-word;
+}
+@utility text-lead {
+  font-family: var(--font-sans);
+  font-size: clamp(17px, calc(1rem + 0.3125 * var(--site-vw, 1vw)), 20px);
+  line-height: 1.5;
+  font-weight: 400;
+  overflow-wrap: break-word;
+}
+@utility text-code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+}
+@custom-variant site-md {
+  @media (width >= 48rem) {
+    &:where(:not(.site-preview *)) {
+      @slot;
+    }
+  }
+  @container site-preview (width >= 48rem) {
+    @slot;
+  }
+}
+@custom-variant site-lg {
+  @media (width >= 64rem) {
+    &:where(:not(.site-preview *)) {
+      @slot;
+    }
+  }
+  @container site-preview (width >= 64rem) {
+    @slot;
+  }
+}
+@custom-variant site-xl {
+  @media (width >= 80rem) {
+    &:where(:not(.site-preview *)) {
+      @slot;
+    }
+  }
+  @container site-preview (width >= 80rem) {
+    @slot;
+  }
+}