Skip to content

Load only the design system CSS the site and bench use #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lwwmanning merged 1 commit into from
Nov 7, 2026
Merged

Load only the design system CSS the site and bench use #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/styles/vortex-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Vortex design system base, copied by tools/site-styles.mjs.
Edit the system, then run tools/site-styles.mjs; do not edit here.
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base --reads ..
sha256 7f7de2b97b16099662cddb9f80a900a2d8b4fdb967eef65bc47b8e773b540bf6 */

/* Vortex base: a small reset for a site drawn with the system, such as vortex.dev after Tailwind
Expand Down
40 changes: 2 additions & 38 deletions src/styles/vortex-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Vortex design system tokens, copied by tools/site-styles.mjs.
Edit the system, then run tools/site-styles.mjs; do not edit here.
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base
sha256 013cc564de0336a1e42ab4bd47660351723274f1b5387faf59f7b28a3747b56f */
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base --reads ..
sha256 12f0e7f11826ec9dc6cf85c6edffe467666bc336d3e61c8e16499eae7d255d0f */
:root, [data-theme="dark"] {
--white: #ffffff;
--grey-50: #fcfcf9;
Expand All @@ -17,11 +17,7 @@
--blue: #1d0fed;
--blue-bright: #2f63ff;
--blue-soft: #8fa9ff;
--purple: #8731dd;
--pink: #dd317e;
--orange: #f27332;
--red: #e43134;
--green: #17b65a;
--ground-dark: #0f0f0e;
--ground-light: #f5f5f2;
--ground: var(--ground-dark);
Expand Down Expand Up @@ -54,18 +50,6 @@
--chart-lance: #976fa1;
--chart-arrow: #c45d68;
--chart-track: var(--grey-700);
--chart-2: #e7b969;
--chart-3: #bbdc7d;
--chart-4: #e672a3;
--chart-5: #60c1d7;
--chart-6: #c18ae2;
--chart-fill-mix: 100%;
--chart-edge-mix: 0%;
--chart-fill-ink: var(--black);
--status-ok: var(--green);
--status-warn: var(--orange);
--status-error: var(--red);
--status-idle: var(--grey-500);
color-scheme: dark;
}
[data-theme="light"] {
Expand Down Expand Up @@ -96,18 +80,6 @@
--chart-vortex: var(--accent);
--chart-muted: var(--grey-300);
--chart-track: var(--grey-100);
--chart-2: #b17000;
--chart-3: #5e8a21;
--chart-4: var(--pink);
--chart-5: #16808f;
--chart-6: var(--purple);
--chart-fill-mix: 40%;
--chart-edge-mix: 100%;
--chart-fill-ink: var(--ink);
--status-ok: var(--green);
--status-warn: var(--orange);
--status-error: var(--red);
--status-idle: var(--grey-400);
color-scheme: light;
}
:root {
Expand All @@ -121,19 +93,13 @@
--space-32: 32px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-120: 120px;
--space-152: 152px;
--radius-control: 4px;
--radius-card: 6px;
--radius-full: 999px;
--page-max: 1440px;
--measure: 54ch;
--page-pad: 48px;
--gutter: 24px;
--control-md: 32px;
--control-sm: 28px;
--app-row: 36px;
--vx-motion: 150ms ease-out;
--font-display: var(--font-sans);
--font-sans: var(--vx-face-sans, Geist), system-ui, sans-serif;
Expand All @@ -153,8 +119,6 @@
.vx-reading { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; font-weight: 400; letter-spacing: 0; }
.vx-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: 0; }
.vx-small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.vx-caption { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; font-weight: 400; letter-spacing: 0; }
.vx-display-mono { font-family: var(--font-mono); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -0.04em; }
.vx-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.vx-label-sm { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.vx-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; font-weight: 400; letter-spacing: 0; }
52 changes: 2 additions & 50 deletions src/styles/vortex.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Vortex design system components (sections: base, brand, chrome, site, blog, tables, focus), copied by tools/site-styles.mjs.
Edit the system, then run tools/site-styles.mjs; do not edit here.
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base
sha256 0a6c9938544f3b3053cbaa68d51c6a506ddc764e7cc3507c26dd3b05b4413d1b */
Made by: node tools/site-styles.mjs <site> --sections base,brand,chrome,site,blog,tables,focus --faces --vx-face --base --reads ..
sha256 bddb79f13fb3cf9a0fd1d27897b97b3bafbd7ffcf29179f01b4015e992e37641 */

/* ------------------------------------------------------------------ base */
/* Every component sizes with border-box, so it draws the same under a site's reset or none. */
Expand Down Expand Up @@ -54,11 +54,6 @@
main[tabindex="-1"]:focus {
outline: none;
}
.vx-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.vx-label,
.vx-label-sm {
color: var(--ink-muted);
Expand All @@ -73,9 +68,6 @@ main[tabindex="-1"]:focus {
user-select: all;
overflow-wrap: anywhere;
}
.vx-num {
font-variant-numeric: tabular-nums;
}
/* In prose, the link rule styles an author's links. A system link (a vx- class) has its own rule. */
.vx-link,
.vx-prose a:not([class*="vx-"]) {
Expand Down Expand Up @@ -315,11 +307,9 @@ main[tabindex="-1"]:focus {
.vx-btn-primary { background: var(--primary); color: var(--on-primary); }
.vx-btn-secondary { border-color: var(--edge); }
.vx-btn-secondary:hover { border-color: var(--ink); }
.vx-btn-ghost:hover { background: var(--raised); }
/* Pressed: one step past hover, in place. */
.vx-btn-primary:active:not([disabled], [aria-disabled="true"]) { background: color-mix(in srgb, var(--primary) 82%, var(--ground)); }
.vx-btn-secondary:active:not([disabled], [aria-disabled="true"]) { background: var(--raised); }
.vx-btn-ghost:active:not([disabled], [aria-disabled="true"]) { background: var(--edge); }
.vx-btn.is-mono { padding: 0 var(--space-12); font: 400 13px/1 var(--font-mono); }
.vx-btn-count { display: inline-flex; align-items: center; gap: var(--space-4); padding-left: var(--space-12); border-left: 1px solid var(--edge); color: var(--ink-muted); }
/* Buttons side by side, primary first, wrapping onto a second row on a phone. */
Expand Down Expand Up @@ -373,14 +363,6 @@ html:has(.vx-header) { scroll-padding-top: calc(var(--space-64) + var(--space-8)
.vx-header-start { padding-right: var(--space-32); }
.vx-header-end { padding-left: var(--space-32); }
}
/* A search field for the tools, as the docs use it, at control-md on raised. Below 960px its twin,
a search button (.vx-header-search-link) that opens the search page, takes its place. */
.vx-header-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 160px; margin: 0; color: var(--ink-muted); }
.vx-header-search svg { position: absolute; left: var(--space-12); width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
.vx-header-search input { box-sizing: border-box; width: 100%; height: var(--control-md); margin: 0; padding: 0 var(--space-12) 0 calc(var(--space-12) + 16px + var(--space-8)); background: var(--raised); border: 1px solid var(--edge); border-radius: var(--radius-control); color: var(--ink); font: 400 14px/1 var(--font-sans); transition: border-color var(--vx-motion); }
.vx-header-search input:hover { border-color: var(--ink); }
.vx-header-search input::placeholder { color: var(--ink-muted); opacity: 1; }
.vx-header-search-link { display: none; }
/* The menu: on a narrow screen the site's links go behind a Menu button at the end of the row, a
<details>, so it opens without scripts. Its panel is a popover under the button, on the ground with
the buttons' solid edge, so it covers what is under it. */
Expand Down Expand Up @@ -418,7 +400,6 @@ html:has(.vx-header) { scroll-padding-top: calc(var(--space-64) + var(--space-8)
@media (max-width: 960px) {
.vx-header-nav, .vx-header-search { display: none; }
.vx-header-menu { display: block; }
.vx-header-search-link { display: inline-flex; }
.vx-header-social > .vx-header-social-link { display: none; }
.vx-header-menu-panel .vx-header-menu-spill.is-icon { display: flex; }
.vx-header-github .vx-btn-count { display: none; }
Expand Down Expand Up @@ -498,18 +479,6 @@ html:has(.vx-header) { scroll-padding-top: calc(var(--space-64) + var(--space-8)
color: var(--ink-muted);
transition: color var(--vx-motion), background-color var(--vx-motion);
}
.vx-switch button {
all: unset;
box-sizing: border-box;
cursor: pointer;
height: 26px;
padding: 0 var(--space-12);
border-radius: var(--radius-control);
font: 400 12.5px/26px var(--font-sans);
white-space: nowrap;
color: var(--ink-muted);
transition: color var(--vx-motion), background-color var(--vx-motion);
}
.vx-theme-switch button:hover,
.vx-switch button:hover { color: var(--ink); }
.vx-theme-switch button[aria-pressed="true"],
Expand Down Expand Up @@ -614,12 +583,6 @@ html:has(.vx-header) { scroll-padding-top: calc(var(--space-64) + var(--space-8)
.vx-field-row > .vx-field { flex: 1 1 auto; min-width: 0; }
.vx-field-error { margin: var(--space-8) 0 0; color: var(--error-ink); }

/* A display line never strands one word on its last line, and on phones its lines balance. */
.vx-display { text-wrap: pretty; }
/* On phones it sets at the h1 size, where 64px would take four lines. */
@media (max-width: 640px) {
.vx-display { font-size: 48px; text-wrap: balance; }
}

/* The mono headline: tight, as the old terminal set it, and at the h3 size on phones. */
.vx-display-mono { text-wrap: pretty; }
Expand Down Expand Up @@ -998,17 +961,6 @@ html:has(.vx-header) { scroll-padding-top: calc(var(--space-64) + var(--space-8)
.vx-table td.is-num { font-family: var(--font-mono); font-size: 13px; }
.vx-prose tr.is-total td,
.vx-table tr.is-total td { color: var(--ink); font-weight: 600; border-bottom: 0; }
/* Data tables: every cell in mono, rows at app height, and column names keep their case. */
.vx-table.is-data th,
.vx-table.is-data td { padding: var(--space-8) var(--space-12); }
.vx-table.is-data td { height: var(--app-row); box-sizing: border-box; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: var(--ink-body); }
.vx-table th.is-selected { color: var(--accent-ink); }
.vx-table td.is-selected { background: var(--accent-soft); color: var(--ink); }
/* A data table on a surface keeps its head in view and washes the row under the pointer. A spacer
row (is-spacer) stands for rows a virtual list has not drawn. */
.vx-table.is-data thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.vx-table.is-data tbody tr:not(.is-spacer):hover td { background: var(--wash); }
.vx-table.is-data tr.is-spacer td { height: auto; padding: 0; border: 0; }

/* ------------------------------------------------------------------ focus
One rule for every focusable element, last so that it wins over the resets above. The docs'
Expand Down
Loading