@sovereignfs/ui 0.21.0

package/src/tokens/semantic.css

@@ -0,0 +1,111 @@
+/*
+ * 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);
+
+  --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);
+
+  /* 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);
+
+  /*
+   * 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);
+}

package/src/tokens.css

@@ -0,0 +1,5 @@
+/* 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';