feat(frontend): the 14px type scale — one ladder for the whole app - #5850
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
size:L
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR standardizes typography across OSS components and shared packages. It replaces many fixed pixel values with Tailwind text utilities, increases selected labels and badges, adds the ChangesTypography standardization
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 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 |
Mahmoud's approved scale (audit artifact 783b0df0): base 12->14 with line-height 1.6667->1.4286 (the body box stays exactly 20px, so default and small controls do not grow), titles 20->24/32, fontSizeSM 10->12, fontSizeLG 14->16, and the ~230 token values that mirror them; Tailwind xs -> 13/18 (the new secondary step); control ramps to 14/16; and the per-surface sweep - 15/14.5/13.5/12.5/11.5/11px -> the scale, 10px -> 12px, hero 20->24 (first-run 30 kept), section headings 16/600 both columns, sidebar nav and switcher on body size. Four @agenta/ui shadcn parity shims updated to the new antd values so the shared package stays in parity. Icon/monogram geometry (9px avatars, badge dots) untouched; 61 text-[13px] sites left as-is (13 IS the new secondary step). 181 files. Verified: resolved Tailwind config emits the new ladder, the generated theme files are byte-identical (fonts never fed them), eslint zero new findings, 312/312 entity-ui tests, live stack compiles and serves the new scale.
ccbdf54 to
44f8e99
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/packages/agenta-entity-ui/src/selection/components/UnifiedEntityPicker/variants/PopoverCascaderVariant.tsx (1)
154-172: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winLet the multi-select child header grow with the new text size.
The header keeps a fixed
h-8height. It contains two stacked text rows and vertical padding. The newtext-[12px]rows can exceed the fixed height and overlap the first child row. Usemin-h-8instead ofh-8, or set an explicit compact line height and adjust the padding.Proposed fix
- className="... bg-[var(--ag-c-05172905)] h-8 flex items-start justify-between gap-2" + className="... bg-[var(--ag-c-05172905)] min-h-8 flex items-start justify-between gap-2"
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f87503b4-035d-4078-8ff2-22cf63df42b0
📒 Files selected for processing (181)
web/oss/src/components/AgentChatSlice/components/AgentChatEmptyState.tsxweb/oss/src/components/AgentChatSlice/components/AgentMessage.tsxweb/oss/src/components/AgentChatSlice/components/AgentTurn.tsxweb/oss/src/components/AgentChatSlice/components/ApprovalDock.tsxweb/oss/src/components/AgentChatSlice/components/AudioPlayer.tsxweb/oss/src/components/AgentChatSlice/components/ComposerAttachments.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/EventRow.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/Inspector.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/InspectorDrawer.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/LensBody.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/lenses/ContextLens.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/lenses/ResponseLens.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/lenses/RuntimeLens.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/lenses/TimelineLens.tsxweb/oss/src/components/AgentChatSlice/components/QueuedMessages.tsxweb/oss/src/components/AgentChatSlice/components/SessionHistoryMenu.tsxweb/oss/src/components/AgentChatSlice/components/SessionRail.tsxweb/oss/src/components/AgentChatSlice/components/ToolActivity.tsxweb/oss/src/components/AgentChatSlice/components/VoiceInputButton.tsxweb/oss/src/components/AgentChatSlice/components/approvals/ApprovedContentManifest.tsxweb/oss/src/components/AgentChatSlice/components/approvals/CommitRevisionApproval.tsxweb/oss/src/components/AgentChatSlice/components/approvals/RevisionOperations.tsxweb/oss/src/components/AgentChatSlice/components/clientTools/ElicitationWidget.tsxweb/oss/src/components/CustomUIs/CustomAntdBadge.tsxweb/oss/src/components/DrillInView/DrillInFieldHeader.tsxweb/oss/src/components/DrillInView/EntityDualViewEditor.tsxweb/oss/src/components/DrillInView/PrettyJsonView.tsxweb/oss/src/components/DrillInView/TraceSpanDrillInView.tsxweb/oss/src/components/Drives/ContextRail.tsxweb/oss/src/components/Drives/DriveBreadcrumb.tsxweb/oss/src/components/Drives/DriveExplorerStates.tsxweb/oss/src/components/Drives/DriveFileCard.tsxweb/oss/src/components/Drives/DriveFileRow.tsxweb/oss/src/components/Drives/DriveHeader.tsxweb/oss/src/components/Drives/DrivePendingTiles.tsxweb/oss/src/components/Drives/DriveTreeList.tsxweb/oss/src/components/Drives/DriveTreeRow.tsxweb/oss/src/components/Drives/FolderTile.tsxweb/oss/src/components/Drives/FolderView.tsxweb/oss/src/components/Drives/OriginTag.tsxweb/oss/src/components/Drives/StorageSection.tsxweb/oss/src/components/Drives/fileMeta.tsxweb/oss/src/components/Drives/renderers.tsxweb/oss/src/components/Drives/repoMeta.tsxweb/oss/src/components/EntityIdentity/fields.tsxweb/oss/src/components/EvalRunDetails/components/TableCells/InvocationTraceSummary.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/components/InvocationSection.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/components/RunSummaryCard.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/components/SectionPrimitives.tsxweb/oss/src/components/EvalRunDetails/components/views/ConfigurationView/components/TestsetSection.tsxweb/oss/src/components/EvalRunDetails/etl/ScenarioFilterBar.tsxweb/oss/src/components/EvalRunDetails/utils/renderChatMessages.tsxweb/oss/src/components/EvaluationRunsTablePOC/components/headers/MetricColumnHeader.tsxweb/oss/src/components/Evaluations/MetricDetailsPopover/assets/ResponsiveFrequencyChart.tsxweb/oss/src/components/Evaluations/MetricDetailsPopover/assets/ResponsiveMetricChart.tsxweb/oss/src/components/Evaluations/components/MetricDetailsPreviewPopover.tsxweb/oss/src/components/Evaluators/components/ConfigureEvaluator/RunOnSelector.tsxweb/oss/src/components/Evaluators/components/ConfigureEvaluator/SelectAppEmptyState.tsxweb/oss/src/components/NewAgentButton/index.tsxweb/oss/src/components/Playground/Components/AgentCommitNotice.tsxweb/oss/src/components/Playground/Components/AgentRevisionSelector/index.tsxweb/oss/src/components/Playground/Components/AlwaysAllowedNotice.tsxweb/oss/src/components/Playground/Components/Modals/RefinePromptModal/assets/InstructionsPanel.tsxweb/oss/src/components/Playground/Components/Modals/RefinePromptModal/assets/PreviewPanel.tsxweb/oss/src/components/Playground/Components/Modals/RefinePromptModal/assets/RefinePromptModalContent.tsxweb/oss/src/components/Playground/Components/PlaygroundVariantConfigPrompt/assets/GatewayToolsPanel.tsxweb/oss/src/components/Playground/Components/ProviderKeyNotice.tsxweb/oss/src/components/References/ReferenceTag.tsxweb/oss/src/components/References/cells/QueryCells.tsxweb/oss/src/components/SeedAttachments/index.tsxweb/oss/src/components/SessionInspector/tabs/StatesTab.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/AccordionTreePanel.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/components/AnnotationTabItem/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceSidePanel/TraceAnnotations/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/index.tsxweb/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsxweb/oss/src/components/Sidebar/components/WorkflowIdentity.tsxweb/oss/src/components/Sidebar/scopes/bottomSection.tsxweb/oss/src/components/TemplateStrip/components/StripCard.tsxweb/oss/src/components/TemplateStrip/components/TemplateChip.tsxweb/oss/src/components/TemplateStrip/index.tsxweb/oss/src/components/UsageSummary/index.tsxweb/oss/src/components/Webhooks/RequestPreview.tsxweb/oss/src/components/pages/agent-home/PlaygroundOnboarding/OnboardingConfigPanel.tsxweb/oss/src/components/pages/agent-home/StripHome.tsxweb/oss/src/components/pages/agent-home/components/EmptyAgents.tsxweb/oss/src/components/pages/agent-home/components/TemplateDetail/index.tsxweb/oss/src/components/pages/agent-home/components/TemplateSetupDrawer/IntegrationRow.tsxweb/oss/src/components/pages/agent-home/components/TemplateSetupDrawer/ModelRow.tsxweb/oss/src/components/pages/agent-home/components/TemplateSetupDrawer/SetupRow.tsxweb/oss/src/components/pages/agent-home/components/TemplateSetupDrawer/ToolsPreview.tsxweb/oss/src/components/pages/agent-home/components/TemplateSetupDrawer/index.tsxweb/oss/src/components/pages/agent-home/components/TemplatesGallery/TemplateSection.tsxweb/oss/src/components/pages/agent-home/components/TemplatesSection/TemplateCard.tsxweb/oss/src/components/pages/agent-home/components/TutorialVideoEmbed.tsxweb/oss/src/components/pages/agent-home/components/YourAgentsTable/AgentRow.tsxweb/oss/src/components/pages/agent-home/components/YourAgentsTable/columns.tsxweb/oss/src/components/pages/agent-home/index.tsxweb/oss/src/components/pages/evaluations/onlineEvaluation/components/FiltersPreview.tsxweb/oss/src/components/pages/evaluations/onlineEvaluation/components/QueryFiltersCell.tsxweb/oss/src/components/pages/observability/components/EvaluatorMetricsCell.tsxweb/oss/src/components/pages/observability/dashboard/widgetCard.tsxweb/oss/src/components/pages/overview/agent/AgentFilesCard.tsxweb/oss/src/components/pages/sessions/components/SessionListCard.tsxweb/oss/src/styles/theme/controlScale.tsweb/oss/src/styles/tokens/antd-themeConfig.jsonweb/oss/tailwind.config.tsweb/packages/agenta-annotation-ui/src/components/AddToQueuePopover/index.tsxweb/packages/agenta-annotation-ui/src/components/AnnotationSession/ScenarioListSidebar.tsxweb/packages/agenta-annotation-ui/src/components/AnnotationSession/ScenarioListView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/CodeBlockLanguageMenu.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ConfigItemDrawer.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/FieldsTagsEditorControl.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/InstructionsDrawer.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/MarkdownEditor.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/McpServerFormView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SchemaTree.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SkillFormView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolFormView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolSelectorPopover.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/WorkflowReferenceSelector.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/BuildKitSection.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ItemRow.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ParameterNodeEditor.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ParameterTree.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/PermissionPolicySelect.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ProviderCredentialsSectionView.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ProviderKeyField.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/RevertGroupButton.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/SectionTitleBadge.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/sectionGroups.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/triggerManagement/SubscriptionChildRow.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/triggerManagement/TriggerRow.tsxweb/packages/agenta-entity-ui/src/agent/AgentCard.tsxweb/packages/agenta-entity-ui/src/drawers/shared/AddItemMenu.tsxweb/packages/agenta-entity-ui/src/drawers/shared/CatalogAppCard.tsxweb/packages/agenta-entity-ui/src/drawers/shared/CatalogChooser.tsxweb/packages/agenta-entity-ui/src/drawers/shared/GatewayCatalogDrawer.tsxweb/packages/agenta-entity-ui/src/drawers/shared/MasterDetailRail.tsxweb/packages/agenta-entity-ui/src/drawers/shared/RailField.tsxweb/packages/agenta-entity-ui/src/drawers/shared/SectionRail.tsxweb/packages/agenta-entity-ui/src/gatewayTool/components/SchemaForm.tsxweb/packages/agenta-entity-ui/src/gatewayTool/drawers/CatalogDrawer.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/ScheduleBuilderField.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/schedule/MessageComposer.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/schedule/RunInPlaygroundButton.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/schedule/WindowField.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/shared/EventSourcePicker.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/shared/RunVersionField.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/subscription/InputsMappingField.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/subscription/MappingSection.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/subscription/PillEditor.tsxweb/packages/agenta-entity-ui/src/gatewayTrigger/drawers/subscription/SourceField.tsxweb/packages/agenta-entity-ui/src/modals/commit/components/EntityCommitFooter.tsxweb/packages/agenta-entity-ui/src/modals/commit/components/changes/AgentChangesSummary.tsxweb/packages/agenta-entity-ui/src/selection/adapters/evaluatorLabelUtils.tsweb/packages/agenta-entity-ui/src/selection/adapters/workflowRevisionRelationAdapter.tsweb/packages/agenta-entity-ui/src/selection/components/UnifiedEntityPicker/variants/PopoverCascaderVariant.tsxweb/packages/agenta-entity-ui/src/testcase/TestcaseDrawer.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RepetitionNavigation/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionResultView/index.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsxweb/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsxweb/packages/agenta-playground-ui/src/components/shared/NodeResultCard/index.tsxweb/packages/agenta-sessions-ui/src/SessionListStates.tsxweb/packages/agenta-ui/src/CellRenderers/EvaluatorMetricBar.tsxweb/packages/agenta-ui/src/Editor/MarkdownToolbar.tsxweb/packages/agenta-ui/src/Editor/plugins/code/extensions/validationReact.tsxweb/packages/agenta-ui/src/Editor/plugins/code/nodes/LongTextNode.tsxweb/packages/agenta-ui/src/Editor/plugins/token/TokenTypeaheadPlugin.tsxweb/packages/agenta-ui/src/RichChatInput/RichChatInput.tsxweb/packages/agenta-ui/src/SelectLLMProvider/SelectLLMProviderBase.tsxweb/packages/agenta-ui/src/components/EntityCard.tsxweb/packages/agenta-ui/src/components/presentational/layout/PanelSection.tsxweb/packages/agenta-ui/src/components/ui/alert.tsxweb/packages/agenta-ui/src/components/ui/divider.tsxweb/packages/agenta-ui/src/components/ui/progress.tsxweb/packages/agenta-ui/src/components/ui/spinner.tsx
| </TooltipWithCopyAction> | ||
| {hasWindowingMeta ? ( | ||
| <div className="flex flex-wrap gap-2 text-[11px] text-[var(--ag-c-667085)]"> | ||
| <div className="flex flex-wrap gap-2 text-xs text-[var(--ag-c-667085)]"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Replace the legacy color token on this changed line.
text-[var(--ag-c-667085)] violates the rule that forbids --ag-c-* literals. Keep text-xs, but use the matching semantic token, such as text-colorTextTertiary, after confirming color parity.
Proposed fix
- <div className="flex flex-wrap gap-2 text-xs text-[var(--ag-c-667085)]">
+ <div className="flex flex-wrap gap-2 text-xs text-colorTextTertiary">📝 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="flex flex-wrap gap-2 text-xs text-[var(--ag-c-667085)]"> | |
| <div className="flex flex-wrap gap-2 text-xs text-colorTextTertiary"> |
Source: Coding guidelines
There was a problem hiding this comment.
Declining for this PR — scope. This is a pure typography change (text-[10px]/text-[11px] → the text-xs/text-sm ladder). The colour token on this line is pre-existing; the diff here changes only the size class beside it.
The guideline is right and these sites should move to sanctioned tokens, but doing it here would turn a mechanical 181-file type-scale pass into a colour-token migration, and each replacement needs a light+dark parity check that has nothing to do with the type ladder. That is a separate change with its own review, not a rider on this one.
Tracking them rather than dropping them — the full list from this review is going to the team as follow-up.
There was a problem hiding this comment.
@mmabrouk Acknowledged. The color-token migration is out of scope for this typography-only PR.
The existing text-[var(--ag-c-667085)] token can be handled in the separate follow-up with light and dark parity validation. Would you like me to create a GitHub issue for that follow-up?
🐇
✏️ Learnings added
Learnt from: mmabrouk
Repo: Agenta-AI/agenta PR: 5850
File: web/oss/src/components/References/cells/QueryCells.tsx:81-81
Timestamp: 2026-08-09T21:59:52.584Z
Learning: For frontend typography-only migrations, do not require replacement of pre-existing legacy color tokens on otherwise typography-only changed lines. Track color-token migrations separately because each replacement requires light and dark appearance parity validation.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
You are interacting with an AI system.
| <span className="text-xs uppercase tracking-wide text-[var(--ag-c-97A4B0,#97a4b0)]"> | ||
| Version history | ||
| </span> | ||
| <span className="rounded-full border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] px-1.5 text-[10px] text-[var(--ag-c-97A4B0,#97a4b0)]"> | ||
| <span className="rounded-full border border-solid border-[var(--ag-c-EAEFF5,#eaeff5)] px-1.5 text-[12px] text-[var(--ag-c-97A4B0,#97a4b0)]"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Replace forbidden legacy and raw color tokens in both changed class strings.
Both sites retain colors that bypass the approved theme-token system.
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsx#L538-L541: replace the--ag-c-*variables and hex fallbacks with supported semantic tokens.web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ProviderCredentialsSectionView.tsx#L160-L160: replacetext-[#586673]with a supported theme token.
📍 Affects 2 files
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsx#L538-L541(this comment)web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ProviderCredentialsSectionView.tsx#L160-L160
Source: Coding guidelines
There was a problem hiding this comment.
Declining for this PR — scope. This is a pure typography change (text-[10px]/text-[11px] → the text-xs/text-sm ladder). The colour token on this line is pre-existing; the diff here changes only the size class beside it.
The guideline is right and these sites should move to sanctioned tokens, but doing it here would turn a mechanical 181-file type-scale pass into a colour-token migration, and each replacement needs a light+dark parity check that has nothing to do with the type ladder. That is a separate change with its own review, not a rider on this one.
Tracking them rather than dropping them — the full list from this review is going to the team as follow-up.
There was a problem hiding this comment.
@mmabrouk, understood. The color-token finding is valid but out of scope for this typography-only PR. I will not require it for this change.
Would you like me to create a GitHub follow-up issue for the sanctioned color-token migration, with links to the affected files and this discussion?
(ᵕ—ᴗ—) 🐇
You are interacting with an AI system.
| "span", | ||
| { | ||
| className: "text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500", | ||
| className: "text-[12px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500", |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the workflow group tag theme-aware.
bg-gray-100 text-gray-500 are fixed light-theme colors. The changed tag has no dark variant. Use semantic theme utilities or supported theme variables so the tag remains readable in dark mode.
As per coding guidelines, every changed UI element must support light and dark appearance.
Source: Coding guidelines
There was a problem hiding this comment.
Right that this is a real gap, declining for this PR on scope — but flagging it as the one finding here worth its own follow-up.
bg-gray-100 text-gray-500 genuinely has no dark variant, so the tag is a light-theme island. But it is pre-existing: this PR changes only the size on that line.
- className: "text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500",
+ className: "text-[12px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500",Fixing it needs a dark-mode parity check on the workflow group tag, which is a different kind of change from a type-scale pass. I am raising it to the team as a standalone follow-up rather than letting it disappear with this thread.
There was a problem hiding this comment.
@mmabrouk, agreed. The dark-mode gap is pre-existing and is outside this typography-scale change.
Please let me know if you want me to create a GitHub follow-up issue for the workflow group tag dark-mode parity check.
You are interacting with an AI system.
| })} | ||
| </div> | ||
| <span className="text-center text-[11px] text-[var(--ag-c-97A4B0,#97a4b0)]"> | ||
| <span className="text-center text-xs text-[var(--ag-c-97A4B0,#97a4b0)]"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use a supported theme color token.
Line 128 uses the forbidden --ag-c-* variable and a raw hex fallback. Replace them with a Tailwind semantic color or a supported var(--ag-color*) variable.
Proposed fix
- <span className="text-center text-xs text-[var(--ag-c-97A4B0,`#97a4b0`)]">
+ <span className="text-center text-xs text-[var(--ag-colorTextTertiary)]">As per coding guidelines, consume theme colors through Ant Design semantic tokens, Tailwind color utilities, or supported var(--ag-color*) variables; do not use raw hex colors or --ag-c-* literals.
📝 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.
| <span className="text-center text-xs text-[var(--ag-c-97A4B0,#97a4b0)]"> | |
| <span className="text-center text-xs text-[var(--ag-colorTextTertiary)]"> |
Source: Coding guidelines
There was a problem hiding this comment.
Declining for this PR — scope. This is a pure typography change (text-[10px]/text-[11px] → the text-xs/text-sm ladder). The colour token on this line is pre-existing; the diff here changes only the size class beside it.
The guideline is right and these sites should move to sanctioned tokens, but doing it here would turn a mechanical 181-file type-scale pass into a colour-token migration, and each replacement needs a light+dark parity check that has nothing to do with the type ladder. That is a separate change with its own review, not a rider on this one.
Tracking them rather than dropping them — the full list from this review is going to the team as follow-up.
There was a problem hiding this comment.
@mmabrouk, acknowledged. This PR only changes the typography class. The pre-existing color token should move in the separate color-token migration.
Would you like me to create a GitHub issue for the follow-up, or is the team already tracking it elsewhere?
(╥﹏╥)🐇
You are interacting with an AI system.
Railway Preview Environment
Updated at 2026-08-09T22:02:39.161Z |
1 participant
The approved typography proposal (visual audit), implemented in one pass. 181 files, +730/−748.
The scale
xs12→13/18 (the new secondary step) — moves the 335-site sweep; 10px sites →12px (128 sites).Judgment calls (details in the commit)
text-[13px]sites (13 IS the new secondary step), MarkdownPreview's content scale.Verification
Resolved Tailwind config emits the new ladder end to end; generated theme files byte-identical (fonts never fed them); zero new eslint findings across all 181 files; 312/312 entity-ui tests; live stack compiles and serves the scale. Visual QA sweep (screenshots, both themes) running now — its findings land here before merge.
Stacked on #5848; merge last.