Update design tokens library from 1.5 to 1.6 WIP (#14732)

* Updating account menu icon color

* Updating design-tokens and making appropriate updates to extension styles

* Adding more deprecated tags to colors

* Adding spinner and removing todo comment

* Remove comment

* Updates

* Updating snapshots

* More color and ui updates

* reverting transition change

.storybook/3.COLORS.stories.mdx

@@ -67,6 +67,7 @@ var(--color-text-muted)
 
 /** Icons */
 var(--color-icon-default)
+var(--color-icon-alternative)
 var(--color-icon-muted)
 
 /** Borders */
@@ -75,20 +76,20 @@ var(--color-border-muted)
 
 /** Overlays */
 var(--color-overlay-default)
-var(--color-overlay-inverse)
+var(--color-overlay-inverse) [DEPRECATED]
 
 /** User Actions */
 var(--color-primary-default)
 var(--color-primary-alternative)
 var(--color-primary-muted)
 var(--color-primary-inverse)
-var(--color-primary-disabled)
+var(--color-primary-disabled) [DEPRECATED]
 
-var(--color-secondary-default)
+var(--color-secondary-default) [DEPRECATED]
-var(--color-secondary-alternative)
+var(--color-secondary-alternative) [DEPRECATED]
-var(--color-secondary-muted)
+var(--color-secondary-muted) [DEPRECATED]
-var(--color-secondary-inverse)
+var(--color-secondary-inverse) [DEPRECATED]
-var(--color-secondary-disabled)
+var(--color-secondary-disabled) [DEPRECATED]
 
 /** States */
 /** Error */
@@ -96,28 +97,28 @@ var(--color-error-default)
 var(--color-error-alternative)
 var(--color-error-muted)
 var(--color-error-inverse)
-var(--color-error-disabled)
+var(--color-error-disabled) [DEPRECATED]
 
 /** Warning */
 var(--color-warning-default)
-var(--color-warning-alternative)
+var(--color-warning-alternative) [DEPRECATED]
 var(--color-warning-muted)
 var(--color-warning-inverse)
-var(--color-warning-disabled)
+var(--color-warning-disabled) [DEPRECATED]
 
 /** Success */
 var(--color-success-default)
-var(--color-success-alternative)
+var(--color-success-alternative) [DEPRECATED]
 var(--color-success-muted)
 var(--color-success-inverse)
-var(--color-success-disabled)
+var(--color-success-disabled) [DEPRECATED]
 
 /** Info */
 var(--color-info-default)
-var(--color-info-alternative)
+var(--color-info-alternative) [DEPRECATED]
 var(--color-info-muted)
 var(--color-info-inverse)
-var(--color-info-disabled)
+var(--color-info-disabled) [DEPRECATED]
 ```
 
 ### **Component colors** (tier 3)

package.json

@@ -116,7 +116,7 @@
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.31.0",
     "@metamask/controllers": "^29.0.1",
-    "@metamask/design-tokens": "^1.5.1",
+    "@metamask/design-tokens": "^1.6.5",
     "@metamask/eth-ledger-bridge-keyring": "^0.12.0",
     "@metamask/eth-token-tracker": "^4.0.0",
     "@metamask/etherscan-link": "^2.1.0",

ui/components/app/account-menu/account-menu.component.js

@@ -350,7 +350,7 @@ export default class AccountMenu extends Component {
             });
             history.push(NEW_ACCOUNT_ROUTE);
           }}
-          icon={<IconPlus color="var(--color-icon-default)" />}
+          icon={<IconPlus color="var(--color-icon-alternative)" />}
           text={t('createAccount')}
         />
         <AccountMenuItem
@@ -368,7 +368,7 @@ export default class AccountMenu extends Component {
           }}
           icon={
             <IconImport
-              color="var(--color-icon-default)"
+              color="var(--color-icon-alternative)"
               ariaLabel={t('importAccount')}
             />
           }
@@ -393,7 +393,7 @@ export default class AccountMenu extends Component {
           }}
           icon={
             <IconConnect
-              color="var(--color-icon-default)"
+              color="var(--color-icon-alternative)"
               ariaLabel={t('connectHardwareWallet')}
             />
           }
@@ -406,7 +406,7 @@ export default class AccountMenu extends Component {
           }}
           icon={
             <IconSpeechBubbles
-              color="var(--color-icon-default)"
+              color="var(--color-icon-alternative)"
               ariaLabel={supportText}
             />
           }
@@ -428,7 +428,7 @@ export default class AccountMenu extends Component {
           }}
           icon={
             <IconCog
-              color="var(--color-icon-default)"
+              color="var(--color-icon-alternative)"
               ariaLabel={t('settings')}
             />
           }

ui/components/app/account-menu/index.scss

@@ -136,6 +136,7 @@
       margin-top: 5px;
       margin-right: 10px;
       background-color: var(--color-background-alternative);
+      border: 1px solid var(--color-border-default);
       color: var(--color-text-default);
       font-weight: normal;
       letter-spacing: 0.5px;

ui/components/app/advanced-gas-controls/index.scss

@@ -21,6 +21,6 @@
   }
 
   path {
-    fill: var(--color-icon-muted);
+    fill: var(--color-icon-alternative);
   }
 }

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js

@@ -25,7 +25,7 @@ function determineTrendInfo(trend, t) {
     case 'level':
       return {
         className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
-        color: 'var(--color-icon-default)',
+        color: 'var(--color-icon-alternative)',
         title: t('levelArrow'),
       };
     default:

ui/components/app/collectible-details/collectible-details.js

@@ -311,7 +311,7 @@ export default function CollectibleDetails({ collectible }) {
                 {copied ? (
                   t('copiedExclamation')
                 ) : (
-                  <Copy size={15} color="var(--color-icon-default)" />
+                  <Copy size={15} color="var(--color-icon-alternative)" />
                 )}
               </button>
             </Box>

ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import ConfirmDetailRow from '.';
+
+export default {
+  title: 'Components/App/ConfirmPageContainer/ConfirmDetailRow',
+  id: __filename,
+  argTypes: {
+    headerText: {
+      control: 'text',
+    },
+    headerTextClassName: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    onHeaderClick: {
+      control: 'text',
+    },
+    primaryValueTextColor: {
+      control: 'text',
+    },
+    primaryText: {
+      control: 'text',
+    },
+    secondaryText: {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+  },
+  args: {
+    headerText: 'headerText',
+    headerTextClassName: 'headerTextClassName',
+    label: 'label',
+    onHeaderClick: 'onHeaderClick',
+    primaryValueTextColor: 'primaryValueTextColor',
+    primaryText: 'primaryText',
+    secondaryText: 'secondaryText',
+    value: 'value',
+  },
+};
+
+export const DefaultStory = (args) => <ConfirmDetailRow {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/confirm-page-container/confirm-detail-row/index.scss

@@ -26,7 +26,7 @@
   }
 
   &__secondary {
-    color: var(--color-icon-default);
+    color: var(--color-text-alternative);
     justify-content: flex-end;
   }
 
@@ -35,7 +35,7 @@
 
     text-transform: uppercase;
     margin-bottom: 6px;
-    color: var(--color-icon-default);
+    color: var(--color-text-default);
 
     &--edit {
       color: var(--color-primary-default);

ui/components/app/connected-accounts-list/connected-accounts-list.stories.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ConnectedAccountsList from '.';
+
+export default {
+  title: 'Components/App/ConnectedAccountsList',
+  id: __filename,
+  argTypes: {
+    connectedAccounts: {
+      control: 'array',
+    },
+    selectedAddress: {
+      control: 'text',
+    },
+    shouldRenderListOptions: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    connectedAccounts: [
+      {
+        name: 'This is a Really Long Account Name',
+        address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+        index: 0,
+        balance: '0x176e5b6f173ebe66',
+      },
+      {
+        name: 'Account 2',
+        address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
+        index: 1,
+        balance: '0x2d3142f5000',
+      },
+    ],
+  },
+};
+
+export const DefaultStory = (args) => <ConnectedAccountsList {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/edit-gas-display/index.scss

@@ -28,8 +28,8 @@
   button.edit-gas-display__dapp-acknowledgement-button {
     margin: 40px auto 0 auto;
     display: block;
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
-    border: 1px solid var(--color-secondary-default);
+    border: 1px solid var(--color-warning-default);
     text-transform: unset;
     width: auto;
     background: transparent;

ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss

@@ -78,7 +78,7 @@
 
   &__time-estimate-low,
   &__fee-estimate-high {
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
   }
 
   &__time-estimate-medium,

ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss

@@ -17,7 +17,7 @@
     }
 
     &__dialog {
-      background-color: var(--color-secondary-default);
+      background-color: var(--color-warning-default);
       border-radius: 30px;
       margin: 4px 0;
       text-align: center;

ui/components/app/gas-customization/advanced-gas-inputs/index.scss

@@ -23,7 +23,7 @@
       }
 
       .fa-info-circle {
-        color: var(--color-icon-default);
+        color: var(--color-icon-alternative);
         cursor: pointer;
       }
 
@@ -41,7 +41,7 @@
     &__warning-text {
       @include H7;
 
-      color: var(--color-secondary-default);
+      color: var(--color-warning-default);
     }
 
     &__input-wrapper {

ui/components/app/gas-details-item/index.scss

@@ -1,6 +1,6 @@
 .gas-details-item {
   &__gas-fee-warning {
-    color: var(--color-secondary-default); //@TODO: revisit when warning color tokens are revisited
+    color: var(--color-warning-default);
   }
 
   &__currency-container,

ui/components/app/gas-timing/index.scss

@@ -20,7 +20,7 @@
   }
 
   &--negative-V2 {
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
     font-weight: bold;
   }
 

ui/components/app/modals/qr-scanner/qr-scanner.component.js

@@ -251,7 +251,7 @@ export default class QrScanner extends Component {
               }}
             />
             {ready === READY_STATE.READY ? null : (
-              <Spinner color="var(--color-secondary-default)" />
+              <Spinner color="var(--color-warning-default)" />
             )}
           </div>
         </div>

ui/components/app/permissions-connect-permission-list/index.scss

@@ -17,7 +17,7 @@
       padding: 16px;
       min-width: 16px;
       min-height: 16px;
-      color: var(--color-icon-default);
+      color: var(--color-icon-alternative);
       font-size: 1rem;
     }
   }

ui/components/app/qr-hardware-popover/enhanced-reader.js

@@ -55,7 +55,7 @@ const EnhancedReader = ({ handleScan }) => {
           filter: 'blur(4px)',
         }}
       />
-      {canplay ? null : <Spinner color="var(--color-secondary-default)" />}
+      {canplay ? null : <Spinner color="var(--color-warning-default)" />}
     </div>
   );
 };

ui/components/app/selected-account/selected-account.component.js

@@ -63,7 +63,7 @@ class SelectedAccount extends Component {
             <div className="selected-account__address">
               {shortenAddress(checksummedAddress)}
               <div className="selected-account__copy">
-                <CopyIcon size={11} color="var(--color-icon-default)" />
+                <CopyIcon size={11} color="var(--color-icon-alternative)" />
               </div>
             </div>
           </button>

ui/components/app/tab-bar/index.scss

@@ -68,6 +68,7 @@
         justify-content: center;
         margin-inline-end: 16px;
         flex: 0 0 18px;
+        color: var(--color-icon-alternative);
 
         @media screen and (min-width: $break-large) {
           flex: 0 0 14px;

ui/components/app/token-cell/token-cell.js

@@ -29,7 +29,7 @@ export default function TokenCell({
         rel="noopener noreferrer"
         target="_blank"
         onClick={(event) => event.stopPropagation()}
-        style={{ color: 'var(--color-secondary-default)' }}
+        style={{ color: 'var(--color-warning-default)' }}
       >
         {t('here')}
       </a>

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js

@@ -14,6 +14,9 @@ export default {
       options: Object.keys(imageHash),
     },
   },
+  args: {
+    eventKey: Object.keys(imageHash)[0],
+  },
 };
 
 export const DefaultStory = (args) => <TransactionActivityLogIcon {...args} />;

ui/components/app/transaction-decoding/transaction-decoding.component.js

@@ -202,7 +202,7 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
     if (loading) {
       return (
         <div className="tx-insight-loading">
-          <Spinner color="var(--color-secondary-default)" />
+          <Spinner color="var(--color-warning-default)" />
         </div>
       );
     }

ui/components/app/transaction-detail-item/index.scss

@@ -34,7 +34,7 @@
     margin-inline-start: 4px;
 
     path {
-      fill: var(--color-icon-default);
+      fill: var(--color-icon-alternative);
     }
   }
 

ui/components/app/transaction-status/index.scss

@@ -14,7 +14,7 @@
 
   &--unapproved,
   &--pending {
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
   }
 
   &--queued {

ui/components/app/wallet-overview/index.scss

@@ -67,7 +67,7 @@
 
   &__cached-balance,
   &__cached-star {
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
   }
 
   &__cached-secondary-balance {

ui/components/ui/form-field/form-field.stories.js

@@ -57,7 +57,7 @@ export const FormFieldWithTitleDetail = (args) => {
       <button
         style={{
           backgroundColor: clicked
-            ? 'var(--color-secondary-default)'
+            ? 'var(--color-warning-default)'
             : 'var(--color-background-alternative)',
         }}
         onClick={() => setClicked(!clicked)}

ui/components/ui/form-field/index.scss

@@ -39,10 +39,10 @@
     border-radius: 6px;
     background-color: var(--color-background-default);
     color: var(--color-text-default);
-    border: 2px solid var(--color-border-default);
+    border: 1px solid var(--color-border-default);
 
     &:focus {
-      border: solid 2px var(--color-primary-default);
+      border: solid 1px var(--color-primary-default);
     }
 
     &--error {

ui/components/ui/icon-with-fallback/icon-with-fallback.scss

@@ -1,5 +1,5 @@
 .icon-with-fallback {
   &__fallback {
-    color: var(--color-icon-default);
+    color: var(--color-icon-alternative);
   }
 }

ui/components/ui/icon/icon.stories.js

@@ -41,10 +41,11 @@ import IconTokenSearch from './icon-token-search';
 
 const validColors = [
   'var(--color-icon-default)',
+  'var(--color-icon-alternative)',
   'var(--color-icon-muted)',
   'var(--color-overlay-inverse)',
   'var(--color-primary-default)',
-  'var(--color-secondary-default)',
+  'var(--color-warning-default)',
   'var(--color-error-default)',
   'var(--color-warning-default)',
   'var(--color-success-default)',

ui/components/ui/info-tooltip/info-tooltip.js

@@ -17,7 +17,7 @@ export default function InfoTooltip({
   containerClassName,
   wrapperClassName,
   wide,
-  iconFillColor = 'var(--color-icon-default)',
+  iconFillColor = 'var(--color-icon-alternative)',
 }) {
   return (
     <div className="info-tooltip">

ui/components/ui/loading-screen/loading-screen.component.js

@@ -35,7 +35,7 @@ class LoadingScreen extends Component {
         <div className="loading-overlay__container">
           {this.props.showLoadingSpinner && (
             <Spinner
-              color="var(--color-secondary-default)"
+              color="var(--color-warning-default)"
               className="loading-overlay__spinner"
             />
           )}

ui/components/ui/menu/menu.scss

@@ -43,6 +43,6 @@
   &__icon {
     margin-right: 8px;
     grid-row: 1 / span 2;
-    color: var(--color-icon-default);
+    color: var(--color-icon-alternative);
   }
 }

ui/components/ui/metafox-logo/horizontal-logo.js

@@ -6,7 +6,7 @@ const LOGO_HEIGHT = 30;
 const TEXT_COLOR = 'var(--color-text-default)';
 const FLASK_PILL_BACKGROUND = 'var(--color-overlay-alternative)';
 const FLASK_PILL_TEXT = 'var(--color-overlay-inverse)';
-const BETA_PILL_BACKGROUND = 'var(--color-secondary-default)';
+const BETA_PILL_BACKGROUND = 'var(--color-warning-default)';
 const BETA_PIL_TEXT = 'var(--color-secondary-inverse)';
 
 export default function MetaFoxHorizontalLogo({ className }) {

ui/components/ui/sender-to-recipient/index.scss

@@ -27,7 +27,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        border: 1px solid var(--color-border-default);
+        border-bottom: 1px solid var(--color-border-muted);
 
         &--sender {
           padding-right: 30px;

ui/components/ui/spinner/spinner.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Spinner from '.';
+
+export default {
+  title: 'Components/UI/Spinner',
+  id: __filename,
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+    color: {
+      control: 'text',
+    },
+  },
+  args: {
+    color: 'var(--color-warning-default)',
+  },
+};
+
+export const DefaultStory = (args) => (
+  <div style={{ width: 100, height: 100 }}>
+    <Spinner {...args} />
+  </div>
+);
+
+DefaultStory.storyName = 'Default';

ui/css/itcss/components/send.scss

@@ -440,16 +440,6 @@
     background-color: var(--color-background-default);
   }
 
-  &__send-arrow-icon {
-    @include H4;
-
-    color: var(--color-secondary-default);
-    transform: rotate(-45deg);
-    position: absolute;
-    top: -2px;
-    left: 0;
-  }
-
   &__arrow-background {
     background-color: var(--color-background-default);
     height: 14px;
@@ -529,7 +519,7 @@
     @include H7;
 
     left: 8px;
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
   }
 
   &__error-border {
@@ -651,7 +641,7 @@
     }
 
     &__caret {
-      color: var(--color-text-muted);
+      color: var(--color-icon-default);
       padding: 0 10px;
     }
 

ui/css/utilities/colors.scss

@@ -6,7 +6,7 @@
   --kovan: #9064ff;
   --rinkeby: #f6c343;
   --goerli: #3099f2;
-  --localhost: #29b6af;
+  --localhost: #bbc0c5;
   --flask-purple: #8b45b6;
 
   // DO NOT CHANGE

ui/pages/create-account/connect-hardware/index.scss

@@ -124,7 +124,7 @@
   }
 
   &__error {
-    color: var(--color-secondary-default);
+    color: var(--color-warning-default);
     margin: 20px 20px 10px;
     display: block;
     text-align: center;

ui/pages/first-time-flow/metametrics-opt-in/index.scss

@@ -33,10 +33,6 @@
 
   &__body-graphic {
     margin-top: 25px;
-
-    .fa-bar-chart {
-      color: var(--color-icon-default);
-    }
   }
 
   &__description {

ui/pages/permissions-connect/index.scss

@@ -27,7 +27,7 @@
   &__back {
     @include H7;
 
-    color: var(--color-text-default);
+    color: var(--color-icon-default);
     font-weight: bold;
     cursor: pointer;
 
@@ -39,7 +39,7 @@
   &__page-count {
     @include H7;
 
-    color: var(--color-icon-default);
+    color: var(--color-text-default);
     grid-column: 2;
     justify-self: end;
     font-weight: bold;

ui/pages/send/send.scss

@@ -232,7 +232,7 @@
     &__subtitle {
       @include H7;
 
-      color: var(--color-icon-default);
+      color: var(--color-text-default);
       margin-top: 0.25rem;
     }
   }

ui/pages/settings/alerts-tab/alerts-tab.js

@@ -30,7 +30,7 @@ const AlertSettingsEntry = ({ alertId, description, title }) => {
             title={description}
             wrapperClassName="alerts-tab__description"
           >
-            <i className="fa fa-info-circle" />
+            <i className="fa fa-info-circle alerts-tab__description__icon" />
           </Tooltip>
           <ToggleButton
             offLabel={t('off')}

ui/pages/settings/alerts-tab/alerts-tab.scss

@@ -20,6 +20,10 @@
   &__description {
     display: flex;
     align-items: center;
+
+    &__icon {
+      color: var(--color-icon-alternative);
+    }
   }
 
   &__item {

ui/pages/settings/contact-list-tab/index.scss

@@ -53,6 +53,7 @@
   &__icon {
     margin-bottom: 16px;
     display: block;
+    color: var(--color-icon-muted);
   }
 
   &__title {

ui/pages/settings/index.scss

@@ -320,7 +320,7 @@
 
       margin-top: 8px;
       margin-bottom: 12px;
-      color: var(--color-icon-default);
+      color: var(--color-text-default);
     }
   }
 
@@ -331,7 +331,7 @@
   &__content-description {
     @include H6;
 
-    color: var(--color-icon-default);
+    color: var(--color-text-default);
     padding-top: 5px;
 
     a {

ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js

@@ -32,7 +32,7 @@ export default function CustomContentSearch({
     if (searchQuery === '') {
       setSearchIconColor('var(--color-icon-muted)');
     } else {
-      setSearchIconColor('var(--color-icon-default)');
+      setSearchIconColor('var(--color-icon-alternative)');
     }
 
     const fuseSearchResult = networksSearchFuse.search(searchQuery);

ui/pages/settings/networks-tab/index.scss

@@ -30,7 +30,7 @@
 
     &__icon-with-fallback {
       padding: 0 1px 2px 2px;
-      color: var(--color-primary-inverse); // TODO: design-tokens needs network colors
+      color: var(--color-text-alternative);
       margin-inline-start: 8px;
 
       @each $variant, $color in design-system.$color-map {
@@ -143,7 +143,7 @@
   &__networks-list {
     flex: 0.5 0 auto;
     max-width: 350px;
-    border-right: 1px solid var(--color-border-default);
+    border-right: 1px solid var(--color-border-muted);
 
     &__custom-search-network {
       margin-top: 24px;
@@ -218,7 +218,7 @@
 
   &__networks-list-item {
     display: flex;
-    padding: 12px 24px 12px 0;
+    padding: 12px 16px 12px 0;
     position: relative;
     align-items: center;
     width: 311px;
@@ -254,6 +254,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    flex-grow: 1;
 
     &:hover {
       cursor: pointer;

ui/pages/settings/networks-tab/networks-list/networks-list.js

@@ -67,7 +67,7 @@ const NetworksList = ({
         <Typography
           variant={TYPOGRAPHY.H6}
           margin={[6, 0, 0, 9]}
-          color={COLORS.TEXT_MUTED}
+          color={COLORS.TEXT_ALTERNATIVE}
           className="networks-tab__networks-list__label"
         >
           {t('testNetworks')}

ui/pages/settings/networks-tab/networks-tab.js

@@ -48,7 +48,7 @@ const NetworksTab = ({ addNewNetwork }) => {
   const frequentRpcNetworkListDetails = frequentRpcListDetail.map((rpc) => {
     return {
       label: rpc.nickname,
-      iconColor: 'var(--color-icon-default)',
+      iconColor: 'var(--color-icon-alternative)',
       providerType: NETWORK_TYPE_RPC,
       rpcUrl: rpc.rpcUrl,
       chainId: rpc.chainId,

ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap

@@ -36,7 +36,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
       >
         <path
           d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
-          fill="var(--color-icon-default)"
+          fill="var(--color-primary-default)"
         />
       </svg>
     </div>

ui/pages/swaps/exchange-rate-display/exchange-rate-display.js

@@ -12,7 +12,7 @@ export default function ExchangeRateDisplay({
   secondaryTokenValue,
   secondaryTokenDecimals = 18,
   secondaryTokenSymbol,
-  arrowColor = 'var(--color-icon-default)',
+  arrowColor = 'var(--color-primary-default)',
   boldSymbols = true,
   className,
 }) {

ui/pages/swaps/select-quote-popover/index.scss

@@ -246,7 +246,7 @@
     }
 
     &--orange {
-      background: var(--color-secondary-default);
+      background: var(--color-warning-default);
     }
 
     &--green {

yarn.lock

@@ -2889,10 +2889,10 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.3"
 
-"@metamask/design-tokens@^1.5.1":
+"@metamask/design-tokens@^1.6.5":
-  version "1.5.1"
+  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.5.1.tgz#723f10bc5fe03ce14d47b1ad6190a835df62745a"
+  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.6.5.tgz#e585b67f73ce301e0218d98ba89e079f7e81c412"
-  integrity sha512-HLXpuzQGnVPZHOvHpzOVQoe/1mvjNOTNxvAgR1na3BAUiO3NhnUxhYE2RzV0rpbc3UUUGbjVB+dceMZ4FtFfRw==
+  integrity sha512-5eCrUHXrIivXX1xx6kwNtM9s/ejhrPYSATSniFc7YKS9z+TkCK4/n52owOBnDIbrL8W3XxQIiaaqQAM+NQad4w==
 
 "@metamask/eslint-config-jest@^9.0.0":
   version "9.0.0"