@codenhub/styles 0.7.0 → 0.9.0

package/tw/utilities/layout.css

@@ -0,0 +1,210 @@
+/* The gap is a private each layout declares from `--layout-gap`, and the
+   density modifiers step it: `tight` and `loose` raise a flag
+   (`modifiers.css`) and the layout reads it, so `@apply stack tight` carries
+   the step. A container's `--layout-gap` still reaches every layout inside
+   it, because each one reads the token afresh; a `.tight` or `.loose` stays
+   on its own element, the way `.p-xs` stays on a card, because the layout
+   inside restates the flags at zero specificity in `families`, where one on
+   the element itself still wins. */
+@utility view {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+
+    :where(&:not(.vertical)) {
+      --_m-vertical: initial;
+    }
+
+    :where(&:not(.horizontal)) {
+      --_m-horizontal: initial;
+    }
+  }
+
+  @apply flex gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  /* A row unless asked: `vertical` stacks, and `horizontal` is a row that
+     wraps and centres its items. */
+  --_vertical-direction: var(--_m-vertical) column;
+  --_horizontal-direction: var(--_m-horizontal) row;
+  --_horizontal-wrap: var(--_m-horizontal) wrap;
+  --_horizontal-align: var(--_m-horizontal) center;
+
+  flex-direction: var(--_horizontal-direction, var(--_vertical-direction, row));
+  flex-wrap: var(--_horizontal-wrap, nowrap);
+  align-items: var(--_horizontal-align, normal);
+}
+
+@utility stack {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+  }
+
+  @apply flex flex-col gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+}
+
+@utility cluster {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+
+    :where(&:not(.between)) {
+      --_m-between: initial;
+    }
+  }
+
+  @apply flex flex-wrap items-center gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  --_between-justify: var(--_m-between) space-between;
+
+  justify-content: var(--_between-justify, normal);
+}
+
+@utility auto-grid {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+  }
+
+  @apply grid gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
+}
+
+@utility section {
+  @apply px-(--layout-gutter) py-(--layout-section-block);
+}
+
+@utility section-content {
+  @layer families {
+    :where(&:not(.narrow)) {
+      --_m-narrow: initial;
+    }
+
+    :where(&:not(.wide)) {
+      --_m-wide: initial;
+    }
+  }
+
+  @apply mx-auto w-full;
+
+  --_narrow-max: var(--_m-narrow) var(--container-narrow);
+  --_wide-max: var(--_m-wide) var(--container-wide);
+
+  max-width: var(--_wide-max, var(--_narrow-max, var(--container-max)));
+}
+
+/* An indicator: intent only, and no presentation token at all. A rule is a
+   line, and neither a fill class nor an edge class has anything to say about
+   one -- a container's `.ghost.edgeless` must not make every `<hr>` inside it
+   invisible. The width is the aesthetic's line width, unscaled. */
+@utility divider {
+  /* The indicator reset, carried so `@apply divider` gets it, as `btn` carries
+     its own: the neutral slots, with the two an indicator takes from the
+     colour it sits in. Without it an applied one read an undefined
+     `--intent-border`. */
+  @layer families {
+    :where(&:not(.divider, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: currentColor;
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: currentColor;
+      --intent-fill-max: 20%;
+    }
+  }
+
+  @layer families {
+    :where(&:not(.vertical)) {
+      --_m-vertical: initial;
+    }
+  }
+
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the line. The colour stands in front of the intent. */
+  --_divider-color: var(--divider-color, var(--intent-color));
+  --_divider-width: var(--divider-width, var(--ui-border-width, var(--border-width)));
+
+  @apply m-0 border-0;
+
+  /* Across unless `vertical`, which turns the line to the inline-start edge
+     and stretches it down its row. */
+  --_vertical-width: var(--_m-vertical) 0px;
+  --_vertical-self: var(--_m-vertical) stretch;
+  --_vertical-line: var(--_m-vertical) var(--_divider-width);
+
+  width: var(--_vertical-width, 100%);
+  align-self: var(--_vertical-self, auto);
+  border-color: var(--_divider-color);
+  border-style: var(--ui-rule-style, var(--ui-line-style, solid));
+  border-top-width: var(--_vertical-width, var(--_divider-width));
+  border-inline-start-width: var(--_vertical-line, 0px);
+}
+
+@utility selection-contrast {
+  &::selection,
+  & *::selection {
+    background: var(--color-primary-contrast);
+    color: var(--color-primary);
+  }
+}
+
+/* `.visually-hidden`, the standard clip-based recipe. Tailwind's `sr-only` does
+   nothing on the vanilla entries (`.`, `/native`), which compile real CSS from
+   a scan of `src/` alone with no Tailwind utility layer to reach, so the
+   package publishes its own.
+
+   It is not named `.sr-only`: on a `/tw` entry the consumer's own Tailwind
+   build supplies that utility, and two same-named utilities in one cascade
+   collide silently -- the collision `registry.test.ts` polices (see
+   `data-table`'s `renamedFrom` in `registry.json`). `@source
+   inline("visually-hidden")` in `utilities/index.css` force-emits it on the
+   entries with no scannable markup of their own. */
+@utility visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/tw/utilities/rules.css

@@ -0,0 +1,8 @@
+/* Every utility, with nothing they need: `content.css` applies `box`, which
+   the importing entry supplies once. See `index.css` beside this file. */
+@import "./layout.css";
+@import "./content.css";
+
+/* Safelists the utilities for the compiled build, which has no markup to scan.
+   `scripts/build-tw.mjs` strips it from the `tw/` copy -- see the note in
+   `components/index.css`. */

package/dist/tw/aesthetics/sketch.css

@@ -1,398 +0,0 @@
-/* Sketch: uneven elliptical corners, a solid ink edge, and a small hard shadow.
-   The handwriting face is consumer-supplied, so this file has no font asset or
-   network side effect. */
-
-/* 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 {
-  .sketch {
-    /* Complete radii are taken as written, without the size step or corner
-       pattern. Chips use a smaller version of the same irregular outline.
-       Surfaces use sharp, hand-drawn square contours tailored for container
-       dimensions to avoid interior padding encroachment. Knobs follow R8. */
-    --ui-corner: initial;
-    --ui-corner-surface: initial;
-    --ui-corner-tl: initial;
-    --ui-corner-tr: initial;
-    --ui-corner-br: initial;
-    --ui-corner-bl: initial;
-    --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-    --ui-radius-surface: var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
-    --ui-radius-pill: var(--sketch-radius-pill, 20px 22px 21px 19px / 20px 22px 21px 19px);
-    --ui-radius-tight: 11px 1px 7px 2px / 2px 7px 1px 11px;
-    --ui-corner-shape: round;
-
-    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-    /* Controls take the theme's control border rather than the ink, which is the
-       primary colour in both themes; see `neobrutalism.css`. */
-    --ui-control-ink: var(--color-control-border);
-    --ui-rule-ink: initial;
-    --ui-border-width: 1px;
-    --ui-border-max: 100px;
-    --ui-line-style: solid;
-    --ui-rule-style: initial;
-
-    --ui-shadow-ink: 0%;
-    /* The foundation depth colour is restated so a sketch region nested inside
-       cyber does not inherit cyber's transparent depth. */
-    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
-    --ui-shadow-x: 2px;
-    --ui-shadow-y: 2px;
-    --ui-shadow-blur: 0px;
-    --ui-shadow-spread: 0px;
-    --ui-shadow-inset: ;
-    --ui-shadow-edge: initial;
-    --ui-halo-blur: initial;
-    --ui-halo-spread: initial;
-    --ui-halo-ink: initial;
-    --ui-focus-inset: initial;
-
-    --ui-active-shadow-x: initial;
-    --ui-active-shadow-y: initial;
-    --ui-active-transform: scale(0.97);
-    --ui-active-translate-x: initial;
-    --ui-active-translate-y: initial;
-    --ui-hover-transform: none;
-    --ui-clip: none;
-    --ui-clip-tight: none;
-    --ui-backdrop: none;
-    --ui-surface-image: initial;
-    --ui-surface-ground: initial;
-    --ui-surface-shadow: initial;
-    --ui-bg-alpha: 1;
-    --ui-label-weight: initial;
-    --ui-label-tracking: initial;
-    --ui-label-case: initial;
-    --ui-label-shadow: initial;
-
-    font-family: var(--font-sketch, cursive);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .sketch {
-      --ui-active-transform: none;
-    }
-  }
-
-  /* Rounded variant: bounded elliptical corners, so the top and bottom edges of
-     a wide element stay straight instead of bulging into an egg. On the region
-     with `.sketch`, or on one component inside it. Knobs follow R8.
-
-     Never on a solo element, here or in the rotation below:
-     `.sketch-solo.sketch-rounded` paints its own outline, and a complete
-     radius declared on it would inherit into whatever it holds -- a `.btn`
-     inside a solo toast took a sketch outline on a page with no sketch in
-     scope. */
-  .sketch-rounded:not(.sketch-solo) {
-    --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-    --ui-radius-surface: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
-    --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
-    --ui-radius-tight: 9px 3px 8px 4px / 4px 8px 3px 7px;
-  }
-
-  /* One region token gives every element the same outline, so the rotation and
-     the dashed accents are written on components, which the registry records.
-     The root is a component carrying either class, or one inside either region
-     and not inside another aesthetic nested there, which keeps its own
-     material. The list below is the one place other aesthetics are named, and
-     `registry.test.ts` fails when one is missing from it.
-
-     Rotation is by sibling position, and a field's control takes its field's
-     position instead of its own, so stacked rows alternate. It is stable for a
-     given DOM order. A knob, when set, is one outline for every position. */
-  :is(
-    .sketch,
-    .sketch-rounded:not(.sketch-solo),
-    :is(.sketch, .sketch-rounded:not(.sketch-solo))
-      :not(
-        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
-        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
-      )
-  ) {
-    /* The pointed outlines: controls, fields, surfaces, and chips. */
-    &:is(.sketch, .sketch *):not(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
-        &:nth-child(4n + 2) {
-          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
-      }
-
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-        }
-
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
-        }
-
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
-
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
-      }
-
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
-        }
-      }
-
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 2px 8px 1px 10px / 8px 2px 10px 1px;
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 2px 10px 1px / 1px 9px 2px 8px;
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-tight: 1px 10px 2px 7px / 9px 1px 8px 2px;
-        }
-      }
-    }
-
-    /* The rounded outlines, in the same four places. */
-    &:is(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
-        &:nth-child(4n + 2) {
-          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
-      }
-
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-        }
-
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
-        }
-
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
-
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
-      }
-
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
-        }
-      }
-
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 4px 8px 3px 9px / 8px 3px 8px 4px;
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 4px 9px 3px / 3px 9px 4px 8px;
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-tight: 3px 9px 4px 8px / 9px 4px 8px 3px;
-        }
-      }
-    }
-
-    /* A pill button keeps a rounded pill in either variant, bounded to the
-       button's half-height so a wide one keeps flat top and bottom edges. */
-    &.btn.pill {
-      --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
-
-      &:nth-child(4n + 2) {
-        --ui-radius-pill: var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px);
-      }
-
-      &:nth-child(4n + 3) {
-        --ui-radius-pill: var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px);
-      }
-
-      &:nth-child(4n) {
-        --ui-radius-pill: var(--sketch-radius-pill, 16px 24px 17px 23px / 20px 17px 21px 16px);
-      }
-    }
-
-    /* Badges, progress bars, and switches take their chip outline where they
-       would be fully round. */
-    &:is(.badge, .progress, .switch) {
-      --ui-radius-pill: var(--ui-radius-tight);
-    }
-
-    /* Radios and the tooltip trigger stay circles, slightly uneven, so a radio
-       is never mistaken for a checkbox. */
-    &:is(.radio, .tooltip-icon) {
-      --ui-radius-pill: 48% 52% 46% 54% / 53% 46% 54% 47%;
-    }
-
-    /* The dashed accents; every other line stays solid. */
-    &:is(.sketch, .sketch *) {
-      &.checkbox {
-        --ui-line-style: dashed;
-      }
-
-      &:is(.divider, .data-table) {
-        --ui-rule-style: dashed;
-      }
-    }
-  }
-}
-
-/* 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`: 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. */
-.sketch-solo {
-  /* 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));
-  --_solo-depth: calc(2px * var(--ui-elevation, 1));
-
-  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(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
-  /* The aesthetic's neutral depth cue, not the ink: the class casts its 2px
-     offset in the depth colour, and casting a solo pane in full ink would read
-     as a heavier, neobrutalist slab. The depth colour is a literal, for the reason
-     `.glass-solo` gives. */
-  box-shadow:
-    var(--_solo-depth) var(--_solo-depth) 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
-    inset 0 0 0 100vmax var(--_solo-fill);
-  font-family: var(--font-sketch, cursive);
-}
-
-/* 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. */
-.sketch-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. */
-.sketch-solo:is(
-  .solid,
-  .soft,
-  .ghost,
-  .primary,
-  .secondary,
-  .success,
-  .warning,
-  .destructive,
-  .info,
-  :is(.solid, .soft, .ghost) *
-) {
-  color: var(--_solo-fg);
-}
-
-/* An action takes the expressive control shape. */
-.sketch-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
-  border-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-}
-
-/* With `.sketch-rounded`, the rounded outlines, through their own knobs. */
-.sketch-solo.sketch-rounded {
-  border-radius: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
-}
-
-.sketch-solo.sketch-rounded:is(
-    button,
-    a[href],
-    [role="button"],
-    summary,
-    input[type="button"],
-    input[type="submit"],
-    input[type="reset"]
-  ) {
-  border-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-}
-
-/* This entrypoint may be the only package stylesheet loaded, so it cannot rely
-   on theme.css's forced-colors material reset. */
-@media (forced-colors: active) {
-  .sketch-solo {
-    border-style: solid;
-  }
-}