@codenhub/styles 0.4.0 → 0.5.0

package/dist/tw/presentation.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. */
+
 /* Presentation answers two independent questions, and each is its own closed
    set: how much of the intent color fills the box, and whether the box draws a
    line at its boundary. Exactly one value from each set applies, so the six
@@ -13,10 +17,11 @@
    that each half means only what it says. Two axes that are independent in two
    cases out of three are not axes.
 
-   The ring is a fault in the blend rather than in the class, and it is recorded
-   as such: `.solid.edged` on a capped intent measures 1.53:1 against its own
-   plate in light and 1.82:1 in dark. `.solid.edgeless` is how a consumer asks
-   for a filled box with no line.
+   The ring was a fault in the blend rather than in the class, and it was fixed
+   there: the line fades toward `transparent` as the fill fills in, so a
+   translucent plate shows through its own border as one coat (`box.css`;
+   docs/internal/model.md#presentation). `.solid.edged` and `.solid.edgeless`
+   render one box.
 
    Presentation declares only unitless numbers and percentages. A custom
    property's value is resolved on the element that declares it, so anything

package/dist/tw/surface.css

@@ -0,0 +1,62 @@
+@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.
+
+   A primitive beside `box`, and like `box` it imports neither the theme nor
+   Tailwind: `feedback.css` and `tooltip.css` `@reference` it, and a referenced
+   file that reaches the theme strips its tokens from every entry that pulls it
+   in. See docs/internal/model.md (Which files import the theme). */
+@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%;
+
+  /* The public token first, so an aesthetic (glass's translucent ground) or a
+     consumer names the ground outright; then the component's own quiet
+     default, which `.card.soft`, a neutral `.panel`, and a neutral `.alert`
+     write as a private rather than as the public token. Written as the public
+     token, their own declaration beat glass's inherited one in a glass region,
+     and once the aesthetics are layered below the components it beats glass
+     on the same element too -- `.card.soft.glass` went opaque. Restated
+     `initial` here so a quiet ground cannot inherit into a surface nested
+     inside one, the way `box` restates `--_d-ground`. See
+     docs/internal/model.md#cascade-layers. */
+  --_d-surface-ground: initial;
+  --_d-ground: var(--ui-surface-ground, var(--_d-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)) var(--_halo-layer,);
+
+  /* The surface pair of `box`'s corner: the aesthetic's surface length, scaled
+     by the padding step and patterned by the same four corner switches. */
+  --_corner-surface: calc(var(--ui-corner-surface, var(--radius-surface)) * var(--_scale));
+  border-radius: var(
+    --ui-radius-surface,
+    calc(var(--_corner-surface) * var(--ui-corner-tl, 1)) calc(var(--_corner-surface) * var(--ui-corner-tr, 1))
+      calc(var(--_corner-surface) * var(--ui-corner-br, 1)) calc(var(--_corner-surface) * var(--ui-corner-bl, 1))
+  );
+  /* 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. */
+  /* The painted layer: a pattern, a texture, or a gradient an aesthetic lays
+     over the plate. Surfaces only, like the backdrop, so a control's label and
+     `.select`'s chevron never sit on one. The aesthetic that sets it owns the
+     contrast of the text over it, and a consumer's own `background-image` still
+     beats this declaration. */
+  background-image: var(--ui-surface-image, none);
+  -webkit-backdrop-filter: var(--ui-backdrop, none);
+  backdrop-filter: var(--ui-backdrop, none);
+}

package/dist/tw/theme.css

@@ -1,7 +1,18 @@
-@import "tailwindcss/theme.css";
-@import "./intent.css";
-@import "./presentation.css";
-@import "./elevation.css";
+/* The package's layer map, declared before anything uses a layer. A browser
+   orders layers by the first time it meets each name, so a sheet that opened
+   `components` first would rank it below `theme` and `base`; stating Tailwind's
+   own order here, and at the top of every entrypoint, makes every load order
+   rank the same. The four class families -- intent, presentation, elevation,
+   and every aesthetic -- sit in `components`, below every utility, so a
+   consumer's own utility or unlayered CSS beats them. Components are
+   `@utility` rules in `utilities`. See docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "./intent.css" layer(components);
+@import "./presentation.css" layer(components);
+@import "./elevation.css" layer(components);
+@import "./corner.css" layer(components);
 /* Everything that is not `src/` -- see the note in `index.css`. Keeps a
    `--color-*` reference in a docs example from shipping as a real theme entry. */
 
@@ -151,90 +162,95 @@
   --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
 }
 
-:root {
-  /* Both keywords: the system preference decides, and the explicit theme
-     selectors below override it at any depth because `color-scheme` inherits. */
-  color-scheme: light dark;
-
-  --container-narrow: 48rem;
-  --container-max: 80rem;
-  --container-wide: 90rem;
-  --layout-gutter: clamp(1rem, 4vw, 2rem);
-  --layout-section-block: clamp(4rem, 9vw, 7rem);
-  --layout-gap: 1rem;
-  --layout-grid-min: 16rem;
+/* The foundation tokens and the colour-scheme selectors, in `theme` so every
+   class family in `components` beats them on the element both land on -- an
+   aesthetic on `<html>` keeps its own press and depth colour over `:root`'s,
+   whatever order the sheets load in. */
+@layer theme {
+  :root {
+    /* Both keywords: the system preference decides, and the explicit theme
+       selectors below override it at any depth because `color-scheme` inherits. */
+    color-scheme: light dark;
 
-  --radius-small: 0.25rem;
-  --radius-control: 0.5rem;
-  --radius-surface: 0.875rem;
-  --control-height: 2.5rem;
-  --border-width: 1px;
+    --container-narrow: 48rem;
+    --container-max: 80rem;
+    --container-wide: 90rem;
+    --layout-gutter: clamp(1rem, 4vw, 2rem);
+    --layout-section-block: clamp(4rem, 9vw, 7rem);
+    --layout-gap: 1rem;
+    --layout-grid-min: 16rem;
 
-  /* `light-dark()` takes colors only, so the shadow color is the token and the
-     three elevations compose from it. Dark themes need a much heavier color to
-     read at all against a dark background. */
-  --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
-  /* Four rungs: no shadow, then a Tailwind-style sm/md/lg progression, so a
-     consumer unsure which step to reach for has a named "no depth" value
-     instead of inferring it by omitting a shadow declaration. The elevation
-     modifier classes (`.elevation-none`/`.elevation-sm`/`.elevation-md` in
-     elevation.css) share this naming on purpose -- same weight, same word --
-     though they multiply an aesthetic's shadow parts rather than declaring a
-     fixed value, so the two are not read from the same place. */
-  --elevation-none: none;
-  --elevation-sm: 0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);
-  --elevation-md: 0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);
-  --elevation-lg: 0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);
+    --radius-small: 0.25rem;
+    --radius-control: 0.5rem;
+    --radius-surface: 0.875rem;
+    --control-height: 2.5rem;
+    --border-width: 1px;
 
-  --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
-  /* Negative, so the ring is drawn over the edge rather than beside it: at a
-     positive offset the outline floats a gap away and reads as a second, detached
-     frame around the control. Pulled in by exactly the material line width, the
-     ring lands on top of the line and a focused control reads as its own edge
-     thickening -- which is what a focus indicator is meant to look like.
+    /* `light-dark()` takes colors only, so the shadow color is the token and the
+       three elevations compose from it. Dark themes need a much heavier color to
+       read at all against a dark background. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+    /* Four rungs: no shadow, then a Tailwind-style sm/md/lg progression, so a
+       consumer unsure which step to reach for has a named "no depth" value
+       instead of inferring it by omitting a shadow declaration. These are raw
+       shadows for elements a consumer styles; the elevation modifier classes
+       (`.flat`/`.raised`/`.floating` in elevation.css) multiply an aesthetic's
+       shadow parts instead, and are not read from here. */
+    --elevation-none: none;
+    --elevation-sm: 0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);
+    --elevation-md: 0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);
+    --elevation-lg: 0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);
 
-     A component drawing no line at rest loses nothing: the outline moves one
-     pixel inward over its own fill, which at a hairline is not a visible change. */
-  --focus-ring-offset: calc(-1 * var(--border-width));
-  --focus-ring-width: 3px;
+    --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
+    /* Negative, so the ring is drawn over the edge rather than beside it: at a
+       positive offset the outline floats a gap away and reads as a second, detached
+       frame around the control. Pulled in by exactly the material line width, the
+       ring lands on top of the line and a focused control reads as its own edge
+       thickening -- which is what a focus indicator is meant to look like.
 
-  --motion-duration-fast: 120ms;
-  --motion-duration-normal: 200ms;
-  --motion-duration-slow: 400ms;
-  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
+       A component drawing no line at rest loses nothing: the outline moves one
+       pixel inward over its own fill, which at a hairline is not a visible change. */
+    --focus-ring-offset: calc(-1 * var(--border-width));
+    --focus-ring-width: 3px;
 
-  --z-popover: 40;
+    --motion-duration-fast: 120ms;
+    --motion-duration-normal: 200ms;
+    --motion-duration-slow: 400ms;
+    --motion-ease: cubic-bezier(0.2, 0, 0, 1);
 
-  /* The one number the derived-hover formula spends: how much fill a hover adds
-     on top of whatever the element rests at. */
-  --hover-step: 14%;
-}
+    --z-popover: 40;
 
-/* The base look answers a press with a small scale-in. `box-active` applies it on
-   `.btn` and `.card.interactive`; every aesthetic sets its own
-   `--ui-active-transform` on its class, loaded after this file, so those win.
-   Reduced motion opts out. Kept outside `@theme` because a media query cannot go
-   inside it. */
-:root {
-  --ui-active-transform: scale(0.97);
-}
+    /* The one number the derived-hover formula spends: how much fill a hover adds
+       on top of whatever the element rests at. */
+    --hover-step: 14%;
+  }
 
-@media (prefers-reduced-motion: reduce) {
+  /* The base look answers a press with a small scale-in. `box-active` applies it on
+     `.btn` and `.card.interactive`; every aesthetic sets its own
+     `--ui-active-transform` on its class, in `components`, so those win over
+     this whichever sheet loads first. Reduced motion opts out. Kept outside `@theme` because a media query cannot go
+     inside it. */
   :root {
-    --ui-active-transform: none;
+    --ui-active-transform: scale(0.97);
   }
-}
 
-.light,
-.theme-light,
-[data-theme="light"] {
-  color-scheme: light;
-}
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --ui-active-transform: none;
+    }
+  }
+
+  .light,
+  .theme-light,
+  [data-theme="light"] {
+    color-scheme: light;
+  }
 
-.dark,
-.theme-dark,
-[data-theme="dark"] {
-  color-scheme: dark;
+  .dark,
+  .theme-dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
 }
 
 /* The first arm mirrors the `color-scheme: dark` block above, all three
@@ -267,3 +283,18 @@
     }
   }
 }
+
+/* Forced colours draw the plain version of every structural part: a solid line
+   and nothing an aesthetic layers on top. Unlayered, so it beats every layered
+   declaration of these tokens -- an aesthetic's and a consumer's utility alike --
+   the way the other `forced-colors` blocks do. See
+   docs/internal/model.md#material-tokens. */
+@media (forced-colors: active) {
+  * {
+    --ui-line-style: solid;
+    --ui-rule-style: solid;
+    --ui-halo-ink: initial;
+    --ui-surface-image: none;
+    --ui-label-shadow: none;
+  }
+}

package/dist/tw/utilities/content.css

@@ -1,4 +1,3 @@
-@reference "tailwindcss";
 @reference "../box.css";
 
 @utility table-wrap {
@@ -77,8 +76,8 @@
      ordinary 12% tint (twenty-four units past the head) read backwards -- the
      seam that should read as one table read as the head belonging to the page
      and the body being the odd one out. `--_fill-cap` is `box.css`'s override
-     slot (the same one `.card.soft` uses, for the same cascade-layer reason
-     the comment there gives), and `--_d-ground` is box's own private ground
+     slot (the same one `.card.soft` uses, for the reasons the comment there
+     gives), and `--_d-ground` is box's own private ground
      slot, unclaimed here until now -- both land on the table's own element,
      same as `--table-fill`/`--table-head-plate` do, so nothing here fights
      `.soft` for `--ui-fill` either. `.ghost` is left at box's default
@@ -202,7 +201,7 @@
   & td {
     @apply px-4 py-3 align-top;
 
-    border-bottom-style: solid;
+    border-bottom-style: var(--ui-rule-style, var(--ui-line-style, solid));
     border-bottom-width: var(--_width);
     border-color: var(--table-rule);
   }
@@ -221,7 +220,7 @@
   }
 
   & tfoot tr:first-child > * {
-    border-top-style: solid;
+    border-top-style: var(--ui-rule-style, var(--ui-line-style, solid));
     border-top-width: var(--_width);
     border-top-color: var(--table-boundary);
   }
@@ -318,12 +317,14 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  /* Capped at its own radius: a control radius is sized for a control, and a key
-     cap this small would read as a lozenge. A squaring aesthetic still reaches it. */
-  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
+  /* A small default remains when no aesthetic asks for a complete chip shape. */
+  border-radius: var(
+    --ui-radius-tight,
+    min(var(--ui-radius, var(--ui-corner, var(--radius-small))), var(--radius-small))
+  );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid) {
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
     --_fill-cap: 0%;
   }
 }
@@ -338,10 +339,13 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
+  border-radius: var(
+    --ui-radius-tight,
+    min(var(--ui-radius, var(--ui-corner, var(--radius-small))), var(--radius-small))
+  );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid) {
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
     --_fill-cap: 0%;
   }
 }
@@ -356,7 +360,7 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid) {
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
     --_fill-cap: 0%;
   }
 }
@@ -393,10 +397,15 @@
      box paints that over the fill it already drew, so a quotation that asked for
      no bar got a bar of two coats of its own tint.
 
-     That this had to be fixed twice is the cost of a quotation drawing its own
-     edge instead of taking `box`'s. Recorded in `registry.json` beside the
-     decision to compose none of `box`. */
-  --quote-line: color-mix(in oklab, var(--quote-bg) var(--ui-fill, var(--_d-fill)), var(--intent-border));
+     It also fades toward `transparent` rather than toward the plate, as `box`'s
+     does: the plate runs under the bar, so a bar blended toward it painted a
+     translucent plate twice and drew a darker stripe on a neutral `.solid`
+     quotation.
+
+     That this had to be fixed three times is the cost of a quotation drawing
+     its own edge instead of taking `box`'s. Recorded in `registry.json` beside
+     the decision to compose none of `box`. */
+  --quote-line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
   --quote-edge: color-mix(in oklab, var(--quote-line) var(--ui-border, var(--_d-border)), transparent);
   --quote-width: calc(var(--ui-border-width, var(--border-width)) * 2 + 1px);
 

package/dist/tw/utilities/layout.css

@@ -1,5 +1,3 @@
-@reference "tailwindcss";
-
 @utility view {
   @apply flex gap-(--layout-gap);
 
@@ -90,11 +88,13 @@
 
   border-color: var(--divider-color);
   border-top-width: var(--divider-width);
+  border-top-style: var(--ui-rule-style, var(--ui-line-style, solid));
 
   &.vertical {
     @apply h-auto w-0 self-stretch border-s border-t-0;
 
     border-inline-start-width: var(--divider-width);
+    border-inline-start-style: var(--ui-rule-style, var(--ui-line-style, solid));
   }
 }
 

package/docs/accessibility.md

@@ -26,14 +26,14 @@ This package provides CSS hooks for accessible states. It does not provide seman
 
 ### Control boundaries
 
-| Feature              | Behavior                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Control boundaries   | Text controls rest at `--_line-rest` of their intent, under 3:1 by choice; hover and focus take the tone whole.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| Toggle boundaries    | `.checkbox`, `.radio`, and `.switch` draw their line whole, because it is the only thing marking an unchecked box.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| Cascaded `.edgeless` | Floored on every text control: a container cannot erase the line of a field or toggle nobody classed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| Own `.edgeless`      | On the element, `.ipt`, `.textarea`, `.select`, and `.switch` do drop their line and do not meet 1.4.11 at rest, except `.switch.ghost`: `.ghost` already asks for zero fill, so dropping the line too would leave no boundary at all, and `.switch.ghost.edgeless` keeps it up instead.                                                                                                                                                                                                                                                                             |
-| `.checkbox`/`.radio` | Never drop their line, on the element or from a container. `.edgeless` on them is unsupported, not merely discouraged.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| Progress track       | Known gap. `.progress`'s registered default, `.soft.edgeless`, does not meet 1.4.11 at rest -- measured ~1.1-1.3:1 against the page in both themes and across intents, down from the ~3.6-4.3:1 the prior fixed-neutral track cleared. An `.edged` presentation restores a boundary through the line for most intents (`primary.soft.edged` ~15:1), but not every one clears 3:1 there either (`warning.soft.edged` ~2.7:1). A consumer whose track must meet 1.4.11 should choose an `.edged` presentation and verify the intents they use, until this is resolved. |
+| Feature              | Behavior                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Control boundaries   | Text controls rest at `--_line-rest` of their intent, under 3:1 by choice, so hover and focus have a whole tone to move the line to.                                                                                                                                                                                                                                                                                                                                |
+| Toggle boundaries    | `.checkbox`, `.radio`, and `.switch` draw their line whole, because it is the only thing marking an unchecked box.                                                                                                                                                                                                                                                                                                                                                  |
+| Cascaded `.edgeless` | Floored on every text control: a container cannot erase the line of a field or toggle nobody classed.                                                                                                                                                                                                                                                                                                                                                               |
+| Own `.edgeless`      | On the element, `.ipt`, `.textarea`, `.select`, and `.switch` do drop their line and do not meet 1.4.11 at rest, except `.switch.ghost`: `.ghost` already asks for zero fill, so dropping the line too would leave no boundary at all, and `.switch.ghost.edgeless` keeps it up instead.                                                                                                                                                                            |
+| `.checkbox`/`.radio` | Never drop their line, on the element or from a container. `.edgeless` on them is unsupported, not merely discouraged.                                                                                                                                                                                                                                                                                                                                              |
+| Progress track       | By choice, the value carries the reading and the track is a quiet secondary cue. `.progress`'s registered default, `.soft.edgeless`, rests its track at ~1.1-1.3:1 against the page; the value clears 3:1 against that track for every intent but warning in light (~2.7:1) and info in dark (~2.9:1). `.ghost.edged` clears 3:1 for both the track's outline and the value, for every intent, in both themes -- choose it where the track itself must meet 1.4.11. |
 
 ### Motion and transparency
 
@@ -47,14 +47,14 @@ The loader fallback is embedded in loader CSS, so focused imports that include l
 
 ### Color and contrast
 
-| Feature            | Behavior                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Filled labels      | Every intent's `.solid` label meets 1.4.3 (4.5:1) as normal text, in both themes. Lowest is success at 5.14:1.                                                                                                                                                                                                                                                                                                                            |
-| Warning ink        | `--color-warning-contrast` is the near-black tone, not the page tone. Amber dark enough to carry white is not amber.                                                                                                                                                                                                                                                                                                                      |
-| Partial fills      | Contrast ink appears only past a half fill, so a capped plate keeps `--intent-strong` rather than walking toward the page.                                                                                                                                                                                                                                                                                                                |
-| Intent hue in dark | `--intent-strong` is the `-300` shade in dark, so a soft or ghost label keeps its own hue instead of reading white.                                                                                                                                                                                                                                                                                                                       |
-| Toggle marks       | A checked mark meets 3:1 as a state indicator on every plate its fill class can paint, in both themes.                                                                                                                                                                                                                                                                                                                                    |
-| Soft-edged border  | `.alert`, `.panel`, `.badge`, `.kbd`, and `.code`/`.pre`'s `.edged` border blends toward the component's own fill; at `.soft`'s 12% fill this misses 3:1 against the fill for some intents, and which ones misses depends on the theme. Known, not fixed -- `--color-border`/`--intent-border` is a shared blend seam every one of them reads, so a targeted fix would need to touch it for one component without moving it for the rest. |
+| Feature            | Behavior                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Filled labels      | Every intent's `.solid` label meets 1.4.3 (4.5:1) as normal text, in both themes. Lowest is success at 5.14:1.                                                                                                                                                                                                                                                                                                                              |
+| Warning ink        | `--color-warning-contrast` is the near-black tone, not the page tone. Amber dark enough to carry white is not amber.                                                                                                                                                                                                                                                                                                                        |
+| Partial fills      | Contrast ink appears only past a half fill, so a capped plate keeps `--intent-strong` rather than walking toward the page.                                                                                                                                                                                                                                                                                                                  |
+| Intent hue in dark | `--intent-strong` is the `-300` shade in dark, so a soft or ghost label keeps its own hue instead of reading white.                                                                                                                                                                                                                                                                                                                         |
+| Toggle marks       | A checked mark meets 3:1 as a state indicator on every plate its fill class can paint, in both themes.                                                                                                                                                                                                                                                                                                                                      |
+| Soft-edged border  | `.alert`, `.panel`, `.badge`, `.kbd`, and `.code`/`.pre`'s `.edged` border fades out by the component's fill amount; at `.soft`'s 12% fill this misses 3:1 against the fill for some intents, and which ones misses depends on the theme. Known, not fixed -- `--color-border`/`--intent-border` is a shared blend seam every one of them reads, so a targeted fix would need to touch it for one component without moving it for the rest. |
 
 ### Forced colors and direction
 

package/docs/changelog/0.5.0.md

@@ -0,0 +1,38 @@
+---
+title: 0.5.0
+---
+
+# 0.5.0
+
+A foundation update with an opt-in sketch aesthetic and rounded sketch variant.
+
+## Breaking
+
+- **The package sits in named cascade layers.** Every entrypoint declares Tailwind's layer order first and places everything in it: foundation tokens and the palette in `theme`, resets in `base`, the intent, presentation, elevation, and aesthetic classes in `components`, and every component in `utilities` -- including on `/components` and `/native`, which emitted them unlayered. Your own utility or unlayered CSS now beats all four class families on the same element, and an aesthetic on `<html>` keeps its tokens over the theme's in any load order. CSS that relied on a package class beating it now loses to it, and a rule of yours in `@layer components` contests the class families by specificity instead of losing outright. See [Setup](../setup.md).
+- **Aesthetics set `--ui-corner`, not `--ui-radius`.** The corner is now a length at the default size that scales with the element (below); `--ui-radius` and `--ui-radius-surface` take a complete radius used as written, and every shipped aesthetic sets `--ui-corner` and `--ui-corner-surface` instead. If you set `--ui-radius` yourself, nothing changes for you. An aesthetic of your own moves to `--ui-corner` to get the scale and the corner pattern. `--ui-radius-pill` and `--ui-radius-tight` fall back through `--ui-radius`, then `--ui-corner`.
+- **`--ui-button-weight` and `--ui-button-tracking` are `--ui-label-weight` and `--ui-label-tracking`**, read by `.badge` as well as `.btn`. The old names are removed without an alias. Under `.chunky-tile`, badges now take the heavier label too.
+- **Explicit chip radii are no longer capped.** Checkbox, `.kbd`, and `.code` keep a small default radius when `--ui-radius-tight` is unset, but a supplied value now applies as a complete `border-radius`, including elliptical shapes. A consumer setting a large value now gets the large corner it asked for instead of the previous `--radius-small` ceiling.
+- **Alias classes removed**, each a second name for a class that already had one: `.dense`, `.compact`, and `.spacious` (use `.p-xs`, `.p-sm`, and `.p-lg`); `.danger` and `.error` (use `.destructive`, and `.hint.destructive` for `.hint.error`); and `.elevation-none`, `.elevation-sm`, and `.elevation-md` (use `.flat`, `.raised`, and `.floating`). `.theme-light` and `.theme-dark` stay.
+- **`.cyber` glows everything, flat or not.** Its glow moved from depth onto the new halo, so fields, chips, badges, and alerts glow too, `.flat` no longer puts the glow out, and `.raised` and `.floating` add no shadow under it.
+
+## Added
+
+- **`.sketch`, `.sketch-rounded`, and `.sketch-solo`**: a hand-drawn treatment with uneven elliptical corners, a solid ink line (dashed checkboxes and rules under `.sketch`), a small offset shadow, and an optional consumer-supplied handwriting font. Sibling components rotate between four stable outlines; pill buttons take organic hand-drawn rounded pill contours without oval distortion; switch tracks, knobs, and chips take compact irregular box outlines, and radios stay subtly circular. The opt-in `.sketch-rounded` modifier class provides subtle, organic hand-drawn rounded contours across controls, surfaces, chips, and solo elements with 4-step sibling rotation and no egg-shaped distortion on wide elements. The solo class paints an unstyled element directly; the cascading class restyles package components. Both ship in the aesthetic aggregate and dedicated compiled and Tailwind CSS entrypoints. See [Aesthetics](../usage/aesthetics.md#sketch).
+- **Corner scale.** `.p-xs` sets a size step of `0.5`, `.sm` and `.p-sm` `0.75`, and `.lg` and `.p-lg` `1.25`, and the corner is multiplied by it; when a size and a padding class sit on one element, the smaller step wins. A bevel stays a true 45 degrees, so `.cyber`'s 25% cap is gone. Depth follows the step down, never up: a `.p-xs` button sits on half its aesthetic's shadow, which also retires chunky tile's one selector list. `--ui-scale` overrides the step. A press that travels into the depth -- `--ui-active-translate-x` and `-y`, which chunky tile and neobrutalism now set instead of a translating `--ui-active-transform` -- scales the same way, elevation included, so it always lands flat on the slab, and a `.flat` button under either no longer drops. See [Customizing → Corner size and pattern](../usage/customizing.md#corner-size-and-pattern).
+- **Corner pattern.** `.cut-diagonal` keeps the top-left and bottom-right corners and squares the other two, `.cut-diagonal-reverse` the opposite pair, wherever the corner is computed -- on a control under `.cyber`, but not a surface, which keeps its own shape. Both set `--ui-corner-tl`, `-tr`, `-br`, and `-bl`, which you can set yourself.
+- **`--ui-line-style`**: `solid`, `dashed`, `dotted`, or `double` for every line a component draws -- the box's edge, the progress track, and dividers and table rules. `--ui-rule-style` overrides only dividers and table rules.
+- **A halo**, `--ui-halo-blur`, `--ui-halo-spread`, and `--ui-halo-ink`: light in the element's own intent colour, which elevation does not scale and `.flat` does not remove.
+- **`--ui-surface-image`**, a painted layer over a surface's plate -- cards, panels, alerts, and tooltips, not controls. Your own `background-image` on a surface still wins.
+- **`--ui-label-case` and `--ui-label-shadow`**, beside the weight and tracking: the label's `text-transform`, and a `text-shadow` written without a colour so it takes the label's own.
+- **`--ui-control-ink`**, a neutral line for controls read ahead of `--ui-ink`. Glass and chunky tile set it, so an unchecked checkbox under glass (1.33:1 before) and a field under chunky tile (1.65:1 before) draw a boundary that reads.
+
+Under forced colours, each new part draws its plain version: a solid line, no halo, no painted layer, and no label shadow.
+
+## Fixed
+
+- **A stylesheet survives being inlined.** The loader art's SVG data URIs carried a literal `</style>`, so a stylesheet pasted into an HTML `<style>` element ended at the first loader and silently dropped every rule after it. It is now percent-encoded.
+- **Every entry ships the theme it promises.** `/components`, `/tw/components`, `/tw/feedback`, and `/tw/tooltip` shipped no colour token at all, and every other focused `/tw` component entry lost the palette ramp the tokens are built from. Each entry now declares every colour it reads, and `/components` works alone.
+- **A line fades into a translucent plate instead of ringing it.** A neutral `.solid.edged`, and any plate `--ui-bg-alpha` thins, drew a ring 1.54:1 against its own fill; the line now fades toward transparent as the fill fills in. The generated palette's edge tokens follow.
+- **A select's options read in the dark theme.** The open list is painted over the select's own background, and a ghost `.select` has none, so Chromium drew its default white popup under options that inherited the near-white text. Options and option groups now take the page's ground and text colour.
+- **A region nested inside glass keeps its own surfaces.** Neobrutalism, pixel, chunky tile, and cyber left glass's translucent ground, fill alpha, and two-layer surface shadow in place, so their cards inside a glass region came out as half glass. Every aesthetic now clears them.
+- **Surfaces under glass stay glass.** A neutral `.card.soft`, `.panel`, and `.alert` sat opaque inside a glass region, and `.card.soft.glass` did on the same element; their quiet ground is now a private default beneath `--ui-surface-ground`.

package/docs/changelog/index.md

@@ -6,6 +6,7 @@ group: Changelog
 
 # Changelog
 
+- [0.5.0](0.5.0.md)
 - [0.4.0](0.4.0.md)
 - [0.3.0](0.3.0.md)
 - [0.2.0](0.2.0.md)

package/docs/index.md

@@ -5,7 +5,7 @@ description: What @codenhub/styles is, what it covers, and where to go next.
 
 # @codenhub/styles
 
-`@codenhub/styles` is a CSS-only design system: tokens, a reset, typography and layout utilities, and composable classes for buttons, forms, feedback, surfaces, and tooltips. Every component separates three independent choices — which color, how much of it, and what it's made of — so changing one never requires a component-specific variant. Four optional aesthetics (`.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`) restyle that same component set without touching markup.
+`@codenhub/styles` is a CSS-only design system: tokens, a reset, typography and layout utilities, and composable classes for buttons, forms, feedback, surfaces, and tooltips. Every component separates three independent choices — which color, how much of it, and what it's made of — so changing one never requires a component-specific variant. Six optional aesthetics (`.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber`, `.sketch`) restyle that same component set without touching markup.
 
 The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source entrypoints for a project that already runs Tailwind. Both cover the same classes; the difference is which build processes them.
 
@@ -14,7 +14,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
 - Publishes color, foundation, intent, presentation, and material design tokens as CSS custom properties, themed with `light-dark()`.
 - Provides a reset, focus-visible handling, and responsive layout/content utilities.
 - Provides composable classes for buttons, form controls and toggles, alerts, badges, loaders, progress, cards/panels, tables, quotes, code, and tooltips.
-- Provides five opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants, each with a solo class that paints the look onto an element the package does not style.
+- Provides six opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants, each with a solo class that paints the look onto an element the package does not style.
 - Provides classless mappings so plain HTML elements pick up base styling without added classes, from a dedicated entrypoint.
 - Publishes Tailwind CSS v4 source entrypoints alongside the compiled output.
 
@@ -23,7 +23,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
 - No JavaScript. There is no runtime, no framework bindings, and no build-time code generation beyond the CSS itself.
 - No semantic HTML, ARIA, keyboard behavior, focus management, validation, or announcement timing. See [Accessibility](./accessibility.md) for the exact line between what the CSS provides and what an application must still add.
 - No theme-toggling logic. Theme selection is a class or attribute a consumer applies; wiring a toggle to system preference, storage, or a user setting is outside this package. The `@codenhub/theme` package covers that need for consumers who want it.
-- No shipped font binaries. `.pixel`, `.chunky-tile`, and `.cyber` accept a consumer-supplied font and fall back to a system stack when none is given.
+- No shipped font binaries. `.pixel`, `.chunky-tile`, `.cyber`, and `.sketch` accept a consumer-supplied font and fall back to a system stack when none is given.
 - No compatibility layer for removed tokens or classes. Breaking changes are documented, not silently aliased.
 
 ## Next steps