refactor: Migrate react-select to semantic color tokens

frontend/web/components/base/select/multi-select/CustomMultiValue.tsx

@@ -8,45 +8,23 @@ export const CustomMultiValue = ({
 }: MultiValueProps<MultiSelectOption> & { color?: string }) => {
   return (
     <div
-      className='d-flex align-items-center gap-x-1'
+      className='d-flex align-items-center gap-1 rounded-sm text-white overflow-hidden fs-small'
       style={{
         backgroundColor: color,
-        borderRadius: '4px',
-        color: 'white',
-        fontSize: '12px',
-        gap: '4px',
-        maxHeight: '24px',
-        maxWidth: '150px',
-        overflow: 'hidden',
+        maxHeight: 24,
+        maxWidth: 150,
         padding: '2px 6px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
       }}
     >
-      <span
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
+      <span className='text-nowrap overflow-hidden text-truncate'>
         {data.label}
       </span>
       <button
         {...removeProps}
-        style={{
-          backgroundColor: 'transparent',
-          border: 'none',
-          color: 'white',
-          cursor: 'pointer',
-          fontSize: '14px',
-          lineHeight: '1',
-          margin: 0,
-          padding: 0,
-        }}
-      >
-        ×
-      </button>
+        className='btn-close btn-close-white p-0 border-0'
+        style={{ fontSize: 10 }}
+        aria-label={`Remove ${data.label}`}
+      />
     </div>
   )
 }

frontend/web/components/base/select/multi-select/CustomOption.tsx

@@ -1,21 +1,9 @@
 import { OptionProps } from 'react-select'
 import { MultiSelectOption } from './MultiSelect'
 import Icon from 'components/icons/Icon'
+import ColorSwatch from 'components/ColorSwatch'
 import { useEffect, useRef } from 'react'
-import { getDarkMode } from 'project/darkMode'
-
-const getOptionColors = (isFocused: boolean) => {
-  const isDarkMode = getDarkMode()
-
-  const focusedBgColor = isDarkMode ? '#202839' : '#f0f0f0'
-  const backgroundColor = isFocused ? focusedBgColor : 'transparent'
-  const textColor = isDarkMode ? 'white' : 'inherit'
-
-  return {
-    backgroundColor,
-    textColor,
-  }
-}
+import classNames from 'classnames'
 
 export const CustomOption = ({
   children,
@@ -33,56 +21,29 @@ export const CustomOption = ({
     }
   }, [props.isFocused])
 
-  const { backgroundColor, textColor } = getOptionColors(props.isFocused)
-
   return (
     <div
       ref={ref}
       {...props.innerProps}
       role='option'
       aria-selected={props.isSelected}
       aria-disabled={props.isDisabled}
-      style={{
-        alignItems: 'center',
-        backgroundColor,
-        color: textColor,
-        cursor: props.isDisabled ? 'not-allowed' : 'pointer',
-        display: 'flex',
-        gap: '8px',
-        justifyContent: 'space-between',
-        padding: '8px 12px',
-      }}
+      className={classNames(
+        'd-flex align-items-center justify-content-between gap-2 px-3 py-2 cursor-pointer',
+        {
+          'bg-surface-hover': props.isFocused,
+          'cursor-not-allowed': props.isDisabled,
+        },
+      )}
     >
-      <div
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          flex: 1,
-          gap: '8px',
-          minWidth: 0,
-          wordWrap: 'break-word',
-        }}
-      >
-        {color && (
-          <div
-            aria-hidden='true'
-            style={{
-              backgroundColor: color,
-              borderRadius: '2px',
-              flexShrink: 0,
-              height: '12px',
-              width: '12px',
-            }}
-          />
-        )}
-        <span style={{ flex: 1, minWidth: 0, wordWrap: 'break-word' }}>
-          {children}
-        </span>
+      <div className='d-flex align-items-center flex-fill gap-2 overflow-hidden'>
+        {color && <ColorSwatch color={color} />}
+        <span className='flex-fill overflow-hidden text-break'>{children}</span>
       </div>
       {props.isSelected && (
-        <div aria-hidden='true'>
-          <Icon width={14} name='checkmark-circle' fill='#6837fc' />
-        </div>
+        <span className='icon-action' aria-hidden='true'>
+          <Icon width={14} name='checkmark-circle' />
+        </span>
       )}
     </div>
   )

frontend/web/styles/3rdParty/_react-select.scss

@@ -1,18 +1,22 @@
-@import '../variables';
+// =============================================================================
+// react-select Overrides
+// Uses semantic CSS custom properties for automatic light/dark mode support.
+// No separate .dark {} block needed — tokens resolve differently per theme.
+// =============================================================================
 
 .react-select .react-select {
   input[type='text'] {
     border: none;
+    color: var(--color-text-default) !important;
   }
 
-
   &__menu-list {
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
     &::-webkit-scrollbar {
-      display: none; 
+      display: none;
     }
   }
 
@@ -22,11 +26,11 @@
       opacity: 0.5;
     }
     &__indicator {
-      color: $text-icon-light-grey;
+      color: var(--color-icon-secondary);
       padding: 0px 6px 0px 8px;
       cursor: pointer;
       &:hover {
-        color: $text-icon-light-grey;
+        color: var(--color-icon-secondary);
       }
       svg {
         width: 16px;
@@ -48,13 +52,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: normal;
-    color: $input-placeholder-color;
+    color: var(--color-text-tertiary);
   }
   &__indicator {
-    color: $text-icon-light-grey;
+    color: var(--color-icon-secondary);
     padding: 0px 10px 0px 8px;
     &:hover {
-      color: $text-icon-light-grey;
+      color: var(--color-icon-secondary);
     }
     svg {
       width: 22px;
@@ -73,12 +77,13 @@
     padding: 0;
     line-height: $input-line-height;
     font-weight: 500;
+    color: var(--color-text-default);
     & + div {
       margin: 0;
       padding: 0;
     }
     &--is-disabled {
-      color: $text-icon-light-grey;
+      color: var(--color-text-disabled);
     }
   }
 
@@ -96,12 +101,12 @@
     }
   }
   &__control {
-    background: $input-bg;
+    background: var(--color-surface-default);
     height: $input-height;
     border-radius: $border-radius;
-    border: 1px solid $input-border-color;
+    border: 1px solid var(--color-border-default);
     &--is-disabled {
-      border: 1px solid $basic-alpha-8;
+      border: 1px solid var(--color-border-disabled);
       .react-select__indicators {
         opacity: $btn-disabled-opacity;
       }
@@ -198,78 +203,30 @@
 .react-select {
   font-weight: 500;
   line-height: $input-line-height;
-  color: $body-color;
+  color: var(--color-text-default);
   &.select-xsm {
     font-size: $font-size-sm;
   }
   &__option {
-    color: $body-color !important;
-    background: white !important;
+    color: var(--color-text-default) !important;
+    background: var(--color-surface-default) !important;
     padding: 9px 16px;
     cursor: pointer;
     &:hover {
-      background: $bg-light200 !important;
-      cursor:pointer;
+      background: var(--color-surface-hover) !important;
+      cursor: pointer;
     }
     &--is-focused {
-      background: $bg-light300 !important;
+      background: var(--color-surface-muted) !important;
     }
     &--is-selected {
-      background-color: $primary-alfa-8 !important;
+      background-color: var(--color-surface-action-subtle) !important;
     }
   }
   &__menu {
     font-weight: 500;
     margin: 3px;
-    box-shadow: 0px 10px 12px 0px rgba(100, 116, 139, 0.15) !important;
-    background: white !important;
-  }
-}
-.dark {
-  .react-select .react-select,.react-select {
-    input[type='text'] {
-      color: white !important;
-      border: none !important;
-    }
-    &__control {
-      background: $input-bg-dark;
-      border: none;
-      box-shadow: none;
-      border: 1px solid $input-border-color-dark;
-      &--is-disabled {
-        border: 1px solid $black-alpha-32;
-        .react-select__indicator {
-          opacity: $btn-disabled-opacity;
-        }
-      }
-    }
-    &__single-value {
-      color: $text-icon-light;
-      &--is-disabled {
-        color: $text-icon-light-grey;
-      }
-    }
-    &__menu {
-      background: $input-bg-dark !important;
-      margin: 3px;
-      color: $input-bg-dark;
-      box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.12) !important;
-    }
-    &__option {
-      color: white !important;
-      background: $input-bg-dark !important;
-      &:hover {
-        background: $bg-dark200 !important;
-        color: white !important;
-        cursor:pointer;
-      }
-      &--is-focused {
-        background: $bg-dark200 !important;
-        cursor:pointer;
-      }
-      &--is-selected {
-        background-color: $primary-alfa-16 !important;
-      }
-    }
+    box-shadow: var(--shadow-md) !important;
+    background: var(--color-surface-default) !important;
   }
 }