mirror of
https://github.com/horizon-rust/horizon.git
synced 2026-11-07 02:56:17 -10:00
oxi-does-dev
014f25363a
Adds the Nord palette (polar night, snow storm, frost) as a launcher theme with its own dark and light tokens and sky art. Palette themes draw the square Blocks look: no glass, no rounded corners. The night tokens are square everywhere, and the Blocks status dots and controls follow. Blocks and the light glass look draw the baked sky, so resizing no longer rebakes the scene per frame and stays responsive. Settings gains the launcher-theme picker in the Blocks look. Nord now shows the sky instead of the scene's pale halo.
282 lines
7.6 KiB
CSS
282 lines
7.6 KiB
CSS
/* Generated from crates/horizon-theme by `cargo run -p xtask -- tokens`; do not edit.
|
|
docs/design-system.md describes the tokens. */
|
|
|
|
:root {
|
|
--page: #ece7f7;
|
|
--plate-soft: #e9e3f8;
|
|
--plate: #ddd4f3;
|
|
--surface: #f8f6fd;
|
|
--rule: #e4ddf4;
|
|
--ink: #1b1530;
|
|
--ink-soft: #3b3354;
|
|
--muted: #585071;
|
|
--accent: #5333c9;
|
|
--on-accent: #ffffff;
|
|
--danger: #a3301d;
|
|
--success: #136336;
|
|
--warn: #7a4f00;
|
|
--side: #e2dbf2;
|
|
--panel: #f8f6fd;
|
|
--raised: #e9e3f8;
|
|
--button: #ddd4f3;
|
|
--button-bevel: #f4f0fe;
|
|
--well: #f3f0fb;
|
|
--bevel: #ffffff;
|
|
--lip: #c3b8e2;
|
|
--outline: #2b2244;
|
|
--face: #5b3fd6;
|
|
--face-bevel: #8069ef;
|
|
--face-lip: #3a2694;
|
|
--on-face: #ffffff;
|
|
color-scheme: light;
|
|
--night-sky-0: #c9d3f2;
|
|
--night-sky-1: #dcd8f3;
|
|
--night-sky-2: #ead5ec;
|
|
--night-sky-3: #f5d3d8;
|
|
--night-sky-4: #f9d6bd;
|
|
--night-sky-5: #fbe4c6;
|
|
--night-page: #e9e6f6;
|
|
--night-side: #e1ddf1;
|
|
--night-ink: #1b1530;
|
|
--night-ink-soft: #3b3354;
|
|
--night-muted: #585071;
|
|
--night-accent: #5b3fd6;
|
|
--night-accent-hi: #5333c9;
|
|
--night-on-accent: #ffffff;
|
|
--night-success: #136336;
|
|
--night-warn: #7a4f00;
|
|
--night-danger: #a3301d;
|
|
--night-card: rgba(253, 252, 255, 0.86);
|
|
--night-card-hi: rgba(255, 255, 255, 0.94);
|
|
--night-stroke: rgba(59, 47, 120, 0.12);
|
|
--night-rule: rgba(59, 47, 120, 0.1);
|
|
--glass-accent: #6b4bff;
|
|
--glass-accent-soft: #a9a9ff;
|
|
--glass-base: #1b1830;
|
|
--glass-on-accent: #ffffff;
|
|
--glass-page: #0a0919;
|
|
--glass-live: #4ade80;
|
|
--glass-warn: #f2c46b;
|
|
--glass-danger: #ff8a8a;
|
|
--glass-plate: rgba(78, 76, 95, 0.267);
|
|
--glass-blur: 24px;
|
|
--font: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "Geist Mono", ui-monospace, monospace;
|
|
--pixel: "Pixelify Sans", "Geist", ui-sans-serif, sans-serif;
|
|
--night-font: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif;
|
|
--night-display-font: "Bricolage Grotesque Display", "Bricolage Grotesque", ui-sans-serif, sans-serif;
|
|
--block-outline: 2px;
|
|
--block-bevel: 2px;
|
|
--block-lip: 4px;
|
|
--text-micro: 11px;
|
|
--text-micro-line: 1.5;
|
|
--text-micro-tracking: 0.04em;
|
|
--text-micro-weight: 400;
|
|
--text-caption: 12px;
|
|
--text-caption-line: 1.5;
|
|
--text-caption-tracking: 0em;
|
|
--text-caption-weight: 400;
|
|
--text-label: 13px;
|
|
--text-label-line: 1.5;
|
|
--text-label-tracking: 0em;
|
|
--text-label-weight: 400;
|
|
--text-ui: 14px;
|
|
--text-ui-line: 1.5;
|
|
--text-ui-tracking: 0em;
|
|
--text-ui-weight: 400;
|
|
--text-body: clamp(15px, calc(15px + 2 * (100vw - 375px) / 1065), 17px);
|
|
--text-body-line: 1.6;
|
|
--text-body-tracking: 0em;
|
|
--text-body-weight: 400;
|
|
--text-heading: clamp(20px, calc(20px + 4 * (100vw - 375px) / 1065), 24px);
|
|
--text-heading-line: 1.3;
|
|
--text-heading-tracking: -0.01em;
|
|
--text-heading-weight: 500;
|
|
--text-title: clamp(32px, calc(32px + 16 * (100vw - 375px) / 1065), 48px);
|
|
--text-title-line: 1.05;
|
|
--text-title-tracking: -0.02em;
|
|
--text-title-weight: 500;
|
|
--text-display: clamp(34px, calc(34px + 30 * (100vw - 375px) / 1065), 64px);
|
|
--text-display-line: 1.05;
|
|
--text-display-tracking: -0.025em;
|
|
--text-display-weight: 500;
|
|
--text-wordmark: 18vw;
|
|
--text-wordmark-line: 0.8;
|
|
--text-wordmark-tracking: -0.04em;
|
|
--text-wordmark-weight: 500;
|
|
--text-night-display: clamp(40px, calc(40px + 32 * (100vw - 375px) / 1065), 72px);
|
|
--text-night-display-line: 1;
|
|
--text-night-display-tracking: -0.035em;
|
|
--text-night-display-weight: 700;
|
|
--text-night-title: 20px;
|
|
--text-night-title-line: 1.25;
|
|
--text-night-title-tracking: -0.01em;
|
|
--text-night-title-weight: 700;
|
|
--text-night-ui: 14px;
|
|
--text-night-ui-line: 1.45;
|
|
--text-night-ui-tracking: -0.005em;
|
|
--text-night-ui-weight: 500;
|
|
--text-night-caption: 12px;
|
|
--text-night-caption-line: 1.4;
|
|
--text-night-caption-tracking: 0em;
|
|
--text-night-caption-weight: 400;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-7: 48px;
|
|
--space-8: 64px;
|
|
--space-9: 96px;
|
|
--gutter: 64px;
|
|
--gutter-narrow: 16px;
|
|
--radius: 8px;
|
|
--radius-plate: 12px;
|
|
--radius-pill: 999px;
|
|
--rule-width: 1px;
|
|
--control: 32px;
|
|
--control-large: 40px;
|
|
--segment: 28px;
|
|
--field: 36px;
|
|
--row: 86px;
|
|
--index: 40px;
|
|
--plate-bleed: 16px;
|
|
--rise: 8px;
|
|
--night-pixel-corner: 0px;
|
|
--night-radius-control: 0px;
|
|
--night-play: 56px;
|
|
--measure: 56ch;
|
|
--quick: 150ms;
|
|
--ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--move: 240ms;
|
|
--ease-move: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--enter: 600ms;
|
|
--ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--stagger: 40ms;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--page: #0f0d17;
|
|
--plate-soft: #221e34;
|
|
--plate: #2b2641;
|
|
--surface: #1a1727;
|
|
--rule: #120f1c;
|
|
--ink: #ecedf3;
|
|
--ink-soft: #c5c7d1;
|
|
--muted: #a29cb8;
|
|
--accent: #9a86ff;
|
|
--on-accent: #ffffff;
|
|
--danger: #f07a68;
|
|
--success: #45c27a;
|
|
--warn: #f0b84f;
|
|
--side: #0b0a11;
|
|
--panel: #1a1727;
|
|
--raised: #221e34;
|
|
--button: #2b2641;
|
|
--button-bevel: #3d3560;
|
|
--well: #0c0b12;
|
|
--bevel: #342d52;
|
|
--lip: #07060b;
|
|
--outline: #05040a;
|
|
--face: #5b3fd6;
|
|
--face-bevel: #8a74ff;
|
|
--face-lip: #3a2694;
|
|
--on-face: #ffffff;
|
|
color-scheme: dark;
|
|
--night-sky-0: #07061a;
|
|
--night-sky-1: #140f38;
|
|
--night-sky-2: #2a1656;
|
|
--night-sky-3: #5b2a78;
|
|
--night-sky-4: #b0477d;
|
|
--night-sky-5: #f08a5d;
|
|
--night-page: #0e0b26;
|
|
--night-side: #0a0820;
|
|
--night-ink: #f4f2ff;
|
|
--night-ink-soft: #cfc9ea;
|
|
--night-muted: #a59fc6;
|
|
--night-accent: #7656fa;
|
|
--night-accent-hi: #a08cff;
|
|
--night-on-accent: #ffffff;
|
|
--night-success: #5fd39a;
|
|
--night-warn: #f5b45a;
|
|
--night-danger: #ff8a78;
|
|
--night-card: rgba(21, 17, 46, 0.84);
|
|
--night-card-hi: rgba(35, 28, 74, 0.9);
|
|
--night-stroke: rgba(185, 172, 255, 0.12);
|
|
--night-rule: rgba(185, 172, 255, 0.1);
|
|
--glass-accent: #6b4bff;
|
|
--glass-accent-soft: #a9a9ff;
|
|
--glass-base: #1b1830;
|
|
--glass-on-accent: #ffffff;
|
|
--glass-page: #0a0919;
|
|
--glass-live: #4ade80;
|
|
--glass-warn: #f2c46b;
|
|
--glass-danger: #ff8a8a;
|
|
--glass-plate: rgba(78, 76, 95, 0.267);
|
|
--glass-blur: 24px;
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--page: #0f0d17;
|
|
--plate-soft: #221e34;
|
|
--plate: #2b2641;
|
|
--surface: #1a1727;
|
|
--rule: #120f1c;
|
|
--ink: #ecedf3;
|
|
--ink-soft: #c5c7d1;
|
|
--muted: #a29cb8;
|
|
--accent: #9a86ff;
|
|
--on-accent: #ffffff;
|
|
--danger: #f07a68;
|
|
--success: #45c27a;
|
|
--warn: #f0b84f;
|
|
--side: #0b0a11;
|
|
--panel: #1a1727;
|
|
--raised: #221e34;
|
|
--button: #2b2641;
|
|
--button-bevel: #3d3560;
|
|
--well: #0c0b12;
|
|
--bevel: #342d52;
|
|
--lip: #07060b;
|
|
--outline: #05040a;
|
|
--face: #5b3fd6;
|
|
--face-bevel: #8a74ff;
|
|
--face-lip: #3a2694;
|
|
--on-face: #ffffff;
|
|
color-scheme: dark;
|
|
--night-sky-0: #07061a;
|
|
--night-sky-1: #140f38;
|
|
--night-sky-2: #2a1656;
|
|
--night-sky-3: #5b2a78;
|
|
--night-sky-4: #b0477d;
|
|
--night-sky-5: #f08a5d;
|
|
--night-page: #0e0b26;
|
|
--night-side: #0a0820;
|
|
--night-ink: #f4f2ff;
|
|
--night-ink-soft: #cfc9ea;
|
|
--night-muted: #a59fc6;
|
|
--night-accent: #7656fa;
|
|
--night-accent-hi: #a08cff;
|
|
--night-on-accent: #ffffff;
|
|
--night-success: #5fd39a;
|
|
--night-warn: #f5b45a;
|
|
--night-danger: #ff8a78;
|
|
--night-card: rgba(21, 17, 46, 0.84);
|
|
--night-card-hi: rgba(35, 28, 74, 0.9);
|
|
--night-stroke: rgba(185, 172, 255, 0.12);
|
|
--night-rule: rgba(185, 172, 255, 0.1);
|
|
--glass-accent: #6b4bff;
|
|
--glass-accent-soft: #a9a9ff;
|
|
--glass-base: #1b1830;
|
|
--glass-on-accent: #ffffff;
|
|
--glass-page: #0a0919;
|
|
--glass-live: #4ade80;
|
|
--glass-warn: #f2c46b;
|
|
--glass-danger: #ff8a8a;
|
|
--glass-plate: rgba(78, 76, 95, 0.267);
|
|
--glass-blur: 24px;
|
|
}
|