/** * Koder Web Kit — baseline CSS tokens. * Pairs with koder-web-kit.js. Import once (e.g., in after the JS). * * Consumers reference the semantic variables below: * body { background: var(--bg); color: var(--text); } */ :root { --bg: #ffffff; --text: #0f172a; --muted: #64748b; --accent: #5b4fe8; --accent-strong: #3a2fb8; --surface: #f8fafc; --surface-strong: #e2e8f0; --error: #e84f4f; --error-bg: #fef2f2; --success: #4fe8a2; --border: #e2e8f0; --pad-top: env(safe-area-inset-top, 0); --pad-right: env(safe-area-inset-right, 0); --pad-bottom: env(safe-area-inset-bottom, 0); --pad-left: env(safe-area-inset-left, 0); color-scheme: light; } [data-theme="dark"] { --bg: #0b1120; --text: #f1f5f9; --muted: #94a3b8; --accent: #7b70ff; --accent-strong: #5b4fe8; --surface: #1a1a2e; --surface-strong: #2d2d44; --error: #ff6b6b; --error-bg: #2a1414; --success: #3dd68c; --border: #2d2d44; color-scheme: dark; } /* ─── koder-theme-toggle ────────────────────────────────────────────── */ koder-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--text); font-size: 20px; background: transparent; transition: background 0.15s; } @media (hover: hover) { koder-theme-toggle:hover { background: var(--surface-strong); } } koder-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── koder-error-banner ────────────────────────────────────────────── */ .koder-error-banner { display: block; padding: 12px; margin: 8px 0; background: var(--error-bg); border: 1px solid var(--error); border-radius: 8px; color: var(--text); font: inherit; } .koder-err-head { display: flex; align-items: center; gap: 8px; font-weight: 500; } .koder-err-icon { color: var(--error); font-size: 1.2em; } .koder-err-id { display: block; margin: 4px 0 8px 28px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--muted); } .koder-err-actions { margin-left: 28px; display: flex; gap: 8px; flex-wrap: wrap; } .koder-err-actions button { padding: 4px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; cursor: pointer; font: inherit; } @media (hover: hover) { .koder-err-actions button:hover { background: var(--surface); } } .koder-err-tech { margin: 8px 28px 0; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8em; overflow-x: auto; white-space: pre-wrap; } /* ─── koder-download-button ──────────────────────────────────────────── */ koder-download-button { display: inline-flex; align-items: center; gap: 6px; } .koder-download-link { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.15s; } @media (hover: hover) { .koder-download-link:not(.is-disabled):hover { background: var(--accent-strong); } } .koder-download-link.is-disabled { background: var(--surface-strong); color: var(--muted); cursor: not-allowed; } .koder-download-ticket { font-size: 0.9em; color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 4px; } @media (hover: hover) { .koder-download-ticket:hover { background: var(--surface); color: var(--text); } } /* ═══════════════════════════════════════════════════════════════════ * UI Style — 19 presets canônicos * Spec: meta/docs/stack/specs/themes/ui-style.kmd * Eixo ortogonal a [data-theme] (light/dark) — combinam livremente * ═══════════════════════════════════════════════════════════════════ */ :root { /* Default tokens (Material 3) */ --kdr-radius-xs: 4px; --kdr-radius-sm: 8px; --kdr-radius-md: 12px; --kdr-radius-lg: 24px; --kdr-radius-xl: 28px; --kdr-density: 1.0; --kdr-font-stack: 'Inter', system-ui, sans-serif; --kdr-elevation: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --kdr-motion-fast: 200ms; --kdr-motion-medium: 400ms; } /* Group A — OS look-alikes */ [data-style="material3"] { --kdr-radius-xs: 4px; --kdr-radius-sm: 8px; --kdr-radius-md: 12px; --kdr-radius-lg: 24px; --kdr-radius-xl: 28px; --kdr-density: 1.0; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: #5B4FE8; --accent-strong: #3A2FB8; } [data-style="material2"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 4px; --kdr-radius-lg: 4px; --kdr-radius-xl: 8px; --kdr-density: 1.0; --kdr-font-stack: 'Roboto', system-ui, sans-serif; --accent: #6200EE; --accent-strong: #3700B3; } [data-style="gnome"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 6px; --kdr-radius-lg: 8px; --kdr-radius-xl: 12px; --kdr-density: 0.9; --kdr-font-stack: 'Cantarell', 'Inter', system-ui, sans-serif; --accent: #3584E4; --accent-strong: #1A5FB4; } [data-style="kde_breeze"] { --kdr-radius-xs: 1px; --kdr-radius-sm: 2px; --kdr-radius-md: 2px; --kdr-radius-lg: 4px; --kdr-radius-xl: 6px; --kdr-density: 0.9; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: #3DAEE9; --accent-strong: #1D99F3; } [data-style="yaru"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 6px; --kdr-radius-lg: 8px; --kdr-radius-xl: 12px; --kdr-density: 0.9; --kdr-font-stack: 'Ubuntu', 'Inter', system-ui, sans-serif; --accent: #E95420; --accent-strong: #C7421F; } [data-style="macos_sonoma"] { --kdr-radius-xs: 4px; --kdr-radius-sm: 6px; --kdr-radius-md: 10px; --kdr-radius-lg: 14px; --kdr-radius-xl: 20px; --kdr-density: 1.0; --kdr-font-stack: -apple-system, 'SF Pro Text', 'Inter', sans-serif; --accent: #007AFF; --accent-strong: #0040DD; --kdr-elevation: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.05); } [data-style="windows_11"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 8px; --kdr-radius-lg: 12px; --kdr-radius-xl: 16px; --kdr-density: 1.0; --kdr-font-stack: 'Segoe UI', 'Inter', system-ui, sans-serif; --accent: #0078D4; --accent-strong: #005A9E; } [data-style="ios_cupertino"] { --kdr-radius-xs: 6px; --kdr-radius-sm: 10px; --kdr-radius-md: 14px; --kdr-radius-lg: 20px; --kdr-radius-xl: 28px; --kdr-density: 1.0; --kdr-font-stack: -apple-system, 'SF Pro Text', 'Inter', sans-serif; --accent: #007AFF; --accent-strong: #0040DD; } [data-style="windows_95"] { --kdr-radius-xs: 0; --kdr-radius-sm: 0; --kdr-radius-md: 0; --kdr-radius-lg: 0; --kdr-radius-xl: 0; --kdr-density: 0.85; --kdr-font-stack: 'Tahoma', 'MS Sans Serif', monospace; --accent: #000080; --accent-strong: #000060; --kdr-elevation: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; } [data-style="aqua_classic"] { --kdr-radius-xs: 4px; --kdr-radius-sm: 8px; --kdr-radius-md: 12px; --kdr-radius-lg: 16px; --kdr-radius-xl: 24px; --kdr-density: 1.0; --kdr-font-stack: 'Lucida Grande', 'Inter', sans-serif; --accent: #0080FF; --accent-strong: #0060CC; } /* Group B — Aesthetic personalities */ [data-style="terminal_classic"] { --kdr-radius-xs: 0; --kdr-radius-sm: 0; --kdr-radius-md: 0; --kdr-radius-lg: 0; --kdr-radius-xl: 0; --kdr-density: 0.85; --kdr-font-stack: 'JetBrains Mono', ui-monospace, monospace; --accent: #00FF00; --accent-strong: #00CC00; } [data-style="brutalist"] { --kdr-radius-xs: 0; --kdr-radius-sm: 0; --kdr-radius-md: 0; --kdr-radius-lg: 0; --kdr-radius-xl: 0; --kdr-density: 0.85; --kdr-font-stack: 'JetBrains Mono', ui-monospace, monospace; --accent: #FF0000; --accent-strong: #CC0000; } [data-style="newspaper"] { --kdr-radius-xs: 1px; --kdr-radius-sm: 2px; --kdr-radius-md: 4px; --kdr-radius-lg: 6px; --kdr-radius-xl: 8px; --kdr-density: 1.15; --kdr-font-stack: 'Source Serif Pro', Georgia, serif; --accent: #8B4513; --accent-strong: #5C2C0D; } [data-style="minimalist_mono"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 6px; --kdr-radius-lg: 8px; --kdr-radius-xl: 12px; --kdr-density: 1.15; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: #000000; --accent-strong: #333333; } [data-theme="dark"][data-style="minimalist_mono"] { --accent: #FFFFFF; --accent-strong: #CCCCCC; } [data-style="compact_power_user"] { --kdr-radius-xs: 1px; --kdr-radius-sm: 2px; --kdr-radius-md: 4px; --kdr-radius-lg: 6px; --kdr-radius-xl: 8px; --kdr-density: 0.85; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: #5B4FE8; --accent-strong: #3A2FB8; } [data-style="bauhaus"] { --kdr-radius-xs: 0; --kdr-radius-sm: 0; --kdr-radius-md: 0; --kdr-radius-lg: 0; --kdr-radius-xl: 0; --kdr-density: 1.0; --kdr-font-stack: 'Futura', 'Inter', sans-serif; --accent: #E63946; --accent-strong: #AA2335; } [data-style="cyberpunk_neon"] { --kdr-radius-xs: 1px; --kdr-radius-sm: 2px; --kdr-radius-md: 4px; --kdr-radius-lg: 8px; --kdr-radius-xl: 12px; --kdr-density: 1.0; --kdr-font-stack: 'JetBrains Mono', ui-monospace, monospace; --accent: #FF00C8; --accent-strong: #00FFFF; --kdr-elevation: 0 0 12px rgba(255,0,200,0.5); } [data-style="synthwave"] { --kdr-radius-xs: 2px; --kdr-radius-sm: 4px; --kdr-radius-md: 8px; --kdr-radius-lg: 12px; --kdr-radius-xl: 20px; --kdr-density: 1.0; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: #FF1493; --accent-strong: #00FFFF; } [data-style="glassmorphism"] { --kdr-radius-xs: 4px; --kdr-radius-sm: 8px; --kdr-radius-md: 12px; --kdr-radius-lg: 20px; --kdr-radius-xl: 28px; --kdr-density: 1.0; --kdr-font-stack: 'Inter', system-ui, sans-serif; --accent: rgba(255,255,255,0.7); --accent-strong: rgba(255,255,255,0.9); } [data-style="glassmorphism"] .surface, [data-style="glassmorphism"] .card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); } /* ─── koder-style-picker ──────────────────────────────────────────── */ koder-style-picker { display: block; padding: 16px; } .koder-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; } .koder-style-card { cursor: pointer; border: 1px solid var(--border); border-radius: var(--kdr-radius-md); padding: 8px; background: var(--surface); transition: border-color var(--kdr-motion-fast); } .koder-style-card[aria-checked="true"] { border-color: var(--accent); border-width: 2px; } .koder-style-card-preview { height: 60px; border-radius: var(--kdr-radius-sm); background: var(--bg); margin-bottom: 6px; position: relative; } .koder-style-card-name { font-size: 0.85em; color: var(--text); } .koder-style-section-header { font-size: 0.75em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; letter-spacing: 0.05em; } /* ─── koder-settings-* ─────────────────────────────────────────── */ koder-settings-page { display: block; max-width: 720px; margin: 0 auto; } koder-settings-group { display: block; margin: 24px 0; } .koder-settings-group-title { font-size: 0.85em; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 16px 8px; } .koder-settings-group-card { background: var(--surface); border-radius: var(--kdr-radius-md); margin: 0 16px; overflow: hidden; } koder-settings-tile { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 16px; } koder-settings-tile:last-child { border-bottom: none; } .koder-settings-tile-content { flex: 1; } .koder-settings-tile-label { font-size: 1em; color: var(--text); } .koder-settings-tile-helper { font-size: 0.8em; color: var(--muted); margin-top: 2px; }