@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,39 @@
+import { n as e, r as t, t as n } from "./chunks/Icon-CGY1FNXT.js";
+import { Button as r } from "./components/Button/index.js";
+import { ButtonGroup as i } from "./components/ButtonGroup/index.js";
+import { t as a } from "./chunks/RichTextEditor-DRt-kibg.js";
+import { Badge as o } from "./components/Badge/index.js";
+import { Modal as s } from "./components/Modal/index.js";
+import { FieldAffix as c } from "./components/FieldAffix/index.js";
+import { SearchField as l } from "./components/SearchField/index.js";
+import { SortableList as u, SortableListItem as d } from "./components/SortableList/index.js";
+import { EntryPicker as f } from "./components/EntryPicker/index.js";
+import { Field as p } from "./components/Field/index.js";
+import { NumberField as m, NumberRangeField as h } from "./components/NumberField/index.js";
+import { Switch as g } from "./components/Switch/index.js";
+import { TextArea as _, TextField as v } from "./components/TextField/index.js";
+import { n as y, t as b } from "./chunks/EntryEditor-BF808OZR.js";
+import { Board as x, BoardCard as S, BoardColumn as C } from "./components/Board/index.js";
+import { Drawer as w } from "./components/Drawer/index.js";
+import { Avatar as T, AvatarGroup as E } from "./components/Avatar/index.js";
+import { Grid as D, GridItem as O, Stack as k } from "./components/Grid/index.js";
+import { Checkbox as A, ChoiceGroup as j, Radio as M } from "./components/Choice/index.js";
+import { Table as N, TableBody as P, TableCell as F, TableEmpty as I, TableFrame as L, TableHead as R, TableHeaderCell as z, TableRow as B, TableToolbar as V } from "./components/Table/index.js";
+import { Popover as H } from "./components/Popover/index.js";
+import { Menu as U, MenuItem as W, MenuLabel as G, MenuSeparator as K } from "./components/Menu/index.js";
+import { Toast as q, ToastProvider as J, useToast as Y } from "./components/Toast/index.js";
+import { Skeleton as X, SkeletonText as Z } from "./components/Skeleton/index.js";
+import { SideNav as Q, SideNavFooter as $, SideNavHeader as ee, SideNavItem as te, SideNavSection as ne, useSideNavCollapsed as re } from "./components/SideNav/index.js";
+import { TopNav as ie, TopNavItem as ae } from "./components/TopNav/index.js";
+import { SubNav as oe, SubNavButton as se, SubNavItem as ce } from "./components/SubNav/index.js";
+import { CheckboxCard as le, RadioCard as ue, SelectionCardGroup as de } from "./components/SelectionCard/index.js";
+import { Stepper as fe } from "./components/Stepper/index.js";
+import { AssetGrid as pe, AssetGridEmpty as me, AssetTile as he, AssetTileSkeleton as ge } from "./components/AssetGrid/index.js";
+import { ImageCropper as _e, cropRatios as ve, cropToBlob as ye } from "./components/ImageCropper/index.js";
+import { Container as be } from "./components/Container/index.js";
+import { Select as xe } from "./components/Select/index.js";
+import { RangeSlider as Se, Slider as Ce } from "./components/Slider/index.js";
+import { Calendar as we, DateField as Te, DateRangeField as Ee, formatIsoDate as De } from "./components/DatePicker/index.js";
+import { TagsInput as Oe } from "./components/TagsInput/index.js";
+import { Time as ke, formatAbsoluteDate as Ae, formatAbsoluteTime as je, formatRelativeTime as Me } from "./components/Time/index.js";
+export { pe as AssetGrid, me as AssetGridEmpty, he as AssetTile, ge as AssetTileSkeleton, T as Avatar, E as AvatarGroup, o as Badge, x as Board, S as BoardCard, C as BoardColumn, r as Button, i as ButtonGroup, we as Calendar, A as Checkbox, le as CheckboxCard, j as ChoiceGroup, be as Container, Te as DateField, Ee as DateRangeField, w as Drawer, b as EntryEditor, f as EntryPicker, p as Field, c as FieldAffix, D as Grid, O as GridItem, n as Icon, _e as ImageCropper, U as Menu, W as MenuItem, G as MenuLabel, K as MenuSeparator, s as Modal, m as NumberField, h as NumberRangeField, H as Popover, M as Radio, ue as RadioCard, Se as RangeSlider, a as RichTextEditor, l as SearchField, xe as Select, de as SelectionCardGroup, Q as SideNav, $ as SideNavFooter, ee as SideNavHeader, te as SideNavItem, ne as SideNavSection, X as Skeleton, Z as SkeletonText, Ce as Slider, u as SortableList, d as SortableListItem, k as Stack, fe as Stepper, oe as SubNav, se as SubNavButton, ce as SubNavItem, g as Switch, N as Table, P as TableBody, F as TableCell, I as TableEmpty, L as TableFrame, R as TableHead, z as TableHeaderCell, B as TableRow, V as TableToolbar, Oe as TagsInput, _ as TextArea, v as TextField, ke as Time, q as Toast, J as ToastProvider, ie as TopNav, ae as TopNavItem, ve as cropRatios, ye as cropToBlob, Ae as formatAbsoluteDate, je as formatAbsoluteTime, De as formatIsoDate, Me as formatRelativeTime, e as iconNames, t as icons, re as useSideNavCollapsed, Y as useToast, y as validateEntryValues };

package/dist/reset.css

@@ -0,0 +1,15 @@
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  html { -webkit-text-size-adjust: 100%; }
+  body {
+    margin: 0;
+    background: var(--color-canvas);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-body);
+    -webkit-font-smoothing: antialiased;
+  }
+  h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
+  button, input, select, textarea { font: inherit; color: inherit; }
+}

package/dist/reset.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/dist/styles.css

@@ -0,0 +1,40 @@
+@layer reset, tokens, components;
+@import "./tokens.css";
+@import "./components/AssetGrid/style.css";
+@import "./components/Avatar/style.css";
+@import "./components/Badge/style.css";
+@import "./components/Board/style.css";
+@import "./components/Button/style.css";
+@import "./components/ButtonGroup/style.css";
+@import "./components/Choice/style.css";
+@import "./components/Container/style.css";
+@import "./components/DatePicker/style.css";
+@import "./components/Drawer/style.css";
+@import "./components/EntryPicker/style.css";
+@import "./components/EntryEditor/style.css";
+@import "./components/Field/style.css";
+@import "./components/FieldAffix/style.css";
+@import "./components/Grid/style.css";
+@import "./components/Icon/style.css";
+@import "./components/ImageCropper/style.css";
+@import "./components/Menu/style.css";
+@import "./components/Modal/style.css";
+@import "./components/NumberField/style.css";
+@import "./components/Popover/style.css";
+@import "./components/RichTextEditor/style.css";
+@import "./components/SearchField/style.css";
+@import "./components/Select/style.css";
+@import "./components/SelectionCard/style.css";
+@import "./components/SideNav/style.css";
+@import "./components/Skeleton/style.css";
+@import "./components/Slider/style.css";
+@import "./components/SortableList/style.css";
+@import "./components/Stepper/style.css";
+@import "./components/SubNav/style.css";
+@import "./components/Switch/style.css";
+@import "./components/Table/style.css";
+@import "./components/TagsInput/style.css";
+@import "./components/TextField/style.css";
+@import "./components/Time/style.css";
+@import "./components/Toast/style.css";
+@import "./components/TopNav/style.css";

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/dist/tokens.css

@@ -0,0 +1,457 @@
+@layer tokens {
+  /* ─────────────────────────────────────────────────────────────────────────
+   * Scale tokens. Theme-independent. Never redeclared in a theme block.
+   * Radius and spacing use the library's shared pixel and rem scales.
+   * ───────────────────────────────────────────────────────────────────────── */
+  :root {
+    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --font-size-xs: 0.75rem; /* 12 — badges, micro-labels */
+    --font-size-sm: 0.875rem; /* 14 — buttons, secondary cells */
+    --font-size-md: 1rem; /* 16 — body */
+    --font-size-md-lg: 1.0625rem; /* 17 — primary table cell */
+    --font-size-lead: 1.25rem; /* 20 */
+    --font-size-lg: 1.5rem; /* 24 — section titles */
+    --font-size-xl: 2rem; /* 32 — page titles */
+    --font-size-display: 3rem; /* 48 — empty states, marketing only */
+
+    --line-height-tight: 1.15;
+    --line-height-body: 1.5;
+
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-pill: 999px;
+    --field-radius: 4px;
+
+    --field-height-sm: var(--space-8); /* 32 */
+    --field-height-md: var(--space-10); /* 40 */
+    --field-height-lg: var(--space-12); /* 48 */
+    --field-font-size-sm: 0.8125rem; /* 13 */
+    --field-font-size-md: 0.9375rem; /* 15 */
+
+    /* Writing surfaces — the editor's three body heights. */
+    --editor-height-sm: 8rem;
+    --editor-height-md: 14rem;
+    --editor-height-lg: 22rem;
+
+    /* Navigation — one rail width, one bar height, everywhere in the product. */
+    --sidenav-width: 17rem;
+    --sidenav-width-collapsed: 4rem;
+    --nav-item-height: var(--space-10);
+    --topnav-height: 4rem;
+    --subnav-height: var(--space-12);
+    --choice-card-min-width: 15rem;
+
+    /* Stepper — one marker size, one connector weight. */
+    --stepper-marker-size: var(--space-8);
+    --stepper-marker-size-sm: var(--space-6);
+    --stepper-connector-width: var(--control-border-width);
+
+
+    /* Boards — one lane width, so every board in the product lines up. */
+    --board-column-width: 19rem;
+    --board-column-max-height: 34rem;
+    --board-column-min-body: 6rem;
+
+    /* Media library — one tile width everywhere, so grids line up across
+     * pickers, drawers and full pages. The grid auto-fills to the container. */
+    --asset-tile-min-width: 11rem;
+    --asset-tile-gap: var(--space-4);
+    --asset-thumb-aspect: 4 / 3;
+
+    /* Cropper — the stage is a fixed working surface, not a preview. */
+    --cropper-stage-height: 22rem;
+    --cropper-grid-color: rgb(255 255 255 / 28%);
+    --cropper-veil: rgb(0 0 0 / 45%);
+
+    /* Pickers — one popover height everywhere a list floats over the page. */
+    --menu-max-height: 18rem;
+    --calendar-cell-size: 2.25rem;
+
+    /* Sliders — one track, one thumb, in every size of field. */
+    --slider-track-height: 6px;
+    --slider-thumb-size: 20px;
+
+    /* Switch — the only control whose knob moves; the frame never does. */
+    --switch-width: 44px;
+    --switch-height: 24px;
+    --switch-knob-size: 16px;
+
+    /* Entry picker — thumbnail square and the list's working height. */
+    --entry-thumb-size: 3rem;
+    --entry-list-max-height: 24rem;
+
+
+
+
+
+
+    /* Bold layer. The house style lives here — a heavy outer frame, hairline
+     * inner rules, and a solid selection rail. Changing these three values
+     * restyles every collection surface in the product at once. */
+    --frame-width: 3px;
+    --frame-color: var(--color-text);
+    --rule-width: 1px;
+    --rule-color: var(--color-border-muted);
+    --rail-width: 4px;
+    --rail-color: var(--color-primary);
+
+    /* Hard border. Buttons, fields, checkboxes and badges all carry a constant
+     * 2px stroke; state stays on the fill so nothing shifts on interaction.
+     * Deliberately thinner than --frame-width: the container must outrank its
+     * contents. Controls stroke in --control-border-color; badges stroke in
+     * their own tone, so a badge never competes with a button for attention. */
+    --control-border-width: 2px;
+    --control-border-color: var(--color-text);
+    --badge-border-width: 2px;
+
+    --table-head-size: 0.8125rem; /* 13 */
+    --table-head-weight: var(--font-weight-bold);
+    --table-head-tracking: 0.06em;
+    --table-cell-size: var(--font-size-md);
+    --table-cell-primary-size: var(--font-size-md-lg);
+    --table-row-pad-block: var(--space-4);
+    --table-row-pad-inline: var(--space-5);
+
+    --icon-sm: 16px;
+    --icon-md: 20px;
+    --icon-lg: 24px;
+    --icon-stroke: 2.25;
+
+    --scrim: rgb(15 23 42 / 42%);
+    --overlay-radius: var(--radius-xl);
+    --drawer-width: 560px;
+    --drawer-width-wide: 760px;
+    --modal-width: 720px;
+    --modal-width-wide: 920px;
+    --dialog-width: 440px;
+    --toast-width: 400px;
+    --toast-duration: 5000ms;
+
+    --content-width-md: 840px;
+    --content-width-lg: 1040px;
+    --content-max-width: 88rem;
+    --sidebar-width: 16rem;
+    --breakpoint-nav: 56rem;
+
+    /* ── The measure scale ─────────────────────────────────────────────────
+     * Five widths, and every content area in the product picks one. The same
+     * five values are the breakpoints components respond at, so a layout
+     * changes shape exactly where a measure runs out. Container queries take
+     * literals (custom properties are not allowed there), so the numbers are
+     * repeated in Grid.css / Container.css — change them together. */
+    --width-xs: 24rem; /* 384 — a dialog body */
+    --width-sm: 30rem; /* 480 — a single-column form */
+    --width-md: 40rem; /* 640 — prose */
+    --width-lg: 60rem; /* 960 — a page body */
+    --width-xl: 80rem; /* 1280 — a full working surface */
+    --container-gutter: var(--space-6);
+
+
+    --skeleton-duration: 1400ms;
+    --skeleton-easing: ease-in-out;
+    --skeleton-stagger: 60ms;
+
+    --duration-fast: 120ms;
+    --duration-base: 150ms;
+    --duration-panel: 280ms;
+    --ease-standard: ease;
+    --ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
+
+    /* Field fill system. Derived from --color-text / --color-danger, which every
+     * theme redefines — so these six never need duplicating into a theme block.
+     * Any container that is not the page canvas overrides --field-bg locally. */
+    --field-bg: var(--color-canvas);
+    --tint-rest: 4%;
+    --tint-hover: 7%;
+    --tint-focus: 11%;
+    --tint-pressed: 15%;
+    --field-rest: color-mix(in srgb, var(--color-text) var(--tint-rest), var(--field-bg));
+    --field-hover: color-mix(in srgb, var(--color-text) var(--tint-hover), var(--field-bg));
+    --field-focus: color-mix(in srgb, var(--color-text) var(--tint-focus), var(--field-bg));
+    --field-pressed: color-mix(in srgb, var(--color-text) var(--tint-pressed), var(--field-bg));
+    --field-invalid: color-mix(in srgb, var(--color-danger) 9%, var(--field-bg));
+    --field-invalid-focus: color-mix(in srgb, var(--color-danger) 16%, var(--field-bg));
+
+    /* ── The interaction ladder ────────────────────────────────────────────
+     * Every interactive surface moves rest → hover → pressed on FILL ONLY.
+     * Two kinds of ladder, and a component uses one or the other, never both:
+     *
+     *   SOLID  --color-<tone>          rest
+     *          --color-<tone>-hover    hover      hand-picked per theme, because
+     *          --color-<tone>-pressed  pressed    a dark theme lightens where a
+     *                                             light theme darkens
+     *
+     *   SOFT   --color-<tone>-soft          rest  derived — one rule, every tone,
+     *          --color-<tone>-soft-hover    hover every theme, nothing to hand-pick
+     *          --color-<tone>-soft-pressed  press and nothing to get wrong
+     *
+     * Text on a soft fill is the tone itself, except where that fails 4.5:1 —
+     * those get a --color-<tone>-text override in their theme block, and the
+     * override is the exception that proves the rule rather than a habit.
+     *
+     * Solid ladders exist only for the three tones that are ever a button fill:
+     * primary, danger, accent. Success, warning and review are tones, not
+     * actions — if one of them ever needs a solid ladder, that is a decision
+     * record, not a token. */
+    --soft-step-hover: 10%;
+    --soft-step-pressed: 18%;
+    --color-primary-soft-hover: color-mix(in srgb, var(--color-primary) var(--soft-step-hover), var(--color-primary-soft));
+    --color-primary-soft-pressed: color-mix(in srgb, var(--color-primary) var(--soft-step-pressed), var(--color-primary-soft));
+    --color-accent-soft-hover: color-mix(in srgb, var(--color-accent) var(--soft-step-hover), var(--color-accent-soft));
+    --color-accent-soft-pressed: color-mix(in srgb, var(--color-accent) var(--soft-step-pressed), var(--color-accent-soft));
+    --color-success-soft-hover: color-mix(in srgb, var(--color-success) var(--soft-step-hover), var(--color-success-soft));
+    --color-success-soft-pressed: color-mix(in srgb, var(--color-success) var(--soft-step-pressed), var(--color-success-soft));
+    --color-warning-soft-hover: color-mix(in srgb, var(--color-warning) var(--soft-step-hover), var(--color-warning-soft));
+    --color-warning-soft-pressed: color-mix(in srgb, var(--color-warning) var(--soft-step-pressed), var(--color-warning-soft));
+    --color-danger-soft-hover: color-mix(in srgb, var(--color-danger) var(--soft-step-hover), var(--color-danger-soft));
+    --color-danger-soft-pressed: color-mix(in srgb, var(--color-danger) var(--soft-step-pressed), var(--color-danger-soft));
+    --color-review-soft-hover: color-mix(in srgb, var(--color-review) var(--soft-step-hover), var(--color-review-soft));
+    --color-review-soft-pressed: color-mix(in srgb, var(--color-review) var(--soft-step-pressed), var(--color-review-soft));
+
+    /* Text on a soft fill. Every theme may override; only two need to. */
+    --color-primary-text: var(--color-primary);
+    --color-accent-text: var(--color-accent);
+    --color-success-text: var(--color-success);
+    --color-warning-text: var(--color-warning);
+    --color-danger-text: var(--color-danger);
+    --color-review-text: var(--color-review);
+
+    /* Derived tone borders, used by soft-filled callouts and banners. */
+    --color-primary-border: color-mix(in srgb, var(--color-primary) 50%, var(--color-primary-soft));
+    --color-success-border: color-mix(in srgb, var(--color-success) 50%, var(--color-success-soft));
+    --color-warning-border: color-mix(in srgb, var(--color-warning) 50%, var(--color-warning-soft));
+    --color-danger-border: color-mix(in srgb, var(--color-danger) 50%, var(--color-danger-soft));
+
+    /* Publication status. Aliases only — every theme inherits these by
+       redefining the semantic tones above. Six states, no seventh. */
+    --status-draft: var(--color-border-strong);
+    --status-draft-text: var(--color-text-muted);
+    --status-draft-soft: var(--color-surface-muted);
+    --status-scheduled: var(--color-primary);
+    --status-scheduled-soft: var(--color-primary-soft);
+    --status-published: var(--color-success);
+    --status-published-soft: var(--color-success-soft);
+    --status-changed: var(--color-warning);
+    --status-changed-soft: var(--color-warning-soft);
+    --status-unpublished: var(--color-danger);
+    --status-unpublished-soft: var(--color-danger-soft);
+    --status-archived: var(--color-border);
+    --status-archived-text: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-surface));
+    --status-archived-soft: transparent;
+    /* Status tabs are interactive, so each soft needs its two further steps.
+     * Four inherit their tone's ladder; draft and archived have no tone of
+     * their own and fall back to the neutral field ladder. */
+    --status-draft-soft-hover: var(--field-hover);
+    --status-draft-soft-pressed: var(--field-pressed);
+    --status-scheduled-soft-hover: var(--color-primary-soft-hover);
+    --status-scheduled-soft-pressed: var(--color-primary-soft-pressed);
+    --status-published-soft-hover: var(--color-success-soft-hover);
+    --status-published-soft-pressed: var(--color-success-soft-pressed);
+    --status-changed-soft-hover: var(--color-warning-soft-hover);
+    --status-changed-soft-pressed: var(--color-warning-soft-pressed);
+    --status-unpublished-soft-hover: var(--color-danger-soft-hover);
+    --status-unpublished-soft-pressed: var(--color-danger-soft-pressed);
+    --status-archived-soft-hover: var(--field-hover);
+    --status-archived-soft-pressed: var(--field-pressed);
+
+  }
+
+  /* ── Theme: light (default) ───────────────────────────────────────────── */
+  :root {
+    color-scheme: light;
+    --color-canvas: #f4f6f9;
+    --color-surface: #ffffff;
+    --color-surface-raised: #fbfcfe;
+    --color-surface-subtle: #eef2f7;
+    --color-border: #d5dce7;
+    --color-border-muted: #e1e8f0;
+    --color-border-strong: #b8c4d6;
+    --color-text: #0f1728;
+    --color-text-muted: #51617b;
+    --color-text-on-solid: #ffffff;
+    --color-primary: #0052cc;
+    --color-primary-hover: #003f9e;
+    --color-primary-pressed: #00337f;
+    --color-primary-soft: #dbe8ff;
+    --color-success: #136c3f;
+    --color-success-soft: #daf4e6;
+    --color-warning: #8a5800;
+    --color-warning-soft: #fff0c9;
+    --color-danger: #a72020;
+    --color-danger-soft: #fee7e7;
+    --color-review: #7c53d6;
+    --color-review-soft: #efe9fb;
+    --color-focus: #3a74ff;
+    --color-accent: var(--color-primary);
+    --color-accent-hover: var(--color-primary-hover);
+    --color-accent-pressed: var(--color-primary-pressed);
+    --color-accent-soft: var(--color-primary-soft);
+    --color-text-on-accent: #ffffff;
+    --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 9%);
+    --shadow-md: 0 2px 4px -2px rgb(16 24 40 / 8%), 0 6px 12px -3px rgb(16 24 40 / 10%);
+    --shadow-lg: 0 8px 16px -6px rgb(16 24 40 / 12%), 0 18px 40px -12px rgb(16 24 40 / 16%);
+  }
+
+  /* ── Theme: dark ──────────────────────────────────────────────────────── */
+  [data-theme='dark'] {
+    color-scheme: dark;
+    --color-canvas: #0d1117;
+    --color-surface: #161b22;
+    --color-surface-raised: #1c2230;
+    --color-surface-subtle: #21262d;
+    --color-border: #30363d;
+    --color-border-muted: #21262d;
+    --color-border-strong: #484f58;
+    --color-text: #e6edf3;
+    --color-text-muted: #8b949e;
+    --color-text-on-solid: #0d1117;
+    --color-primary: #388bfd;
+    --color-primary-hover: #58a6ff;
+    --color-primary-pressed: #79b8ff;
+    --color-primary-soft: #1a2e4a;
+    --color-success: #3fb950;
+    --color-success-soft: #122a1d;
+    --color-warning: #d29922;
+    --color-warning-soft: #2d2208;
+    --color-danger: #f85149;
+    --color-danger-hover: #ff6b63;
+    --color-danger-pressed: #ff8a84;
+    --color-danger-soft: #3a1515;
+    --color-review: #a78bfa;
+    --color-review-soft: #2d1f4a;
+    --color-focus: #58a6ff;
+    --color-accent: var(--color-primary);
+    --color-accent-hover: var(--color-primary-hover);
+    --color-accent-pressed: var(--color-primary-pressed);
+    --color-accent-soft: var(--color-primary-soft);
+    --color-text-on-accent: #0d1117;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 40%);
+    --shadow-md: 0 4px 10px -3px rgb(0 0 0 / 45%);
+    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 55%);
+  }
+
+  /* ── Theme: cherry-glaze ──────────────────────────────────────────────── */
+  [data-theme='cherry-glaze'] {
+    color-scheme: light;
+    --color-canvas: #e7d8cd;
+    --color-surface: #f5f2ea;
+    --color-surface-raised: #efe4dc;
+    --color-surface-subtle: #d7a3be;
+    --color-border: #d7a3be;
+    --color-border-muted: #e7d8cd;
+    --color-border-strong: #b86b9c;
+    --color-text: #2f1d28;
+    --color-text-muted: #7c6470;
+    --color-text-on-solid: #f5f2ea;
+    --color-primary: #496f24;
+    --color-primary-hover: #3a5a1c;
+    --color-primary-pressed: #2d4615;
+    --color-primary-soft: #b7c991;
+    --color-success: #496f24;
+    --color-success-soft: #b7c991;
+    --color-warning: #6f4f24;
+    --color-warning-soft: #e7d8cd;
+    --color-danger: #8f3e6e;
+    --color-danger-hover: #743158;
+    --color-danger-pressed: #5c2746;
+    --color-danger-soft: #d7a3be;
+    --color-review: #7c53d6;
+    --color-review-soft: #e8e0f8;
+    --color-focus: #7fa34c;
+    --color-accent: #b86b9c;
+    --color-accent-hover: #a55b8a;
+    --color-accent-pressed: #8f4c76;
+    --color-accent-soft: #e8c2d3;
+    /* Cherry Glaze is one of the two overrides: the accent pink lands at 2.9:1
+     * on its own soft fill, so text on it goes darker than the accent itself. */
+    --color-accent-text: #66304f;
+    --color-text-on-accent: #201018;
+    --shadow-sm: 0 1px 2px rgb(73 111 36 / 8%), 0 1px 3px rgb(73 111 36 / 12%);
+    --shadow-md: 0 2px 4px -2px rgb(73 111 36 / 10%), 0 6px 12px -3px rgb(73 111 36 / 12%);
+    --shadow-lg: 0 8px 16px -6px rgb(73 111 36 / 14%), 0 18px 40px -12px rgb(73 111 36 / 18%);
+  }
+
+  /* ── Theme: black-hawaii ──────────────────────────────────────────────── */
+  [data-theme='black-hawaii'] {
+    color-scheme: dark;
+    --color-canvas: #101010;
+    --color-surface: #242321;
+    --color-surface-raised: #3a2a22;
+    --color-surface-subtle: #3a2a22;
+    --color-border: #6e6a63;
+    --color-border-muted: #3a2a22;
+    --color-border-strong: #c99a5f;
+    --color-text: #f1e6d6;
+    --color-text-muted: #c99a5f;
+    --color-text-on-solid: #101010;
+    --color-primary: #d66a3a;
+    --color-primary-hover: #e0854f;
+    --color-primary-pressed: #ea9f73;
+    --color-primary-soft: #3a2a22;
+    --color-success: #4e8f8a;
+    --color-success-soft: #242321;
+    --color-warning: #c99a5f;
+    --color-warning-soft: #3a2a22;
+    /* Lifted from #c44040, which sat at 3.8:1 against --color-text-on-solid. */
+    --color-danger: #d45454;
+    --color-danger-hover: #df6868;
+    --color-danger-pressed: #e98282;
+    --color-danger-soft: #3a2a22;
+    --color-review: #9b7fe8;
+    --color-review-soft: #2a2040;
+    --color-focus: #e0854f;
+    --color-accent: #d66a3a;
+    --color-accent-hover: #e0854f;
+    --color-accent-pressed: #ea9f73;
+    --color-accent-soft: #3a2a22;
+    /* The second override: the accent orange is 3.9:1 on its own soft fill. */
+    --color-accent-text: #e0854f;
+    --color-text-on-accent: #101010;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 50%);
+    --shadow-md: 0 4px 10px -3px rgb(0 0 0 / 55%);
+    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 62%);
+  }
+
+  /* Skeletons pulse between the two fills a control moves between — structure
+   * never pulses, only content. Stagger by --skeleton-stagger per row or tile.
+   * The element MUST also set background: var(--field-rest) statically: during
+   * the stagger delay, and whenever the animation is suppressed by
+   * prefers-reduced-motion, the keyframe supplies no fill at all. */
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      background-color: var(--field-rest);
+    }
+
+    50% {
+      background-color: var(--field-hover);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-fast: 0ms;
+      --duration-base: 0ms;
+      --duration-panel: 0ms;
+    }
+  }
+}

package/dist/tokens.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;