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;
|