karti
2763531ce4
CI / verify (push) Successful in 2m53s
shadcn uses `bg-accent` for its SUBTLE surfaces — dropdown item hover, command row selection, ghost and outline button hover, the dialog close affordance. The brand colour in shadcn is `primary`. PIG's Tailwind config mapped `accent` to `--accent`, which is the brand. That inverted the meaning, so every shadcn hover and selection state painted a full-strength brand block. With the monochrome "pig" palette in dark mode the brand is near-white, so a selected command row rendered as a white slab against a near-black sheet. Measured before the change: selected row rgb(250,250,250) on a rgb(9,9,11) body. `accent` now aliases `--accent-subtle` and `accent-foreground` aliases `--accent-fg`, which is what those tokens were created for. The eleven places where PIG's own components wanted a solid brand fill — filled chips, selected card borders, progress bars — move to `primary`, which still resolves to `--accent`. A `brand` alias is added for clarity. After: selected row rgb(39,39,42) in dark and rgb(244,244,245) in light, both a subtle tint above the body; the pipeline's active stage chip stays a solid rgb(250,250,250) fill, unchanged. Found by opening overlays, which earlier screenshot sweeps never did — every route had been checked, but a dropdown or a command palette only misbehaves once it is open. Worth remembering: page-level sweeps do not exercise portals. Typecheck clean, 135 unit tests and e2e green, CSP hash unchanged, 0px horizontal overflow across 12 routes at 393px and 1440px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
76 lines
2.8 KiB
JavaScript
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: ['ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Inter', 'sans-serif'],
|
|
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
|
|
},
|
|
borderRadius: { lg: '0.75rem', xl: '1rem' },
|
|
},
|
|
},
|
|
plugins: [animate],
|
|
};
|