feat: Adjust style for old component Field and SelectBox

Author: JF-Cozy

react/SelectBox/SelectBox.jsx

@@ -7,7 +7,6 @@ import { isIOSApp } from 'cozy-device-helper'
 
 import Icon from '../Icon'
 import CheckIcon from '../Icons/Check'
-import { dodgerBlue, silver, coolGrey, paleGrey } from '../palette'
 import withBreakpoints from '../helpers/withBreakpoints'
 import TopIcon from '../Icons/Top'
 import BottomIcon from '../Icons/Bottom'
@@ -23,28 +22,40 @@ const heights = {
 
 const borderStyle = (props, state) => {
   if (props.inset) {
-    return '.125rem solid white'
+    return '.125rem solid var(--paperBackgroundColor)'
   }
-  return `.0625rem solid ${state.isFocused ? dodgerBlue : silver}`
+  return `.0625rem solid ${
+    state.isFocused ? 'var(--primaryColor)' : 'var(--borderMainColor)'
+  }`
 }
 
 const customStyles = props => ({
   control: (base, state) => ({
     ...base,
     // The gray background color is managed via the select--disabled
     // class applied below
-    backgroundColor: props.disabled ? 'transparent' : 'white',
+    backgroundColor: props.disabled
+      ? 'transparent'
+      : 'var(--paperBackgroundColor)',
     border: borderStyle(props, state),
     ':hover': {
-      borderColor: props.inset ? 'white' : coolGrey,
-      backgroundColor: props.inset ? paleGrey : 'white',
+      borderColor: props.inset
+        ? 'var(--paperBackgroundColor)'
+        : 'var(--hintTextColor)',
+      backgroundColor: props.inset
+        ? 'var(--defaultBackgroundColor)'
+        : 'var(--paperBackgroundColor)',
       cursor: 'pointer'
     },
     borderRadius: '.1875rem',
     boxShadow: 'unset',
     height: heights[props.size],
     minHeight: heights[props.size]
   }),
+  placeholder: base => ({
+    ...base,
+    color: 'var(--secondaryTextColor)'
+  }),
   dropdownIndicator: base => ({
     ...base,
     marginRight: '.75rem',
@@ -57,10 +68,19 @@ const customStyles = props => ({
   }),
   valueContainer: base => ({
     ...base,
-    color: 'black'
+    color: 'var(--primaryTextColor)'
+  }),
+  singleValue: base => ({
+    ...base,
+    color: 'var(--primaryTextColor)'
+  }),
+  multiValue: base => ({
+    ...base,
+    backgroundColor: 'var(--hintTextColor)'
   }),
   menu: base => ({
     ...base,
+    backgroundColor: 'var(--paperBackgroundColor)',
     zIndex: 10
   })
 })
@@ -103,7 +123,7 @@ const DropdownIndicator = props => {
     <components.DropdownIndicator {...props}>
       <Icon
         icon={props.selectProps.menuIsOpen ? TopIcon : BottomIcon}
-        color={coolGrey}
+        color="var(--iconTextColor)"
         width="20"
         height="16"
       />
@@ -158,7 +178,11 @@ const Option = ({
     {!withCheckbox && (
       <span className={styles['select-option__checkmark']}>
         {isSelected && (
-          <Icon icon={CheckIcon} color={dodgerBlue} className="u-ph-half" />
+          <Icon
+            icon={CheckIcon}
+            color="var(--primaryColor)"
+            className="u-ph-half"
+          />
         )}
       </span>
     )}
@@ -186,7 +210,9 @@ const ActionsOption = ({ actions, ...props }) => (
           {...action.iconProps}
           key={index}
           icon={action.icon}
-          color={props.isFocused ? coolGrey : silver}
+          color={
+            props.isFocused ? 'var(--iconTextColor)' : 'var(--hintTextColor)'
+          }
           className="u-ph-half"
           onClick={e => {
             e.stopPropagation()

react/SelectBox/styles.styl

@@ -24,26 +24,27 @@
     align-items center
     padding rem(8)
     border-left rem(4) solid transparent
-    color var(--charcoalGrey)
+    color var(--primaryTextColor)
+    background-color var(--paperBackgroundColor)
     transition all .2s ease-out
     white-space normal /* otherwise the tick can be wrongly placed in Firefox */
 
     &:hover:not(.select-option--disabled)
-        background-color var(--paleGrey)
+        background-color var(--actionColorSelected)
         cursor pointer
 
         .select-option__actions
           opacity 1
 
 .select-option--focused:not(.select-option--disabled)
-    background-color var(--paleGrey)
+    background-color var(--actionColorHover)
 
 .select-option--selected
-    background-color var(--paleGrey)
+    background-color var(--actionColorSelected)
     border-left-color var(--primaryColor)
 
 .select-option--disabled
-    color var(--silver)
+    color var(--disabledTextColor)
     cursor not-allowed
 
 .select-option__checkbox
@@ -94,4 +95,4 @@
 .FixedGroup
     @extend .Group
     flex-shrink 0
-    border-top silver 1px solid
+    border-top 1px solid var(--borderMainColor)