237 lines
6.7 KiB
CSS
237 lines
6.7 KiB
CSS
/* ==========================================================================
|
|
Vantage documentation design tokens
|
|
|
|
The token block below is COPIED VERBATIM from site/app/globals.css - same
|
|
names, same values. adminsite/ holds a copy too, web/ holds the dark half,
|
|
and shared/mail/templates/layout.html.tmpl holds it a fifth time as literal
|
|
hex because email clients support neither var() nor prefers-color-scheme.
|
|
Nothing enforces the match automatically: change a token in one file and you
|
|
change it in all of them, in the same commit.
|
|
|
|
Everything below the token block maps Docusaurus's --ifm-* variables onto
|
|
these. No rule in this file, and no component in this app, may carry a hex
|
|
value outside the two token blocks.
|
|
|
|
Docusaurus always stamps data-theme on <html>, so unlike site/ there is no
|
|
prefers-color-scheme branch to keep in step - the theme toggle is the only
|
|
writer.
|
|
========================================================================== */
|
|
|
|
:root,
|
|
:root[data-theme="light"] {
|
|
--ground: #eaedf3;
|
|
--panel: #ffffff;
|
|
--panel-2: #f4f6fa;
|
|
--ink: #0a1b33;
|
|
--ink-2: #41556f;
|
|
--ink-3: #6c7f96;
|
|
--rule: #cdd6e2;
|
|
--rule-soft: #e0e6ef;
|
|
--accent: #0b2a58;
|
|
--accent-ink: #ffffff;
|
|
--up: #2f8a60;
|
|
--down: #c6462f;
|
|
--pend: #b0801f;
|
|
--shadow: 0 1px 0 rgba(10, 27, 51, 0.05), 0 18px 40px -26px rgba(10, 27, 51, 0.45);
|
|
--logo: #0b2a58;
|
|
|
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
|
|
|
|
--s--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.81rem);
|
|
--s-0: clamp(1rem, 0.97rem + 0.14vw, 1.05rem);
|
|
--s-1: clamp(1.16rem, 1.09rem + 0.32vw, 1.36rem);
|
|
--s-2: clamp(1.5rem, 1.34rem + 0.74vw, 2rem);
|
|
--s-3: clamp(2rem, 1.66rem + 1.6vw, 3.1rem);
|
|
--s-4: clamp(2.6rem, 1.9rem + 3.3vw, 4.9rem);
|
|
|
|
--rail: 1200px;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--ground: #071628;
|
|
--panel: #0d2138;
|
|
--panel-2: #102842;
|
|
--ink: #e4ecf6;
|
|
--ink-2: #9fb3ca;
|
|
--ink-3: #71879f;
|
|
--rule: #1e3855;
|
|
--rule-soft: #172c44;
|
|
--accent: #5b9be8;
|
|
--accent-ink: #04101f;
|
|
--up: #4fb484;
|
|
--down: #e2705a;
|
|
--pend: #d6a63f;
|
|
--shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 20px 44px -26px rgba(0, 0, 0, 0.85);
|
|
--logo: #7fb2f0;
|
|
}
|
|
|
|
/* ---------- Docusaurus mapping ---------- */
|
|
|
|
:root {
|
|
--ifm-color-primary: var(--accent);
|
|
--ifm-color-primary-dark: var(--accent);
|
|
--ifm-color-primary-darker: var(--accent);
|
|
--ifm-color-primary-darkest: var(--accent);
|
|
--ifm-color-primary-light: var(--accent);
|
|
--ifm-color-primary-lighter: var(--accent);
|
|
--ifm-color-primary-lightest: var(--accent);
|
|
|
|
--ifm-background-color: var(--ground);
|
|
--ifm-background-surface-color: var(--panel);
|
|
|
|
--ifm-font-family-base: var(--sans);
|
|
--ifm-font-family-monospace: var(--mono);
|
|
--ifm-font-size-base: var(--s-0);
|
|
--ifm-line-height-base: 1.65;
|
|
|
|
--ifm-heading-font-weight: 800;
|
|
--ifm-heading-line-height: 1.15;
|
|
--ifm-h1-font-size: var(--s-3);
|
|
--ifm-h2-font-size: var(--s-2);
|
|
--ifm-h3-font-size: var(--s-1);
|
|
|
|
--ifm-font-color-base: var(--ink);
|
|
--ifm-heading-color: var(--ink);
|
|
--ifm-link-color: var(--accent);
|
|
--ifm-link-hover-color: var(--accent);
|
|
--ifm-toc-link-color: var(--ink-2);
|
|
|
|
--ifm-navbar-background-color: var(--panel);
|
|
--ifm-navbar-shadow: none;
|
|
--ifm-navbar-link-color: var(--ink-2);
|
|
--ifm-navbar-link-hover-color: var(--ink);
|
|
|
|
--ifm-footer-background-color: var(--panel-2);
|
|
--ifm-footer-color: var(--ink-2);
|
|
--ifm-footer-link-color: var(--ink-2);
|
|
--ifm-footer-title-color: var(--ink);
|
|
|
|
--ifm-menu-color: var(--ink-2);
|
|
--ifm-menu-color-active: var(--accent);
|
|
--ifm-menu-color-background-active: var(--panel-2);
|
|
--ifm-menu-color-background-hover: var(--panel-2);
|
|
|
|
--ifm-toc-border-color: var(--rule-soft);
|
|
--ifm-hr-border-color: var(--rule-soft);
|
|
--ifm-table-border-color: var(--rule-soft);
|
|
--ifm-table-stripe-background: var(--panel-2);
|
|
--ifm-table-head-background: var(--panel-2);
|
|
|
|
--ifm-code-background: var(--panel-2);
|
|
--ifm-code-font-size: 0.88em;
|
|
--ifm-pre-background: var(--panel-2);
|
|
--ifm-blockquote-color: var(--ink-2);
|
|
--ifm-blockquote-border-color: var(--rule);
|
|
|
|
--ifm-global-radius: 4px;
|
|
--ifm-alert-border-radius: 4px;
|
|
--ifm-button-border-radius: 4px;
|
|
--ifm-global-shadow-lw: var(--shadow);
|
|
--ifm-global-shadow-md: var(--shadow);
|
|
|
|
--ifm-breadcrumb-color-active: var(--accent);
|
|
--ifm-breadcrumb-item-background-active: var(--panel-2);
|
|
|
|
--docusaurus-highlighted-code-line-bg: var(--rule-soft);
|
|
}
|
|
|
|
/* Admonitions carry the semantic three. They read by shape and label as well
|
|
as colour, which is the rule everywhere else in the product too. */
|
|
.theme-admonition-note,
|
|
.theme-admonition-info {
|
|
--ifm-alert-background-color: var(--panel-2);
|
|
--ifm-alert-border-color: var(--rule);
|
|
--ifm-alert-foreground-color: var(--ink);
|
|
}
|
|
|
|
.theme-admonition-tip {
|
|
--ifm-alert-background-color: var(--panel-2);
|
|
--ifm-alert-border-color: var(--up);
|
|
--ifm-alert-foreground-color: var(--ink);
|
|
}
|
|
|
|
.theme-admonition-warning {
|
|
--ifm-alert-background-color: var(--panel-2);
|
|
--ifm-alert-border-color: var(--pend);
|
|
--ifm-alert-foreground-color: var(--ink);
|
|
}
|
|
|
|
.theme-admonition-danger {
|
|
--ifm-alert-background-color: var(--panel-2);
|
|
--ifm-alert-border-color: var(--down);
|
|
--ifm-alert-foreground-color: var(--ink);
|
|
}
|
|
|
|
/* ---------- small corrections ---------- */
|
|
|
|
.navbar {
|
|
border-bottom: 1px solid var(--rule-soft);
|
|
}
|
|
|
|
.navbar__title {
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid var(--rule-soft);
|
|
}
|
|
|
|
.markdown h1,
|
|
.markdown h2,
|
|
.markdown h3 {
|
|
letter-spacing: -0.03em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.markdown h2 {
|
|
margin-top: 2.4rem;
|
|
padding-top: 1.6rem;
|
|
border-top: 1px solid var(--rule-soft);
|
|
}
|
|
|
|
.markdown > p,
|
|
.markdown li {
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
.markdown strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Machine output - install one-liners, key blobs, run logs - sits on a floor
|
|
beneath the panel, the same distinction web/ draws with --well. */
|
|
.theme-code-block {
|
|
border: 1px solid var(--rule-soft);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
table {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu {
|
|
font-size: var(--s--1);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.menu__list-item-collapsible .menu__link--sane,
|
|
.menu__link {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* The reference tables in Reference/ are wide by nature; they scroll inside
|
|
their own container rather than pushing the page sideways. */
|
|
.markdown table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
}
|