Problem
Many components across the theme hardcode Tailwind color classes (e.g. bg-red-200, text-green-700, text-gray-700, border-gray-200, …) for UI states, text, borders, backgrounds, and accents. These colors are baked into the source code, so merchants cannot adjust them from the Weaverse Studio without forking the theme.
A quick scan currently finds hardcoded color classes in ~60 files across app/components, app/sections, and app/routes.
Goal
Replace hardcoded Tailwind color classes with values driven by themeSettings, so the theme palette is fully configurable from the Weaverse Studio.
Notes
- Pilot already wires palette colors through
app/weaverse/settings/general.ts → app/weaverse/style.tsx → Tailwind CSS variables. The same pattern should cover the remaining hardcoded usages.
- New tokens (status colors, neutrals, etc.) can be added as needed when migrating, following the existing color-input convention.
Scope
Problem
Many components across the theme hardcode Tailwind color classes (e.g.
bg-red-200,text-green-700,text-gray-700,border-gray-200, …) for UI states, text, borders, backgrounds, and accents. These colors are baked into the source code, so merchants cannot adjust them from the Weaverse Studio without forking the theme.A quick scan currently finds hardcoded color classes in ~60 files across
app/components,app/sections, andapp/routes.Goal
Replace hardcoded Tailwind color classes with values driven by
themeSettings, so the theme palette is fully configurable from the Weaverse Studio.Notes
app/weaverse/settings/general.ts→app/weaverse/style.tsx→ Tailwind CSS variables. The same pattern should cover the remaining hardcoded usages.Scope
bg-*-{50..950},text-*-{50..950},border-*-{50..950}, …) inapp/components,app/sections,app/routes