[praveen-formido]

What

• Gives v1 its own design tokens in three modes (Light, Dark, Unstract): the values live in src/v1/styles/tokens.json (one array per family, board order), styles/tokens.ts types them and derives each CSS variable from the token name, and bun run tokens:v1 generates src/v1/styles/tokens.css, scoped to .v1[data-theme="…"]. Values come from the Figma "Midnight Bloom" variable collection and the dev-spec board (node 683:135); the table the P1-T01 gallery will render is renderTokenTable(TOKENS) and its snapshot is committed.
• Gives v1 its own Tailwind 4 root, src/v1/styles/index.css, compiled with prefix(ui) and source(none) + @source "../": every v1 utility is ui:…, every theme variable --ui-…, only v1 files are scanned, and preflight is not imported a second time. Theme keys are bound to the runtime tokens through @theme inline; the stock colour, radius, shadow, text and font scales are reset so only token-backed utilities exist. dark: and unstract: variants key on data-theme; one focus treatment, ui:focus-ring, implements the board's rule.
• Adds the theme model and store (lib/theme.ts, stores/theme.ts, preference key unstract.v1.theme, follow-system; each mode block also sets the browser's color-scheme, so native controls and scrollbars follow data-theme), a portal container #v1-portal.v1 for dialogs, menus and toasts (lib/portal.ts), cn() configured for the prefix (lib/cn.ts), and ThemeProvider (app/theme/ThemeProvider.tsx), which renders the v1 root (data-ui-version="v1", the marker the E2E harness in UN-4345 [FEAT] Frontend v1 E2E harness and the frontend-v1-e2e group #2355 expects), hydrates the stored mode before first paint and keeps the portal in step.
• Adds scripts/check-v1-styles.mjs to lint:v1: raw colours (hex, functions, palette and named, in code and CSS), raw lengths (anywhere inside an arbitrary value, and px/rem/em/pt/vh/vw in CSS), inline style, !important, CSS imports outside app/ and styles/, selectors outside .v1 (a sibling combinator right after the root included, at top level or nested directly in the root; .v1 .menu { & + x } stays inside), prefers-color-scheme in v1 CSS, and utilities without ui: first (hover:ui:flex compiles to nothing) all fail lint. className values and the class positions of cn()/cva() are always checked (in cva() the base string, variant values and a compound class; a variant name or choice such as defaultVariants: { variant: "outline" } is not a class); other strings when they look like a class list. Twenty-nine guardrail fixtures in test-fixtures/v1-boundary/ pin each rule, three passing fixtures pin what the rules must allow. README gains a Styling section.
• Self-hosted fonts through the @fontsource packages v0 already pins: Inter 400/500/600 (the only weights the type roles use) and Geist Mono 400.

Why

• P0-T04 (UN-4299, spec): v1 needs its token set in three modes, self-hosted fonts, and styles that cannot reach v0 or be reached by v0, with lint that enforces the styling policy. It gates all of P1 and P2-T01.
• Two Tailwind roots in one document would otherwise emit the same unprefixed class (.text-sm) with different theme values and overwrite each other in the shared utilities layer. A prefix makes the two sets disjoint by construction; v1 also survives v0's deletion in P9.

How

Decision	Why
Prefix is ui, not v1	Tailwind 4.3 accepts lowercase letters only as a prefix; v1 is rejected at compile time. Raised in #engg-unstract-frontend-v1-migration on 28 Oct.
No second preflight	A second copy later in the base layer would re-run border: 0 solid and turn v0's borders black. v1 ships scoped base rules in base.css; P9 adds preflight when src/index.css goes.
Runtime tokens keep shadcn names (--background, --radius-md), scoped under .v1[data-theme]	"Bound to the Midnight Bloom variables"; shadcn components expect these names; every token is redefined in every mode so nothing inherits from v0's :root/.dark. Tailwind's own variables live in the separate --ui- namespace.
Three @source not lines in v0's src/index.css	v0's root auto-scans the whole frontend. Without them the v1 tree, the lint script and the fixtures added 12 unprefixed utilities and 8 theme variables to v0's stylesheet. With them the v0 build is byte-identical to the base (239/239 files). This is the one edit to a v0 file in the PR; it is a build-scope directive, not a token or style change. Please confirm this is acceptable under the seam rule.
skipLibCheck: true in src/v1/tsconfig.json	vitest 3.2 and @types/chai ^5.2 both declare containSubset; with library checks on, the first v1 test file fails TS2300, and no @types/chai version in vitest's accepted range avoids it. Turn back off once vitest no longer clashes. Scaffold change; Jaseem and Harini, please note.
Biome formatter disabled for the generated tokens.css	The file is written by the generator and checked byte-for-byte by a test; biome ci src/ would otherwise rewrap it.
Lint string rules apply to class-shaped strings only	Scanning every literal flagged variant="outline", type="hidden" and UI copy; shape detection still catches a constant holding unprefixed classes.
S1 allows a style attribute that sets only CSS custom properties (style={{ "--page-aspect": w / h }})	Runtime geometry (page size, highlight position in P1-T21) cannot be a token or a class. The numbers travel through variables that ui: classes read (ui:aspect-(--page-aspect)); the classes keep every visual decision. A string, a variable, a spread or a plain key still fails, so the keys stay visible at the call site. lib/css-custom-properties.d.ts augments React's CSSProperties with --* keys, which strict TS otherwise rejects (TS2353); the passing fixture is typechecked to exercise it. Raised by Ali on 29 Oct.
ThemeProvider uses layout effects	With plain effects a saved dark or Unstract preference painted one light frame on every load.
Spacing utilities bound to the tokens: --spacing is --space-1, named steps 1 to 8 are their tokens	Without it ui:p-5 used Tailwind's stock scale and --space-5 drove nothing (Greptile). The bare multiplier stays so ui:w-64 and ui:size-4 keep working; ui:p-5 is now var(--space-5).
Token values in tokens.json, not in the TypeScript source	SonarCloud's duplication check ignores literal values, so 75 same-shaped entries in tokens.ts counted as copies (16.8% of new lines against a 3% gate). JSON is not checked for duplication, and the file is the data anyway; cssVar was -- + name for every entry, so it is derived. Ritwik's preferred option.
tokens:v1 runs under bun	The generator imports the TypeScript sources; Node needs a registerHooks resolver for that, which exists only from 22.15 while the engines field allows 20.19 (Greptile). bun imports them directly.

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No. Nothing in v0 imports @v1 yet, so none of the new code or CSS is in the production bundle: the v0 build output is byte-identical to the base commit (239 files, SHA-256 compared; see claudedocs/frontend-v1-lane-c/p0-t04/no-regression.md in the lane folder). The v0 vitest count is unchanged (629).
• The only v0 file touched is src/index.css, and only to stop scanning three non-v0 folders; its output is identical.
• When P0-T03 later mounts v1 through @v1, the v1 stylesheet joins the bundle. Measured delta on a scratch build: 363 added rules, 0 removed; every added rule is .v1- or ui\:-scoped, a --ui-/--tw- variable, an @font-face identical to one v0 already declares, or a @layer statement, plus one duplicate block of Tailwind's --tw-* defaults with values identical to v0's. No v0 rule changes.

Database Migrations

• None

Env Config

• None

Relevant Docs

• P0-T04 spec · Phase P0
• frontend/src/v1/README.md, Styling section.
• Figma dev-spec board: https://www.figma.com/design/29RYoJk8gAkNgetFXTV8OI/?node-id=683-135

Related Issues or PRs

• UN-4299; Story UN-4258.
• Based on UN-4270 [FEAT] v1 scaffold, strict TypeScript and import boundary #2380 (P0-T01 scaffold), merged into main on 2 Nov; main is merged into this branch (not rebased) so the five P1-T21 viewer PRs stacked on it keep clean diffs.
• Hand-offs: UN-4345 [FEAT] Frontend v1 E2E harness and the frontend-v1-e2e group #2355 (P0-T09) can switch its theme hook to the storage key unstract.v1.theme; P0-T03 wraps the v1 tree in ThemeProvider; P1-T01's gallery reads TOKENS; a v1 components.json should set tailwind.prefix to ui.
• Two names with no value anywhere are deliberately not tokens: destructive-muted (board section 8) and sidebar-primary/sidebar-ring (spec text). To be added when the designer defines them.

Dependencies Versions

• @tailwindcss/node 4.3.3 added as a dev dependency (same version as @tailwindcss/vite), used only by the root compile test.

Notes on Testing

• .sonarcloud.properties excludes frontend/test-fixtures/** from analysis: the boundary fixtures break the v1 rules on purpose.
• v1: 39 vitest tests across 8 files (theme model, store, portal, tokens, renderer, cn, root compile, provider) plus 89 guardrail fixture rows (bun run test:v1, 29 of them for the styling policy). typecheck:v1, lint:v1 and biome ci src/ clean (Biome's 798 warnings are v0's, unchanged).
• The root compile test compiles index.css with @tailwindcss/node and asserts: only ui:-prefixed utilities, every emitted selector scoped (checked per comma-separated part, with an in-test negative proof), variants keyed on .v1[data-theme], the focus ring's forced-colors outline, no !important, no prefers-color-scheme, no stock palette or scales, and every custom property either a --ui-/--tw- variable or a declared token.
• Token values: all 75 tokens checked against the captured board values in all three modes.
• cn() extends tailwind-merge's text scale with the eight type roles, so ui:text-body ui:text-foreground keeps both (tailwind-merge would otherwise read the role as a colour and drop it); a test ties that list to the type family in TOKENS.
• Known v0 rules that still reach v1 (unlayered in src/index.css, so no layered v1 rule can beat them, and v1 lint bans !important): the global scrollbar colours, the Radix popper z-index: 1500 !important, the sonner toaster rule, and the svg.lucide sizing rule (its :not(.flex, .inline-flex, .grid) does not exempt ui:inline-flex). All harmless today; listed in the v1 README and in the evidence file so nobody is surprised.
• Two spec acceptance items are carried over, because they need code this task does not contain: screenshots of three v0 pages before and after v1 loads (needs P0-T03 to mount v1 and a running stack; owner: Lane C at P0-T03's go-live) and "a v1 dialog over a v1 page styled by v1 tokens" (needs the first P1 dialog; P1-T01's gallery will render it against #v1-portal). The byte-identical build and the classified CSS delta stand in for the first today.

🤖 Generated with Claude Code

[athul-rs]

Token gaps found while porting the shell menus (#2402) and the product switcher (cloud #1917) onto this PR. Before the port, these values matched the Figma frames as arbitrary values. No token in this PR holds them, so each one either needs a token or the frames need to move onto the existing scale.

Need	Frames	Closest token today
Body-small line height	13/20 (every shell frame: menu items, org rows, dialog text)	--type-body-small 13/18
Larger headings	30/36, 24/32 and 18/28, weight 600 or 400 (product switcher P01, NEW02, LW02, F00)	text-display 34/46, text-page-title 20/28, text-section-title 16/24
Radius	12 (org popover, switch dialog) and 4 (Current chip)	10 and 6
Shadows	menu 0 8 24 0 #0000001f, org popover 0 8 24 -4 #0000001a, switch dialog 0 12 32 0 #0000002e, product switcher 0 24 60 -10 #00000047	shadow-lg and shadow-xl
Scrim	32% black (switch dialog O02), #18181b at 40% (product switcher)	bg-scrim, black at 50%
Status dot colours	#f59e0a, #21c45e, #f04545 (product switcher plan row)	--warning #b45309, --success #15803d, --destructive #b41b30
Overline tracking	0.08em (org list eyebrow); the avatar initials have none	text-overline 0.05em

The body-small line height is the one that shows up most: it changes the height of every single-line row and of the dialog text. The design questions (sidebar vs popover surface, dark-mode secondary and border, dot colours) are with design separately.

[muhammad-ali-e]

Reviewed with the latest commits (8028a73). Thanks for taking the custom-property typing in. The viewer stack (#2404–#2409) is now on it and has dropped its copy.

I left 6 comments that don't repeat Greptile's open threads. The first three are gaps in check-v1-styles that let styling through which the rules mean to block: variant-before-prefix classes that compile to nothing, named colours, and uneven unit checks. I reproduced each one on this branch with a probe file and got check-v1-styles: ok. The other three are color-scheme for dark mode, one v0 icon rule missing from the README list, and a small duplication in the theme store.

Greptile's five earlier threads (Node 20 for tokens:v1, spacing tokens, single-class prefix, sibling selectors, inline-style parsing) are still open and unanswered. A reply on each would help close them out.

---

Generated by Claude Code

[muhammad-ali-e]

Re-checked on 622695faa. Most of it is fixed, and I verified each item with a probe file: prefix order, named colours, vh/vw in CSS, color-scheme per mode, the single storage handle and the five earlier Greptile threads. Three things remain before approval:

1. S3 still misses [200px_1fr]. Details are in the S3 thread: the lookahead rejects a unit followed by _.
2. Greptile's two new comments. The cva() one is a real regression: every string inside cva() is now linted as a class, so defaultVariants: { variant: "outline" } fails lint (reproduced). That will hit every shadcn-style component with variants. Only class-supplying positions should be checked (the base string and variant values), not variant names or choices. The nested sibling case (.v1 .menu { & + .demo {} }) is a smaller false positive, and the new fixture locks it in.
3. The branch now conflicts with main, since the scaffold UN-4270 [FEAT] v1 scaffold, strict TypeScript and import boundary #2380 merged.

Please let me know once it's ready for re-review.

---

Generated by Claude Code

[praveen-formido]

All three are on the branch at c6c0b21: main merged in (e565ae5, a merge rather than a rebase so the five P1-T21 PRs stacked on this branch keep clean diffs), then the S3 separator gap, the cva() regression and the nested sibling false positive (c6c0b21), each with a fixture. Gates on that head: typecheck:v1, lint:v1, 39 vitest tests, 89 fixture rows, biome ci src/ at v0's baseline. Ready for re-review.

[muhammad-ali-e]

Re-checked on c6c0b21c7: all six review items and the three follow-ups are fixed, each confirmed with a probe file (S3 [200px_1fr]/[2rem_auto], cva() variant names, nested & + inside v1, prefix order, named colours, vh/vw), and typecheck:v1, lint:v1 and all 89 fixture rows pass. Approving. Thanks, Praveen!

---

Generated by Claude Code

[github-actions]

Frontend Lint Report (Biome)

✅ All checks passed! No linting or formatting issues found.

[sonarqubecloud]

Quality Gate passed

Issues
8 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Unstract test results

Per-group results

Status	Group	Tier	Passed	Failed	Errors	Skipped	Duration (s)
⚪	e2e-agent-kv	e2e	0	0	0	1	0.1
✅	e2e-api-deployment	e2e	3	0	0	0	12.8
✅	e2e-coowners	e2e	1	0	0	0	1.4
✅	e2e-etl	e2e	1	0	0	0	14.4
✅	e2e-login	e2e	2	0	0	0	1.2
✅	e2e-prompt-studio	e2e	1	0	0	0	15.4
✅	e2e-smoke	e2e	2	0	0	0	2.5
✅	e2e-workflow	e2e	1	0	0	0	22.3
✅	frontend	unit	690	0	0	0	14.0
✅	integration-backend	integration	1459	0	0	26	66.7
✅	integration-connectors	integration	1	0	0	7	7.1
✅	integration-workers	integration	181	0	0	1	45.9
❌	ui	e2e	0	1	0	0	0.0
✅	unit-agent-kv-schema	unit	143	0	0	0	1.1
✅	unit-backend	unit	2107	0	0	1	39.7
✅	unit-connectors	unit	82	0	0	0	7.2
✅	unit-core	unit	281	0	0	0	2.1
✅	unit-filesystem	unit	1	0	0	0	2.7
✅	unit-platform-service	unit	18	0	0	0	1.7
✅	unit-rig	unit	120	0	0	0	3.0
✅	unit-runner	unit	12	0	0	0	1.9
✅	unit-sdk1	unit	878	0	0	0	29.9
✅	unit-tool-sidecar	unit	8	0	0	0	1.2
✅	unit-workers	unit	1589	0	0	2	108.1
	TOTAL		7581	1	0	38	402.4

Critical paths

⚠️ Critical paths not yet covered

• workflow-execution-fan-out — Multi-file workflow execution fans out to file-processing workers and rejoins. (declared coverage: no groups declared)

✅ Covered critical paths

• auth-login — covered by e2e-login
• adapter-register-llm — covered by integration-backend
• workflow-author — covered by integration-backend
• co-owner-manage — covered by integration-backend, e2e-coowners
• workflow-create-execute — covered by e2e-workflow
• api-deployment-provision — covered by integration-backend
• api-deployment-auth — covered by integration-backend
• api-deployment-run — covered by e2e-api-deployment
• mcp-server-auth — covered by integration-backend
• mcp-platform-auth — covered by integration-backend
• platform-key-whoami — covered by integration-backend
• prompt-studio-author — covered by integration-backend
• prompt-studio-fetch-response — covered by e2e-prompt-studio
• connector-register-test — covered by integration-backend
• pipeline-etl-execute — covered by e2e-etl
• usage-aggregate-read — covered by integration-backend
• usage-token-tracking — covered by e2e-api-deployment
• callback-result-delivery — covered by e2e-api-deployment