393c538de1
Add the frontend guides the v2 UI kit and compliance-portal need but that the first rework left uncovered: forms, routing, client state, and permission-gated UI. forms.md documents a tiered approach on Base UI Field/Form -- native constraints, then a validate function, then zod parsed in onSubmit, and react-hook-form only for large or dynamic forms -- and drops the custom useFormWithSchema wrapper. routing.md covers @probo/routes, navigation, typed params, URL-as-state, redirects, auth/protected routes, and the folded-in no-outlet-context rule. state-management.md gives a decision order across Relay, URL, local state, context, and zustand. permissions.md gates UI on the canUpdate/canDelete permission(action:) fields without re-encoding authorization in the client. Rename v2-colors.md to v2-tokens.md and add the typography, radius, shadow, and native-spacing scales alongside color. Extend ui.md with user feedback, empty-state, and accessibility sections; standardize toasts on Base UI's Toast (Toast.useToastManager) and retire the legacy useToast across ui.md, forms.md, error-handling.md, and relay.md. Add an Intl formatting section to i18n.md and a non-Relay HTTP / file upload-download section to ts-style.md. Update the AGENTS.md index and the v2-color-scale cursor rule for the new and renamed guides. Signed-off-by: Émile Ré <emile@probo.com>
20 lines
899 B
Plaintext
20 lines
899 B
Plaintext
---
|
||
description: v2 UI color system — Radix numbered scale, no hardcoded colors, no manual dark mode
|
||
globs: "packages/ui/src/v2/**/*.{ts,tsx}"
|
||
alwaysApply: false
|
||
---
|
||
|
||
# v2 color scale
|
||
|
||
Use the Radix 12-step numbered scale for all colors in v2 components: `sand`, `gold`, `red`, `green`, `amber`, `sky` (steps 1–12).
|
||
|
||
## Rules
|
||
|
||
- Use scale classes (`bg-sand-3`, `text-red-11`, `border-gold-7`) — never v1 semantic names (`txt-primary`, `border-low`, `bg-primary`, etc.)
|
||
- Never hardcode hex/rgb/oklch values for colors that exist in the scale
|
||
- Never use the `dark:` variant prefix for v2 color overrides — dark mode is handled by the `.dark` class on `<html>` via Radix CSS imports
|
||
- Do not mix v1 and v2 color classes in the same component
|
||
- Respect step ranges: 1–2 backgrounds, 3–5 component bg, 6–8 borders, 9–10 solid bg, 11–12 text
|
||
|
||
Full guide: `contrib/claude/v2-tokens.md`
|