@sovereignfs/ui 0.83.1 → 0.89.1

package/src/tokens/primitives.css

@@ -1,168 +0,0 @@
-/*
- * Sovereign Design System — primitive tokens.
- *
- * Raw, context-free scales: the palette, spacing, type, and radii. These are
- * fixed — tenant theming never overrides primitives (it overrides the semantic
- * layer in semantic.css). Plugin code should reference SEMANTIC colour tokens,
- * not these primitives directly.
- */
-:root {
-  /* Neutral grey scale (monochrome identity) */
-  --sv-white: #ffffff;
-
-  /* Status colour primitives — amber (warning), green (success), red (error), blue (info).
-     Kept minimal: only the swatches the semantic status tokens reference.
-     Hex values align with the v3.1 design spec. */
-  --sv-amber-100: #fff7ed;
-  --sv-amber-200: #fed7aa;
-  --sv-amber-800: #b45309;
-  --sv-amber-900: #92400e;
-  --sv-green-100: #ecfdf3;
-  --sv-green-200: #bbf7d0;
-  --sv-green-800: #167c4a;
-  --sv-green-900: #14532d;
-  --sv-red-100: #fef2f2;
-  --sv-red-200: #fecaca;
-  --sv-red-700: #b91c1c;
-  --sv-red-800: #991b1b;
-  --sv-red-900: #7f1d1d;
-  --sv-blue-100: #eff6ff;
-  --sv-blue-200: #dbeafe;
-  --sv-blue-800: #1d4ed8;
-  --sv-blue-900: #1e3a8a;
-  --sv-black: #000000;
-  --sv-grey-50: #fafafa;
-  --sv-grey-100: #f4f4f5;
-  --sv-grey-200: #e4e4e7;
-  --sv-grey-300: #d4d4d8;
-  --sv-grey-400: #a1a1aa;
-  --sv-grey-500: #71717a;
-  --sv-grey-600: #52525b;
-  --sv-grey-700: #3f3f46;
-  --sv-grey-800: #27272a;
-  --sv-grey-900: #18181b;
-  --sv-grey-950: #09090b;
-
-  /* Spacing scale (4px base) */
-  --sv-space-1: 0.25rem;
-  --sv-space-2: 0.5rem;
-  --sv-space-3: 0.75rem;
-  --sv-space-4: 1rem;
-  --sv-space-5: 1.25rem;
-  --sv-space-6: 1.5rem;
-  --sv-space-8: 2rem;
-  --sv-space-10: 2.5rem;
-  --sv-space-12: 3rem;
-  --sv-space-16: 4rem;
-
-  /* Typography
-     Default pair: Hanken Grotesk (body) + JetBrains Mono (code/identifiers).
-     Operators supply the web font via <link> or instance CSS; the fallback
-     stack applies when the font is not loaded. */
-  --sv-font-family:
-    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
-    sans-serif;
-  --sv-font-family-mono:
-    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  --sv-font-size-2xs: 0.625rem; /* 10px — smallest badge size (Badge size="xs") */
-  --sv-font-size-label: 0.6875rem; /* 11px — all-caps section labels */
-  --sv-font-size-xs: 0.75rem; /* 12px — mono identifiers */
-  --sv-font-size-caption: 0.8125rem; /* 13px — secondary / supporting copy */
-  --sv-font-size-sm: 0.875rem; /* 14px — body copy */
-  --sv-font-size-md: 1rem; /* 16px */
-  --sv-font-size-lg: 1.125rem; /* 18px */
-  --sv-font-size-xl: 1.25rem; /* 20px */
-  --sv-font-size-2xl: 1.5rem; /* 24px */
-  --sv-font-size-3xl: 2rem; /* 32px — document title style (RichTextEditor "Title" paragraph style). A
-     modest step above 2xl reads too close to Heading 1 at a glance (both
-     bold, only 4px apart) — this keeps roughly the same ~1.3x jump Google
-     Docs itself uses between its own Title and Heading 1 sizes. */
-  --sv-font-weight-regular: 400;
-  --sv-font-weight-medium: 500;
-  --sv-font-weight-semibold: 600;
-  --sv-font-weight-bold: 700;
-
-  /* In-app text-size control (task 10.2), discharging the pinch-zoom-disabled
-     accessibility debt (runtime/app/layout.tsx sets userScalable: false).
-     Every --sv-font-size-* above is rem-based, so scaling the root font size
-     scales the whole type system with no per-component changes. Driven by
-     [data-text-size] on <html>, set pre-paint by runtime/src/theme-script.ts
-     from the `sv-text-size` cookie — same mechanism as [data-theme]. Like
-     --sv-radius-scale, this is a theme-stable scale token with no separate
-     semantic tier. */
-  --sv-text-size-scale: 1;
-
-  /* Icon sizes — scale tokens used directly by the Icon component */
-  --sv-icon-size-xs: 0.75rem; /* 12px — inline metadata (e.g. a due-date badge) */
-  --sv-icon-size-sm: 1rem; /* 16px — inline with body text */
-  --sv-icon-size-md: 1.25rem; /* 20px — standard affordance */
-  --sv-icon-size-lg: 1.5rem; /* 24px — prominent / standalone */
-
-  /* Border radii (v3.1 spec values). --sv-radius-scale is the one
-     instance-controllable exception to "scale tokens are theme-stable"
-     (RFC 0077) — an operator's corner-radius preset (None/XS/S/M/L)
-     overrides it at :root via the InstanceProvider style injection
-     (runtime/src/instance-provider.tsx), same pipeline as --sv-color-accent.
-     Every corner token below is proportional to it, so a plugin author never
-     references --sv-radius-scale directly — they keep using --sv-radius-sm
-     etc. exactly as before. --sv-radius-full is deliberately NOT derived
-     from the scale: it's a shape token (circle/pill), not a corner-rounding
-     one, and stays fixed regardless of the instance preset. */
-  --sv-radius-scale: 1;
-  --sv-radius-sm: calc(var(--sv-radius-scale) * 0.375rem); /* 6px @ scale 1 — badge, tag */
-  --sv-radius-md: calc(var(--sv-radius-scale) * 0.5rem); /* 8px @ scale 1 — button, input */
-  --sv-radius-lg: calc(
-    var(--sv-radius-scale) * 0.6875rem
-  ); /* 11px @ scale 1 — sidebar icon, card */
-  --sv-radius-xl: calc(var(--sv-radius-scale) * 0.75rem); /* 12px @ scale 1 — card, panel */
-  --sv-radius-2xl: calc(var(--sv-radius-scale) * 0.875rem); /* 14px @ scale 1 — popover */
-  --sv-radius-3xl: calc(
-    var(--sv-radius-scale) * 1.25rem
-  ); /* 20px @ scale 1 — bottom sheet (Drawer top corners) */
-  --sv-radius-full: 9999px; /* pill / avatar — unaffected by --sv-radius-scale */
-
-  /* Border width (RFC 0094). Theme-stable like the other scale tokens above —
-     a theme preset can override it (e.g. neobrutalism's thicker outline), but
-     it has no separate semantic tier. Every component references this by
-     name instead of a literal `1px`, the way --sv-radius-* etc. do. */
-  --sv-border-width-hairline: 1px;
-
-  /* Touch targets — minimum hit-area dimension for interactive controls.
-     44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
-     touch without a pointing device. Applied to icon-only controls on mobile
-     (avatar, footer button, Drawer nav items). */
-  --sv-touch-target-min: 44px;
-
-  /* Motion scale — durations and easings for overlay enter/exit transitions
-     (Dialog, Drawer, and their Phase-B successors: Sheet, ConfirmDialog,
-     Menu). Theme-stable like the other scale tokens above — dark mode does
-     not change motion, so there is no semantic tier. Components must pair
-     every transition with `@media (prefers-reduced-motion: reduce)` collapsing
-     it to near-instant; the durations here are not a substitute for that. */
-  --sv-motion-duration-fast: 150ms; /* micro-interactions — hover/press feedback */
-  --sv-motion-duration-base: 250ms; /* default overlay enter/exit (Dialog, Drawer) */
-  --sv-motion-duration-slow: 350ms; /* larger surfaces / bigger travel distance */
-  --sv-motion-ease-out: cubic-bezier(0, 0, 0.2, 1); /* entrances — fast start, gentle settle */
-  --sv-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* state changes with no fixed direction */
-  --sv-motion-ease-spring: cubic-bezier(
-    0.34,
-    1.56,
-    0.64,
-    1
-  ); /* slight overshoot — playful emphasis, use sparingly */
-}
-
-/* Root font size scales with --sv-text-size-scale — see the token comment
-   above. calc(...  * 100%) keeps the browser/OS text-zoom default intact at
-   scale 1 rather than hardcoding a px value. */
-html {
-  font-size: calc(var(--sv-text-size-scale) * 100%);
-}
-
-:root[data-text-size='large'] {
-  --sv-text-size-scale: 1.125; /* +12.5% */
-}
-
-:root[data-text-size='larger'] {
-  --sv-text-size-scale: 1.25; /* +25% */
-}

package/src/tokens/semantic.css

@@ -1,162 +0,0 @@
-/*
- * Sovereign Design System — semantic tokens.
- *
- * Contextual roles mapped from primitives. THIS is the theming surface: dark
- * mode and tenant theming work by overriding these values at :root (or under
- * [data-theme]) — no component changes required. Every value here references a
- * primitive token; none is a hardcoded literal (except shadows and the scrim,
- * which compose rgba layers).
- *
- * Identity is monochrome: the accent is near-black on light, near-white on dark.
- * A tenant gives Sovereign its own colour by overriding --sv-color-accent.
- */
-:root {
-  --sv-color-surface: var(--sv-white);
-  --sv-color-surface-sunken: var(--sv-grey-50);
-  --sv-color-surface-raised: var(--sv-white);
-
-  --sv-color-text-primary: var(--sv-grey-950);
-  --sv-color-text-muted: var(--sv-grey-500);
-  --sv-color-text-subtle: var(--sv-grey-400);
-  --sv-color-text-on-accent: var(--sv-white);
-  /* Guaranteed-contrast text pair for content painted directly on a
-     plugin-supplied literal background colour (data, not a design-system
-     token — e.g. a kanban board's own canvas colour). A consumer picks
-     whichever member actually contrasts with its own literal background;
-     neither can be theme-reactive the way --sv-color-text-primary is,
-     since the background itself doesn't react to the app's theme either.
-     Intentionally NOT overridden under [data-theme='dark'] below — same
-     "reads the same regardless of overall page theme" reasoning as
-     --sv-color-text-on-error/-success. */
-  --sv-color-text-on-light-fill: var(--sv-grey-950);
-  --sv-color-text-on-dark-fill: var(--sv-grey-50);
-
-  --sv-color-border: var(--sv-grey-200);
-  --sv-color-border-strong: var(--sv-grey-300);
-
-  --sv-color-accent: var(--sv-grey-900);
-  --sv-color-accent-hover: var(--sv-grey-700);
-  /* Derived from --sv-color-accent via color-mix, so it re-themes automatically —
-     no separate dark-mode override needed. Tinted background for badges/chips
-     paired with --sv-color-accent text. */
-  --sv-color-accent-subtle: color-mix(in srgb, var(--sv-color-accent) 12%, transparent);
-
-  --sv-color-focus-ring: var(--sv-grey-900);
-
-  /* Status surfaces — error (red), warning (amber), success (green).
-     Use these for banners, badges, and inline validation UI.
-     Never hardcode colour hex in components — reference these tokens. */
-  --sv-color-error-surface: var(--sv-red-100);
-  --sv-color-error-text: var(--sv-red-800);
-  --sv-color-error-border: var(--sv-red-200);
-  --sv-color-warning-surface: var(--sv-amber-100);
-  --sv-color-warning-text: var(--sv-amber-800);
-  --sv-color-warning-border: var(--sv-amber-200);
-  --sv-color-success-surface: var(--sv-green-100);
-  --sv-color-success-text: var(--sv-green-800);
-  --sv-color-success-border: var(--sv-green-200);
-
-  /* Status solids — a saturated fill for status affordances that need to
-     read as a filled action button rather than a tinted surface (e.g. a
-     mobile swipe-to-reveal Delete/Done action). Paired with
-     --sv-color-text-on-error/-success (white) for the icon/label on top.
-     Intentionally NOT overridden under [data-theme='dark'] below — like
-     --sv-color-accent-subtle, a solid action fill reads the same regardless
-     of overall page theme; it's the surrounding surface that inverts, not
-     this fixed-contrast pairing. */
-  --sv-color-error-solid: var(--sv-red-700);
-  --sv-color-success-solid: var(--sv-green-800);
-  --sv-color-text-on-error: var(--sv-white);
-  --sv-color-text-on-success: var(--sv-white);
-
-  /* Info surfaces — blue palette. Use for informational banners and badges.
-     Never hardcode colour hex in components — reference these tokens. */
-  --sv-color-info-surface: var(--sv-blue-100);
-  --sv-color-info-text: var(--sv-blue-800);
-  --sv-color-info-border: var(--sv-blue-200);
-
-  /* Overlay surfaces (Dialog/Sheet): the scrim behind a dialog and the panel's
-     elevation shadow. Composed rgba layers, like --sv-shadow-card. */
-  --sv-color-scrim: rgba(0, 0, 0, 0.5);
-
-  /* High-contrast shadow colour (RFC 0094). Distinct from --sv-color-border-strong
-     even though they resolve to the same monochrome scale — a theme preset's
-     hard offset shadows (e.g. neobrutalism) need a bolder, more saturated value
-     than a border does to read as "authentic," so this is its own token rather
-     than reusing border-strong. Unused by the default theme's soft rgba()
-     shadows above; only a preset that opts in (theme-presets.ts) references it. */
-  --sv-color-shadow-strong: var(--sv-grey-950);
-
-  --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
-  --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08); /* e1 — card hover lift */
-  --sv-shadow-popover:
-    0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); /* e2 — floating panels */
-  --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
-  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
-
-  /* Button press-interaction tokens (RFC 0094). Consumed unconditionally by
-     Button.module.css's :active rule — these defaults (none/0/0) make that
-     rule a no-op for today's default look. A theme preset (e.g.
-     neobrutalism) sets non-zero values to get a tactile "press into shadow"
-     effect. Not overridden under [data-theme='dark'] below — like the
-     shadow tokens above, a theme preset's own light/dark variants set these
-     directly rather than this file deriving a dark-mode default for them. */
-  --sv-button-shadow: none;
-  --sv-button-press-x: 0;
-  --sv-button-press-y: 0;
-
-  /*
-   * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
-   * these hold URLs (not colours) and are set once by the operator, not swapped
-   * with dark mode. Set by InstanceProvider server component from instance_config DB.
-   * CSS: background-image: var(--sv-instance-logo);
-   *   or <img src="var(--sv-instance-logo)"> is NOT correct — use the InstanceProvider
-   *   prop `instanceName` and the /api/instance/* routes for the actual URLs.
-   */
-  --sv-instance-logo: none;
-  --sv-instance-logo-dark: none;
-  --sv-instance-favicon: none;
-}
-
-[data-theme='dark'] {
-  --sv-color-surface: var(--sv-grey-950);
-  --sv-color-surface-sunken: var(--sv-grey-900);
-  --sv-color-surface-raised: var(--sv-grey-900);
-
-  --sv-color-text-primary: var(--sv-grey-50);
-  --sv-color-text-muted: var(--sv-grey-400);
-  --sv-color-text-subtle: var(--sv-grey-600);
-  --sv-color-text-on-accent: var(--sv-grey-950);
-
-  --sv-color-border: var(--sv-grey-800);
-  --sv-color-border-strong: var(--sv-grey-700);
-
-  --sv-color-accent: var(--sv-grey-50);
-  --sv-color-accent-hover: var(--sv-grey-200);
-
-  --sv-color-focus-ring: var(--sv-grey-100);
-
-  --sv-color-error-surface: var(--sv-red-900);
-  --sv-color-error-text: var(--sv-red-200);
-  --sv-color-error-border: var(--sv-red-700);
-  --sv-color-warning-surface: var(--sv-amber-900);
-  --sv-color-warning-text: var(--sv-amber-200);
-  --sv-color-warning-border: var(--sv-amber-800);
-  --sv-color-success-surface: var(--sv-green-900);
-  --sv-color-success-text: var(--sv-green-200);
-  --sv-color-success-border: var(--sv-green-800);
-
-  --sv-color-info-surface: var(--sv-blue-900);
-  --sv-color-info-text: var(--sv-blue-100);
-  --sv-color-info-border: var(--sv-blue-800);
-
-  --sv-color-scrim: rgba(0, 0, 0, 0.65);
-
-  --sv-color-shadow-strong: var(--sv-grey-50);
-
-  --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
-  --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
-  --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
-  --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.5);
-  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5);
-}

package/src/tokens/theme-presets.css

@@ -1,33 +0,0 @@
-/*
- * Generated by scripts/generate-theme-presets-css.ts — do not edit.
- * Source of truth: packages/ui/src/tokens/theme-presets.ts
- *
- * For Storybook / standalone (non-runtime) use only — set data-theme-preset
- * on the document root element (<html>), never a nested wrapper. See the
- * generator script's doc comment for why.
- */
-[data-theme-preset='neobrutalism'] {
-  --sv-radius-scale: 0;
-  --sv-border-width-hairline: 2px;
-  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
-  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-button-press-x: 4px;
-  --sv-button-press-y: 4px;
-}
-
-[data-theme-preset='neobrutalism'][data-theme='dark'] {
-  --sv-radius-scale: 0;
-  --sv-border-width-hairline: 2px;
-  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
-  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
-  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
-  --sv-button-press-x: 4px;
-  --sv-button-press-y: 4px;
-}

package/src/tokens/theme-presets.ts

@@ -1,72 +0,0 @@
-/**
- * Sovereign Design System — theme presets (RFC 0094).
- *
- * The single source of truth for every built-in theme preset's token
- * overrides. Deliberately plain data (no CSS-in-JS, no build dependency) so
- * it can be consumed two ways with zero duplication:
- *   - `scripts/generate-theme-presets-css.ts` (`pnpm generate:theme-presets`)
- *     reads this file and emits `theme-presets.css` for Storybook/standalone
- *     consumers.
- *   - `runtime/src/instance-style.ts` (RFC 0095) imports `THEME_PRESETS`
- *     directly and flattens the selected preset into the existing
- *     `:root { ... }` instance-style injection — no CSS parsing, no second
- *     copy of these values to drift out of sync.
- *
- * Presets are closed and built-in (RFC 0094's "Alternatives considered") —
- * add a new one here and re-run the generator, never accept arbitrary
- * operator-supplied values into this shape.
- *
- * `'default'` MUST stay `{ light: {}, dark: {} }` — an empty override set is
- * what guarantees today's look stays byte-identical for every instance that
- * never opts into a different preset.
- */
-
-export type ThemePresetName = 'default' | 'neobrutalism';
-
-export const THEME_PRESET_NAMES: readonly ThemePresetName[] = ['default', 'neobrutalism'];
-
-export interface ThemePresetTokens {
-  /** Sparse — only tokens this preset overrides. Everything else falls through to the default. */
-  light: Record<string, string>;
-  dark: Record<string, string>;
-}
-
-export const THEME_PRESETS: Record<ThemePresetName, ThemePresetTokens> = {
-  default: { light: {}, dark: {} },
-  neobrutalism: {
-    light: {
-      // --sv-radius-scale is a calc()-chain root: --sv-radius-sm..-3xl are
-      // all `calc(var(--sv-radius-scale) * ...)`, declared once at :root
-      // (primitives.css). This ONLY cascades correctly if the selector this
-      // override lands under matches :root itself (<html>) — a scoped
-      // descendant selector would set --sv-radius-scale there, but the
-      // dependent --sv-radius-* tokens were never re-declared at that node,
-      // so they'd keep inheriting their :root-resolved value unchanged. See
-      // the `withRadius` decorator comment in `.storybook/preview.ts` for
-      // the same constraint, discovered independently while building RFC
-      // 0077's Token Gallery preset demo.
-      '--sv-radius-scale': '0',
-      '--sv-border-width-hairline': '2px',
-      '--sv-shadow-card': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-hover': '6px 6px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-popover': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-overlay': '8px 8px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-control': '2px 2px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-button-shadow': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-button-press-x': '4px',
-      '--sv-button-press-y': '4px',
-    },
-    dark: {
-      '--sv-radius-scale': '0',
-      '--sv-border-width-hairline': '2px',
-      '--sv-shadow-card': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-hover': '6px 6px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-popover': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-overlay': '8px 8px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-shadow-control': '2px 2px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-button-shadow': '4px 4px 0 0 var(--sv-color-shadow-strong)',
-      '--sv-button-press-x': '4px',
-      '--sv-button-press-y': '4px',
-    },
-  },
-};

package/src/tokens.css

@@ -1,5 +0,0 @@
-/* Convenience entry that loads both token tiers. The runtime shell imports this
- * once so --sv-* variables are available globally (primitives first, then the
- * semantic layer that maps them). */
-@import './tokens/primitives.css';
-@import './tokens/semantic.css';