@font-face {
font-family: "Geist Mono Variable";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/geist-mono.684ad5b531f81d43.woff2") format("woff2");
}
@font-face {
font-family: "Inter Variable";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter.3100e775e8616cd2.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk Variable";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/space-grotesk.0640890476fc1198.woff2") format("woff2");
}
/* The reset.
*
* Small on purpose -- this is not a normalising stylesheet, it is the two
* or three browser defaults that make a component library's own rules mean
* what they say.
*
* **`border-box` is the load-bearing one, and its absence is why this file
* exists.** Under the browser default, `content-box`, a `width: 100%` plus
* a `padding` is wider than its parent by the padding. Every component here
* that sets both was affected: the scene's header and body, `.field`,
* `.card__body`, a padded `.panel`. On a desktop it hides -- the scene's
* header overflowed its viewport by 15px and `overflow: clip` swallowed it
* -- and on a phone the same bug eats the entire side gutter, which is what
* "it does not handle smaller viewports" looked like.
*
* The console this replaces never had the problem because Tailwind's
* preflight sets `border-box` globally. Writing plain CSS means writing the
* preflight's load-bearing lines too, and this one was simply missed.
*
* `stylesheet()` puts this first, before the tokens and the components, and
* `the_reset_comes_first` keeps it there: a reset that lands after the rules
* it is meant to underpin is a reset that loses every specificity tie.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Nothing in this library wants a browser's default margins, and the
components that need space between them get it from the caller's layout
-- `--gap-stack` and its siblings. A stray `h1` margin inside a card is a
gap nobody asked for and nobody can see the source of. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol {
margin: 0;
}
/* A long token, a charge point id or a reference digest has no spaces to
break at, so it will otherwise push a container wider than its parent
rather than wrapping -- the same failure as the missing `border-box`, and
it shows up in exactly the places this product puts identifiers. */
body {
overflow-wrap: break-word;
}
/* iOS paints a grey box over whatever is tapped; every interactive thing
here has its own pressed and focus states. */
* {
-webkit-tap-highlight-color: transparent;
}
/* The token layer.
*
* One of the four standing design rules is that colour, radius and font go
* through tokens and never through a raw palette value. This file is that
* layer for the Dioxus console. It began as a copy of
* `services/web/src/app/globals.css`, so the two consoles could not drift
* while both existed; ADR-0126 ended that on purpose. The console being
* replaced keeps its values and this layer is retuned to the brand's Night
* sky and the wire, so a value here that differs from `globals.css` is the
* design, not drift.
*
* Tokens only. A rule that styles an element belongs in a sheet under assets/components/ --
* if this file ever contains a selector that is not a token block, the
* layer has stopped being a layer, and `the_token_layer_is_only_tokens`
* fails.
*
* THREE THEME STATES, and the selectors are not interchangeable:
*
* 1. No `data-theme` anywhere: follow the operating system, via the media
* query. This is what `clients/console` does today.
* 2. `data-theme="dark"` / `"light"` on ANY ancestor: that subtree is
* themed, whatever the operating system says.
*
* Case 2 deliberately does not say `:root`. The storybook themes a `div`
* rather than the document, because the useful thing to be able to build
* there is the same specimen on both grounds at once, and a `:root`-only
* selector makes that impossible. Getting this wrong is silent: the
* attribute lands on an element no rule matches, the media query keeps
* winning, and the toggle appears to do nothing.
*
* The dark palette therefore appears twice, which is the cost of CSS having
* no way to name a block of declarations and apply it from both a media
* query and a selector. Keep the two copies identical.
*
* Not carried across: the ~200 tokens the existing console defines for
* resources, charger swatches, scene grounds and sidebar chrome. They come
* over with the components that need them, so that this file stays a list
* of things actually in use rather than a copy of another codebase's
* surface area.
*/
:root {
/* A control's own ground: fields, pickers and outline buttons. On light
it is the page's white with the ordinary border, so nothing moves; on
dark it sits one step *above* the card it is on, in the panel's petrol
hue -- the brand's Night (`--background`) under a field made every
control read as a hole in its card. */
--field: oklch(1 0 0);
--field-line: oklch(0.925 0.005 214.3);
--field-hover: oklch(0.963 0.002 197.1);
/* Somebody else's logo stands on its own stage (`brand_logo.rs`). Logos
are drawn for a light page, most in dark ink, so the stage is a
softened off-white in both themes and every logo keeps its own
colours; `--logo-ink` is a name or letters written on it. On dark it
is a shade greyer, so a grid of stages does not glare. */
--logo-stage: #f5f8f7;
--logo-ink: #101a1c;
color-scheme: light dark;
/* Ground and ink. oklch, as in the original -- perceptually uniform
lightness is what lets the dark palette change L and leave hue
alone. */
--background: oklch(1 0 0);
--foreground: oklch(0.148 0.004 228.8);
--muted-foreground: oklch(0.5 0.02 213.5);
--hairline: oklch(0.148 0.004 228.8 / 12%);
--raised: oklch(0.148 0.004 228.8 / 4%);
/* The status vocabulary. Five tones, closed -- see libs/ui/src/status.rs
for why it does not grow per caller. */
--status-ok: oklch(0.51 0.16 152);
--status-busy: oklch(0.54 0.19 258);
--status-warn: oklch(0.54 0.16 70);
--status-fault: oklch(0.552 0.245 27.325);
--status-unknown: oklch(0.5 0.02 213.5);
/* Action colours, for `button.rs`. Same names the existing console uses,
because the components that read them are ports. */
--primary: oklch(0.508 0.118 165.612);
--primary-foreground: oklch(0.979 0.021 166.113);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--muted: oklch(0.963 0.002 197.1);
--border: oklch(0.925 0.005 214.3);
--ring: oklch(0.723 0.014 214.4);
/* Brand. The gradient runs head to tail; on light grounds that is deep
emerald to deep cyan (docs/architecture/brand.md).
`--brand-star` and `--brand-ion` are the mark's two lights: the fixed
stars of the constellation, and the one that moves. They are a separate
pair from the gradient because they invert differently -- on Night they
are near-white (emerald-100 and -50, the brightest thing in the mark),
and on white they are a deep emerald that the gradient's own stops are
too light to stand in for. The committed asset ships two files for
exactly this reason; these two tokens are what let one component do
the job of both. */
--brand-from: #059669;
--brand-to: #0891b2;
--brand-star: #047857;
--brand-ion: #047857;
/* The scene's two accents. Unthemed, like everything else about the night
sky: it has no light mode, so these are the same on both grounds. Used
by the error scene's eyebrow -- amber for a fault, cyan for a page where
nothing is wrong. */
--scene-accent-warm: #fcd34d;
--scene-accent-cool: #67e8f9;
/* The panel: the ground every authenticated page is (spec 097
design.md §1.1). A cool near-white with a faint green bias, and the
same eight roles on Night as a petrol-teal. `pn-bg` is the page,
`pn-raise` a card on it, `pn-raise-2` a band inside a card, `pn-line`
every hairline, `pn-track` an unlit conductor or an empty bar,
`pn-bar` a bar that is present but not the subject. Read by the
console shell and the instrument primitives; `--background` and
`--foreground` above stay what the sign-in screens and the storybook
sit on. */
--pn-bg: #eff3f1;
--pn-raise: #ffffff;
--pn-raise-2: #f4f7f6;
--pn-line: #dde5e2;
--pn-track: #e6ecea;
--pn-bar: #a9bcb8;
--pn-text: #101a1c;
--pn-dim: #5a6b68;
/* The wash (ADR-0212): the brand's two ends, faint, over the panel's
ground -- green from the top left, cyan from the bottom right. The
geometry is one rule on `.shell`; these are only the two colours, with
their alpha, so one drawing serves both grounds. The alpha is a
ceiling, not a taste: it is the most the panel's dim text can bear at
the wash's peak and still read, which `contrast.rs` holds. Stronger
means retuning `--pn-dim` first. */
--pn-wash-a: #05966917;
--pn-wash-b: #0891b217;
/* Porcelain's edge (ADR-0212): the light along a card's top edge. By
day a white card on the near-white panel needs none, so this is
clear; on Night a shadow has nothing to darken and the card is only a
slightly lighter rectangle, so a hairline of light stands in for the
border that is gone. Drawn as an inset shadow, never a border. */
--pn-edge: #ffffff00;
/* Glass (ADR-0212): the surface of what floats over content and carries
only controls and short labels -- the tab strip, the phone's tab bar,
menus. Translucent and blurred, so the wash and whatever is beneath
show through; the line is its edge and the highlight the light along
its top. Never under prose or a figure: those sit on `pn-raise`. */
--glass: #ffffffa3;
--glass-line: #ffffffcc;
--glass-highlight: #ffffffe6;
/* The anchor surface: one card per page, carrying the thing the page is
actually for -- the ceiling that binds, the money, what you can send,
what you cannot edit. A page has at most one, and being the only
inverted surface is the whole mechanism: it says "this is the point"
without spending a word on it. On the panel it is the brand's Night
(ADR-0126): the same petrol ground the sidebar is drawn on, so the
page's point and the chrome read as one sky.
Seven roles, mirroring the panel's: `ink-bg` is the card, `ink-lift`
the top of its gradient, `ink-raise` a chip inside it, `ink-line` a
hairline on it, `ink-track` an empty bar, and the two inks.
THE DIRECTION FLIPS WITH THE THEME, and that is the point rather than
an oversight. On the panel's near-white ground the anchor is dark. On
Night it cannot also be dark -- it would disappear into a page that is
already darker than it -- so it becomes the *lightest* surface on the
page, above `pn-raise-2`. What is constant is that the anchor is the
surface furthest from the ground in lightness; which way that points
is the ground's business. A card that reads as the subject on one
theme and as an ordinary tile on the other is the failure this
avoids.
If this turns out to be the wrong call, it is one block of values per
theme and nothing else. */
--ink-bg: #0d1a1c;
--ink-lift: #132427;
--ink-raise: #1b3034;
--ink-line: #263d41;
--ink-track: #1b3034;
--ink-text: #e6efec;
--ink-dim: #9bb1ac;
/* A status on the ink surface, which is dark in both schemes: the dark
palette's fault and warn, so a dot on a message log reads the same
in either. */
--ink-fault: oklch(0.704 0.191 22.216);
--ink-warn: oklch(0.8 0.16 80);
/* Night: the chrome's own ground (ADR-0126). The sidebar and the phone's
bottom bar are drawn on the brand's sky in both themes, so these are
defined once, here, and never themed: a theme flip moves the page and
leaves the chrome where it is. `night-dim` is the quietest thing that
is ever text on it (7:1); an icon may go dimmer, a word may not. */
--night-bg: #0d1a1c;
--night-raise: #172a2d;
--night-line: #263d41;
--night-text: #e6efec;
--night-dim: #9bb1ac;
--night-accent: #6ee7b7;
--night-accent-2: #67e8f9;
--night-star: #ecfdf5;
/* The mascot's inks, on the same night: the body's shadow side, the
tail's shaded edge, and the one highlight. Unthemed like the rest of
the night, because the sprite never leaves its plate. */
--night-accent-shade: #2fb48b;
--night-accent-2-shade: #1fa6c4;
--night-highlight: #d1fae5;
/* The sandbox band's hazard tape, and the ink written on it (ADR-0125).
Unthemed: tape is tape on either ground, and the ink clears 10:1 on
both stripes. */
--sandbox-tape: #fbbf24;
--sandbox-tape-2: #f59e0b;
--sandbox-ink: #1f1300;
/* The mode switch (spec 105): live and sandbox, worn by `mode.rs`'s
`ModeSwitch` and `ModeTag`. Sandbox is the marked mode and live the
unmarked normal (ADR-0125): live is the panel's own neutral, because
the mode an operator is in all day should not be drawn in the colour
this product keeps for faults, and sandbox is hazard-tape amber.
Colour is never the only channel either carries: the icon and the
words repeat the same distinction (FR-020). */
--mode-live: oklch(0.5 0.02 213.5);
--mode-sandbox: #d97706;
/* The same two, as ink: for the mode's name written on its own tint
(the selected mode switch, a mode tag). A mid-tone cannot clear 4.5:1
on a tint of itself, so the text takes a deeper step of the same hue
and the border and tint keep the mode colour. */
--mode-live-ink: #2e3b39;
--mode-sandbox-ink: #7c3a06;
/* The supply's two answers and three lines, worn by the plate and the
ladder. Served and constrained are numerically status-ok and
status-busy and deliberately their own tokens: a constrained wire is
the scheduler at capacity, not a busy dot, and the two must be able to
move apart. The lines are IEC 60445's conductor colours -- brown,
black, grey -- so an installer reads them without a key; black lifts
to near-white on the dark ground. */
--line-l1: #8a5a2b;
--line-l2: #24292e;
--line-l3: #8b949b;
/* Text on a line's own colour, when a chip wears it as a ground. */
--line-l1-ink: #ffffff;
--line-l2-ink: #ffffff;
--line-l3-ink: #101a1c;
--price-cheap: oklch(0.51 0.16 152);
--price-dear: oklch(0.55 0.19 30);
/* The two kinds of current a tariff can price apart. Blue for AC and a
warm orange for DC, their own tokens rather than the location or fault
hue: a DC price is not a warning, and an AC price is not a place. */
--kind-ac: oklch(0.5 0.13 240);
--kind-dc: oklch(0.47 0.15 45);
/* As ink, for the kind's name on its own tint laid over a tinted row --
where AC measured 4.37:1. 4.91 each on the darkest row tint. */
--kind-ac-ink: #00558f;
--kind-dc-ink: #942e00;
/* One hue per resource kind, worn by `ResourceChip` as a foreground over
a low-alpha tint of itself -- never as body text. Kept apart from the
status tones: status means health, resource means kind, and a violet
circuit chip must never read as a busy dot. The charging station wears
the brand's own emerald; it is the core object of the product. */
--resource-environment: oklch(0.5 0.15 278);
--resource-location: oklch(0.52 0.11 225);
--resource-circuit: oklch(0.51 0.17 295);
--resource-charging-station: oklch(0.51 0.13 163);
--resource-outlet: oklch(0.51 0.12 185);
--resource-transaction: oklch(0.47 0.13 75);
--resource-analytics: oklch(0.51 0.16 255);
--resource-simulator: oklch(0.54 0.17 330);
/* Radius. Sharper than the existing console, deliberately: its root was
0.625rem and its buttons carried 1.4x that, so a 2rem-tall button was
rounded 14px -- most of the way to a pill, which reads as soft where
this product is mostly dense tables and instrument readouts. The four
steps below halve that at the top end.
Explicit values rather than `calc()` off one root. The derived form
scales the whole system from one number, which sounds better than it
is: nobody rescales a radius system, and the price is that no test can
tell you whether the steps are in order (CSS `calc` is not something
a Rust test is going to evaluate) and the Radius page cannot print a
true number beside a name. The ratios are still 1:2:3:4 if anyone
wants to move them together. */
--radius-sm: 0.125rem;
--radius-md: 0.25rem;
--radius-lg: 0.375rem;
--radius-xl: 0.5rem;
/* Above the control steps, and for surfaces only. The four steps above
were chosen for a console of dense tables and instrument readouts,
and they are still right for a row, an input or a badge. A card on
the panel is a different object: it is large, it floats on the ground
rather than sitting in a rule, and at 8px it reads as a clipped
rectangle rather than as a surface. 1rem is the smallest radius that
holds at that size.
Surfaces only, deliberately. A 16px corner on a 20px-tall badge is a
pill with extra steps, and if this step reaches controls the scale
above it stops meaning anything. */
--radius-2xl: 1rem;
/* Porcelain (ADR-0212): a card, a table, a tile group on the washed
ground, drawn with no edge and a soft shadow. Borderless, a surface
needs more corner than a ruled one to read as an object, and this is
the step the native apps' cards take. A group *inside* a card stays
at 1rem, so the corners are concentric. */
--radius-3xl: 1.5rem;
--radius-pill: 999px;
/* How far a glass surface blurs what is behind it. One value, unthemed:
the frost is the same by day and by night, only its colour changes. */
--glass-blur: 1.25rem;
/* The curve of a corner, where the browser can draw one (`corner-shape`,
Chromium 139+; Safari and Firefox fall back to the plain radius). The
continuous corner SwiftUI draws: `squircle` is the named step, and a
`superellipse(K)` between 1 (round) and 2 (squircle) tunes it. Pills
stay capsules and do not take it. */
--corner-continuous: squircle;
/* Elevation. Composite shadows -- a tight contact shadow plus a wider
ambient one -- because a single blur reads as a glow rather than as
height.
These are themed, unlike radius and spacing, and the dark values are
not the light ones with more alpha. On the Night ground a shadow has
almost nothing to darken, so elevation there is carried mostly by
`--raised` and `--hairline`; the shadow only stops a surface looking
pasted on. Raising the alpha instead produces a dark smudge that
reads as dirt. See the Elevation page.
`--shadow-md` was retuned for the panel's floating cards: wider and
fainter than it was (2px/6px at 8%). A card that carries no border
needs the shadow to describe its whole edge, and a tight dark one
reads as a drawn outline rather than as height, while a wide faint
one reads as the card lifting off the ground -- which is what it is
doing. Retuned rather than joined by a fourth step: `--shadow-md` is
already defined as "a panel that sits above the page and stays
there", which is exactly a card, so a `--shadow-card` beside it
would be the near-duplicate the Shape page's test exists to
prevent. */
--shadow-sm: 0 1px 2px oklch(0.148 0.004 228.8 / 8%);
--shadow-md:
0 4px 16px oklch(0.148 0.004 228.8 / 6%),
0 1px 3px oklch(0.148 0.004 228.8 / 4%);
--shadow-lg:
0 8px 24px oklch(0.148 0.004 228.8 / 12%),
0 2px 6px oklch(0.148 0.004 228.8 / 6%);
/* Three families, named as `@fontsource-variable/*` declares them.
`services/web` self-hosts these rather than using `next/font/google`,
because that downloads from fonts.gstatic.com inside the build action;
the same reasoning applies here and the same three families are named,
so the two consoles render the same words the same way.
The files are the renderer's to serve, not this crate's to embed:
clients/console declares the faces in its index.html from three
pinned http_files (MODULE.bazel). Where they are not served -- the
showcase, today -- every stack falls through to a system font, which
is close and not deterministic across machines; see libs/ui/AGENTS.md
before writing a pixel test against any of this. */
--font-sans:
"Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, sans-serif;
--font-heading:
"Space Grotesk Variable", "Inter Variable", ui-sans-serif, system-ui,
sans-serif;
--font-mono:
"Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
monospace;
/* The type scale, and its line heights, carried across from the existing
console rather than re-chosen. Each size is one token so that a
component names a step and never a length -- the same rule colour
follows. `sm` is the console's body size, not `base`: measured across
`services/web/src/app` and `src/components`, `text-sm` appears 536
times against 25 for `text-base`. A component library whose default
body size is not the product's body size is one every call site has to
correct. */
/* Below the carried-across scale, and CSS-only: no `TextSize` offers it,
so body copy can never reach for it. It names the 10px micro label an
instrument draws -- a unit beside a figure, an axis tick, a step
number -- which the component layer had written as a raw `0.625rem` in
eleven places. Whether 10px is legible enough is a design question;
one token is what makes answering it a one-line change. */
--text-2xs: 0.625rem;
--text-xs: 0.75rem;
--text-xs-leading: 1rem;
--text-sm: 0.875rem;
--text-sm-leading: 1.25rem;
--text-base: 1rem;
--text-base-leading: 1.5rem;
--text-lg: 1.125rem;
--text-lg-leading: 1.75rem;
--text-xl: 1.25rem;
--text-xl-leading: 1.75rem;
--text-2xl: 1.5rem;
--text-2xl-leading: 2rem;
--text-3xl: 1.875rem;
--text-3xl-leading: 2.25rem;
--text-4xl: 2.25rem;
--text-4xl-leading: 2.5rem;
--text-5xl: 3rem;
--text-5xl-leading: 3.25rem;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* The spacing scale. Eight steps, and every one of them is a value the
existing console already leans on -- derived by counting Tailwind
spacing utilities across `services/web/src/app` and `src/components`
rather than invented:
0.5 -> 2xs (84 uses) 3 -> lg (414)
1 -> xs (190) 4 -> xl (368)
1.5 -> sm (176) 6 -> 2xl (149)
2 -> md (468) 8 -> 3xl (29)
The two in-between values it drops (2.5 and 5, 101 uses together) snap
to a neighbour. That is the point of a scale: the steps it refuses are
what stop a layout drifting into fourteen slightly different gaps. */
--space-2xs: 0.125rem;
--space-xs: 0.25rem;
--space-sm: 0.375rem;
--space-md: 0.5rem;
--space-lg: 0.75rem;
--space-xl: 1rem;
--space-2xl: 1.5rem;
--space-3xl: 2rem;
/* Three steps above the console's range, for the public site.
A dense tool tops out at 2rem: nothing in a table or a form wants more.
A marketing page's section break does, and without these the site
reached for arithmetic instead -- `calc(var(--space-3xl) * 2)` in
prose.css, hard-coded paddings in the header and footer -- which is how
one page came to start 2rem under the header, another 1rem and a third
1.5rem. Ratio 1.5x, 2x, 3x on --space-3xl, so they stay on the scale
rather than beside it. */
--space-4xl: 3rem;
--space-5xl: 4rem;
--space-6xl: 6rem;
/* The standard gaps: four roles, each pointing at a step. Reach for these
before reaching for the scale, because a role survives a change to the
scale and a raw step does not -- if `--gap-stack` should become 1rem,
it changes here once rather than at every call site that happened to
pick `--space-lg` for that reason.
The roles are nested, smallest to largest, and the rhythm only reads if
they stay ordered: things inside one control are closer than controls
are to each other, which are closer than blocks, which are closer than
sections. `gaps_are_ordered_smallest_to_largest` holds that. */
--gap-inline: var(--space-sm);
--gap-stack: var(--space-lg);
--gap-block: var(--space-2xl);
--gap-section: var(--space-3xl);
/* The smallest thing a finger can hit: 44px, WCAG 2.5.5's target and
what `touch.spec.ts` measures every control against on a phone. The
floor of every button, field, menu item and row, and the hit area a
text link grows to on a coarse pointer. It was a raw `2.75rem` in
twenty places; as one token, a change to it is a change to all of
them rather than to whichever ones a search found. */
--touch-target: 2.75rem;
/* The page frame. Three widths and a gutter, read by `container.rs` and
by the scene -- so a page that wants to be as wide as the console's
standard page is that width by name, not by repeating a number.
Counted across the console this replaces rather than chosen:
`max-w-6xl` (72rem) at 37 call sites, `max-w-2xl` (42rem) at 24,
`max-w-3xl` (48rem) at 21. */
--width-page: 72rem;
--width-content: 48rem;
--width-prose: 42rem;
/* The side gutter. One token because it is the thing that actually goes
wrong on a phone -- a max-width is easy to repeat correctly, a
responsive inset is not, and when it is missing the text sits against
the glass. It opens up below. */
--gutter: var(--space-xl);
/* Motion. Quiet on purpose: this is a tool read all day, so movement
says where something came from and then gets out of the way. Three
durations and two curves, and nothing picks its own.
- `fast` for feedback on the thing touched (press, hover, a tab);
- `base` for something appearing (a skeleton, a fade);
- `slow` for a page moving (the push and pop between screens).
`--ease-out` settles quickly; `--ease-move` is the long-tailed curve
a native navigation stack uses, so a pushed page decelerates in.
Reduced motion zeroes the durations below, so every rule that reads
them stops moving without a query of its own. */
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms;
/* The mascot: four frames a cycle, each shown for 180ms, and the two
sizes at which a 16-cell sprite stays sharp (two and four device
pixels a cell). */
--mascot-period: 720ms;
--mascot-size: 2rem;
--mascot-size-large: 4rem;
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-move: cubic-bezier(0.32, 0.72, 0, 1);
/* How far a pressed control gives, and how long a load may take before
a placeholder is worth showing: under that, the flash of a skeleton
is the only thing the reader would notice. */
--press-scale: 0.97;
--skeleton-delay: 150ms;
/* The sky's pointer offset, in pixels. `Scene` writes these inline as the
pointer moves and the layers inside read them, each scaled by its own
depth. Defined here so the rest pose is a real value rather than an
unresolved var() -- an undefined custom property makes the whole
`translate` declaration invalid, which would silently disable the
parallax rather than centre it. */
--parallax-x: 0px;
--parallax-y: 0px;
/* The shell's chrome, as lengths. Read by `shell.rs` and the
components that sit in it. `--topbar-height` is the public site's
header now; the console's page header is `--header-height`. */
--sidebar-width: 15.5rem;
/* The standing column (ADR-0213) and the rail it folds to. */
--aside-width: 22.5rem;
--rail-width: 3.5rem;
--header-height: 3.5rem;
/* The sandbox band across the top of every page in sandbox, and how
much of it is showing: none, until `.shell` holds a band. */
--band-height: 2.125rem;
--chrome-band: 0px;
/* A Table's column names, for its phone cards: each table sets its own
on itself (libs/ui/src/table.rs); unset, a cell has no label. Slot 1
is the card's heading and is never named. */
--table-col-2: none;
--table-col-3: none;
--table-col-4: none;
--table-col-5: none;
--table-col-6: none;
--table-col-7: none;
--table-col-8: none;
--list-width: 20rem;
--topbar-height: 3.25rem;
--bottombar-height: 4.75rem;
/* A bottom sheet's ceiling and where its handle has been pulled to.
`--sheet-peek` is how much of the box the sheet sits in stays showing
above the tallest sheet, so the reader can see where they are (in the
console that box is the page under the header: with the header, about
what the mockup leaves of an 844px phone). `--sheet-drag` is written
inline by `Sheet` while the handle is dragged, and this is its rest
pose, so the panel's `translateY` is never an unresolved var(). */
--sheet-peek: 5rem;
--sheet-drag: 0px;
/* A conductor's flow period. `ConductorTree` writes it inline per edge
from the current flowing there; defined here so an edge that never
writes one still animates rather than silently not. */
--flow-period: 1.6s;
/* A status tone's colour, set by base.css's tone map on anything that
says `data-tone="status-*"` and read by its parts. Declared here so
the token guard knows it; nothing reads this default. */
--tone: var(--status-unknown);
/* The sky's comet, as a dash length along its wake -- in the wake's own
`pathLength` units, so unitless. This is the glow's tail; the core
sets its own shorter one. Defined here for the same reason as the
parallax above: `scene.css`'s keyframes are written as
`calc(var(--comet-tail) - n)`, and an unresolved var() would make the
whole offset invalid and leave the comet parked, not moving. */
--comet-tail: 22;
/* Where along the wake the comet's head is, 0 to 111. `scene.css`
registers it with `@property` so it interpolates, and animates it;
this is its rest value, for the same reason as the two above. */
--comet-head: 0;
/* The fuse demo's state (`FuseDemo`, site.css): set per state on
`.fuse-demo` by `:has()` rules on its own inputs and read by its
drawing -- the live colour (fault when the fuse trips), each car's
share of its ring and the fuse's load (of 100), and how long current
takes to run a wire. Declared here so the token guard knows them;
these rest values are an empty garage with Flowion on. */
--fuse-demo-live: var(--night-accent);
--fuse-demo-reading: var(--ink-text);
--fuse-demo-share: 0;
--fuse-demo-load-on: 0;
--fuse-demo-load-off: 0;
--fuse-demo-period: 2s;
/* The sky's artwork, by day. `Scene` follows the theme like every other
component; what it draws -- the bolt, the comet, the ion, the nebulae,
the horizon -- is the same on both grounds, in these colours. The
stars are the one thing with nowhere to go on a pale ground, so a
token carries their `display`. The star layers' own gradients stay in
`scene.css`, where the literal-colour exemption for artwork lives. */
--sky-ground: linear-gradient(to bottom, #f0fdfa, #ffffff 45%, #f8fafc);
--sky-nebula-one: #10b98126;
--sky-nebula-two: #22d3ee1f;
--sky-nebula-three: #6366f114;
--sky-stars: none;
--sky-line: #04785733;
--sky-star: #047857;
--sky-star-glow: #6ee7b7;
--sky-crown: #065f46;
--sky-wake-glow: #34d399;
--sky-wake-core: #047857;
--sky-ion: #047857;
--sky-horizon: rgba(52, 211, 153, 0.14);
--sky-hairline: #04785766;
}
/* The gutter opens up once there is room for it. A token that varies by
viewport rather than a media query per component: every page frame moves
together, and `.container` never learns a breakpoint. */
@media (min-width: 40rem) {
:root {
--gutter: var(--space-2xl);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 0ms;
--motion-base: 0ms;
--motion-slow: 0ms;
--press-scale: 1;
}
}
/* Case 1: follow the operating system, unless something has explicitly
asked for light. The dark ground is the brand's Night (#060a14) and the
tones lift rather than invert: same hue, higher lightness, so a fault
stays the same red idea at a legible contrast.
The panel's steps on Night are spaced on purpose (2026-10-08): the
sidebar's `--night-bg` is the floor, `--pn-bg` sits a step above it so
the page reads as a surface on the chrome rather than a hole in it, and
`--pn-raise`, `--pn-raise-2` and the anchor's `--ink-*` each sit three
or four L* above the one below. Before this they were within a step or
two of each other and the shell read as one slab. The contrast pairs
in `contrast.rs` are the ceiling on how far any of them may rise. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--field: #1a282b;
--field-line: #2c3d41;
--field-hover: #213235;
--logo-stage: #e8eeec;
--logo-ink: #101a1c;
--background: #060a14;
--foreground: #f8fafc;
--muted-foreground: #94a3b8;
--hairline: #ffffff1a;
--raised: #ffffff14;
--status-ok: oklch(0.75 0.16 152);
--status-busy: oklch(0.75 0.14 258);
--status-warn: oklch(0.8 0.16 80);
--status-fault: oklch(0.704 0.191 22.216);
--status-unknown: oklch(0.723 0.014 214.4);
--primary: oklch(0.72 0.13 166.913);
--primary-foreground: oklch(0.18 0.045 166.913);
--secondary: #213235;
--secondary-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--muted: oklch(0.275 0.011 216.9);
--border: oklch(1 0 0 / 10%);
--ring: oklch(0.56 0.021 213.5);
--brand-from: #6ee7b7;
--brand-to: #67e8f9;
--brand-star: #d1fae5;
--brand-ion: #ecfdf5;
--pn-bg: #111e21;
--pn-raise: #182a2e;
--pn-raise-2: #203439;
--pn-line: #2a4044;
--pn-track: #243a3f;
--pn-bar: #46606a;
--pn-text: #e4ecea;
--pn-dim: #9aaeaa;
--pn-wash-a: #6ee7b721;
--pn-wash-b: #67e8f91c;
--pn-edge: #ffffff0a;
--glass: #1a2d3199;
--glass-line: #ffffff1f;
--glass-highlight: #ffffff1a;
/* The anchor, inverted: on Night it is the lightest surface on the
page rather than the darkest. See the note in :root. */
--ink-bg: #213b41;
--ink-lift: #284650;
--ink-raise: #30525a;
--ink-line: #3a5e66;
--ink-track: #172a2e;
--ink-text: #eef5f3;
--ink-dim: #b0c4c0;
--ink-fault: oklch(0.704 0.191 22.216);
--ink-warn: oklch(0.8 0.16 80);
--mode-live: oklch(0.723 0.014 214.4);
--mode-sandbox: #fbbf24;
--mode-live-ink: #cfdad8;
--mode-sandbox-ink: #fcd34d;
--line-l1: #d09a66;
--line-l2: #eef1f3;
--line-l3: #8a949b;
--line-l1-ink: #1b1206;
--line-l2-ink: #111827;
--line-l3-ink: #101a1c;
--price-cheap: oklch(0.75 0.16 152);
--price-dear: oklch(0.74 0.17 30);
--kind-ac: oklch(0.78 0.11 240);
--kind-dc: oklch(0.78 0.13 45);
--kind-ac-ink: #71c1f7;
--kind-dc-ink: #fc9b6f;
--resource-environment: oklch(0.78 0.13 278);
--resource-location: oklch(0.78 0.11 225);
--resource-circuit: oklch(0.78 0.15 295);
--resource-charging-station: oklch(0.78 0.13 163);
--resource-outlet: oklch(0.78 0.12 185);
--resource-transaction: oklch(0.8 0.13 75);
--resource-analytics: oklch(0.78 0.14 255);
--resource-simulator: oklch(0.78 0.15 330);
/* The sky's artwork, by night: the ground the brand is drawn on. See the
`:root` block for what each is. */
--sky-ground: #060a14;
--sky-nebula-one: #10b98133;
--sky-nebula-two: #22d3ee1f;
--sky-nebula-three: #6366f11f;
--sky-stars: block;
--sky-line: #a7f3d029;
--sky-star: #d1fae5;
--sky-star-glow: #a7f3d0;
--sky-crown: #ecfdf5;
--sky-wake-glow: #a7f3d0;
--sky-wake-core: #ecfdf5;
--sky-ion: #d1fae5;
--sky-horizon: rgba(52, 211, 153, 0.22);
--sky-hairline: #6ee7b780;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 45%);
--shadow-md: 0 2px 6px oklch(0 0 0 / 45%), 0 1px 2px oklch(0 0 0 / 35%);
--shadow-lg: 0 8px 24px oklch(0 0 0 / 50%), 0 2px 6px oklch(0 0 0 / 35%);
}
}
/* Case 2, dark. Any element, not just :root -- see the header. */
[data-theme="dark"] {
--field: #1a282b;
--field-line: #2c3d41;
--field-hover: #213235;
--logo-stage: #e8eeec;
--logo-ink: #101a1c;
color-scheme: dark;
--background: #060a14;
--foreground: #f8fafc;
--muted-foreground: #94a3b8;
--hairline: #ffffff1a;
--raised: #ffffff14;
--status-ok: oklch(0.75 0.16 152);
--status-busy: oklch(0.75 0.14 258);
--status-warn: oklch(0.8 0.16 80);
--status-fault: oklch(0.704 0.191 22.216);
--status-unknown: oklch(0.723 0.014 214.4);
--primary: oklch(0.72 0.13 166.913);
--primary-foreground: oklch(0.18 0.045 166.913);
--secondary: #213235;
--secondary-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--muted: oklch(0.275 0.011 216.9);
--border: oklch(1 0 0 / 10%);
--ring: oklch(0.56 0.021 213.5);
--brand-from: #6ee7b7;
--brand-to: #67e8f9;
--brand-star: #d1fae5;
--brand-ion: #ecfdf5;
--pn-bg: #111e21;
--pn-raise: #182a2e;
--pn-raise-2: #203439;
--pn-line: #2a4044;
--pn-track: #243a3f;
--pn-bar: #46606a;
--pn-text: #e4ecea;
--pn-dim: #9aaeaa;
--pn-wash-a: #6ee7b721;
--pn-wash-b: #67e8f91c;
--pn-edge: #ffffff0a;
--glass: #1a2d3199;
--glass-line: #ffffff1f;
--glass-highlight: #ffffff1a;
/* The anchor, inverted: on Night it is the lightest surface on the
page rather than the darkest. See the note in :root. */
--ink-bg: #213b41;
--ink-lift: #284650;
--ink-raise: #30525a;
--ink-line: #3a5e66;
--ink-track: #172a2e;
--ink-text: #eef5f3;
--ink-dim: #b0c4c0;
--ink-fault: oklch(0.704 0.191 22.216);
--ink-warn: oklch(0.8 0.16 80);
--mode-live: oklch(0.723 0.014 214.4);
--mode-sandbox: #fbbf24;
--mode-live-ink: #cfdad8;
--mode-sandbox-ink: #fcd34d;
--line-l1: #d09a66;
--line-l2: #eef1f3;
--line-l3: #8a949b;
--line-l1-ink: #1b1206;
--line-l2-ink: #111827;
--line-l3-ink: #101a1c;
--price-cheap: oklch(0.75 0.16 152);
--price-dear: oklch(0.74 0.17 30);
--kind-ac: oklch(0.78 0.11 240);
--kind-dc: oklch(0.78 0.13 45);
--kind-ac-ink: #71c1f7;
--kind-dc-ink: #fc9b6f;
--resource-environment: oklch(0.78 0.13 278);
--resource-location: oklch(0.78 0.11 225);
--resource-circuit: oklch(0.78 0.15 295);
--resource-charging-station: oklch(0.78 0.13 163);
--resource-outlet: oklch(0.78 0.12 185);
--resource-transaction: oklch(0.8 0.13 75);
--resource-analytics: oklch(0.78 0.14 255);
--resource-simulator: oklch(0.78 0.15 330);
/* The sky's artwork, by night: the ground the brand is drawn on. See the
`:root` block for what each is. */
--sky-ground: #060a14;
--sky-nebula-one: #10b98133;
--sky-nebula-two: #22d3ee1f;
--sky-nebula-three: #6366f11f;
--sky-stars: block;
--sky-line: #a7f3d029;
--sky-star: #d1fae5;
--sky-star-glow: #a7f3d0;
--sky-crown: #ecfdf5;
--sky-wake-glow: #a7f3d0;
--sky-wake-core: #ecfdf5;
--sky-ion: #d1fae5;
--sky-horizon: rgba(52, 211, 153, 0.22);
--sky-hairline: #6ee7b780;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 45%);
--shadow-md: 0 2px 6px oklch(0 0 0 / 45%), 0 1px 2px oklch(0 0 0 / 35%);
--shadow-lg: 0 8px 24px oklch(0 0 0 / 50%), 0 2px 6px oklch(0 0 0 / 35%);
}
/* Case 2, light. This block is what makes the toggle work in both
directions: without it, asking for light inside a dark-mode operating
system re-states nothing and the media query's values stay in force. */
[data-theme="light"] {
--field: oklch(1 0 0);
--field-line: oklch(0.925 0.005 214.3);
--field-hover: oklch(0.963 0.002 197.1);
--logo-stage: #f5f8f7;
--logo-ink: #101a1c;
color-scheme: light;
--background: oklch(1 0 0);
--foreground: oklch(0.148 0.004 228.8);
--muted-foreground: oklch(0.5 0.02 213.5);
--hairline: oklch(0.148 0.004 228.8 / 12%);
--raised: oklch(0.148 0.004 228.8 / 4%);
--status-ok: oklch(0.51 0.16 152);
--status-busy: oklch(0.54 0.19 258);
--status-warn: oklch(0.54 0.16 70);
--status-fault: oklch(0.552 0.245 27.325);
--status-unknown: oklch(0.5 0.02 213.5);
--primary: oklch(0.508 0.118 165.612);
--primary-foreground: oklch(0.979 0.021 166.113);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--muted: oklch(0.963 0.002 197.1);
--border: oklch(0.925 0.005 214.3);
--ring: oklch(0.723 0.014 214.4);
--brand-from: #059669;
--brand-to: #0891b2;
--brand-star: #047857;
--brand-ion: #047857;
--pn-bg: #eff3f1;
--pn-raise: #ffffff;
--pn-raise-2: #f4f7f6;
--pn-line: #dde5e2;
--pn-track: #e6ecea;
--pn-bar: #a9bcb8;
--pn-text: #101a1c;
--pn-dim: #5a6b68;
--pn-wash-a: #05966917;
--pn-wash-b: #0891b217;
--pn-edge: #ffffff00;
--glass: #ffffffa3;
--glass-line: #ffffffcc;
--glass-highlight: #ffffffe6;
--ink-bg: #0d1a1c;
--ink-lift: #132427;
--ink-raise: #1b3034;
--ink-line: #263d41;
--ink-track: #1b3034;
--ink-text: #e6efec;
--ink-dim: #9bb1ac;
--ink-fault: oklch(0.704 0.191 22.216);
--ink-warn: oklch(0.8 0.16 80);
--mode-live: oklch(0.5 0.02 213.5);
--mode-sandbox: #d97706;
/* The same two, as ink: for the mode's name written on its own tint
(the selected mode switch, a mode tag). A mid-tone cannot clear 4.5:1
on a tint of itself, so the text takes a deeper step of the same hue
and the border and tint keep the mode colour. */
--mode-live-ink: #2e3b39;
--mode-sandbox-ink: #7c3a06;
--line-l1: #8a5a2b;
--line-l2: #24292e;
--line-l3: #8b949b;
/* Text on a line's own colour, when a chip wears it as a ground. */
--line-l1-ink: #ffffff;
--line-l2-ink: #ffffff;
--line-l3-ink: #101a1c;
--price-cheap: oklch(0.51 0.16 152);
--price-dear: oklch(0.55 0.19 30);
/* The two kinds of current a tariff can price apart. Blue for AC and a
warm orange for DC, their own tokens rather than the location or fault
hue: a DC price is not a warning, and an AC price is not a place. */
--kind-ac: oklch(0.5 0.13 240);
--kind-dc: oklch(0.47 0.15 45);
/* As ink, for the kind's name on its own tint laid over a tinted row --
where AC measured 4.37:1. 4.91 each on the darkest row tint. */
--kind-ac-ink: #00558f;
--kind-dc-ink: #942e00;
--resource-environment: oklch(0.5 0.15 278);
--resource-location: oklch(0.52 0.11 225);
--resource-circuit: oklch(0.51 0.17 295);
--resource-charging-station: oklch(0.51 0.13 163);
--resource-outlet: oklch(0.51 0.12 185);
--resource-transaction: oklch(0.47 0.13 75);
--resource-analytics: oklch(0.51 0.16 255);
--resource-simulator: oklch(0.54 0.17 330);
/* The sky's artwork, by day. `Scene` follows the theme like every other
component; what it draws -- the bolt, the comet, the ion, the nebulae,
the horizon -- is the same on both grounds, in these colours. The
stars are the one thing with nowhere to go on a pale ground, so a
token carries their `display`. The star layers' own gradients stay in
`scene.css`, where the literal-colour exemption for artwork lives. */
--sky-ground: linear-gradient(to bottom, #f0fdfa, #ffffff 45%, #f8fafc);
--sky-nebula-one: #10b98126;
--sky-nebula-two: #22d3ee1f;
--sky-nebula-three: #6366f114;
--sky-stars: none;
--sky-line: #04785733;
--sky-star: #047857;
--sky-star-glow: #6ee7b7;
--sky-crown: #065f46;
--sky-wake-glow: #34d399;
--sky-wake-core: #047857;
--sky-ion: #047857;
--sky-horizon: rgba(52, 211, 153, 0.14);
--sky-hairline: #04785766;
--shadow-sm: 0 1px 2px oklch(0.148 0.004 228.8 / 8%);
--shadow-md:
0 4px 16px oklch(0.148 0.004 228.8 / 6%),
0 1px 3px oklch(0.148 0.004 228.8 / 4%);
--shadow-lg:
0 8px 24px oklch(0.148 0.004 228.8 / 12%),
0 2px 6px oklch(0.148 0.004 228.8 / 6%);
}
/* base.css -- Type, icons, and the plain surfaces and layouts everything else stands on. */
/* --- status tones ------------------------------------------------------- */
/* Each status tone, mapped once: an element that says `data-tone` with a
status carries its colour as --tone, and its parts read var(--tone)
rather than every component writing out five rules of its own. A
component that needs more than one colour from a tone (a tint, a
border) still says so per tone. */
[data-tone="status-ok"] {
--tone: var(--status-ok);
}
[data-tone="status-busy"] {
--tone: var(--status-busy);
}
[data-tone="status-warn"] {
--tone: var(--status-warn);
}
[data-tone="status-fault"] {
--tone: var(--status-fault);
}
[data-tone="status-unknown"] {
--tone: var(--status-unknown);
}
/* Component styles.
*
* Every value here resolves through a token from tokens.css. A literal
* colour in this file is a bug, and `//libs/ui:token_layer_test` fails on
* one rather than leaving it to review.
*
* Components are addressed by class and varied by data attribute
* (`[data-tone]`, `[data-size]`) rather than by a class per variant. That
* is what lets `status.rs` emit a tone as a token name and nothing else --
* the Rust side never assembles a class string, so it cannot assemble a
* wrong one.
*/
/* --- typography -------------------------------------------------------- */
.heading {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
color: var(--foreground);
letter-spacing: -0.01em;
text-wrap: balance;
}
.text {
margin: 0;
font-family: var(--font-sans);
color: var(--foreground);
}
.text[data-tone="muted"] {
color: var(--muted-foreground);
}
/* For text inside something that has already chosen a colour -- a Button in
any variant, a badge. Without it `.text`'s own colour wins on specificity
and the container's variant silently does nothing to its label. */
.text[data-tone="warn"] {
color: color-mix(in oklab, var(--status-warn) 55%, var(--pn-text));
}
.text[data-tone="inherit"] {
color: inherit;
}
/* Inline text inside a heading is part of the heading: it takes the
heading's face, size and weight rather than `.text`'s own, so a toned
word in a title -- the brand-gradient "easy." on the sign-in screen --
is a word in the title and not a caption beside it. */
.heading > .text[data-size] {
font: inherit;
letter-spacing: inherit;
}
/* The brand gradient as ink. The same device as `.error-scene__accent`
and the wordmark's "ion"; a word, never a sentence. */
.text[data-tone="brand"] {
background-image: linear-gradient(
to right,
var(--brand-from),
var(--brand-to)
);
background-clip: text;
color: transparent;
}
.text[data-weight="regular"] {
font-weight: var(--weight-regular);
}
.text[data-weight="medium"] {
font-weight: var(--weight-medium);
}
.text[data-weight="semibold"] {
font-weight: var(--weight-semibold);
}
/* The scale applies to both, which is what makes level and size
independent: a heading at `sm` is the same size as body text at `sm`. */
.heading[data-size="xs"],
.text[data-mono="true"] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.text[data-breaks="true"] {
overflow-wrap: anywhere;
}
.text[data-size="xs"] {
font-size: var(--text-xs);
line-height: var(--text-xs-leading);
}
.heading[data-size="sm"],
.text[data-size="sm"] {
font-size: var(--text-sm);
line-height: var(--text-sm-leading);
}
.heading[data-size="base"],
.text[data-size="base"] {
font-size: var(--text-base);
line-height: var(--text-base-leading);
}
.heading[data-size="lg"],
.text[data-size="lg"] {
font-size: var(--text-lg);
line-height: var(--text-lg-leading);
}
.heading[data-size="xl"],
.text[data-size="xl"] {
font-size: var(--text-xl);
line-height: var(--text-xl-leading);
}
.heading[data-size="2xl"],
.text[data-size="2xl"] {
font-size: var(--text-2xl);
line-height: var(--text-2xl-leading);
}
.heading[data-size="3xl"],
.text[data-size="3xl"] {
font-size: var(--text-3xl);
line-height: var(--text-3xl-leading);
}
.heading[data-size="4xl"],
.text[data-size="4xl"] {
font-size: var(--text-4xl);
line-height: var(--text-4xl-leading);
}
/* --- divider ------------------------------------------------------------ */
/* Plain, it is an `
`: already a separator to assistive technology, so
there is no ARIA here to get wrong. The browser's own border and margins
are not wanted. */
.divider {
width: 100%;
height: 1px;
margin: 0;
border: 0;
background: var(--border);
}
/* Labelled, it is a row -- rule, word, rule -- so the height above has to
go back to auto or the word is clipped to a hairline. */
.divider--labelled {
display: flex;
align-items: center;
gap: var(--gap-inline);
height: auto;
background: none;
}
.divider__rule {
flex: 1;
height: 1px;
background: var(--border);
}
/* --- skeleton ----------------------------------------------------------- */
/* Heights are the type scale's own line heights rather than round numbers:
a placeholder that is not the height of the text replacing it makes the
page jump on load, which is the one thing a skeleton exists to prevent. */
.skeleton {
border-radius: var(--radius-md);
background: var(--muted);
}
.skeleton[data-shape="text"] {
height: var(--text-sm-leading);
}
.skeleton[data-shape="heading"] {
height: var(--text-xl-leading);
}
/* A control is the default `Button` height, which is also `.field__input`'s
-- so a form waiting does not resize when it arrives. */
.skeleton[data-shape="control"] {
height: 2rem;
}
.skeleton[data-shape="block"] {
height: 8rem;
}
/* Fractions rather than the console's fixed `w-56`/`w-32`: a fixed width is
wrong in any container narrower than itself. Varying them is the point --
a stack of identical bars reads as a table, and text does not end in the
same place twice. */
.skeleton[data-width="full"] {
width: 100%;
}
.skeleton[data-width="long"] {
width: 75%;
}
.skeleton[data-width="medium"] {
width: 55%;
}
.skeleton[data-width="short"] {
width: 30%;
}
/* Held back, then faded in: an answer that arrives inside
`--skeleton-delay` never shows a placeholder at all, which is most of
them. The box is laid out from the first frame either way -- only its
paint waits -- so nothing moves when it appears. The pulse starts once
the fade has finished, so the two never fight over `opacity`. */
.skeleton {
animation: skeleton-appear var(--motion-base) var(--ease-out) var(--skeleton-delay) both;
}
@media (prefers-reduced-motion: no-preference) {
.skeleton {
animation:
skeleton-appear var(--motion-base) var(--ease-out) var(--skeleton-delay) both,
skeleton-pulse 1.8s ease-in-out calc(var(--skeleton-delay) + var(--motion-base)) infinite;
}
}
@keyframes skeleton-appear {
from {
opacity: 0;
}
}
@keyframes skeleton-pulse {
50% {
opacity: 0.5;
}
}
/* --- form --------------------------------------------------------------- */
/* The `