@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/aesthetics/index.css

@@ -2,9 +2,11 @@
    for only the one in use: a cascading class has no static call site, so nothing
    here can be tree-shaken.
 
-   Import after the base stylesheet in either form. */
+   Import before or after the base stylesheet, in either form: every entrypoint
+   states the layer order first, so load order decides nothing. */
 @import "./neobrutalism.css";
 @import "./glass.css";
 @import "./pixel.css";
 @import "./chunky-tile.css";
 @import "./cyber.css";
+@import "./sketch.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -1,61 +1,114 @@
 /* Neobrutalism: thick ink outline, a hard unblurred offset shadow, and a press
    that moves the element into its own shadow. Material tokens only, no component
    named -- the ink reaches everything through the intent reset, the shadow is
-   colourless geometry each component colours against its own intent. Load after
-   the base stylesheet; source order decides against the zero-specificity reset. */
-.neobrutalism {
-  /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
-     themes) can set `--neo-offset`; the private carries the resolved value to
-     the six places below. See model.md#rules-for-aesthetics (R8). */
-  --_neo-offset: var(--neo-offset, 4px);
+   colourless geometry each component colours against its own intent. */
+
+/* The layer map, stated before anything uses a layer -- see `theme.css`. The
+   aesthetic's token class sits in `components`, below every utility, so a
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .neobrutalism {
+    /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
+       themes) can set `--neo-offset`; the private carries the resolved value to
+       the six places below. See model.md#rules-for-aesthetics (R8). */
+    --_neo-offset: var(--neo-offset, 4px);
+
+    /* Pure black reads as ink on a light page and disappears on a dark one, so the
+       ink follows the theme rather than the palette. A thick border in the neutral
+       border grey is a thick grey box, not a brutalist one. */
+    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
-  /* Pure black reads as ink on a light page and disappears on a dark one, so the
-     ink follows the theme rather than the palette. A thick border in the neutral
-     border grey is a thick grey box, not a brutalist one. */
-  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+    --ui-corner: 0;
+    --ui-corner-surface: 0;
+    --ui-border-width: 2px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
 
-  --ui-radius: 0;
-  --ui-radius-surface: 0;
-  --ui-border-width: 2px;
-  --ui-border-max: 100px;
+    /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
+       the registry decides which components sit on a slab and `.flat` takes one
+       off without this file knowing which component it landed on. */
+    /* The slab is ink, not shade: a hard offset of the element's own line colour
+       is the whole look, so this aesthetic asks for the intent instead of the
+       neutral depth colour every other shadow uses. */
+    --ui-shadow-ink: 100%;
+    /* The ink replaces the depth colour whole, so this one is inert here; it is
+       restated so a region nested inside chunky tile or cyber does not inherit
+       their black or transparent depth. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+    --ui-shadow-x: var(--_neo-offset);
+    --ui-shadow-y: var(--_neo-offset);
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    /* No halo, cleared so a region nested inside another
+       aesthetic does not inherit one. */
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
 
-  /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
-     the registry decides which components sit on a slab and `.flat` takes one
-     off without this file knowing which component it landed on. */
-  /* The slab is ink, not shade: a hard offset of the element's own line colour
-     is the whole look, so this aesthetic asks for the intent instead of the
-     neutral depth colour every other shadow uses. */
-  --ui-shadow-ink: 100%;
-  --ui-shadow-x: var(--_neo-offset);
-  --ui-shadow-y: var(--_neo-offset);
-  --ui-shadow-blur: 0px;
-  --ui-shadow-spread: 0px;
+    /* The press: travel the offset, shrink the shadow to nothing, so the
+       element lands flat where its slab was. A translation `box` scales with
+       the slab, so the two stay the same length at every size and elevation.
+       Hover keeps the slab still under the pointer; `box-hover`'s derived fill
+       tint is the whole hover response. One token pair, no `:hover` list, R3
+       intact. */
+    --ui-active-shadow-x: 0px;
+    --ui-active-shadow-y: 0px;
+    --ui-active-transform: none;
+    --ui-active-translate-x: var(--_neo-offset);
+    --ui-active-translate-y: var(--_neo-offset);
+    --ui-hover-transform: none;
 
-  /* The press: travel the offset, shrink the shadow to nothing, so the element
-     lands flat where its slab was. Hover keeps the slab still under the pointer;
-     `box-hover`'s derived fill tint is the whole hover response. One token pair,
-     no `:hover` list, R3 intact. */
-  --ui-active-shadow-x: 0px;
-  --ui-active-shadow-y: 0px;
-  --ui-active-transform: translate(var(--_neo-offset), var(--_neo-offset));
+    /* Nothing here clips or blurs, and an aesthetic nested inside another has to
+       say so rather than inherit it. Nothing clips, so the global focus outline
+       shows and no inset focus layer is wanted: cleared so a region nested
+       inside pixel does not inherit pixel's. */
+    --ui-focus-inset: initial;
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    /* Round corners, said explicitly, and the pill and chip corners cleared back
+       to `--ui-corner`: a region nested inside `.cyber` would otherwise inherit
+       its bevel, its diagonal, its diamond pills, and its square chips. */
+    --ui-corner-shape: round;
+    --ui-radius-pill: initial;
+    --ui-radius-tight: initial;
+    --ui-radius: initial;
+    --ui-radius-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+    --ui-shadow-inset: ;
+    /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
+       button keeps it. Cleared rather than omitted, because a neobrutalist region
+       nested inside a pixel one would otherwise inherit pixel's answer and lose the
+       slab on everything the edge axis rests at zero. */
+    --ui-shadow-edge: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-bg-alpha: 1;
+    --ui-surface-image: initial;
 
-  /* Nothing here clips or blurs, and an aesthetic nested inside another has to
-     say so rather than inherit it. */
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  /* Round corners, said explicitly, and the pill and chip corners cleared back
-     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
-     its bevel, its diamond pills, and its square chips. */
-  --ui-corner-shape: round;
-  --ui-radius-pill: initial;
-  --ui-radius-tight: initial;
-  --ui-shadow-inset: ;
-  /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
-     button keeps it. Cleared rather than omitted, because a neobrutalist region
-     nested inside a pixel one would otherwise inherit pixel's answer and lose the
-     slab on everything the edge axis rests at zero. */
-  --ui-shadow-edge: initial;
-  --ui-backdrop: none;
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+  }
 }
 
 /* The one R3 exception, recorded in the registry as `selectors`. The slab here
@@ -63,13 +116,19 @@
    registry rests flat -- looks unfinished without it. It writes the component's
    resting default rather than the modifier, so `.flat`/`.raised`/`.floating`
    still win on the element; a token would name the component through a longer
-   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback. */
-.neobrutalism .alert {
-  --_d-elevation: 1;
+   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback.
+
+   In `utilities`, not with the token class: it has to beat `@utility alert`'s
+   own `--_d-elevation: 0`, which it does there at 0-2-0, and it writes only a
+   private nothing a consumer sets. */
+@layer utilities {
+  .neobrutalism .alert {
+    --_d-elevation: 1;
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
-   element the package does not style. See docs/internal/solo-utilities.md and
+   element the package does not style. See docs/internal/model.md#solo-classes and
    the note on `.glass-solo`: own knobs and foundation tokens with literal
    fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
    token, unlayered, and not for this package's own components. */

package/dist/tw/aesthetics/pixel.css

@@ -6,97 +6,147 @@
    which is exactly what `--ui-shadow-inset`, `--ui-shadow-spread` and
    `--ui-shadow-edge` are for. The ring is still coloured by each component's own
    intent, because the parts carry no colour. */
-.pixel {
-  /* One pixel of the imaginary grid; the ring is one unit thick and the corner
-     one unit square, so scaling it scales the whole look. Read with a fallback
-     so an ancestor can set `--pixel-unit` -- declared here it outranks `:root`
-     (R8; see model.md#rules-for-aesthetics). */
-  --_pixel-unit: var(--pixel-unit, 4px);
 
-  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-  --ui-radius: 0;
-  --ui-radius-surface: 0;
-
-  /* A border would be clipped at the straight sides and paint a second line
-     beside the ring, so the ceiling takes it out and the ring does the drawing.
-
-     The width itself stays under the unit deliberately. Its one live reader is
-     the toggle cap in `form.css`, which reads it as the thinnest line this
-     aesthetic will accept where the full ring does not fit: a 16px checkbox
-     spending four pixels a side leaves an eight-pixel hole and an unchecked box
-     reads as a filled one. */
-  --ui-border-width: 2px;
-  --ui-border-max: 0px;
-
-  /* The ring is one unit deep, which is exactly the corner cut, so the staircase
-     is covered and the line does not read as broken at the corners. Spread is not
-     scaled by elevation, so a chip resting at zero keeps its edge. */
-  --ui-shadow-inset: inset;
-  /* The ring is this element's border, not depth, drawn where `clip-path` cannot
-     cut it. `--ui-shadow-edge` says so and `box` colours it from `--_edge`, so
-     the edge axis still decides: an `.edgeless` badge or `.solid` button gets no
-     ring, an `.edged` card does, a field keeps one whatever a container asks.
-     Declared empty because it is read for presence -- the percentage form nests
-     two `color-mix()` results that WebKit resolves as zero (see `box`). */
-  --ui-shadow-edge: ;
-  --ui-shadow-spread: var(--_pixel-unit);
-  --ui-shadow-x: 0px;
-  --ui-shadow-y: 0px;
-  --ui-shadow-blur: 0px;
-
-  /* The focus ring is a second inset layer, and shadows paint first-on-top, so it
-     has to be wider than the edge to show at all. */
-  --ui-focus-inset: calc(var(--_pixel-unit) + var(--focus-ring-width));
-
-  /* One square unit off each corner, and nothing else. The staircase this
-     replaces stepped twice at half the unit to approximate a curve, which is the
-     one thing a low-resolution grid cannot do: at any size it read as a bevel
-     that had not quite committed. A single cut of the grid's own unit is the
-     shape the look is actually made of.
-
-     The polygon resolves the unit here, on `.pixel`, and inherits down
-     already-resolved -- so a component cannot rescale the corner by setting
-     `--pixel-unit` on itself, and the knob belongs above rather than within. */
-  --ui-clip: polygon(
-    0 var(--_pixel-unit),
-    var(--_pixel-unit) var(--_pixel-unit),
-    var(--_pixel-unit) 0,
-    calc(100% - var(--_pixel-unit)) 0,
-    calc(100% - var(--_pixel-unit)) var(--_pixel-unit),
-    100% var(--_pixel-unit),
-    100% calc(100% - var(--_pixel-unit)),
-    calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)),
-    calc(100% - var(--_pixel-unit)) 100%,
-    var(--_pixel-unit) 100%,
-    var(--_pixel-unit) calc(100% - var(--_pixel-unit)),
-    0 calc(100% - var(--_pixel-unit))
-  );
-  /* Chips take the other half of the vocabulary: no radius at all. The cut is one
-     grid unit whatever the element is, and one unit off each corner of a 24px
-     badge or a 16px checkbox is a bite rather than a corner. Squared is the
-     honest small-scale answer, and it is still the pixel look -- the aesthetic is
-     a grid, and a square is on it. */
-  --ui-clip-tight: none;
-
-  /* Square corners already, but a radius of zero draws no shape; it is
-     restated, and the pill and chip corners cleared back to `--ui-radius`, so
-     a region nested inside `.cyber` does not inherit its bevel onto anything
-     that sets a radius of its own. */
-  --ui-corner-shape: round;
-  --ui-radius-pill: initial;
-  --ui-radius-tight: initial;
-
-  --ui-hover-transform: none;
-  --ui-active-transform: none;
-  --ui-backdrop: none;
-
-  /* Consumer-supplied. The package ships no font binary, so the aesthetic has no
-     font to fall back to but a monospace stack. */
-  font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+/* The layer map, stated before anything uses a layer -- see `theme.css`. The
+   aesthetic's token class sits in `components`, below every utility, so a
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .pixel {
+    /* One pixel of the imaginary grid; the ring is one unit thick and the corner
+       one unit square, so scaling it scales the whole look. Read with a fallback
+       so an ancestor can set `--pixel-unit` -- declared here it outranks `:root`
+       (R8; see model.md#rules-for-aesthetics). */
+    --_pixel-unit: var(--pixel-unit, 4px);
+
+    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+    --ui-corner: 0;
+    --ui-corner-surface: 0;
+
+    /* A border would be clipped at the straight sides and paint a second line
+       beside the ring, so the ceiling takes it out and the ring does the drawing.
+
+       The width itself stays under the unit deliberately. Its one live reader is
+       the toggle cap in `form.css`, which reads it as the thinnest line this
+       aesthetic will accept where the full ring does not fit: a 16px checkbox
+       spending four pixels a side leaves an eight-pixel hole and an unchecked box
+       reads as a filled one. */
+    --ui-border-width: 2px;
+    --ui-border-max: 0px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
+
+    /* The ring is one unit deep, which is exactly the corner cut, so the staircase
+       is covered and the line does not read as broken at the corners. Spread is not
+       scaled by elevation, so a chip resting at zero keeps its edge. */
+    --ui-shadow-inset: inset;
+    /* The ring is this element's border, not depth, drawn where `clip-path` cannot
+       cut it. `--ui-shadow-edge` says so and `box` colours it from `--_edge`, so
+       the edge axis still decides: an `.edgeless` badge or `.solid` button gets no
+       ring, an `.edged` card does, a field keeps one whatever a container asks.
+       Declared empty because it is read for presence -- the percentage form nests
+       two `color-mix()` results that WebKit resolves as zero (see `box`). */
+    --ui-shadow-edge: ;
+    --ui-shadow-spread: var(--_pixel-unit);
+    /* No halo, cleared so a region nested inside another
+       aesthetic does not inherit one. */
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
+    --ui-shadow-x: 0px;
+    --ui-shadow-y: 0px;
+    --ui-shadow-blur: 0px;
+
+    /* The focus ring is a second inset layer, and shadows paint first-on-top, so it
+       has to be wider than the edge to show at all. */
+    --ui-focus-inset: calc(var(--_pixel-unit) + var(--focus-ring-width));
+
+    /* One square unit off each corner, and nothing else. A staircase
+       approximates a curve, which is the one thing a low-resolution grid cannot
+       do: it reads as a bevel that has not quite committed. A single cut of the
+       grid's own unit is the shape the look is made of.
+
+       The polygon resolves the unit here, on `.pixel`, and inherits down
+       already-resolved -- so a component cannot rescale the corner by setting
+       `--pixel-unit` on itself, and the knob belongs above rather than within. */
+    --ui-clip: polygon(
+      0 var(--_pixel-unit),
+      var(--_pixel-unit) var(--_pixel-unit),
+      var(--_pixel-unit) 0,
+      calc(100% - var(--_pixel-unit)) 0,
+      calc(100% - var(--_pixel-unit)) var(--_pixel-unit),
+      100% var(--_pixel-unit),
+      100% calc(100% - var(--_pixel-unit)),
+      calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)),
+      calc(100% - var(--_pixel-unit)) 100%,
+      var(--_pixel-unit) 100%,
+      var(--_pixel-unit) calc(100% - var(--_pixel-unit)),
+      0 calc(100% - var(--_pixel-unit))
+    );
+    /* Chips take the other half of the vocabulary: no radius at all. The cut is one
+       grid unit whatever the element is, and one unit off each corner of a 24px
+       badge or a 16px checkbox is a bite rather than a corner. Squared is the
+       honest small-scale answer, and it is still the pixel look -- the aesthetic is
+       a grid, and a square is on it. */
+    --ui-clip-tight: none;
+
+    /* Square corners already, but a radius of zero draws no shape; it is
+       restated, and the pill and chip corners cleared back to `--ui-corner`, so
+       a region nested inside `.cyber` does not inherit its bevel onto anything
+       that sets a radius of its own. */
+    --ui-corner-shape: round;
+    --ui-radius-pill: initial;
+    --ui-radius-tight: initial;
+    --ui-radius: initial;
+    --ui-radius-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+
+    /* The ring is the edge and nothing here is depth, so the shadow ink, the
+       press's shadow, and the depth colour are cleared or restated rather than
+       inherited from an aesthetic around this one. */
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+    --ui-hover-transform: none;
+    --ui-active-transform: none;
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-bg-alpha: 1;
+    --ui-surface-image: initial;
+
+    /* Consumer-supplied. The package ships no font binary, so the aesthetic has no
+       font to fall back to but a monospace stack. */
+    font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
-   element the package does not style. See docs/internal/solo-utilities.md and
+   element the package does not style. See docs/internal/model.md#solo-classes and
    the note on `.glass-solo`: own knobs and foundation tokens with literal
    fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
    token, unlayered, and not for this package's own components. */