From 0b4a9077ed6548893f35e9359a824ddf604f6222 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Wed, 15 May 2024 18:05:54 +0200
Subject: [PATCH] feat: Adjust style for old component Field and SelectBox

---
 react/SelectBox/SelectBox.jsx              |  46 +++++--
 react/SelectBox/styles.styl                |  13 +-
 react/__snapshots__/examples.spec.jsx.snap | 132 ++++++++++-----------
 stylus/components/forms.styl               | 112 ++++++++---------
 4 files changed, 165 insertions(+), 138 deletions(-)

diff --git a/react/SelectBox/SelectBox.jsx b/react/SelectBox/SelectBox.jsx
index c628600284..ed64130791 100644
--- a/react/SelectBox/SelectBox.jsx
+++ b/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,9 +22,11 @@ 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 => ({
@@ -33,11 +34,17 @@ const customStyles = props => ({
     ...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',
@@ -45,6 +52,10 @@ const customStyles = props => ({
     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()
diff --git a/react/SelectBox/styles.styl b/react/SelectBox/styles.styl
index 7645fbd330..31296a6e68 100644
--- a/react/SelectBox/styles.styl
+++ b/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)
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 7944b99ef5..fc8b3e6ad9 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -2759,9 +2759,9 @@ exports[`InputGroup should render examples: InputGroup 4`] = `
         <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"URL\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <div class=\\"styles__select--autowidth___16AEp u-w-4 css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-            <div class=\\" css-1x8e986-control\\">
-              <div class=\\" css-11jzfys-ValueContainer\\">
-                <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+            <div class=\\" css-102s2p7-control\\">
+              <div class=\\" css-blko0k-ValueContainer\\">
+                <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
                 <div class=\\"css-b8ldur-Input\\">
                   <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-2-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
                     <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -2769,7 +2769,7 @@ exports[`InputGroup should render examples: InputGroup 4`] = `
                 </div>
               </div>
               <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-                <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
                     <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
                   </svg></div>
               </div>
@@ -3045,9 +3045,9 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
 "<div data-testid=\\"mountNode\\">
   <div style=\\"background: whitesmoke; padding: .5em;\\">
     <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-fg5tdu-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+      <div class=\\" css-8ushqo-control\\">
+        <div class=\\" css-blko0k-ValueContainer\\">
+          <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
           <div class=\\"css-b8ldur-Input\\">
             <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-3-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
               <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3055,7 +3055,7 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
           </div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -3068,9 +3068,9 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
 exports[`SelectBox should render examples: SelectBox 2`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-4-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3078,12 +3078,12 @@ exports[`SelectBox should render examples: SelectBox 2`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\" css-govwq4-menu\\">
+    <div class=\\" css-t5wif0-menu\\">
       <div class=\\" css-4ljt47-MenuList\\">
         <div id=\\"react-select-4-option-0\\" tabindex=\\"-1\\" class=\\"styles__select-option___ov_IT\\"><span class=\\"styles__select-option__label___1Xi5R\\"><span class=\\"u-ellipsis\\">Chocolate</span></span><span class=\\"styles__select-option__checkmark___ChXXs\\"></span></div>
       </div>
@@ -3096,9 +3096,9 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
 "<div data-testid=\\"mountNode\\">
   <div style=\\"height: 12rem; padding: .5rem; overflow: auto;\\">Container height: 12rem. <button>Change container height</button>
     <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-fg5tdu-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+      <div class=\\" css-8ushqo-control\\">
+        <div class=\\" css-blko0k-ValueContainer\\">
+          <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
           <div class=\\"css-b8ldur-Input\\">
             <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-5-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
               <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3106,7 +3106,7 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
           </div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -3119,9 +3119,9 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
 exports[`SelectBox should render examples: SelectBox 4`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-14jk2my-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-ofrup8-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-1r0x2f0-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-1bwsx9e-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-6-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3129,7 +3129,7 @@ exports[`SelectBox should render examples: SelectBox 4`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -3141,9 +3141,9 @@ exports[`SelectBox should render examples: SelectBox 4`] = `
 exports[`SelectBox should render examples: SelectBox 5`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--fullwidth___2l_xM css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-7-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3151,7 +3151,7 @@ exports[`SelectBox should render examples: SelectBox 5`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -3164,9 +3164,9 @@ exports[`SelectBox should render examples: SelectBox 6`] = `
 "<div data-testid=\\"mountNode\\">
   <div>
     <div class=\\"styles__select--autowidth___16AEp styles__select--disabled___1W3en css-14jk2my-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-      <div class=\\" css-ofrup8-control\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+      <div class=\\" css-1r0x2f0-control\\">
+        <div class=\\" css-blko0k-ValueContainer\\">
+          <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
           <div class=\\"css-1bwsx9e-Input\\">
             <div class=\\"\\" style=\\"display: inline-block;\\"><input disabled=\\"\\" autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-8-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
               <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3174,7 +3174,7 @@ exports[`SelectBox should render examples: SelectBox 6`] = `
           </div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -3189,9 +3189,9 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
   <div>
     <div class=\\"u-mb-1\\">
       <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-1ac6j6n-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a tiny SelectBox</div>
+        <div class=\\" css-y839ce-control\\">
+          <div class=\\" css-blko0k-ValueContainer\\">
+            <div class=\\" css-12iw3je-singleValue\\">I am a tiny SelectBox</div>
             <div class=\\"css-b8ldur-Input\\">
               <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-9-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
                 <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3199,7 +3199,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -3208,9 +3208,9 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
     </div>
     <div class=\\"u-mb-1\\">
       <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-7stifj-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a medium SelectBox</div>
+        <div class=\\" css-r96bzv-control\\">
+          <div class=\\" css-blko0k-ValueContainer\\">
+            <div class=\\" css-12iw3je-singleValue\\">I am a medium SelectBox</div>
             <div class=\\"css-b8ldur-Input\\">
               <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-10-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
                 <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3218,7 +3218,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -3227,9 +3227,9 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
     </div>
     <div class=\\"u-mb-1\\">
       <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-        <div class=\\" css-fg5tdu-control\\">
-          <div class=\\" css-11jzfys-ValueContainer\\">
-            <div class=\\" css-1uccc91-singleValue\\">I am a large SelectBox</div>
+        <div class=\\" css-8ushqo-control\\">
+          <div class=\\" css-blko0k-ValueContainer\\">
+            <div class=\\" css-12iw3je-singleValue\\">I am a large SelectBox</div>
             <div class=\\"css-b8ldur-Input\\">
               <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-11-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
                 <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3237,7 +3237,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
                 <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
               </svg></div>
           </div>
@@ -3253,8 +3253,8 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
     <div><button>toggle options</button>
       <div class=\\"styles__select-control__input___1xDlj\\">
-        <div class=\\" css-11jzfys-ValueContainer\\">
-          <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+        <div class=\\" css-blko0k-ValueContainer\\">
+          <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
           <div class=\\"css-b8ldur-Input\\">
             <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-12-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
               <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3262,7 +3262,7 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
           </div>
         </div>
         <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+          <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
         </div>
@@ -3275,9 +3275,9 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
 exports[`SelectBox should render examples: SelectBox 9`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-13-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3285,7 +3285,7 @@ exports[`SelectBox should render examples: SelectBox 9`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -3297,9 +3297,9 @@ exports[`SelectBox should render examples: SelectBox 9`] = `
 exports[`SelectBox should render examples: SelectBox 10`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-14-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3307,7 +3307,7 @@ exports[`SelectBox should render examples: SelectBox 10`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -3319,9 +3319,9 @@ exports[`SelectBox should render examples: SelectBox 10`] = `
 exports[`SelectBox should render examples: SelectBox 11`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\" css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\" css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-15-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3329,12 +3329,12 @@ exports[`SelectBox should render examples: SelectBox 11`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\" css-govwq4-menu\\">
+    <div class=\\" css-t5wif0-menu\\">
       <div class=\\"styles__MenuList___1H_pH css-4ljt47-MenuList\\">
         <div class=\\"styles__Group___J6s7k css-syji7d-Group\\">
           <div>
@@ -3379,9 +3379,9 @@ exports[`SelectBox should render examples: SelectBox 11`] = `
 exports[`SelectBox should render examples: SelectBox 12`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\" css-fg5tdu-control\\">
-      <div class=\\"needsclick css-11jzfys-ValueContainer\\">
-        <div class=\\" css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\" css-8ushqo-control\\">
+      <div class=\\"needsclick css-blko0k-ValueContainer\\">
+        <div class=\\" css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-16-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3389,7 +3389,7 @@ exports[`SelectBox should render examples: SelectBox 12`] = `
         </div>
       </div>
       <div class=\\" css-1hb7zxy-IndicatorsContainer\\"><span class=\\" css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\" css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
@@ -3401,9 +3401,9 @@ exports[`SelectBox should render examples: SelectBox 12`] = `
 exports[`SelectBox should render examples: SelectBox 13`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__select--autowidth___16AEp css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
-    <div class=\\"needsclick cz__control needsclick cz__control--menu-is-open css-fg5tdu-control\\">
-      <div class=\\"needsclick cz__value-container css-11jzfys-ValueContainer\\">
-        <div class=\\"needsclick cz__placeholder css-1wa3eu0-placeholder\\">Select...</div>
+    <div class=\\"needsclick cz__control needsclick cz__control--menu-is-open css-8ushqo-control\\">
+      <div class=\\"needsclick cz__value-container css-blko0k-ValueContainer\\">
+        <div class=\\"needsclick cz__placeholder css-1u3ujn0-placeholder\\">Select...</div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"needsclick cz__input\\" style=\\"display: inline-block;\\"><input autocapitalize=\\"none\\" autocomplete=\\"off\\" autocorrect=\\"off\\" id=\\"react-select-17-input\\" spellcheck=\\"false\\" tabindex=\\"0\\" type=\\"text\\" aria-autocomplete=\\"list\\" style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\" value=\\"\\">
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\"></div>
@@ -3411,12 +3411,12 @@ exports[`SelectBox should render examples: SelectBox 13`] = `
         </div>
       </div>
       <div class=\\"needsclick cz__indicators css-1hb7zxy-IndicatorsContainer\\"><span class=\\"needsclick cz__indicator-separator css-1xjgjl1-IndicatorSeparator\\"></span>
-        <div class=\\"needsclick cz__indicator needsclick cz__dropdown-indicator css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+        <div class=\\"needsclick cz__indicator needsclick cz__dropdown-indicator css-c1md1-indicatorContainer\\" aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--iconTextColor);\\" width=\\"20\\" height=\\"16\\">
             <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
-    <div class=\\"needsclick cz__menu css-govwq4-menu\\">
+    <div class=\\"needsclick cz__menu css-t5wif0-menu\\">
       <div class=\\"needsclick cz__menu-list css-4ljt47-MenuList\\">
         <div id=\\"react-select-17-option-0\\" tabindex=\\"-1\\" class=\\"styles__select-option___ov_IT\\"><span class=\\"styles__select-option__label___1Xi5R\\"><span class=\\"u-ellipsis\\">Chocolate</span></span><span class=\\"styles__select-option__checkmark___ChXXs\\"></span></div>
       </div>
diff --git a/stylus/components/forms.styl b/stylus/components/forms.styl
index b83ecfaacf..9d14ad5ab1 100644
--- a/stylus/components/forms.styl
+++ b/stylus/components/forms.styl
@@ -16,7 +16,7 @@ $form
 
         a,
         a:visited
-            color            var(--dodgerBlue)
+            color            var(--primaryColor)
             text-decoration  none
 
         a:hover,
@@ -37,17 +37,17 @@ $form
     .coz-form-label // Deprecated
         display         block
         text-transform  uppercase
-        color           var(--coolGrey)
+        color           var(--secondaryTextColor)
         font-size       rem(12)
         padding         rem(9) 0
         margin-top      rem(16)
 
     .coz-form-label--error // Deprecated
         display  none
-        color    var(--pomegranate)
+        color    var(--errorColor)
 
     .coz-form-errors
-        color  var(--pomegranate)
+        color  var(--errorColor)
 
 $form-button
     .coz-form-controls
@@ -91,23 +91,23 @@ $form-text
         padding        rem(14) rem(12) rem(12) rem(14)
         box-sizing     border-box
         border-radius  rem(2)
-        background     var(--white)
-        border         rem(1) solid var(--dividerColor)
-        color          var(--black)
+        background     var(--paperBackgroundColor)
+        border         rem(1) solid var(--borderMainColor)
+        color          var(--primaryTextColor)
 
         &::placeholder
-            color      var(--coolGrey)
+            color      var(--secondaryTextColor)
             font-size  rem(16)
 
         &:focus
-            border      rem(1) solid var(--dodgerBlue)
+            border      rem(1) solid var(--primaryColor)
             outline     0
 
         &:hover
-            border  rem(1) solid var(--coolGrey)
+            border  rem(1) solid var(--hintTextColor)
 
         &.error
-            border      rem(1) solid var(--pomegranate)
+            border      rem(1) solid var(--errorColor)
 
 
 $form-textarea
@@ -116,23 +116,23 @@ $form-textarea
         padding        rem(14 12 12 14)
         box-sizing     border-box
         border-radius  rem(2)
-        background     var(--white)
-        border         rem(1) solid var(--dividerColor)
-        color          var(--black)
+        background     var(--paperBackgroundColor)
+        border         rem(1) solid var(--borderMainColor)
+        color          var(--primaryTextColor)
 
         &::placeholder
-            color      var(--coolGrey)
+            color      var(--secondaryTextColor)
             font-size  rem(16)
 
         &:focus
-            border      rem(1) solid var(--dodgerBlue)
+            border      rem(1) solid var(--primaryColor)
             outline     0
 
         &:hover
-            border  rem(1) solid var(--coolGrey)
+            border  rem(1) solid var(--hintTextColor)
 
         &.error
-            border      rem(1) solid var(--pomegranate)
+            border      rem(1) solid var(--errorColor)
 
 
 $form-select
@@ -141,9 +141,9 @@ $form-select
         padding              rem(12 12 14)
         border-radius        rem(4)
         box-sizing           border-box
-        background           var(--white)
-        border               rem(1) solid var(--dividerColor)
-        color                var(--black)
+        background           var(--paperBackgroundColor)
+        border               rem(1) solid var(--borderMainColor)
+        color                var(--primaryTextColor)
         appearance           none
         background-image     embedurl('../../assets/icons/ui/dropdown.svg')
         background-position  right rem(8) center
@@ -153,17 +153,17 @@ $form-select
             display  none
 
         &::placeholder
-            color      var(--slateGrey)
+            color      var(--secondaryTextColor)
             font-size  rem(17)
 
         &:focus
-            border      rem(1) solid var(--dodgerBlue)
+            border      rem(1) solid var(--primaryColor)
 
         &:hover
-            border  rem(1) solid var(--coolGrey)
+            border  rem(1) solid var(--hintTextColor)
 
         &.error
-            border      rem(1) solid var(--pomegranate)
+            border      rem(1) solid var(--errorColor)
             background  none
 
 
@@ -206,23 +206,23 @@ $form-progress
         margin         rem(8) 0
         width          100%
         height         rem(8)
-        color          var(--dodgerBlue)
-        background     var(--paleGrey)
+        color          var(--primaryColor)
+        background     var(--defaultBackgroundColor)
         border         0
         border-radius  rem(18)
 
         // chrome and safari
         &::-webkit-progress-bar
-            background     var(--paleGrey)
+            background     var(--defaultBackgroundColor)
             border-radius  rem(18)
 
         &::-webkit-progress-value
-            background     var(--charcoalGrey)
+            background     var(--dividerColor)
             border-radius  rem(18)
 
         // firefox
         &::-moz-progress-bar
-            background     var(--charcoalGrey)
+            background     var(--dividerColor)
             border-radius  rem(18)
 
 // New styles
@@ -234,7 +234,7 @@ $label
     line-height rem(16)
 
     &.is-error
-        color var(--pomegranate)
+        color var(--errorColor)
 
 $label--block
     display block
@@ -242,12 +242,12 @@ $label--block
 
 $input--disabled
     cursor not-allowed
-    background-color var(--paleGrey)
-    color var(--charcoalGrey)
+    background-color var(--actionColorDisabledBackground)
+    color var(--actionColorDisabled)
 
     &:hover
     &:focus
-        border rem(1) solid var(--dividerColor)
+        border rem(1) solid var(--borderMainColor)
 
 $input-text
     display inline-block
@@ -256,27 +256,27 @@ $input-text
     padding rem(13 16)
     box-sizing border-box
     border-radius rem(3)
-    background var(--white)
-    border rem(1) solid var(--dividerColor)
+    background var(--paperBackgroundColor)
+    border rem(1) solid var(--borderMainColor)
     font-size rem(16)
     line-height 1.25
-    color var(--charcoalGrey)
+    color var(--primaryTextColor)
     outline 0
 
     &::placeholder
-        color var(--coolGrey)
+        color var(--secondaryTextColor)
         font-size rem(16)
 
     &:hover
-        border rem(1) solid var(--coolGrey)
+        border rem(1) solid var(--hintTextColor)
 
     &:focus
-        border rem(1) solid var(--dodgerBlue)
+        border rem(1) solid var(--primaryColor)
         outline 0
 
     &.is-error
     &:not(:focus):invalid
-        border rem(1) solid var(--pomegranate)
+        border rem(1) solid var(--errorColor)
 
     &[aria-disabled=true]
     &[disabled]
@@ -333,12 +333,12 @@ $checkbox
 
         &::before
             transition box-shadow 350ms cubic-bezier(0, .89, .44, 1)
-            background-color var(--white)
-            box-shadow inset 0 0 0 rem(2) var(--silver)
+            background-color var(--paperBackgroundColor)
+            box-shadow inset 0 0 0 rem(2) var(--dividerColor)
             transform translateY(-50%)
 
         &:hover::before
-            box-shadow inset 0 0 0 rem(2) var(--dodgerBlue)
+            box-shadow inset 0 0 0 rem(2) var(--primaryColor)
 
         &::after
             background-image embedurl('../../assets/icons/illus/check-white.svg')
@@ -356,20 +356,20 @@ $checkbox
             cursor not-allowed
 
         :hover::before
-            box-shadow inset 0 0 0 rem(2) var(--silver)
+            box-shadow inset 0 0 0 rem(2) var(--dividerColor)
 
         ::before
-            background-color var(--paleGrey)
+            background-color var(--dividerColor)
 
     input
         visually-hide()
 
         &:focus + span::before
-            box-shadow inset 0 0 0 rem(2) var(--dodgerBlue)
+            box-shadow inset 0 0 0 rem(2) var(--primaryColor)
 
         &:checked
             & + span::before
-                box-shadow inset 0 0 0 checkbox-size var(--dodgerBlue)
+                box-shadow inset 0 0 0 checkbox-size var(--primaryColor)
 
             & + span::after
                 opacity 1
@@ -380,11 +380,11 @@ $checkbox
             transform translateY(-50%) scale(0)
 
     &.is-error span
-        color var(--pomegranate)
+        color var(--errorColor)
 
         &::before
-            box-shadow inset 0 0 0 rem(2) var(--pomegranate)
-            background-color var(--yourPink)
+            box-shadow inset 0 0 0 rem(2) var(--errorColor)
+            background-color var(--errorColorLight)
 
     &--noGutter span
             padding-left 0
@@ -399,8 +399,8 @@ $radio
 
         &::after
             content ''
-            background var(--white)
-            border rem(5) solid var(--dodgerBlue)
+            background var(--paperBackgroundColor)
+            border rem(5) solid var(--primaryColor)
             box-sizing border-box
             width rem(16)
             height rem(16)
@@ -485,15 +485,15 @@ $inputgroup
     border rem(1) solid var(--dividerColor)
     border-radius rem(2)
     &:hover
-        border rem(1) solid var(--coolGrey)
+        border rem(1) solid var(--borderMainColor)
 
 $inputgroup--focus
     &
     &:hover
-        border-color var(--dodgerBlue)
+        border-color var(--primaryColor)
 
 $inputgroup--error
-    border-color var(--pomegranate)
+    border-color var(--errorColor)
 
 $inputgroup--fullwidth
     max-width none