SashegDev
874b6f20c2
Основа — Horizon (MIT). История апстрима не переносится: этот репозиторий ведёт свою.
168 lines
4.1 KiB
CSS
168 lines
4.1 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;
|
|
--font: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "Geist Mono", ui-monospace, monospace;
|
|
--pixel: "Pixelify Sans", "Geist", 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;
|
|
--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;
|
|
--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;
|
|
}
|
|
}
|
|
|
|
: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;
|
|
}
|