86 lines
2.7 KiB
CSS
86 lines
2.7 KiB
CSS
|
/*
|
||
|
|
* An Honest Host brand tokens, mapped onto Starlight's CSS custom properties.
|
||
|
|
* Source palette: design spec § 8.
|
||
|
|
*/
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* Brand palette — constants across modes */
|
||
|
|
--anhh-primary: #1a56db;
|
||
|
|
--anhh-primary-hover: #2563eb;
|
||
|
|
--anhh-accent: #00d4aa;
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
--sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
|
||
|
|
--sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
|
||
|
|
|
||
|
|
/* Map brand → Starlight accent (both modes) */
|
||
|
|
--sl-color-accent: var(--anhh-primary);
|
||
|
|
--sl-color-accent-high: var(--anhh-primary-hover);
|
||
|
|
--sl-color-accent-low: rgba(26, 86, 219, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dark mode — Starlight default */
|
||
|
|
:root,
|
||
|
|
:root[data-theme='dark'] {
|
||
|
|
--anhh-bg: #0a1628;
|
||
|
|
--anhh-bg-elevated: #111827;
|
||
|
|
--anhh-bg-surface: #1e293b;
|
||
|
|
--anhh-text-primary: #f0f4ff;
|
||
|
|
--anhh-text-secondary: #94a3b8;
|
||
|
|
--anhh-text-muted: #64748b;
|
||
|
|
--anhh-border-color: #334155;
|
||
|
|
--anhh-accent-dim: rgba(0, 212, 170, 0.1);
|
||
|
|
--anhh-accent-border: rgba(0, 212, 170, 0.2);
|
||
|
|
|
||
|
|
--sl-color-bg: var(--anhh-bg);
|
||
|
|
--sl-color-bg-nav: var(--anhh-bg-elevated);
|
||
|
|
--sl-color-bg-sidebar: var(--anhh-bg-elevated);
|
||
|
|
--sl-color-bg-inline-code: var(--anhh-bg-surface);
|
||
|
|
--sl-color-text: var(--anhh-text-primary);
|
||
|
|
--sl-color-text-accent: var(--anhh-accent);
|
||
|
|
--sl-color-gray-1: var(--anhh-text-primary);
|
||
|
|
--sl-color-gray-2: var(--anhh-text-secondary);
|
||
|
|
--sl-color-gray-3: var(--anhh-text-muted);
|
||
|
|
--sl-color-gray-4: var(--anhh-border-color);
|
||
|
|
--sl-color-hairline: var(--anhh-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Light mode */
|
||
|
|
:root[data-theme='light'] {
|
||
|
|
--anhh-bg: #f0f4ff;
|
||
|
|
--anhh-bg-elevated: #ffffff;
|
||
|
|
--anhh-bg-surface: #e2e8f0;
|
||
|
|
--anhh-text-primary: #0f172a;
|
||
|
|
--anhh-text-secondary: #475569;
|
||
|
|
--anhh-text-muted: #94a3b8;
|
||
|
|
--anhh-border-color: #cbd5e1;
|
||
|
|
--anhh-accent-dim: rgba(0, 212, 170, 0.08);
|
||
|
|
--anhh-accent-border: rgba(0, 212, 170, 0.3);
|
||
|
|
|
||
|
|
--sl-color-bg: var(--anhh-bg);
|
||
|
|
--sl-color-bg-nav: var(--anhh-bg-elevated);
|
||
|
|
--sl-color-bg-sidebar: var(--anhh-bg-elevated);
|
||
|
|
--sl-color-bg-inline-code: var(--anhh-bg-surface);
|
||
|
|
--sl-color-text: var(--anhh-text-primary);
|
||
|
|
--sl-color-text-accent: var(--anhh-accent);
|
||
|
|
--sl-color-gray-1: var(--anhh-text-primary);
|
||
|
|
--sl-color-gray-2: var(--anhh-text-secondary);
|
||
|
|
--sl-color-gray-3: var(--anhh-text-muted);
|
||
|
|
--sl-color-gray-4: var(--anhh-border-color);
|
||
|
|
--sl-color-hairline: var(--anhh-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Accent-teal callout — used by paid-addon-callout.mdx, support-link.mdx, tip <Aside>s */
|
||
|
|
.anhh-accent-callout {
|
||
|
|
background: var(--anhh-accent-dim);
|
||
|
|
border: 1px solid var(--anhh-accent-border);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
padding: 1rem 1.25rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tighten body line-height a touch for docs density */
|
||
|
|
body {
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|