@codenhub/styles 0.7.0 → 0.8.0

package/dist/tw/components/button.css

@@ -1,139 +0,0 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@reference "../box.css";
-
-/* A filled, edgeless, raised box you can press. `box` paints it; everything
-   here is what makes it a button rather than some other box.
-
-   The resting values are the published default: a button with no presentation
-   class is solid and edgeless, and that is a decision written on three lines
-   rather than a `var()` fallback buried in an expression. */
-@utility btn {
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_d-border: 0%;
-  --_d-elevation: 1;
-
-  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 whitespace-nowrap no-underline select-none;
-
-  min-height: var(--control-height);
-  /* The vertical padding gives back the line `box` draws, so a default button
-     is exactly `--control-height` tall like `.ipt` beside it, under any
-     aesthetic's line width. At the default 16px/1.5 text the label and the
-     padding fill it; the size and padding modifiers set their own. */
-  padding-block: calc(0.5rem - var(--_width));
-  /* The surrounding font, not the user agent's smaller button one, on every
-     entry: `/components` carries no reset to say so, and a `.btn` link and a
-     `.btn` button have to print the same label. `.sm` and `.lg` set their own
-     size over this. */
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  /* The label is material, shared with `.badge`: weight, tracking, case, and a
-     text shadow, set by an aesthetic as tokens (`.chunky-tile`'s heavier,
-     tracked label), and a consumer's own `font-*`, `tracking-*`, `uppercase`, or
-     text-shadow utility still beats the aesthetic. Tracking has no fallback on
-     purpose: undefined, the declaration is invalid at computed-value time and
-     `letter-spacing` inherits, which is what it did before the slot existed.
-     Case and shadow fall back to `none`, which is what a button already does:
-     the user agent stops both inheriting into one. The shadow is written
-     without a colour, so it takes the label's own and cannot lower its
-     contrast. See docs/internal/model.md#cascade-layers. */
-  font-weight: var(--ui-label-weight, var(--font-weight-semibold));
-  letter-spacing: var(--ui-label-tracking);
-  text-transform: var(--ui-label-case, none);
-  text-shadow: var(--ui-label-shadow, none);
-
-  &.sm {
-    @apply min-h-8 px-3 py-1 text-sm;
-
-    --_scale-size: 0.75;
-  }
-
-  &.lg {
-    @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
-
-    --_scale-size: 1.25;
-  }
-
-  &.icon {
-    @apply aspect-square p-2;
-
-    min-width: var(--control-height);
-  }
-
-  /* The size steps for an icon button, square at each: `.sm`'s 2rem, with the
-     padding giving back the line width the way the default button's does, and
-     `.lg`'s 3rem. Each names its width as well as its height, because WebKit
-     does not let `aspect-ratio` widen a box past its `min-width`. */
-  &.icon.sm {
-    min-width: 2rem;
-    padding: calc(0.375rem - var(--_width));
-  }
-
-  &.icon.lg {
-    min-width: 3rem;
-  }
-
-  /* Bare `sm`/`lg` are the size modifier's class names, so `p-` prefixes here.
-     `.p-xs` is the tightest step, below `.p-sm`: a chip-sized button in a
-     toolbar or a table cell.
-
-     `.icon` drops both floors -- `min-width` from its own base rule above and
-     `min-height` from `--control-height` -- at every padding tier; labeled
-     buttons keep the height floor everywhere but `.p-xs`. `.icon` is already
-     square: `aspect-square` ties its width to whatever height it lands on, so a
-     surviving height floor would keep the button bigger than its own glyph
-     however tight the padding asked to be. */
-  &.p-xs {
-    @apply px-2 py-0.5;
-
-    --_scale-pad: 0.5;
-
-    /* The one padding step that also drops the size floor for a labeled
-       button. At this tier the button is a chip in a toolbar or a table
-       cell, where `--control-height` is taller than the row it sits in;
-       every other size and padding class keeps the floor, so a plain button
-       stays a comfortable target. */
-    min-height: 0;
-
-    &.icon {
-      @apply p-0.5;
-
-      min-width: 0;
-    }
-  }
-
-  &.p-sm {
-    @apply px-2.5 py-1;
-
-    --_scale-pad: 0.75;
-
-    &.icon {
-      @apply p-1;
-
-      min-width: 0;
-      min-height: 0;
-    }
-  }
-
-  &.p-lg {
-    @apply px-6 py-3;
-
-    --_scale-pad: 1.25;
-
-    &.icon {
-      @apply p-3;
-
-      min-width: 0;
-      min-height: 0;
-    }
-  }
-
-  /* A pill normally takes the round material ahead of the box radius. Sketch
-     gives this token the button's own box outline; a bevel still cuts the full
-     radius to points under cyber. */
-  &.pill {
-    border-radius: var(--ui-radius-pill, calc(infinity * 1px));
-  }
-}

package/dist/tw/components/index.css

@@ -1,35 +0,0 @@
-/* The layer map, stated before any import uses a layer -- see `theme.css`.
-   Tailwind's utilities are imported into `utilities` the way
-   `tailwindcss/index.css` does it, so every component lands there on this
-   entrypoint and on `/native` too, exactly where `.` already puts them. Without
-   `layer(utilities)` the CLI emitted them unlayered here, and they beat every
-   consumer rule on these two entries alone. */
-@layer theme, base, components, utilities;
-
-/* The theme before `@reference "tailwindcss"`, as `native.css` has it:
-   Tailwind writes the theme's variables at the first `@theme` it meets, and
-   after the reference that is Tailwind's own reference-only one. See
-   docs/internal/model.md (Which files import the theme). */
-@import "../theme.css";
-@reference "tailwindcss";
-@import "tailwindcss/utilities.css" layer(utilities);
-/* Everything that is not `src/` -- see the note in `index.css`. Keeps a class
-   name in a docs code fence from shipping as a real rule in `dist/components.css`. */
-@import "../typography.css";
-@import "../box.css";
-@import "./button.css";
-@import "./feedback.css";
-@import "./form.css";
-@import "./surface.css";
-@import "./tooltip.css";
-
-/* The composition utilities -- `box`, `box-hover`, `box-active`,
-   `text-control`, `surface`, `input-group` -- are `@utility` rules whose bodies
-   the content scan will not emit on its own. `box` and friends appear only as
-   `@utility` blocks and `@apply` targets; `text-control`, `surface` and
-   `input-group` appear only inside `:is()`/`:where()` argument lists in
-   `intent.css` and `form.css`, never as a selector of their own. Safelisting
-   all six makes the emission deliberate; the composition-body check in
-   `exports.test.ts` fails the build if one is dropped. `text-control` and
-   `surface` are also documented as consumer-usable on their own. */
-@source inline("box box-hover box-active text-control surface input-group unadorned text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt icon textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush neutral solid soft ghost edged edgeless flat raised floating");

package/dist/tw/components/surface.css

@@ -1,184 +0,0 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@import "../surface.css";
-@reference "../box.css";
-
-/* A ghost, edged container that takes one unit when depth is supplied. */
-@utility card {
-  @apply surface p-(--surface-padding,1.25rem);
-
-  /* After the `@apply`, not before: `surface` inlines its own resting geometry
-     at that point, so defaults written above it would be overridden by the very
-     utility they are meant to specialise. */
-  --_d-fill: 0%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 100%;
-  --_d-elevation: 1;
-
-  &.p-xs {
-    --surface-padding: 0.5rem;
-    --_scale-pad: 0.5;
-  }
-
-  &.p-sm {
-    --surface-padding: 0.75rem;
-    --_scale-pad: 0.75;
-  }
-
-  &.p-lg {
-    --surface-padding: 2rem;
-    --_scale-pad: 1.25;
-  }
-
-  &.flush {
-    --surface-padding: 0;
-  }
-
-  /* `.soft` rests untinted for no named intent instead of mixing its 12%: 12%
-     of `--color-text` onto any of `--color-background`, `--color-foreground`,
-     or `--color-surface` lands within a few units of the others (a near-black
-     ink dominates the result), so swapping the ground token alone does not read
-     as quieter. A resting no-intent `.card.soft` is `--color-foreground` with
-     no ink mixed in -- a plain step up from the page that marks a different
-     container without drawing attention to it.
-
-     A named intent keeps its ordinary 12% wash: 12% of an actual hue does not
-     read as a slab the way 12% of near-black ink does (`.card.soft.destructive`
-     is a gentle `249, 225, 225`), and untinting it would silence it rather than
-     quiet it. `:not(...)` names every intent class for that reason; `.panel`'s
-     carve-out below is scoped the same way.
-
-     `--_fill-cap: 0%` (box.css's override slot, not `--ui-fill` directly -- see
-     the comment there) composed with `box-hover`'s formula (`min(100%, resting
-     + 14%)`) reveals the intent on hover with no second fill declaration for
-     the no-intent case: resting at 0% means hover lands at exactly the hover
-     step, 14%, in `--intent-hover`. The ground steps to `--color-surface` at
-     the same moment, through `--_d-surface-ground`, the default `surface` reads
-     beneath the public `--ui-surface-ground`, so a consumer's override, or
-     glass's ground, wins over both states. Scoped to `.interactive` and
-     `.hoverable`, the two classes that opt a card into `box-hover`: a plain
-     `.card.soft` has no hover state to reveal into and stays at the quiet rest.
-     A named intent needs neither special case: it rests tinted, so the generic
-     `box-hover` formula deepens it on hover (12% to 26%). */
-  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .info) {
-    --_fill-cap: 0%;
-    --_d-surface-ground: var(--color-foreground);
-
-    &.interactive:hover,
-    &.hoverable:hover {
-      --_d-surface-ground: var(--color-surface);
-    }
-  }
-
-  /* Opt-in, because a card is only sometimes a control. Applications still owe
-     it a real interactive element and an accessible name. Hover and press are
-     the derived ones every other pressable box gets; there is nothing
-     card-specific about either.
-
-     `.interactive` is the whole opt-in and stays that way; `.hoverable` and
-     `.pressable` are its halves, for a card that answers one gesture and not
-     the other. A card with its own nested controls takes `.hoverable` for the
-     hover warmth without the press-scale that reads as "you activated the
-     card" when the click really landed on a nested button. `.hoverable` alone
-     does not set the pointer cursor: that travels with being a click target,
-     i.e. with `.pressable` / `.interactive`. */
-  &.interactive,
-  &.hoverable {
-    @apply box-hover;
-  }
-
-  &.interactive,
-  &.pressable {
-    @apply box-active cursor-pointer;
-  }
-}
-
-/* A panel is the flush, unelevated sibling: sidebars, toolbars, and wells that
-   sit flat against the layout rather than floating above it. Soft and edgeless
-   is what makes it read as a well without drawing a line to say so. */
-@utility panel {
-  @apply surface p-(--surface-padding,1rem);
-
-  --_d-fill: 12%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 0%;
-  --_d-elevation: 0;
-
-  &.p-xs {
-    --surface-padding: 0.25rem;
-    --_scale-pad: 0.5;
-  }
-
-  &.p-sm {
-    --surface-padding: 0.5rem;
-    --_scale-pad: 0.75;
-  }
-
-  &.p-lg {
-    --surface-padding: 1.5rem;
-    --_scale-pad: 1.25;
-  }
-
-  &.flush {
-    --surface-padding: 0;
-  }
-
-  /* Neutral panels are the common case -- layout wells, sidebars, toolbars with
-     no named intent -- and 12% of `--color-text` (near-black) mixed onto the
-     page is far more assertive than 12% of a hue (`217, 217, 217` against a
-     `250, 250, 250` page): the same "neutral ink reads louder" effect
-     `.card.soft` answers, and the reason `--intent-fill-max` stops neutral's
-     fill short everywhere else.
-
-     Scoped to no named intent rather than untinted unconditionally, as
-     `data-table` is: a panel is not interactive, so there is no hover to reveal
-     a colored intent into, and it is edgeless by default, so the fill is the
-     only channel a `.primary` bulk-actions bar or a `.destructive` danger-zone
-     panel has to say what it is (a resting `.panel.destructive` is a gentle
-     `249, 225, 225` wash). `.card.soft` carries the same scoping. `:not(...)`
-     names every intent class, plus `.solid`/`.ghost` so an explicit
-     presentation on the element is never clamped to a cap it did not ask for --
-     the guard `data-table`'s `:not(.solid, .ghost)` also uses.
-
-     Grounds on `--color-foreground` through `--_d-surface-ground`, the default
-     `.card.soft` rests on, so a bare `.panel` rests at exactly the plate a
-     `.card.soft` does, and a consumer's `--ui-surface-ground` or glass's
-     translucent ground wins over it: a neutral panel under `.glass` is glass.
-     Permanent rather than hover-revealed: neither a panel nor `data-table` has
-     an interaction state to reveal a tint into. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
-    --_fill-cap: 0%;
-    --_d-surface-ground: var(--color-foreground);
-  }
-}
-
-/* The user agent already promises both of these for a native `<dialog>` --
-   `dialog:not([open]) { display: none }` and a centred `margin: auto` on the
-   open box -- but both are user-agent origin, which loses to any author rule
-   at all. `.card`'s own `display: block` beats the first outright, so a
-   `<dialog class="card">` rendered open with no `open` attribute and no
-   `.showModal()` call, and a margin reset beats the second, so an opened one
-   pinned to the top-left. The registry has no dialog component, and these
-   three are the containers a consumer reaches for.
-
-   Here rather than in the reset, so every entrypoint that ships `.card` ships
-   the fix, `/components` included, and scoped to the package's own containers,
-   so a dialog the package does not style keeps whatever margin its author
-   gives it.
-
-   The two halves sit in different places. Hiding a closed dialog is
-   behaviour, so it is unlayered and beats any layered rule whatever its
-   specificity. Centring an open one is a default, so it is in `utilities` at
-   zero specificity: it beats a reset in `base`, and a consumer's own margin
-   -- a utility, or unlayered CSS -- beats it. Unlayered at 0-2-1 it overruled
-   `mt-8` and `.my-dialog { margin-top: 2rem }` alike, and a dialog could not
-   be placed. */
-dialog:is(.card, .panel, .surface):not([open]) {
-  display: none;
-}
-
-@layer utilities {
-  :where(dialog:is(.card, .panel, .surface)[open]) {
-    margin: auto;
-  }
-}

package/dist/tw/intent.css

@@ -1,229 +0,0 @@
-/* Imported into the `components` layer by `theme.css`, below every utility, so
-   a consumer's own utility or unlayered CSS beats these classes. See
-   docs/internal/model.md#cascade-layers. */
-
-/* An intent maps one colour family onto seven shared slots and nothing else.
-   It does not cascade: the reset at the bottom redeclares the neutral defaults
-   at every component's own root, so a `.success` container cannot recolour a
-   nested destructive button while `.btn.success` still wins. Every intent writes
-   every slot, `--intent-fill-max` included -- omitting it inherits the reset's
-   neutral cap, and `tests/integration/registry.test.ts` fails the build on one
-   that does. Neutral maps `--intent-subtle` to `--color-surface` (the tone
-   tooltips, key caps, code and table heads sit on) and `--intent-border` to
-   `--ui-ink` (how an aesthetic restates the neutral line without naming one). */
-
-/* The same neutral values, at the root. This is the floor: an element that
-   carries no intent class and matches none of the resets below -- a component
-   `@apply`-ed onto a selector the package does not name, a bare `<code>` with
-   no native stylesheet loaded -- still composes against a real colour instead
-   of an undefined one that collapses its `color-mix()` to nothing. It is not
-   the barrier. `.neutral` and both resets below still write these slots on the
-   element itself, which is a matching rule and so beats this inherited value --
-   that is what stops a `.success` container's intent reaching a component
-   nested under it. An intent class on the element beats both. Values track
-   `.neutral` slot for slot; `registry.test.ts` fails the build on drift. */
-:root {
-  --intent-color: var(--color-text);
-  --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: var(--ui-ink, var(--color-border));
-  --intent-fill-max: 20%;
-}
-
-/* Neutral stops its fill short: its colour is the page's ink, so a full fill is
-   a slab and `.neutral.solid` would be pixel-for-pixel `.primary.solid`. 20% is
-   chosen against `.soft`'s 12% -- a step past the tint, not a repeat.
-   `--intent-contrast` stays the page colour; a `.neutral.solid` badge's ink is
-   `box`'s question, answered by the same `--ui-fg-on-fill` cap. Pointing this
-   slot at `--color-text` renders a checked neutral checkbox black-on-black. */
-.neutral {
-  --intent-color: var(--color-text);
-  --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: var(--ui-ink, var(--color-border));
-  --intent-fill-max: 20%;
-}
-
-.primary {
-  --intent-color: var(--color-primary);
-  --intent-contrast: var(--color-primary-contrast);
-  --intent-hover: var(--color-primary-hover);
-  --intent-strong: var(--color-primary-strong);
-  --intent-subtle: var(--color-primary-subtle);
-  --intent-border: var(--color-primary);
-  --intent-fill-max: 100%;
-}
-
-.secondary {
-  --intent-color: var(--color-accent);
-  --intent-contrast: var(--color-accent-contrast);
-  --intent-hover: var(--color-accent-hover);
-  --intent-strong: var(--color-accent-strong);
-  --intent-subtle: var(--color-accent-subtle);
-  --intent-border: var(--color-accent);
-  --intent-fill-max: 100%;
-}
-
-.success {
-  --intent-color: var(--color-success);
-  --intent-contrast: var(--color-success-contrast);
-  --intent-hover: var(--color-success-hover);
-  --intent-strong: var(--color-success-strong);
-  --intent-subtle: var(--color-success-subtle);
-  --intent-border: var(--color-success);
-  --intent-fill-max: 100%;
-}
-
-.warning {
-  --intent-color: var(--color-warning);
-  --intent-contrast: var(--color-warning-contrast);
-  --intent-hover: var(--color-warning-hover);
-  --intent-strong: var(--color-warning-strong);
-  --intent-subtle: var(--color-warning-subtle);
-  --intent-border: var(--color-warning);
-  --intent-fill-max: 100%;
-}
-
-.destructive {
-  --intent-color: var(--color-destructive);
-  --intent-contrast: var(--color-destructive-contrast);
-  --intent-hover: var(--color-destructive-hover);
-  --intent-strong: var(--color-destructive-strong);
-  --intent-subtle: var(--color-destructive-subtle);
-  --intent-border: var(--color-destructive);
-  --intent-fill-max: 100%;
-}
-
-.info {
-  --intent-color: var(--color-info);
-  --intent-contrast: var(--color-info-contrast);
-  --intent-hover: var(--color-info-hover);
-  --intent-strong: var(--color-info-strong);
-  --intent-subtle: var(--color-info-subtle);
-  --intent-border: var(--color-info);
-  --intent-fill-max: 100%;
-}
-
-/* Every component resolves the neutral defaults at its own root, at zero
-   specificity, so an intent class on the element wins while an inherited value
-   loses -- the one rule that lets every component drop its per-intent branches.
-   This list and the one in `native.css` are the package's only hand-maintained
-   selector lists; `tests/integration/registry.test.ts` fails the build on a
-   registry component missing from either. `.text-control` and `.surface` are on
-   it though they are not components: both are documented as typeable on their
-   own, and a bare `<div class="surface">` with no intent resolved computes a
-   transparent background and a zero-width border -- `box` collapses. */
-:where(
-  .btn,
-  .ipt,
-  .text-control,
-  .surface,
-  .textarea,
-  .select,
-  .input-group,
-  .checkbox,
-  .radio,
-  .switch,
-  .card,
-  .panel,
-  .alert,
-  .data-table,
-  .pre,
-  .quote,
-  .tooltip-bubble,
-  .tooltip-icon,
-  .badge,
-  .kbd,
-  .code,
-  .skeleton,
-  .progress,
-  .divider
-) {
-  --intent-color: var(--color-text);
-  --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: var(--ui-ink, var(--color-border));
-  --intent-fill-max: 20%;
-}
-
-/* The six text controls take a heavier line than everything else that rests on
-   the shared neutral. A card, a table or a divider sits on a filled surface or
-   separates content that identifies itself; a text control at rest is a
-   transparent box whose only mark is its border, and WCAG 1.4.11 asks that
-   border for 3:1. `--color-border` gives it 1.42:1.
-
-   Declared here at zero specificity for the same reason the indicators below
-   are: written inside `@utility text-control` it would land in `utilities`,
-   above every intent class in `components`, and overrule `.primary` on the
-   element. Written as a plain class list it would carry 0-1-0 and, being later
-   in the stylesheet, beat `.primary` the same way. Either would make every
-   colored control draw a grey line; `:where()` keeps it under both.
-
-   An aesthetic reaches this line through `--ui-control-ink` first, then its
-   `--ui-ink`: the theme keeps a control border apart from a surface border, and
-   an aesthetic whose neutral line suits a pane but not a control's boundary --
-   `.glass`'s white hairline, `.chunky-tile`'s tile grey -- names a control line
-   of its own. See docs/internal/model.md#presentation.
-
-   The second selector is the tooltip bubble's below, for the same reason:
-   `.neutral` carries 0-1-0 and beat `:where()`, so a `.neutral` field under
-   `.glass` drew the pane's hairline while an unclassed one drew the control
-   line, and writing the intent out changed the box. */
-:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch),
-:is(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch).neutral {
-  --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
-}
-
-/* A table's lines -- its frame, head rule, and row rules -- are drawn on a
-   plate, not at a pane's edge against the backdrop, so an aesthetic whose
-   neutral line is a highlight names a rule line of its own: glass's white
-   hairline vanishes on the table's light plate. Neutral only, and `.neutral`
-   included, the way the control line above is, and a `.neutral` row in a
-   table of another intent, which draws its rules as a neutral table does. */
-:where(.data-table),
-.data-table.neutral,
-.data-table tr.neutral {
-  --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
-}
-
-/* The bubble a tooltip draws is the one plate in the package that is chosen
-   rather than composed, so it resolves the no-intent case onto its own pair
-   instead of the shared neutral -- see `--color-tooltip` in `theme.css`.
-
-   The cap goes with it. Neutral stops its fill at 20% because its colour is the
-   page's ink; `--color-tooltip` is a plate rather than an ink, so a full fill
-   of it is the plate and there is nothing to stop short of. `--intent-subtle`
-   stays the surface token, the tone every other unclassed component sits on.
-   `.tooltip-icon` is a separate element that never fills past `0%`, so the
-   generic neutral reset above is enough for it.
-
-   Two selectors, so `none` and `neutral` agree. `:where()` loses to any intent
-   class, so `.tooltip-bubble.primary` still floods with primary;
-   `.tooltip-bubble.neutral` carries 0-2-0 and beats `.neutral`, so writing the
-   intent out gives the same bubble as writing nothing. */
-:where(.tooltip-bubble),
-.tooltip-bubble.neutral {
-  --intent-color: var(--color-tooltip);
-  --intent-contrast: var(--color-tooltip-contrast);
-  --intent-hover: var(--color-tooltip);
-  --intent-strong: var(--color-tooltip-contrast);
-  --intent-subtle: var(--color-surface);
-  --intent-border: var(--ui-ink, var(--color-border));
-  --intent-fill-max: 100%;
-}
-
-/* Indicators take the color they sit in rather than the shared neutral, so a
-   skeleton inside filled or colored content still matches it. It has to be
-   declared here at zero specificity: written in the component's own block it
-   would carry 0-1-0 and, being later in the stylesheet, beat `.success` --
-   which silently makes every indicator ignore every intent class. */
-:where(.skeleton, .progress, .divider) {
-  --intent-color: currentColor;
-  --intent-border: currentColor;
-}