@adminiumjs/tokens 0.1.0-rc.1

package/src/motion.css

@@ -0,0 +1,174 @@
+/* @adminium/tokens — motion vocabulary. See workplan/02-design-system.md §5.
+   Keyframe names keep the comps' nb- prefix for 1:1 traceability when porting.
+   Conventions: micro-transitions .1–.16s ease; entrances use cubic-bezier(.2,.7,.3,1). */
+
+/* ---------------------------------------------------------------- keyframes */
+
+/* screen/panel entrance: fade + rise (.24–.3s cubic-bezier(.2,.7,.3,1)) */
+@keyframes nb-fade {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* dropdown/modal pop: fade + translateY(-6px) + scale(.97) (.13–.22s) */
+@keyframes nb-pop {
+  from { opacity: 0; transform: translateY(-6px) scale(.97); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* modal entrance: scale .96–.98 + rise (.2–.22s cubic-bezier(.2,.8,.2,1)) */
+@keyframes nb-modal {
+  from { opacity: 0; transform: translateY(8px) scale(.97); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* drawer slide-in from inline-end (.22s); RTL consumers flip via --nb-slide-from */
+@keyframes nb-slide {
+  from { opacity: 0; transform: translateX(var(--nb-slide-from, 24px)); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* toast slide + scale, direction-mirrored pair */
+@keyframes nb-toastin {
+  from { opacity: 0; transform: translateX(28px) scale(.96); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes nb-toastin-rtl {
+  from { opacity: 0; transform: translateX(-28px) scale(.96); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* toast timer bar scaleX(1 -> 0); duration = toast duration */
+@keyframes nb-toastbar {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* skeleton sweep (surface-3 <-> surface-2 gradient), 1.4s linear infinite */
+@keyframes nb-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+/* spinner rotation, .7–.8s linear infinite */
+@keyframes nb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* opacity pulse (live indicators) */
+@keyframes nb-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: .45; }
+}
+
+/* bar growth on mount (.85s); vertical bars set transform-origin: bottom */
+@keyframes nb-grow {
+  from { transform: scale(var(--nb-grow-x, 1), var(--nb-grow-y, 0)); }
+  to   { transform: scale(1, 1); }
+}
+
+/* gauge stroke-dashoffset sweep (1.1s); element sets --nb-ring-from to its circumference */
+@keyframes nb-ring-anim {
+  from { stroke-dashoffset: var(--nb-ring-from, 999); }
+}
+
+/* ------------------------------------------------------- interaction classes */
+
+/* hover lift: translateY(-3px) + menu shadow + strong border */
+.nb-lift {
+  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
+}
+.nb-lift:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-strong);
+}
+
+/* button press: hover brighten, active shrink */
+.nb-press {
+  transition: transform .12s ease, filter .12s ease;
+}
+.nb-press:hover  { filter: brightness(1.05); }
+.nb-press:active { transform: scale(.97); }
+
+/* icon button: hover well, active shrink */
+.nb-ib {
+  transition: background-color .13s ease, transform .13s ease;
+}
+.nb-ib:hover  { background-color: var(--surface-3); }
+.nb-ib:active { transform: scale(.9); }
+
+/* table-row hover */
+.nb-rowh {
+  transition: background-color .13s ease;
+}
+.nb-rowh:hover { background-color: var(--surface-2); }
+
+/* heat-cell hover accent outline */
+.nb-heat {
+  outline: 2px solid transparent;
+  outline-offset: -1px;
+  transition: outline-color .13s ease;
+}
+.nb-heat:hover { outline-color: var(--accent); }
+
+/* hover-revealed actions: opacity 0 -> 1 + 4px slide inside a .nb-hoverwrap */
+.nb-reveal {
+  opacity: 0;
+  transform: translateX(4px);
+  transition: opacity .16s ease, transform .16s ease;
+}
+[dir="rtl"] .nb-reveal { transform: translateX(-4px); }
+.nb-hoverwrap:hover .nb-reveal,
+.nb-hoverwrap:focus-within .nb-reveal {
+  opacity: 1;
+  transform: none;
+}
+
+/* pill transitions + active shrink */
+.nb-pill {
+  transition: background-color .13s ease, color .13s ease, border-color .13s ease, transform .13s ease;
+}
+.nb-pill:active { transform: scale(.96); }
+
+/* skeleton shimmer surface */
+.nb-skel {
+  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
+  background-size: 200% 100%;
+  animation: nb-shimmer 1.4s linear infinite;
+}
+
+/* custom 10px scrollbar, strong-border thumb, padding-box */
+.nb-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.nb-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.nb-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--border-strong);
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+.nb-scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* ------------------------------------------------- prefers-reduced-motion */
+/* Policy: entrances, lifts, grows, ring sweeps and toast slides collapse to instant;
+   spinners keep rotating (a frozen spinner reads as a hang); skeletons go static. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* Loading affordances stay perceivable: spinner keeps rotating (slower), skeleton goes static */
+  .nb-spin, [class*="animate-nb-spin"] {
+    animation-duration: 1.4s !important;
+    animation-iteration-count: infinite !important;
+  }
+  .nb-skel { animation: none !important; background: var(--surface-3) !important; }
+}

package/src/pre-hydration.ts

@@ -0,0 +1,24 @@
+/**
+ * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
+ *
+ * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
+ * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet
+ * paints content. It reads the localStorage pre-paint cache and stamps data-theme /
+ * data-accent / data-density / dir / lang on <html>, resolving theme "system" via
+ * prefers-color-scheme. On any storage failure (private mode) it leaves the baseline paint.
+ *
+ * The storage keys and fallbacks are intentionally written out as literals so the string
+ * is self-contained and inline-able; test/pre-hydration.test.ts asserts they stay in
+ * sync with STORAGE_KEYS / DEFAULT_PREFS from ./index.js.
+ */
+export const preHydrationScript =
+  '(function(){try{var d=document.documentElement,s=localStorage;' +
+  'var t=s.getItem("adminium-theme")||"system";' +
+  'if(t==="system")t=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";' +
+  'd.setAttribute("data-theme",t);' +
+  'd.setAttribute("data-accent",s.getItem("adminium-accent")||"indigo");' +
+  'd.setAttribute("data-density",s.getItem("adminium-density")||"comfortable");' +
+  'var r=s.getItem("adminium-dir");' +
+  'if(r==="rtl")d.setAttribute("dir","rtl");' +
+  'var l=s.getItem("adminium-locale");' +
+  'if(l)d.setAttribute("lang",l.replace("_","-"))}catch(e){}})();';

package/src/tailwind.css

@@ -0,0 +1,63 @@
+/* @adminium/tokens — Tailwind v4 theme mapping. See workplan/02-design-system.md §3.1.
+   Import order in each app's entry CSS:
+     @import "tailwindcss";
+     @import "@adminium/tokens/index.css";
+     @import "@adminium/tokens/tailwind.css";  */
+
+/* Dark utilities target the attribute, not media queries */
+@custom-variant dark ([data-theme="dark"] &);
+@custom-variant compact ([data-density="compact"] &);
+
+@theme inline {
+  /* colors — `inline` keeps var() references live so runtime theme flips work */
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-fg: var(--fg);
+  --color-fg-muted: var(--fg-muted);
+  --color-fg-subtle: var(--fg-subtle);
+  --color-accent: var(--accent);
+  --color-accent-fg: var(--accent-fg);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-border: var(--accent-border);
+  --color-pos: var(--pos);         --color-pos-soft: var(--pos-soft);
+  --color-warn: var(--warn);       --color-warn-soft: var(--warn-soft);
+  --color-danger: var(--danger);   --color-danger-soft: var(--danger-soft);
+  --color-info: var(--info);       --color-info-soft: var(--info-soft);
+  --color-viz-1: var(--viz-1); --color-viz-2: var(--viz-2); --color-viz-3: var(--viz-3);
+  --color-viz-4: var(--viz-4); --color-viz-5: var(--viz-5); --color-viz-6: var(--viz-6);
+  --color-viz-7: var(--viz-7); --color-viz-8: var(--viz-8);
+
+  /* elevation */
+  --shadow-card: var(--shadow);
+  --shadow-menu: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  --shadow-glow: var(--accent-glow);
+
+  /* radii → rounded-sm/md/lg/xl */
+  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
+
+  /* fonts */
+  --font-sans: "Manrope", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-arabic: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
+
+  /* type scale (§1.4) → text-display, text-title, … */
+  --text-display: 30px;   --text-display--font-weight: 800; --text-display--letter-spacing: -0.03em;
+  --text-title: 20px;     --text-title--font-weight: 800;   --text-title--letter-spacing: -0.02em;
+  --text-modal: 16.5px;   --text-modal--font-weight: 800;
+  --text-section: 14.5px; --text-section--font-weight: 700; --text-section--letter-spacing: -0.01em;
+  --text-body: 13px;      --text-body--line-height: 1.5;
+  --text-body-sm: 12.5px; --text-body-sm--line-height: 1.5;
+  --text-caption: 11.5px;
+  --text-micro: 10.5px;   --text-micro--font-weight: 700;   --text-micro--letter-spacing: 0.05em;
+
+  /* layout */
+  --spacing-sidebar: 256px;
+  --container-form: 640px; --container-narrow: 720px; --container-page: 1080px;
+  --container-marketing: 1160px; --container-wide: 1200px; --container-max: 1360px;
+}

package/src/tokens.css

@@ -0,0 +1,55 @@
+/* @adminium/tokens — core semantic tokens. Values are canonical; see workplan/02-design-system.md §1.1.
+   The dark palette is hand-tuned, never derived from light values. */
+:root {
+  color-scheme: light;
+  --bg: #f6f6f8;
+  --surface: #ffffff;
+  --surface-2: #fafafa;
+  --surface-3: #f1f1f4;
+  --border: #ececef;
+  --border-strong: #e2e2e8;
+  --fg: #191920;
+  --fg-muted: #6b6b76;
+  --fg-subtle: #9a9aa5;
+  --accent-fg: #ffffff;
+  --pos: #12805c;
+  --pos-soft: #e6f5ee;
+  --warn: #b25e09;
+  --warn-soft: #fbf0e2;
+  --danger: #d1293d;
+  --danger-soft: #fdecec;
+  --info: #2563eb;
+  --info-soft: #e7edfd;
+  --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
+  --shadow-md: 0 4px 14px rgba(20,20,35,.09);
+  --shadow-lg: 0 12px 34px rgba(20,20,35,.13);
+  --scrim: rgba(10,10,15,.5);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0a0a0d;
+  --surface: #141419;
+  --surface-2: #1a1a20;
+  --surface-3: #24242c;
+  --border: rgba(255,255,255,.07);
+  --border-strong: rgba(255,255,255,.13);
+  --fg: #f4f4f6;
+  --fg-muted: #9a9aa6;
+  --fg-subtle: #6a6a76;
+  --pos: #3ecf8e;
+  --pos-soft: rgba(62,207,142,.14);
+  --warn: #e0a458;
+  --warn-soft: rgba(224,164,88,.14);
+  --danger: #ff6b6b;
+  --danger-soft: rgba(255,107,107,.14);
+  --info: #6ea8ff;
+  --info-soft: rgba(110,168,255,.14);
+  --shadow: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
+  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
+}
+
+::selection {
+  background: var(--accent-selection);
+}

package/src/viz.css

@@ -0,0 +1,27 @@
+/* @adminium/tokens — data-viz palette. See workplan/02-design-system.md §1.3.
+   Fixed 8-color categorical palette (order canonical; series i gets --viz-((i mod 8)+1)),
+   sequential accent ramp for heatmaps/choropleth intensity, and chart area/ribbon fill.
+   @adminium/charts consumes only these vars — no hex literals in chart code. */
+:root {
+  --viz-1: #4f46e5;
+  --viz-2: #0ea5e9;
+  --viz-3: #14b8a6;
+  --viz-4: #f59e0b;
+  --viz-5: #ef4444;
+  --viz-6: #8b5cf6;
+  --viz-7: #ec4899;
+  --viz-8: #22c55e;
+
+  --viz-ramp-1: color-mix(in srgb, var(--accent) 12%, transparent);
+  --viz-ramp-2: color-mix(in srgb, var(--accent) 28%, transparent);
+  --viz-ramp-3: color-mix(in srgb, var(--accent) 45%, transparent);
+  --viz-ramp-4: color-mix(in srgb, var(--accent) 65%, transparent);
+  --viz-ramp-5: color-mix(in srgb, var(--accent) 85%, transparent);
+  --viz-ramp-6: color-mix(in srgb, var(--accent) 100%, transparent);
+
+  --accent-area: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+[data-theme="dark"] {
+  --accent-area: color-mix(in srgb, var(--accent) 34%, transparent);
+}