mrhid6
01eda1dbb0
Server Deploy / deploy (push) Successful in 1m6s
web/ was the last app on its own palette — a neutral #0f1117 ground with an indigo accent, unrelated to the logo navy that site/ and adminsite/ are built on. It now draws from the same tokens, so all three apps are one system. It stays locked to dark, taking site/'s dark values. That is what keeps adminsite/'s light default meaningful: an operator with both open tells them apart by the ground before clicking anything destructive, and now that both are the same palette, the ground is the only thing left doing that work. The colour names stay this app's own — text-primary, border, surface rather than ink, rule, panel — because every screen already reads that way, and adminsite/ already establishes that each app names the shared tokens after its own subject. Tokens are stored as RGB channels with the hex in a trailing comment. The console leans on Tailwind opacity modifiers far more than the other two (bg-danger/10, border-accent/50, ring-accent/30), and <alpha-value> only compiles against channels; the comments keep the three token blocks diffable by eye. Beyond colour: - radii collapse to site/'s 4px in tailwind.config.ts rather than rewriting ~140 rounded-lg classes; rounded-full is untouched for dots and pills - badges become site/'s chip — mono, uppercase, tracked, currentColor rule, no fill — keeping their dot so state is never colour alone - table column heads take the keyed-label idiom, at text-secondary rather than tertiary, which lands under 4.5:1 at that size - sidebar marks the active item with an accent bar, the device site/ uses for the chosen plan, instead of a filled pill that reads as pressable - filled accent and danger buttons take accent-ink; the dark accent is a light blue and danger a coral, and white on either was unreadable - login's packet pulses shift from green to the accent, so the sign-in screen is the same two blues as the marketing hero The last hex literals and stock-palette classes are gone; the only ones left are NetworkBackground's canvas fills, which cannot read a CSS variable and are commented with the token each came from. Only the web image rebuilds from this.
83 lines
3.8 KiB
TypeScript
83 lines
3.8 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
/*
|
|
* Tokens are shared with site/ and adminsite/ — same names, same values, in
|
|
* app/globals.css. Nothing here may hold a hex value: if a colour needs to
|
|
* change it changes in globals.css, in all three apps, in one commit.
|
|
*
|
|
* The colours keep this app's own names rather than site/'s. site/ says ink
|
|
* and rule because it is a document; this is a console, so it says
|
|
* text-primary and border, and every screen already reads that way. Same
|
|
* colours, honest names on both sides — the aliasing adminsite/ does for
|
|
* licence state, one level further.
|
|
*
|
|
* `<alpha-value>` is what makes bg-danger/10 and border-accent/50 compile.
|
|
* It only works against the RGB channel variables, which is why globals.css
|
|
* stores channels and derives the plain --token from them.
|
|
*/
|
|
const withAlpha = (channels: string) => `rgb(var(${channels}) / <alpha-value>)`;
|
|
|
|
const config: Config = {
|
|
content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: withAlpha("--ground-rgb"),
|
|
logo: withAlpha("--logo-rgb"),
|
|
surface: withAlpha("--panel-rgb"),
|
|
"surface-2": withAlpha("--panel-2-rgb"),
|
|
border: withAlpha("--rule-rgb"),
|
|
"border-soft": withAlpha("--rule-soft-rgb"),
|
|
"text-primary": withAlpha("--ink-rgb"),
|
|
"text-secondary": withAlpha("--ink-2-rgb"),
|
|
"text-tertiary": withAlpha("--ink-3-rgb"),
|
|
accent: withAlpha("--accent-rgb"),
|
|
"accent-hover": withAlpha("--accent-hover-rgb"),
|
|
"accent-ink": withAlpha("--accent-ink-rgb"),
|
|
success: withAlpha("--up-rgb"),
|
|
warning: withAlpha("--pend-rgb"),
|
|
danger: withAlpha("--down-rgb"),
|
|
"danger-hover": withAlpha("--down-hover-rgb"),
|
|
// The floor beneath the ground: install one-liners, key blobs,
|
|
// run logs — surfaces showing machine output, not interface.
|
|
well: withAlpha("--well-rgb"),
|
|
// Attention that is not yet failure — an unsaved workflow, a
|
|
// step about to run. Same amber as warning, because it is the
|
|
// same signal at a different distance.
|
|
signal: withAlpha("--pend-rgb"),
|
|
"signal-ink": withAlpha("--accent-ink-rgb"),
|
|
// Shell identity on step chips. Reusing the semantic pair is
|
|
// safe here because the chip is labelled "bash" or "pwsh" in
|
|
// text — the colour is recognition, never the whole message.
|
|
bash: withAlpha("--up-rgb"),
|
|
pwsh: withAlpha("--accent-rgb"),
|
|
},
|
|
fontFamily: {
|
|
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"],
|
|
},
|
|
/*
|
|
* site/ is built on 4px, and the console inherits it. The scale
|
|
* steps are collapsed rather than the ~140 rounded-lg/md/xl classes
|
|
* across the app being rewritten: every one of them meant "a panel
|
|
* corner", and this is where that decision now lives. rounded-full
|
|
* is untouched — status dots and pills still need it.
|
|
*/
|
|
borderRadius: {
|
|
sm: "3px",
|
|
DEFAULT: "4px",
|
|
md: "4px",
|
|
lg: "4px",
|
|
xl: "6px",
|
|
"2xl": "6px",
|
|
},
|
|
boxShadow: {
|
|
panel: "var(--shadow)",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|