Skip to content

chore(frontend): palette cleanup: hex migration, chart tokens, chip outlines, dark repairs #5973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mmabrouk merged 3 commits into from
Aug 12, 2026
Merged

chore(frontend): palette cleanup: hex migration, chart tokens, chip outlines, dark repairs #5973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75006e5
chore(frontend): migrate raw hex to palette tokens, tokenize charts, …
mmabrouk Aug 12, 2026
fb1c580
chore(frontend): drop dead editorChip palette family and inline Origi…
mmabrouk Aug 12, 2026
aeae0b6
fix(frontend): repair dark-broken colors the recolor never reached
mmabrouk Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,3 +166,4 @@ skills-lock.json

# @agenta/sessions test artifacts (vitest writes a junit report on every run).
web/packages/agenta-sessions/test-results/
junit.xml
2 changes: 1 addition & 1 deletion web/oss/src/components/DeploymentsDashboard/components/DeploymentCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const DeploymentCard = ({env, selectedEnv, ...props}: DeploymentCardProps) => {
<Card
className={deploymentCardClass}
style={{
borderColor: selectedEnv === env.name ? "#1C2C3D" : undefined,
borderColor: selectedEnv === env.name ? "var(--ag-colorText)" : undefined,
}}
{...props}
>
Expand Down
6 changes: 3 additions & 3 deletions web/oss/src/components/DrillInView/DrillInFieldHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const MappingPopover = memo(
<Button
type="text"
size="small"
className="justify-start text-blue-600 dark:text-[#58a6ff]"
className="justify-start text-[var(--ag-btn-link)]"
onClick={() => setShowNewColumnInput(true)}
>
+ Create new column
Expand Down Expand Up @@ -363,7 +363,7 @@ const DrillInFieldHeader = memo(
<Button
type="text"
size="small"
className={`!px-1 !h-6 text-xs ${isRawMode ? "text-blue-500 dark:text-[#58a6ff]" : "text-gray-500"}`}
className={`!px-1 !h-6 text-xs ${isRawMode ? "text-[var(--ag-btn-link)]" : "text-gray-500"}`}
icon={<Code size={12} />}
onClick={onToggleRawMode}
/>
Expand All @@ -374,7 +374,7 @@ const DrillInFieldHeader = memo(
<Button
type="text"
size="small"
className={`!px-1 !h-6 text-xs ${isMarkdownView ? "text-blue-500 dark:text-[#58a6ff]" : "text-gray-500"}`}
className={`!px-1 !h-6 text-xs ${isMarkdownView ? "text-[var(--ag-btn-link)]" : "text-gray-500"}`}
icon={
isMarkdownView ? (
<TextAa size={12} />
Expand Down
12 changes: 2 additions & 10 deletions web/oss/src/components/Drives/OriginTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ import {Tooltip} from "antd"

import {type FileOrigin} from "./useSessionDrive"

// Agent accent (recolor spec): deep info ink in light, the approved #8CCFFF in dark. `light-dark()`
// resolves off the root's color-scheme, which ThemeContextProvider keeps in sync with the theme.
export const AGENT_ACCENT = "light-dark(#113955, #8CCFFF)"
/** Tag well behind the accent — the dark pair is founder-approved verbatim. */
export const AGENT_ACCENT_BG = "light-dark(#E5F1F9, rgba(140,207,255,0.14))"
/** Same accent at 55% — the recent-file left rule. */
/** The agent accent at 55% — the recent-file left rule. */
export const AGENT_ACCENT_SOFT = "light-dark(rgba(17,57,85,0.55), rgba(140,207,255,0.55))"

// Shared so the Files filter tabs (All / Agent / Session) explain the same distinction the tags do.
Expand All @@ -25,10 +20,7 @@ export const ORIGIN_TIP: Record<FileOrigin, string> = {
export const OriginTag = ({origin}: {origin: FileOrigin}) => (
<Tooltip title={ORIGIN_TIP[origin]}>
{origin === "agent" ? (
<span
className="inline-flex shrink-0 cursor-default items-center rounded px-1 align-middle text-[12px] font-medium leading-[15px]"
style={{color: AGENT_ACCENT, background: AGENT_ACCENT_BG}}
>
<span className="inline-flex shrink-0 cursor-default items-center rounded bg-[var(--ag-type-agent-bg)] px-1 align-middle text-[12px] font-medium leading-[15px] text-[var(--ag-type-agent-text)]">
Agent
</span>
) : (
Expand Down
4 changes: 2 additions & 2 deletions web/oss/src/components/EntityIdentity/fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ export const CopyRow = ({value, label}: {value: string; label: string}) => {

/** Kind pill (Agent / Chat / …) — the same badge the rename modal header shows. */
export const TypeBadge = ({label}: {label: string}) => (
<span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-[#E5F1F9] px-2 py-0.5 text-xs font-medium text-[#113955] dark:bg-[rgba(140,207,255,0.14)] dark:text-[#8CCFFF]">
<span className="h-1.5 w-1.5 rounded-full bg-[#113955] dark:bg-[#8CCFFF]" />
<span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-[var(--ag-type-agent-bg)] px-2 py-0.5 text-xs font-medium text-[var(--ag-type-agent-text)]">
<span className="h-1.5 w-1.5 rounded-full bg-[var(--ag-type-agent-text)]" />
{label}
</span>
)
8 changes: 4 additions & 4 deletions web/oss/src/components/EvalRunDetails/components/EvaluatorMetricsChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const BarChart = ({
overflow: "hidden",
textOverflow: "ellipsis",
fontSize: "10px",
color: "#666",
color: "var(--ag-chart-axis-text)",
}}
>
{payload?.value}
Expand All @@ -129,8 +129,8 @@ const BarChart = ({
/>
<YAxis
domain={yDomain as any}
tickLine={{stroke: "#05172933"}}
tick={{fill: "#666"}}
tickLine={{stroke: "var(--ag-chart-axis-line)"}}
tick={{fill: "var(--ag-chart-axis-text)"}}
tickMargin={8}
width={yAxisWidth}
{...yAxisProps}
Expand All @@ -139,7 +139,7 @@ const BarChart = ({
strokeDasharray="3 2"
horizontal
vertical={false}
stroke="#05172933"
stroke="var(--ag-chart-grid)"
{...cartesianGridProps}
/>

Expand Down
10 changes: 5 additions & 5 deletions web/oss/src/components/EvalRunDetails/components/EvaluatorMetricsChart/HistogramChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,14 @@ const HistogramChart = ({
<XAxis
dataKey={xKey}
tickLine={false}
tick={{fill: "#666"}}
tick={{fill: "var(--ag-chart-axis-text)"}}
height={20}
{...xAxisProps}
/>
<YAxis
domain={yDomain as any}
tickLine={{stroke: "#05172933"}}
tick={{fill: "#666"}}
tickLine={{stroke: "var(--ag-chart-axis-line)"}}
tick={{fill: "var(--ag-chart-axis-text)"}}
tickMargin={8}
width={yAxisWidth}
{...yAxisProps}
Expand All @@ -112,7 +112,7 @@ const HistogramChart = ({
strokeDasharray="3 2"
horizontal
vertical={false}
stroke="#05172933"
stroke="var(--ag-chart-grid)"
{...cartesianGridProps}
/>

Expand Down Expand Up @@ -156,7 +156,7 @@ const HistogramChart = ({
<ReferenceLine
key={`${line.label ?? "line"}-${line.value}`}
x={line.value}
stroke={line.color ?? "#94A3B8"}
stroke={line.color ?? "var(--ag-chart-reference)"}
strokeDasharray="4 2"
label={line.label}
/>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/EvalRunDetails/components/EvaluatorMetricsChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ const EvaluatorMetricsChart = ({

const baseSeriesKey = "base"
const resolvedRunName = runDisplayName ?? runId
const resolvedBaseColor = baseColor ?? "#4096FF"
const resolvedBaseColor = baseColor ?? "var(--ag-chart-series-0)"

const booleanChartData = useMemo(() => {
if (!isBooleanMetric) return []
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/EvalRunDetails/components/FocusDrawerSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const FocusDrawerSidePanel = ({runId, scenarioId}: FocusDrawerSidePanelProps) =>
{
title: "Output",
id: "output",
icon: <Sparkle size={14} className="text-[#113955] dark:text-[#8CCFFF]" />,
icon: <Sparkle size={14} className="text-[var(--ag-type-agent-text)]" />,
anchorId:
groupAnchorMap.get("outputs") ??
groupAnchorMap.get("invocation") ??
Expand Down
10 changes: 5 additions & 5 deletions ...omponents/EvalRunDetails/components/views/ConfigurationView/components/RunSummaryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ import {V2Card} from "./SectionPrimitives"
const {Text} = Typography

const STATUS_DOT_COLORS: Record<string, string> = {
success: "#12B76A",
processing: "#3B82F6",
default: "#98A2B3",
error: "#F04438",
warning: "#F79009",
success: "var(--ag-run-status-success)",
processing: "var(--ag-run-status-processing)",
default: "var(--ag-run-status-default)",
error: "var(--ag-run-status-error)",
warning: "var(--ag-run-status-warning)",
}

const humanizeStatus = (value: string) =>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/EvalRunDetails/components/views/ConfigurationView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ const V2CompareColumn = memo(
const isBase = index === 0
const comparisonColor = getComparisonColor(index)
const swatchColor = isBase
? "#1c2c3d"
? "var(--ag-colorText)"
: comparisonColor !== "transparent"
? comparisonColor
: "#2f54eb"
Expand Down
10 changes: 5 additions & 5 deletions ...mponents/EvalRunDetails/components/views/OverviewView/components/MetadataSummaryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,11 +159,11 @@ const UpdatedCell = ({runId}: MetadataCellProps) => {
type StatusTone = "success" | "processing" | "default" | "error" | "warning"

const STATUS_COLORS: Record<StatusTone, string> = {
success: "#12B76A",
processing: "#3B82F6",
default: "#98A2B3",
error: "#F04438",
warning: "#F79009",
success: "var(--ag-run-status-success)",
processing: "var(--ag-run-status-processing)",
default: "var(--ag-run-status-default)",
error: "var(--ag-run-status-error)",
warning: "var(--ag-run-status-warning)",
}

const mapStatusTone = (raw: string): StatusTone => {
Expand Down
10 changes: 5 additions & 5 deletions web/oss/src/components/EvaluationRunsTablePOC/components/cells/StatusCells.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import type {EvaluationRunTableRow} from "../../types"
type AntBadgeStatus = "success" | "processing" | "default" | "error" | "warning"

const STATUS_COLORS: Record<AntBadgeStatus, string> = {
success: "#12B76A",
processing: "#3B82F6",
default: "#98A2B3",
error: "#F04438",
warning: "#F79009",
success: "var(--ag-run-status-success)",
processing: "var(--ag-run-status-processing)",
default: "var(--ag-run-status-default)",
error: "var(--ag-run-status-error)",
warning: "var(--ag-run-status-warning)",
}

const humanizeStatus = (value: string) =>
Expand Down
6 changes: 3 additions & 3 deletions web/oss/src/components/Evaluations/MetricDetailsPopover/assets/ResponsiveFrequencyChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ const ResponsiveFrequencyChart: FC<ResponsiveFrequencyChartProps> = memo(
margin.top +
yScaleVertical(val as number)
}
stroke="#faad14"
stroke="var(--ag-colorWarning)"
strokeWidth={2}
strokeDasharray="4 2"
/>
Expand Down Expand Up @@ -271,7 +271,7 @@ const ResponsiveFrequencyChart: FC<ResponsiveFrequencyChartProps> = memo(
xScaleHorizontal(val as number)
}
y2={margin.top + plotHeight}
stroke="#faad14"
stroke="var(--ag-colorWarning)"
strokeWidth={2}
strokeDasharray="4 2"
/>
Expand Down Expand Up @@ -421,7 +421,7 @@ const ResponsiveFrequencyChart: FC<ResponsiveFrequencyChartProps> = memo(
{/* Tooltip rendered outside SVG, absolutely positioned */}
{hoveredBar !== null && data[hoveredBar] && mousePos && (
<div
className="pointer-events-none z-50 absolute rounded-xl border border-[#d0d7e3]/80 dark:border-[var(--ag-rgba-051729-10)] bg-white/90 dark:bg-[var(--ant-color-bg-elevated)] px-3 py-2 text-xs text-gray-900 shadow-[0_6px_18px_rgba(15,23,42,0.12)] backdrop-blur-sm"
className="pointer-events-none z-50 absolute rounded-xl border border-colorBorderSecondary dark:border-[var(--ag-rgba-051729-10)] bg-white/90 dark:bg-[var(--ant-color-bg-elevated)] px-3 py-2 text-xs text-gray-900 shadow-[0_6px_18px_rgba(15,23,42,0.12)] backdrop-blur-sm"
style={{
left: clamp(
mousePos.x + 10,
Expand Down
10 changes: 5 additions & 5 deletions web/oss/src/components/Evaluations/MetricDetailsPopover/assets/ResponsiveMetricChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ const ResponsiveMetricChart: FC<ResponsiveMetricChartProps> = memo(
? yScaleVertical(tick)
: yScale(tick))
}
stroke="#05172933"
stroke="var(--ag-chart-grid)"
strokeWidth={1}
strokeDasharray="5 5"
/>
Expand Down Expand Up @@ -588,7 +588,7 @@ const ResponsiveMetricChart: FC<ResponsiveMetricChartProps> = memo(
margin.left + xScaleVertical(highlightValue)
}
y2={margin.top + plotHeight}
stroke="#52c41a"
stroke="var(--ag-colorSuccess)"
strokeWidth={3}
strokeDasharray="6 2"
style={{filter: "drop-shadow(0 0 2px #fff)"}}
Expand All @@ -610,7 +610,7 @@ const ResponsiveMetricChart: FC<ResponsiveMetricChartProps> = memo(
<text
x={margin.left + xScaleVertical(highlightValue)}
y={margin.top - 5}
fill="#52c41a"
fill="var(--ag-colorSuccess)"
fontSize="10"
fontWeight="bold"
textAnchor="middle"
Expand All @@ -632,7 +632,7 @@ const ResponsiveMetricChart: FC<ResponsiveMetricChartProps> = memo(
margin.top +
yScaleHorizontal(highlightValue)
}
stroke="#52c41a"
stroke="var(--ag-colorSuccess)"
strokeWidth={3}
strokeDasharray="6 2"
style={{filter: "drop-shadow(0 0 2px #fff)"}}
Expand Down Expand Up @@ -662,7 +662,7 @@ const ResponsiveMetricChart: FC<ResponsiveMetricChartProps> = memo(
yScaleHorizontal(highlightValue) -
5
}
fill="#52c41a"
fill="var(--ag-colorSuccess)"
fontSize="10"
fontWeight="bold"
textAnchor="end"
Expand Down
3 changes: 2 additions & 1 deletion web/oss/src/components/Layout/assets/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export const useStyles = createUseStyles(() => ({
top: 0,
left: 0,
height: 38,
backgroundColor: "#1c2c3d",
// Stays a dark bar in both themes so the white text below keeps its contrast.
backgroundColor: "var(--ag-colorBgSpotlight)",
display: "flex",
alignItems: "center",
justifyContent: "center",
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/Playground/Components/AgentCommitNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const AgentCommitNotice = ({revisionId}: {revisionId: string}) => {
<div className="border-0 border-t border-solid border-colorBorderSecondary bg-[var(--ag-colorBgElevated)] px-4 py-2.5">
<div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-start gap-2.5">
<span className="mt-px flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[#E5F1F9] text-[#113955] dark:bg-[rgba(140,207,255,0.14)] dark:text-[#8CCFFF]">
<span className="mt-px flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ag-type-agent-bg)] text-[var(--ag-type-agent-text)]">
<Robot size={15} weight="fill" />
</span>
<div className="flex min-w-0 flex-col gap-0.5">
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/Playground/Components/PlaygroundHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,7 +670,7 @@ const PlaygroundHeader: React.FC<PlaygroundHeaderProps> = ({className, ...divPro
{isAgentWorkflow ? (
<div className="flex min-w-0 items-center gap-2">
<Tooltip title="Agent">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[#E5F1F9] text-[#113955] dark:bg-[rgba(140,207,255,0.14)] dark:text-[#8CCFFF]">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ag-type-agent-bg)] text-[var(--ag-type-agent-text)]">
<Robot size={15} weight="fill" />
</span>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/PlaygroundRouter/PlaygroundLoadingShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const PlaygroundLoadingShell = ({agent, children}: PlaygroundLoadingShellProps =
>
{isAgent ? (
<div className="flex min-w-0 items-center gap-2">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[#E5F1F9] text-[#113955] dark:bg-[rgba(140,207,255,0.14)] dark:text-[#8CCFFF]">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ag-type-agent-bg)] text-[var(--ag-type-agent-text)]">
<Robot size={15} weight="fill" />
</span>
<Typography className="text-[16px] leading-[18px] font-[600]">
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/ResultComponent/ResultComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface ResultComponentProps {
const ResultComponent: React.FC<ResultComponentProps> = ({status, title, subtitle, spinner}) => {
return (
<Result
icon={status === "error" && <CloseCircleFilled className="text-[#ff4d4f]" />}
icon={status === "error" && <CloseCircleFilled className="text-colorError" />}
title={
<Title level={3} className="capitalize">
{title}
Expand Down
Loading
Loading