/* ============================================================================ * NanoPost Dashboard · Design Tokens * ---------------------------------------------------------------------------- * All tokens are scoped under `html[data-np]` so this file is additive and * reversible. Theme switches via `data-np-theme="light|dark"` on . * If unset, `prefers-color-scheme` decides. * * Import order in the app: * 1. tabler.css (existing) * 2. tokens.css (this file) * 3. components.css * ========================================================================== */ html[data-np] { /* ——— Brand ——— */ --np-brand: #7c5cff; /* landing-page violet — single source of truth */ --np-brand-600: #6a48f0; --np-brand-700: #5a3ad9; --np-brand-300: #a893ff; --np-brand-100: #ece6ff; --np-brand-tint: rgba(124, 92, 255, 0.10); /* ——— Semantic status colors (theme-independent hue, tone shifts per theme) ——— */ --np-success: #1a9f5a; --np-success-tint: rgba(26, 159, 90, 0.12); --np-warn: #c78200; --np-warn-tint: rgba(199, 130, 0, 0.12); --np-danger: #d64545; --np-danger-hover: #bf3838; --np-danger-tint: rgba(214, 69, 69, 0.12); --np-info: #2563eb; --np-info-tint: rgba(37, 99, 235, 0.10); /* ——— Typography ——— */ --np-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --np-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type scale (px, line-height, weight) */ --np-text-xs: 11px; --np-lh-xs: 1.45; --np-text-sm: 12px; --np-lh-sm: 1.5; --np-text-base: 13px; --np-lh-base: 1.55; /* tighter dashboard density */ --np-text-md: 14px; --np-lh-md: 1.55; --np-text-lg: 16px; --np-lh-lg: 1.5; --np-text-xl: 20px; --np-lh-xl: 1.35; --np-text-2xl: 24px; --np-lh-2xl: 1.25; --np-text-3xl: 32px; --np-lh-3xl: 1.2; --np-lh-tight: 1.25; /* kv lists, stat tiles */ --np-weight-regular: 400; --np-weight-medium: 500; --np-weight-semibold: 600; --np-tracking-tight: -0.01em; --np-tracking-wide: 0.06em; /* for eyebrow / table headers */ /* ——— Spacing scale (4px base) ——— */ --np-space-0: 0; --np-space-1: 4px; --np-space-2: 8px; --np-space-3: 12px; --np-space-4: 16px; --np-space-5: 20px; --np-space-6: 24px; --np-space-8: 32px; --np-space-10: 40px; --np-space-12: 48px; --np-space-16: 64px; /* ——— Radii ——— */ --np-radius-sm: 4px; --np-radius-md: 6px; --np-radius-lg: 8px; --np-radius-xl: 12px; --np-radius-pill: 999px; /* ——— Borders ——— */ --np-border-width: 1px; /* ——— Control heights (buttons, inputs, selects) ——— */ --np-control-h-sm: 28px; --np-control-h-md: 32px; --np-control-h-lg: 40px; /* ——— Transitions ——— */ --np-t-fast: 120ms cubic-bezier(0.2, 0.6, 0.2, 1); --np-t-base: 180ms cubic-bezier(0.2, 0.6, 0.2, 1); /* ——— Z-index ——— */ --np-z-dropdown: 1000; --np-z-modal: 1050; --np-z-toast: 1100; color-scheme: light dark; } /* ============================================================================ * LIGHT THEME (default — matches current dashboard aesthetic, tightened) * ========================================================================== */ html[data-np], html[data-np][data-np-theme="light"] { /* Surfaces */ --np-bg: #f6f7f9; /* page canvas */ --np-bg-subtle: #eef0f3; /* zebra, code blocks */ --np-surface: #ffffff; /* cards, table rows */ --np-surface-raised: #ffffff; /* dropdowns, modals (+ shadow) */ --np-surface-sunken: #f0f2f5; /* inputs, secondary bg */ /* Borders (hairlines that read at any DPI) */ --np-border: #e5e7ec; --np-border-strong: #d2d6dd; --np-border-focus: var(--np-brand); /* Ink (text) */ --np-ink: #15161a; /* primary */ --np-ink-2: #4a4f5a; /* secondary — body copy */ --np-ink-3: #6d7380; /* tertiary — helper, table head */ --np-ink-4: #9096a3; /* quaternary — placeholder, disabled */ --np-ink-inv: #ffffff; /* on colored backgrounds */ /* Interactive accents (link, focus) */ --np-link: var(--np-brand-600); --np-link-hover: var(--np-brand-700); --np-focus-ring: rgba(124, 92, 255, 0.32); /* Shadows */ --np-shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.04); --np-shadow-md: 0 4px 12px rgba(16, 18, 27, 0.06), 0 1px 2px rgba(16, 18, 27, 0.04); --np-shadow-lg: 0 12px 32px rgba(16, 18, 27, 0.10), 0 2px 6px rgba(16, 18, 27, 0.05); /* Status chip tints (lighter so text reads clearly) */ --np-success-bg: #e6f6ed; --np-success-fg: #0f7a42; --np-warn-bg: #fdf3e0; --np-warn-fg: #8a5a00; --np-danger-bg: #fce8e8; --np-danger-fg: #a52d2d; --np-info-bg: #e6efff; --np-info-fg: #1f4bcf; --np-brand-bg: var(--np-brand-100); --np-brand-fg: var(--np-brand-700); --np-neutral-bg: #eef0f3; --np-neutral-fg: #4a4f5a; } /* ============================================================================ * DARK THEME (echoes landing page, but 1 notch lighter for long-session UI) * ========================================================================== */ html[data-np][data-np-theme="dark"] { --np-bg: #0c0d11; --np-bg-subtle: #111218; --np-surface: #15171d; --np-surface-raised: #1a1d24; --np-surface-sunken: #0f1015; --np-border: rgba(255, 255, 255, 0.07); --np-border-strong: rgba(255, 255, 255, 0.13); --np-border-focus: var(--np-brand-300); --np-ink: #f2f3f5; --np-ink-2: #c4c7cf; --np-ink-3: #8c90a0; --np-ink-4: #5f6372; --np-ink-inv: #0c0d11; --np-link: var(--np-brand-300); --np-link-hover: #c2b2ff; --np-focus-ring: rgba(168, 147, 255, 0.38); --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --np-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); --np-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --np-success-bg: rgba(26, 159, 90, 0.14); --np-success-fg: #5fd795; --np-warn-bg: rgba(199, 130, 0, 0.16); --np-warn-fg: #ffc86b; --np-danger-bg: rgba(214, 69, 69, 0.16); --np-danger-fg: #ff8585; --np-danger-hover: #e26666; --np-info-bg: rgba(77, 140, 255, 0.16); --np-info-fg: #8fb5ff; --np-brand-bg: rgba(124, 92, 255, 0.16); --np-brand-fg: #b7a6ff; --np-neutral-bg: rgba(255, 255, 255, 0.06); --np-neutral-fg: #c4c7cf; } /* ============================================================================ * Auto dark when user hasn't chosen, but site-wide dark is preferred. * ========================================================================== */ @media (prefers-color-scheme: dark) { html[data-np]:not([data-np-theme]) { /* Re-declare dark vars (can't reference a selector; duplicate minimally) */ --np-bg: #0c0d11; --np-bg-subtle: #111218; --np-surface: #15171d; --np-surface-raised: #1a1d24; --np-surface-sunken: #0f1015; --np-border: rgba(255, 255, 255, 0.07); --np-border-strong: rgba(255, 255, 255, 0.13); --np-border-focus: var(--np-brand-300); --np-ink: #f2f3f5; --np-ink-2: #c4c7cf; --np-ink-3: #8c90a0; --np-ink-4: #5f6372; --np-ink-inv: #0c0d11; --np-link: var(--np-brand-300); --np-link-hover: #c2b2ff; --np-focus-ring: rgba(168, 147, 255, 0.38); --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --np-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); --np-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --np-success-bg: rgba(26, 159, 90, 0.14); --np-success-fg: #5fd795; --np-warn-bg: rgba(199, 130, 0, 0.16); --np-warn-fg: #ffc86b; --np-danger-bg: rgba(214, 69, 69, 0.16); --np-danger-fg: #ff8585; --np-danger-hover: #e26666; --np-info-bg: rgba(77, 140, 255, 0.16); --np-info-fg: #8fb5ff; --np-brand-bg: rgba(124, 92, 255, 0.16); --np-brand-fg: #b7a6ff; --np-neutral-bg: rgba(255, 255, 255, 0.06); --np-neutral-fg: #c4c7cf; } }