@apliteni/apliteni-ui 0.2.4

package/src/styles/topbar.css

@@ -0,0 +1,199 @@
+/* ============================================================================
+ * Topbar — canonical strategy topbar, extracted verbatim (class names kept so
+ * viz/ adopts it with no markup change): brand, Deck/Text switch, theme
+ * toggle, version switcher, account menu.
+ * Source of truth previously inlined in viz/topbar.mjs.
+ * ========================================================================== */
+
+.topbar {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+.topbar__in {
+  width: 100%;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 clamp(14px, 2.4vw, 26px);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.topbar .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--strong);
+  text-decoration: none;
+}
+.topbar .brand svg { display: block; flex: none; }
+.topbar .spacer { flex: 1; }
+
+/* Deck / Text (segmented, pill) */
+.dtsw {
+  display: none;
+  align-items: center;
+  gap: 2px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 3px;
+}
+.dtsw.on { display: inline-flex; }
+.dtsw a {
+  text-decoration: none;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  padding: 4px 13px;
+  border-radius: 24px;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+.dtsw a:hover { color: var(--text); }
+.dtsw a.cur { color: var(--strong); background: var(--surface); box-shadow: var(--shadow-sm); }
+
+/* Theme toggle */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 7px 12px;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  transition: transform 0.15s ease, background 0.35s ease, border-color 0.35s ease;
+}
+.toggle:hover { transform: translateY(-1px); }
+.toggle .ic { width: 15px; height: 15px; display: inline-block; color: var(--accent); }
+.toggle .ic svg { display: block; width: 100%; height: 100%; }
+
+/* Version switcher */
+.vsw { position: relative; }
+.vsw__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 7px 11px 7px 13px;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.vsw__btn:hover { border-color: var(--accent); }
+.vsw__btn .lbl { color: var(--muted); }
+.vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
+.vsw__btn .car {
+  width: 8px; height: 8px;
+  border-right: 1.6px solid var(--muted);
+  border-bottom: 1.6px solid var(--muted);
+  transform: rotate(45deg) translateY(-1px);
+  transition: transform 0.2s ease;
+}
+.vsw.open .vsw__btn .car { transform: rotate(-135deg) translateY(2px); }
+.vsw__menu {
+  position: absolute;
+  top: calc(100% + 9px);
+  left: 0;
+  min-width: 266px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 6px;
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-6px);
+  transition: 0.18s ease;
+  z-index: var(--z-dropdown);
+}
+.vsw.open .vsw__menu { opacity: 1; visibility: visible; transform: translateY(0); }
+.vopt {
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+  padding: 10px 13px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.vopt:hover { background: var(--surface); }
+.vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
+.vopt .vmeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
+.vopt .vbadge {
+  font-size: 9.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: 999px;
+  margin-left: auto;
+  flex: none;
+  margin-top: 1px;
+}
+.vbadge.live { color: var(--green); background: var(--glow-green); }
+.vbadge.arch { color: var(--muted); background: var(--surface); }
+@media (max-width: 600px) { .vsw__btn .lbl { display: none; } }
+
+/* Account — avatar + dropdown. Gated: hidden until the app confirms a session
+   and adds `.on` (mirrors the portal's /auth/me reveal). */
+.acct { position: relative; display: none; }
+.acct.on { display: inline-flex; }
+.avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: linear-gradient(145deg, #2b6b4b, #1d4a5e);
+  color: #fff;
+  font-weight: 600;
+  font-size: 12.5px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s ease;
+}
+.acct .avatar:hover { border-color: var(--accent); }
+.amenu {
+  position: absolute;
+  right: 0; top: 44px;
+  width: 252px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-6px);
+  transition: 0.16s ease;
+  z-index: var(--z-dropdown);
+}
+.acct.open .amenu { opacity: 1; visibility: visible; transform: translateY(0); }
+.amenu .ahead { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; }
+.amenu .ahead .avatar { cursor: default; }
+.amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
+.amenu .ahead .anm { color: var(--strong); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.amenu .ahead .aem { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
+.amenu a:hover { background: var(--surface); }
+.amenu a.cur { color: var(--accent); }
+.amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: 0.85; }
+.amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
+.amenu a.aout { color: var(--muted); }
+.amenu a.aout:hover { color: var(--accent); }

package/src/tokens/accents.css

@@ -0,0 +1,92 @@
+/* ============================================================================
+ * Accent sub-themes — an orthogonal `data-accent` dimension on top of
+ * `data-theme` (dark/light). Set both on <html>:
+ *
+ *     <html data-theme="dark" data-accent="phoenix">
+ *
+ * Each sub-theme only re-points the accent family (--accent, --purple*,
+ * --glow-purple, --ring, --grad-*). Surfaces, text and signal colours (green =
+ * live, pink = danger) stay put, so every accent works in light AND dark and
+ * every component follows with zero component-level changes.
+ *
+ * Selectors carry two attributes + :root, so they always out-specify the
+ * single-attribute theme blocks in tokens.css regardless of import order.
+ * ========================================================================== */
+
+/* ---- Phoenix — ember / rising fire (the strategy's namesake) ------------- */
+:root[data-theme="dark"][data-accent="phoenix"] {
+  --purple: #e0531f;
+  --purple-light: #ff8a5c;
+  --purple-mid: #ffa273;
+  --accent: #ff6a3d;
+  --accent-strong: var(--accent);
+  --accent-contrast: #241006;
+  --glow-purple: rgba(255, 106, 61, 0.18);
+  --ring: 0 0 0 3px rgba(255, 106, 61, 0.38);
+  --grad-from: #ff7a45;
+  --grad-to: #ffcf6a;
+}
+:root[data-theme="light"][data-accent="phoenix"] {
+  --purple: #c2400f;
+  --purple-light: #d64a12;
+  --purple-mid: #b8420f;
+  --accent: #d64a12;
+  --accent-strong: var(--accent);
+  --accent-contrast: #ffffff;
+  --glow-purple: rgba(214, 74, 18, 0.10);
+  --ring: 0 0 0 3px rgba(214, 74, 18, 0.28);
+  --grad-from: #d64a12;
+  --grad-to: #e8992a;
+}
+
+/* ---- Ocean — azure ------------------------------------------------------- */
+:root[data-theme="dark"][data-accent="ocean"] {
+  --purple: #1f7fe0;
+  --purple-light: #5ab0ff;
+  --purple-mid: #7cc0ff;
+  --accent: #3b9dff;
+  --accent-strong: var(--accent);
+  --accent-contrast: #04121f;
+  --glow-purple: rgba(59, 157, 255, 0.18);
+  --ring: 0 0 0 3px rgba(59, 157, 255, 0.38);
+  --grad-from: #3b9dff;
+  --grad-to: #20dcf5;
+}
+:root[data-theme="light"][data-accent="ocean"] {
+  --purple: #1156b8;
+  --purple-light: #1568d6;
+  --purple-mid: #1560c8;
+  --accent: #1568d6;
+  --accent-strong: var(--accent);
+  --accent-contrast: #ffffff;
+  --glow-purple: rgba(21, 104, 214, 0.10);
+  --ring: 0 0 0 3px rgba(21, 104, 214, 0.28);
+  --grad-from: #1568d6;
+  --grad-to: #17a2c0;
+}
+
+/* ---- Emerald — jade ------------------------------------------------------ */
+:root[data-theme="dark"][data-accent="emerald"] {
+  --purple: #0fa876;
+  --purple-light: #3ad9a0;
+  --purple-mid: #5fe3b4;
+  --accent: #16c98a;
+  --accent-strong: var(--accent);
+  --accent-contrast: #04180f;
+  --glow-purple: rgba(22, 201, 138, 0.18);
+  --ring: 0 0 0 3px rgba(22, 201, 138, 0.38);
+  --grad-from: #16c98a;
+  --grad-to: #20dcf5;
+}
+:root[data-theme="light"][data-accent="emerald"] {
+  --purple: #0a865a;
+  --purple-light: #0b9c68;
+  --purple-mid: #0a9060;
+  --accent: #0b9c68;
+  --accent-strong: var(--accent);
+  --accent-contrast: #ffffff;
+  --glow-purple: rgba(11, 156, 104, 0.10);
+  --ring: 0 0 0 3px rgba(11, 156, 104, 0.28);
+  --grad-from: #0b9c68;
+  --grad-to: #12b0a0;
+}

package/src/tokens/tokens.css

@@ -0,0 +1,185 @@
+/* ============================================================================
+ * apliteni-ui — design tokens
+ * Single source of truth for the Apliteni deck theme.
+ *
+ * Colour semantics are identical to viz/ (deck index.html, account.mjs):
+ *   purple accent, near-black surfaces, green = live, cyan = link/flag.
+ * Two themes: dark (default) and light. Toggle with `data-theme` on <html>.
+ *
+ * Everything downstream references the SEMANTIC tokens (--bg, --surface,
+ * --accent, --text…), never the raw ramp. Swap a ramp value once, and every
+ * component follows.
+ * ========================================================================== */
+
+:root {
+  /* -- Brand ramp (theme-invariant hues) ---------------------------------- */
+  --purple-900: #4c1f94;
+  --purple-700: #6a2dcc;
+  --purple-500: #9b5dff;
+  --purple-400: #b479ff;
+  --cyan-500:   #20dcf5;
+  --green-500:  #98ff8f;
+
+  /* -- Radius scale ------------------------------------------------------- */
+  --radius-xs: 6px;
+  --radius-sm: 9px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 18px;
+  --radius-2xl: 24px;
+  --radius-pill: 999px;
+
+  /* -- Spacing scale (4px base) ------------------------------------------- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* -- Typography --------------------------------------------------------- */
+  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 14.5px;
+  --text-md:   15.5px;
+  --text-lg:   18px;
+  --text-xl:   22px;
+  --text-2xl:  30px;
+  --text-3xl:  40px;
+  --text-4xl:  56px;
+
+  --weight-light: 300;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  --leading-tight: 1.2;
+  --leading-snug: 1.4;
+  --leading-normal: 1.62;
+
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-caps: 0.14em;
+
+  /* -- Motion ------------------------------------------------------------- */
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --dur-fast: 0.15s;
+  --dur-med: 0.25s;
+  --dur-slow: 0.4s;
+
+  /* -- Elevation (z) ------------------------------------------------------ */
+  --z-base: 1;
+  --z-sticky: 10;
+  --z-dropdown: 30;
+  --z-overlay: 100;
+  --z-toast: 200;
+}
+
+/* ============================================================================
+ * DARK THEME (default) — deck palette from viz/index.html
+ * ========================================================================== */
+:root,
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --purple: #6a2dcc;
+  --purple-light: #9b5dff;
+  --purple-mid: #b479ff;
+  --cyan: #20dcf5;
+  --green: #98ff8f;
+  --pink: #e35b8f;
+  --amber: #ffcf6a;
+
+  --bg: #16151f;
+  --bg-elevated: #1c1a28;
+  --surface: #221f2e;
+  --surface-2: #1b1927;
+  --surface-3: #2a2739;
+  --seg-active-bg: #34314a; /* raised pill — clearly above the inset track in dark */
+  --border: #332f45;
+  --border-strong: #453f5c;
+
+  --text: #e9e7f0;
+  --strong: #ffffff;
+  --dim: #c6c2d6;
+  --muted: #948fa8;
+
+  --accent: #9b5dff;
+  --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA (~6.5:1) */
+  --accent-contrast: #ffffff;
+  --ink: #e9e7f0;
+
+  --glow-green: rgba(152, 255, 143, 0.16);
+  --glow-purple: rgba(155, 93, 255, 0.18);
+  --glow-cyan: rgba(32, 220, 245, 0.14);
+  --glow-pink: rgba(227, 91, 143, 0.16);
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
+  /* Tight elevation for the active segmented pill — stays contained in its track. */
+  --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --ring: 0 0 0 3px rgba(155, 93, 255, 0.35);
+
+  /* Accent gradient stops (hero headline, marketing) — overridden per sub-theme. */
+  --grad-from: var(--purple-light);
+  --grad-to: var(--cyan);
+}
+
+/* ============================================================================
+ * LIGHT THEME — deck light palette from viz/account.mjs
+ * ========================================================================== */
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --purple: #6a2dcc;
+  --purple-light: #6a2dcc;
+  --purple-mid: #7a3be0;
+  --cyan: #0c8fa8;
+  --green: #1c8a2c;
+  --pink: #d63c72;
+  --amber: #b5730a;
+
+  --bg: #f6f6f8;
+  --bg-elevated: #ffffff;
+  --surface: #ffffff;
+  --surface-2: #f0f1f5;
+  --surface-3: #e7e9f0;
+  --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */
+  --border: #d7dae2;
+  --border-strong: #c3c7d4;
+
+  --text: #1e232b;
+  --strong: #0f0f13;
+  --dim: #3d434e;
+  --muted: #565c68;
+
+  --accent: #6a2dcc;
+  --accent-strong: #6a2dcc; /* already dark enough for white text */
+  --accent-contrast: #ffffff;
+  --ink: #1e232b;
+
+  --glow-green: rgba(30, 150, 50, 0.1);
+  --glow-purple: rgba(106, 45, 204, 0.09);
+  --glow-cyan: rgba(12, 143, 168, 0.1);
+  --glow-pink: rgba(214, 60, 114, 0.1);
+
+  --shadow-sm: 0 1px 3px rgba(30, 30, 50, 0.08);
+  --shadow-md: 0 8px 24px rgba(30, 30, 50, 0.1);
+  --shadow-lg: 0 18px 50px rgba(30, 30, 50, 0.16);
+  /* Tight elevation for the active segmented pill — stays contained in its track. */
+  --shadow-seg: 0 1px 2px rgba(30, 30, 50, 0.12), 0 2px 4px rgba(30, 30, 50, 0.1);
+  --ring: 0 0 0 3px rgba(106, 45, 204, 0.25);
+
+  --grad-from: var(--purple-light);
+  --grad-to: var(--cyan);
+}