Agentic UI: Lint feature code that reaches into the UI primitives

apps/ui/README.md

@@ -86,19 +86,24 @@ UI is built on Base UI with its own primitives and theme. Icons come from `lucid
 The theme lives in `src/lib/theme/`:
 
 - `tokens.css`: every design token, below.
-- `base.css`: the page and element defaults (fonts, body, headings, icon size, reduced transparency).
+- `base.css`: the page and element defaults (fonts, body, headings, shared keyframes, reduced transparency).
+- `recipes.module.css`: declaration groups that components pull in with `composes` (truncation, the band's hairline, the image outline, the dot on an icon).
 - `index.ts`: applies the color scheme and the Appearance settings to the root; `accent-contrast.ts` and `color.ts` keep the accent readable; `motion.ts` reads the motion tokens from script.
 
 `tokens.css` defines every token the UI uses:
 
 - **Surfaces**, from lightest to darkest in light mode: `--surface-0`…`--surface-4`, named by role as `--background`, `--chrome` (sidebar, header band), `--chat`, `--composer`, `--popover` and `--muted` (cards, code, chips). `--hover` is the hover fill of the surface it sits on.
 - **Text and lines**: `--foreground`, `--muted-foreground`, `--border`, `--input`, `--ring`.
 - **Actions and status**: `--primary`, `--secondary`, `--accent` (and `--accent-text`, `--accent-foreground`), `--destructive`, `--success`, `--warning`, plus `--status-*` for the vivid status dots.
-- **Type, shape and motion**: `--font-sans`, `--font-mono`, `--text-xxs`…`--text-xl`, `--font-weight-*`, `--radius-*`, `--shadow-*`, `--z-*` layers, `--focus-width`, `--band-height`, `--control-size`, `--motion-duration-*` and `--motion-ease-*`.
+- **Type**: `--font-sans`, `--font-mono`, `--text-2xs`…`--text-2xl` (with `--text-*--line-height` where a size has its own line height), `--leading-*` and `--font-weight-*`.
+- **Space and shape**: `--space-*` on a 4px grid, numbered like Tailwind's spacing (`--space-1_5` is 6px), `--radius-*` up to `--radius-3xl` and `--radius-full`, `--shadow-*`, `--focus-width`, `--band-height` and `--control-size`.
+- **Layers and motion**: `--z-*` layers inside the workspace and above it, `--motion-duration-*` and `--motion-ease-*`. Media queries can't read tokens, so the one breakpoint, `( width < 640px )`, is written where it's used.
 
 Primitives live in `src/lib/ui/` (Button, IconButton, Dialog, Menu, Popover, Select, Field, Input, InputGroup, Textarea, Switch, Checkbox, Tooltip, Alert, Badge, Progress, Empty, Kbd, VisuallyHidden). They follow the rebuild's kit, sit in the `ui` cascade layer so feature CSS overrides them without specificity tricks, and import nothing from app code.
 
-Colors derive in CSS from a few inputs on the root element (`--tint-hue`, `--tint-intensity`, `--tint-saturation`, `--contrast`, `--accent-fill`), so light, dark and the Appearance settings change them without any palette code. Dark values apply under `[data-color-scheme='dark']`, on the root or on any element that should render in the other scheme.
+Outside `src/lib/theme/`, ESLint (`studio/use-theme-tokens`) flags literal colors, font sizes, radii, elevation shadows and stacking layers, and formats CSS with Prettier, so `npx eslint --fix` covers stylesheets too. A literal that has to stay carries an `eslint-disable-next-line` comment saying why.
+
+Colors derive in CSS from a few inputs on the root element (`--tint-hue`, `--tint-intensity`, `--tint-saturation`, `--contrast`, `--accent-fill`), so light, dark and the Appearance settings change them without any palette code. Dark values apply under `[data-color-scheme='dark']`, on the root or on any element that should render in the other scheme. Components follow the nearest scheme with `light-dark()` for a color, or a `[data-color-scheme='dark'] .x` selector for anything else; never `:root[...]` or `html[...]`, which ignore a scene's own scheme. A surface sets `--surface` to its fill, and `--muted` inside it steps up a shade on its own.
 
 ## Development
 

apps/ui/src/app/app-providers.tsx

@@ -1,6 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { defaultI18n } from '@wordpress/i18n';
 import { I18nProvider } from '@wordpress/react-i18n';
+import { LucideProvider } from 'lucide-react';
 import { useLayoutEffect } from 'react';
 import { AgentRunProvider } from '@/data/agent-runs/provider';
 import { ConnectorProvider, queryClient } from '@/data/core';
@@ -48,9 +49,11 @@ function ThemedApp( { children }: PropsWithChildren ) {
 		[ colorScheme, accentColor, tintIntensity, contrast ]
 	);
 	return (
-		<TooltipProvider>
-			<OnboardingGuideProvider>{ children }</OnboardingGuideProvider>
-		</TooltipProvider>
+		<LucideProvider size={ 16 }>
+			<TooltipProvider>
+				<OnboardingGuideProvider>{ children }</OnboardingGuideProvider>
+			</TooltipProvider>
+		</LucideProvider>
 	);
 }
 

apps/ui/src/features/account/account-prompt/style.module.css

@@ -3,13 +3,14 @@
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
-	margin-top: -16px;
-	padding-bottom: 32px;
+	margin-top: calc( var( --space-4 ) * -1 );
+	padding-bottom: var( --space-8 );
 	text-align: center;
 	text-wrap: pretty;
 }
 
-:global([data-slot='empty']) > .body {
+/* eslint-disable-next-line studio/no-primitive-overrides -- the prompt drops its dialog offsets inside an Empty, which spaces it already. */
+:global( [data-slot='empty'] ) > .body {
 	margin-top: 0;
 	padding-bottom: 0;
 }
@@ -19,7 +20,7 @@
 	width: 100%;
 	max-width: 448px;
 	aspect-ratio: 2.6 / 1;
-	margin-bottom: 20px;
+	margin-bottom: var( --space-5 );
 	pointer-events: none;
 }
 
@@ -29,13 +30,14 @@
 	position: absolute;
 	top: 50%;
 	aspect-ratio: 4 / 3;
-	border-radius: var(--radius-md);
-	background-color: var(--muted);
+	border-radius: var( --radius-md );
+	background-color: var( --muted );
 	background-position: center;
 	background-size: cover;
+	/* eslint-disable-next-line studio/use-theme-tokens -- a one-off card shadow, lighter than --shadow-sm. */
 	box-shadow:
-		inset 0 0 0 1px var(--border),
-		0 1px 3px rgb(0 0 0 / 10%);
+		inset 0 0 0 1px var( --border ),
+		0 1px 3px rgb( 0 0 0 / 10% );
 }
 
 .cardStart,
@@ -45,64 +47,64 @@
 
 .cardStart {
 	left: 10%;
-	transform: translateY(-45%) rotate(-8deg);
+	transform: translateY( -45% ) rotate( -8deg );
 }
 
 .cardEnd {
 	right: 10%;
-	transform: translateY(-45%) rotate(8deg);
+	transform: translateY( -45% ) rotate( 8deg );
 }
 
 .cardCenter {
 	left: 50%;
 	z-index: 1;
 	width: 43%;
-	transform: translate(-50%, -50%);
+	transform: translate( -50%, -50% );
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.cardStart,
 	.cardEnd {
-		transition: transform calc(var(--motion-duration-layout) * 2) var(--motion-ease-enter);
+		transition: transform calc( var( --motion-duration-layout ) * 2 ) var( --motion-ease-enter );
 	}
 
 	@starting-style {
 		.cardStart {
-			transform: translate(62.5%, -50%) scale(0.97);
+			transform: translate( 62.5%, -50% ) scale( 0.97 );
 		}
 
 		.cardEnd {
-			transform: translate(-62.5%, -50%) scale(0.97);
+			transform: translate( -62.5%, -50% ) scale( 0.97 );
 		}
 	}
 }
 
 .title {
-	font-size: var(--text-xl);
+	font-size: var( --text-xl );
 	font-weight: 550;
 	line-height: 1.4;
 	letter-spacing: -0.02em;
 }
 
 .description {
 	max-width: 320px;
-	margin: 4px 0 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: 1.625;
+	margin: var( --space-1 ) 0 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --leading-relaxed );
 }
 
 .error {
-	margin: 12px 0 0;
-	color: var(--destructive);
-	font-size: var(--text-xs);
+	margin: var( --space-3 ) 0 0;
+	color: var( --destructive );
+	font-size: var( --text-xs );
 }
 
 .createAccount {
-	margin-top: 28px;
+	margin-top: var( --space-7 );
 }
 
 .logIn {
-	margin-top: 16px;
-	font-size: var(--text-xs);
+	margin-top: var( --space-4 );
+	font-size: var( --text-xs );
 }

apps/ui/src/features/account/auth-actions/style.module.css

@@ -1,33 +1,33 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var( --space-3 );
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: 16px;
+	gap: var( --space-4 );
 }
 
 .arrow {
-	margin-inline-start: 4px;
+	margin-inline-start: var( --space-1 );
 	display: inline-block;
 }
 
 [dir='rtl'] .arrow {
-	transform: scaleX(-1);
+	transform: scaleX( -1 );
 }
 
 .error {
-	padding: 10px 12px;
-	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
-	border-radius: 6px;
-	background: var(--destructive-surface);
-	color: var(--destructive);
+	padding: var( --space-2_5 ) var( --space-3 );
+	border: 1px solid color-mix( in oklab, var( --destructive ) 35%, transparent );
+	border-radius: var( --radius-lg );
+	background: var( --destructive-surface );
+	color: var( --destructive );
 }
 
-@media (max-width: 600px) {
+@media ( width < 640px ) {
 	.actions {
 		align-items: stretch;
 		flex-direction: column;

apps/ui/src/features/account/gravatar/style.module.css

@@ -3,9 +3,9 @@
 	display: inline-flex;
 	width: 20px;
 	height: 20px;
-	border-radius: 50%;
+	border-radius: var( --radius-full );
 	flex-shrink: 0;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
 
 /* A hairline ring over the image, blended so it darkens light edges and
@@ -14,12 +14,12 @@
 	content: '';
 	position: absolute;
 	inset: 0;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: inherit;
 	mix-blend-mode: darken;
 }
 
-:root[data-color-scheme='dark'] .root::after {
+[data-color-scheme='dark'] .root::after {
 	mix-blend-mode: lighten;
 }
 

apps/ui/src/features/account/user-menu/style.module.css

@@ -2,11 +2,11 @@
    notification bell at the end, as 36px controls inset 12px. Pinning to the
    sidebar bottom is handled by the layout's `sidebarFooter` wrapper. */
 .root {
-	padding: 0 12px 10px;
+	padding: 0 var( --space-3 ) var( --space-2_5 );
 }
 
 .alert {
-	margin-block-end: 8px;
+	margin-block-end: var( --space-2 );
 }
 
 .row {
@@ -16,7 +16,7 @@
 
 .offline {
 	display: flex;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .avatar {
@@ -35,38 +35,33 @@
 .account {
 	display: flex;
 	align-items: center;
-	gap: 6px;
-	padding: 8px 6px;
+	gap: var( --space-1_5 );
+	padding: var( --space-2 ) var( --space-1_5 );
 }
 
 .accountText {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
-	font-size: var(--text-xs);
-	line-height: 1.25;
-}
-
-.accountName,
-.accountEmail {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	font-size: var( --text-xs );
+	line-height: var( --leading-tight );
 }
 
 .accountName {
-	font-weight: var(--font-weight-medium);
+	composes: truncate from '@/lib/theme/recipes.module.css';
+	font-weight: var( --font-weight-medium );
 }
 
 .accountEmail {
-	color: var(--muted-foreground);
+	composes: truncate from '@/lib/theme/recipes.module.css';
+	color: var( --muted-foreground );
 }
 
 .itemLabel {
 	flex: 1;
 }
 
 .shortcut {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font: inherit;
 }