@codenhub/styles 0.5.0 → 0.7.0

package/dist/tw/aesthetics/cyber.css

@@ -5,7 +5,7 @@
    every outer shadow, so a clipped chamfer has nothing left to glow, and an
    inset ring cannot follow a diagonal cut the way `.pixel`'s follows its square
    one. `corner-shape` draws the corner itself, and the border, the glow, and the
-   focus outline all follow it. Load after the base stylesheet. */
+   focus outline all follow it. */
 
 /* 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
@@ -26,13 +26,11 @@
 
        The cut is the corner length at scale 1, and `box` multiplies it by the
        size step, so a `.p-xs` icon button takes half the cut and a `.lg` button
-       a quarter more -- always a true 45 degrees, because it stays a length. It
-       used to be capped at a quarter of the element's box, a percentage, which
-       ran shallower than 45 degrees on a small wide button; the step retired
-       the cap. A shape set through a knob is taken as written, unscaled: it is
-       read as `--ui-radius`, which `box` honours over the computed corner, and
-       left unset the reference makes the token guaranteed-invalid so the
-       computed corner draws. */
+       a quarter more -- always a true 45 degrees, because it stays a length. A
+       shape set through a knob is taken as written, unscaled: it is read as
+       `--ui-radius`, which `box` honours over the computed corner, and left
+       unset the reference makes the token guaranteed-invalid so the computed
+       corner draws. */
     --_cyber-cut: var(--cyber-cut, 0.625rem);
     --_cyber-glow: var(--cyber-glow, 8px);
 
@@ -69,10 +67,15 @@
     --ui-rule-style: initial;
 
     /* The glow is light, not depth, so it is the halo: the component's own intent
-       colour at 40%, blurred, with no offset. Elevation does not scale it, so
-       every component glows -- fields and chips included -- and `.flat` does
-       not put it out. There is no depth, and the transparent depth colour keeps
-       `.raised` and `.floating` from drawing any. */
+       colour at 60%, blurred, with no offset. The 1px spread and the 60% put
+       the brightest point on the outline: at 40% with no spread the halo
+       peaked at about a fifth of the ink just outside the box, brighter than a
+       soft or capped neutral fill, so an edgeless element read as something in
+       front of a light -- a shadow -- rather than the light. An edged element
+       has its line for a source and read as lit either way. Elevation does
+       not scale it, so every component glows -- fields and chips included --
+       and `.flat` does not put it out. There is no depth, and the transparent
+       depth colour keeps `.raised` and `.floating` from drawing any. */
     --elevation-color: transparent;
     --ui-shadow-ink: 0%;
     --ui-shadow-x: 0px;
@@ -80,8 +83,8 @@
     --ui-shadow-blur: 0px;
     --ui-shadow-spread: 0px;
     --ui-halo-blur: var(--_cyber-glow);
-    --ui-halo-spread: 0px;
-    --ui-halo-ink: 40%;
+    --ui-halo-spread: 1px;
+    --ui-halo-ink: 60%;
 
     /* The glow holds still under the pointer and under a press; the press is the
        base scale, restated because a region nested inside another aesthetic must
@@ -100,6 +103,9 @@
     --ui-clip-tight: none;
     --ui-shadow-inset: ;
     --ui-shadow-edge: initial;
+    /* The bevel is a corner shape, not a clip, so the global focus outline
+       follows it; pixel's inset focus layer is cleared rather than inherited. */
+    --ui-focus-inset: initial;
     --ui-backdrop: none;
     --ui-surface-ground: initial;
     --ui-surface-shadow: initial;
@@ -111,9 +117,13 @@
        platform already has. */
     font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 
-    /* The control ink glass and chunky tile name, cleared so a region nested
-       inside either draws its controls in this aesthetic's own ink. */
-    --ui-control-ink: initial;
+    /* 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. */
@@ -145,16 +155,37 @@
 
 /* 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. */
 .cyber-solo {
-  --_cyber-ink: var(
-    --cyber-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,
+    var(--cyber-ink, 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));
 
-  border: 1px solid var(--_cyber-ink);
+  border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */
   border-radius: var(
@@ -162,13 +193,44 @@
     0 min(var(--cyber-cut, 0.625rem), 25%) / 0 min(var(--cyber-cut, 0.625rem), 25%)
   );
   corner-shape: bevel;
-  /* Always lit: the elevation gate the aesthetic class answers to is `box`'s,
-     and a solo element is one the consumer chose to light up. */
-  box-shadow: 0 0 var(--cyber-glow, 8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);
+  /* Always lit, in the element's own colour: the glow is a halo and not depth,
+     so `.flat` leaves it on, as under the aesthetic class. */
+  box-shadow:
+    0 0 var(--cyber-glow, 8px) 1px color-mix(in oklab, var(--_solo-ink) 60%, transparent),
+    inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   transition: 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
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.cyber-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. */
+.cyber-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* An action takes the control shape, on the opposite diagonal to a pane's. */
 .cyber-solo:is(
   button,
@@ -201,19 +263,6 @@
    container stays put, the way only `.btn` and an opted-in card press under
    the aesthetic class. */
 .cyber-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-):active:not(:disabled, [aria-disabled="true"]) {
-  transform: scale(0.97);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cyber-solo:is(
     button,
     a[href],
     [role="button"],
@@ -222,6 +271,19 @@
     input[type="submit"],
     input[type="reset"]
   ):active:not(:disabled, [aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-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;
   }
 }