[Bug]: Many color classes render nothing because they are not in the Tailwind palette

[evanklem]

Summary

apps/app replaces Tailwind's default theme.colors entirely with the Radix palette from src/styles/tailwind-colors.ts: 31 families, steps 1 to 12.

Any class that uses a color outside that set compiles to no rule, so the element renders with no style: transparent background, no border, or text falling back to the inherited color.

A repo-wide sweep found 38 such classes across 13 files, from two causes:

1. Families that do not exist in this palette: emerald, zinc, neutral.

   • Radix has no emerald; its greens are green, jade, grass, and mint.
   • emerald is used as the app's success green in about 8 files, and none of it renders.

2. Default Tailwind scales on otherwise valid families.

   • Radix only goes from 1 to 12.
   • Classes like amber-300, red-300, gray-100, sky-300, etc. compile to nothing.

The tailwindSafelist only covers:

(bg|text|border)-(family)-(1 to 12)

So it catches neither case.

Found while reviewing #2329, the fix for #2328, which was bg-zinc-950 in the theme previews. Same bug; this is the full list.

To Reproduce

Clearest single instance, a bg-* miss that goes fully transparent:

1. Open the desktop app.
2. Open a local workspace.
3. In the sidebar, open the workspace ... menu.
4. Select Share.
5. Select Access workspace remotely.
6. Look at the Remote access toggle when it is off by default.

The toggle track used bg-zinc-300 and renders invisible, so only the white knob is visible.

Other visible spots:

• Warning and error banners in shell/architecture-mismatch-gate.tsx and components/chat/message-list.tsx use amber-* and red-* on the default 50-950 scale, so no background or border renders.
• Success and connected states using emerald-* lose their green styling, including toasts in components/ui/sonner.tsx, messaging-view.tsx, and command-palette.tsx.

Reproduce the full list with grep:

# Families that do not exist in the palette
grep -rnE "(bg|text|border|ring|from|via|to|fill|stroke)-(zinc|neutral|stone|emerald|rose|fuchsia)-[0-9]" apps/app/src

# Valid families using the invalid default 50-950 Tailwind scale
# Radix is 1 to 12
grep -rnE "(bg|text|border|ring|from|via|to)-(amber|red|sky|gray|blue|green|orange|yellow)-(50|[1-9]00|950)" apps/app/src

Expected behavior

Every color class used in the app maps to a token that exists in the palette and resolves to a real color in both light and dark themes.

Actual behavior

38 classes resolve to nothing.

By type:

• bg-* and border-* leave the element with no background or border.
  • The invisible toggle track is the clearest case.
• text-* falls back to the inherited color.
  • For example, success text is not green. Wrong color, not invisible.
• from-* and via-* leave an empty gradient stop.

Checked against the real shipped CSS: built apps/app/src/app/index.css with the actual config and a full source scan. None of the 38 classes produced a rule, while valid tokens like bg-gray-8 did.

Screenshots (optional)

Example screenshots of toggle mentioned in Reproduce section:

OW version & Desktop info (optional)

No response

Additional context (optional)

38 classes across 13 files:

File (apps/app/src/)	Broken classes
react-app/shell/architecture-mismatch-gate.tsx	bg-amber-300, bg-emerald-1/100/3/300, border-amber-300, border-emerald-300, from-emerald-300, text-amber-100, text-emerald-10/100/50, via-sky-300
components/chat/message-list.tsx	bg-amber-50/100/300, bg-red-300, border-amber-300/400/500, border-red-300, text-amber-700/800/900/950
react-app/domains/settings/pages/messaging-view.tsx	bg-emerald-1, bg-emerald-9, border-emerald-7, text-emerald-11
react-app/domains/workspace/modal-styles.ts	bg-emerald-2/3, border-emerald-7, text-emerald-11
react-app/domains/connections/provider-auth/provider-auth-modal.tsx	bg-emerald-3, border-emerald-5, text-emerald-11
components/ui/sonner.tsx	bg-emerald-4, border-emerald-6, text-emerald-11
react-app/shell/command-palette.tsx	bg-emerald-500, border-emerald-5/500, text-emerald-700
components/ui/image.tsx	bg-gray-100, bg-neutral-800
react-app/domains/settings/appearance/theme-section.tsx	bg-zinc-950, the #2328 target fixed by #2329
react-app/domains/workspace/share-workspace-access-panel.tsx	text-emerald-600, plus the toggle's bg-zinc-300
react-app/domains/workspace/create-workspace-local-panel.tsx	text-emerald-10
react-app/domains/session/sidebar/app-sidebar.tsx	text-amber-600
react-app/shell/notification-center.tsx	text-emerald-11

Why they emit nothing:

tailwind.config.ts overrides theme.colors completely. The in-file comment says:

OVERRIDE the base theme completely instead of extending it

The palette is the Radix set:

bronze, gold, brown, orange, tomato, red, ruby, crimson, pink, plum, purple,
violet, iris, indigo, blue, cyan, teal, jade, green, grass, sky, mint, lime,
yellow, amber, gray, mauve, slate, sage, olive, sand

Each family has steps 1 to 12, plus alpha aN, plus white, black, and the dls-* tokens.

Anything else generates no rule.

The safelist is:

(bg|text|border)-(family)-(1 to 12)

That covers neither:

• Missing families like emerald, zinc, or neutral.
• Out-of-range default Tailwind scale steps like 50, 100, 300, 500, 700, or 950.

How it was verified:

cd apps/app

npx @tailwindcss/cli@4.1.18 \
  -i src/app/index.css \
  -o /tmp/out.css \
  --content "./src/**/*.{ts,tsx},./index.html"

Then checked that each class above has no rule in /tmp/out.css, while valid tokens like bg-gray-8 do.

[hiSandog]

This is a good candidate for an automated guard rather than one-off class fixes. A small script or unit test could scan literal className strings for bg|text|border-* colors, compare the family/step against tailwind-colors.ts plus the safelist, and fail when a class cannot generate CSS. For the existing emerald-* usage, it would also help to choose one Radix success color alias (green, jade, or grass) and document it so new success states do not drift back to Tailwind defaults.