Dark Mode Part 1: Switch to Using CSS Variables (#13147)

3 years ago · 10dc686505
parent f5dcd12293
commit 10dc686505
191 changed files with 1071 additions and 1137 deletions
--- a/ui/components/app/account-menu/index.scss
+++ b/ui/components/app/account-menu/index.scss
@ -7,7 +7,7 @@
  background: rgba($black, 0.8);
  box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
  min-width: 150px;
-  color: $white;
+  color: var(--white);

  @media screen and (max-width: $break-small) {
    right: calc(((100vw - 100%) / 2) + 8px);
@ -67,7 +67,7 @@
  }

  &__divider {
-    background-color: $scorpion;
+    background-color: var(--scorpion);
    width: 100%;
    height: 1px;
  }
@ -100,10 +100,10 @@
  & &__lock-button {
    @include H7;

-    border: 1px solid $ui-white;
+    border: 1px solid var(--ui-white);
    background-color: transparent;
-    color: $white;
    padding: 3.5px 5px;
+    color: var(--white);
    width: 59px;

    &:hover {
@ -151,8 +151,8 @@
      height: 15px;
      margin-top: 5px;
      margin-right: 10px;
-      background-color: $dusty-gray;
-      color: $black;
+      background-color: var(--dusty-gray);
+      color: var(--black);
      font-weight: normal;
      letter-spacing: 0.5px;
      display: flex;
@ -186,7 +186,7 @@
      .remove-account-icon::after {
        content: '\00D7';
        font-size: 25px;
-        color: $white;
+        color: var(--white);
        cursor: pointer;
        position: absolute;
        margin-top: -5px;
@ -224,7 +224,7 @@
  &__name {
    @include H4;

-    color: $white;
+    color: var(--white);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
@ -234,7 +234,7 @@
  &__balance {
    @include H6;

-    color: $dusty-gray;
+    color: var(--dusty-gray);
  }

  &__action {
--- a/ui/components/app/advanced-gas-controls/index.scss
+++ b/ui/components/app/advanced-gas-controls/index.scss
@ -8,10 +8,10 @@
  }

  .form-field__row--error .form-field__heading-title h6 {
-    color: $error-1;
+    color: var(--error-1);

    & path {
-      fill: $error-1;
+      fill: var(--error-1);
    }
  }

@ -21,6 +21,6 @@
  }

  path {
-    fill: $ui-3;
+    fill: var(--ui-3);
  }
 }
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  margin-top: 2px;
-  color: $ui-4;
+  color: var(--ui-4);
  font-size: $font-size-h8;

  &__label {
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss
@ -8,7 +8,7 @@
  }

  &__separator {
-    border-top: 1px solid $ui-grey;
+    border-top: 1px solid var(--ui-grey);
    margin: 16px 0;
  }
 }
--- a/ui/components/app/advanced-gas-fee-popover/index.scss
+++ b/ui/components/app/advanced-gas-fee-popover/index.scss
@ -1,6 +1,6 @@
 .advanced-gas-fee-popover {
  &__separator {
-    border-top: 1px solid $ui-grey;
+    border-top: 1px solid var(--ui-grey);
    margin: 16px 0;
  }

@ -12,7 +12,7 @@
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
-    border-bottom: 1px solid $ui-grey;
+    border-bottom: 1px solid var(--ui-grey);
  }

  .popover-footer {
--- a/ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.scss
+++ b/ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.scss
@ -16,7 +16,7 @@
  }

  &__content-link {
-    color: $primary-blue;
+    color: var(--primary-blue);
    cursor: pointer;
  }

@ -49,7 +49,7 @@
    margin-bottom: 16px;
    padding: 16px;
    font-size: 14px;
-    border: 1px solid $accent-red;
+    border: 1px solid var(--accent-red);
    background: #f8eae8;
    border-radius: 3px;
  }
--- a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
+++ b/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
@ -17,7 +17,7 @@
  }

  & &__dismiss-button {
-    background: $primary-blue;
+    background: var(--primary-blue);
    color: white;
    height: 40px;
    width: 100px;
@ -29,7 +29,7 @@

    margin-bottom: 16px;
    padding: 16px;
-    border: 1px solid $accent-red;
+    border: 1px solid var(--accent-red);
    background: #f8eae8;
    border-radius: 3px;
  }
@ -52,7 +52,7 @@
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  &__checkbox-label-tooltip {
--- a/ui/components/app/app-header/index.scss
+++ b/ui/components/app/app-header/index.scss
@ -1,6 +1,6 @@
 .app-header {
  align-items: center;
-  background: $Grey-000;
+  background: var(--Grey-000);
  position: relative;
  z-index: $header-z-index;
  display: flex;
@ -23,7 +23,7 @@
        position: absolute;
        width: 100%;
        height: 32px;
-        background: $Grey-000;
+        background: var(--Grey-000);
        bottom: -32px;
      }
    }
--- a/ui/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/components/app/asset-list-item/asset-list-item.scss
@ -29,7 +29,7 @@
  }

  &__chevron-right {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  .list-item__right-content {
--- a/ui/components/app/cancel-speedup-popover/index.scss
+++ b/ui/components/app/cancel-speedup-popover/index.scss
@ -21,7 +21,7 @@
  }

  &__separator {
-    border-bottom: 1px solid $ui-grey;
+    border-bottom: 1px solid var(--ui-grey);
    width: 100%;
  }
 }
--- a/ui/components/app/collectible-details/index.scss
+++ b/ui/components/app/collectible-details/index.scss
@ -52,13 +52,13 @@ $spacer-break-small: 16px;

  &__contract-link,
  &__image-link {
-    color: $primary-1;
+    color: var(--primary-1);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;

    &:hover {
-      color: $primary-3;
+      color: var(--primary-3);
    }
  }

--- a/ui/components/app/collectible-options/index.scss
+++ b/ui/components/app/collectible-options/index.scss
@ -1,7 +1,7 @@
 .collectible-options {
  &__button {
    font-size: $font-size-paragraph;
-    color: $Black-100;
+    color: var(--Black-100);
    background-color: inherit;
    padding: 2px 0 2px 8px;
  }
--- a/ui/components/app/collectibles-detection-notice/index.scss
+++ b/ui/components/app/collectibles-detection-notice/index.scss
@ -11,7 +11,7 @@
        content: '\00D7';
        font-size: 29px;
        font-weight: 200;
-        color: $black;
+        color: var(--black);
        background-color: transparent;
        top: 0;
        right: 12px;
--- a/ui/components/app/collectibles-items/index.scss
+++ b/ui/components/app/collectibles-items/index.scss
@ -17,8 +17,8 @@
      width: 32px;
      height: 32px;
      padding: 8px;
-      background: $ui-4;
-      color: $ui-white;
+      background: var(--ui-4);
+      color: var(--ui-white);
      text-align: center;
      line-height: 1;
    }
--- a/ui/components/app/confirm-page-container/confirm-detail-row/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/index.scss
@ -9,7 +9,7 @@
    @include H7;

    font-weight: 500;
-    color: $scorpion;
+    color: var(--scorpion);
    text-transform: uppercase;
  }

@ -26,7 +26,7 @@
  }

  &__secondary {
-    color: $oslo-gray;
+    color: var(--oslo-gray);
    justify-content: flex-end;
  }

@ -35,10 +35,10 @@

    text-transform: uppercase;
    margin-bottom: 6px;
-    color: $scorpion;
+    color: var(--scorpion);

    &--edit {
-      color: $primary-blue;
+      color: var(--primary-blue);
      cursor: pointer;
    }

--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
@ -19,15 +19,15 @@
    @include H7;

    text-transform: uppercase;
-    color: $oslo-gray;
+    color: var(--oslo-gray);
    padding: 3px 8px;
-    border: 1px solid $oslo-gray;
+    border: 1px solid var(--oslo-gray);
    border-radius: 4px;
    display: inline-block;
  }

  &__nonce {
-    color: $oslo-gray;
+    color: var(--oslo-gray);
  }

  &__title {
@ -50,13 +50,13 @@
  }

  &__subtitle {
-    color: $oslo-gray;
+    color: var(--oslo-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &--border {
-    border-bottom: 1px solid $geyser;
+    border-bottom: 1px solid var(--geyser);
  }
 }
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
@ -2,7 +2,7 @@
  background-color: #fffcdb;
  display: flex;
  align-items: center;
-  border-bottom: 1px solid $geyser;
+  border-bottom: 1px solid var(--geyser);
  padding: 12px 24px;

  &__icon {
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
@ -19,7 +19,7 @@

  &__data {
    padding: 16px;
-    color: $oslo-gray;
+    color: var(--oslo-gray);

    & > .disclosure {
      margin-top: 0;
@ -57,7 +57,7 @@
  }

  &__gas-fee {
-    border-bottom: 1px solid $geyser;
+    border-bottom: 1px solid var(--geyser);

    .advanced-gas-inputs__gas-edit-rows {
      margin-bottom: 16px;
@ -69,7 +69,7 @@

    font-weight: 500;
    text-transform: capitalize;
-    color: $black;
+    color: var(--black);
    padding-left: 5px;
  }

--- a/ui/components/app/confirm-page-container/confirm-page-container-header/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/index.scss
@ -6,7 +6,7 @@
  &__row {
    display: flex;
    justify-content: space-between;
-    border-bottom: 1px solid $geyser;
+    border-bottom: 1px solid var(--geyser);
    padding: 4px 13px 4px 13px;
    flex: 0 0 auto;
    align-items: center;
--- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
@ -3,7 +3,7 @@
  justify-content: space-between;
  font: inherit;
  padding: 4px 10px 4px 10px;
-  border-bottom: 1px solid $geyser;
+  border-bottom: 1px solid var(--geyser);
  flex: 0 0 auto;

  &__container {
@ -44,7 +44,7 @@
  &__longtext {
    @include H9;

-    color: $oslo-gray;
+    color: var(--oslo-gray);
  }

  &__imageflip {
--- a/ui/components/app/connected-accounts-list/index.scss
+++ b/ui/components/app/connected-accounts-list/index.scss
@ -24,7 +24,7 @@
    @extend %account-status-typography;

    display: inline;
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  &__account-status-link {
@ -34,7 +34,7 @@

    &,
    &:hover {
-      color: $primary-blue;
+      color: var(--primary-blue);
      cursor: pointer;
    }
  }
@ -46,11 +46,11 @@
    align-items: center;
    width: 100%;
    padding: 16px 24px;
-    border-top: 1px solid $geyser;
+    border-top: 1px solid var(--geyser);

    &--highlight {
-      background-color: $Yellow-000;
-      border: 1px solid $accent-yellow;
+      background-color: var(--Yellow-000);
+      border: 1px solid var(--accent-yellow);
      box-sizing: border-box;
      padding: 16px;
      margin-bottom: 16px;
@ -69,7 +69,7 @@
  &__button {
    font-size: $font-size-h4;
    background: inherit;
-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }

--- a/ui/components/app/connected-accounts-permissions/index.scss
+++ b/ui/components/app/connected-accounts-permissions/index.scss
@ -3,7 +3,7 @@

  display: flex;
  flex-direction: column;
-  color: $Grey-500;
+  color: var(--Grey-500);

  strong {
    font-weight: bold;
--- a/ui/components/app/connected-status-indicator/index.scss
+++ b/ui/components/app/connected-status-indicator/index.scss
@ -47,13 +47,13 @@
  }

  &__grey-circle {
-    border-color: $Grey-500;
+    border-color: var(--Grey-500);
  }

  &__text {
    @include H8;

-    color: $Grey-500;
+    color: var(--Grey-500);
    margin-left: 6px;
    white-space: nowrap;
  }
--- a/ui/components/app/edit-gas-display-education/index.scss
+++ b/ui/components/app/edit-gas-display-education/index.scss
@ -1,5 +1,5 @@
 .edit-gas-display-education {
  a {
-    color: $primary-1;
+    color: var(--primary-1);
  }
 }
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/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: $secondary-1;
-    border: 1px solid $secondary-1;
+    color: var(--secondary-1);
+    border: 1px solid var(--secondary-1);
    text-transform: unset;
    width: auto;
    background: transparent;
@ -43,7 +43,7 @@
    display: block;
    margin: 0 auto;
    background: transparent;
-    color: $primary-1;
+    color: var(--primary-1);
    font-weight: bold;
  }

@ -58,7 +58,7 @@
      display: block;
      margin: 0 auto;
      background: transparent;
-      color: $primary-1;
+      color: var(--primary-1);
    }
  }

--- a/ui/components/app/edit-gas-fee-button/index.scss
+++ b/ui/components/app/edit-gas-fee-button/index.scss
@ -8,7 +8,7 @@

    display: flex;
    align-items: baseline;
-    color: $primary-1;
+    color: var(--primary-1);
    background: transparent;
    border: 0;
    padding-inline-end: 0;
@ -16,7 +16,7 @@
  }

  i {
-    color: $primary-1;
+    color: var(--primary-1);
    margin-right: 2px;
  }

@ -36,11 +36,11 @@

  &__tooltip {
    p {
-      color: $Grey-500;
+      color: var(--Grey-500);
    }

    b {
-      color: $neutral-black;
+      color: var(--neutral-black);
      display: inline-block;
      min-width: 60%;
    }
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
@ -1,7 +1,7 @@
 .edit-gas-item {
  border-radius: 24px;
  background: white;
-  color: $ui-4;
+  color: var(--ui-4);
  cursor: pointer;
  font-size: 12px;
  display: flex;
@ -12,11 +12,11 @@
  width: 100%;

  &:hover {
-    background-color: $primary-2;
+    background-color: var(--primary-2);
  }

  &--selected {
-    background-color: $ui-1;
+    background-color: var(--ui-1);
  }

  button.edit-gas-item--disabled[disabled] {
@ -27,7 +27,7 @@
  &__name {
    display: inline-flex;
    align-items: center;
-    color: $ui-black;
+    color: var(--ui-black);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
@ -78,11 +78,11 @@

  &__time-estimate-low,
  &__fee-estimate-high {
-    color: $secondary-1;
+    color: var(--secondary-1);
  }

  &__time-estimate-medium,
  &__time-estimate-high {
-    color: $success-3;
+    color: var(--success-3);
  }
 }
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss
@ -20,7 +20,7 @@
    }

    &__dialog {
-      background-color: $Orange-500;
+      background-color: var(--Orange-500);
      border-radius: 30px;
      margin: 4px 0;
      text-align: center;
--- a/ui/components/app/edit-gas-fee-popover/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/index.scss
@ -2,7 +2,7 @@
  height: 500px;

  &__wrapper {
-    border-top: 1px solid $ui-grey;
+    border-top: 1px solid var(--ui-grey);
  }

  &__content {
@ -14,7 +14,7 @@
    }

    &__header {
-      color: $ui-4;
+      color: var(--ui-4);
      font-size: 10px;
      font-weight: 700;
      margin: 0 12px;
@ -36,7 +36,7 @@
    }

    &__separator {
-      border-top: 1px solid $ui-grey;
+      border-top: 1px solid var(--ui-grey);
      margin: 8px 12px;
    }
  }
@ -46,6 +46,6 @@
  }

  &__know-more a {
-    color: $primary-1;
+    color: var(--primary-1);
  }
 }
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
@ -2,14 +2,14 @@
  margin: 24px 0 12px;

  &__info {
-    border-top: 1px solid $ui-2;
-    border-bottom: 1px solid $ui-2;
+    border-top: 1px solid var(--ui-2);
+    border-bottom: 1px solid var(--ui-2);
    height: 56px;
    display: flex;
    align-items: center;

    &__separator {
-      border-left: 1px solid $ui-2;
+      border-left: 1px solid var(--ui-2);
      height: 65%;
    }

@ -25,13 +25,13 @@
      }

      &-data {
-        color: $ui-4;
+        color: var(--ui-4);
        font-size: 12px;
        text-align: center;
      }

      &-label {
-        color: $Black-100;
+        color: var(--Black-100);
        font-size: 10px;
        font-weight: bold;
        margin-top: 4px;
--- a/ui/components/app/flask/experimental-area/index.scss
+++ b/ui/components/app/flask/experimental-area/index.scss
@ -1,5 +1,5 @@
 .experimental-area {
-  color: $flask-purple;
+  color: var(--flask-purple);
  margin: auto;
  display: flex;
  flex-direction: column;
@ -46,9 +46,9 @@
  }

  button {
-    background-color: $flask-purple !important;
+    background-color: var(--flask-purple) !important;
    border: 0 !important;
-    color: $ui-1;
+    color: var(--ui-1);
    width: 200px;
  }
 }
--- a/ui/components/app/flask/snaps-authorship-pill/index.scss
+++ b/ui/components/app/flask/snaps-authorship-pill/index.scss
@ -6,11 +6,11 @@
  &:hover,
  &:focus {
    .chip {
-      background-color: $ui-1;
+      background-color: var(--ui-1);
    }
  }
 }

 .snaps-authorship-icon {
-  color: $ui-4;
+  color: var(--ui-4);
 }
--- a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss
+++ b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss
@ -23,12 +23,12 @@
      }

      .fa-info-circle {
-        color: $silver;
+        color: var(--silver);
        cursor: pointer;
      }

      .fa-info-circle:hover {
-        color: $mid-gray;
+        color: var(--mid-gray);
      }
    }

@ -53,9 +53,9 @@
      @include Paragraph;

      direction: ltr;
-      border: 1px solid $dusty-gray;
+      border: 1px solid var(--dusty-gray);
      border-radius: 4px;
-      color: $mid-gray;
+      color: var(--mid-gray);
      height: 24px;
      width: 100%;
      padding-left: 8px;
@ -64,11 +64,11 @@
    }

    &__input--error {
-      border: 1px solid $red;
+      border: 1px solid var(--red);
    }

    &__input--warning {
-      border: 1px solid $orange;
+      border: 1px solid var(--orange);
    }

    &__input-arrows {
@ -99,7 +99,7 @@

      &__i-wrap:hover {
        background: #4eade7;
-        color: $white;
+        color: var(--white);
      }

      i:hover {
@ -116,11 +116,11 @@
    }

    &__input-arrows--error {
-      border: 1px solid $red;
+      border: 1px solid var(--red);
    }

    &__input-arrows--warning {
-      border: 1px solid $orange;
+      border: 1px solid var(--orange);
    }

    input[type="number"] {
@ -145,7 +145,7 @@
      position: absolute;
      top: 8px;
      right: 10px;
-      color: $dusty-gray;
+      color: var(--dusty-gray);
    }

    &__custom-text {
--- a/ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@ -10,7 +10,7 @@
  &__transaction-data-summary {
    display: flex;
    flex-flow: column;
-    color: $mid-gray;
+    color: var(--mid-gray);
    margin-top: 12px;
    padding-left: 18px;
    padding-right: 18px;
--- a/ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
+++ b/ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@ -11,14 +11,14 @@
    @include Paragraph;

    margin-top: 19px;
-    color: $black;
+    color: var(--black);
  }

  &__blurb {
    @include H7;

    width: 95%;
-    color: $black;
+    color: var(--black);
    margin-top: 5px;
    margin-bottom: 15px;
  }
--- a/ui/components/app/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/components/app/gas-customization/gas-modal-page-container/index.scss
@ -46,7 +46,7 @@
    &__title {
      @include H5;

-      color: $black;
+      color: var(--black);
      font-weight: 500;
      display: flex;
      justify-content: center;
@ -80,7 +80,7 @@
      }

      &.tab--active button {
-        color: $primary-blue;
+        color: var(--primary-blue);
      }
    }
  }
@ -101,11 +101,11 @@
    @include H7;

    width: 100%;
-    background: $polar;
+    background: var(--polar);
    padding: 15px 21px;
    display: flex;
    flex-flow: column;
-    color: $scorpion;
+    color: var(--scorpion);

    &__send-info,
    &__transaction-info,
@ -154,7 +154,7 @@

  &__info-row--fade {
    background: white;
-    color: $dusty-gray;
-    border-top: 1px solid $mischka;
+    color: var(--dusty-gray);
+    border-top: 1px solid var(--mischka);
  }
 }
--- a/ui/components/app/gas-customization/gas-price-button-group/index.scss
+++ b/ui/components/app/gas-customization/gas-price-button-group/index.scss
@ -15,7 +15,7 @@

  &__time-estimate {
    margin-top: 5.5px;
-    color: $silver-chalice;
+    color: var(--silver-chalice);
    height: 15.4px;
  }

@ -34,9 +34,9 @@
    display: flex;
    padding-top: 17px;
    border-radius: 4px;
-    border-color: $spindle;
-    background: $white;
-    color: $scorpion;
+    border-color: var(--spindle);
+    background: var(--white);
+    color: var(--scorpion);

    div {
      display: flex;
@ -52,13 +52,13 @@
  }

  .button-group__button--active {
-    border-color: $primary-blue;
-    color: $scorpion;
+    border-color: var(--primary-blue);
+    color: var(--scorpion);

    i {
      &:last-child {
        display: flex;
-        color: $primary-blue;
+        color: var(--primary-blue);
        margin-top: 8px;
      }
    }
@ -115,7 +115,7 @@
  .button-group__button,
  .button-group__button--active {
    background: white;
-    color: $scorpion;
+    color: var(--scorpion);
    padding: 4px;

    div {
@ -133,13 +133,13 @@
  }

  .button-group__button--active {
-    color: $white;
-    background: $dodger-blue;
+    color: var(--white);
+    background: var(--dodger-blue);

    i {
      &:last-child {
        display: flex;
-        color: $primary-blue;
+        color: var(--primary-blue);
        margin-top: 10px;
      }
    }
@ -185,7 +185,7 @@

    font-weight: 500;
    margin-top: 4px;
-    color: $black;
+    color: var(--black);
  }

  .button-group__button,
@ -244,7 +244,7 @@

    i {
      display: flex;
-      color: $primary-blue;
+      color: var(--primary-blue);
      font-weight: 900;
    }
  }
--- a/ui/components/app/gas-customization/gas-slider/index.scss
+++ b/ui/components/app/gas-customization/gas-slider/index.scss
@ -16,7 +16,7 @@
    -webkit-appearance: none !important;
    height: 34px;
    width: 34px;
-    background-color: $primary-blue;
+    background-color: var(--primary-blue);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    position: relative;
@ -26,7 +26,7 @@
  &__bar {
    height: 6px;
    width: 322px;
-    background: $alto;
+    background: var(--alto);
    display: flex;
    justify-content: space-between;
    position: absolute;
@ -41,7 +41,7 @@
    margin-left: 102px;
    width: 322px;
    z-index: 1;
-    background-color: $blizzard-blue;
+    background-color: var(--blizzard-blue);
  }

  &__labels {
@ -50,6 +50,6 @@
    display: flex;
    justify-content: space-between;
    margin-top: -6px;
-    color: $mid-gray;
+    color: var(--mid-gray);
  }
 }
--- a/ui/components/app/gas-details-item/gas-details-item-title/index.scss
+++ b/ui/components/app/gas-details-item/gas-details-item-title/index.scss
@ -3,7 +3,7 @@
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
-    color: $Grey-500;
+    color: var(--Grey-500);
    line-height: inherit;
  }
 }
--- a/ui/components/app/gas-details-item/index.scss
+++ b/ui/components/app/gas-details-item/index.scss
@ -1,6 +1,6 @@
 .gas-details-item {
  &__gas-fee-warning {
-    color: $secondary-1;
+    color: var(--secondary-1);
  }

  &__currency-container,
--- a/ui/components/app/gas-timing/index.scss
+++ b/ui/components/app/gas-timing/index.scss
@ -1,21 +1,21 @@
 .typography.gas-timing {
-  color: $ui-4;
+  color: var(--ui-4);

  &--positive {
-    color: $success-3;
+    color: var(--success-3);
  }

  &--warning {
-    color: $alert-3;
+    color: var(--alert-3);
  }

  &--negative {
-    color: $error-1;
+    color: var(--error-1);
    font-weight: bold;
  }

  &--negative-V2 {
-    color: $secondary-1;
+    color: var(--secondary-1);
    font-weight: bold;
  }

@ -24,7 +24,7 @@
    margin-inline-start: 4px;

    path {
-      fill: $error-1;
+      fill: var(--error-1);
    }
  }
 }
--- a/ui/components/app/home-notification/index.scss
+++ b/ui/components/app/home-notification/index.scss
@ -25,13 +25,13 @@
  &__text {
    @include H7;

-    color: $white;
+    color: var(--white);
  }

  &__text-link {
    @include H7;

-    color: $primary-blue;
+    color: var(--primary-blue);
    cursor: pointer;
  }

@ -59,7 +59,7 @@
  & &__checkbox-label {
    @include H7;

-    color: $white;
+    color: var(--white);
    margin-left: 10px;
    margin-top: 1px;
    user-select: none;
@ -71,7 +71,7 @@
  & &__ignore-button {
    border-color: #6a737d;
    box-sizing: border-box;
-    color: $white;
+    color: var(--white);
    background-color: inherit;
    height: 34px;
    width: 155px;
@ -94,7 +94,7 @@
  & &__accept-button {
    border-color: #6a737d;
    box-sizing: border-box;
-    color: $white;
+    color: var(--white);
    background-color: inherit;
    height: 34px;
    width: 155px;
--- a/ui/components/app/info-box/index.scss
+++ b/ui/components/app/info-box/index.scss
@ -1,17 +1,17 @@
 .info-box {
  border-radius: 4px;
-  background-color: $alabaster;
+  background-color: var(--alabaster);
  position: relative;
  padding: 16px;
  display: flex;
  flex-flow: column;
-  color: $mid-gray;
+  color: var(--mid-gray);

  &__close::after {
    content: '\00D7';
    font-size: 29px;
    font-weight: 200;
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    position: absolute;
    right: 12px;
    top: 0;
--- a/ui/components/app/menu-bar/index.scss
+++ b/ui/components/app/menu-bar/index.scss
@ -3,7 +3,7 @@
  grid-template-columns: 30% minmax(30%, 1fr) 30%;
  column-gap: 5px;
  padding: 0 8px;
-  border-bottom: 1px solid $Grey-100;
+  border-bottom: 1px solid var(--Grey-100);
  height: 64px;

  .menu-bar__account-options {
@ -32,6 +32,6 @@
  &__explorer-origin {
    @include H7;

-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }
--- a/ui/components/app/modal/index.scss
+++ b/ui/components/app/modal/index.scss
@ -35,7 +35,7 @@
  &__header-close::after {
    content: '\00D7';
    font-size: 40px;
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    position: absolute;
    top: -5px;
    right: 10px;
--- a/ui/components/app/modals/account-details-modal/index.scss
+++ b/ui/components/app/modals/account-details-modal/index.scss
@ -15,7 +15,7 @@
    width: 100%;
    height: 1px;
    margin: 16px 0 8px 0;
-    background-color: $alto;
+    background-color: var(--alto);
  }

  & .qr-header {
@ -31,7 +31,7 @@
  & .ellip-address-wrapper {
    display: flex;
    justify-content: center;
-    border: 1px solid $alto;
+    border: 1px solid var(--alto);
    padding: 5px 10px;
    margin-top: 7px;
    width: 286px;
--- a/ui/components/app/modals/account-modal-container/index.scss
+++ b/ui/components/app/modals/account-modal-container/index.scss
@ -7,12 +7,12 @@
    align-items: center;
    position: relative;
    padding: 5px 0 31px 0;
-    border: 1px solid $silver;
+    border: 1px solid var(--silver);
    border-radius: 4px;
  }

  &__back {
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    position: absolute;
    top: 13px;
    left: 17px;
@ -31,7 +31,7 @@
    @include H1;

    background-color: transparent;
-    color: $ui-black;
+    color: var(--ui-black);
    position: absolute;
    cursor: pointer;
    top: -10px;
--- a/ui/components/app/modals/add-to-addressbook-modal/index.scss
+++ b/ui/components/app/modals/add-to-addressbook-modal/index.scss
@ -1,7 +1,7 @@
 .add-to-address-book-modal {
  display: flex;
  flex-flow: column nowrap;
-  background-color: $white;
+  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba($black, 0.25);

@ -9,7 +9,7 @@
    @extend %col-nowrap;

    padding: 1.5rem;
-    border-bottom: 1px solid $Grey-100;
+    border-bottom: 1px solid var(--Grey-100);

    &__header {
      @include H3;
@ -17,22 +17,22 @@
  }

  &__input-label {
-    color: $Grey-600;
+    color: var(--Grey-600);
    margin-top: 1.25rem;
  }

  &__input {
    @include H4;

-    background: $white;
-    border: 1px solid $Grey-100;
+    background: var(--white);
+    border: 1px solid var(--Grey-100);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    margin-top: 0.75rem;

    &::placeholder {
-      color: $Grey-300;
+      color: var(--Grey-300);
    }
  }

--- a/ui/components/app/modals/customize-nonce/index.scss
+++ b/ui/components/app/modals/customize-nonce/index.scss
@ -17,7 +17,7 @@
  &__close {
    @include H4;

-    color: $ui-black;
+    color: var(--ui-black);
    background: none;
    flex: 0;
    align-self: flex-start;
--- a/ui/components/app/modals/deposit-ether-modal/index.scss
+++ b/ui/components/app/modals/deposit-ether-modal/index.scss
@ -7,7 +7,7 @@
  &__header {
    width: 100%;
    border-radius: 8px 8px 0 0;
-    background-color: $mid-gray;
+    background-color: var(--mid-gray);
    display: flex;
    position: relative;
    padding: 25px;
@ -17,20 +17,20 @@
    &__title {
      @include H3;

-      color: $white;
+      color: var(--white);
    }

    &__description {
      @include Paragraph;

-      color: $white;
+      color: var(--white);
      margin-top: 10px;
    }

    &__close::after {
      content: '\00D7';
      font-size: 2em;
-      color: $white;
+      color: var(--white);
      position: absolute;
      top: 20.8px;
      right: 28px;
@ -63,7 +63,7 @@
  }

  &__buy-row {
-    border-bottom: 1px solid $alto;
+    border-bottom: 1px solid var(--alto);
    display: flex;
    justify-content: space-between;
    align-items: center;
@ -105,7 +105,7 @@
    }

    &__description {
-      color: $cape-cod;
+      color: var(--cape-cod);
      padding-bottom: 20px;
      align-self: flex-start;

--- a/ui/components/app/modals/edit-approval-permission/index.scss
+++ b/ui/components/app/modals/edit-approval-permission/index.scss
@ -99,7 +99,7 @@
    }

    &__option-label--selected {
-      color: $primary-blue;
+      color: var(--primary-blue);
    }

    &__option-description {
@ -136,7 +136,7 @@
    }

    &__radio-button-outline--selected {
-      background: $primary-blue;
+      background: var(--primary-blue);
    }

    &__radio-button-fill {
@ -150,7 +150,7 @@
    &__radio-button-dot {
      width: 8px;
      height: 8px;
-      background: $primary-blue;
+      background: var(--primary-blue);
      border-radius: 4px;
      position: absolute;
    }
--- a/ui/components/app/modals/export-private-key-modal/index.scss
+++ b/ui/components/app/modals/export-private-key-modal/index.scss
@ -10,7 +10,7 @@
    width: 100%;
    height: 1px;
    margin: 19px 0 8px 0;
-    background-color: $alto;
+    background-color: var(--alto);
  }

  &__account-name {
@ -28,12 +28,12 @@
  &__password--error {
    @include H6;

-    color: $scorpion;
+    color: var(--scorpion);
    margin-bottom: 10px;
  }

  &__password--error {
-    color: $crimson;
+    color: var(--crimson);
    margin-bottom: 0;
  }

@ -46,7 +46,7 @@
  }

  &__password::-webkit-input-placeholder {
-    color: $dusty-gray;
+    color: var(--dusty-gray);
  }

  &__password--warning {
@ -55,7 +55,7 @@
    border-radius: 8px;
    background-color: #fff6f6;
    font-weight: 500;
-    color: $crimson;
+    color: var(--crimson);
    width: 292px;
    padding: 9px 15px;
    margin-top: 18px;
@ -64,14 +64,14 @@
  &__password-display-wrapper {
    height: 80px;
    width: 291px;
-    border: 1px solid $silver;
+    border: 1px solid var(--silver);
    border-radius: 2px;
  }

  &__password-display-textarea {
    @include Paragraph;

-    color: $crimson;
+    color: var(--crimson);
    border: none;
    height: 75px;
    width: 100%;
@ -101,7 +101,7 @@
  & .ellip-address-wrapper {
    display: flex;
    justify-content: center;
-    border: 1px solid $alto;
+    border: 1px solid var(--alto);
    padding: 5px 10px;
    margin-top: 7px;
    width: 286px;
--- a/ui/components/app/modals/hide-token-confirmation-modal/index.scss
+++ b/ui/components/app/modals/hide-token-confirmation-modal/index.scss
@ -1,7 +1,7 @@
 .hide-token-confirmation {
  min-height: 250.72px;
  border-radius: 4px;
-  background-color: $white;
+  background-color: var(--white);
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);

  &__container {
@ -18,7 +18,7 @@
  &__symbol {
    @include Paragraph;

-    color: $tundora;
+    color: var(--tundora);
    text-align: center;
    margin-bottom: 7.5px;
  }
@ -28,7 +28,7 @@

    height: 30px;
    width: 271.28px;
-    color: $tundora;
+    color: var(--tundora);
    text-align: center;
    margin-bottom: 10.5px;
  }
@ -38,7 +38,7 @@

    min-height: 41px;
    width: 318px;
-    color: $scorpion;
+    color: var(--scorpion);
    text-align: center;
  }

--- a/ui/components/app/modals/new-account-modal/index.scss
+++ b/ui/components/app/modals/new-account-modal/index.scss
@ -1,7 +1,7 @@
 .new-account-modal {
  display: flex;
  flex-flow: column nowrap;
-  background-color: $white;
+  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba($black, 0.25);

@ -9,7 +9,7 @@
    @extend %col-nowrap;

    padding: 1.5rem;
-    border-bottom: 1px solid $Grey-100;
+    border-bottom: 1px solid var(--Grey-100);

    &__header {
      @include H4;
@ -29,22 +29,22 @@
  }

  &__input-label {
-    color: $Grey-600;
+    color: var(--Grey-600);
    margin-top: 1.25rem;
  }

  &__input {
    @include H4;

-    background: $white;
-    border: 1px solid $Grey-100;
+    background: var(--white);
+    border: 1px solid var(--Grey-100);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    margin-top: 0.75rem;

    &::placeholder {
-      color: $Grey-300;
+      color: var(--Grey-300);
    }
  }

--- a/ui/components/app/permission-page-container/index.scss
+++ b/ui/components/app/permission-page-container/index.scss
@ -27,7 +27,7 @@
    display: flex;
    flex-direction: column;
    align-items: flex-end;
-    border-bottom: 1px solid $geyser;
+    border-bottom: 1px solid var(--geyser);
    padding: 9px;
  }

@ -49,7 +49,7 @@

    a,
    a:hover {
-      color: $dodger-blue;
+      color: var(--dodger-blue);
    }

    &__requested {
@ -68,7 +68,7 @@
        @include H6;

        margin-left: 16px;
-        color: $Black-100;
+        color: var(--Black-100);
      }
    }
  }
--- a/ui/components/app/permissions-connect-footer/index.scss
+++ b/ui/components/app/permissions-connect-footer/index.scss
@ -12,7 +12,7 @@
    margin-top: 10px;

    &--link {
-      color: $primary-blue;
+      color: var(--primary-blue);
      margin-left: 4px;
      cursor: pointer;
    }
--- a/ui/components/app/permissions-connect-header/index.scss
+++ b/ui/components/app/permissions-connect-header/index.scss
@ -15,7 +15,7 @@
    @include H3;

    text-align: center;
-    color: $Black-100;
+    color: var(--Black-100);
    margin-top: 16px;
    font-weight: bold;
  }
@ -24,7 +24,7 @@
    @include H6;

    text-align: center;
-    color: $Black-100;
+    color: var(--Black-100);
  }

  &__subtitle {
--- a/ui/components/app/permissions-connect-permission-list/index.scss
+++ b/ui/components/app/permissions-connect-permission-list/index.scss
@ -4,18 +4,18 @@

    width: 100%;
    padding-bottom: 16px;
-    border-bottom: 1px solid $Grey-100;
+    border-bottom: 1px solid var(--Grey-100);
    display: flex;
    flex-direction: row;
    align-items: center;
-    color: $Black-100;
+    color: var(--Black-100);

    i {
      display: block;
      padding: 16px;
      min-width: 16px;
      min-height: 16px;
-      color: $Grey-500;
+      color: var(--Grey-500);
      font-size: 1rem;
    }
  }
--- a/ui/components/app/selected-account/index.scss
+++ b/ui/components/app/selected-account/index.scss
@ -14,7 +14,7 @@

    width: 100%;
    font-weight: 500;
-    color: $black;
+    color: var(--black);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
@ -43,7 +43,7 @@
    background-color: unset;

    &:hover {
-      background-color: $Grey-000;
+      background-color: var(--Grey-000);
    }

    &:active {
--- a/ui/components/app/signature-request-original/index.scss
+++ b/ui/components/app/signature-request-original/index.scss
@ -2,7 +2,7 @@
  &__container {
    width: 380px;
    border-radius: 8px;
-    background-color: $white;
+    background-color: var(--white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    display: flex;
    flex-flow: column nowrap;
@ -54,7 +54,7 @@

  &__header-background {
    position: absolute;
-    background-color: $athens-grey;
+    background-color: var(--athens-grey);
    z-index: 2;
    width: 100%;
    height: 100%;
@ -76,7 +76,7 @@
  &__header__tip {
    height: 25px;
    width: 25px;
-    background: $athens-grey;
+    background: var(--athens-grey);
    transform: rotate(45deg);
    position: absolute;
    bottom: -8px;
@ -91,7 +91,7 @@
  }

  &__account {
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    margin-left: 17px;
  }

@ -103,7 +103,7 @@
    @include H7;

    height: 22px;
-    background-color: $white;
+    background-color: var(--white);
    width: 124px;

    .account-list-item {
@ -123,7 +123,7 @@
  }

  &__balance {
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    margin-right: 17px;
    width: 124px;
  }
@ -181,19 +181,19 @@
  }

  &__notice {
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    padding: 0 10px;
  }

  &__warning {
-    color: $crimson;
+    color: var(--crimson);
  }

  &__rows {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
-    border-top: 1px solid $geyser;
+    border-top: 1px solid var(--geyser);
    display: flex;
    flex-flow: column;
  }
@ -208,7 +208,7 @@
    @include H5;

    width: 80px;
-    color: $dusty-gray;
+    color: var(--dusty-gray);
    margin-top: 12px;
    margin-left: 18px;
    width: 100%;
@ -217,7 +217,7 @@
  &__row-value {
    @include H6;

-    color: $scorpion;
+    color: var(--scorpion);
    width: 100%;
    overflow-wrap: break-word;
    border-bottom: 1px solid #d2d8dd;
@ -228,7 +228,7 @@
  &__help-link {
    cursor: pointer;
    text-decoration: underline;
-    color: $primary-blue;
+    color: var(--primary-blue);
    margin-inline-start: 3px;
  }

@ -241,7 +241,7 @@
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
-    border-top: 1px solid $geyser;
+    border-top: 1px solid var(--geyser);
    padding: 1.6rem;

    button {
--- a/ui/components/app/signature-request/signature-request-header/index.scss
+++ b/ui/components/app/signature-request/signature-request-header/index.scss
@ -3,7 +3,7 @@

  display: flex;
  padding: 1rem;
-  border-bottom: 1px solid $geyser;
+  border-bottom: 1px solid var(--geyser);
  justify-content: space-between;

  &--account,
--- a/ui/components/app/step-progress-bar/index.scss
+++ b/ui/components/app/step-progress-bar/index.scss
@ -67,40 +67,40 @@ ul.two-steps {
 }

 .progressbar li.active {
-  color: $primary-blue;
+  color: var(--primary-blue);

  [dir='rtl'] & {
-    color: $primary-blue;
+    color: var(--primary-blue);
  }
 }

 .progressbar li.active::before {
-  border-color: $primary-blue;
+  border-color: var(--primary-blue);
  z-index: 1;

  [dir='rtl'] & {
-    border-color: $primary-blue;
+    border-color: var(--primary-blue);
    z-index: 1;
  }
 }

 .progressbar li.active + li::after {
-  background-color: $primary-blue;
+  background-color: var(--primary-blue);
  z-index: -1;

  [dir='rtl'] & {
-    background-color: $primary-blue;
+    background-color: var(--primary-blue);
    z-index: -1;
  }
 }

 .progressbar li.complete::before {
-  background-color: $primary-blue;
-  color: $ui-white;
+  background-color: var(--primary-blue);
+  color: var(--ui-white);

  [dir='rtl'] & {
-    background-color: $primary-blue;
-    color: $ui-white;
+    background-color: var(--primary-blue);
+    color: var(--ui-white);
  }
 }

--- a/ui/components/app/tab-bar/index.scss
+++ b/ui/components/app/tab-bar/index.scss
@ -33,7 +33,7 @@
      @include H4;

      padding: 24px;
-      border-bottom: 1px solid $alto;
+      border-bottom: 1px solid var(--alto);
      opacity: 1;
    }

--- a/ui/components/app/token-cell/token-cell.scss
+++ b/ui/components/app/token-cell/token-cell.scss
@ -1,5 +1,5 @@
 .token-cell {
  &--outdated .list-item__heading {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }
--- a/ui/components/app/transaction-activity-log/index.scss
+++ b/ui/components/app/transaction-activity-log/index.scss
@ -56,11 +56,11 @@
  &__activity-text {
    @include H7;

-    color: $dusty-gray;
+    color: var(--dusty-gray);
    cursor: pointer;

    &:hover {
-      color: $black;
+      color: var(--black);
    }
  }

@ -77,7 +77,7 @@
    @include H7;

    cursor: pointer;
-    color: $primary-blue;
+    color: var(--primary-blue);
  }

  b {
--- a/ui/components/app/transaction-breakdown/index.scss
+++ b/ui/components/app/transaction-breakdown/index.scss
@ -5,7 +5,7 @@
    padding-bottom: 4px;
    padding-top: 8px;
    font-size: 14px;
-    color: $Black-100;
+    color: var(--Black-100);
    font-weight: bold;
    text-transform: capitalize;
  }
@ -23,12 +23,12 @@

    &--eth-total {
      font-weight: bold;
-      color: $Black-100;
+      color: var(--Black-100);
    }

    &--amount {
      font-weight: bold;
-      color: $Black-100;
+      color: var(--Black-100);
    }
  }
 }
--- a/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
@ -1,7 +1,7 @@
 .transaction-breakdown-row {
  @include H7;

-  color: $Grey-500;
+  color: var(--Grey-500);
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
--- a/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
+++ b/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
@ -8,7 +8,7 @@
  }

  &__info {
-    color: $ui-black;
+    color: var(--ui-black);
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
--- a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
+++ b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
@ -12,7 +12,7 @@
    background-color: transparent;

    &:hover {
-      background-color: $Grey-000;
+      background-color: var(--Grey-000);
    }

    &:active {
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@ -1,7 +1,7 @@
 .transaction-detail-item {
-  color: $ui-4;
+  color: var(--ui-4);
  padding: 20px 0;
-  border-bottom: 1px solid $ui-3;
+  border-bottom: 1px solid var(--ui-3);

  &__row {
    display: flex;
@ -34,7 +34,7 @@
    margin-inline-start: 4px;

    path {
-      fill: $ui-3;
+      fill: var(--ui-3);
    }
  }

--- a/ui/components/app/transaction-detail/index.scss
+++ b/ui/components/app/transaction-detail/index.scss
@ -8,7 +8,7 @@
    button {
      @include H7;

-      color: $primary-1;
+      color: var(--primary-1);
      background: transparent;
      border: 0;
      padding-inline-end: 0;
--- a/ui/components/app/transaction-icon/transaction-icon.scss
+++ b/ui/components/app/transaction-icon/transaction-icon.scss
@ -3,6 +3,6 @@
    height: 28px;
    width: 28px;
    border-radius: 14px;
-    background: $Grey-100;
+    background: var(--Grey-100);
  }
 }
--- a/ui/components/app/transaction-list-item-details/index.scss
+++ b/ui/components/app/transaction-list-item-details/index.scss
@ -16,7 +16,7 @@
  &__sender-to-recipient-header {
    display: flex;
    font-size: 14px;
-    color: $Black-100;
+    color: var(--Black-100);
    font-weight: bold;
    padding-bottom: 7px;

@ -34,7 +34,7 @@

    & > div:first-child {
      font-size: 14px;
-      color: $Black-100;
+      color: var(--Black-100);
      font-weight: bold;
    }

--- a/ui/components/app/transaction-list-item/index.scss
+++ b/ui/components/app/transaction-list-item/index.scss
@ -1,6 +1,6 @@
 .transaction-list-item {
  &__primary-currency {
-    color: $Black-100;
+    color: var(--Black-100);
    overflow: hidden;
    text-overflow: ellipsis;
  }
@ -9,15 +9,15 @@
    @include H7;

    margin-top: 4px;
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  & &--unconfirmed {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  &--unconfirmed &__primary-currency {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  &__pending-actions {
--- a/ui/components/app/transaction-list/index.scss
+++ b/ui/components/app/transaction-list/index.scss
@ -13,8 +13,8 @@
    @include H6;

    flex: 0 0 auto;
-    color: $Grey-400;
-    border-bottom: 1px solid $Grey-100;
+    color: var(--Grey-400);
+    border-bottom: 1px solid var(--Grey-100);
    padding: 8px 0 8px 20px;

    @media screen and (max-width: $break-small) {
@ -41,7 +41,7 @@
    grid-row-start: 2;
    display: flex;
    justify-content: center;
-    color: $silver;
+    color: var(--silver);
  }

  &__view-more {
--- a/ui/components/app/transaction-status/index.scss
+++ b/ui/components/app/transaction-status/index.scss
@ -2,34 +2,34 @@
  display: inline;

  &--confirmed {
-    color: $success-3;
+    color: var(--success-3);
  }

  &--unapproved {
-    color: $Orange-500;
+    color: var(--Orange-500);
  }

  &--failed {
-    color: $Red-500;
+    color: var(--Red-500);
  }

  &--cancelled {
-    color: $Red-500;
+    color: var(--Red-500);
  }

  &--dropped {
-    color: $Red-500;
+    color: var(--Red-500);
  }

  &--rejected {
-    color: $Red-500;
+    color: var(--Red-500);
  }

  &--pending {
-    color: $Orange-500;
+    color: var(--Orange-500);
  }

  &--queued {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }
--- a/ui/components/app/wallet-overview/index.scss
+++ b/ui/components/app/wallet-overview/index.scss
@ -56,7 +56,7 @@
  &__primary-balance {
    @include H2;

-    color: $black;
+    color: var(--black);
    width: 100%;
    justify-content: center;
  }
@ -67,7 +67,7 @@

  &__cached-balance,
  &__cached-star {
-    color: $web-orange;
+    color: var(--web-orange);
  }

  &__cached-secondary-balance {
@ -79,7 +79,7 @@
  &__secondary-balance {
    @include Paragraph;

-    color: $Grey-400;
+    color: var(--Grey-400);
  }

  &__button {
@ -117,7 +117,7 @@
  &__primary-balance {
    @include H2;

-    color: $black;
+    color: var(--black);
    width: 100%;
    justify-content: center;
  }
@ -125,7 +125,7 @@
  &__secondary-balance {
    @include H5;

-    color: $Grey-400;
+    color: var(--Grey-400);
  }

  &__button {
--- a/ui/components/app/whats-new-popup/index.scss
+++ b/ui/components/app/whats-new-popup/index.scss
@ -9,7 +9,7 @@
    display: flex;
    flex-direction: column;
    margin: 0 24px 24px 24px;
-    border-bottom: 1px solid $Grey-100;
+    border-bottom: 1px solid var(--Grey-100);
    position: relative;
  }

@ -41,7 +41,7 @@
  }

  &__notification-date {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }

  &__button {
@ -56,7 +56,7 @@
  &__link {
    @include H6;

-    color: $Blue-500;
+    color: var(--Blue-500);
    cursor: pointer;
  }

--- a/ui/components/ui/account-list/index.scss
+++ b/ui/components/ui/account-list/index.scss
@ -61,7 +61,7 @@
    }

    &:hover {
-      background: $Grey-000;
+      background: var(--Grey-000);
      cursor: pointer;
    }

@ -75,7 +75,7 @@
    &__label {
      @include H6;

-      color: $Black-100;
+      color: var(--Black-100);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
@ -84,7 +84,7 @@
    &__balance {
      @include H7;

-      color: $Grey-500;
+      color: var(--Grey-500);
    }

    &__last-connected {
@ -93,7 +93,7 @@
      display: flex;
      flex-direction: column;
      align-items: flex-end;
-      color: $primary-blue;
+      color: var(--primary-blue);
    }
  }

@ -113,14 +113,14 @@
  }

  .fa-info-circle {
-    color: $Grey-200;
+    color: var(--Grey-200);
    cursor: pointer;
    margin-inline-start: 8px;
    font-size: 0.9rem;
  }

  .fa-info-circle:hover {
-    color: $Grey-300;
+    color: var(--Grey-300);
  }

  &__text,
@ -130,11 +130,11 @@
  }

  &__text-blue {
-    color: $primary-blue;
+    color: var(--primary-blue);
    cursor: pointer;
  }

  &__text-grey {
-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }
--- a/ui/components/ui/actionable-message/index.scss
+++ b/ui/components/ui/actionable-message/index.scss
@ -1,6 +1,6 @@
 .actionable-message {
-  background: $Blue-000;
-  border: 1px solid $Blue-200;
+  background: var(--Blue-000);
+  border: 1px solid var(--Blue-200);
  border-radius: 8px;
  padding: 16px;
  margin-top: 18px;
@ -31,7 +31,7 @@
  @include H7;

  &__message {
-    color: $Blue-600;
+    color: var(--Blue-600);
    text-align: center;
  }

@ -41,7 +41,7 @@
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
-    color: $Blue-600;
+    color: var(--Blue-600);

    &--single {
      width: 100%;
@ -56,13 +56,13 @@
    }

    &-danger {
-      background: $Red-500;
+      background: var(--Red-500);
      color: #fff;
    }
  }

  &__action-v2 {
-    color: $primary-1;
+    color: var(--primary-1);
    background: none;
    border: none;
    font-size: 12px;
@ -78,13 +78,13 @@
  }

  &--warning {
-    background: $Yellow-100;
-    border: 1px solid $Yellow-500;
+    background: var(--Yellow-100);
+    border: 1px solid var(--Yellow-500);
    justify-content: center;

    .actionable-message__message,
    .actionable-message__action {
-      color: $Black-100;
+      color: var(--Black-100);
    }

    .actionable-message__action--secondary {
@ -93,22 +93,22 @@
  }

  &--danger {
-    background: $Red-000;
-    border: 1px solid $Red-300;
+    background: var(--Red-000);
+    border: 1px solid var(--Red-300);
    justify-content: flex-start;

    .actionable-message__message {
-      color: $Black-100;
+      color: var(--Black-100);
      text-align: left;
    }
  }

  &--info {
-    background: $Green-000;
-    border: 1px solid $Green-200;
+    background: var(--Green-000);
+    border: 1px solid var(--Green-200);

    .actionable-message__message {
-      color: $Black-100;
+      color: var(--Black-100);
    }
  }

@ -149,6 +149,6 @@

 .actionable-message--warning.actionable-message--with-right-button {
  .actionable-message__action {
-    background: $Yellow-500;
+    background: var(--Yellow-500);
  }
 }
--- a/ui/components/ui/alert-circle-icon/index.scss
+++ b/ui/components/ui/alert-circle-icon/index.scss
@ -1,13 +1,13 @@
 .alert-circle-icon {
  &--danger {
-    border-color: $accent-red;
-    color: $accent-red;
-    background: $Red-000;
+    border-color: var(--accent-red);
+    color: var(--accent-red);
+    background: var(--Red-000);
  }

  &--warning {
-    border-color: $accent-yellow;
-    color: $accent-yellow;
-    background: $Yellow-000;
+    border-color: var(--accent-yellow);
+    color: var(--accent-yellow);
+    background: var(--Yellow-000);
  }
 }
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@ -48,7 +48,7 @@ $attributesToApplyExtraProperties: margin;

  @each $variant, $color in design-system.$color-map {
    &--border-color-#{$variant} {
-      border-color: $color;
+      border-color: var($color);
    }
  }

@ -166,7 +166,7 @@ $attributesToApplyExtraProperties: margin;
  // background
  @each $variant, $color in design-system.$color-map {
    &--background-color-#{$variant} {
-      background-color: $color;
+      background-color: var($color);
    }
  }
 }
--- a/ui/components/ui/button-group/index.scss
+++ b/ui/components/ui/button-group/index.scss
@ -5,9 +5,9 @@

  &__button {
    font-size: $font-size-h5;
-    color: $tundora;
+    color: var(--tundora);
    border-style: solid;
-    border-color: $alto;
+    border-color: var(--alto);
    border-width: 1px 1px 1px;
    border-left: 0;
    flex: 1;
@ -17,7 +17,7 @@
    text-overflow: ellipsis;

    &:first-child {
-      border-left: 1px solid $alto;
+      border-left: 1px solid var(--alto);
      border-radius: 4px 0 0 4px;
    }

@ -26,8 +26,8 @@
    }

    &--active {
-      background-color: $dodger-blue;
-      color: $white;
+      background-color: var(--dodger-blue);
+      color: var(--white);
    }

    &:disabled {
@ -40,9 +40,9 @@
  .radio-button {
    @include H7;

-    color: $Grey-700;
-    border: 1px solid $Grey-100;
-    background: $white;
+    color: var(--Grey-700);
+    border: 1px solid var(--Grey-100);
+    background: var(--white);
    border-radius: 25px;
    height: 25px;
    margin-right: 8px;
@ -50,15 +50,15 @@
    padding: 0;

    &--active {
-      background: $Blue-500;
+      background: var(--Blue-500);
      color: white;
      border: none;
    }

    &--danger {
-      border: 1px solid $Red-500;
-      color: $Red-500;
-      background: $white;
+      border: 1px solid var(--Red-500);
+      color: var(--Red-500);
+      background: var(--white);
    }

    &:hover {
@ -67,8 +67,8 @@
  }

  .radio-button--active.radio-button--danger {
-    border: 1px solid $Red-500;
+    border: 1px solid var(--Red-500);
    color: white;
-    background: $Red-500;
+    background: var(--Red-500);
  }
 }
--- a/ui/components/ui/button/buttons.scss
+++ b/ui/components/ui/button/buttons.scss
@ -2,15 +2,15 @@
  Buttons
 */

-$hover-secondary: #b0d7f2;
-$hover-default: #b3b3b3;
-$hover-confirm: #0372c3;
-$hover-red: #feb6bf;
-$hover-red-primary: #c72837;
-$hover-orange: #ffd3b5;
-$warning-light-orange: #f8b588;
-
 .button {
+  --hover-secondary: #b0d7f2;
+  --hover-default: #b3b3b3;
+  --hover-confirm: #0372c3;
+  --hover-red: #feb6bf;
+  --hover-red-primary: #c72837;
+  --hover-orange: #ffd3b5;
+  --warning-light-orange: #f8b588;
+
  @include H6;

  font-weight: 500;
@ -38,146 +38,146 @@ $warning-light-orange: #f8b588;
 }

 .btn-secondary {
-  color: $Blue-500;
-  border: 1px solid $hover-secondary;
-  background-color: $white;
+  color: var(--Blue-500);
+  border: 1px solid var(--hover-secondary);
+  background-color: var(--white);

  &:hover {
-    border-color: $Blue-500;
+    border-color: var(--Blue-500);
  }

  &:active {
-    background: $Blue-000;
-    border-color: $Blue-500;
+    background: var(--Blue-000);
+    border-color: var(--Blue-500);
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
-    color: $hover-secondary;
+    color: var(--hover-secondary);
  }
 }

 .btn-warning {
-  color: $Orange-500;
-  border: 1px solid $hover-orange;
-  background-color: $white;
+  color: var(--Orange-500);
+  border: 1px solid var(--hover-orange);
+  background-color: var(--white);

  &:hover {
-    border-color: $Orange-500;
+    border-color: var(--Orange-500);
  }

  &:active {
-    background: $Orange-000;
-    border-color: $Orange-500;
+    background: var(--Orange-000);
+    border-color: var(--Orange-500);
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
-    color: $hover-orange;
+    color: var(--hover-orange);
  }
 }

 .btn-danger {
-  color: $Red-500;
-  border: 1px solid $hover-red;
-  background-color: $white;
+  color: var(--Red-500);
+  border: 1px solid var(--hover-red);
+  background-color: var(--white);

  &:hover {
-    border-color: $Red-500;
+    border-color: var(--Red-500);
  }

  &:active {
-    background: $Red-000;
-    border-color: $Red-500;
+    background: var(--Red-000);
+    border-color: var(--Red-500);
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
-    color: $hover-red;
+    color: var(--hover-red);
  }
 }

 .btn-danger-primary {
-  color: $white;
-  border: 1px solid $Red-500;
-  background-color: $Red-500;
+  color: var(--white);
+  border: 1px solid var(--Red-500);
+  background-color: var(--Red-500);

  &:hover {
-    border-color: $hover-red-primary;
-    background-color: $hover-red-primary;
+    border-color: var(--hover-red-primary);
+    background-color: var(--hover-red-primary);
  }

  &:active {
-    background: $Red-600;
-    border-color: $Red-600;
+    background: var(--Red-600);
+    border-color: var(--Red-600);
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
-    border-color: $hover-red;
-    background-color: $hover-red;
+    border-color: var(--hover-red);
+    background-color: var(--hover-red);
  }
 }

 .btn-default {
-  color: $Grey-500;
-  border: 1px solid $hover-default;
+  color: var(--Grey-500);
+  border: 1px solid var(--hover-default);

  &:hover {
-    border-color: $Grey-500;
+    border-color: var(--Grey-500);
  }

  &:active {
    background: #fbfbfc;
-    border-color: $Grey-500;
+    border-color: var(--Grey-500);
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
-    color: $hover-default;
+    color: var(--hover-default);
  }
 }

 .btn-primary {
-  color: $white;
-  border: 1px solid $Blue-500;
-  background-color: $Blue-500;
+  color: var(--white);
+  border: 1px solid var(--Blue-500);
+  background-color: var(--Blue-500);

  &:hover {
-    border-color: $hover-confirm;
-    background-color: $hover-confirm;
+    border-color: var(--hover-confirm);
+    background-color: var(--hover-confirm);
  }

  &:active {
-    background: $Blue-600;
-    border-color: $Blue-600;
+    background: var(--Blue-600);
+    border-color: var(--Blue-600);
  }

  &--disabled,
  &[disabled] {
-    border-color: $hover-secondary;
-    background-color: $hover-secondary;
+    border-color: var(--hover-secondary);
+    background-color: var(--hover-secondary);
  }
 }

 .btn-link {
  @include H4;

-  color: $Blue-500;
+  color: var(--Blue-500);
  cursor: pointer;
  background-color: transparent;

  &:hover {
-    color: $Blue-400;
+    color: var(--Blue-400);
  }

  &:active {
-    color: $Blue-600;
+    color: var(--Blue-600);
  }

  &--disabled,
@ -185,7 +185,7 @@ $warning-light-orange: #f8b588;
    cursor: auto;
    opacity: 1;
    pointer-events: none;
-    color: $hover-secondary;
+    color: var(--hover-secondary);
  }
 }

@ -198,8 +198,8 @@ $warning-light-orange: #f8b588;
 */

 .btn-raised {
-  color: $primary-blue;
-  background-color: $white;
+  color: var(--primary-blue);
+  background-color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 6px;
  height: initial;
@ -214,7 +214,7 @@ $warning-light-orange: #f8b588;
  height: 54px;
  width: 198px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
-  color: $white;
+  color: var(--white);
  font-weight: 500;
  transition: 200ms ease-in-out;
  background-color: rgba(247, 134, 28, 0.9);
@ -237,84 +237,84 @@ input[type="submit"][disabled] {
  }

  &.btn-secondary {
-    border: 1px solid $Blue-500;
+    border: 1px solid var(--Blue-500);

    &--disabled,
    &[disabled] {
-      border-color: $hover-secondary;
-      color: $hover-secondary;
+      border-color: var(--hover-secondary);
+      color: var(--hover-secondary);
    }

    &:active {
-      border-color: $Blue-600;
+      border-color: var(--Blue-600);
    }
  }

  &.btn-default {
-    border: 1px solid $Grey-500;
+    border: 1px solid var(--Grey-500);

    &--disabled,
    &[disabled] {
-      border-color: $Grey-100;
-      color: $hover-default;
+      border-color: var(--Grey-100);
+      color: var(--hover-default);
    }

    &:active {
-      border-color: $Grey-600;
+      border-color: var(--Grey-600);
    }
  }

  &.btn-danger {
-    border: 1px solid $Red-500;
+    border: 1px solid var(--Red-500);

    &--disabled,
    &[disabled] {
-      border-color: $Red-100;
-      color: $Red-300;
+      border-color: var(--Red-100);
+      color: var(--Red-300);
    }

    &:active {
-      border-color: $Red-600;
+      border-color: var(--Red-600);
    }
  }

  &.btn-warning {
-    border: 1px solid $Orange-500;
+    border: 1px solid var(--Orange-500);

    &--disabled,
    &[disabled] {
-      border-color: $warning-light-orange;
-      color: $warning-light-orange;
+      border-color: var(--warning-light-orange);
+      color: var(--warning-light-orange);
    }

    &:active {
-      border-color: $Orange-600;
+      border-color: var(--Orange-600);
    }
  }

  &.btn-primary {
-    background-color: $Blue-500;
+    background-color: var(--Blue-500);

    &--disabled,
    &[disabled] {
-      background-color: $hover-secondary;
+      background-color: var(--hover-secondary);
    }

    &:active {
-      background-color: $Blue-600;
+      background-color: var(--Blue-600);
    }
  }

  &.btn-danger-primary {
-    background-color: $Red-500;
+    background-color: var(--Red-500);

    &--disabled,
    &[disabled] {
-      background-color: $Red-300;
+      background-color: var(--Red-300);
    }

    &:active {
-      background-color: $Red-600;
+      background-color: var(--Red-600);
    }
  }
 }
--- a/ui/components/ui/callout/callout.scss
+++ b/ui/components/ui/callout/callout.scss
@ -10,7 +10,7 @@
  transition: opacity 0.75s 0s;

  a {
-    color: $primary-1;
+    color: var(--primary-1);
  }

  &--dismissible {
@ -37,19 +37,19 @@
  }

  &--warning {
-    border-left: 2px solid $alert-1;
+    border-left: 2px solid var(--alert-1);
  }

  &--danger {
-    border-left: 2px solid $error-1;
+    border-left: 2px solid var(--error-1);
  }

  &--info {
-    border-left: 2px solid $primary-1;
+    border-left: 2px solid var(--primary-1);
  }

  &--success {
-    border-left: 2px solid $success-1;
+    border-left: 2px solid var(--success-1);
  }

  & .info-icon {
--- a/ui/components/ui/check-box/index.scss
+++ b/ui/components/ui/check-box/index.scss
@ -1,8 +1,8 @@
 .check-box {
  -webkit-appearance: none;
  appearance: none;
-  background: $white;
-  color: $Grey-100;
+  background: var(--white);
+  color: var(--Grey-100);
  width: 18px;
  height: 18px;
  font-size: 21px;
@ -12,12 +12,12 @@

  &__checked,
  &__indeterminate {
-    color: $primary-blue;
-    border-color: $primary-blue;
+    color: var(--primary-blue);
+    border-color: var(--primary-blue);
  }

  &:disabled {
-    color: $Grey-100;
+    color: var(--Grey-100);
    cursor: not-allowed;
  }
 }
--- a/ui/components/ui/chip/chip.scss
+++ b/ui/components/ui/chip/chip.scss
@ -4,7 +4,7 @@
  $self: &;

  border-radius: 100px;
-  border: 1px solid design-system.$ui-1;
+  border: 1px solid var(--ui-1);
  padding: 8px 16px;
  margin: 0 4px;
  display: flex;
@ -18,10 +18,10 @@

  @each $variant, $color in design-system.$color-map {
    &--border-color-#{$variant} {
-      border-color: $color;
+      border-color: var($color);
    }
    &--background-color-#{$variant} {
-      background-color: $color;
+      background-color: var($color);
    }
  }

--- a/ui/components/ui/circle-icon/index.scss
+++ b/ui/components/ui/circle-icon/index.scss
@ -13,8 +13,8 @@

  &__circle {
    border: 1px solid;
-    border-color: $black;
-    background: $white;
+    border-color: var(--black);
+    background: var(--white);
  }

  &__icon {
--- a/ui/components/ui/color-indicator/color-indicator.scss
+++ b/ui/components/ui/color-indicator/color-indicator.scss
@ -41,15 +41,15 @@ $sizes: (

  @each $variant, $color in design-system.$color-map {
    &--color-#{$variant} {
-      border-color: $color;
+      border-color: var($color);
      &#{$self}--partial-filled #{$self}__inner-circle {
-        background-color: $color;
+        background-color: var($color);
      }
      &#{$self}--filled {
-        background-color: $color;
+        background-color: var($color);
      }
      & #{$self}__icon {
-        color: #{utilities.choose-contrast-color($color)};
+        color: var(--black);
      }
    }
  }
@ -57,7 +57,7 @@ $sizes: (
  // separate iterator to ensure borderColor takes precedence
  @each $variant, $color in design-system.$color-map {
    &--border-color-#{$variant} {
-      border-color: $color;
+      border-color: var($color);
    }
  }
 }
--- a/ui/components/ui/confusable/index.scss
+++ b/ui/components/ui/confusable/index.scss
@ -1,5 +1,5 @@
 .confusable {
  &__point {
-    color: $Red-500;
+    color: var(--Red-500);
  }
 }
--- a/ui/components/ui/definition-list/definition-list.scss
+++ b/ui/components/ui/definition-list/definition-list.scss
@ -6,7 +6,7 @@
    align-items: center;

    & i {
-      color: $ui-3;
+      color: var(--ui-3);
      margin-left: 6px;
      font-size: $font-size-h8;
    }
--- a/ui/components/ui/dialog/dialog.scss
+++ b/ui/components/ui/dialog/dialog.scss
@ -2,25 +2,25 @@
  @include H7;

  padding: 1rem;
-  border: 1px solid $black;
+  border: 1px solid var(--black);
  box-sizing: border-box;
  border-radius: 8px;

  &--message {
-    border-color: $Blue-200;
-    color: $Blue-600;
-    background-color: $Blue-000;
+    border-color: var(--Blue-200);
+    color: var(--Blue-600);
+    background-color: var(--Blue-000);
  }

  &--error {
-    border-color: $Red-300;
-    color: $Red-600;
-    background-color: $Red-000;
+    border-color: var(--Red-300);
+    color: var(--Red-600);
+    background-color: var(--Red-000);
  }

  &--warning {
-    border-color: $Orange-300;
-    color: $Orange-600;
-    background-color: $Orange-000;
+    border-color: var(--Orange-300);
+    color: var(--Orange-600);
+    background-color: var(--Orange-000);
  }
 }
--- a/ui/components/ui/editable-label/index.scss
+++ b/ui/components/ui/editable-label/index.scss
@ -16,10 +16,10 @@

    width: 250px;
    text-align: center;
-    border: 1px solid $alto;
+    border: 1px solid var(--alto);

    &--error {
-      border: 1px solid $monzo;
+      border: 1px solid var(--monzo);
    }
  }

@ -32,14 +32,14 @@

  &__icon {
    cursor: pointer;
-    color: $dusty-gray;
+    color: var(--dusty-gray);
  }

  &__error {
    @include H7;

    left: 8px;
-    color: $red;
+    color: var(--red);
  }

  &__error-amount {
--- a/ui/components/ui/error-message/index.scss
+++ b/ui/components/ui/error-message/index.scss
@ -2,9 +2,9 @@
  @include H7;

  min-height: 32px;
-  border: 1px solid $Red-300;
-  color: $ui-black;
-  background: $error-2;
+  border: 1px solid var(--Red-300);
+  color: var(--ui-black);
+  background: var(--error-2);
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
--- a/ui/components/ui/export-text-container/index.scss
+++ b/ui/components/ui/export-text-container/index.scss
@ -3,7 +3,7 @@
  justify-content: center;
  flex-direction: column;
  align-items: center;
-  border: 1px solid $alto;
+  border: 1px solid var(--alto);
  border-radius: 4px;
  font-weight: 400;

@ -13,7 +13,7 @@
    justify-content: center;
    padding: 20px;
    border-radius: 4px;
-    background: $alabaster;
+    background: var(--alabaster);
  }

  &__text {
@ -21,14 +21,14 @@

    resize: none;
    border: none;
-    background: $alabaster;
+    background: var(--alabaster);
    text-align: center;
  }

  &__buttons-container {
    display: flex;
    flex-direction: row;
-    border-top: 1px solid $alto;
+    border-top: 1px solid var(--alto);
    width: 100%;
  }

@ -41,10 +41,10 @@
    justify-content: center;
    align-items: center;
    cursor: pointer;
-    color: $primary-blue;
+    color: var(--primary-blue);

    &--copy {
-      border-right: 1px solid $alto;
+      border-right: 1px solid var(--alto);
    }
  }

--- a/ui/components/ui/form-field/index.scss
+++ b/ui/components/ui/form-field/index.scss
@ -18,7 +18,7 @@

  &__error,
  &__error h6 {
-    color: $error-1 !important;
+    color: var(--error-1) !important;
    padding-top: 6px;
  }

@ -34,16 +34,16 @@

  &__input {
    width: 100%;
-    border: solid 1px $ui-3;
+    border: solid 1px var(--ui-3);
    padding: 10px;
    border-radius: 6px;

    &:focus {
-      border: solid 2px $primary-1;
+      border: solid 2px var(--primary-1);
    }

    &--error {
-      border-color: $error-1;
+      border-color: var(--error-1);
    }
  }
 }
--- a/ui/components/ui/icon-border/icon-border.scss
+++ b/ui/components/ui/icon-border/icon-border.scss
@ -1,7 +1,7 @@
 .icon-border {
  border-radius: 50%;
-  border: 1px solid $ui-1;
-  background: $ui-1;
+  border: 1px solid var(--ui-1);
+  background: var(--ui-1);
  display: flex;
  justify-content: center;
  align-items: center;
--- a/ui/components/ui/icon-button/icon-button.scss
+++ b/ui/components/ui/icon-button/icon-button.scss
@ -9,7 +9,7 @@

  font-size: 13px;
  cursor: pointer;
-  color: $Blue-500;
+  color: var(--Blue-500);

  &__circle {
    display: flex;
--- a/ui/components/ui/icon-with-fallback/icon-with-fallback.scss
+++ b/ui/components/ui/icon-with-fallback/icon-with-fallback.scss
@ -1,5 +1,5 @@
 .icon-with-fallback {
  &__fallback {
-    color: $ui-black;
+    color: var(--ui-black);
  }
 }
--- a/ui/components/ui/icon-with-label/index.scss
+++ b/ui/components/ui/icon-with-label/index.scss
@ -6,6 +6,6 @@
    @include H8;

    margin-left: 4px;
-    color: $Grey-500;
+    color: var(--Grey-500);
  }
 }
--- a/Show More
+++ b/Show More