@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/src/styles/theme.css

@@ -0,0 +1,696 @@
+/*
+ * Tokens-only stylesheet: every design token (colours, radius, fonts,
+ * animations, layout variables), the `dark` custom variant, the keyframes the
+ * animation tokens use, the @source of the library's compiled components, and
+ * the one component default every bordered component relies on (border
+ * colour). Nothing else: no `@import "tailwindcss"`, no Preflight reset, no
+ * page or element styles.
+ *
+ * For apps that bring their own Tailwind setup (or legacy CSS a global reset
+ * would break): import Tailwind yourself, then this file.
+ *
+ *   @import "tailwindcss";
+ *   @import "@espressif/dashboard-ui-components/theme.css";
+ *
+ * `@espressif/dashboard-ui-components/styles` (globals.css) is this file plus
+ * Tailwind, the base styles and the browser-autofill rules.
+ */
+@import "./colors.css";
+@import "./style-axes.css";
+
+@source "../../dist";
+/* Utilities the components generated before 1.12 and no longer use since
+   their colours became tokens. Kept so the compiled stylesheet only ever
+   grows within 1.x: an app may rely on them without generating them itself. */
+@source inline("text-white/60 text-white/80 [&>svg]:text-white");
+/* Tag's `success` name chip moved from /15 to /20; the old utility stays. */
+@source inline("bg-success/15");
+/* Likewise for the radius and shadow literals the style-axis readers
+   replaced (Input add-ons; Card and the xl / 3xl surfaces; the 2xl overlays,
+   the DateRangePicker panel halves and the chart tooltip shadow; List rows and their height). */
+@source inline("rounded-s-lg rounded-e-lg rounded-xl rounded-3xl rounded-2xl rounded-l-2xl rounded-r-2xl shadow-xl rounded-[10px] min-h-[var(--menu-item-height)]");
+/* Calendar day cells and range ends, now on the item role. */
+@source inline("rounded-l-md rounded-r-md data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md");
+/* PageContainer's elevated header, now on the surface elevation role. */
+@source inline("shadow-md md:shadow-md");
+/* The Sheet and Dialog scrims, now on the overlay scrim token (1.12). */
+@source inline("bg-black/50 bg-black/80");
+/* The NavBar details panel's shadow, now on the navbar elevation token (1.12). */
+@source inline("shadow-lg");
+/* Footer heights and the AppLogo cap before the shell / workspace-layout
+   token names (1.12). */
+@source inline("h-[var(--espd-footer-height)] h-[var(--espd-hidden-footer-height)] max-h-[calc(var(--espd-header-height)-16px)]");
+
+@theme {
+  /* Radius */
+  --radius-lg: 0.5rem;
+  --radius-md: calc(0.5rem - 2px);
+  --radius-sm: calc(0.5rem - 4px);
+
+  /* Default font stack. The library ships no font binaries — consumers can
+     override --font-sans to supply their own typeface. */
+  --font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial,
+    "PingFang SC", "Microsoft YaHei", 黑体, sans-serif;
+
+  /* Monospace stack for code, logs and identifiers (CodeEditor,
+     MonospaceContent, MarkdownContent code, chart tooltips — all `font-mono`).
+     Declared here so it is a library token like --font-sans; the value is
+     Tailwind's own default, so nothing changes until a consumer overrides it. */
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  /* Animations */
+  --animate-underline-slide: underline-slide 1s ease-in-out;
+  --animate-collapsible-down: collapsible-down 0.3s ease-out;
+  --animate-collapsible-up: collapsible-up 0.3s ease-out;
+  --animate-avatar-ring: avatar-ring 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  /* One expanding ring that fades out — a "this lit up" pulse on a mark. */
+  --animate-espd-ripple: espd-ripple 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+  /* One light sweep across text that has just settled (a counter landing on
+     its value). Pair with `text-shine`, which paints the band it moves. */
+  --animate-shine: shine 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
+  /* Entrances for something appearing in place: a floating control popping
+     in with a small overshoot, a side panel sliding in from the start edge,
+     and items rising into a list (stagger them with delay-*). Also the
+     fallbacks where a view transition (view-transition-morph / -glide) is
+     unsupported. Wrap them in motion-safe: at the call site. */
+  --animate-pop-in: pop-in 0.45s var(--ease-spring) both;
+  --animate-slide-in-start: slide-in-start 0.45s var(--ease-emphasized) both;
+  --animate-rise-in: rise-in 0.4s var(--ease-emphasized) both;
+  /* A slow, endless turn for decoration in the background (a faint logo
+     ring behind a banner). Wrap it in motion-safe: at the call site. */
+  --animate-spin-slow: espd-spin 90s linear infinite;
+  /* One ring bursting out of a mark and fading (a panel opening from it).
+     Bigger and quicker than espd-ripple. */
+  --animate-burst: espd-burst 0.6s var(--ease-emphasized);
+  /* A toggle being switched ON, celebrated once: a heart squashes, springs up
+     bigger with a tilt and settles (a like); a bookmark hops, lands with a
+     squash and bounces (a save); six dots in the brand colours burst outward
+     from one centred element (`animate-sparkle` on a size-1 span — pair it
+     with `animate-espd-ripple` for the ring). Switching OFF plays nothing.
+     Wrap them in motion-safe: at the call site. */
+  --animate-heart-pop: espd-heart-pop 0.6s var(--ease-overshoot) both;
+  --animate-bookmark-drop: espd-bookmark-drop 0.6s var(--ease-emphasized) both;
+  --animate-sparkle: espd-sparkle 0.6s var(--ease-emphasized) both;
+  /* A soft, endless throb for a mark that says "under way" (StepTabs' in
+     progress dot): every 2s it swells a little (`animate-throb`, on the
+     mark) while a halo of the same shape and colour rings out from it and
+     fades (`animate-throb-ring`, on a copy behind it, such as a `before:`
+     with `bg-current`). Both run 2s, so started together they stay in step.
+     Transform and opacity only: no reflow, smooth everywhere. Slow on
+     purpose, so it can run all day beside text. Wrap them in motion-safe:
+     at the call site. */
+  --animate-throb: espd-throb 2s ease-out infinite;
+  --animate-throb-ring: espd-throb-ring 2s ease-out infinite;
+
+  /* Easings beyond Tailwind's three. `spring` overshoots and settles (a mark
+     scaling up when it lights); `emphasized` is a fast-out, long-settle curve
+     for something drawing in. */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
+  /* A bigger overshoot than spring, for small things popping into place
+     (a chip, a button swinging in). */
+  --ease-overshoot: cubic-bezier(0.34, 1.8, 0.64, 1);
+
+  /* Clearance under a sticky NavBar: its height plus the gap it floats at
+     once it morphs into a pill (12px), plus 12px of air. `top-below-navbar`
+     keeps a sticky side panel clear of the bar; `scroll-mt-below-navbar`
+     keeps an anchor target from landing under it. Follows
+     --espd-navbar-height when an app changes it. */
+  --spacing-below-navbar: calc(var(--espd-navbar-height) + 1.5rem);
+
+  /* A soft, tight halo with no offset, for the `glow` variant. Its colour is
+     the shadow-colour utility beside it (`shadow-glow shadow-primary/45`). */
+  --shadow-glow: 0 0 15px -5.5px rgb(0 0 0 / 0.25);
+
+  /* A wide, soft halo with no offset, for something that floats over the page
+     on every side (a composer docked at the bottom of a window, where a shadow
+     cast downward would be hidden). Colour it like the glow, with the
+     shadow-colour utility beside it (`shadow-float shadow-foreground/10`). */
+  --shadow-float: 0 0 48px -8px rgb(0 0 0 / 0.12);
+
+  /* The walls of something recessed into the surface (StepTabs' tray, on
+     `bg-recessed`): an inner shadow under the top edge, a softer one inside
+     it, a faint rim, and a light lip along the bottom edge outside, where the
+     surface catches the light. Per theme, so it is the value of
+     --espd-shadow-recessed (below); Tailwind writes a shadow token's value into
+     its utility, so a `.dark` override of this token itself would not apply. */
+  --shadow-recessed: var(--espd-shadow-recessed);
+
+  /* Marketing type: a display headline and the lead paragraph under it. Fluid
+     between a phone and a wide desktop, so one class serves every width. */
+  --text-display: clamp(2.5rem, 7vw, 5.5rem);
+  --text-display--line-height: 1.04;
+  --text-display--letter-spacing: -0.04em;
+  --text-display--font-weight: 800;
+  --text-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
+  --text-lead--line-height: 1.6;
+}
+
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes avatar-ring {
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.45;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0.375rem currentColor;
+    opacity: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    grid-template-rows: 0fr;
+  }
+  to {
+    grid-template-rows: 1fr;
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    grid-template-rows: 1fr;
+  }
+  to {
+    grid-template-rows: 0fr;
+  }
+}
+
+/* MinimalWorkspaceLayout: what appears when the rail expands. Each animates
+   *from* hidden to the element's own styles. */
+@keyframes espd-pop-in {
+  from {
+    opacity: 0;
+    transform: translateX(-0.75rem) scale(0.96);
+    filter: blur(2px);
+  }
+}
+
+@keyframes espd-icon-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.4) rotate(-20deg);
+  }
+}
+
+@keyframes espd-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes underline-slide {
+  0% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  50% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  50.1% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  100% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+}
+
+@keyframes espd-ripple {
+  from {
+    opacity: 0.6;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slide-in-start {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes espd-burst {
+  from {
+    opacity: 0.7;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 0;
+    transform: scale(3.4);
+  }
+}
+
+@keyframes espd-heart-pop {
+  0% {
+    transform: none;
+  }
+  25% {
+    transform: scale(0.72, 0.8) rotate(-8deg);
+  }
+  55% {
+    transform: scale(1.32) rotate(10deg);
+  }
+  80% {
+    transform: scale(0.94) rotate(-2deg);
+  }
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes espd-bookmark-drop {
+  0% {
+    transform: none;
+  }
+  30% {
+    transform: translateY(-35%) scale(1.06);
+  }
+  55% {
+    transform: translateY(0) scale(1.18, 0.78);
+  }
+  75% {
+    transform: translateY(-12%) scale(0.96, 1.04);
+  }
+  100% {
+    transform: none;
+  }
+}
+
+/* Six dots, 60 degrees apart, flying 14px out from the centre of a small
+   dot (size-1) and fading — sized for a 16-20px icon. Brand gradient colours
+   plus amber, so it follows an app's logo colours. */
+@keyframes espd-sparkle {
+  0% {
+    opacity: 1;
+    box-shadow:
+      0 0 0 0 var(--color-gradient-start),
+      0 0 0 0 var(--color-gradient-middle),
+      0 0 0 0 var(--color-gradient-end),
+      0 0 0 0 var(--color-warning),
+      0 0 0 0 var(--color-gradient-start),
+      0 0 0 0 var(--color-gradient-end);
+  }
+  100% {
+    opacity: 0;
+    box-shadow:
+      0 -14px 0 -0.5px var(--color-gradient-start),
+      12px -7px 0 -0.5px var(--color-gradient-middle),
+      12px 7px 0 -0.5px var(--color-gradient-end),
+      0 14px 0 -0.5px var(--color-warning),
+      -12px 7px 0 -0.5px var(--color-gradient-start),
+      -12px -7px 0 -0.5px var(--color-gradient-end);
+  }
+}
+
+@keyframes espd-throb {
+  0%,
+  70%,
+  100% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.3);
+  }
+}
+
+@keyframes espd-throb-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  70%,
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+
+@keyframes espd-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes shine {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Text painted by a band of the primary colour that `animate-shine` sweeps
+   across once. At rest (either end of the sweep) it reads as plain
+   foreground text, so it is safe without the animation too. */
+@utility text-shine {
+  background-image: linear-gradient(
+    100deg,
+    var(--color-foreground) 40%,
+    var(--color-primary) 50%,
+    var(--color-foreground) 60%
+  );
+  background-size: 300% 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+/* Text filled with the brand gradient, start → middle → end left to right
+   (`--color-gradient-*`). It wraps with the text, line by line. */
+@utility text-gradient {
+  background-image: linear-gradient(
+    90deg,
+    var(--color-gradient-start),
+    var(--color-gradient-middle) 50%,
+    var(--color-gradient-end)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+/* Transition a line drawing in and fading (an SVG path with `pathLength` and
+   a dash): only the dash offset and opacity, so a path whose `d` follows the
+   pointer redraws immediately instead of easing behind it. Takes the usual
+   duration-*, ease-* and delay-* utilities. */
+@utility transition-draw {
+  transition-property: stroke-dashoffset, opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+
+/* A circular reveal: a layer clipped to nothing at its centre
+   (`clip-circle-closed`) that opens to cover its box (`clip-circle-open`),
+   e.g. a detail panel opening over a card on hover. `transition-clip`
+   animates the clip and the visibility together, so a closed layer is also
+   hidden from pointers and focus; pair it with `invisible` / `visible` and the
+   usual duration-*, ease-* and delay-* utilities. */
+@utility clip-circle-closed {
+  clip-path: circle(0% at 50% 50%);
+}
+
+@utility clip-circle-open {
+  clip-path: circle(75% at 50% 50%);
+}
+
+@utility transition-clip {
+  transition-property: clip-path, visibility;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+
+/* View transitions (run one with `startViewTransition` from /utils).
+   view-transition-morph: the ONE element on screen at a time that turns into
+   another (a side panel collapsing into a floating button) — give both the
+   class; they must never be on screen together. It is drawn above everything
+   else during the morph, so it never slides behind the content it crosses.
+   view-transition-glide: each element of a set (cards in a grid) moves to its
+   new place on its own, with no per-element name to invent. Inert outside a
+   view transition. */
+@utility view-transition-morph {
+  view-transition-name: espd-morph;
+}
+
+@utility view-transition-glide {
+  view-transition-name: match-element;
+  view-transition-class: espd-glide;
+}
+
+::view-transition-group(espd-morph) {
+  z-index: 100;
+  animation-duration: 0.6s;
+  animation-timing-function: var(--ease-spring);
+}
+
+::view-transition-group(*.espd-glide) {
+  animation-duration: 0.5s;
+  animation-timing-function: var(--ease-spring);
+}
+
+/* A scrolling row with no visible scrollbar (a swipeable chip row with its
+   own arrow buttons). Still scrollable by touch, wheel and keyboard. */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* A scrolling row whose scrollbar is thin and shows only while the pointer
+   is over it or focus is inside it (a row of filter chips that runs past the
+   edge). The track keeps its space when hidden, so nothing shifts on hover.
+   Standard properties for Chromium and Firefox, where the thumb fades in and
+   out; the WebKit pseudo-elements for Safari, which ignores them and cannot
+   animate a scrollbar, so it shows and hides at once. */
+@utility scrollbar-hover {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.2s ease-out;
+  &:hover,
+  &:focus-within {
+    scrollbar-color: color-mix(in oklab, var(--color-foreground) 25%, transparent) transparent;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: transparent;
+  }
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-foreground) 25%, transparent);
+  }
+}
+
+:root {
+  --espd-sidebar-width: 288px;
+
+  /* `shadow-recessed`: see --shadow-recessed. */
+  --espd-shadow-recessed:
+    inset 0 1px 1.5px rgb(0 0 0 / 0.045),
+    inset 0 2px 4px rgb(0 0 0 / 0.02),
+    inset 0 0 0 1px rgb(0 0 0 / 0.03),
+    0 1px 0 rgb(255 255 255 / 0.9);
+  --espd-sidebar-width-collapsed: 56px;
+  --espd-sidebar-width-mobile: 18rem;
+
+  /* MinimalWorkspaceLayout: header-less shell with an icon rail. Tokens set
+     to `initial` are unset: the layout falls back to the value named beside
+     each (read where it is used, so a `.dark` subtree still switches). */
+  --espd-minimal-workspace-layout-height: 100dvh;
+  --espd-minimal-workspace-layout-sidebar-width: initial; /* --espd-sidebar-width */
+  --espd-minimal-workspace-layout-sidebar-width-collapsed: 3.5rem;
+  --espd-minimal-workspace-layout-logo-height: 3.5rem;
+  --espd-minimal-workspace-layout-logo-padding: 0.75rem;
+  --espd-minimal-workspace-layout-sidebar-background: initial; /* --color-background */
+  --espd-minimal-workspace-layout-sidebar-background-expanded: initial; /* the one above */
+  --espd-minimal-workspace-layout-sidebar-foreground: initial; /* --color-foreground */
+  --espd-minimal-workspace-layout-sidebar-accent: initial; /* surface mixed 7% towards --color-foreground */
+  --espd-minimal-workspace-layout-sidebar-accent-foreground: initial; /* --color-foreground */
+  --espd-minimal-workspace-layout-sidebar-border-color: initial; /* surface mixed 5% towards --color-foreground */
+  --espd-minimal-workspace-layout-sidebar-elevation: initial; /* wide right-hand shadow, surface mixed 15% towards black at 45% opacity */
+  --espd-minimal-workspace-layout-content-background: initial; /* --color-background */
+  --espd-minimal-workspace-layout-top-right-offset-x: 1rem;
+  --espd-minimal-workspace-layout-top-right-offset-y: 0.75rem;
+  --espd-minimal-workspace-layout-duration: 450ms;
+  --espd-minimal-workspace-layout-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  /* With `sidebarConfig.hideWhenCollapsed`: the strip shown when the left
+     edge of the content is hovered, and the shadow of the sidebar while it
+     peeks over the content. */
+  --espd-minimal-workspace-layout-edge-color: initial; /* --color-primary */
+  --espd-minimal-workspace-layout-edge-width: 3px;
+  /* The zone that reacts, wider than the strip it draws: the strip sits at its left. */
+  --espd-minimal-workspace-layout-edge-hit-width: 12px;
+  --espd-minimal-workspace-layout-sidebar-overlay-elevation: initial; /* wide shadow, surface mixed 20% towards black at 55% opacity */
+
+  /* Shell and WorkspaceLayout heights. Components read the new names
+     (--espd-shell-header-height, --espd-workspace-layout-footer-height,
+     --espd-workspace-layout-hidden-footer-height), which are not declared
+     so they fall back to these deprecated defaults; an app may override
+     either name. The deprecated names go in 2.0. */
+  --espd-header-height: 3.125rem;
+  --espd-navbar-height: 4rem;
+  --espd-banner-height: 0rem;
+  --espd-footer-height: 1.5rem;
+  --espd-hidden-footer-height: 0.75rem;
+
+  --espd-floating-window-offset-left: 0px;
+  --espd-floating-window-offset-right: 0px;
+  --espd-floating-window-offset-top: var(--espd-header-height);
+  --espd-floating-window-offset-bottom: var(--espd-footer-height);
+
+  --menu-item-height: 2.5rem;
+  --spacing: 0.25rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+
+  /** Every sidebar nav row: group labels and menu item labels share one scale. */
+  --espd-sidebar-item-font-size: 0.875rem;
+  /** Collapsed-sidebar flyout: group title row. Matches the rows above by default;
+      raise it if you want the flyout title to stand out from its submenu items. */
+  --espd-sidebar-flyout-group-label-font-size: 0.875rem;
+
+  /* ─── Semantic tokens beyond colour ───
+     Each default reproduces the value the components used before it existed,
+     so nothing changes until an app overrides one. See docs/token-audit.md. */
+
+  /* Control density: heights shared by buttons, inputs, selects and toggles. */
+  --espd-control-height-sm: calc(var(--spacing) * 8);
+  --espd-control-height-md: calc(var(--spacing) * 9);
+  --espd-control-height-lg: calc(var(--spacing) * 10);
+  /* Horizontal padding of buttons per size. */
+  --espd-button-padding-x-sm: calc(var(--spacing) * 3);
+  --espd-button-padding-x-md: calc(var(--spacing) * 4);
+  --espd-button-padding-x-lg: calc(var(--spacing) * 8);
+  /* Table head height and cell padding; sidebar row heights (default and
+     `sm`). List rows read --espd-item-height, falling back to
+     --menu-item-height, so it is not declared here. */
+  --espd-table-head-height: calc(var(--spacing) * 10);
+  --espd-table-cell-padding: calc(var(--spacing) * 2);
+  --espd-sidebar-row-height: calc(var(--spacing) * 8);
+  --espd-sidebar-row-height-sm: calc(var(--spacing) * 7);
+  /* Gaps: between a form field's label, control and message (FormItem), and
+     between a dialog's header, body and footer (DialogContent). */
+  --espd-gap-field: calc(var(--spacing) * 2);
+  --espd-gap-stack: calc(var(--spacing) * 4);
+
+  /* Motion: transition durations. */
+  --espd-duration-fast: 150ms;
+  --espd-duration-normal: 200ms;
+  --espd-duration-slow: 300ms;
+
+  /* The scrim behind a modal Dialog or Sheet: its colour, and how much it
+     blurs the page under it. `initial` means unset, as for the style-axis
+     tokens below: each scrim keeps its own (Sheet and the animated Dialog
+     black at 50%, /core's Dialog at 80%, no blur). A dark theme, whose page
+     is already near-black, wants a deeper scrim or a blur for the panel to
+     stand out. */
+  --espd-overlay-scrim: initial;
+  --espd-overlay-blur: initial;
+  /* How much the page under an open NavBar details panel is blurred. Falls
+     back to --espd-overlay-blur, then none: the dimmed page stays sharp unless
+     a theme asks for the panel to stand further out from it. */
+  --espd-navbar-backdrop-blur: initial;
+
+  /* Hover / keyboard-focus ring around buttons. */
+  --espd-ring-width: 2px;
+  --espd-ring-offset: 2px;
+
+  /* Text and icons on a solid surface of an arbitrary (non-preset) colour, and
+     on the destructive copy button. */
+  --espd-on-solid-foreground: #fff;
+
+  /* Style-axis role tokens. `initial` means unset: every reader falls back to
+     its own current radius, border width or shadow, so declaring them changes
+     nothing. Set one (here, on any ancestor, or with StyleScope) to give that
+     role one value everywhere below it. */
+  --espd-radius-control: initial;
+  --espd-border-width-control: initial;
+  --espd-elevation-control: initial;
+  --espd-radius-surface: initial;
+  --espd-border-width-surface: initial;
+  --espd-elevation-surface: initial;
+  --espd-radius-overlay: initial;
+  --espd-elevation-overlay: initial;
+  /* The floating NavBar pill and the details panel hanging from any NavBar:
+     falls back to the overlay elevation, then the bar's own shadow. A dark
+     theme can give the bar a glow of its own, so it reads as placed on the
+     page rather than part of it, without changing every overlay. */
+  --espd-elevation-navbar: initial;
+  --espd-radius-pill: initial;
+  --espd-radius-item: initial;
+}
+
+.dark,
+[data-theme="dark"] {
+  /* A dark surface is near black, so shadows alone cannot sink anything into
+     it: the hollow is drawn by its light edges — a faint light rim and a lip
+     below — with a crisp dark line under the top edge and a deeper shadow.
+     The rim is listed FIRST, so it is painted over that dark line: under it,
+     the top edge vanished into the bar while the sides kept theirs. The extra
+     top line lifts it back to the sides' strength over the black beneath. */
+  --espd-shadow-recessed:
+    inset 0 1px 0 rgb(255 255 255 / 0.04),
+    inset 0 0 0 1px rgb(255 255 255 / 0.065),
+    inset 0 1.5px 0 rgb(0 0 0 / 0.9),
+    inset 0 2px 6px rgb(0 0 0 / 0.6),
+    0 0.5px 0 rgb(255 255 255 / 0.06);
+  --espd-floating-window-offset-left: 0px;
+  --espd-floating-window-offset-right: 0px;
+  --espd-floating-window-offset-top: var(--espd-header-height);
+  --espd-floating-window-offset-bottom: var(--espd-footer-height);
+}
+
+/* Component default, not a reset: library components draw borders with
+   `border` / `border-b` and rely on them taking the theme's border colour.
+   Must follow Tailwind's Preflight (which sets `border-color: currentColor`),
+   which it does when this file is imported after `tailwindcss`. */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+}
+
+/* Library utility used by its components (PageContainer's skeleton). */
+@layer utilities {
+  .hstack {
+    display: flex;
+    flex-direction: row;
+  }
+}