tfrere's picture
tfrere HF Staff
feat(frontend): editor refresh (embed studio, comment popover, shiki, top bar, hooks, styles)
76fc93a
Raw
History Blame Contribute Delete
4.98 kB
/* -----------------------------------------------------------------------
Design tokens - Light / Dark theming
Usage: var(--token-name)
Toggle: data-theme="light" or data-theme="dark" on <html>
Default: follows prefers-color-scheme
----------------------------------------------------------------------- */
:root,
[data-theme="light"] {
--text-primary: #1a1a1a;
--text-secondary: #555;
--text-tertiary: #888;
--text-faint: #aaa;
--text-heading: #111;
--text-heading-secondary: #222;
--text-strong: #000;
--bg-primary: #ffffff;
--bg-secondary: #f7f7f7;
--bg-tertiary: #f0f0f0;
--bg-hover: rgba(0, 0, 0, 0.03);
--bg-overlay: rgba(0, 0, 0, 0.5);
--bg-tooltip: #ffffff;
--bg-surface: #ffffff;
--bg-code: rgba(0, 0, 0, 0.04);
--bg-code-block: #fafafa;
--border: #e0e0e0;
--border-light: #eeeeee;
--border-focus: rgba(124, 58, 237, 0.5);
--accent: #7c3aed;
--accent-light: #958DF1;
--accent-bg: rgba(124, 58, 237, 0.08);
--accent-bg-hover: rgba(124, 58, 237, 0.15);
--accent-text: #6d28d9;
--code-text: #d63384;
--code-comment: #6a737d;
--code-keyword: #8250df;
--code-string: #0a6640;
--code-number: #b35900;
--code-variable: #d63384;
--code-type: #b35900;
--code-function: #0550ae;
--code-tag: #d63384;
--code-attr: #b35900;
--code-symbol: #0a6640;
--code-meta: #0550ae;
--code-deletion: #d63384;
--danger: #dc2626;
--danger-color: #dc2626;
--danger-bg: rgba(220, 38, 38, 0.08);
--danger-bg-hover: rgba(220, 38, 38, 0.15);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
--katex-color: #1a1a1a;
}
[data-theme="dark"] {
--text-primary: rgba(255, 255, 255, 0.85);
--text-secondary: rgba(255, 255, 255, 0.5);
--text-tertiary: rgba(255, 255, 255, 0.4);
--text-faint: rgba(255, 255, 255, 0.25);
--text-heading: #fff;
--text-heading-secondary: rgba(255, 255, 255, 0.9);
--text-strong: rgba(255, 255, 255, 0.95);
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--bg-tertiary: #1e1e1e;
--bg-hover: rgba(255, 255, 255, 0.03);
--bg-overlay: rgba(0, 0, 0, 0.5);
--bg-tooltip: #1e1e2e;
--bg-surface: #1a1a1a;
--bg-code: rgba(255, 255, 255, 0.06);
--bg-code-block: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.1);
--border-light: rgba(255, 255, 255, 0.06);
--border-focus: rgba(149, 141, 241, 0.5);
--accent: #7c3aed;
--accent-light: #958DF1;
--accent-bg: rgba(149, 141, 241, 0.15);
--accent-bg-hover: rgba(149, 141, 241, 0.25);
--accent-text: #b4aef7;
--code-text: #e06c75;
--code-comment: #5c6370;
--code-keyword: #c678dd;
--code-string: #98c379;
--code-number: #d19a66;
--code-variable: #e06c75;
--code-type: #e5c07b;
--code-function: #61afef;
--code-tag: #e06c75;
--code-attr: #d19a66;
--code-symbol: #56b6c2;
--code-meta: #61afef;
--code-deletion: #e06c75;
--danger: #e06c75;
--danger-color: #e06c75;
--danger-bg: rgba(224, 108, 117, 0.12);
--danger-bg-hover: rgba(224, 108, 117, 0.25);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
--katex-color: rgba(255, 255, 255, 0.85);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--text-primary: rgba(255, 255, 255, 0.85);
--text-secondary: rgba(255, 255, 255, 0.5);
--text-tertiary: rgba(255, 255, 255, 0.4);
--text-faint: rgba(255, 255, 255, 0.25);
--text-heading: #fff;
--text-heading-secondary: rgba(255, 255, 255, 0.9);
--text-strong: rgba(255, 255, 255, 0.95);
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--bg-tertiary: #1e1e1e;
--bg-hover: rgba(255, 255, 255, 0.03);
--bg-overlay: rgba(0, 0, 0, 0.5);
--bg-tooltip: #1e1e2e;
--bg-surface: #1a1a1a;
--bg-code: rgba(255, 255, 255, 0.06);
--bg-code-block: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.1);
--border-light: rgba(255, 255, 255, 0.06);
--border-focus: rgba(149, 141, 241, 0.5);
--accent: #7c3aed;
--accent-light: #958DF1;
--accent-bg: rgba(149, 141, 241, 0.15);
--accent-bg-hover: rgba(149, 141, 241, 0.25);
--accent-text: #b4aef7;
--code-text: #e06c75;
--code-comment: #5c6370;
--code-keyword: #c678dd;
--code-string: #98c379;
--code-number: #d19a66;
--code-variable: #e06c75;
--code-type: #e5c07b;
--code-function: #61afef;
--code-tag: #e06c75;
--code-attr: #d19a66;
--code-symbol: #56b6c2;
--code-meta: #61afef;
--code-deletion: #e06c75;
--danger: #e06c75;
--danger-color: #e06c75;
--danger-bg: rgba(224, 108, 117, 0.12);
--danger-bg-hover: rgba(224, 108, 117, 0.25);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
--katex-color: rgba(255, 255, 255, 0.85);
}
}