[refactor] Teach the mobile app the shared theme vocabulary (13/13) - #5741
Draft
ardaerzin wants to merge 1 commit into
Draft
[refactor] Teach the mobile app the shared theme vocabulary (13/13)#5741ardaerzin wants to merge 1 commit into
ardaerzin wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
size:XXL
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ardaerzin
marked this pull request as draft
August 5, 2026 10:48
Contributor
Railway Preview Environment
|
ardaerzin
force-pushed
the
feat/mobile-parity-and-consolidation
branch
10 times, most recently
from
August 5, 2026 23:09
fa9fe83 to
e6b4ff5
Compare
ardaerzin
changed the base branch from
feat/mobile-parity-and-consolidation
to
release/v0.111.0
August 8, 2026 06:57
`@agenta/ui` is Radix + cva now, so the mobile app could in principle drop its duplicate
primitives and use the shared ones. It could not: the components are written against the
palette-derived vocabulary (`bg-btn-default-bg`, `h-control`, `rounded-control`), and mobile
defined none of those names. Dropped in as-is, a shared Button rendered as unstyled markup —
12 of its 75 classes produced any CSS.
The two definitions it needs both lived inside `web/oss/tailwind.config.ts`, private to a
Tailwind v3 JS config that mobile (v4, CSS-first) cannot read:
- `controlScale` — control geometry, now `src/styles/theme/controlScale.ts`
- `shadcnTokens` — the utility-name → CSS-variable contract the components are written
against, now `src/styles/theme/shadcnTokens.ts`
Both are unchanged; the config imports them instead of declaring them. `shadcnTokens` already
described itself as one shared definition for the app and Storybook — mobile is the third
consumer.
Mobile's generator now reads both and emits them into Tailwind v4's namespaces: colours as
`--color-*`, geometry as `--height-*`/`--width-*`/`--spacing-*`/`--radius-*`/`--text-*`. It
flattens the nested families the v3 config gets for free (`{primary: {DEFAULT, hover}}` →
`primary`, `primary-hover`), and unions the contract with a scan of what the package actually
references, so a component that reaches for a raw antd token name resolves too.
Colour values come from `theme-variables.css`, not `palette.ts`: a good share are antd-algorithm
output (derived fills, preset tag ramps) that `palette.ts` cannot reproduce. Both files come from
the same generator run.
176 of the 181 colour utilities `@agenta/ui` uses now resolve in mobile, Button 71 of 75. Of the
rest, three are the scan matching prose in comments; `bg-opacity-10` and `bg-opacity-20` are real
— Tailwind v3 utilities removed in v4, which `@agenta/ui` will need to restate as `bg-black/10`
before whichever component uses them can cross over.
No component is adopted here and mobile does not depend on `@agenta/ui` yet. That comes next,
together with the `@source` directive that lets Tailwind scan the package — deliberately not in
this change, because scanning it emits utilities for components nothing renders and takes the CSS
bundle from 40 KB to 110 KB. The token layer on its own costs 5 KB.
Verified: retuning `controlScale` in the shared module makes mobile's `tokens:check` fail, and
reverting it makes the check pass — the drift this replaces used to be silent, and a shared
component would have rendered at different sizes per app. oss type-checks clean and its config
still resolves 148 colours with the `btn` family and `control` radii intact; mobile type-checks,
lints, builds, and its 121 tests pass.
ardaerzin
force-pushed
the
fe-refactor/mobile-shared-theme-tokens
branch
from
August 8, 2026 07:06
bdac3d5 to
759052d
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
@agenta/uiis Radix + cva since v0.109.0, so the mobile app could in principle drop its duplicate primitives and use the shared ones. It cannot. The shared components are written against the palette-derived vocabulary (bg-btn-default-bg,h-control,rounded-control), and mobile defines none of those names. Dropped in as-is, a shared Button renders as unstyled markup: 12 of its 75 classes produced any CSS.The two definitions mobile needs,
controlScaleandshadcnTokens, used to live insideweb/oss/tailwind.config.ts, private to a Tailwind v3 JS config that mobile (v4, CSS-first) cannot read. #5740 lifted them out intoweb/oss/src/styles/theme/, and that already sits in this base. This PR is the mobile half: teach mobile to read them.Changes
Three files, all under
web/mobile.Mobile's token generator now imports
controlScaleandshadcnTokensand emits them into Tailwind v4's namespaces: colours as--color-*, geometry as--height-*/--width-*/--spacing-*/--radius-*/--text-*. It flattens the nested families the v3 config gets for free ({primary: {DEFAULT, hover}}becomesprimaryandprimary-hover) and unions the contract with a scan of what the package actually references, so a component reaching for a raw antd token name resolves too.Colour values come from
theme-variables.cssrather thanpalette.ts. A good share are antd-algorithm output (derived fills, preset tag ramps) thatpalette.tscannot reproduce. Both files come from the same generator run, so this stays one source of truth.globals.cssgains the hand-written bridge for the button and state families (--color-btn-*,--color-error*,--color-disabled*,--color-focus-ring), pointing each at the generated palette variable.theme.generated.cssis the generator's output, committed so the build does not depend on a codegen step.Coverage: 176 of the 181 colour utilities
@agenta/uiuses now resolve in mobile, and Button 71 of 75. Of the five remaining, three are the scan matching prose in comments.bg-opacity-10andbg-opacity-20are real. They are Tailwind v3 utilities removed in v4, which@agenta/uiwill need to restate asbg-black/10before whichever component uses them can cross over.Tests / notes
controlfrom 28px to 29px inweb/oss/src/styles/theme/controlScale.tsmakes mobile'stokens:checkfail, and reverting makes it pass. Previously mobile hand-copied those pixels, so a retune desynced the apps silently and a shared component rendered at different sizes per app.pnpm --filter @agenta/mobile test: 15 files, 130 tests pass.pnpm --filter @agenta/mobile lint(eslint plustokens:check) passes.tag-pink,tag-yellow,tag-volcano,tag-geekblueandtag-limepresets in both light and dark. An earlier revision of this branch predated them and would have shipped mobile a short token set.No component is adopted here, and mobile does not depend on
@agenta/uiyet. That comes next, together with the@sourcedirective that lets Tailwind scan the package. It is deliberately not in this change, because scanning the package emits utilities for components nothing renders and takes the mobile CSS bundle from 40 KB to 110 KB. The token layer on its own costs 5 KB.Nothing is user-visible, so there is nothing to QA. No mobile screen changes appearance.