@codenhub/styles 0.6.0 → 0.8.0

package/{dist/tw → tw}/aesthetics/neobrutalism.css

@@ -108,6 +108,12 @@
     --ui-label-tracking: initial;
     --ui-label-case: initial;
     --ui-label-shadow: initial;
+
+    /* No face of its own, so the theme's, named rather than inherited: a
+       neobrutalist region nested inside pixel, cyber, sketch, or chunky tile
+       otherwise took their face. `--font-default` is the token the reset
+       applies to the page, as chunky tile reads it. */
+    font-family: var(--font-default, ui-sans-serif, system-ui, sans-serif);
   }
 }
 
@@ -120,33 +126,111 @@
 
    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. */
+   private nothing a consumer sets.
+
+   Bounded by the nearest aesthetic region: an alert inside another aesthetic
+   nested in a neobrutalist region rests as that aesthetic rests it, and one in
+   a neobrutalist region nested again inside that takes the slab back. A
+   `:not(.neobrutalism :is(...) *)` exclusion cannot tell those two apart, since
+   the re-entered alert also sits below the other aesthetic, so each region
+   writes a private flag instead and inheritance hands the alert the nearest
+   one's. The slab is the alert's own resting default when the flag is unset. */
 @layer utilities {
-  .neobrutalism .alert {
-    --_d-elevation: 1;
+  .neobrutalism {
+    --_neo-alert-elevation: 1;
+  }
+
+  :is(.glass, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_neo-alert-elevation: initial;
+  }
+
+  /* The class on the alert itself counts as its region, as it does for every
+     token: `.card.neobrutalism` takes its slab, and the alert rested flat. */
+  :is(.neobrutalism .alert, .alert.neobrutalism) {
+    --_d-elevation: var(--_neo-alert-elevation, 0);
   }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    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. */
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .neobrutalism-solo {
   --_neo-offset: var(--neo-offset, 4px);
-  --_neo-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
+  /* The slab, scaled by the element's own elevation class: `.flat` takes it off
+     and `.floating` doubles it, and the press travels the same distance. */
+  --_solo-depth: calc(var(--_neo-offset) * var(--ui-elevation, 1));
 
-  border: 2px solid var(--_neo-ink);
+  border: 2px solid var(--_solo-edge);
   border-radius: 0;
-  box-shadow: var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);
-  transition:
-    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
-    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  box-shadow:
+    var(--_solo-depth) var(--_solo-depth) 0 0 var(--_solo-ink),
+    inset 0 0 0 100vmax var(--_solo-fill);
+}
+
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.neobrutalism-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.neobrutalism-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
 }
 
 /* The press, only on something pressed: an action, not disabled. A solo
    container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
-   an opted-in card press under the aesthetic class. */
+   an opted-in card press under the aesthetic class.
+
+   Only an action takes the press's transition. `transition` is one list, so
+   writing it on every solo element replaced a container's own -- a toast's
+   fade and height stopped animating. The travel is the independent
+   `translate`, so the element's own `transform` stays its own. */
 .neobrutalism-solo:is(
   button,
   a[href],
@@ -155,13 +239,20 @@
   input[type="button"],
   input[type="submit"],
   input[type="reset"]
-):active:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: 0 0 0 0 var(--_neo-ink);
-  transform: translate(var(--_neo-offset), var(--_neo-offset));
+) {
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    translate var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+
+  /* Reduced motion keeps the press and drops its motion: the element lands in
+     its slab at once. The near-zero duration `box` uses, so a `transitionend`
+     still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .neobrutalism-solo:is(
+.neobrutalism-solo:is(
     button,
     a[href],
     [role="button"],
@@ -170,6 +261,8 @@
     input[type="submit"],
     input[type="reset"]
   ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  box-shadow:
+    0 0 0 0 var(--_solo-ink),
+    inset 0 0 0 100vmax var(--_solo-fill);
+  translate: var(--_solo-depth) var(--_solo-depth);
 }

package/{dist/tw → tw}/aesthetics/pixel.css

@@ -147,18 +147,46 @@
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    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. */
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .pixel-solo {
   --_pixel-unit: var(--pixel-unit, 4px);
-  --_pixel-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+  /* The ring is the edge, and the fill is a layer under it rather than a plate
+     beneath a border, so the line fades to nothing instead of to the fill. */
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), transparent);
 
   /* The clip removes a border at the straight sides, so the ring draws the
      edge and the element's own border goes. */
   border: 0;
   border-radius: 0;
-  box-shadow: inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);
+  box-shadow:
+    inset 0 0 0 var(--_pixel-unit) var(--_solo-edge),
+    inset 0 0 0 100vmax var(--_solo-fill);
   clip-path: polygon(
     0 var(--_pixel-unit),
     var(--_pixel-unit) var(--_pixel-unit),
@@ -176,11 +204,68 @@
   font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 }
 
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.pixel-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.pixel-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* The clip takes the focus outline too, so focus is a second inset layer under
-   the ring, wider than it so it shows -- shadows paint first-on-top. */
+   the ring, wider than it so it shows -- shadows paint first-on-top. A line of
+   the page colour sits inside that one, as in `box`: the ring is the ink, and
+   on an element filled with the ink it would not show. */
 .pixel-solo:focus-visible {
   box-shadow:
-    inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink),
+    inset 0 0 0 var(--_pixel-unit) var(--_solo-edge),
     inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px))
-      var(--focus-ring, color-mix(in srgb, var(--_pixel-ink) 64%, transparent));
+      var(
+        --focus-ring,
+        color-mix(
+          in srgb,
+          light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0))) 64%,
+          transparent
+        )
+      ),
+    inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px) + 2px)
+      var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))),
+    inset 0 0 0 100vmax var(--_solo-fill);
+}
+
+/* Forced colours remove every box shadow, and the ring is one: the element
+   would have no edge at all. An outline stands in for it, drawn inward so
+   nothing moves, and the clip goes so the focus outline can show. This
+   entrypoint may be the only package stylesheet loaded, so it says so itself. */
+@media (forced-colors: active) {
+  .pixel-solo {
+    outline: var(--_pixel-unit) solid CanvasText;
+    outline-offset: calc(-1 * var(--_pixel-unit));
+    clip-path: none;
+  }
+
+  .pixel-solo:focus-visible {
+    outline-color: Highlight;
+  }
 }