@codenhub/styles 0.4.0 → 0.5.0

package/dist/tw/components/surface.css

@@ -1,39 +1,8 @@
 @reference "tailwindcss";
 @import "../theme.css";
+@import "../surface.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);
@@ -46,21 +15,19 @@
   --_d-border: 100%;
   --_d-elevation: 1;
 
-  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names; `.dense`/`.compact`/`.spacious`
-     are first-class aliases -- see the identical note in `button.css`. */
-  &.p-xs,
-  &.dense {
+  &.p-xs {
     --surface-padding: 0.5rem;
+    --_scale-pad: 0.5;
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     --surface-padding: 0.75rem;
+    --_scale-pad: 0.75;
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     --surface-padding: 2rem;
+    --_scale-pad: 1.25;
   }
 
   &.flush {
@@ -96,21 +63,21 @@
      a second fill declaration, for the no-intent case: resting at 0% means
      hover lands at exactly the hover step, 14%, in `--intent-hover` as
      always. The ground steps to `--color-surface` at the same moment,
-     through the public `--ui-surface-ground` escape hatch rather than the
-     private `--_d-ground`, so a consumer's own override still wins over both
-     states the way it always has. Scoped to `.interactive` and `.hoverable`,
+     through `--_d-surface-ground`, the default `surface` reads beneath the
+     public `--ui-surface-ground` -- so a consumer's own override, or glass's
+     ground, still wins over both states. Scoped to `.interactive` and `.hoverable`,
      the two classes that already opt a card into `box-hover` -- a plain
      `.card.soft` with neither has no hover state to reveal into and stays at
      the quiet, untinted rest. A named intent needs neither special case: it
      already rests tinted, so the same generic `box-hover` formula deepens it
      on hover (12% to 26%) with no ground shift required. */
-  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info) {
+  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .info) {
     --_fill-cap: 0%;
-    --ui-surface-ground: var(--color-foreground);
+    --_d-surface-ground: var(--color-foreground);
 
     &.interactive:hover,
     &.hoverable:hover {
-      --ui-surface-ground: var(--color-surface);
+      --_d-surface-ground: var(--color-surface);
     }
   }
 
@@ -148,19 +115,19 @@
   --_d-border: 0%;
   --_d-elevation: 0;
 
-  &.p-xs,
-  &.dense {
+  &.p-xs {
     --surface-padding: 0.25rem;
+    --_scale-pad: 0.5;
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     --surface-padding: 0.5rem;
+    --_scale-pad: 0.75;
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     --surface-padding: 1.5rem;
+    --_scale-pad: 1.25;
   }
 
   &.flush {
@@ -190,26 +157,16 @@
      not ask for -- the same guard `data-table`'s own `:not(.solid, .ghost)`
      uses.
 
-     Grounds on `--color-foreground` through the public `--ui-surface-ground`
-     escape hatch, not the private `--_d-ground`, the same token `.card.soft`
-     steps to -- so a consumer's own override still wins, and a bare `.panel`
-     rests at exactly the plate a `.card.soft` does (measured: `245, 245, 245`
-     light, `23, 23, 23` dark, identical both ways). Permanent rather than
+     Grounds on `--color-foreground` through `--_d-surface-ground`, the same
+     default `.card.soft` rests on -- so a bare `.panel` rests at exactly the
+     plate a `.card.soft` does (measured: `245, 245, 245` light, `23, 23, 23`
+     dark, identical both ways), and a consumer's `--ui-surface-ground` or
+     glass's translucent ground still wins over it: a neutral panel under
+     `.glass` is glass, like every other surface there. Permanent rather than
      hover-revealed: neither a panel nor `data-table` has an interaction
-     state to reveal a tint into, so both rest quiet rather than reveal.
-
-     The one cost, inherited rather than new: an own declaration always beats
-     an inherited one, so this also beats `.glass` setting the same token on
-     an ancestor for its translucent ground -- a neutral panel under `.glass`
-     is quiet but opaque rather than blurred. `.card.soft` has carried this
-     exact trade-off since it shipped; nothing exercised it there because
-     `tests/browser/aesthetics.spec.ts`'s glass coverage tests a default
-     (ghost) card, never a soft one. Accepted rather than solved differently:
-     there is no way to ask "did an ancestor already set this token" in CSS,
-     only which declaration wins, and the quiet neutral rest is the more
-     common case a panel needs to get right. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+     state to reveal a tint into, so both rest quiet rather than reveal. */
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
     --_fill-cap: 0%;
-    --ui-surface-ground: var(--color-foreground);
+    --_d-surface-ground: var(--color-foreground);
   }
 }

package/dist/tw/components/tooltip.css

@@ -1,7 +1,7 @@
 @reference "tailwindcss";
 @import "../theme.css";
 @reference "../box.css";
-@reference "./surface.css";
+@reference "../surface.css";
 
 /* The host is a positioning wrapper and nothing else -- it paints no fill, no
    edge, no material of its own. The bubble is a real element beside the
@@ -88,8 +88,13 @@
   --_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));
+     control corner `box` computes rather than the surface one `surface` hands
+     it, with the same pattern. */
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
+  );
   left: var(--tooltip-left);
   right: var(--tooltip-right);
   top: var(--tooltip-top);
@@ -108,12 +113,17 @@
    identical reason: the bubble is a sibling, not a pseudo-element, of the
    trigger, so nothing but the shared ancestor can see both at once. The cost
    is the one `.input-group` already accepts -- the bubble also shows on a
-   mouse click, which the old `:focus-visible`-only version did not. */
-.tooltip:hover .tooltip-bubble,
-.tooltip:focus-within .tooltip-bubble,
-.tooltip[data-state="open"] .tooltip-bubble {
-  opacity: 1;
-  transform: var(--tooltip-transform) scale(1);
+   mouse click, which the old `:focus-visible`-only version did not.
+
+   In `utilities`, where the bubble's own `@utility` is, winning on
+   specificity -- see the seams note in `form.css`. */
+@layer utilities {
+  .tooltip:hover .tooltip-bubble,
+  .tooltip:focus-within .tooltip-bubble,
+  .tooltip[data-state="open"] .tooltip-bubble {
+    opacity: 1;
+    transform: var(--tooltip-transform) scale(1);
+  }
 }
 
 /* The trigger badge, for a message with no other element to hang it on. Quiet
@@ -138,6 +148,6 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
   clip-path: none;
 }

package/dist/tw/corner.css

@@ -0,0 +1,26 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers.
+
+   The corner pattern: which corners take the corner the aesthetic draws. `box`
+   and `surface` multiply their computed corner by `--ui-corner-tl`, `-tr`,
+   `-br`, and `-bl`, each 0 or 1, so a class that sets the four draws two
+   corners and leaves two square under every aesthetic -- a two-corner leaf
+   under the default look, two cuts under `.cyber`. An explicit `--ui-radius`
+   is taken as written and ignores the pattern. See docs/internal/model.md#material-tokens. */
+
+/* Top-left and bottom-right. */
+.cut-diagonal {
+  --ui-corner-tl: 1;
+  --ui-corner-tr: 0;
+  --ui-corner-br: 1;
+  --ui-corner-bl: 0;
+}
+
+/* Top-right and bottom-left. */
+.cut-diagonal-reverse {
+  --ui-corner-tl: 0;
+  --ui-corner-tr: 1;
+  --ui-corner-br: 0;
+  --ui-corner-bl: 1;
+}

package/dist/tw/elevation.css

@@ -1,3 +1,7 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers. */
+
 /* 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. `.flat`
@@ -20,10 +24,10 @@
    component uniformly the way it always did. Registering these three is what
    scopes the change to the elevation modifier alone.
 
-   `.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. */
+   `.flat`/`.raised`/`.floating` name what they do rather than a scale step:
+   bare `sm`/`md`/`lg` would collide with the size modifier, and the
+   `.elevation-*` spellings, which borrowed the raw `--elevation-*` shadows'
+   names for a different mechanism, were removed in `0.5.0`. */
 
 /* `syntax: "*"` with no `initial-value` is deliberate: a numeric syntax would
    require one (CSS Properties and Values API), and any initial-value at all
@@ -51,7 +55,6 @@
 
 /* No part-based depth. Complete surface shadow values, such as glass, are not
    reached by the elevation multiplier. */
-.elevation-none,
 .flat {
   --ui-elevation: 0;
 }
@@ -61,22 +64,18 @@
    that declares its own shadow parts overrides it, and the elevation multiplier
    scales whichever one lands. `.floating` takes its extra depth from the
    multiplier below, not a second copy of these parts. */
-.elevation-sm,
 .raised,
-.elevation-md,
 .floating {
   --elevation-y: 1px;
   --elevation-blur: 3px;
 }
 
 /* The aesthetic's depth as authored, said explicitly. */
-.elevation-sm,
 .raised {
   --ui-elevation: 1;
 }
 
 /* Twice it, for menus and popovers. */
-.elevation-md,
 .floating {
   --ui-elevation: 2;
 }

package/dist/tw/intent.css

@@ -1,3 +1,7 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers. */
+
 /* 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
@@ -85,9 +89,7 @@
   --intent-fill-max: 100%;
 }
 
-.destructive,
-.danger,
-.error {
+.destructive {
   --intent-color: var(--color-destructive);
   --intent-contrast: var(--color-destructive-contrast);
   --intent-hover: var(--color-destructive-hover);
@@ -159,13 +161,19 @@
    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. */
+   are: written inside `@utility text-control` it would land in `utilities`,
+   above every intent class in `components`, and overrule `.primary` on the
+   element. Written as a plain class list it would carry 0-1-0 and, being later
+   in the stylesheet, beat `.primary` the same way. Either would make every
+   colored control draw a grey line; `:where()` keeps it under both.
+
+   An aesthetic reaches this line through `--ui-control-ink` first, then its
+   `--ui-ink`: the theme keeps a control border apart from a surface border, and
+   an aesthetic whose neutral line suits a pane but not a control's boundary --
+   `.glass`'s white hairline, `.chunky-tile`'s tile grey -- names a control line
+   of its own. See docs/internal/model.md#presentation. */
 :where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch) {
-  --intent-border: var(--ui-ink, var(--color-control-border));
+  --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
 }
 
 /* The bubble a tooltip draws is the one plate in the package that is chosen

package/dist/tw/native.css

@@ -1,3 +1,6 @@
+/* The layer map, stated before any import uses a layer -- see `theme.css`. */
+@layer theme, base, components, utilities;
+
 @import "./theme.css";
 @reference "tailwindcss";
 /* Everything that is not `src/` -- see the note in `index.css`. Without the
@@ -8,45 +11,48 @@
 @import "./components/index.css";
 @import "./reset.css";
 
-/* `intent.css`'s reset keys on class names; these bare elements need the same,
-   or a `color-mix()` reading an undefined `--intent-*` drops silently. Zero
-   specificity like the class reset, values matching it slot for slot -- a bare
-   `<code>` and a `.code` chip are one component reached two ways. */
-:where(table, kbd, code, pre, blockquote, hr, input, textarea, select, button) {
-  --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%;
-}
-
-/* Native text controls need the same stronger neutral boundary as their classed
-   counterparts, without changing buttons, checkboxes, radios, or other inputs. */
-:where(
-  input:not([type]),
-  input[type="text"],
-  input[type="number"],
-  input[type="email"],
-  input[type="password"],
-  input[type="url"],
-  input[type="tel"],
-  input[type="search"],
-  input[type="month"],
-  input[type="week"],
-  input[type="time"],
-  input[type="date"],
-  input[type="datetime-local"],
-  textarea,
-  select
-) {
-  --intent-border: var(--ui-ink, var(--color-control-border));
-}
-
-:where(hr) {
-  --intent-color: currentColor;
-  --intent-border: currentColor;
+@layer components {
+  /* `intent.css`'s reset keys on class names; these bare elements need the same,
+     or a `color-mix()` reading an undefined `--intent-*` drops silently. Zero
+     specificity like the class reset, values matching it slot for slot -- a bare
+     `<code>` and a `.code` chip are one component reached two ways. */
+  :where(table, kbd, code, pre, blockquote, hr, input, textarea, select, button) {
+    --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%;
+  }
+
+  /* Native text controls need the same stronger neutral boundary as their classed
+     counterparts, without changing buttons, checkboxes, radios, or other inputs --
+     control ink included, as `intent.css`'s class reset reads it. */
+  :where(
+    input:not([type]),
+    input[type="text"],
+    input[type="number"],
+    input[type="email"],
+    input[type="password"],
+    input[type="url"],
+    input[type="tel"],
+    input[type="search"],
+    input[type="month"],
+    input[type="week"],
+    input[type="time"],
+    input[type="date"],
+    input[type="datetime-local"],
+    textarea,
+    select
+  ) {
+    --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
+  }
+
+  :where(hr) {
+    --intent-color: currentColor;
+    --intent-border: currentColor;
+  }
 }
 
 @layer base {