@codenhub/styles 0.7.0 → 0.8.0

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

@@ -39,6 +39,13 @@
        on a field's 60% resting line, in light. See
        docs/internal/model.md#presentation. */
     --ui-control-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
+    /* Buttons and badges keep the hairline, which needs a plate to be seen
+       on. Unfilled they have none -- white at 65% on a light page is 1.01:1,
+       an edged ghost button with no edge -- so there the neutral line is the
+       control one. `box` reads it only for a neutral box resolving to no
+       fill; the other aesthetics clear it below, so the nearest region
+       decides. */
+    --_unfilled-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
     /* Nor is a line drawn on a plate: the hairline vanishes on a table's light
        plate, and its default, `.ruled`, and `.ruleless` forms would render as
        one. A table's frame and rules take the theme's ink at a fifth,
@@ -124,20 +131,41 @@
     --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 glass
+       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);
+  }
+
+  /* A region of another aesthetic nested in glass draws its own line. */
+  :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_unfilled-ink: initial;
   }
 
   /* Transparency is the whole aesthetic, so the honest degradation is an opaque
-     surface rather than a softer blur. */
-  @media (prefers-reduced-transparency: reduce) {
+     surface rather than a softer blur.
+
+     Forced colours take the same branch. They repaint a background in `Canvas`
+     but keep its alpha -- measured in Chromium -- so the translucent ground
+     stayed translucent over whatever was behind it, and a liquid card's text
+     sat at about 2.5:1 over a busy page. An opaque ground is `Canvas` whole. */
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
     .glass {
       --ui-backdrop: none;
       --ui-surface-ground: var(--color-background);
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+  /* More contrast also takes the ground whole, above, and then the white
+     hairline has nothing to be seen against: 1.03:1 on an opaque light page.
+     The line becomes the theme's control grey, above 4:1 on both grounds.
+     Only under this preference: reduced transparency asks for no stronger
+     line. See docs/accessibility.md. */
+  @media (prefers-contrast: more) {
     .glass {
-      --ui-active-transform: none;
+      --ui-ink: var(--color-control-border);
     }
   }
 
@@ -209,10 +237,9 @@
      same element, or on a surface inside a glass region.
 
      The backdrop is liquid's lighter blur, for whatever frosts under glass and
-     takes no layers below: a bare `<table>` under `/native`, a consumer's own
-     `@apply surface`. The layers' selector list cannot name those, and with
-     the backdrop cleared here they kept the clearer ground with nothing
-     blurred behind it. A surface that does take the layers clears its own. */
+     takes no layers below: a bare `<table>` under `/native`. With the backdrop
+     cleared here it kept the clearer ground with nothing blurred behind it. A
+     host of the layers clears its own. */
   .glass.glass-liquid:not(.glass-solo),
   .glass .glass-liquid:not(.glass-solo) {
     --ui-ink: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
@@ -221,7 +248,7 @@
     --ui-backdrop: var(--_glass-liquid-blur);
   }
 
-  @media (prefers-reduced-transparency: reduce) {
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
     .glass.glass-liquid:not(.glass-solo),
     .glass .glass-liquid:not(.glass-solo) {
       --ui-surface-ground: var(--color-background);
@@ -234,14 +261,27 @@
     }
   }
 
-  /* The layers: a treatment no token reaches, so a selector list glass owns and
-     the registry records. Two pseudo-elements behind the content, the blur
-     beneath and the lens with the rim and sheen above it. `isolation` keeps
-     them above the element's own plate, which they then blur with the page;
-     `position` anchors them, and a component that positions itself -- the
-     tooltip bubble -- keeps its own. A default or `.soft` table frosts under
-     glass, so it takes the layers too. Both slots are spent, so a host carries
-     no `::before` or `::after` of the consumer's; the fields cannot host one.
+  @media (prefers-contrast: more) {
+    .glass.glass-liquid:not(.glass-solo),
+    .glass .glass-liquid:not(.glass-solo) {
+      --ui-ink: var(--color-control-border);
+    }
+  }
+
+  /* The layers: a treatment no token reaches. Two pseudo-elements behind the
+     content, the blur beneath and the lens with the rim and sheen above it.
+     `isolation` keeps them above the element's own plate, which they then blur
+     with the page; `position` anchors them, and a component that positions
+     itself -- the tooltip bubble -- keeps its own. Both slots are spent, so a
+     host carries no `::before` or `::after` of the consumer's; the fields
+     cannot host one.
+
+     Surfaces draw them in `surface` itself, from the flag and the values
+     below, so every element that applies it takes them: the package's
+     surfaces and a consumer's `@apply surface` alike. A selector list here
+     reached only the classes it named. The list below is for the two hosts
+     that are not surfaces, and the registry records it: a default or `.soft`
+     table, which frosts under glass, and a liquid button.
 
      The blur is on the layer and not on the host: an element with a backdrop
      filter of its own is a backdrop root, and a layer inside one sees only that
@@ -249,8 +289,18 @@
 
      Surfaces take the layers from a liquid scope. A region of another
      aesthetic nested inside, or of plain glass, keeps its own material and
-     takes none; this list names the other aesthetics, and `registry.test.ts`
-     fails when one is missing.
+     takes none, and a liquid region nested again inside that takes them back:
+     the nearest region decides. A `:not(.glass-liquid :is(...) *)` exclusion
+     cannot tell those two apart, since the re-entered surface also sits below
+     the other aesthetic, so each region writes a private flag instead and
+     inheritance hands a surface the nearest one's -- the way neobrutalism
+     rests its alert. The flag is on only for a liquid region in a glass
+     scope, so it alone says whether a surface takes the layers. Off, it
+     withholds the layers, the anchor, and the isolation, and a table or a
+     button gets back the backdrop the nearest region set. The list below
+     names the other aesthetics, and `registry.test.ts` fails when one is
+     missing. A region's own element is not a host: it declares the flag's
+     backdrop from its own, which a host would then declare from the flag.
 
      A button takes them only when it carries `.glass-liquid` itself, in a
      glass scope. Controls stay solid under a liquid region, for the reason
@@ -261,24 +311,27 @@
      plate under the rim, and `.soft` and `.ghost` are the clear panes. A
      disabled one is dimmed by `opacity`, which makes it a backdrop root, so it
      keeps the ground and the rim and bends nothing. */
+  .glass-liquid:not(.glass-solo):is(.glass, .glass *) {
+    /* A space toggle: empty is on, and `initial` makes every declaration
+       reading it invalid at computed-value time, which is off. */
+    --_glass-liquid-on: ;
+    --_glass-liquid-backdrop: initial;
+  }
+
+  .glass:not(.glass-liquid),
+  :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) {
+    --_glass-liquid-on: initial;
+    --_glass-liquid-backdrop: var(--ui-backdrop);
+  }
+
   :is(.glass-liquid:not(.glass-solo), .glass-liquid:not(.glass-solo) *):is(.glass, .glass *):is(
-      .card,
-      .panel,
-      .alert,
-      .tooltip-bubble,
-      .surface,
       .data-table:not(.solid, .ghost)
-    ):not(
-      .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch),
-      .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) *,
-      .glass-liquid .glass:not(.glass-liquid),
-      .glass-liquid .glass:not(.glass-liquid) *
-    ),
+    ):not(.glass:not(.glass-liquid), :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch)),
   .btn.glass-liquid:is(.glass, .glass *) {
-    --ui-backdrop: none;
+    --ui-backdrop: var(--_glass-liquid-backdrop, none);
 
-    position: relative;
-    isolation: isolate;
+    position: var(--_glass-liquid-on) relative;
+    isolation: var(--_glass-liquid-on) isolate;
 
     &::before,
     &::after {
@@ -287,7 +340,7 @@
       z-index: -1;
       border-radius: inherit;
       corner-shape: inherit;
-      content: "";
+      content: var(--_glass-liquid-on) "";
       pointer-events: none;
     }
 
@@ -438,7 +491,8 @@
   color: var(--_solo-fg);
 }
 
-@media (prefers-reduced-transparency: reduce) {
+/* Forced colours with it, for the reason the aesthetic class gives. */
+@media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
   .glass-solo {
     --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
 
@@ -447,6 +501,13 @@
   }
 }
 
+/* The line on an opaque ground, as the aesthetic class draws it. */
+@media (prefers-contrast: more) {
+  .glass-solo {
+    --_solo-ink: var(--_solo-intent-border, var(--color-control-border, oklch(55.6% 0 0)));
+  }
+}
+
 /* With `.glass-liquid`, the liquid pane: its corner and ground, and the same two
    layers behind the element's content. The element's own blur goes, for the
    backdrop-root reason the modifier gives. Both pseudo-elements are spent, so a
@@ -498,8 +559,16 @@
   }
 }
 
-@media (prefers-reduced-transparency: reduce) {
+@media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
   .glass-solo.glass-liquid {
     --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
   }
 }
+
+/* After the liquid pane's own ink, which it would otherwise override by source
+   order at the same specificity. */
+@media (prefers-contrast: more) {
+  .glass-solo.glass-liquid {
+    --_solo-ink: var(--_solo-intent-border, var(--color-control-border, oklch(55.6% 0 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);
   }
 }
 
@@ -138,7 +144,9 @@
     --_neo-alert-elevation: initial;
   }
 
-  .neobrutalism .alert {
+  /* 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);
   }
 }
@@ -184,9 +192,6 @@
   box-shadow:
     var(--_solo-depth) var(--_solo-depth) 0 0 var(--_solo-ink),
     inset 0 0 0 100vmax var(--_solo-fill);
-  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));
 }
 
 /* An intent class on the element colours it, as on a component. Named rather
@@ -220,7 +225,33 @@
 
 /* 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],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  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;
+  }
+}
+
 .neobrutalism-solo:is(
     button,
     a[href],
@@ -233,19 +264,5 @@
   box-shadow:
     0 0 0 0 var(--_solo-ink),
     inset 0 0 0 100vmax var(--_solo-fill);
-  transform: translate(var(--_solo-depth), var(--_solo-depth));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .neobrutalism-solo:is(
-      button,
-      a[href],
-      [role="button"],
-      summary,
-      input[type="button"],
-      input[type="submit"],
-      input[type="reset"]
-    ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  translate: var(--_solo-depth) var(--_solo-depth);
 }