/*
* WSB semantic themes.
*
* --vscode-* properties are still supplied by the runtime theme engine.
* These are the app-specific values layered on top. The unqualified :root
* light values preserve the pre-JavaScript first paint.
*/
@mixin light-theme {
--wb-user-bg: #eef2ff;
--wb-assistant-bg: #faf9ff;
--wb-thinking-bg: #f5f3ff;
--wb-tool-bg: #fffbf0;
--wb-code-bg: #1e1e2e;
--wb-code-text: #cdd6f4;
--wb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--wb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
--wb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
--wb-accent-rose: #e11d48;
--wb-accent-coral: #f34e3f;
--wb-accent-black: #2d2d2d;
--wb-accent-teal: #0d9488;
--wb-accent-indigo: #6366f1;
--wb-accent-orange: #e09040;
--wb-accent-sky: #0284c7;
--wb-accent-pink: #ec4899;
--wb-log-stderr: #3d5a80;
--wb-mark-error-bg: #b3261e;
--wb-mark-warning-bg: #8a5a00;
--wb-log-command: #0969da;
--wb-log-ok: #1a7f37;
--wb-log-failed: #cf222e;
--wb-log-warn: #9a6700;
--wb-log-quiet: #57606a;
--wb-ok: #1a7f37;
}
@mixin dark-theme {
--wb-user-bg: #111827;
--wb-assistant-bg: #141220;
--wb-thinking-bg: #1a1530;
--wb-tool-bg: #1a1508;
--wb-code-bg: #0d0d14;
--wb-code-text: #cdd6f4;
--wb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--wb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
--wb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
--wb-accent-rose: #fb7185;
--wb-accent-coral: #f34e3f;
--wb-accent-black: #b0b0b0;
--wb-accent-teal: #2dd4bf;
--wb-accent-indigo: #818cf8;
--wb-accent-orange: #f0a050;
--wb-accent-sky: #38bdf8;
--wb-accent-pink: #f472b6;
--wb-log-stderr: #7f96c4;
--wb-mark-error-bg: #c5342f;
--wb-mark-warning-bg: #a06a00;
--wb-log-command: #58a6ff;
--wb-log-ok: #3fb950;
--wb-log-failed: #f85149;
--wb-log-warn: #d29922;
--wb-log-quiet: #8b949e;
--wb-ok: #3fb950;
}
// The appearance is the one the host states for the UI kit, `data-appearance`;
// where none is stated yet, the operating system's.
:root,
:root[data-appearance="light"] {
@include light-theme;
}
:root[data-appearance="dark"] {
@include dark-theme;
}
@media (prefers-color-scheme: dark) {
:root:not([data-appearance]) {
@include dark-theme;
}
}