refactor: Migrate react-select to semantic color tokens

[talissoncosta]

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Contributes to the design system migration — replaces SCSS variables with semantic CSS custom properties.

Problem

_react-select.scss used SCSS variables ($input-bg-dark, $bg-dark200, etc.) with a separate .dark {} block for dark mode. CustomOption used getDarkMode() + hardcoded hex values. CustomMultiValue used all inline styles. Dark mode didn't work in Storybook because the .dark class wasn't always propagated.

Solution

_react-select.scss:

• Replace all SCSS variables with semantic CSS custom properties (var(--color-surface-default), var(--color-surface-hover), var(--color-text-default), etc.)
• Delete the entire .dark {} block — tokens resolve differently per theme automatically
• Net: -69 lines, +26 lines

CustomOption:

• Replace inline styles with Bootstrap utilities (d-flex, align-items-center, gap-2, px-3, py-2)
• Replace getDarkMode() + hardcoded colours with bg-surface-hover token class
• Use ColorSwatch for colour dot
• Remove getDarkMode import

CustomMultiValue:

• Replace all inline styles with Bootstrap utilities (rounded-sm, text-white, text-nowrap, text-truncate)
• Use btn-close-white for remove button

Token mapping

Before	After
$input-bg / $input-bg-dark	var(--color-surface-default)
$input-border-color / $input-border-color-dark	var(--color-border-default)
$body-color	var(--color-text-default)
$text-icon-light-grey	var(--color-icon-secondary)
$bg-light200 / $bg-dark200	var(--color-surface-hover)
$primary-alfa-8	var(--color-surface-action-subtle)
box-shadow hardcoded	var(--shadow-md)

How did you test this code?

1. npm run storybook → Components/MultiSelect — all 7 variants render in light and dark mode
2. Dropdown menu, options, focus state, selected state all themed correctly
3. ENV=local npm run dev — Select dropdowns throughout the app look correct in both themes
4. Visual regression tests will catch any styling differences

Independent — can merge to main separately from the stack

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Error		Apr 10, 2026 5:52pm
flagsmith-frontend-staging	Error		Apr 10, 2026 5:52pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored		Apr 10, 2026 5:52pm