Problem
Several components use inline hardcoded hex colors (#FFFFFF, #F4F4F4, #1e1e1e, etc.) instead of the Tailwind design tokens already defined in core-web/src/index.css. This makes theming inconsistent and harder to maintain.
Examples
core-web/src/components/Dropdown/Dropdown.tsx — backgroundColor: '#FFFFFF'- Various components with inline
#F4F4F4, #1e1e1e, #E3E3E5 instead of bg-bg-light, text-text-dark, etc.
Design tokens available (defined in core-web/src/index.css)
--color-brand-primary: #000000
--color-bg-light: #F4F4F5
--color-bg-white: #FFFFFF
--color-text-dark: #09090B
--color-text-secondary: #71717A
--color-border-light: #E4E4E7
--color-gray-50 through --color-gray-900
What to do
- Search for hardcoded hex values in
core-web/src/components/
- Replace with the corresponding Tailwind class (e.g.
bg-[#FFFFFF] → bg-bg-white, color: '#1e1e1e' → text-text-dark)
- For inline
style={} objects, convert to Tailwind classes where possible
- Verify the UI looks the same after changes
Scope
One component per PR is fine — no need to do them all at once.
Problem
Several components use inline hardcoded hex colors (
#FFFFFF,#F4F4F4,#1e1e1e, etc.) instead of the Tailwind design tokens already defined incore-web/src/index.css. This makes theming inconsistent and harder to maintain.Examples
core-web/src/components/Dropdown/Dropdown.tsx—backgroundColor: '#FFFFFF'#F4F4F4,#1e1e1e,#E3E3E5instead ofbg-bg-light,text-text-dark, etc.Design tokens available (defined in
core-web/src/index.css)What to do
core-web/src/components/bg-[#FFFFFF]→bg-bg-white,color: '#1e1e1e'→text-text-dark)style={}objects, convert to Tailwind classes where possibleScope
One component per PR is fine — no need to do them all at once.