pub const BG: &str = "#080808";
pub const PANEL: &str = "#0f0f0f";
pub const PANEL_2: &str = "#161616";
pub const BORDER: &str = "#1e1e1e";
pub const FG: &str = "#c8c8c8";
pub const MUTED: &str = "#555";
pub const ACCENT: &str = "#fff";
pub const USER: &str = "#777";
pub const ERROR: &str = "#a05050";
pub const LIGHT_BG: &str = "#f6f6f6";
pub const LIGHT_PANEL: &str = "#ededed";
pub const LIGHT_PANEL_2: &str = "#e3e3e3";
pub const LIGHT_BORDER: &str = "#d6d6d6";
pub const LIGHT_FG: &str = "#1a1a1a";
pub const LIGHT_MUTED: &str = "#8a8a8a";
pub const LIGHT_ACCENT: &str = "#000";
pub const LIGHT_USER: &str = "#666";
pub const LIGHT_ERROR: &str = "#8a3a3a";
pub const FONT_MONO: &str =
"'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace";
pub const CHROME_PAD: &str = "16px";
pub const SPACE_1: &str = "4px";
pub const SPACE_2: &str = "8px";
pub const SPACE_3: &str = "12px";
pub const SPACE_4: &str = "20px";
pub const Z_HEADER: &str = "30";
pub const Z_MODAL: &str = "100";
pub const Z_MENU: &str = "120";
pub const Z_DISPLAY: &str = "140";
pub const Z_API_KEY: &str = "150";
pub(crate) fn root_tokens_css() -> String {
format!(
":root {{\n\
\x20\x20color-scheme: dark;\n\
\x20\x20--bg: {BG};\n\
\x20\x20--panel: {PANEL};\n\
\x20\x20--panel-2: {PANEL_2};\n\
\x20\x20--border: {BORDER};\n\
\x20\x20--fg: {FG};\n\
\x20\x20--muted: {MUTED};\n\
\x20\x20--accent: {ACCENT};\n\
\x20\x20--user: {USER};\n\
\x20\x20--error: {ERROR};\n\
\x20\x20--font-mono: {FONT_MONO};\n\
\x20\x20--chrome-pad: {CHROME_PAD};\n\
\x20\x20--space-1: {SPACE_1};\n\
\x20\x20--space-2: {SPACE_2};\n\
\x20\x20--space-3: {SPACE_3};\n\
\x20\x20--space-4: {SPACE_4};\n\
\x20\x20--z-header: {Z_HEADER};\n\
\x20\x20--z-modal: {Z_MODAL};\n\
\x20\x20--z-menu: {Z_MENU};\n\
\x20\x20--z-display: {Z_DISPLAY};\n\
\x20\x20--z-api-key: {Z_API_KEY};\n\
}}\n\
html.theme-light {{\n\
\x20\x20color-scheme: light;\n\
\x20\x20--bg: {LIGHT_BG};\n\
\x20\x20--panel: {LIGHT_PANEL};\n\
\x20\x20--panel-2: {LIGHT_PANEL_2};\n\
\x20\x20--border: {LIGHT_BORDER};\n\
\x20\x20--fg: {LIGHT_FG};\n\
\x20\x20--muted: {LIGHT_MUTED};\n\
\x20\x20--accent: {LIGHT_ACCENT};\n\
\x20\x20--user: {LIGHT_USER};\n\
\x20\x20--error: {LIGHT_ERROR};\n\
}}\n"
)
}
#[cfg(test)]
mod tests {
use super::*;
#[test]
fn root_tokens_css_declares_the_core_palette() {
let css = root_tokens_css();
assert!(css.starts_with(":root {"));
assert!(css.trim_end().ends_with('}'));
for needle in [
"--bg: #080808",
"--fg: #c8c8c8",
"--border: #1e1e1e",
"--accent: #fff",
"--error: #a05050",
"--chrome-pad: 16px",
"color-scheme: dark",
] {
assert!(css.contains(needle), "missing token: {needle}");
}
}
#[test]
fn root_tokens_css_includes_a_light_theme_override() {
let css = root_tokens_css();
assert!(css.contains("html.theme-light {"));
assert!(css.contains("color-scheme: light"));
assert!(css.contains(&format!("--bg: {LIGHT_BG}")));
assert!(css.contains(&format!("--accent: {LIGHT_ACCENT}")));
}
}