@sovereignfs/ui 0.54.0 → 0.89.1

package/src/tokens/primitives.css

@@ -1,157 +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-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-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 */
-
-  /* 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,130 +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);
-
-  --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);
-
-  --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 */
-
-  /*
-   * 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-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.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';