478 lines
15 KiB
CSS
478 lines
15 KiB
CSS
/* ============================================================
|
|
tesanti — Obsidian theme
|
|
Port of the tesanti Design System.
|
|
Minimal, editorial, high-contrast. Swiss-influenced.
|
|
Palette: black, white, one signal red (#e1261c) — used sparingly.
|
|
Type: Space Grotesk (display) · Inter (body/UI) · JetBrains Mono (data/eyebrows)
|
|
Borders carry the weight; shadows are near-absent.
|
|
============================================================ */
|
|
|
|
/* --- Webfonts (Google-hosted; degrade to system fonts offline) --- */
|
|
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
|
|
|
|
/* ============================================================
|
|
1. SHARED TOKENS (mode-independent)
|
|
Fonts, type scale, radii, borders, motion.
|
|
============================================================ */
|
|
body {
|
|
/* ---- Accent: signal red #e1261c expressed as HSL so Obsidian derives
|
|
interactive-accent, text-accent, checkboxes, focus, etc. from one source ---- */
|
|
--accent-h: 3;
|
|
--accent-s: 78%;
|
|
--accent-l: 50%;
|
|
|
|
/* ---- Font families ---- */
|
|
--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
--font-text-theme: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
--font-interface-theme: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
--font-monospace-theme: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
|
|
--font-text-size: 16px;
|
|
--line-height-normal: 1.5;
|
|
--line-height-tight: 1.2;
|
|
|
|
/* ---- Headings: display face, medium weight, tight tracking ---- */
|
|
--h1-font: var(--font-display);
|
|
--h2-font: var(--font-display);
|
|
--h3-font: var(--font-display);
|
|
--h4-font: var(--font-interface-theme);
|
|
--h5-font: var(--font-interface-theme);
|
|
--h6-font: var(--font-monospace-theme);
|
|
|
|
--h1-weight: 500;
|
|
--h2-weight: 500;
|
|
--h3-weight: 500;
|
|
--h4-weight: 600;
|
|
--h5-weight: 600;
|
|
--h6-weight: 500;
|
|
|
|
--h1-size: 2.25em;
|
|
--h2-size: 1.7em;
|
|
--h3-size: 1.35em;
|
|
--h4-size: 1.12em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.8em;
|
|
|
|
--h1-line-height: 1.08;
|
|
--h2-line-height: 1.12;
|
|
--h3-line-height: 1.2;
|
|
|
|
/* ---- Radii: small. 6px is the maximum; cards/tags near-square ---- */
|
|
--radius-s: 2px;
|
|
--radius-m: 4px;
|
|
--radius-l: 6px;
|
|
--radius-xl: 8px;
|
|
--input-radius: 6px;
|
|
--button-radius: 6px;
|
|
--tab-radius: 4px;
|
|
--tab-radius-active: 4px;
|
|
--modal-radius: 6px;
|
|
--checkbox-radius: 2px;
|
|
--toggle-radius: 999px; /* the one place a pill is allowed */
|
|
--slider-thumb-radius: 999px;
|
|
--meta-property-radius: 2px;
|
|
|
|
/* ---- Borders: 1px hairline everywhere ---- */
|
|
--border-width: 1px;
|
|
--divider-width: 1px;
|
|
--tab-outline-width: 1px;
|
|
|
|
/* ---- Tags rendered as the signature mono all-caps eyebrow chip ---- */
|
|
--tag-weight: 500;
|
|
--tag-border-width: 1px;
|
|
--tag-radius: 2px;
|
|
--tag-decoration: none;
|
|
--tag-decoration-hover: none;
|
|
|
|
/* ---- Links: red, underline slides in on hover (no permanent rule) ---- */
|
|
--link-decoration: none;
|
|
--link-decoration-hover: underline;
|
|
--link-decoration-thickness: 1px;
|
|
--link-external-decoration: none;
|
|
--link-external-decoration-hover: underline;
|
|
|
|
/* ---- Blockquote: a black hairline rule, not a tinted block ---- */
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-font-style: normal;
|
|
|
|
/* ---- Callouts: hairline-bordered, low-key, editorial ---- */
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 1;
|
|
--callout-radius: 4px;
|
|
--callout-title-weight: 600;
|
|
|
|
/* ---- Horizontal rule: a single hairline ---- */
|
|
--hr-thickness: 1px;
|
|
|
|
/* ---- Red caret — a status LED for the cursor ---- */
|
|
--caret-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* ============================================================
|
|
2. LIGHT — the brand-true default (white canvas, ~95% of surface)
|
|
============================================================ */
|
|
.theme-light {
|
|
/* Ink ramp */
|
|
--ink-000: #ffffff;
|
|
--ink-050: #f7f7f7;
|
|
--ink-100: #ececec;
|
|
--ink-200: #d9d9d9;
|
|
--ink-300: #b8b8b8;
|
|
--ink-400: #8a8a8a;
|
|
--ink-500: #5e5e5e;
|
|
--ink-600: #3d3d3d;
|
|
--ink-700: #262626;
|
|
--ink-900: #0a0a0a;
|
|
|
|
/* Surfaces — content is white, chrome is a half-step off-white,
|
|
separation carried by hairlines (see tesanti app UI kit) */
|
|
--background-primary: var(--ink-000);
|
|
--background-primary-alt: var(--ink-050);
|
|
--background-secondary: var(--ink-050);
|
|
--background-secondary-alt: var(--ink-100);
|
|
|
|
--background-modifier-hover: rgba(10, 10, 10, 0.045);
|
|
--background-modifier-active-hover: rgba(10, 10, 10, 0.075);
|
|
--background-modifier-border: var(--ink-200);
|
|
--background-modifier-border-hover: var(--ink-300);
|
|
--background-modifier-border-focus: var(--interactive-accent);
|
|
--background-modifier-form-field: var(--ink-000);
|
|
|
|
/* Text */
|
|
--text-normal: var(--ink-900);
|
|
--text-muted: var(--ink-500);
|
|
--text-faint: var(--ink-400);
|
|
--text-on-accent: #ffffff;
|
|
--text-accent: var(--interactive-accent);
|
|
--text-accent-hover: #c31c14;
|
|
|
|
--text-selection: hsla(3, 78%, 50%, 0.16);
|
|
--text-highlight-bg: hsla(48, 100%, 50%, 0.28);
|
|
|
|
--bold-color: var(--ink-900);
|
|
--italic-color: var(--text-normal);
|
|
|
|
/* Interactive */
|
|
--interactive-normal: var(--ink-050);
|
|
--interactive-hover: var(--ink-100);
|
|
--interactive-accent-hover: #c31c14;
|
|
|
|
/* Structure */
|
|
--divider-color: var(--ink-200);
|
|
--hr-color: var(--ink-200);
|
|
|
|
/* Headings — near-black, uniform */
|
|
--h1-color: var(--ink-900);
|
|
--h2-color: var(--ink-900);
|
|
--h3-color: var(--ink-900);
|
|
--h4-color: var(--ink-900);
|
|
--h5-color: var(--ink-900);
|
|
--h6-color: var(--ink-500);
|
|
--heading-formatting: var(--ink-300);
|
|
|
|
/* Links */
|
|
--link-color: var(--interactive-accent);
|
|
--link-color-hover: #c31c14;
|
|
--link-external-color: var(--interactive-accent);
|
|
--link-external-color-hover: #c31c14;
|
|
--link-unresolved-color: var(--ink-400);
|
|
--link-unresolved-opacity: 1;
|
|
|
|
/* Tags */
|
|
--tag-color: var(--ink-500);
|
|
--tag-color-hover: var(--ink-900);
|
|
--tag-background: transparent;
|
|
--tag-background-hover: var(--ink-050);
|
|
--tag-border-color: var(--ink-200);
|
|
--tag-border-color-hover: var(--interactive-accent);
|
|
|
|
/* Code */
|
|
--code-background: var(--ink-050);
|
|
--code-normal: var(--ink-700);
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: var(--ink-900);
|
|
--blockquote-color: var(--ink-500);
|
|
--blockquote-background-color: transparent;
|
|
|
|
/* Navigation */
|
|
--nav-item-color: var(--ink-600);
|
|
--nav-item-color-hover: var(--ink-900);
|
|
--nav-item-color-active: var(--ink-900);
|
|
--nav-item-background-hover: rgba(10, 10, 10, 0.045);
|
|
--nav-item-background-active: var(--ink-100);
|
|
--nav-item-weight-active: 500;
|
|
--nav-indentation-guide-color: var(--ink-100);
|
|
|
|
/* Chrome */
|
|
--titlebar-background: var(--ink-050);
|
|
--titlebar-background-focused: var(--ink-000);
|
|
--titlebar-text-color: var(--ink-500);
|
|
--ribbon-background: var(--ink-050);
|
|
--tab-background-active: var(--ink-000);
|
|
--tab-text-color-focused-active: var(--ink-900);
|
|
--tab-outline-color: var(--ink-200);
|
|
--status-bar-background: var(--ink-050);
|
|
--status-bar-text-color: var(--ink-500);
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-thumb-bg: rgba(10, 10, 10, 0.16);
|
|
--scrollbar-active-thumb-bg: rgba(10, 10, 10, 0.32);
|
|
--scrollbar-bg: transparent;
|
|
|
|
/* Restrained shadows — a hairline where a shadow would do */
|
|
--shadow-s: 0 1px 0 rgba(0, 0, 0, 0.04);
|
|
--shadow-l: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
|
/* Graph view */
|
|
--graph-line: var(--ink-200);
|
|
--graph-node: var(--ink-700);
|
|
--graph-node-focused: var(--interactive-accent);
|
|
--graph-node-tag: var(--interactive-accent);
|
|
--graph-node-unresolved: var(--ink-300);
|
|
}
|
|
|
|
/* ============================================================
|
|
3. DARK — inverted ink ramp. Black canvas, same signal red.
|
|
============================================================ */
|
|
.theme-dark {
|
|
/* Ink ramp (inverted usage) */
|
|
--ink-000: #ffffff;
|
|
--ink-050: #f7f7f7;
|
|
--ink-100: #ececec;
|
|
--ink-200: #b8b8b8;
|
|
--ink-400: #8a8a8a;
|
|
--ink-500: #5e5e5e;
|
|
--ink-600: #3d3d3d;
|
|
--ink-700: #262626;
|
|
--ink-800: #161616;
|
|
--ink-900: #0a0a0a;
|
|
--ink-999: #000000;
|
|
|
|
/* Surfaces — content near-black, chrome pure black; hairlines separate */
|
|
--background-primary: var(--ink-900);
|
|
--background-primary-alt: var(--ink-800);
|
|
--background-secondary: var(--ink-999);
|
|
--background-secondary-alt: var(--ink-800);
|
|
|
|
--background-modifier-hover: rgba(236, 236, 236, 0.06);
|
|
--background-modifier-active-hover: rgba(236, 236, 236, 0.10);
|
|
--background-modifier-border: var(--ink-700);
|
|
--background-modifier-border-hover: var(--ink-600);
|
|
--background-modifier-border-focus: var(--interactive-accent);
|
|
--background-modifier-form-field: var(--ink-800);
|
|
|
|
/* Text */
|
|
--text-normal: var(--ink-100);
|
|
--text-muted: var(--ink-400);
|
|
--text-faint: var(--ink-500);
|
|
--text-on-accent: #ffffff;
|
|
--text-accent: var(--interactive-accent);
|
|
--text-accent-hover: #ff4d43;
|
|
|
|
--text-selection: hsla(3, 78%, 50%, 0.30);
|
|
--text-highlight-bg: hsla(48, 100%, 50%, 0.30);
|
|
|
|
--bold-color: #ffffff;
|
|
--italic-color: var(--text-normal);
|
|
|
|
/* Interactive */
|
|
--interactive-normal: var(--ink-800);
|
|
--interactive-hover: var(--ink-700);
|
|
--interactive-accent-hover: #ff4d43;
|
|
|
|
/* Structure */
|
|
--divider-color: var(--ink-700);
|
|
--hr-color: var(--ink-700);
|
|
|
|
/* Headings */
|
|
--h1-color: var(--ink-050);
|
|
--h2-color: var(--ink-050);
|
|
--h3-color: var(--ink-050);
|
|
--h4-color: var(--ink-050);
|
|
--h5-color: var(--ink-050);
|
|
--h6-color: var(--ink-400);
|
|
--heading-formatting: var(--ink-600);
|
|
|
|
/* Links */
|
|
--link-color: var(--interactive-accent);
|
|
--link-color-hover: #ff4d43;
|
|
--link-external-color: var(--interactive-accent);
|
|
--link-external-color-hover: #ff4d43;
|
|
--link-unresolved-color: var(--ink-500);
|
|
--link-unresolved-opacity: 1;
|
|
|
|
/* Tags */
|
|
--tag-color: var(--ink-400);
|
|
--tag-color-hover: var(--ink-050);
|
|
--tag-background: transparent;
|
|
--tag-background-hover: var(--ink-800);
|
|
--tag-border-color: var(--ink-700);
|
|
--tag-border-color-hover: var(--interactive-accent);
|
|
|
|
/* Code */
|
|
--code-background: var(--ink-800);
|
|
--code-normal: var(--ink-200);
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: var(--ink-100);
|
|
--blockquote-color: var(--ink-400);
|
|
--blockquote-background-color: transparent;
|
|
|
|
/* Navigation */
|
|
--nav-item-color: var(--ink-400);
|
|
--nav-item-color-hover: var(--ink-050);
|
|
--nav-item-color-active: var(--ink-050);
|
|
--nav-item-background-hover: rgba(236, 236, 236, 0.06);
|
|
--nav-item-background-active: var(--ink-800);
|
|
--nav-item-weight-active: 500;
|
|
--nav-indentation-guide-color: var(--ink-800);
|
|
|
|
/* Chrome */
|
|
--titlebar-background: var(--ink-999);
|
|
--titlebar-background-focused: var(--ink-900);
|
|
--titlebar-text-color: var(--ink-400);
|
|
--ribbon-background: var(--ink-999);
|
|
--tab-background-active: var(--ink-900);
|
|
--tab-text-color-focused-active: var(--ink-050);
|
|
--tab-outline-color: var(--ink-700);
|
|
--status-bar-background: var(--ink-999);
|
|
--status-bar-text-color: var(--ink-400);
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-thumb-bg: rgba(236, 236, 236, 0.14);
|
|
--scrollbar-active-thumb-bg: rgba(236, 236, 236, 0.30);
|
|
--scrollbar-bg: transparent;
|
|
|
|
/* Shadows — deeper on black, still short and uncolored */
|
|
--shadow-s: 0 1px 0 rgba(0, 0, 0, 0.4);
|
|
--shadow-l: 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Graph view */
|
|
--graph-line: var(--ink-700);
|
|
--graph-node: var(--ink-200);
|
|
--graph-node-focused: var(--interactive-accent);
|
|
--graph-node-tag: var(--interactive-accent);
|
|
--graph-node-unresolved: var(--ink-600);
|
|
}
|
|
|
|
/* ============================================================
|
|
4. COMPONENT POLISH — the bits variables alone can't express
|
|
============================================================ */
|
|
|
|
/* ---- Headings: tight display tracking (Swiss editorial) ---- */
|
|
.markdown-rendered :is(h1, h2, h3),
|
|
.cm-s-obsidian :is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3) {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.markdown-rendered :is(h4, h5),
|
|
.cm-s-obsidian :is(.HyperMD-header-4, .HyperMD-header-5) {
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
/* h6 becomes a muted mono eyebrow (all-caps, wide-tracked) */
|
|
.markdown-rendered h6,
|
|
.cm-s-obsidian .HyperMD-header-6 .cm-header-6 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
font-family: var(--font-monospace-theme);
|
|
}
|
|
|
|
/* ---- Tags: the signature all-caps mono eyebrow chip with a red dot ---- */
|
|
.markdown-rendered a.tag,
|
|
.cm-s-obsidian .cm-hashtag {
|
|
font-family: var(--font-monospace-theme);
|
|
font-size: 0.72em;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.11em;
|
|
line-height: 1;
|
|
padding: 0.28em 0.55em;
|
|
border: 1px solid var(--tag-border-color);
|
|
border-radius: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
/* Reading view — red leading dot ( • SOURCE ) */
|
|
.markdown-rendered a.tag::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
margin-right: 0.5em;
|
|
border-radius: 999px;
|
|
background: var(--interactive-accent);
|
|
vertical-align: middle;
|
|
}
|
|
/* Live-preview hashtag: seam the split # + name and tint the # red as the "dot" */
|
|
.cm-s-obsidian .cm-hashtag-begin {
|
|
border-right: none;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
color: var(--interactive-accent);
|
|
padding-right: 0;
|
|
}
|
|
.cm-s-obsidian .cm-hashtag-end {
|
|
border-left: none;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding-left: 0.4em;
|
|
}
|
|
|
|
/* ---- Inline code & code blocks: hairline-bordered gray panels ---- */
|
|
.markdown-rendered code {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: 0.12em 0.35em;
|
|
}
|
|
.markdown-rendered pre {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
.markdown-rendered pre > code {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---- Active tab: a 2px red top rule (the "active/selected" red state) ---- */
|
|
.workspace-tab-header.is-active.mod-active {
|
|
box-shadow: inset 0 2px 0 0 var(--interactive-accent);
|
|
}
|
|
|
|
/* ---- Active file in the explorer: a 2px red left rule ---- */
|
|
.nav-file-title.is-active,
|
|
.workspace-leaf.mod-active .nav-file-title.is-active {
|
|
box-shadow: inset 2px 0 0 0 var(--interactive-accent);
|
|
}
|
|
|
|
/* ---- Eyebrow-style tag pane & outline headers stay quiet ---- */
|
|
.status-bar {
|
|
font-family: var(--font-monospace-theme);
|
|
font-size: 11px;
|
|
letter-spacing: 0.06em;
|
|
border-top: 1px solid var(--divider-color);
|
|
}
|
|
|
|
/* ---- Selection: a red wash (readable over live text; on-brand accent) ---- */
|
|
::selection {
|
|
background: hsla(3, 78%, 50%, 0.22);
|
|
}
|
|
|
|
/* ---- Checkbox: near-square, red when checked (via accent) ---- */
|
|
input[type="checkbox"] {
|
|
border-radius: var(--checkbox-radius);
|
|
}
|
|
|
|
/* ---- Tables: hairline grid, mono-ish numeric feel kept via defaults ---- */
|
|
.markdown-rendered table {
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
.markdown-rendered th {
|
|
font-weight: 600;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
/* ---- Blockquotes: no tint, just the rule ---- */
|
|
.markdown-rendered blockquote {
|
|
padding-left: 1em;
|
|
}
|