Files
pig/apps/web/tailwind.config.js
T
karti e12d27edd1
CI / verify (push) Successful in 3m32s
Polish every product workflow across desktop and mobile
Reframe each screen around the decisions compute brokers make: sellable capacity, full-cost margin, pipeline movement, contract deadlines, evidence review, staged imports, and controlled agent access. Group the shell by operating domain, strengthen mobile navigation and sheets, add responsive record treatments, and make loading, error, empty, readiness, and retry states explicit.

The visual audit exposed sortable table targets and an unnamed file input only after exercising the rendered app, so this commit also pins those accessibility decisions at their actual interaction boundaries. Manrope is self-hosted as a single Latin variable subset to keep the stronger hierarchy without shipping unused font payloads.
2026-08-13 05:34:23 -07:00

76 lines
2.8 KiB
JavaScript

import animate from 'tailwindcss-animate';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ['class', '[data-theme="dark"]'],
content: ['./index.html', './src/**/*.{ts,tsx}'],
theme: {
extend: {
colors: {
// Every colour resolves through a CSS variable so the user's chosen
// accent re-tints the whole interface without a rebuild.
bg: 'hsl(var(--bg))',
background: 'hsl(var(--bg))',
surface: 'hsl(var(--surface))',
'surface-2': 'hsl(var(--surface-2))',
border: 'hsl(var(--border))',
input: 'hsl(var(--border))',
ring: 'hsl(var(--accent))',
fg: 'hsl(var(--fg))',
foreground: 'hsl(var(--fg))',
muted: 'hsl(var(--muted))',
'muted-foreground': 'hsl(var(--muted))',
/*
* shadcn's `accent` is its SUBTLE hover/selected surface — dropdown
* items, command rows, ghost-button hover. It is not the brand colour;
* that is `primary`, mapped below.
*
* Mapping `accent` to --accent (the brand) inverted this, so every
* hover state painted a full-strength brand block: in dark mode with
* the monochrome "pig" accent that is near-white, which made a selected
* command row glare. Aliased to the subtle pair instead, so shadcn
* primitives tint the way their authors intended while PIG's own brand
* fills use `primary`.
*/
accent: 'hsl(var(--accent-subtle))',
'accent-foreground': 'hsl(var(--accent-fg))',
/** The brand itself, for PIG's own components that need a solid fill. */
brand: 'hsl(var(--accent))',
'accent-fg': 'hsl(var(--accent-fg))',
'accent-on': 'hsl(var(--accent-on))',
'accent-subtle': 'hsl(var(--accent-subtle))',
primary: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-on))',
},
secondary: {
DEFAULT: 'hsl(var(--surface-2))',
foreground: 'hsl(var(--fg))',
},
card: {
DEFAULT: 'hsl(var(--surface))',
foreground: 'hsl(var(--fg))',
},
popover: {
DEFAULT: 'hsl(var(--surface))',
foreground: 'hsl(var(--fg))',
},
destructive: {
DEFAULT: 'hsl(var(--danger))',
foreground: 'hsl(0 0% 100%)',
},
positive: 'hsl(var(--positive))',
warning: 'hsl(var(--warning))',
danger: 'hsl(var(--danger))',
info: 'hsl(var(--info))',
},
fontFamily: {
sans: ['Manrope Variable', 'Avenir Next', 'ui-sans-serif', 'system-ui', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
},
borderRadius: { lg: '0.75rem', xl: '1rem' },
},
},
plugins: [animate],
};