@codenhub/styles 0.5.0 → 0.7.0

package/dist/tw/aesthetics/glass.css

@@ -1,12 +1,11 @@
 /* Glass: translucent surfaces over a blurred backdrop with a hairline highlight
-   edge. It needs something behind it to blur -- on a flat page background it is a
-   translucent panel and nothing more.
+   edge. It needs something behind it to blur -- on a flat page background it is
+   a translucent panel and nothing more.
 
-   Tier 1 only. The scope that used to take a hand-written selector list is now a
-   token: only `surface` resolves `--ui-backdrop`, so blur reaches cards,
-   panels, alerts and tooltips while controls stay solid. An active blur costs a
-   compositing layer apiece, and one under every control of a dense cluster reads
-   as noise. */
+   Tier 1 only: the scope is a token. Only `surface` resolves `--ui-backdrop`,
+   so blur reaches cards, panels, alerts and tooltips while controls stay solid.
+   An active blur costs a compositing layer apiece, and one under every control
+   of a dense cluster reads as noise. */
 
 /* 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
@@ -40,8 +39,19 @@
        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));
+    /* 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,
+       translucent for the same reason the control line is. */
+    --ui-rule-ink: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.2));
 
-    --ui-bg-alpha: 0.8;
+    /* The glass is the ground, not the fill. Thinning fills with
+       `--ui-bg-alpha` would make how much colour a presentation asked for
+       depend on the aesthetic, which is presentation's question (R1): a
+       `.solid` button, a checked toggle, and a `.solid` card stay opaque.
+       Translucency lives in `--ui-surface-ground` below, the plate a partial
+       fill is painted over. */
+    --ui-bg-alpha: 1;
     --ui-backdrop: blur(14px) saturate(1.6);
     --ui-surface-image: initial;
 
@@ -54,6 +64,15 @@
     --ui-shadow-y: 0px;
     --ui-shadow-blur: 0px;
     --ui-shadow-spread: 0px;
+    --ui-shadow-inset: initial;
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    /* The theme's depth colour, restated: the surface shadow below resolves it
+       here, on the region, so inside chunky tile it inherited opaque black and
+       cast a black slab under every card, and inside cyber it inherited
+       transparent and cast none. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     /* No halo, cleared so a region nested inside another
        aesthetic does not inherit one. */
     --ui-halo-blur: initial;
@@ -88,8 +107,14 @@
     /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
        has to say so rather than inherit it. */
     --ui-shadow-edge: initial;
+    /* Nothing clips, so the global focus outline shows; pixel's inset focus
+       layer is cleared rather than inherited. */
+    --ui-focus-inset: initial;
     --ui-hover-transform: none;
-    --ui-active-transform: none;
+    /* The base press, stated because every token here is: the depth in this
+       aesthetic is the blur, so a control has no slab to press into, and a pane
+       that gives slightly under the pointer is the one answer a press gets. */
+    --ui-active-transform: scale(0.97);
     --ui-active-translate-x: initial;
     --ui-active-translate-y: initial;
 
@@ -105,11 +130,212 @@
      surface rather than a softer blur. */
   @media (prefers-reduced-transparency: reduce) {
     .glass {
-      --ui-bg-alpha: 1;
       --ui-backdrop: none;
       --ui-surface-ground: var(--color-background);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .glass {
+      --ui-active-transform: none;
+    }
+  }
+
+  /* Liquid glass: a modifier of glass, the way `.sketch-rounded` is of sketch.
+     Continuous corners, a bright rim where light catches the pane, a lighter
+     blur, and -- in engines that render an SVG filter in `backdrop-filter`,
+     Chromium today -- a lens that bends the backdrop at the edges. On the region
+     beside `.glass`, or on one surface inside a glass region.
+
+     Only the corners apply on their own. The ink, ground, and blur are glass
+     material, so they are set below only where `.glass` is in scope: a lone
+     `.glass-liquid` would otherwise make every surface translucent with nothing
+     to blur and every field's line a near-invisible hairline.
+
+     The corner knobs are glass's own, with larger defaults: a continuous corner
+     reads smaller than a round one of the same radius. Where `corner-shape` is
+     not drawn the corners stay round.
+
+     Not on a solo element: `.glass-solo.glass-liquid` paints its own corner
+     below, and a token declared on it would inherit into whatever it holds --
+     a `.btn` inside a solo toast took liquid's corners on a page with no glass
+     in scope. Every scope below skips a solo element for the same reason. */
+  .glass-liquid:not(.glass-solo) {
+    --ui-corner: var(--glass-radius, 1rem);
+    --ui-corner-surface: var(--glass-radius-surface, 1.5rem);
+    --ui-corner-shape: squircle;
+  }
+
+  /* The layers' values, on a solo element too: it draws the same two. */
+  .glass-liquid {
+    --_glass-liquid-blur: blur(2px) saturate(1.8);
+
+    /* The lens is its own layer rather than a second function in the blur's
+       list: Firefox and WebKit accept `url()` there and draw nothing for it, and
+       a filter list with an unusable reference is dropped whole -- the blur with
+       it. Kept apart, an engine that ignores the lens still blurs.
+
+       The displacement map is built inside the filter from the box itself:
+       erode a flood of the filter region by 8px, blur it into a ramp, and take
+       the ramp's slope across x and y as the two displacement channels. Every
+       length is absolute, so the band is the same width on a tooltip and on a
+       page-wide card; no length is a percentage of the box. The blur is wider
+       than the erosion so the ramp's corners round off -- otherwise the square
+       core shows through as loops at every corner. A filter cannot read a custom
+       property, so the band and the strength are fixed, not knobs. */
+    --_glass-liquid-lens: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
+
+    /* The same lens at a control's size. The pane's band is 8px of erosion
+       under a 10px blur, which is most of a 40px button's height: the two
+       sides' ramps meet in the middle and the label sits in a loop. A third of
+       each length keeps a clear centre for the label. */
+    --_glass-liquid-lens-control: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='3'/><feGaussianBlur stdDeviation='3.5' result='ramp'/><feOffset in='ramp' dx='-1' result='l'/><feOffset in='ramp' dx='1' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-1' result='u'/><feOffset in='ramp' dy='1' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
+
+    /* The rim: light caught on the top-left edge and, fainter, the bottom-right,
+       over a soft inner glow. Drawn on the lens layer, the topmost, because a
+       rim drawn on the surface itself would sit under the layers and blur. */
+    --_glass-liquid-rim:
+      inset 1px 1px 0 light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.35)),
+      inset -1px -1px 0 light-dark(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.12)),
+      inset 0 0 18px light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05));
+    --_glass-liquid-sheen: linear-gradient(
+      160deg,
+      light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06)),
+      transparent 45%
+    );
+  }
+
+  /* The glass material the modifier changes, where glass is in scope: on the
+     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. */
+  .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));
+    --ui-surface-ground: color-mix(in srgb, var(--color-background) 30%, transparent);
+    --ui-surface-image: initial;
+    --ui-backdrop: var(--_glass-liquid-blur);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .glass.glass-liquid:not(.glass-solo),
+    .glass .glass-liquid:not(.glass-solo) {
+      --ui-surface-ground: var(--color-background);
+    }
+
+    .glass-liquid {
+      --_glass-liquid-blur: none;
+      --_glass-liquid-lens: none;
+      --_glass-liquid-lens-control: none;
+    }
+  }
+
+  /* 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.
+
+     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
+     element, never the page behind it. So a host clears the region's backdrop.
+
+     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.
+
+     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
+     glass gives -- two composited layers and a filter under every control of a
+     dense cluster -- and a class on the one button that is meant to be a pane
+     is a request rather than a cascade, the idiom `text-control` uses for
+     `.edgeless`. Its fill is still presentation's: `.solid` stays an opaque
+     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. */
+  :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) *
+    ),
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --ui-backdrop: none;
+
+    position: relative;
+    isolation: isolate;
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      corner-shape: inherit;
+      content: "";
+      pointer-events: none;
+    }
+
+    /* Prefixed first, for the reason `surface` gives. */
+    &::before {
+      -webkit-backdrop-filter: var(--_glass-liquid-blur);
+      backdrop-filter: var(--_glass-liquid-blur);
+    }
+
+    &::after {
+      backdrop-filter: var(--_glass-liquid-lens);
+      background-image: var(--_glass-liquid-sheen);
+      box-shadow: var(--_glass-liquid-rim);
+    }
+  }
+
+  /* A button's lens is the control one. Swapped as the value the layer reads
+     rather than on the layer: the list above outranks any selector that names
+     the button's `::after` alone. */
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --_glass-liquid-lens: var(--_glass-liquid-lens-control);
+  }
+}
+
+/* A liquid button rests on liquid's ground rather than on nothing, so a
+   `.ghost` or `.soft` one is a pane and not a hole in the page. It reads the
+   surface ground the modifier set on it, so reduced transparency and a
+   consumer's own `--ui-surface-ground` reach it as they reach a card.
+
+   In `utilities`, not with the layers: it has to beat `box`'s own
+   `--_d-ground: transparent`, which it does there on specificity, and it
+   writes only a private nothing a consumer sets. See
+   docs/internal/model.md#cascade-layers. */
+@layer utilities {
+  .btn.glass-liquid:is(.glass, .glass *) {
+    --_d-ground: var(--ui-surface-ground, transparent);
+  }
+}
+
+/* Forced colours paint the plain surface: no layer blurs, bends, or lights it. */
+@media (forced-colors: active) {
+  .glass-liquid {
+    --_glass-liquid-blur: none;
+    --_glass-liquid-lens: none;
+    --_glass-liquid-lens-control: none;
+    --_glass-liquid-rim: none;
+    --_glass-liquid-sheen: none;
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
@@ -117,24 +343,63 @@
    `<div>` on a page that never loaded the base stylesheet. See
    docs/internal/model.md#solo-classes.
 
-   It reads the aesthetic's own knobs and the theme's foundation tokens, each
-   with its shipped literal as the fallback, and never a `--ui-*`, `--intent-*`,
-   or `--elevation-color` token: those belong to whichever aesthetic an ancestor
-   carries, and a solo element has to look the same inside any of them.
+   It composes with what the element is asked to be, the way a component does:
+   the fill and edge a presentation class asks for, on the element or cascaded
+   from a container; the intent class on the element; the element's own
+   elevation class. Each is read with the unclassed look as its fallback, so
+   with none of them, or with no theme loaded, it paints what it always did.
+
+   Material is the exception. It reads the aesthetic's own knobs and the
+   theme's foundation tokens, each with its shipped literal as the fallback,
+   and never a material `--ui-*` or `--elevation-color` token: those belong to
+   whichever aesthetic an ancestor carries, and a solo element has to be this
+   aesthetic inside any of them.
+
    Unlayered and one class deep, so it beats a foreign component's
    zero-specificity rules wherever they load. Not for this package's own
-   components, which take the aesthetic class instead. */
+   components, which take the aesthetic class instead.
+
+   The other five paint the fill as an inset layer over whatever the element
+   already is, and write no background, so an unclassed solo element keeps its
+   own. Glass's translucent ground is its material, so it owns the background
+   and mixes the fill over that ground. */
 .glass-solo {
-  background-color: color-mix(
+  /* 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(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22)));
+  --_solo-ground: color-mix(
     in srgb,
     var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 45%,
     transparent
   );
-  border: 1px solid light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+  /* The plate runs under the border, so the line fades to nothing, as `box`'s
+     does, rather than to the fill. */
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), transparent);
+
+  background-color: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), var(--_solo-ground));
+  border: 1px solid var(--_solo-edge);
   /* The surface corner: the element this exists for is a pane. */
   border-radius: var(--glass-radius-surface, 1rem);
   /* The theme's depth colour as a literal, for the reason above: inside a
-     `.chunky-tile` region the token is black. */
+     `.chunky-tile` region the token is black. A complete shadow, so the
+     elevation classes do not reach it, as they do not under the aesthetic
+     class. */
   box-shadow:
     0 1px 2px -1px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
     0 18px 40px -16px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
@@ -144,10 +409,97 @@
   backdrop-filter: blur(14px) saturate(1.6);
 }
 
+/* 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. */
+.glass-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. */
+.glass-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .glass-solo {
-    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 }
+
+/* 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
+   foreign element that draws its own `::before` or `::after` loses them.
+
+   The layers need a positioned element to anchor to. That one declaration is
+   layered, where the element's own `fixed` or `absolute` beats it -- a toast
+   keeps its placement, and an unpositioned element is anchored. */
+@layer components {
+  .glass-solo.glass-liquid {
+    position: relative;
+  }
+}
+
+.glass-solo.glass-liquid {
+  --_solo-ground: color-mix(
+    in srgb,
+    var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 30%,
+    transparent
+  );
+  --_solo-ink: var(--_solo-intent-border, light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16)));
+
+  isolation: isolate;
+  border-radius: var(--glass-radius-surface, 1.5rem);
+  corner-shape: squircle;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    corner-shape: inherit;
+    content: "";
+    pointer-events: none;
+  }
+
+  &::before {
+    -webkit-backdrop-filter: var(--_glass-liquid-blur);
+    backdrop-filter: var(--_glass-liquid-blur);
+  }
+
+  &::after {
+    backdrop-filter: var(--_glass-liquid-lens);
+    background-image: var(--_glass-liquid-sheen);
+    box-shadow: var(--_glass-liquid-rim);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass-solo.glass-liquid {
+    --_solo-ground: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+  }
+}

package/dist/tw/aesthetics/index.css

@@ -2,7 +2,8 @@
    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";