/* * Kapable Platform — Shared Theme Tokens * * Include this file in every platform app for consistent dark/light theming. * Pair with kapable-theme.js (IIFE in ) for cookie-based theme sync. * * Token contract: all apps MUST use these variable names for core surfaces, * text, borders, and accent colors. App-specific tokens (e.g. status dots, * sidebar widths) live in the app's own CSS. */ :root { --kp-radius: 8px; --kp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--kp-font); } /* ── Dark ── */ [data-theme="dark"] { --kp-bg: #0b0d10; --kp-surface: #14171c; --kp-surface-hi: #1c2026; --kp-border: #2a2f37; --kp-border-strong: #3f3f46; --kp-border-subtle: rgba(42, 47, 55, 0.5); --kp-text: #e6e8ec; --kp-text-dim: #8a92a1; --kp-text-muted: #71717a; --kp-text-disabled: #52525b; --kp-accent: #6aa5ff; --kp-accent-hi: #4477cc; --kp-accent-bg: rgba(106, 165, 255, 0.1); --kp-danger: #ff6b6b; --kp-danger-bg: rgba(255, 107, 107, 0.1); --kp-success: #34d399; --kp-success-bg: rgba(52, 211, 153, 0.1); --kp-warn: #fbbf24; --kp-warn-bg: rgba(251, 191, 36, 0.1); --kp-info: #38bdf8; --kp-info-bg: rgba(56, 189, 248, 0.1); color-scheme: dark; } /* ── Light ── */ [data-theme="light"] { --kp-bg: #f4f5f7; --kp-surface: #ffffff; --kp-surface-hi: #eceef1; --kp-border: #d0d5dd; --kp-border-strong: #b0b5bd; --kp-border-subtle: rgba(208, 213, 221, 0.5); --kp-text: #111318; --kp-text-dim: #4b5563; --kp-text-muted: #6b7280; --kp-text-disabled: #9ca3af; --kp-accent: #2563eb; --kp-accent-hi: #1d4ed8; --kp-accent-bg: rgba(37, 99, 235, 0.08); --kp-danger: #dc2626; --kp-danger-bg: rgba(220, 38, 38, 0.08); --kp-success: #10b981; --kp-success-bg: rgba(16, 185, 129, 0.08); --kp-warn: #f59e0b; --kp-warn-bg: rgba(245, 158, 11, 0.08); --kp-info: #0ea5e9; --kp-info-bg: rgba(14, 165, 233, 0.08); color-scheme: light; } /* ── Backward-compatible aliases ── Apps that already use --bg, --fg, etc. can opt into these aliases instead of a full rename. New apps should use --kp-* directly. */ [data-theme="dark"], [data-theme="light"] { --bg: var(--kp-bg); --bg-2: var(--kp-surface); --bg-3: var(--kp-surface-hi); --border: var(--kp-border); --fg: var(--kp-text); --fg-dim: var(--kp-text-dim); --accent: var(--kp-accent); --accent-2: var(--kp-accent-hi); --accent-bg:var(--kp-accent-bg); --danger: var(--kp-danger); --radius: var(--kp-radius); } /* ── Base resets ── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--kp-bg); color: var(--kp-text); } a { color: var(--kp-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Shared topbar ── */ .kp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; height: 48px; background: var(--kp-surface); border-bottom: 1px solid var(--kp-border); } .kp-topbar-left { display: flex; align-items: center; gap: 8px; } .kp-topbar-right { display: flex; align-items: center; gap: 8px; } .kp-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--kp-text); text-decoration: none; } .kp-brand:hover { text-decoration: none; color: var(--kp-accent); } .kp-brand-logo { width: 24px; height: 24px; border-radius: 4px; } .kp-brand-sep { color: var(--kp-text-muted); font-weight: 400; font-size: 14px; margin: 0 2px; } .kp-app-name { color: var(--kp-text-dim); font-weight: 500; font-size: 14px; } /* ── Theme toggle button ── */ .kp-theme-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: none; border: 1px solid transparent; color: var(--kp-text-dim); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .kp-theme-btn:hover { background: var(--kp-surface-hi); border-color: var(--kp-border); color: var(--kp-text); } .kp-theme-btn svg { width: 16px; height: 16px; } /* ── Common button ── */ .kp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--kp-radius); background: var(--kp-accent); color: #fff; border: 0; font-size: 14px; cursor: pointer; font-family: var(--kp-font); transition: background 0.15s; } .kp-btn:hover { background: var(--kp-accent-hi); } .kp-btn.secondary { background: var(--kp-surface-hi); color: var(--kp-text); border: 1px solid var(--kp-border); } .kp-btn.secondary:hover { border-color: var(--kp-border-strong); } .kp-btn.danger { background: var(--kp-danger); } /* ── Common form inputs ── */ .kp-input, .kp-textarea, .kp-select { background: var(--kp-surface-hi); color: var(--kp-text); border: 1px solid var(--kp-border); padding: 8px 10px; border-radius: var(--kp-radius); font-size: 14px; width: 100%; font-family: var(--kp-font); } .kp-input:focus, .kp-textarea:focus, .kp-select:focus { outline: 2px solid var(--kp-accent); outline-offset: -1px; } /* ── User avatar ── */ .kp-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--kp-accent-bg); color: var(--kp-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; } /* ── Muted text ── */ .kp-muted { color: var(--kp-text-dim); font-size: 13px; } /* ── Loading ── */ .kp-loading { color: var(--kp-text-dim); text-align: center; padding: 60px 0; }