[refactor] Lift the theme contract out of the Tailwind config - #5740
Conversation
Two definitions that describe the design system sit inside `web/oss/tailwind.config.ts`, private to a Tailwind v3 JS config: - `controlScale` — the control geometry (heights, widths, paddings, radii, type ramps) - `shadcnTokens` — the utility-name to CSS-variable contract the `@agenta/ui` primitives are written against Anything that is not a Tailwind v3 config cannot read either one, so a second consumer has to restate them and drift silently. `shadcnTokens` already describes itself as one shared definition for the app and Storybook; this makes that literally true. Both move to `web/oss/src/styles/theme/`, beside `palette.ts`, and the config imports them. The objects are unchanged — this is a move, not a retune. No behaviour change. Verified the config still loads and resolves 148 colours with the `btn` family, `control` height 28px, `control` radius 8px, and the `btn-md` type ramp intact, and that `web/oss` type-checks clean.
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
Frontend
refactoring
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 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:
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe change extracts shared control-scale and shadcn token definitions into dedicated theme modules. Tailwind imports these exports and continues using them through its existing theme extensions. ChangesShared theme tokens
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/oss/src/styles/theme/controlScale.ts (1)
1-19: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReduce the module preambles.
These preambles describe design context, not a narrow code-level constraint. Replace each preamble with one short contract comment. Keep longer comments only where they explain a surprising parity or ordering constraint.
web/oss/src/styles/theme/controlScale.ts#L1-L19: Replace the multi-line module rationale with a short control-scale contract comment.web/oss/src/styles/theme/shadcnTokens.ts#L1-L16: Replace the multi-line module rationale with a short semantic-token contract comment.As per coding guidelines, keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements.
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 87c010fc-c942-48f5-825f-b60763a4026a
📒 Files selected for processing (3)
web/oss/src/styles/theme/controlScale.tsweb/oss/src/styles/theme/shadcnTokens.tsweb/oss/tailwind.config.ts
Railway Preview Environment
|
Resolve tailwind.config.ts conflict: keep the extracted controlScale/shadcnTokens module structure from this branch, and port the tag-pink/yellow/volcano/geekblue/lime entries release/v0.109.1 added inline into the extracted shadcnTokens.ts so no tokens are lost.
3 participants
Context
Two objects that describe the design system live inside
web/oss/tailwind.config.ts, private to a Tailwind v3 JS config:controlScale— control geometry (heights, widths, paddings, radii, type ramps)shadcnTokens— the utility-name → CSS-variable contract the@agenta/uiprimitives are written againstAnything that is not a Tailwind v3 config cannot read either one. A second consumer has to restate the values and then drift silently, which for shared components means the same Button rendering at different sizes per app.
shadcnTokensalready describes itself as "ONE shared definition for the app + Storybook" — this makes that literally true.The concrete motivation:
web/mobileis Tailwind v4 (CSS-first, no JS config). It cannot import this file, so today it can only hand-copy pixel values. A follow-up makes its token generator import these modules instead.Changes
Both objects move to
web/oss/src/styles/theme/, besidepalette.ts, and the config imports them:The objects themselves are unchanged. This is a move, not a retune — no token value differs.
Tests / notes
btnfamily present,controlheight28px,controlradius8px, and thebtn-mdtype ramp["12px", {lineHeight: "normal"}]— all identical to before.web/osstype-checks clean.