@codenhub/styles 0.0.3 → 0.1.0

package/dist/tw/components/loader.css

@@ -0,0 +1,122 @@
+@reference "tailwindcss";
+@source inline("loader dots-wave dots-fade dots-queue dots-rotate dots-grow dots-grow-alternate dot-bounce bars-wave pulse-ring");
+
+/* The mask machinery, shared by the loader and by any component that shows a
+   spinner of its own. Artwork is a mask rather than an image so it takes its
+   colour from whatever paints behind it, which is the whole indicator contract:
+   an intent class recolours the loader and nothing else has to know. */
+@utility loader-mask {
+  mask-image: var(--loader-art);
+  -webkit-mask-image: var(--loader-art);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+.loader:not(
+  :where(
+    .dots-wave,
+    .dots-fade,
+    .dots-queue,
+    .dots-rotate,
+    .dots-grow,
+    .dots-grow-alternate,
+    .dot-bounce,
+    .bars-wave,
+    .pulse-ring
+  )
+),
+.loading:not(
+  :where(
+    .dots-wave,
+    .dots-fade,
+    .dots-queue,
+    .dots-rotate,
+    .dots-grow,
+    .dots-grow-alternate,
+    .dot-bounce,
+    .bars-wave,
+    .pulse-ring
+  )
+) {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
+}
+
+@utility dots-wave {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}</style><circle class='spinner_qM83' cx='4' cy='12' r='3'/><circle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/><circle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/></svg>");
+}
+
+@utility dots-fade {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}</style><circle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'></circle><circle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'></circle><circle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'></circle></svg>");
+}
+
+@utility dots-queue {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}</style><circle class='spinner_nOfF' cx='4' cy='12' r='3'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/></svg>");
+}
+
+@utility dots-rotate {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}</style><circle cx='12' cy='12' r='3'/><g style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'><circle cx='4' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></g></svg>");
+}
+
+@utility dots-grow {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}</style><circle class='spinner_b2T7' cx='4' cy='12' r='3'/><circle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/><circle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/></svg>");
+}
+
+@utility dots-grow-alternate {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}</style><circle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/><circle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/><circle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/></svg>");
+}
+
+@utility dot-bounce {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}</style><circle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/></svg>");
+}
+
+@utility bars-wave {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}</style><rect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'></rect><rect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'></rect><rect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'></rect></svg>");
+}
+
+@utility pulse-ring {
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}</style><circle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle><circle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle></svg>");
+}
+
+/* A loader takes a colour and its own geometry, and nothing else. No fill, no
+   edge, no silhouette: what used to be a bordered box wrapped around a mask is
+   now the mask. `--intent-color` defaults to `currentColor` for indicators, so
+   a loader inside filled content matches the text around it and
+   `.loader.success` is green. There is nothing else to know. */
+@utility loader {
+  @apply loader-mask inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
+
+  color: var(--intent-color);
+  background-color: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loader,
+  .loading {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='42 18'/></svg>");
+  }
+
+  .dots-wave,
+  .dots-fade,
+  .dots-queue,
+  .dots-rotate,
+  .dots-grow,
+  .dots-grow-alternate {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='12' r='3'/><circle cx='12' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></svg>");
+  }
+
+  .dot-bounce {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='4'/></svg>");
+  }
+
+  .bars-wave {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='5' width='4' height='14' rx='2'/><rect x='10' y='5' width='4' height='14' rx='2'/><rect x='17' y='5' width='4' height='14' rx='2'/></svg>");
+  }
+
+  .pulse-ring {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/></svg>");
+  }
+}

package/dist/tw/components/surface.css

@@ -0,0 +1,98 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+
+/* What every surface shares. Two slots exist here and nowhere else, and that is
+   how an aesthetic reaches surfaces without naming one: only a surface resolves
+   `--ui-backdrop`, so glass blurs cards and panels while controls stay solid,
+   and only a surface resolves `--ui-surface-shadow`, so a two-layer drop shadow
+   does not land under every button on the page. */
+@utility surface {
+  @apply box block;
+
+  /* Bare and edged. `box` reads these three with no fallback, so `surface` --
+     typeable on its own -- owes all three; `card` restates its own. No shadow
+     geometry: depth is asked for (`.raised`/`.floating`, an aesthetic, the
+     registry elevation) rather than carried, so a plain card is flat. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+
+  --_d-ground: var(--ui-surface-ground, var(--color-background));
+
+  /* The complete-shadow slot for a shadow that is not one layer (glass tucks two
+     under with negative spread). Only `surface` reads it -- through `--ui-shadow`
+     it would land an 18px drop under every button and chip -- like the backdrop. */
+  --_shadow: var(--ui-surface-shadow, var(--_shadow-parts));
+
+  border-radius: var(--ui-radius-surface, var(--radius-surface));
+  /* Prefixed property first, deliberately: written second the minifier folds the
+     pair into the prefixed one alone, and the standard property never reaches
+     `dist/` -- which drops the blur in Firefox (the one engine with
+     `backdrop-filter` and not the `-webkit-` alias). Measured on the built CSS. */
+  -webkit-backdrop-filter: var(--ui-backdrop, none);
+  backdrop-filter: var(--ui-backdrop, none);
+}
+
+/* A ghost, edged container that takes one unit when depth is supplied. */
+@utility card {
+  @apply surface p-(--surface-padding,1.25rem);
+
+  /* After the `@apply`, not before: `surface` inlines its own resting geometry
+     at that point, so defaults written above it would be overridden by the very
+     utility they are meant to specialise. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 1;
+
+  /* `.p-sm`/`.p-lg` are the canonical names; `.compact`/`.spacious` are
+     first-class aliases -- see the identical note in `button.css`. */
+  &.p-sm,
+  &.compact {
+    --surface-padding: 0.75rem;
+  }
+
+  &.p-lg,
+  &.spacious {
+    --surface-padding: 2rem;
+  }
+
+  &.flush {
+    --surface-padding: 0;
+  }
+
+  /* Opt-in, because a card is only sometimes a control. Applications still owe
+     it a real interactive element and an accessible name. Hover and press are
+     the derived ones every other pressable box gets; there is nothing
+     card-specific about either. */
+  &.interactive {
+    @apply box-hover box-active cursor-pointer;
+  }
+}
+
+/* A panel is the flush, unelevated sibling: sidebars, toolbars, and wells that
+   sit flat against the layout rather than floating above it. Soft and edgeless
+   is what makes it read as a well without drawing a line to say so. */
+@utility panel {
+  @apply surface p-(--surface-padding,1rem);
+
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 0%;
+  --_d-elevation: 0;
+
+  &.p-sm,
+  &.compact {
+    --surface-padding: 0.5rem;
+  }
+
+  &.p-lg,
+  &.spacious {
+    --surface-padding: 1.5rem;
+  }
+
+  &.flush {
+    --surface-padding: 0;
+  }
+}

package/dist/tw/components/tooltip.css

@@ -0,0 +1,132 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+@reference "./surface.css";
+
+/* The host is a positioning wrapper and nothing else. Its bubble is a
+   pseudo-element placed outside the host's own box, so painting the host would
+   draw a box around the trigger rather than around the message -- which is
+   exactly what a blanket surface membership did to this component once already.
+
+   The bubble is the component. It is a surface, so an aesthetic that blurs
+   surfaces blurs it too, and it rests on a ground of its own, edged, and flat.
+   Depth is opt-in through `.raised` and `.floating` like every other component;
+   its boundary against arbitrary content is the floored edge below, not a
+   shadow. See model.md#elevation. */
+@utility tooltip {
+  --tooltip-gap: 0.5rem;
+  --tooltip-top: calc(var(--tooltip-gap) * -1);
+  --tooltip-right: auto;
+  --tooltip-bottom: auto;
+  --tooltip-left: 50%;
+  --tooltip-origin: bottom;
+  --tooltip-transform: translate(-50%, -100%);
+
+  @apply relative;
+
+  /* The trigger badge, for a page with no element to hang the message on. Quiet
+     -- ghost, edged, on `--intent-subtle`, a key cap's resting shape -- because
+     it marks that there is a message, it is not one. The line earns its keep:
+     `--intent-subtle` is a near-page tint that reads the same across families,
+     so a plate alone left three of eight intents indistinguishable;
+     `--intent-border` is the slot that differs. Painting the host is right only
+     here -- everywhere else the bubble is outside the host's box, so painting it
+     boxes the trigger. `.tooltip-icon` is the opt-in that says the host *is* the
+     badge. */
+  &.tooltip-icon {
+    @apply box inline-flex size-5 cursor-default items-center justify-center text-sm font-bold;
+
+    --_d-fill: 0%;
+    --_d-fg-on-fill: 0%;
+    --_d-border: 100%;
+    --_d-elevation: 0;
+    --_d-ground: var(--intent-subtle);
+
+    border-radius: var(--ui-radius, calc(infinity * 1px));
+    /* The one thing `box` hands it that it must refuse. An aesthetic's `clip-path`
+       clips a host's pseudo-elements along with the host, and this host's
+       pseudo-element is the bubble, positioned outside its box -- so a stepped
+       badge under `.pixel` would clip the message away entirely. The bubble
+       carries the stepped shape itself; the badge stays round. */
+    clip-path: none;
+  }
+
+  &[data-tooltip-position="bottom"] {
+    --tooltip-top: auto;
+    --tooltip-bottom: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: top;
+    --tooltip-transform: translate(-50%, 100%);
+  }
+
+  &[data-tooltip-position="left"] {
+    --tooltip-top: 50%;
+    --tooltip-left: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: right;
+    --tooltip-transform: translate(-100%, -50%);
+  }
+
+  &[data-tooltip-position="right"] {
+    --tooltip-top: 50%;
+    --tooltip-left: auto;
+    --tooltip-right: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: left;
+    --tooltip-transform: translate(100%, -50%);
+  }
+
+  &::after {
+    @apply surface pointer-events-none absolute z-(--z-popover) w-max max-w-72 px-2.5 py-2 text-sm font-normal whitespace-normal opacity-0 transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    /* Filled, over a ground of its own. An intent floods the fill
+       (`.tooltip.primary` is the primary colour); with no intent `intent.css`
+       resolves the bubble onto `--color-tooltip` and lifts the neutral cap, a
+       plate stated per theme because the derived version was a mid-grey slab in
+       light and lifted in dark. The ground stays the surface tone, not the
+       plate -- pointed at both, the fill axis went inert and `axes.spec.ts`
+       caught it. An opaque ground is also what keeps a cascaded `.ghost` from
+       leaving the bubble boundaryless, retiring the old pinned-fill bound.
+       `--ui-surface-ground` is read first so a glass tooltip stays glass. */
+    --_d-fill: 100%;
+    --_d-fg-on-fill: 100%;
+    --_d-border: 100%;
+    /* Flat, and stated rather than left to `box`'s fallback of 1: the bubble is
+       a surface, so an aesthetic's part-based depth would otherwise reach it
+       unasked -- `.neobrutalism`'s slab in particular. `.raised`/`.floating`
+       opt back in. */
+    --_d-elevation: 0;
+    --_d-ground: var(--ui-surface-ground, var(--intent-subtle));
+
+    /* The bubble's line is a boundary against content nobody chose, so `box`'s
+       edge blend is wrong here: at a full fill the line *is* the plate. Restate
+       the colour only; how much line comes from `--_edge-amount`, floored below. */
+    --_line: var(--intent-border);
+
+    /* Floored, for the same reason the ground is opaque: a cascade must not take
+       the boundary from a bubble nobody classed (worst in light, where the plate
+       is near-white). The element's own `.edgeless` lowers it -- same
+       element-vs-cascade idiom `text-control` uses -- and `axes.spec.ts` still
+       sees the edge move because it probes with the class on the element. */
+    --_edge-floor: 100%;
+
+    /* A bubble is a small transient popover, not a modal, so it takes the
+       control radius rather than the surface one `surface` hands it. */
+    border-radius: var(--ui-radius, var(--radius-control));
+    content: attr(data-tooltip);
+    left: var(--tooltip-left);
+    right: var(--tooltip-right);
+    top: var(--tooltip-top);
+    bottom: var(--tooltip-bottom);
+    transform: var(--tooltip-transform) scale(0);
+    transform-origin: var(--tooltip-origin);
+  }
+
+  &.edgeless::after {
+    --_edge-floor: 0%;
+  }
+
+  &:hover::after,
+  &:focus-visible::after,
+  &[data-state="open"]::after {
+    opacity: 1;
+    transform: var(--tooltip-transform) scale(1);
+  }
+}

package/dist/tw/elevation.css

@@ -0,0 +1,39 @@
+/* Elevation is a modifier, not an axis: depth is a per-element decision (raised
+   tiles beside a flat panel in one aesthetic), so one unitless number multiplies
+   the aesthetic's shadow geometry where the component composes it. Unitless so
+   it inherits -- a container flattens a region, an element opts back in -- and
+   so `.flat` removes a part-based slab or blur without a conditional (complete
+   surface shadows like glass remain). The two classes that ask for depth carry
+   the geometry themselves; on a component it would inherit into everything
+   nested and a plain page would have a shadow under every card. See
+   model.md#elevation.
+
+   `.flat`/`.raised`/`.floating` and `.elevation-none`/`-sm`/`-md` are
+   interchangeable aliases, the second borrowing the raw `--elevation-*` scale's
+   naming. Bare `sm`/`md`/`lg` would collide with the size modifier;
+   `.elevation-lg` is reserved, not shipped. */
+
+/* No part-based depth. Complete surface shadow values, such as glass, are not
+   reached by the elevation multiplier. */
+.elevation-none,
+.flat {
+  --ui-elevation: 0;
+}
+
+/* The aesthetic's depth as authored, said explicitly. The geometry is the
+   fallback for a page with no aesthetic in scope; an aesthetic that declares its
+   own overrides it, and the elevation multiplies whichever one lands. */
+.elevation-sm,
+.raised {
+  --ui-elevation: 1;
+  --elevation-y: 1px;
+  --elevation-blur: 3px;
+}
+
+/* Twice it, for menus and popovers. */
+.elevation-md,
+.floating {
+  --ui-elevation: 2;
+  --elevation-y: 1px;
+  --elevation-blur: 3px;
+}

package/dist/tw/index.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+@source not "../dist";
+@source not "../tests";
+@source not "../dev";
+@source not "../debug";
+@source not "../playground";
+
+@import "./theme.css";
+@import "./typography.css";
+@import "./utilities/index.css";
+@import "./components/index.css";
+@import "./reset.css";

package/dist/tw/intent.css

@@ -0,0 +1,189 @@
+/* An intent maps one colour family onto seven shared slots and nothing else.
+   It does not cascade: the reset at the bottom redeclares the neutral defaults
+   at every component's own root, so a `.success` container cannot recolour a
+   nested destructive button while `.btn.success` still wins. Every intent writes
+   every slot, `--intent-fill-max` included -- omitting it inherits the reset's
+   neutral cap, and `tests/integration/registry.test.ts` fails the build on one
+   that does. Neutral maps `--intent-subtle` to `--color-surface` (the tone
+   tooltips, key caps, code and table heads sit on) and `--intent-border` to
+   `--ui-ink` (how an aesthetic restates the neutral line without naming one). */
+
+/* Neutral stops its fill short: its colour is the page's ink, so a full fill is
+   a slab and `.neutral.solid` was pixel-for-pixel `.primary.solid`. 20% is
+   chosen against `.soft`'s 12% -- a step past the tint, not a repeat.
+   `--intent-contrast` stays the page colour; a `.neutral.solid` badge's ink is
+   `box`'s question, answered by the same `--ui-fg-on-fill` cap. Pointing this
+   slot at `--color-text` instead rendered a checked neutral checkbox
+   black-on-black. */
+.neutral {
+  --intent-color: var(--color-text);
+  --intent-contrast: var(--color-text-contrast);
+  --intent-hover: var(--color-text-hover);
+  --intent-strong: var(--color-text-strong);
+  --intent-subtle: var(--color-surface);
+  --intent-border: var(--ui-ink, var(--color-border));
+  --intent-fill-max: 20%;
+}
+
+.primary {
+  --intent-color: var(--color-primary);
+  --intent-contrast: var(--color-primary-contrast);
+  --intent-hover: var(--color-primary-hover);
+  --intent-strong: var(--color-primary-strong);
+  --intent-subtle: var(--color-primary-subtle);
+  --intent-border: var(--color-primary);
+  --intent-fill-max: 100%;
+}
+
+.secondary {
+  --intent-color: var(--color-accent);
+  --intent-contrast: var(--color-accent-contrast);
+  --intent-hover: var(--color-accent-hover);
+  --intent-strong: var(--color-accent-strong);
+  --intent-subtle: var(--color-accent-subtle);
+  --intent-border: var(--color-accent);
+  --intent-fill-max: 100%;
+}
+
+.success {
+  --intent-color: var(--color-success);
+  --intent-contrast: var(--color-success-contrast);
+  --intent-hover: var(--color-success-hover);
+  --intent-strong: var(--color-success-strong);
+  --intent-subtle: var(--color-success-subtle);
+  --intent-border: var(--color-success);
+  --intent-fill-max: 100%;
+}
+
+.warning {
+  --intent-color: var(--color-warning);
+  --intent-contrast: var(--color-warning-contrast);
+  --intent-hover: var(--color-warning-hover);
+  --intent-strong: var(--color-warning-strong);
+  --intent-subtle: var(--color-warning-subtle);
+  --intent-border: var(--color-warning);
+  --intent-fill-max: 100%;
+}
+
+.destructive,
+.danger,
+.error {
+  --intent-color: var(--color-destructive);
+  --intent-contrast: var(--color-destructive-contrast);
+  --intent-hover: var(--color-destructive-hover);
+  --intent-strong: var(--color-destructive-strong);
+  --intent-subtle: var(--color-destructive-subtle);
+  --intent-border: var(--color-destructive);
+  --intent-fill-max: 100%;
+}
+
+.info {
+  --intent-color: var(--color-info);
+  --intent-contrast: var(--color-info-contrast);
+  --intent-hover: var(--color-info-hover);
+  --intent-strong: var(--color-info-strong);
+  --intent-subtle: var(--color-info-subtle);
+  --intent-border: var(--color-info);
+  --intent-fill-max: 100%;
+}
+
+/* Every component resolves the neutral defaults at its own root, at zero
+   specificity, so an intent class on the element wins while an inherited value
+   loses -- the one rule that lets every component drop its per-intent branches.
+   This list and the one in `native.css` are the package's only hand-maintained
+   selector lists; `tests/integration/registry.test.ts` fails the build on a
+   registry component missing from either. `.text-control` and `.surface` are on
+   it though they are not components: both are documented as typeable on their
+   own, and a bare `<div class="surface">` with no intent resolved computes a
+   transparent background and a zero-width border -- `box` collapses. */
+:where(
+  .btn,
+  .ipt,
+  .text-control,
+  .surface,
+  .textarea,
+  .select,
+  .input-group,
+  .checkbox,
+  .radio,
+  .switch,
+  .card,
+  .panel,
+  .alert,
+  .data-table,
+  .pre,
+  .quote,
+  .tooltip,
+  .badge,
+  .kbd,
+  .code,
+  .loader,
+  .skeleton,
+  .progress,
+  .divider
+) {
+  --intent-color: var(--color-text);
+  --intent-contrast: var(--color-text-contrast);
+  --intent-hover: var(--color-text-hover);
+  --intent-strong: var(--color-text-strong);
+  --intent-subtle: var(--color-surface);
+  --intent-border: var(--ui-ink, var(--color-border));
+  --intent-fill-max: 20%;
+}
+
+/* The six text controls take a heavier line than everything else that rests on
+   the shared neutral. A card, a table or a divider sits on a filled surface or
+   separates content that identifies itself; a text control at rest is a
+   transparent box whose only mark is its border, and WCAG 1.4.11 asks that
+   border for 3:1. `--color-border` gives it 1.42:1.
+
+   Declared here at zero specificity for the same reason the indicators below
+   are: written inside `@utility text-control` it would land in the utilities
+   layer, the reset above lands in no layer at all, and unlayered beats layered
+   at any specificity. Written as a plain class list it would carry 0-1-0 and,
+   being later in the stylesheet, beat `.primary` -- which would make every
+   colored control draw a grey line. `:where()` keeps it under both. */
+:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch) {
+  --intent-border: var(--ui-ink, var(--color-control-border));
+}
+
+/* The bubble a tooltip draws is the one plate in the package that is chosen
+   rather than composed, so the tooltip resolves the no-intent case onto its own
+   pair instead of onto the shared neutral. Composed, it was 20% of the page's
+   ink over `--color-surface`, which lifts off a dark page and sinks into a light
+   one -- see `--color-tooltip` in `theme.css` for the measurements.
+
+   The cap goes with it. Neutral stops its fill at 20% because its colour is the
+   page's ink and a full fill of that is a slab; `--color-tooltip` is a plate
+   rather than an ink, so a full fill of it is the plate and there is nothing to
+   stop short of.
+
+   `--intent-subtle` stays the surface token. It is what the trigger badge rests
+   on, and a badge is a quiet marker on the page rather than the message, so it
+   keeps the tone every other unclassed component sits on.
+
+   Two selectors, because `none` and `neutral` have to agree here. `:where()`
+   loses to any intent class, so `.tooltip.primary` still floods with primary;
+   `.tooltip.neutral` carries 0-2-0 and beats `.neutral`, so writing the intent
+   out gives the same bubble as writing nothing. Without the second selector the
+   two would differ on a component where they mean the same thing. */
+:where(.tooltip),
+.tooltip.neutral {
+  --intent-color: var(--color-tooltip);
+  --intent-contrast: var(--color-tooltip-contrast);
+  --intent-hover: var(--color-tooltip);
+  --intent-strong: var(--color-tooltip-contrast);
+  --intent-subtle: var(--color-surface);
+  --intent-border: var(--ui-ink, var(--color-border));
+  --intent-fill-max: 100%;
+}
+
+/* Indicators take the color they sit in rather than the shared neutral, so a
+   loader inside filled or colored content still matches it. It has to be
+   declared here at zero specificity: written in the component's own block it
+   would carry 0-1-0 and, being later in the stylesheet, beat `.success` --
+   which silently makes every indicator ignore every intent class. */
+:where(.loader, .skeleton, .progress, .divider) {
+  --intent-color: currentColor;
+  --intent-border: currentColor;
+}