/* * Nalar Platform — Design Tokens (NalarDS v2) * Single source of truth untuk warna, spacing, tipografi, dark/light mode. * * Usage: load this BEFORE any other app CSS. All component styles must * reference tokens via var(--nx-*), never raw hex values. * Linter: php tools/nx-token-lint.php harus 0 violations sebelum commit. * * Mode theming: * Default (no attribute) → Light mode * html[data-theme="dark"] → Dark mode (manual override) * html[data-theme="light"] → Light mode (manual override) * @media prefers-color-scheme: dark → Auto dark jika user prefer * * Surface theming (di atas mode): * html[data-surface="core"] → Control Plane (deep navy primary) * html[data-surface="edge"] → Edge Admin (teal primary) * * DESIGN-SPEC.md §2–4 adalah source of truth untuk semua nilai di sini. * ADR-011 (NalarDS v2) — dark/light mode decision. */ :root { /* ── Primary blue (user default) ────────────────────────────────────── */ --nx-primary: #1d69d6; --nx-primary-600: #1558b8; --nx-primary-soft: #eef4ff; /* ── Deep navy (sidebar + auth showcase) ────────────────────────────── */ --nx-navy-900: #081d47; --nx-navy-800: #0c2e6b; --nx-navy-700: #123467; --nx-navy-600: #153a78; --nx-accent-blue: #5b94f6; /* ── Neutral shell ──────────────────────────────────────────────────── */ --nx-shell-bg: linear-gradient(180deg, #f4f7fd 0%, #f7f9fc 42%, #f4f6fb 100%); --nx-surface: #ffffff; --nx-surface-alt: #f5f8fd; --nx-line: rgba(15, 23, 42, 0.08); --nx-line-strong: rgba(15, 23, 42, 0.12); /* ── Ink (text) ─────────────────────────────────────────────────────── */ --nx-ink: #0f172a; --nx-ink-soft: #1f2937; --nx-muted: #6f767e; /* ── Semantic ──────────────────────────────────────────────────────── * Brighter shades per feedback — success was green-700 (#15803d), * now green-500 (#22c55e) so the "ok/indexed" signal reads vividly. * Warning/danger/info bumped one step lighter each. */ --nx-success: #22c55e; --nx-success-soft: rgba(34, 197, 94, 0.16); --nx-warning: #d97706; --nx-warning-soft: rgba(245, 158, 11, 0.18); --nx-danger: #dc2626; --nx-danger-soft: rgba(239, 68, 68, 0.16); --nx-info: #1d69d6; --nx-info-soft: rgba(29, 105, 214, 0.16); /* Bright green for terminal-style code output on dark backgrounds * (e.g. one-time API key display). Full-opacity variant of the rgb(34,197,94) * that backs --nx-success-soft. */ --nx-terminal-green: #22c55e; /* ── Elevation ─────────────────────────────────────────────────────── */ --nx-shadow-card: 0 8px 28px rgba(15, 23, 42, 0.04); --nx-shadow-raised: 0 20px 44px rgba(15, 23, 42, 0.06); --nx-shadow-auth: 0 24px 60px rgba(15, 23, 42, 0.08); /* ── Radius ────────────────────────────────────────────────────────── */ --nx-r-sm: 8px; --nx-r-md: 10px; --nx-r-lg: 12px; --nx-r-xl: 16px; --nx-r-2xl: 20px; --nx-r-pill: 999px; /* ── Motion ────────────────────────────────────────────────────────── */ --nx-dur-micro: 120ms; --nx-dur-hover: 180ms; --nx-dur-panel: 240ms; --nx-dur-sidebar: 280ms; --nx-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── Surface-aware primary (aliased per data-surface on ) ────── */ --nx-surface-primary: var(--nx-primary); --nx-surface-primary-600: var(--nx-primary-600); --nx-surface-primary-soft: var(--nx-primary-soft); } /* Control Plane — deep navy primary for super-admin gravitas. */ html[data-surface="core"] { --nx-surface-primary: #163f83; --nx-surface-primary-600: #0f2e63; --nx-surface-primary-soft: #eaf0fb; } /* Edge Admin — teal primary signalling infrastructure / tenant ops. */ html[data-surface="edge"] { --nx-surface-primary: #0f766e; --nx-surface-primary-600: #0b5951; --nx-surface-primary-soft: #e9f7f4; } /* ═══════════════════════════════════════════════════════════════ DARK MODE — NalarDS v2 (ADR-011, DESIGN-SPEC.md §3) Palette terinspirasi HyperShield Central Fleet Console. Aktif via: html[data-theme="dark"] ATAU prefers-color-scheme: dark Sidebar TETAP navy gelap di kedua mode — konsisten by design. ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"], html[data-theme="dark"] body { color-scheme: dark; /* Shell backgrounds — deep navy (HyperShield palette) */ --nx-shell-bg: radial-gradient(900px 500px at 12% -8%, rgba(37,99,235,0.14), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(20,184,166,0.07), transparent 55%), #0b1220; --nx-surface: #111b30; --nx-surface-alt: #1b2740; --nx-line: rgba(148, 163, 184, 0.16); --nx-line-strong: rgba(148, 163, 184, 0.26); /* Ink */ --nx-ink: #e5e7eb; --nx-ink-soft: #cbd5e1; --nx-muted: #94a3b8; /* Primary — sedikit lebih terang untuk dark bg readability */ --nx-primary: #2563eb; --nx-primary-600: #1d4ed8; --nx-primary-soft: rgba(37, 99, 235, 0.18); --nx-accent-blue: #60a5fa; /* Semantic — lebih terang di dark */ --nx-success: #22c55e; --nx-success-soft: rgba(34, 197, 94, 0.16); --nx-warning: #facc15; --nx-warning-soft: rgba(250, 204, 21, 0.16); --nx-danger: #ef4444; --nx-danger-soft: rgba(239, 68, 68, 0.18); --nx-info: #60a5fa; --nx-info-soft: rgba(59, 130, 246, 0.18); --nx-terminal-green: #4ade80; /* Elevation — lebih dramatic di dark */ --nx-shadow-card: 0 4px 16px rgba(2, 6, 18, 0.40); --nx-shadow-raised: 0 12px 30px rgba(2, 6, 18, 0.55); --nx-shadow-auth: 0 24px 60px rgba(2, 6, 18, 0.70); /* Surface primary default (user) di dark */ --nx-surface-primary: #2563eb; --nx-surface-primary-600: #1d4ed8; --nx-surface-primary-soft: rgba(37, 99, 235, 0.20); } /* Dark + prefers-color-scheme fallback (tanpa manual override) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --nx-shell-bg: radial-gradient(900px 500px at 12% -8%, rgba(37,99,235,0.14), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(20,184,166,0.07), transparent 55%), #0b1220; --nx-surface: #111b30; --nx-surface-alt: #1b2740; --nx-line: rgba(148, 163, 184, 0.16); --nx-line-strong: rgba(148, 163, 184, 0.26); --nx-ink: #e5e7eb; --nx-ink-soft: #cbd5e1; --nx-muted: #94a3b8; --nx-primary: #2563eb; --nx-primary-600: #1d4ed8; --nx-primary-soft: rgba(37, 99, 235, 0.18); --nx-accent-blue: #60a5fa; --nx-success: #22c55e; --nx-success-soft: rgba(34, 197, 94, 0.16); --nx-warning: #facc15; --nx-warning-soft: rgba(250, 204, 21, 0.16); --nx-danger: #ef4444; --nx-danger-soft: rgba(239, 68, 68, 0.18); --nx-info: #60a5fa; --nx-info-soft: rgba(59, 130, 246, 0.18); --nx-terminal-green: #4ade80; --nx-shadow-card: 0 4px 16px rgba(2, 6, 18, 0.40); --nx-shadow-raised: 0 12px 30px rgba(2, 6, 18, 0.55); --nx-shadow-auth: 0 24px 60px rgba(2, 6, 18, 0.70); --nx-surface-primary: #2563eb; --nx-surface-primary-600: #1d4ed8; --nx-surface-primary-soft: rgba(37, 99, 235, 0.20); } } /* Dark mode surface aliases — Core + Edge lebih terang di dark bg */ html[data-theme="dark"][data-surface="core"], html:not([data-theme="light"])[data-surface="core"] { --nx-surface-primary: #3b6fd4; --nx-surface-primary-600: #2a57b8; --nx-surface-primary-soft: rgba(59, 111, 212, 0.20); } html[data-theme="dark"][data-surface="edge"], html:not([data-theme="light"])[data-surface="edge"] { --nx-surface-primary: #14b8a6; --nx-surface-primary-600: #0d9488; --nx-surface-primary-soft: rgba(20, 184, 166, 0.20); } /* ── Theme toggle icon visibility ──────────────────────────────── */ /* Sun icon: tampil saat dark mode (untuk switch ke light) */ /* Moon icon: tampil saat light mode (untuk switch ke dark) */ .nx-theme-icon--sun { display: none; } .nx-theme-icon--moon { display: block; } html[data-theme="dark"] .nx-theme-icon--sun { display: block; } html[data-theme="dark"] .nx-theme-icon--moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nx-theme-icon--sun { display: block; } html:not([data-theme="light"]) .nx-theme-icon--moon { display: none; } } /* ── Dark mode: card/panel perlu border karena shadow kurang kontras ── */ html[data-theme="dark"] .nx-card, html[data-theme="dark"] .nx-panel, html:not([data-theme="light"]) .nx-card, html:not([data-theme="light"]) .nx-panel { border-color: var(--nx-line); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nx-card, html:not([data-theme="light"]) .nx-panel { border-color: var(--nx-line); } } /* ── Scrollbar dark mode ────────────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar, html:not([data-theme="light"]) ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb, html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: #27324d; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover, html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: #33415f; background-clip: padding-box; } /* ── Typography (self-host later in Fase A2) ─────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap'); :root { --nx-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --nx-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --nx-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } /* ── Base reset (scoped, non-destructive) ───────────────────────────── */ body.nx-shell { margin: 0; background: var(--nx-shell-bg); color: var(--nx-ink); font-family: var(--nx-font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } body.nx-shell h1, body.nx-shell h2, body.nx-shell h3 { font-family: var(--nx-font-display); color: var(--nx-ink); letter-spacing: -0.01em; margin: 0; } body.nx-shell h1 { font-size: 24px; font-weight: 700; } body.nx-shell h2 { font-size: 18px; font-weight: 700; } body.nx-shell h3 { font-size: 15px; font-weight: 600; } body.nx-shell .nx-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); } body.nx-shell code, body.nx-shell .nx-mono { font-family: var(--nx-font-mono); font-size: 12.5px; background: var(--nx-surface-alt); padding: 2px 6px; border-radius: var(--nx-r-sm); color: var(--nx-ink-soft); } body.nx-shell a { color: var(--nx-surface-primary); text-decoration: none; transition: color var(--nx-dur-hover) var(--nx-ease); } body.nx-shell a:hover { color: var(--nx-surface-primary-600); }