feat(frontend): retheme to warm brand palette (token-level, light + dark)#5392
feat(frontend): retheme to warm brand palette (token-level, light + dark)#5392mmabrouk wants to merge 1 commit into
Conversation
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedNo new commits to review since the last review. ⚙️ 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:
📝 WalkthroughWalkthroughThis change replaces hardcoded UI colors with theme variables, revises light and dark palette definitions, updates generated Ant Design and Tailwind tokens, and applies the new tokens across OSS components, shared packages, global styles, charts, editors, overlays, and icons. ChangesTheme token migration
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
web/oss/src/styles/globals.css (1)
868-873: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUpdate the adjacent hardcoded colors to use theme variables.
While migrating
border-colorto a theme variable, thebackground-coloron line 871 remains a hardcoded#1f1f1f, andcoloron line 870 uses a hardcoded rgba value. To ensure full theme consistency and responsiveness to future palette updates, consider updating these to appropriate theme variables (such asvar(--ag-colorBgContainerDisabled)andvar(--ag-colorTextDisabled)).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d990562a-de49-4e59-9d82-f14e05e665d5
⛔ Files ignored due to path filters (1)
web/oss/src/styles/theme/antd-overrides.generated.tsis excluded by!**/*.generated.*
📒 Files selected for processing (42)
web/oss/src/components/DeploymentsDashboard/components/DeploymentCard/index.tsxweb/oss/src/components/DrillInView/DrillInFieldHeader.tsxweb/oss/src/components/DrillInView/TraceSpanDrillInView.tsxweb/oss/src/components/EvalRunDetails/components/EvaluatorMetricsChart/BarChart.tsxweb/oss/src/components/EvalRunDetails/components/EvaluatorMetricsChart/HistogramChart.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/components/EvaluatorSection.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/index.tsxweb/oss/src/components/EvalRunDetails/components/views/OverviewView/components/OverviewPlaceholders.tsxweb/oss/src/components/EvalRunDetails/components/views/SingleScenarioViewerPOC/ScenarioAnnotationPanel/RunOverlay.tsxweb/oss/src/components/Evaluations/MetricDetailsPopover/assets/ResponsiveMetricChart.tsxweb/oss/src/components/Layout/assets/styles.tsweb/oss/src/components/Onboarding/OnboardingCard.tsxweb/oss/src/components/TemplateStrip/components/CopiedToast.tsxweb/oss/src/components/pages/agent-home/assets/templates.tsweb/oss/src/components/pages/app-management/modals/CustomAppCreationLoader.tsxweb/oss/src/components/pages/observability/components/ObservabilityHeader/useBatchAddTracesToQueue.tsxweb/oss/src/components/pages/prompts/components/PromptsHouseIcon.tsxweb/oss/src/components/pages/prompts/components/SetupWorkflowIcon.tsxweb/oss/src/components/pages/prompts/hooks/usePromptsColumns.tsxweb/oss/src/components/pages/prompts/modals/DeleteFolderModal.tsxweb/oss/src/components/pages/settings/Secrets/SecretProviderTable/index.tsxweb/oss/src/lib/helpers/colors.tsweb/oss/src/styles/animations.cssweb/oss/src/styles/code-editor-styles.cssweb/oss/src/styles/editor-theme.cssweb/oss/src/styles/evaluations.cssweb/oss/src/styles/globals.cssweb/oss/src/styles/human-evals.cssweb/oss/src/styles/theme-variables.cssweb/oss/src/styles/theme/legacy-shim.tsweb/oss/src/styles/theme/palette.tsweb/oss/src/styles/tokens/antd-tailwind.jsonweb/oss/src/styles/tokens/antd-themeConfig.jsonweb/oss/tailwind.config.tsweb/packages/agenta-annotation-ui/src/components/AnnotationSession/ConfigurationView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/HarnessSelectControl.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/itemDescriptors.tsxweb/packages/agenta-ui/src/CellRenderers/EvaluatorMetricBar.tsxweb/packages/agenta-ui/src/components/presentational/avatar/utils.tsweb/packages/agenta-ui/src/type-chip/TypeChip.tsxweb/packages/agenta-ui/src/utils/styles.tsweb/scripts/generate-tailwind-tokens.ts
| const RunOverlay = ({isRunning, onRun}: RunOverlayProps) => { | ||
| return ( | ||
| <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md rounded-lg"> | ||
| <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--ag-rgba-fff-78)] backdrop-blur-md rounded-lg"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Preserve a dark-theme overlay background.
--ag-rgba-fff-78 is a fixed white 78% overlay, so this change makes the overlay bright white in dark mode instead of retaining the previous dark appearance. Add a dark-theme override backed by a dark token.
Proposed fix
- <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--ag-rgba-fff-78)] backdrop-blur-md rounded-lg">
+ <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--ag-rgba-fff-78)] dark:bg-[var(--ag-rgba-000-45)] backdrop-blur-md rounded-lg">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--ag-rgba-fff-78)] backdrop-blur-md rounded-lg"> | |
| <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--ag-rgba-fff-78)] dark:bg-[var(--ag-rgba-000-45)] backdrop-blur-md rounded-lg"> |
| body { | ||
| --not-available-stripe: #eaeff5; | ||
| --not-available-stripe: var(--ag-zinc-2); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Remove the redundant and conflicting dark mode override.
Because var(--ag-zinc-2) automatically resolves to the correct dark color (#302e2d) via theme-variables.css, the explicit .dark body block at the bottom of this file is no longer needed. Leaving it in place will overwrite your new CSS variable with the stale, hardcoded #2a2a2a value in dark mode, preventing the new palette from applying correctly.
Please delete the following block from lines 83-85:
.dark body {
--not-available-stripe: `#2a2a2a`;
}| "--ag-c-394857": {light: "#4a4a50", dark: "var(--ant-color-text-secondary)"}, | ||
| "--ag-c-475467": {light: "#475467", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-475569": {light: "#475569", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-586673": {light: "#586673", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-586673": {light: "#676770", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-64748B": {light: "#64748b", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-667085": {light: "#667085", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-667085BF": {light: "#667085bf", dark: "rgba(255, 255, 255, 0.749)"}, | ||
| "--ag-c-6B7280": {light: "#6b7280", dark: "var(--ant-color-text-tertiary)"}, | ||
| "--ag-c-758391": {light: "#758391", dark: "var(--ant-color-border)"}, | ||
| "--ag-c-758391": {light: "#9c9c9a", dark: "var(--ant-color-border)"}, |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use correct CSS variable prefixes and avoid hand-editing generated files.
The dark values specified here use the var(--ant-...) prefix (e.g., var(--ant-color-text-secondary)), but the generated theme-variables.css (e.g., line 539) contains var(--ag-...) for these exact same variables. This indicates that theme-variables.css was hand-edited to fix the prefixes, which violates the coding guideline to never hand-edit generated files.
If pnpm generate:tailwind-tokens is run again in the future, it will overwrite the CSS with these broken --ant- prefixes. Please update the source values in this file to use the correct --ag- prefixes (e.g., var(--ag-colorTextSecondary)) across all entries, and re-run the generation script to output the CSS cleanly.
Source: Coding guidelines
Railway Preview Environment
|
1 participant
Context
The web app shipped in a cool navy/zinc palette that no longer matches the Agenta brand. This PR retheme it to the warm brand palette in both light and dark mode, at the token level, so the change flows through the whole app rather than being painted on per screen.
What a user sees:
#F6F5F3), chrome sits one step brighter (#FCFBFA), text is near-black (#242424), and the brand yellow (#F2F25C/#E7E712) appears sparingly as an accent.#1E1C1D/#2A2828) replace the old cool grays, and the primary CTA (Send / submit) is the brand yellow.Screenshots and a screen recording of the walkthrough follow in the first comment.
Why the diff is larger than "edit palette.ts and regenerate"
The intent was a pure token swap. An audit of every hardcoded color under
web/found three reasons that wasn't enough:tokens/antd-themeConfig.json(593 values) andtokens/antd-tailwind.json(66 values) feed antd'sConfigProviderand Tailwind's color scale directly. Regeneratingtheme-variables.cssdoes not touch them, so they were remapped by hand, key-aware, with the file structure otherwise byte-identical.tailwind.config.tscalled antd'stheme.getDesignToken()with no seed, so Tremor's brand colors were antd's stock blue (#1677ff), not Agenta's color, in both light and dark. This was already wrong before the retheme. It is now seeded from the real design tokens..dark-scoped CSS rules, Tailwind arbitrary values). Those were switched to tokens.Hardcoded-hex audit
A case-insensitive sweep of
web/for the old palette's literals (outside the token source files) found 255 matching lines across 50 files:var(--ag-c-*, #fallback)fallbacks (the var is always defined, so the hex never paints), JSDoc token-reference comments, or fixed decorative palettes (avatar initials pairs, template accent crayons) where the navy hex is coincidental, not a theme role.onboard-page-grids.svg, OSS + EE) that no page imports. A static SVG inpublic/cannot consume CSS vars, so these need a re-export or deletion (follow-up).Deliberate skips, called out so a reviewer does not think they were missed:
.auth-locked-inputblock inglobals.css(PR feat(frontend): redesign the sign-in screen for the agent workspace positioning #5386 owns that area; the dark counterpart was tokenized).ProviderCredentialsSection.Judgement calls flagged for review
#FBFBE9(with one minted hover step#F5F5D8) forcontrolItemBgActive,Table.rowSelectedHoverBg, andtemplateStrip.selectedBg.#D1D151from the#F2F25Cseed and no seed can derive a true#F2F25C(the cap is ~#DCDC61). So the primary Button (CTA / Send) is pinned to#F2F25Cwith#1E1C1Dtext, while other primary-tinted controls use the derived#D1D151family (still AA). A global true-yellow needs a custom derivative algorithm (follow-up).DARK_TOKEN_OVERRIDES. The generator gained overrides forcolorBgContainer/BgLayout/BgSpotlight/Border/BorderSecondary/Split/controlItemBgActive/colorPrimaryTextso the antd dark layer matches the vars instead of staying cool (#141414/#424242).colorBgBasestays#000000in dark at the antd map level. It is a seed token (antd strips seed overrides) and seeding it warm derives off-hue outputs, so the antd value stays#000000while--ag-colorBgBaseis#171516.colorPrimary, for white-monogram chips (harness selector, gateway-tool descriptor, agent-home templates, sticky banner).colorPrimarywould flip to yellow in dark under fixed white text;colorBgSpotlightstays dark in both themes.QA evidence
#242424on#F6F5F3#676770on#FCFBFArgba(2,1,17,0.6)on#FFFFFF#FFFFFFon#242424(primary button)#1E1C1Don#F2F25C(dark primary button)#1E1C1Don#D1D151(derived dark family)#FFFFFFon#1E1C1D#242424on#FBFBE9(selected tint)Yellow is never used as a text color. The
#9C9C9Aplaceholder (2.75 on white) is exempt as a placeholder/disabled role and still improves on the old#BDC7D1(1.79).Two QA nits, left as-is:
rgba(0,0,0,0.45), not a warm ink.Follow-ups
--ag-rgba-051729-*and--ag-c-*var stems (values are repointed; the names still carry the old navy hex).ThemeContextProviderfor a true global#F2F25C.drawerDarktier (still cool-gray apart from the focus accent).onboard-page-grids.svg(OSS + EE).agenta-ui/utils/styles.ts(text-zinc-4paints#D6D6D3while the role token is#9C9C9A).Tests
pnpm lint-fixgreen, tailwind configtscexit 0.What to QA
https://claude.ai/code/session_016gbn9cBfQdP7Sexn2sxJCk