claude
18d5f5bfc0
Piggy arrived as a chat panel bolted onto a CRM and then grew a workspace around it. The layout was already right — the audit found the approval card to be the best-designed object in the repo, and the account page's empty panels less finished than anything in the workspace. What was wrong was vocabulary: nobody had written the small things down, so both halves kept inventing them. Piggy was drawn with five different marks — a pig in the dock, a sparkle in the sidebar and again on the model picker, a speech bubble on the Ask buttons, and a stock robot glyph on every assistant message, which is the one people look at most. There is now one mark. The composer, which is the first control in the product since sign-in lands on /piggy, was the only un-adapted shadcn field left: 6px radius against a 12px Send button it sat 8px from. A stat tile had been reinvented six times at three numeral scales, and the same uppercase micro-label existed in five variants, two of them one tab apart in the same rail. There were 63 hand-written font sizes: not a scale, sixty-three opinions. Underneath that, the focus ring was invisible. The global rule used ring-accent, which Tailwind deliberately aliases onto the hover tint, so the ring measured 1.01:1 against the light canvas — no visible focus indicator anywhere in the product, for any accent, in either theme. It is ring-brand now and measures 17:1. The warning, positive and info tones were darkened until each clears 4.5:1 on a card, on inset and on its own chip, and the light canvas moved to 98% so a card lifts without leaning on its shadow. The mobile work is the part worth reading. A landscape phone gave the transcript 28% of the viewport and a keyboard-up phone 16%, against a 45% floor — and the fixed tab bar painted over the composer, covering the safety sentence and half the Send button, because two source comments asserted the bar stood down on short viewports and it never had. Both fixed and measured by hit-testing rather than by screenshot. The composer itself was 64px tall for a blank second line nobody typed, because the auto-resize effect sizes to scrollHeight and scrollHeight counts rows — a CSS height could not win against an inline style, so the attribute was the honest lever. Verified across both themes driven through the app's own control: no horizontal overflow on 15 routes at four viewports, 672 stat values that fit, 297 labels at exactly 11px/500, Escape returning focus to its opener rather than the body on every overlay, and a rejected write no longer reporting "Succeeded" with a green check. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
120 lines
4.8 KiB
JavaScript
120 lines
4.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%)',
|
|
},
|
|
/*
|
|
* The sidebar primitive's scale. Every one of these resolves, through
|
|
* the --sidebar-* aliases in index.css, to a variable already defined
|
|
* above — so this is a naming layer for shadcn's block, not a second
|
|
* palette that can drift from the first.
|
|
*/
|
|
sidebar: {
|
|
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
foreground: 'hsl(var(--sidebar-foreground))',
|
|
primary: 'hsl(var(--sidebar-primary))',
|
|
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
accent: 'hsl(var(--sidebar-accent))',
|
|
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
border: 'hsl(var(--sidebar-border))',
|
|
ring: 'hsl(var(--sidebar-ring))',
|
|
},
|
|
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'],
|
|
},
|
|
/*
|
|
* Three radii by role: 16px surfaces (cards, sheets, dialogs, popovers),
|
|
* 12px controls (buttons, inputs, selects, chips-that-are-buttons), 8px
|
|
* inset tiles and raw/code blocks inside a surface.
|
|
*
|
|
* `md` is overridden because it was the one nobody chose: 32 call sites
|
|
* inherited shadcn's 6px, which put a fourth radius in the product doing
|
|
* the same job as 8px. Naming it here retires 6px without touching them.
|
|
*/
|
|
borderRadius: { md: '0.5rem', lg: '0.75rem', xl: '1rem' },
|
|
/*
|
|
* Motion, aliased to the tokens in index.css so there is one definition
|
|
* of each duration and easing rather than one in CSS and one here.
|
|
* `duration-1/2/3` and `ease-enter`/`ease-exit` are additions, not
|
|
* overrides — Tailwind's own `duration-150` and `ease-out` keep their
|
|
* stock values, so no existing call site changes behaviour.
|
|
*
|
|
* tailwindcss-animate reads animationDuration/animationTimingFunction
|
|
* from these, so the same class names work on `animate-in`/`animate-out`.
|
|
*/
|
|
transitionDuration: {
|
|
1: 'var(--dur-1)',
|
|
2: 'var(--dur-2)',
|
|
3: 'var(--dur-3)',
|
|
},
|
|
transitionTimingFunction: {
|
|
enter: 'var(--ease-out)',
|
|
exit: 'var(--ease-in)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [animate],
|
|
};
|