refactor: colour system cleanup — container recipe + palette semantics

[Healsi]

The main purpose of this PR is to make it easier for designers, engineers and agents to know which color to use where. It fixes inconsistencies with the colors and makes them them easier to maintain while being somewhat consistent with MUI.

The problem we're solving

I've found the existing color system confusing to use, and I've noticed that people have a hard time knowing which color to use where, and that a bunch of colors being used out of their intended usage.

This is not ideal because colors ends up being used for other purposes, and it makes the design system hard to use and maintain.

What's done?

Nothing changes visually in this PR. It cleans up the theme color system so that semantic palettes follows the MUI contract and share one consistent recipe for main, text, and surface/container backgrounds, then remaps every usage to match. No logic, data-flow, or behavioral changes. purely styling and variable remapping.

Theme changes

• Adds a container recipe (container / containerBorder / onContainer) to primary + info / success / warning / error / neutral for tinted surfaces (badges, chips, soft banners, alerts).
• Restores MUI-standard meaning to .light (now a mid-shade of main, was a pale tint) and .contrastText (now text-on-main, was text-on-tint).
• Removes redundant slots on semantic palettes: .border → containerBorder, background.application → background.default, action.alternative is removed, and palette.spotlight is removed.
• Repurposes background.default as the app canvas; background.paper is the surface.
• Makes secondary dormant (all usages migrated to primary). This slot will be repurposed for a secondary color later.

Usage remaps

• 179 component files remapped mechanically to the new tokens.
• Defensive fallbacks (container ?? light, onContainer ?? contrastText, containerBorder ?? border) keep the dormant secondary palette rendering correctly.

Important files

• frontend/src/themes/theme.ts, dark-theme.ts, themeTypes.ts — the source of the change.

Screenshots:

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[gergokekesi]

@Healsi Sorry I couldn't give it a more thorough look but here's a quick review I did with Claude. Please skim through, it may be rubbish:

Review complete. Checked remap classes for both themes and searched the post-PR tree for leftovers. The mechanical changes are mostly clean, but a visual issue exists in dark mode: text that was colored now appears white (~30 sites affected). This is because onContainer defaults to #EEEEFC, which overrides old color tokens used by alerts and badges.

Must fix / acknowledge:

1. Dark Mode Color Changes: Every remap from X.dark → X.onContainer turns colored text into white (~30 sites affected). Old dark theme colors (info/success/warning/error) are now lost or overwritten with the new container color. Affected files include: BillingPlan.tsx, ChangeRequestReviewStatus.tsx, InstanceStatusBar.tsx, and many others (e.g., FeatureStaleCell, ReactJSONEditor).
2. Demo Spotlight Colors: The demo colors changed from old hues to primary palette colors (primary.main/.light). Dark mode's new dark shade is much darker than the old outline color, which affects visual appearance in demos only.
3. GoalSummaryPanel.tsx: Gradient background replaced with flat fill for dark mode.

Verified clean (value-by-value):

• All remaps (light→container, border→containerBorder, etc.) are exact and present in both themes.
• No leftover references to removed slots or semantic colors outside the theme files.
• Standard Alerts use container overrides; no MUI buttons/chips picked up changed semantics.

Notes:

• Body Background: Changed from light/dark grey values via CssBaseline. Component-level remaps were applied, but loading/unstyled surfaces shifted slightly.
• MUI Internals: New semantic .light and contrastText feed default styles if not overridden (e.g., filled Chips). Nothing found yet; a visual sweep is the safety net for this 179-file change.
• PR Description Stale: It claims defensive fallbacks, but the head commit drops them entirely ("refactor: drop dead container-recipe fallbacks"). Update description.
• Badge Color Union: Still offers 'secondary'. With secondary now fjord teal, a stray renders teal. Drop this from the union since it is dormant outside themes.

[Healsi]

Thanks! 
 I have double checked a few of your findings.


1. This is how dark mode behaved before the refactor. I think it’s flagged because it breaks the MUI pattern and the general pattern of the color system, but it’s consistent with how it was used before the refactor. This needs to be addressed later when we adjust the dark mode colors.

2. This dont make sense to me. I checked the values before replacing them and they are almost identical. Visually I can’t spot any difference. Screenshots below.

4. This is no problem. We’re not using gradients except in legacy designs.