From 10dc686505746389f72dcc11fd45fd89df74cd6e Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 6 Jan 2022 11:35:49 -0600 Subject: [PATCH] Dark Mode Part 1: Switch to Using CSS Variables (#13147) --- ui/components/app/account-menu/index.scss | 18 +- .../app/advanced-gas-controls/index.scss | 6 +- .../advanced-gas-fee-input-subtext/index.scss | 2 +- .../advanced-gas-fee-inputs/index.scss | 2 +- .../app/advanced-gas-fee-popover/index.scss | 4 +- .../invalid-custom-network-alert.scss | 4 +- .../unconnected-account-alert.scss | 6 +- ui/components/app/app-header/index.scss | 4 +- .../app/asset-list-item/asset-list-item.scss | 2 +- .../app/cancel-speedup-popover/index.scss | 2 +- .../app/collectible-details/index.scss | 4 +- .../app/collectible-options/index.scss | 2 +- .../collectibles-detection-notice/index.scss | 2 +- .../app/collectibles-items/index.scss | 4 +- .../confirm-detail-row/index.scss | 8 +- .../confirm-page-container-summary/index.scss | 10 +- .../confirm-page-container-warning/index.scss | 2 +- .../confirm-page-container-content/index.scss | 6 +- .../confirm-page-container-header/index.scss | 2 +- .../index.scss | 4 +- .../app/connected-accounts-list/index.scss | 12 +- .../connected-accounts-permissions/index.scss | 2 +- .../app/connected-status-indicator/index.scss | 4 +- .../app/edit-gas-display-education/index.scss | 2 +- ui/components/app/edit-gas-display/index.scss | 8 +- .../app/edit-gas-fee-button/index.scss | 8 +- .../edit-gas-item/index.scss | 12 +- .../edit-gas-tooltip/index.scss | 2 +- .../app/edit-gas-fee-popover/index.scss | 8 +- .../network-statistics/index.scss | 10 +- .../app/flask/experimental-area/index.scss | 6 +- .../flask/snaps-authorship-pill/index.scss | 4 +- .../advanced-gas-inputs/index.scss | 20 +- .../advanced-tab-content/index.scss | 2 +- .../basic-tab-content/index.scss | 4 +- .../gas-modal-page-container/index.scss | 12 +- .../gas-price-button-group/index.scss | 26 +- .../gas-customization/gas-slider/index.scss | 8 +- .../gas-details-item-title/index.scss | 2 +- ui/components/app/gas-details-item/index.scss | 2 +- ui/components/app/gas-timing/index.scss | 12 +- .../app/home-notification/index.scss | 10 +- ui/components/app/info-box/index.scss | 6 +- ui/components/app/menu-bar/index.scss | 4 +- ui/components/app/modal/index.scss | 2 +- .../modals/account-details-modal/index.scss | 4 +- .../modals/account-modal-container/index.scss | 6 +- .../add-to-addressbook-modal/index.scss | 12 +- .../app/modals/customize-nonce/index.scss | 2 +- .../app/modals/deposit-ether-modal/index.scss | 12 +- .../edit-approval-permission/index.scss | 6 +- .../export-private-key-modal/index.scss | 16 +- .../hide-token-confirmation-modal/index.scss | 8 +- .../app/modals/new-account-modal/index.scss | 12 +- .../app/permission-page-container/index.scss | 6 +- .../app/permissions-connect-footer/index.scss | 2 +- .../app/permissions-connect-header/index.scss | 4 +- .../index.scss | 6 +- ui/components/app/selected-account/index.scss | 4 +- .../app/signature-request-original/index.scss | 26 +- .../signature-request-header/index.scss | 2 +- .../app/step-progress-bar/index.scss | 20 +- ui/components/app/tab-bar/index.scss | 2 +- ui/components/app/token-cell/token-cell.scss | 2 +- .../app/transaction-activity-log/index.scss | 6 +- .../app/transaction-breakdown/index.scss | 6 +- .../transaction-breakdown-row/index.scss | 2 +- .../components/ui/accreditation/index.scss | 2 +- .../components/ui/copy-raw-data/index.scss | 2 +- .../app/transaction-detail-item/index.scss | 6 +- .../app/transaction-detail/index.scss | 2 +- .../transaction-icon/transaction-icon.scss | 2 +- .../transaction-list-item-details/index.scss | 4 +- .../app/transaction-list-item/index.scss | 8 +- ui/components/app/transaction-list/index.scss | 6 +- .../app/transaction-status/index.scss | 16 +- ui/components/app/wallet-overview/index.scss | 10 +- ui/components/app/whats-new-popup/index.scss | 6 +- ui/components/ui/account-list/index.scss | 16 +- .../ui/actionable-message/index.scss | 32 +- ui/components/ui/alert-circle-icon/index.scss | 12 +- ui/components/ui/box/box.scss | 4 +- ui/components/ui/button-group/index.scss | 28 +- ui/components/ui/button/buttons.scss | 162 +++++----- ui/components/ui/callout/callout.scss | 10 +- ui/components/ui/check-box/index.scss | 10 +- ui/components/ui/chip/chip.scss | 6 +- ui/components/ui/circle-icon/index.scss | 4 +- .../ui/color-indicator/color-indicator.scss | 10 +- ui/components/ui/confusable/index.scss | 2 +- .../ui/definition-list/definition-list.scss | 2 +- ui/components/ui/dialog/dialog.scss | 20 +- ui/components/ui/editable-label/index.scss | 8 +- ui/components/ui/error-message/index.scss | 6 +- .../ui/export-text-container/index.scss | 12 +- ui/components/ui/form-field/index.scss | 8 +- ui/components/ui/icon-border/icon-border.scss | 4 +- ui/components/ui/icon-button/icon-button.scss | 2 +- .../icon-with-fallback.scss | 2 +- ui/components/ui/icon-with-label/index.scss | 2 +- ui/components/ui/icon/index.scss | 8 +- ui/components/ui/identicon/index.scss | 6 +- ui/components/ui/info-tooltip/index.scss | 12 +- ui/components/ui/list-item/index.scss | 12 +- ui/components/ui/menu/menu.scss | 6 +- ui/components/ui/nickname-popover/index.scss | 12 +- .../ui/numeric-input/numeric-input.scss | 4 +- ui/components/ui/page-container/index.scss | 18 +- ui/components/ui/pulse-loader/index.scss | 2 +- ui/components/ui/qr-code/index.scss | 6 +- ui/components/ui/radio-group/index.scss | 12 +- .../ui/sender-to-recipient/index.scss | 12 +- ui/components/ui/slider/index.scss | 2 +- ui/components/ui/snackbar/index.scss | 6 +- ui/components/ui/tabs/index.scss | 4 +- ui/components/ui/tabs/tab/index.scss | 4 +- ui/components/ui/textarea/index.scss | 2 +- ui/components/ui/tooltip/index.scss | 10 +- ui/components/ui/typography/typography.scss | 2 +- ui/components/ui/unit-input/index.scss | 2 +- ui/components/ui/url-icon/index.scss | 2 +- ui/css/base-styles.scss | 14 +- ui/css/design-system/colors.scss | 284 +++++++++--------- ui/css/design-system/deprecated-colors.scss | 92 +++--- ui/css/itcss/components/network.scss | 20 +- ui/css/itcss/components/newui-sections.scss | 4 +- ui/css/itcss/components/send.scss | 146 ++++----- ui/css/itcss/tools/utilities.scss | 2 +- ui/css/utilities/_colors.scss | 75 ----- ui/css/utilities/index.scss | 1 - ui/pages/asset/asset.scss | 4 +- .../confirm-approve-content/index.scss | 12 +- .../confirm-decrypt-message.scss | 14 +- .../confirm-encryption-public-key.scss | 16 +- ui/pages/confirm-import-token/index.scss | 4 +- .../transaction-alerts.scss | 2 +- .../confirmation-footer.scss | 2 +- ui/pages/confirmation/confirmation.scss | 14 +- ui/pages/connected-accounts/index.scss | 2 +- ui/pages/connected-sites/index.scss | 2 +- .../connect-hardware/index.scss | 6 +- .../create-account/import-account/index.scss | 12 +- ui/pages/create-account/index.scss | 24 +- ui/pages/first-time-flow/index.scss | 4 +- .../confirm-seed-phrase/index.scss | 4 +- .../seed-phrase/reveal-seed-phrase/index.scss | 6 +- ui/pages/first-time-flow/welcome/index.scss | 2 +- ui/pages/home/index.scss | 14 +- ui/pages/import-token/index.scss | 4 +- ui/pages/import-token/token-list/index.scss | 4 +- .../token-list-placeholder/index.scss | 2 +- ui/pages/keychains/index.scss | 2 +- .../create-password/index.scss | 4 +- .../onboarding-flow/import-srp/index.scss | 8 +- ui/pages/onboarding-flow/index.scss | 4 +- .../onboarding-flow/metametrics/index.scss | 2 +- .../onboarding-app-header/index.scss | 2 +- .../onboarding-flow/pin-extension/index.scss | 4 +- .../privacy-settings/index.scss | 4 +- .../recovery-phrase/index.scss | 8 +- .../secure-your-wallet/index.scss | 2 +- ui/pages/onboarding-flow/welcome/index.scss | 8 +- .../choose-account/index.scss | 2 +- ui/pages/permissions-connect/index.scss | 4 +- .../permissions-connect/redirect/index.scss | 2 +- .../send-gas-row/send-gas-row.scss | 14 +- ui/pages/send/send.scss | 38 +-- ui/pages/settings/alerts-tab/alerts-tab.scss | 2 +- ui/pages/settings/contact-list-tab/index.scss | 16 +- ui/pages/settings/index.scss | 10 +- ui/pages/settings/info-tab/index.scss | 10 +- ui/pages/settings/networks-tab/index.scss | 4 +- ui/pages/settings/settings-tab/index.scss | 8 +- ui/pages/swaps/awaiting-swap/index.scss | 12 +- ui/pages/swaps/build-quote/index.scss | 16 +- ui/pages/swaps/countdown-timer/index.scss | 2 +- ui/pages/swaps/dropdown-input-pair/index.scss | 4 +- .../swaps/dropdown-search-list/index.scss | 20 +- .../swaps/exchange-rate-display/index.scss | 4 +- ui/pages/swaps/fee-card/index.scss | 22 +- ui/pages/swaps/import-token/index.scss | 8 +- ui/pages/swaps/index.scss | 10 +- .../swaps/loading-swaps-quotes/index.scss | 12 +- ui/pages/swaps/main-quote-summary/index.scss | 8 +- .../swaps/searchable-item-list/index.scss | 28 +- .../swaps/select-quote-popover/index.scss | 38 +-- .../quote-details/index.scss | 14 +- ui/pages/swaps/slippage-buttons/index.scss | 6 +- ui/pages/swaps/swaps-footer/index.scss | 6 +- ui/pages/swaps/view-quote/index.scss | 20 +- ui/pages/unlock-page/index.scss | 10 +- 191 files changed, 1071 insertions(+), 1137 deletions(-) delete mode 100644 ui/css/utilities/_colors.scss diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss index 235ed202f..05d3fd6e5 100644 --- 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 { diff --git a/ui/components/app/advanced-gas-controls/index.scss b/ui/components/app/advanced-gas-controls/index.scss index 1c149a225..42e390f66 100644 --- 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); } } diff --git 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 index 7a1d71717..9047db79b 100644 --- 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 { diff --git 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 index cf8f82cd9..60dda01ed 100644 --- 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; } } diff --git a/ui/components/app/advanced-gas-fee-popover/index.scss b/ui/components/app/advanced-gas-fee-popover/index.scss index 2cc8d679d..a512495e4 100644 --- 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 { diff --git 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 index a1a170466..0e0060c39 100644 --- 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; } diff --git a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss b/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss index cedd14617..572599499 100644 --- 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 { diff --git a/ui/components/app/app-header/index.scss b/ui/components/app/app-header/index.scss index 78fb809e3..1cdd03b28 100644 --- 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; } } diff --git a/ui/components/app/asset-list-item/asset-list-item.scss b/ui/components/app/asset-list-item/asset-list-item.scss index 138d0566d..6e8421027 100644 --- 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 { diff --git a/ui/components/app/cancel-speedup-popover/index.scss b/ui/components/app/cancel-speedup-popover/index.scss index f852ddd2f..331e486eb 100644 --- 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%; } } diff --git a/ui/components/app/collectible-details/index.scss b/ui/components/app/collectible-details/index.scss index 53c593b2d..d6991752e 100644 --- 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); } } diff --git a/ui/components/app/collectible-options/index.scss b/ui/components/app/collectible-options/index.scss index e6c58f995..fe91042e2 100644 --- 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; } diff --git a/ui/components/app/collectibles-detection-notice/index.scss b/ui/components/app/collectibles-detection-notice/index.scss index 27a28c46f..cecbce951 100644 --- 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; diff --git a/ui/components/app/collectibles-items/index.scss b/ui/components/app/collectibles-items/index.scss index 3e6f500d3..7e427cf47 100644 --- 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; } diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/index.scss b/ui/components/app/confirm-page-container/confirm-detail-row/index.scss index 5b78bfd39..53e100f5b 100644 --- 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; } diff --git 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 index 618763684..c00a71e62 100644 --- 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); } } diff --git 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 index bbfe812fe..06aa82551 100644 --- 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 { diff --git 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 index 7a0777f98..96da686c9 100644 --- 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; } diff --git 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 index 9268e12a0..0ad152205 100644 --- 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; diff --git 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 index 9db235003..f0f065569 100755 --- 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 { diff --git a/ui/components/app/connected-accounts-list/index.scss b/ui/components/app/connected-accounts-list/index.scss index a650e4e11..2db798c13 100644 --- 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); } } diff --git a/ui/components/app/connected-accounts-permissions/index.scss b/ui/components/app/connected-accounts-permissions/index.scss index 4dcf430ef..98ddd1ec7 100644 --- 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; diff --git a/ui/components/app/connected-status-indicator/index.scss b/ui/components/app/connected-status-indicator/index.scss index 17b5b7d1d..bfd61b1b6 100644 --- 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; } diff --git a/ui/components/app/edit-gas-display-education/index.scss b/ui/components/app/edit-gas-display-education/index.scss index dc8d39fd8..f2d8bf308 100644 --- 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); } } diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss index d109003ec..70e35c6a4 100644 --- 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); } } diff --git a/ui/components/app/edit-gas-fee-button/index.scss b/ui/components/app/edit-gas-fee-button/index.scss index fa5ccd97e..e2787a829 100644 --- 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%; } diff --git 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 index b7aa819c5..79d44ebba 100644 --- 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); } } diff --git 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 index d3d4bc9f0..f8d55c4ec 100644 --- 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; diff --git a/ui/components/app/edit-gas-fee-popover/index.scss b/ui/components/app/edit-gas-fee-popover/index.scss index 0b403b78b..f1c8b27ac 100644 --- 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); } } diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss b/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss index 2ff3c1dce..feff1e3d7 100644 --- 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; diff --git a/ui/components/app/flask/experimental-area/index.scss b/ui/components/app/flask/experimental-area/index.scss index c743033da..33728e89d 100644 --- 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; } } diff --git a/ui/components/app/flask/snaps-authorship-pill/index.scss b/ui/components/app/flask/snaps-authorship-pill/index.scss index 3ff6cb3eb..6a9b0c15e 100644 --- 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); } diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss index 7e414047d..270b7c29f 100644 --- 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 { diff --git 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 index 0371d1d14..d35feac31 100644 --- 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; diff --git 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 index 734d03876..ce4b48e31 100644 --- 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; } diff --git a/ui/components/app/gas-customization/gas-modal-page-container/index.scss b/ui/components/app/gas-customization/gas-modal-page-container/index.scss index fe069251c..85b8a981c 100644 --- 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); } } diff --git a/ui/components/app/gas-customization/gas-price-button-group/index.scss b/ui/components/app/gas-customization/gas-price-button-group/index.scss index 6c321da6d..0619b545e 100644 --- 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; } } diff --git a/ui/components/app/gas-customization/gas-slider/index.scss b/ui/components/app/gas-customization/gas-slider/index.scss index 8eca6cc3b..d7d1dc055 100644 --- 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); } } diff --git 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 index eea277265..eab165081 100644 --- 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; } } diff --git a/ui/components/app/gas-details-item/index.scss b/ui/components/app/gas-details-item/index.scss index 26c6e4bd5..64c6fcfe3 100644 --- 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, diff --git a/ui/components/app/gas-timing/index.scss b/ui/components/app/gas-timing/index.scss index 20d0b451f..3b158b090 100644 --- 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); } } } diff --git a/ui/components/app/home-notification/index.scss b/ui/components/app/home-notification/index.scss index 62a556fbb..8eea6800f 100644 --- 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; diff --git a/ui/components/app/info-box/index.scss b/ui/components/app/info-box/index.scss index c7749ecbb..7fc763d3b 100644 --- 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; diff --git a/ui/components/app/menu-bar/index.scss b/ui/components/app/menu-bar/index.scss index b70403115..11f0b14da 100644 --- 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); } } diff --git a/ui/components/app/modal/index.scss b/ui/components/app/modal/index.scss index 318608b68..10355b42f 100644 --- 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; diff --git a/ui/components/app/modals/account-details-modal/index.scss b/ui/components/app/modals/account-details-modal/index.scss index 3eedab80c..0ccb9851b 100644 --- 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; diff --git a/ui/components/app/modals/account-modal-container/index.scss b/ui/components/app/modals/account-modal-container/index.scss index 149a4de96..630cb4535 100644 --- 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; diff --git a/ui/components/app/modals/add-to-addressbook-modal/index.scss b/ui/components/app/modals/add-to-addressbook-modal/index.scss index 7c153f7f8..53a7bba1d 100644 --- 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); } } diff --git a/ui/components/app/modals/customize-nonce/index.scss b/ui/components/app/modals/customize-nonce/index.scss index 533071977..ae74a7844 100644 --- 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; diff --git a/ui/components/app/modals/deposit-ether-modal/index.scss b/ui/components/app/modals/deposit-ether-modal/index.scss index 4ad57c9af..212c4a679 100644 --- 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; diff --git a/ui/components/app/modals/edit-approval-permission/index.scss b/ui/components/app/modals/edit-approval-permission/index.scss index 3b350e047..d604b3ec3 100644 --- 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; } diff --git a/ui/components/app/modals/export-private-key-modal/index.scss b/ui/components/app/modals/export-private-key-modal/index.scss index a0862f5bc..d4debed95 100644 --- 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; diff --git a/ui/components/app/modals/hide-token-confirmation-modal/index.scss b/ui/components/app/modals/hide-token-confirmation-modal/index.scss index fb82e69ee..efcbc4444 100644 --- 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; } diff --git a/ui/components/app/modals/new-account-modal/index.scss b/ui/components/app/modals/new-account-modal/index.scss index cf6a42069..de08a672c 100644 --- 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); } } diff --git a/ui/components/app/permission-page-container/index.scss b/ui/components/app/permission-page-container/index.scss index 31b0aee83..aaf2753bd 100644 --- 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); } } } diff --git a/ui/components/app/permissions-connect-footer/index.scss b/ui/components/app/permissions-connect-footer/index.scss index 910f1857a..699bd777e 100644 --- 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; } diff --git a/ui/components/app/permissions-connect-header/index.scss b/ui/components/app/permissions-connect-header/index.scss index e49e872fd..1a6bcc6f4 100644 --- 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 { diff --git a/ui/components/app/permissions-connect-permission-list/index.scss b/ui/components/app/permissions-connect-permission-list/index.scss index cc58047bd..510911395 100644 --- 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; } } diff --git a/ui/components/app/selected-account/index.scss b/ui/components/app/selected-account/index.scss index acb95b0df..cd5d39548 100644 --- 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 { diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss index 80849087e..f7c718558 100644 --- 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 { diff --git a/ui/components/app/signature-request/signature-request-header/index.scss b/ui/components/app/signature-request/signature-request-header/index.scss index beaa5a92c..fe32b328a 100644 --- 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, diff --git a/ui/components/app/step-progress-bar/index.scss b/ui/components/app/step-progress-bar/index.scss index 3971f2c8b..20292690b 100644 --- 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); } } diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss index 6160f64c2..cf6f29f8a 100644 --- 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; } diff --git a/ui/components/app/token-cell/token-cell.scss b/ui/components/app/token-cell/token-cell.scss index 38adfcb56..d2087afda 100644 --- 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); } } diff --git a/ui/components/app/transaction-activity-log/index.scss b/ui/components/app/transaction-activity-log/index.scss index 7e08f7004..12247e88f 100644 --- 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 { diff --git a/ui/components/app/transaction-breakdown/index.scss b/ui/components/app/transaction-breakdown/index.scss index 87aa3c72e..75c6be56b 100644 --- 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); } } } diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss index ac6111af2..cb8c763a7 100644 --- 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; diff --git a/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss b/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss index efc4af751..a499ba367 100644 --- 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; diff --git 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 index 4deb4c525..d9f9e6719 100644 --- 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 { diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss index a19f4316e..d09c1ae46 100644 --- 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); } } diff --git a/ui/components/app/transaction-detail/index.scss b/ui/components/app/transaction-detail/index.scss index fc2b2fb77..c4505f10f 100644 --- 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; diff --git a/ui/components/app/transaction-icon/transaction-icon.scss b/ui/components/app/transaction-icon/transaction-icon.scss index 743b66022..cc50190b1 100644 --- 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); } } diff --git a/ui/components/app/transaction-list-item-details/index.scss b/ui/components/app/transaction-list-item-details/index.scss index 2df231e14..1ac29436d 100644 --- 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; } diff --git a/ui/components/app/transaction-list-item/index.scss b/ui/components/app/transaction-list-item/index.scss index 41e4d64a0..2a8e9d7d9 100644 --- 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 { diff --git a/ui/components/app/transaction-list/index.scss b/ui/components/app/transaction-list/index.scss index 380f91a24..431c4cc2b 100644 --- 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 { diff --git a/ui/components/app/transaction-status/index.scss b/ui/components/app/transaction-status/index.scss index 18af1f0df..6c66a9a17 100644 --- 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); } } diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss index 92a166607..b99ad8ca6 100644 --- 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 { diff --git a/ui/components/app/whats-new-popup/index.scss b/ui/components/app/whats-new-popup/index.scss index 6f8a2100a..920375571 100644 --- 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; } diff --git a/ui/components/ui/account-list/index.scss b/ui/components/ui/account-list/index.scss index 4e984f290..237e1d64e 100644 --- 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); } } diff --git a/ui/components/ui/actionable-message/index.scss b/ui/components/ui/actionable-message/index.scss index 217a8be90..519cb7716 100644 --- 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); } } diff --git a/ui/components/ui/alert-circle-icon/index.scss b/ui/components/ui/alert-circle-icon/index.scss index 4bdd9baf2..82e746e77 100644 --- 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); } } diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss index d67e5edf5..e15c4979e 100644 --- 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); } } } diff --git a/ui/components/ui/button-group/index.scss b/ui/components/ui/button-group/index.scss index 84e652968..460e9eae5 100644 --- 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); } } diff --git a/ui/components/ui/button/buttons.scss b/ui/components/ui/button/buttons.scss index 864c64ada..acaa94a24 100644 --- 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); } } } diff --git a/ui/components/ui/callout/callout.scss b/ui/components/ui/callout/callout.scss index e41865320..c73ed31ad 100644 --- 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 { diff --git a/ui/components/ui/check-box/index.scss b/ui/components/ui/check-box/index.scss index 8e6060bb3..067dfb53e 100644 --- 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; } } diff --git a/ui/components/ui/chip/chip.scss b/ui/components/ui/chip/chip.scss index 17e96d582..5951a0fa2 100644 --- 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); } } diff --git a/ui/components/ui/circle-icon/index.scss b/ui/components/ui/circle-icon/index.scss index 5002f83e6..1ffa5323d 100644 --- 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 { diff --git a/ui/components/ui/color-indicator/color-indicator.scss b/ui/components/ui/color-indicator/color-indicator.scss index 4a3e1ca34..ebd1b4668 100644 --- 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); } } } diff --git a/ui/components/ui/confusable/index.scss b/ui/components/ui/confusable/index.scss index 1178eb55d..09c751e57 100644 --- 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); } } diff --git a/ui/components/ui/definition-list/definition-list.scss b/ui/components/ui/definition-list/definition-list.scss index bf154d194..6443ca97e 100644 --- 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; } diff --git a/ui/components/ui/dialog/dialog.scss b/ui/components/ui/dialog/dialog.scss index 72d3b8655..c22ee3a78 100644 --- 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); } } diff --git a/ui/components/ui/editable-label/index.scss b/ui/components/ui/editable-label/index.scss index 9e843e7a5..e704fafb2 100644 --- 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 { diff --git a/ui/components/ui/error-message/index.scss b/ui/components/ui/error-message/index.scss index e355d9939..80f38bc3c 100644 --- 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; diff --git a/ui/components/ui/export-text-container/index.scss b/ui/components/ui/export-text-container/index.scss index ee225e5db..c1ac0adec 100644 --- 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); } } diff --git a/ui/components/ui/form-field/index.scss b/ui/components/ui/form-field/index.scss index ed8859141..ce659d3b4 100644 --- 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); } } } diff --git a/ui/components/ui/icon-border/icon-border.scss b/ui/components/ui/icon-border/icon-border.scss index 1ac7e3a4b..a262f56c9 100644 --- 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; diff --git a/ui/components/ui/icon-button/icon-button.scss b/ui/components/ui/icon-button/icon-button.scss index 2c57b90d6..5468822e2 100644 --- 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; diff --git a/ui/components/ui/icon-with-fallback/icon-with-fallback.scss b/ui/components/ui/icon-with-fallback/icon-with-fallback.scss index c31671677..b0e2ca87d 100644 --- 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); } } diff --git a/ui/components/ui/icon-with-label/index.scss b/ui/components/ui/icon-with-label/index.scss index ecf28efca..4b842cb7f 100644 --- 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); } } diff --git a/ui/components/ui/icon/index.scss b/ui/components/ui/icon/index.scss index 253f90b8f..d05d6a433 100644 --- a/ui/components/ui/icon/index.scss +++ b/ui/components/ui/icon/index.scss @@ -2,18 +2,18 @@ margin: 0 4px; &--success { - fill: $success-1; + fill: var(--success-1); } &--info { - fill: $primary-1; + fill: var(--primary-1); } &--warning { - fill: $alert-3; + fill: var(--alert-3); } &--danger { - fill: $error-1; + fill: var(--error-1); } } diff --git a/ui/components/ui/identicon/index.scss b/ui/components/ui/identicon/index.scss index 5f67c8b3a..9fd304c99 100644 --- a/ui/components/ui/identicon/index.scss +++ b/ui/components/ui/identicon/index.scss @@ -14,11 +14,11 @@ border-style: solid; border-radius: 50%; border-width: 2px; - border-color: $primary-blue; + border-color: var(--primary-blue); } &__image-border { - border: 1px solid $alto; - background: $white; + border: 1px solid var(--alto); + background: var(--white); } } diff --git a/ui/components/ui/info-tooltip/index.scss b/ui/components/ui/info-tooltip/index.scss index f96dc943c..03bc51dde 100644 --- a/ui/components/ui/info-tooltip/index.scss +++ b/ui/components/ui/info-tooltip/index.scss @@ -13,22 +13,22 @@ .tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow], .tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] { - border-top-color: $white; + border-top-color: var(--white); } .tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow], .tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] { - border-right-color: $white; + border-right-color: var(--white); } .tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow], .tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] { - border-left-color: $white; + border-left-color: var(--white); } .tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow], .tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] { - border-bottom-color: $white; + border-bottom-color: var(--white); } .tippy-tooltip { @@ -46,10 +46,10 @@ @include H7; text-align: left; - color: $Grey-500; + color: var(--Grey-500); a { - color: $primary-1; + color: var(--primary-1); } p { diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss index ae2a04b80..243bd305a 100644 --- a/ui/components/ui/list-item/index.scss +++ b/ui/components/ui/list-item/index.scss @@ -7,9 +7,9 @@ @include Paragraph; - border-top: 1px solid $mercury; - border-bottom: 1px solid $mercury; - color: $Black-100; + border-top: 1px solid var(--mercury); + border-bottom: 1px solid var(--mercury); + color: var(--Black-100); display: grid; grid-template-columns: 0fr repeat(11, 1fr); grid-template-areas: @@ -21,7 +21,7 @@ &:hover, &:focus-within { - background-color: $Grey-000; + background-color: var(--Grey-000); } &__icon { @@ -67,7 +67,7 @@ @include H7; grid-area: sub; - color: $Grey-500; + color: var(--Grey-500); margin-top: 4px; // all direct descendants should be truncated with ellipses // allows flexibility in consuming components to use h3/other tag @@ -86,7 +86,7 @@ @include H7; grid-area: mid; - color: $Grey-500; + color: var(--Grey-500); } &__right-content { diff --git a/ui/components/ui/menu/menu.scss b/ui/components/ui/menu/menu.scss index 4f89b44f5..c98738b09 100644 --- a/ui/components/ui/menu/menu.scss +++ b/ui/components/ui/menu/menu.scss @@ -2,11 +2,11 @@ &__container { @include H6; - background: $white; + background: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214); border-radius: 8px; width: 225px; - color: $Black-100; + color: var(--Black-100); display: flex; flex-direction: column; align-items: center; @@ -38,7 +38,7 @@ &__icon { margin-right: 8px; grid-row: 1 / span 2; - color: $Grey-500; + color: var(--Grey-500); } .disconnect-icon { diff --git a/ui/components/ui/nickname-popover/index.scss b/ui/components/ui/nickname-popover/index.scss index c7b91d246..9410cddd1 100644 --- a/ui/components/ui/nickname-popover/index.scss +++ b/ui/components/ui/nickname-popover/index.scss @@ -2,7 +2,7 @@ &__popover-wrap { height: 232px; border-radius: 4px; - background: $ui-white; + background: var(--ui-white); display: flex; justify-content: center; width: auto; @@ -23,7 +23,7 @@ font-weight: bold; display: flex; align-items: center; - color: $Black-100; + color: var(--Black-100); padding-top: 8px; } @@ -34,7 +34,7 @@ flex-direction: row; align-items: center; min-height: 25px; - background: $Grey-000; + background: var(--Grey-000); border-radius: 40px; padding-left: 8px; padding-right: 2px; @@ -47,14 +47,14 @@ &__constant { @include H8; - color: $Grey-500; + color: var(--Grey-500); } } &__view-on-block-explorer { @include H7; - color: $primary-1; + color: var(--primary-1); margin-top: 12px; } @@ -69,6 +69,6 @@ width: 152px; height: 40px; border-radius: 100px; - background: $primary-1; + background: var(--primary-1); } } diff --git a/ui/components/ui/numeric-input/numeric-input.scss b/ui/components/ui/numeric-input/numeric-input.scss index f3ac6877d..897e65de0 100644 --- a/ui/components/ui/numeric-input/numeric-input.scss +++ b/ui/components/ui/numeric-input/numeric-input.scss @@ -1,10 +1,10 @@ .numeric-input { - border: 1px solid $ui-3; + border: 1px solid var(--ui-3); position: relative; border-radius: 6px; &--error { - border-color: $error-1; + border-color: var(--error-1); } input { diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss index afe634c38..a249bb912 100644 --- a/ui/components/ui/page-container/index.scss +++ b/ui/components/ui/page-container/index.scss @@ -1,6 +1,6 @@ .page-container { width: 408px; - background-color: $white; + background-color: var(--white); box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); z-index: 25; display: flex; @@ -11,7 +11,7 @@ &__header { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid var(--geyser); padding: 16px; flex: 0 0 auto; position: relative; @@ -22,7 +22,7 @@ } &__header-close { - color: $tundora; + color: var(--tundora); position: absolute; top: 16px; right: 16px; @@ -53,7 +53,7 @@ display: flex; flex-flow: column; justify-content: center; - border-top: 1px solid $geyser; + border-top: 1px solid var(--geyser); flex: 0 0 auto; footer { @@ -101,7 +101,7 @@ &__title { @include H2; - color: $black; + color: var(--black); font-weight: 500; margin-right: 1.5rem; @@ -114,7 +114,7 @@ @include H6; padding-top: 0.5rem; - color: $gray; + color: var(--gray); } &__tabs { @@ -126,7 +126,7 @@ @include Paragraph; min-width: 5rem; - color: $dusty-gray; + color: var(--dusty-gray); border-bottom: none; margin-right: 16px; @@ -151,7 +151,7 @@ } &__warning-container { - background: $linen; + background: var(--linen); padding: 20px; display: flex; align-items: start; @@ -192,7 +192,7 @@ .page-container { height: 100%; width: 100%; - background-color: $white; + background-color: var(--white); border-radius: 0; flex: 1; overflow-y: auto; diff --git a/ui/components/ui/pulse-loader/index.scss b/ui/components/ui/pulse-loader/index.scss index 16afc75b8..8f79d70fe 100644 --- a/ui/components/ui/pulse-loader/index.scss +++ b/ui/components/ui/pulse-loader/index.scss @@ -4,7 +4,7 @@ &__loading-dot-one, &__loading-dot-two, &__loading-dot-three { - background: $Blue-500; + background: var(--Blue-500); width: 9px; height: 9px; margin-right: 2px; diff --git a/ui/components/ui/qr-code/index.scss b/ui/components/ui/qr-code/index.scss index 03ba8fc08..62230303f 100644 --- a/ui/components/ui/qr-code/index.scss +++ b/ui/components/ui/qr-code/index.scss @@ -37,7 +37,7 @@ cursor: pointer; .qr-code__copy-icon__svg { - fill: $primary-1; + fill: var(--primary-1); } } } @@ -45,7 +45,7 @@ &__address { @include H7; - background-color: $Grey-000; + background-color: var(--Grey-000); width: 76%; padding: 8px 12px; word-break: break-all; @@ -59,7 +59,7 @@ right: 24px; &__svg { - fill: $ui-5; + fill: var(--ui-5); } } } diff --git a/ui/components/ui/radio-group/index.scss b/ui/components/ui/radio-group/index.scss index 893ef09f4..06d0ed554 100644 --- a/ui/components/ui/radio-group/index.scss +++ b/ui/components/ui/radio-group/index.scss @@ -36,28 +36,28 @@ &__column-start-connector { width: calc(50% + 0.5px); height: 6px; - border-left: 1px solid $ui-2; - border-bottom: 1px solid $ui-2; + border-left: 1px solid var(--ui-2); + border-bottom: 1px solid var(--ui-2); align-self: flex-end; } &__column-end-connector { width: calc(50% + 0.5px); height: 6px; - border-right: 1px solid $ui-2; - border-bottom: 1px solid $ui-2; + border-right: 1px solid var(--ui-2); + border-bottom: 1px solid var(--ui-2); align-self: flex-start; } &__column-vertical-line { width: 1px; height: 5px; - border-left: 1px solid $ui-2; + border-left: 1px solid var(--ui-2); } &__column-horizontal-line { height: 1px; - border-bottom: 1px solid $ui-2; + border-bottom: 1px solid var(--ui-2); width: 100%; } diff --git a/ui/components/ui/sender-to-recipient/index.scss b/ui/components/ui/sender-to-recipient/index.scss index 450212939..1fb5302e5 100644 --- a/ui/components/ui/sender-to-recipient/index.scss +++ b/ui/components/ui/sender-to-recipient/index.scss @@ -36,7 +36,7 @@ &--recipient { padding-left: 30px; - border-left: 1px solid $geyser; + border-left: 1px solid var(--geyser); &-with-address { cursor: pointer; @@ -57,9 +57,9 @@ } &__arrow-circle { - background: $white; + background: var(--white); padding: 5px; - border: 1px solid $geyser; + border: 1px solid var(--geyser); border-radius: 20px; height: 32px; width: 32px; @@ -105,10 +105,10 @@ border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); padding: 6px; - background: $white; + background: var(--white); cursor: pointer; min-width: 0; - color: $dusty-gray; + color: var(--dusty-gray); border: 1px solid #d8d8d8; } @@ -164,7 +164,7 @@ padding: 6px; cursor: pointer; min-width: 0; - color: $dusty-gray; + color: var(--dusty-gray); border: 1px solid #d8d8d8; } diff --git a/ui/components/ui/slider/index.scss b/ui/components/ui/slider/index.scss index 00ff33766..b4d89ae2a 100644 --- a/ui/components/ui/slider/index.scss +++ b/ui/components/ui/slider/index.scss @@ -35,7 +35,7 @@ border: none; background: none; font-size: 12px; - color: $Blue-500; + color: var(--Blue-500); &:focus { outline: none; diff --git a/ui/components/ui/snackbar/index.scss b/ui/components/ui/snackbar/index.scss index d3f185e7b..c048f174b 100644 --- a/ui/components/ui/snackbar/index.scss +++ b/ui/components/ui/snackbar/index.scss @@ -2,10 +2,10 @@ @include H7; padding: 0.75rem 1rem; - color: $Blue-600; + color: var(--Blue-600); min-width: 360px; width: fit-content; - background: $Blue-000; - border: 1px solid $Blue-200; + background: var(--Blue-000); + border: 1px solid var(--Blue-200); border-radius: 6px; } diff --git a/ui/components/ui/tabs/index.scss b/ui/components/ui/tabs/index.scss index 4be72a141..d65697096 100644 --- a/ui/components/ui/tabs/index.scss +++ b/ui/components/ui/tabs/index.scss @@ -8,8 +8,8 @@ &__list { display: flex; justify-content: flex-start; - border-bottom: 1px solid $geyser; - background-color: $white; + border-bottom: 1px solid var(--geyser); + background-color: var(--white); position: sticky; top: 0; z-index: 1; diff --git a/ui/components/ui/tabs/tab/index.scss b/ui/components/ui/tabs/tab/index.scss index 0753ba9dd..ba7460c64 100644 --- a/ui/components/ui/tabs/tab/index.scss +++ b/ui/components/ui/tabs/tab/index.scss @@ -12,7 +12,7 @@ } &--active { - color: $black; - border-bottom: 2px solid $primary-blue; + color: var(--black); + border-bottom: 2px solid var(--primary-blue); } } diff --git a/ui/components/ui/textarea/index.scss b/ui/components/ui/textarea/index.scss index aa0ca7f54..1d84362be 100644 --- a/ui/components/ui/textarea/index.scss +++ b/ui/components/ui/textarea/index.scss @@ -3,7 +3,7 @@ .textarea { display: block; box-shadow: none; - color: design-system.$black; + color: var(--black); @include design-system.H6; diff --git a/ui/components/ui/tooltip/index.scss b/ui/components/ui/tooltip/index.scss index 21b70725d..cc0ca470d 100644 --- a/ui/components/ui/tooltip/index.scss +++ b/ui/components/ui/tooltip/index.scss @@ -9,22 +9,22 @@ @include H7; text-align: left; - color: $Grey-500; + color: var(--Grey-500); } } .tippy-popper[x-placement^=top] .white-theme [x-arrow] { - border-top-color: $white; + border-top-color: var(--white); } .tippy-popper[x-placement^=right] .white-theme [x-arrow] { - border-right-color: $white; + border-right-color: var(--white); } .tippy-popper[x-placement^=left] .white-theme [x-arrow] { - border-left-color: $white; + border-left-color: var(--white); } .tippy-popper[x-placement^=bottom] .white-theme [x-arrow] { - border-bottom-color: $white; + border-bottom-color: var(--white); } diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss index 1119908bb..8a34bf4b6 100644 --- a/ui/components/ui/typography/typography.scss +++ b/ui/components/ui/typography/typography.scss @@ -17,7 +17,7 @@ @each $variant, $color in design-system.$color-map { &--color-#{$variant} { - color: $color; + color: var($color); } } diff --git a/ui/components/ui/unit-input/index.scss b/ui/components/ui/unit-input/index.scss index 35d54dc6a..e1f01eb03 100644 --- a/ui/components/ui/unit-input/index.scss +++ b/ui/components/ui/unit-input/index.scss @@ -62,7 +62,7 @@ } &--error { - border-color: $red; + border-color: var(--red); } &__disabled { diff --git a/ui/components/ui/url-icon/index.scss b/ui/components/ui/url-icon/index.scss index 14d5524cb..ff4266f90 100644 --- a/ui/components/ui/url-icon/index.scss +++ b/ui/components/ui/url-icon/index.scss @@ -3,7 +3,7 @@ height: 24px; background-position: center; border-radius: 50%; - background-color: $white; + background-color: var(--white); box-shadow: 0 2px 4px 0 rgba($black, 0.24); flex: 0 0 auto; -moz-animation: fadein 1s; diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss index 14ffafefc..6ee85339f 100644 --- a/ui/css/base-styles.scss +++ b/ui/css/base-styles.scss @@ -61,7 +61,7 @@ html { background: #f7f7f7; @media screen and (max-width: $break-small) { - background-color: $white; + background-color: var(--white); } } /* stylelint-enable */ @@ -98,32 +98,32 @@ input.form-control { padding-left: 10px; font-size: 14px; height: 40px; - border: 1px solid $alto; + border: 1px solid var(--alto); border-radius: 3px; width: 100%; &::-webkit-input-placeholder { font-weight: 100; - color: $dusty-gray; + color: var(--dusty-gray); } &::-moz-placeholder { font-weight: 100; - color: $dusty-gray; + color: var(--dusty-gray); } &:-ms-input-placeholder { font-weight: 100; - color: $dusty-gray; + color: var(--dusty-gray); } &:-moz-placeholder { font-weight: 100; - color: $dusty-gray; + color: var(--dusty-gray); } &--error { - border: 1px solid $monzo; + border: 1px solid var(--monzo); } } diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss index e8b7bd56a..ac94195f6 100644 --- a/ui/css/design-system/colors.scss +++ b/ui/css/design-system/colors.scss @@ -1,149 +1,143 @@ -// These are the colors of the MetaMask design system -// Only design system colors should be added, no superfluous variables -$Blue-000: #eaf6ff; -$Blue-100: #a7d9fe; -$Blue-200: #75c4fd; -$Blue-300: #43aefc; -$Blue-400: #1098fc; -$Blue-500: #037dd6; -$Blue-600: #0260a4; -$Blue-700: #024272; -$Blue-800: #01253f; -$Blue-900: #00080d; - -$Grey-000: #f2f3f4; -$Grey-100: #d6d9dc; -$Grey-200: #bbc0c5; -$Grey-300: #9fa6ae; -$Grey-400: #848c96; -$Grey-500: #6a737d; -$Grey-600: #535a61; -$Grey-700: #3b4046; -$Grey-800: #24272a; -$Grey-900: #141618; - -$Green-000: #f3fcf5; -$Green-100: #d6ffdf; -$Green-200: #afecbd; -$Green-300: #86e29b; -$Green-400: #5dd879; -$Green-500: #28a745; -$Green-600: #1e7e34; -$Green-700: #145523; -$Green-800: #0a2c12; -$Green-900: #041007; - -$Red-000: #fcf2f3; -$Red-100: #f7d5d8; -$Red-200: #f1b9be; -$Red-300: #e88f97; -$Red-400: #e06470; -$Red-500: #d73a49; -$Red-600: #b92534; -$Red-700: #8e1d28; -$Red-800: #64141c; -$Red-900: #3a0c10; - -$Orange-000: #fef5ef; -$Orange-100: #fde2cf; -$Orange-200: #fbc49d; -$Orange-300: #faa66c; -$Orange-400: #f8883b; -$Orange-500: #f66a0a; -$Orange-600: #c65507; -$Orange-700: #954005; -$Orange-800: #632b04; -$Orange-900: #321602; - -$Yellow-000: #fefae8; // Temporary placeholder -$Yellow-100: #fefcde; -$Yellow-500: #ffd33d; - -$Black-100: #24292e; - -$primary-blue: $Blue-500; -$primary-orange: $Orange-500; - -$accent-yellow: $Yellow-500; -$accent-green: $Green-500; -$accent-red: $Red-500; -$accent-purple: #6f42c1; -$accent-pink: #ff45d8; - -$neutral-white: #fff; -$neutral-black: $Black-100; -$neutral-grey: $Grey-500; - -// Everything below this line is part of the new color system -$primary-1: #037dd6; -$primary-2: #eaf6ff; -$primary-3: #0260a4; - -$secondary-1: #f66a0a; -$secondary-2: #fef5ef; -$secondary-3: #c65507; - -$error-1: #d73a49; -$error-2: #fcf2f3; -$error-3: #b92534; - -$alert-1: #ffd33d; -$alert-2: #fefcde; -$alert-3: #f8c000; - -$success-1: #4cd964; -$success-2: #caf4d1; -$success-3: #219e37; - -$ui-black: #24292e; -$ui-grey: #d6d9dc; -$ui-white: #fff; -$ui-1: #f2f3f4; -$ui-2: #d6d9dc; -$ui-3: #bbc0c5; -$ui-4: #6a737d; -$ui-5: #c4c4c4; - -$mainnet: #29b6af; -$ropsten: #ff4a8d; -$kovan: #9064ff; -$rinkeby: #f6c343; -$goerli: #3099f2; -$localhost: #29b6af; - -$flask-purple: #8b45b6; +:root { + // These are the colors of the MetaMask design system + // Only design system colors should be added, no superfluous variables + --Blue-000: #eaf6ff; + --Blue-100: #a7d9fe; + --Blue-200: #75c4fd; + --Blue-300: #43aefc; + --Blue-400: #1098fc; + --Blue-500: #037dd6; + --Blue-600: #0260a4; + --Blue-700: #024272; + --Blue-800: #01253f; + --Blue-900: #00080d; + // Greys + --Grey-000: #f2f3f4; + --Grey-100: #d6d9dc; + --Grey-200: #bbc0c5; + --Grey-300: #9fa6ae; + --Grey-400: #848c96; + --Grey-500: #6a737d; + --Grey-600: #535a61; + --Grey-700: #3b4046; + --Grey-800: #24272a; + --Grey-900: #141618; + // Greens + --Green-000: #f3fcf5; + --Green-100: #d6ffdf; + --Green-200: #afecbd; + --Green-300: #86e29b; + --Green-400: #5dd879; + --Green-500: #28a745; + --Green-600: #1e7e34; + --Green-700: #145523; + --Green-800: #0a2c12; + --Green-900: #041007; + // Reds + --Red-000: #fcf2f3; + --Red-100: #f7d5d8; + --Red-200: #f1b9be; + --Red-300: #e88f97; + --Red-400: #e06470; + --Red-500: #d73a49; + --Red-600: #b92534; + --Red-700: #8e1d28; + --Red-800: #64141c; + --Red-900: #3a0c10; + // Orange + --Orange-000: #fef5ef; + --Orange-100: #fde2cf; + --Orange-200: #fbc49d; + --Orange-300: #faa66c; + --Orange-400: #f8883b; + --Orange-500: #f66a0a; + --Orange-600: #c65507; + --Orange-700: #954005; + --Orange-800: #632b04; + --Orange-900: #321602; + // Yellow + --Yellow-000: #fefae8; // Temporary placeholder + --Yellow-100: #fefcde; + --Yellow-500: #ffd33d; + // Black + --Black-100: #24292e; + // Primary colors + --primary-blue: var(--Blue-500); + --primary-orange: var(--Orange-500); + // Accents + --accent-yellow: var(--Yellow-500); + --accent-green: var(--Green-500); + --accent-red: var(--Red-500); + --accent-purple: #6f42c1; + --accent-pink: #ff45d8; + // Neutrals + --neutral-white: #fff; + --neutral-black: var(--Black-100); + --neutral-grey: var(--Grey-500); + // Everything below this line is part of the new color system + --primary-1: #037dd6; + --primary-2: #eaf6ff; + --primary-3: #0260a4; + --secondary-1: #f66a0a; + --secondary-2: #fef5ef; + --secondary-3: #c65507; + --error-1: #d73a49; + --error-2: #fcf2f3; + --error-3: #b92534; + --alert-1: #ffd33d; + --alert-2: #fefcde; + --alert-3: #f8c000; + --success-1: #4cd964; + --success-2: #caf4d1; + --success-3: #219e37; + --ui-black: #24292e; + --ui-grey: #d6d9dc; + --ui-white: #fff; + --ui-1: #f2f3f4; + --ui-2: #d6d9dc; + --ui-3: #bbc0c5; + --ui-4: #6a737d; + --ui-5: #c4c4c4; + --mainnet: #29b6af; + --ropsten: #ff4a8d; + --kovan: #9064ff; + --rinkeby: #f6c343; + --goerli: #3099f2; + --localhost: #29b6af; + --flask-purple: #8b45b6; +} $color-map: ( - 'ui-1': $ui-1, - 'ui-2': $ui-2, - 'ui-3': $ui-3, - 'ui-4': $ui-4, - 'ui-5': $ui-5, - 'white': $ui-white, - 'black': $ui-black, - 'grey': $ui-grey, - 'neutral-grey': $neutral-grey, - 'primary-1': $primary-1, - 'primary-2': $primary-2, - 'primary-3': $primary-3, - 'secondary-1': $secondary-1, - 'secondary-2': $secondary-2, - 'secondary-3': $secondary-3, - 'alert-1': $alert-1, - 'alert-2': $alert-2, - 'alert-3': $alert-3, - 'error-1': $error-1, - 'error-2': $error-2, - 'error-3': $error-3, - 'success-1': $success-1, - 'success-2': $success-2, - 'success-3': $success-3, - 'mainnet': $mainnet, - 'ropsten': $ropsten, - 'kovan': $kovan, - 'rinkeby': $rinkeby, - 'goerli': $goerli, - 'localhost': $localhost, + 'ui-1': --ui-1, + 'ui-2': --ui-2, + 'ui-3': --ui-3, + 'ui-4': --ui-4, + 'ui-5': --ui-5, + 'white': --ui-white, + 'black': --ui-black, + 'grey': --ui-grey, + 'neutral-grey': --neutral-grey, + 'primary-1': --primary-1, + 'primary-2': --primary-2, + 'primary-3': --primary-3, + 'secondary-1': --secondary-1, + 'secondary-2': --secondary-2, + 'secondary-3': --secondary-3, + 'alert-1': --alert-1, + 'alert-2': --alert-2, + 'alert-3': --alert-3, + 'error-1': --error-1, + 'error-2': --error-2, + 'error-3': --error-3, + 'success-1': --success-1, + 'success-2': --success-2, + 'success-3': --success-3, + 'mainnet': --mainnet, + 'ropsten': --ropsten, + 'kovan': --kovan, + 'rinkeby': --rinkeby, + 'goerli': --goerli, + 'localhost': --localhost, 'transparent': transparent, - 'flask-purple': $flask-purple + 'flask-purple': --flask-purple ); diff --git a/ui/css/design-system/deprecated-colors.scss b/ui/css/design-system/deprecated-colors.scss index c65f0bfa0..2410ab4a0 100644 --- a/ui/css/design-system/deprecated-colors.scss +++ b/ui/css/design-system/deprecated-colors.scss @@ -3,46 +3,62 @@ when approved for the design system **/ -// Base Colors -$white: #fff; -$black: #000; -$orange: #ffa500; -$red: #f00; -$gray: #808080; - -/* - Colors - http://chir.ag/projects/name-that-color - */ -$gallery: #efefef; -$wild-sand: #f6f6f6; -$dusty-gray: #9b9b9b; +// These are declared as variables and hoisted because they are +// used as rgba's and native rgba doesn't accept var() +$malibu-blue: #7ac9fd; $alto: #dedede; -$alabaster: #fafafa; -$silver-chalice: #aeaeae; -$tundora: #4d4d4d; -$nile-blue: #1b344d; -$scorpion: #5d5d5d; -$silver: #cdcdcd; -$caribbean-green: #02c9b1; -$monzo: #d0021b; -$crimson: #e91550; +$black: #000; +$white: #fff; $blue-lagoon: #038789; +$crimson: #e91550; $purple: #690496; $tulip-tree: #ebb33f; -$malibu-blue: #7ac9fd; -$athens-grey: #e9edf0; -$geyser: #d2d8dd; -$manatee: #93949d; -$spindle: #c7ddec; -$mid-gray: #5b5d67; -$cape-cod: #38393a; $dodger-blue: #3099f2; -$ecstasy: #f7861c; -$linen: #fdf4f4; -$oslo-gray: #8c8e94; -$polar: #fafcfe; -$blizzard-blue: #bfdef3; -$mischka: #dddee9; -$web-orange: #f2a202; -$mercury: #e5e5e5; +$monzo: #d0021b; +$dusty-gray: #9b9b9b; + +// Base Colors +:root { + --white: #fff; + --black: #000; + --orange: #ffa500; + --red: #f00; + --gray: #808080; + + /* + Colors + http://chir.ag/projects/name-that-color + */ + --gallery: #efefef; + --wild-sand: #f6f6f6; + --dusty-gray: #9b9b9b; + --alto: #dedede; + --alabaster: #fafafa; + --silver-chalice: #aeaeae; + --tundora: #4d4d4d; + --nile-blue: #1b344d; + --scorpion: #5d5d5d; + --silver: #cdcdcd; + --caribbean-green: #02c9b1; + --monzo: #d0021b; + --crimson: #e91550; + --blue-lagoon: #038789; + --purple: #690496; + --tulip-tree: #ebb33f; + --malibu-blue: #b8cbd8; + --athens-grey: #e9edf0; + --geyser: #d2d8dd; + --manatee: #93949d; + --spindle: #c7ddec; + --mid-gray: #5b5d67; + --cape-cod: #38393a; + --dodger-blue: #3099f2; + --ecstasy: #f7861c; + --linen: #fdf4f4; + --oslo-gray: #8c8e94; + --polar: #fafcfe; + --blizzard-blue: #bfdef3; + --mischka: #dddee9; + --web-orange: #f2a202; + --mercury: #e5e5e5; +} diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss index 06c6436f9..887e9e5f5 100644 --- a/ui/css/itcss/components/network.scss +++ b/ui/css/itcss/components/network.scss @@ -7,7 +7,7 @@ } .network-component.pointer { - border: 1px solid $Grey-200; + border: 1px solid var(--Grey-200); border-radius: 82px; padding: 6px 3px; flex: 0 0 auto; @@ -76,7 +76,7 @@ .network-name-item { flex: 1; - color: $dusty-gray; + color: var(--dusty-gray); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -84,7 +84,7 @@ .network-check, .network-check__transparent { - color: $white; + color: var(--white); margin-left: 7px; } @@ -106,7 +106,7 @@ } .menu-icon-circle--active { - border: 1px solid $white; + border: 1px solid var(--white); background: rgba(100, 100, 100, 0.4); } @@ -138,7 +138,7 @@ width: 100%; height: 1px; margin: 10px 0; - background-color: $scorpion; + background-color: var(--scorpion); } .network-dropdown-title { @@ -146,7 +146,7 @@ height: 25px; width: 120px; - color: $white; + color: var(--white); text-align: center; } @@ -155,15 +155,15 @@ min-height: 36px; width: 265px; - color: $dusty-gray; + color: var(--dusty-gray); &--link { - color: $white; + color: var(--white); cursor: pointer; text-decoration: underline; &:hover { - color: $white; + color: var(--white); } } @@ -173,7 +173,7 @@ position: absolute; top: 63px; right: 10px; - border: 1px solid $dusty-gray; + border: 1px solid var(--dusty-gray); border-radius: 10px; } } diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss index 398651cc7..7271c6a3b 100644 --- a/ui/css/itcss/components/newui-sections.scss +++ b/ui/css/itcss/components/newui-sections.scss @@ -22,7 +22,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma left: 0; width: 1px; height: 1px; - background-color: $Grey-000; + background-color: var(--Grey-000); animation: emptySpinningDiv 1s infinite linear; } @@ -95,7 +95,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma .main-container { width: 100%; overflow-y: auto; - background-color: $white; + background-color: var(--white); } .main-container-wrapper { diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss index ef44990cd..512f21fc1 100644 --- a/ui/css/itcss/components/send.scss +++ b/ui/css/itcss/components/send.scss @@ -48,13 +48,13 @@ border-radius: 50%; width: 70px; height: 70px; - border: 1px solid $alto; + border: 1px solid var(--alto); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); position: absolute; top: -35px; z-index: 25; padding: 4px; - background-color: $white; + background-color: var(--white); @media screen and (max-width: $break-small) { position: relative; @@ -73,7 +73,7 @@ .large-input { @include Paragraph; - border: 1px solid $dusty-gray; + border: 1px solid var(--dusty-gray); border-radius: 4px; margin: 4px 0 20px; } @@ -89,7 +89,7 @@ &--error { input, .send-screen-gas-input { - border-color: $red !important; + border-color: var(--red) !important; } .send-screen-input-wrapper__error-message { @@ -99,7 +99,7 @@ position: absolute; bottom: 4px; left: 8px; - color: $red; + color: var(--red); } } @@ -110,7 +110,7 @@ position: absolute; bottom: 4px; left: 8px; - color: $red; + color: var(--red); } } @@ -132,7 +132,7 @@ align-items: center; padding-left: 10px; padding-right: 12px; - color: $scorpion; + color: var(--scorpion); } .send-screen-amount-labels { @@ -149,11 +149,11 @@ .currency-toggle { &__item { - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; &--selected { - color: $black; + color: var(--black); cursor: default; } } @@ -162,7 +162,7 @@ .send-screen-gas-input-customize { @include H7; - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; } @@ -182,9 +182,9 @@ bottom: 50px; width: 237px; height: 307px; - background-color: $white; + background-color: var(--white); opacity: 1; - box-shadow: $alto 0 0 5px; + box-shadow: var(--alto) 0 0 5px; z-index: 1050; padding: 13px 19px; border-radius: 4px; @@ -195,12 +195,12 @@ height: 25px; width: 25px; z-index: 1200; - background: $white; + background: var(--white); position: absolute; transform: rotate(45deg); left: 107px; top: 294px; - box-shadow: 2px 2px 2px $alto; + box-shadow: 2px 2px 2px var(--alto); } .customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button { @@ -225,7 +225,7 @@ .gas-tooltip-label { @include Paragraph; - color: $tundora; + color: var(--tundora); } .gas-tooltip-header { @@ -237,7 +237,7 @@ } .gas-tooltip-input-label i { - color: $silver-chalice; + color: var(--silver-chalice); margin-left: 6px; } @@ -246,8 +246,8 @@ width: 178px; height: 28px; - border: 1px solid $alto; - color: $nile-blue; + border: 1px solid var(--alto); + color: var(--nile-blue); padding-left: 8px; } @@ -261,7 +261,7 @@ position: absolute; top: 4px; right: 26px; - color: $silver-chalice; + color: var(--silver-chalice); } .gas-tooltip-input-arrows { @@ -296,7 +296,7 @@ &__title { @include H4; - color: $scorpion; + color: var(--scorpion); } &__subtitle { @@ -357,7 +357,7 @@ &__title { @include H4; - color: $scorpion; + color: var(--scorpion); } &__description, @@ -405,7 +405,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; @@ -434,10 +434,10 @@ border-radius: 50%; width: 48px; height: 48px; - border: 1px solid $alto; + border: 1px solid var(--alto); z-index: 25; padding: 4px; - background-color: $white; + background-color: var(--white); } &__send-arrow-icon { @@ -451,7 +451,7 @@ } &__arrow-background { - background-color: $white; + background-color: var(--white); height: 14px; width: 14px; position: absolute; @@ -468,7 +468,7 @@ &__header { height: 88px; width: 380px; - background-color: $athens-grey; + background-color: var(--athens-grey); position: relative; display: flex; justify-content: center; @@ -483,7 +483,7 @@ &__header-tip { height: 25px; width: 25px; - background: $athens-grey; + background: var(--athens-grey); position: absolute; transform: rotate(45deg); left: 178px; @@ -500,7 +500,7 @@ &__title { @include H3; - color: $scorpion; + color: var(--scorpion); text-align: center; margin-top: 25px; } @@ -508,7 +508,7 @@ &__copy { @include H6; - color: $gray; + color: var(--gray); text-align: center; margin-top: 10px; width: 287px; @@ -518,7 +518,7 @@ @include H7; left: 8px; - color: $red; + color: var(--red); } &__error-amount { @@ -529,11 +529,11 @@ @include H7; left: 8px; - color: $orange; + color: var(--orange); } &__error-border { - color: $red; + color: var(--red); } &__form { @@ -572,21 +572,21 @@ min-width: 0; .currency-display { - color: $tundora; + color: var(--tundora); &__currency-symbol { - color: $tundora; + color: var(--tundora); } &__converted-value, &__converted-currency { - color: $tundora; + color: var(--tundora); } } .account-list-item { &__account-secondary-balance { - color: $tundora; + color: var(--tundora); } } } @@ -594,7 +594,7 @@ &__form-label { @include Paragraph; - color: $scorpion; + color: var(--scorpion); width: 95px; flex: 0 0 auto; } @@ -604,10 +604,10 @@ @include H7; width: 100%; - border: 1px solid $alto; + border: 1px solid var(--alto); border-radius: 4px; - background-color: $white; - color: $tundora; + background-color: var(--white); + color: var(--tundora); position: relative; &__close-area { @@ -624,9 +624,9 @@ position: absolute; height: 220px; width: 100%; - border: 1px solid $geyser; + border: 1px solid var(--geyser); border-radius: 4px; - background-color: $white; + background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); margin-top: 11px; margin-left: -1px; @@ -655,7 +655,7 @@ } &__caret { - color: $silver; + color: var(--silver); padding: 0 10px; } @@ -673,7 +673,7 @@ &__asset-icon { .identicon { - border: 1px solid $alto; + border: 1px solid var(--alto); } } @@ -710,9 +710,9 @@ position: absolute; height: 220px; width: 100%; - border: 1px solid $geyser; + border: 1px solid var(--geyser); border-radius: 4px; - background-color: $white; + background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); top: 65px; left: 0; @@ -727,7 +727,7 @@ } &__input-wrapper { - border: 1px solid $alto; + border: 1px solid var(--alto); border-radius: 4px; height: 100%; @@ -740,7 +740,7 @@ height: 100%; &:hover { - background-color: $white; + background-color: var(--white); } } } @@ -754,8 +754,8 @@ width: 100%; border: none; border-radius: 4px; - background-color: $white; - color: $tundora; + background-color: var(--white); + color: var(--tundora); padding: 10px; } } @@ -769,10 +769,10 @@ position: relative; height: 54px; width: 100%; - border: 1px solid $alto; + border: 1px solid var(--alto); border-radius: 4px; - background-color: $white; - color: $tundora; + background-color: var(--white); + color: var(--tundora); padding: 10px; } } @@ -811,8 +811,8 @@ } input:checked + &__button { - background-color: $primary-blue; - border: 1px solid $primary-blue; + background-color: var(--primary-blue); + border: 1px solid var(--primary-blue); color: #fff; } } @@ -842,9 +842,9 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $primary-blue; + border: 1px solid var(--primary-blue); border-radius: 4px; - background-color: $white; + background-color: var(--white); position: absolute; right: 15px; top: 14px; @@ -852,7 +852,7 @@ } &__sliders-icon { - color: $primary-blue; + color: var(--primary-blue); } &__memo-text-area { @@ -867,8 +867,8 @@ display: flex; justify-content: space-evenly; align-items: center; - border-top: 1px solid $alto; - background: $white; + border-top: 1px solid var(--alto); + background: var(--white); padding: 0 12px; flex-shrink: 0; } @@ -896,7 +896,7 @@ @include H3; height: 52px; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); display: flex; align-items: center; justify-content: space-between; @@ -913,7 +913,7 @@ &__close::after { content: '\00D7'; font-size: 1.8em; - color: $dusty-gray; + color: var(--dusty-gray); cursor: pointer; margin-right: 19.25px; } @@ -938,7 +938,7 @@ @include H3; height: 75px; - border-top: 1px solid $alto; + border-top: 1px solid var(--alto); display: flex; align-items: center; justify-content: space-between; @@ -969,7 +969,7 @@ &__revert { @include Paragraph; - color: $silver-chalice; + color: var(--silver-chalice); margin-left: 21.25px; } @@ -992,7 +992,7 @@ position: absolute; top: -18px; right: 0; - color: $red; + color: var(--red); width: 100%; text-align: center; } @@ -1013,7 +1013,7 @@ @include H4; height: 26px; - color: $tundora; + color: var(--tundora); margin-top: 17px; } @@ -1022,7 +1022,7 @@ height: 38px; width: 314px; - color: $tundora; + color: var(--tundora); margin-top: 17px; } @@ -1033,8 +1033,8 @@ .customize-gas-input { height: 54px; width: 315px; - border: 1px solid $geyser; - background-color: $white; + border: 1px solid var(--geyser); + background-color: var(--white); padding-left: 15px; } @@ -1044,7 +1044,7 @@ width: 32px; height: 54px; border-left: 1px solid #dadada; - color: $tundora; + color: var(--tundora); right: 0; padding: 0; display: flex; @@ -1091,9 +1091,9 @@ justify-content: center; height: 24px; width: 24px; - border: 1px solid $primary-blue; + border: 1px solid var(--primary-blue); border-radius: 4px; - background-color: $white; + background-color: var(--white); position: absolute; right: 15px; top: 14px; @@ -1117,5 +1117,5 @@ } .sliders-icon { - color: $primary-blue; + color: var(--primary-blue); } diff --git a/ui/css/itcss/tools/utilities.scss b/ui/css/itcss/tools/utilities.scss index da185ccc9..55fc0a95e 100644 --- a/ui/css/itcss/tools/utilities.scss +++ b/ui/css/itcss/tools/utilities.scss @@ -39,5 +39,5 @@ .critical-error { text-align: center; margin-top: 20px; - color: $red; + color: var(--red); } diff --git a/ui/css/utilities/_colors.scss b/ui/css/utilities/_colors.scss deleted file mode 100644 index da0cb9a66..000000000 --- a/ui/css/utilities/_colors.scss +++ /dev/null @@ -1,75 +0,0 @@ -@use "sass:math"; -@use "sass:map"; - -/** - * Calculate the luminance for a color. - * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests - * - * Note: - * @Gudahtt and @brad-decker have identified a potential performance concern - * that **might** impact build times if this function becomes widely used. It - * has not been validated, and is predicated on user-land math.pow functions - * prior to dart-sass 1.25.0. However, if the build times of sass raise - * exponentially a lookup table of all possible values for the math.pow call - * can be used to bypass the issue. This will require some logic updates as - * well. For reference, the blog post where the performance concern was - * originally made is here https://bit.ly/3c3qXzq (css-tricks) - */ -@function luminance($color) { - $channels: ( - 'red': red($color), - 'green': green($color), - 'blue': blue($color), - ); - - $values: ( - 'red': map.get($channels, 'red') / 255, - 'blue': map.get($channels, 'red') / 255, - 'green': map.get($channels, 'red') / 255, - ); - - @each $name, $value in $values { - @if $value <= 0.03928 { - $value: $value / 12.92; - } - - @else { - $value: ($value + 0.055) / 1.055; - $value: math.pow($value, 2.4); - } - - $values: map.merge($values, ($name: $value)); - } - - @return (0.2126 * map.get($values, 'red')) - + (0.7152 * map.get($values, 'green')) - + (0.0722 * map.get($values, 'blue')); -} - -/** - * Calculate the contrast ratio between two colors. - * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests - */ -@function contrast($back, $front) { - $backLum: luminance($back) + 0.05; - $foreLum: luminance($front) + 0.05; - - @return max($backLum, $foreLum) / min($backLum, $foreLum); -} - -/** - * Determine whether to use dark or light text on top of given color. - * Returns black for dark text and white for light text. - */ -@function choose-contrast-color($color) { - $lightContrast: contrast($color, white); - $darkContrast: contrast($color, black); - - @if ($lightContrast > $darkContrast) { - @return white; - } - - @else { - @return black; - } -} diff --git a/ui/css/utilities/index.scss b/ui/css/utilities/index.scss index abbfed74a..7b24ce838 100644 --- a/ui/css/utilities/index.scss +++ b/ui/css/utilities/index.scss @@ -1,2 +1 @@ -@forward 'colors'; @forward 'spacing'; diff --git a/ui/pages/asset/asset.scss b/ui/pages/asset/asset.scss index eb4ecb3f9..3f69fdcd7 100644 --- a/ui/pages/asset/asset.scss +++ b/ui/pages/asset/asset.scss @@ -19,7 +19,7 @@ .asset-breadcrumb { @include H6; - color: $Black-100; + color: var(--Black-100); background-color: inherit; &__chevron { @@ -35,7 +35,7 @@ .asset-options { &__button { font-size: $font-size-paragraph; - color: $Black-100; + color: var(--Black-100); background-color: inherit; padding: 2px 0 2px 8px; } diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss index 31bbd8458..672feb02e 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/index.scss +++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss @@ -15,7 +15,7 @@ width: 65%; margin-top: 16px; padding: 12px 12px 14px 12px; - border: 1px solid $ui-1; + border: 1px solid var(--ui-1); box-sizing: border-box; border-radius: 100px; align-items: center; @@ -47,7 +47,7 @@ display: flex; height: 27px; padding: 12px 12px 14px 12px; - background-color: $ui-1; + background-color: var(--ui-1); border-radius: 100px; align-items: center; justify-content: center; @@ -203,7 +203,7 @@ div { width: 22px; height: 2px; - background: $primary-blue; + background: var(--primary-blue); position: absolute; } @@ -219,7 +219,7 @@ &__circle { width: 14px; height: 14px; - border: 2px solid $primary-blue; + border: 2px solid var(--primary-blue); border-radius: 50%; background: white; position: absolute; @@ -319,7 +319,7 @@ @include H6; font-weight: 500; - color: $primary-blue; + color: var(--primary-blue); } &__medium-text, @@ -343,7 +343,7 @@ } &__small-blue-text { - color: $primary-blue; + color: var(--primary-blue); } &__info-row { diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss index fb7e6ebca..7227a3552 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.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%; @@ -77,7 +77,7 @@ &__header__tip { height: 25px; width: 25px; - background: $athens-grey; + background: var(--athens-grey); transform: rotate(45deg); position: absolute; bottom: -8px; @@ -92,7 +92,7 @@ } &__account { - color: $dusty-gray; + color: var(--dusty-gray); margin-left: 17px; } @@ -104,7 +104,7 @@ @include H7; height: 22px; - background-color: $white; + background-color: var(--white); width: 124px; .account-list-item { @@ -124,7 +124,7 @@ } &__balance { - color: $dusty-gray; + color: var(--dusty-gray); margin-right: 17px; width: 124px; } @@ -248,7 +248,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 { diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss index 25c336936..e47c6cb50 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss +++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.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%; @@ -77,7 +77,7 @@ &__header__tip { height: 25px; width: 25px; - background: $athens-grey; + background: var(--athens-grey); transform: rotate(45deg); position: absolute; bottom: -8px; @@ -92,7 +92,7 @@ } &__account { - color: $dusty-gray; + color: var(--dusty-gray); margin-left: 17px; } @@ -104,7 +104,7 @@ @include H7; height: 22px; - background-color: $white; + background-color: var(--white); width: 124px; .account-list-item { @@ -124,7 +124,7 @@ } &__balance { - color: $dusty-gray; + color: var(--dusty-gray); margin-right: 17px; width: 124px; } @@ -162,7 +162,7 @@ width: 100%; padding-left: 20px; padding-right: 20px; - color: $dusty-gray; + color: var(--dusty-gray); } &__footer { @@ -174,7 +174,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 { diff --git a/ui/pages/confirm-import-token/index.scss b/ui/pages/confirm-import-token/index.scss index 8946405bf..b7429f9c6 100644 --- a/ui/pages/confirm-import-token/index.scss +++ b/ui/pages/confirm-import-token/index.scss @@ -29,14 +29,14 @@ &__amount { @include H1; - color: $scorpion; + color: var(--scorpion); margin-right: 8px; } &__symbol { @include H5; - color: $scorpion; + color: var(--scorpion); } } } diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.scss b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.scss index df6974e99..acc5f33dd 100644 --- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.scss +++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.scss @@ -15,7 +15,7 @@ &__pending-transactions { & a { - color: $primary-1; + color: var(--primary-1); } } } diff --git a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss b/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss index 9bad79296..290d5cce8 100644 --- a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss +++ b/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.scss @@ -3,7 +3,7 @@ &__actions { display: flex; - border-top: 1px solid $ui-2; + border-top: 1px solid var(--ui-2); background-color: white; padding: 16px; diff --git a/ui/pages/confirmation/confirmation.scss b/ui/pages/confirmation/confirmation.scss index 70e456d05..7635c87c5 100644 --- a/ui/pages/confirmation/confirmation.scss +++ b/ui/pages/confirmation/confirmation.scss @@ -15,7 +15,7 @@ 'footer'; a { - color: $primary-1; + color: var(--primary-1); } &__content { @@ -32,10 +32,10 @@ @include H7; grid-area: navigation; - background-color: $Grey-000; - border-bottom: 1px solid $geyser; + background-color: var(--Grey-000); + border-bottom: 1px solid var(--geyser); padding: 6px 16px 5px 16px; - color: $Grey-500; + color: var(--Grey-500); display: grid; grid-template-columns: 1fr minmax(0, auto) minmax(0, auto); align-items: center; @@ -44,7 +44,7 @@ &__navigation-button { background-color: white; border-radius: 100px; - color: $Grey-500; + color: var(--Grey-500); font-size: $font-size-h6; height: 20px; width: 20px; @@ -52,8 +52,8 @@ &:disabled { cursor: not-allowed; - background-color: $Grey-100; - color: $Grey-300; + background-color: var(--Grey-100); + color: var(--Grey-300); } } diff --git a/ui/pages/connected-accounts/index.scss b/ui/pages/connected-accounts/index.scss index 72117da3b..764ac4d97 100644 --- a/ui/pages/connected-accounts/index.scss +++ b/ui/pages/connected-accounts/index.scss @@ -4,7 +4,7 @@ a:hover { @include H6; - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; } } diff --git a/ui/pages/connected-sites/index.scss b/ui/pages/connected-sites/index.scss index 9af0eaed5..cb5cbf4d2 100644 --- a/ui/pages/connected-sites/index.scss +++ b/ui/pages/connected-sites/index.scss @@ -28,7 +28,7 @@ a:hover { @include H6; - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; } } diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss index 977b4af96..de0d1dd38 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/ui/pages/create-account/connect-hardware/index.scss @@ -118,7 +118,7 @@ @include H6; text-align: center; - color: $primary-1; + color: var(--primary-1); background: unset; } } @@ -153,7 +153,7 @@ margin-bottom: 23px; align-self: flex-start; - color: $scorpion; + color: var(--scorpion); font-weight: bold; display: flex; flex: 1; @@ -164,7 +164,7 @@ margin-bottom: 23px; align-self: flex-end; - color: $scorpion; + color: var(--scorpion); display: flex; } diff --git a/ui/pages/create-account/import-account/index.scss b/ui/pages/create-account/import-account/index.scss index 562040b18..54fe8a277 100644 --- a/ui/pages/create-account/import-account/index.scss +++ b/ui/pages/create-account/import-account/index.scss @@ -1,7 +1,7 @@ .new-account-info-link { cursor: pointer; text-decoration: underline; - color: $primary-blue; + color: var(--primary-blue); margin-inline-start: 4px; } @@ -26,7 +26,7 @@ &__select-label { @include Paragraph; - color: $scorpion; + color: var(--scorpion); } &__select { @@ -45,7 +45,7 @@ &__instruction { @include Paragraph; - color: $scorpion; + color: var(--scorpion); align-self: flex-start; } @@ -61,11 +61,11 @@ height: 54px; width: 315px; - border: 1px solid $geyser; + border: 1px solid var(--geyser); border-radius: 4px; - background-color: $white; + background-color: var(--white); margin-top: 16px; - color: $scorpion; + color: var(--scorpion); padding: 0 20px; } diff --git a/ui/pages/create-account/index.scss b/ui/pages/create-account/index.scss index c40fbd35e..0f01587a9 100644 --- a/ui/pages/create-account/index.scss +++ b/ui/pages/create-account/index.scss @@ -21,13 +21,13 @@ &__header { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid var(--geyser); } &__title { @include H2; - color: $tundora; + color: var(--tundora); font-weight: 500; margin-top: 22px; margin-left: 29px; @@ -43,19 +43,19 @@ height: 54px; padding: 15px 10px; - color: $dusty-gray; + color: var(--dusty-gray); text-align: center; cursor: pointer; } &__tab:hover { - color: $black; + color: var(--black); border-bottom: none; } &__selected { - color: $primary-blue; - border-bottom: 3px solid $primary-blue; + color: var(--primary-blue); + border-bottom: 3px solid var(--primary-blue); cursor: initial; pointer-events: none; } @@ -72,7 +72,7 @@ &__input-label { @include Paragraph; - color: $scorpion; + color: var(--scorpion); align-self: flex-start; } @@ -81,15 +81,15 @@ height: 54px; width: 315.84px; - border: 1px solid $geyser; + border: 1px solid var(--geyser); border-radius: 4px; - background-color: $white; - color: $scorpion; + background-color: var(--white); + color: var(--scorpion); margin-top: 15px; padding: 0 20px; &__error { - border: 1px solid $error-3; + border: 1px solid var(--error-3); } } @@ -97,7 +97,7 @@ @include H7; left: 8px; - color: $red; + color: var(--red); } &__error-amount { diff --git a/ui/pages/first-time-flow/index.scss b/ui/pages/first-time-flow/index.scss index 34a294019..314d21283 100644 --- a/ui/pages/first-time-flow/index.scss +++ b/ui/pages/first-time-flow/index.scss @@ -7,7 +7,7 @@ .first-time-flow { width: 100%; - background-color: $white; + background-color: var(--white); display: flex; justify-content: center; @@ -140,7 +140,7 @@ } &__link-text { - color: $primary-blue; + color: var(--primary-blue); } } diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss index a1c7bbc8d..96e1b7ee7 100644 --- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss @@ -26,7 +26,7 @@ } &--selected { - color: $white; + color: var(--white); } &--dragging { @@ -73,7 +73,7 @@ max-width: $break-small; border: 1px solid #cdcdcd; border-radius: 6px; - background-color: $white; + background-color: var(--white); margin: 24px 0 36px; padding: 12px; diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index e6d217de4..35b6f9163 100644 --- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -13,7 +13,7 @@ justify-content: center; border: 1px solid #cdcdcd; border-radius: 6px; - background-color: $white; + background-color: var(--white); padding: 18px; margin-top: 36px; max-width: 350px; @@ -48,7 +48,7 @@ &__reveal-button { @include H7; - color: $white; + color: var(--white); font-weight: 500; text-transform: uppercase; margin-top: 8px; @@ -56,7 +56,7 @@ } &__export-text { - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; font-weight: 500; } diff --git a/ui/pages/first-time-flow/welcome/index.scss b/ui/pages/first-time-flow/welcome/index.scss index 947ff29a9..185572491 100644 --- a/ui/pages/first-time-flow/welcome/index.scss +++ b/ui/pages/first-time-flow/welcome/index.scss @@ -35,7 +35,7 @@ } a { - color: $primary-1; + color: var(--primary-1); } @media screen and (max-width: $break-small) { diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss index 804c4d8cd..f2322d2cb 100644 --- a/ui/pages/home/index.scss +++ b/ui/pages/home/index.scss @@ -6,7 +6,7 @@ &__main-view { flex: 1 1 66.5%; - background: $white; + background: var(--white); min-width: 0; display: flex; flex-direction: column; @@ -30,12 +30,12 @@ @include H6; flex-grow: 1; - color: $Grey-500; + color: var(--Grey-500); font-weight: 500; } &__main-view &__tab--active { - color: $Blue-500; + color: var(--Blue-500); } &__main-view &__tab button { @@ -50,7 +50,7 @@ padding-left: 24px; padding-right: 24px; - color: $Grey-800; + color: var(--Grey-800); div { margin-bottom: 20px; @@ -103,7 +103,7 @@ a, a:hover { - color: $dodger-blue; + color: var(--dodger-blue); cursor: pointer; } } @@ -130,7 +130,7 @@ text-align: center; a { - color: $primary-1; + color: var(--primary-1); } } @@ -148,7 +148,7 @@ } &__close { - color: $ui-black; + color: var(--ui-black); background: none; margin-left: 20px; } diff --git a/ui/pages/import-token/index.scss b/ui/pages/import-token/index.scss index 4fa718bcc..b687b9170 100644 --- a/ui/pages/import-token/index.scss +++ b/ui/pages/import-token/index.scss @@ -41,7 +41,7 @@ &__edit { flex: 1 1 auto; text-align: right; - color: $primary-blue; + color: var(--primary-blue); padding-right: 4px; cursor: pointer; } @@ -51,7 +51,7 @@ @include H7; display: inline; - color: $primary-blue; + color: var(--primary-blue); padding-left: 0; } diff --git a/ui/pages/import-token/token-list/index.scss b/ui/pages/import-token/token-list/index.scss index f9f296098..ac1bc4d7b 100644 --- a/ui/pages/import-token/token-list/index.scss +++ b/ui/pages/import-token/token-list/index.scss @@ -29,7 +29,7 @@ } &--selected { - border-color: $malibu-blue !important; + border-color: var(--malibu-blue) !important; } &--disabled { @@ -45,7 +45,7 @@ background-size: contain; background-position: center; border-radius: 50%; - background-color: $white; + background-color: var(--white); box-shadow: 0 2px 4px 0 rgba($black, 0.24); margin-right: 12px; flex: 0 0 auto; diff --git a/ui/pages/import-token/token-list/token-list-placeholder/index.scss b/ui/pages/import-token/token-list/token-list-placeholder/index.scss index f2eecb446..cdd423f36 100644 --- a/ui/pages/import-token/token-list/token-list-placeholder/index.scss +++ b/ui/pages/import-token/token-list/token-list-placeholder/index.scss @@ -10,7 +10,7 @@ } &__text { - color: $silver-chalice; + color: var(--silver-chalice); width: 50%; text-align: center; margin-top: 8px; diff --git a/ui/pages/keychains/index.scss b/ui/pages/keychains/index.scss index 65a77007b..ef2d386b0 100644 --- a/ui/pages/keychains/index.scss +++ b/ui/pages/keychains/index.scss @@ -189,7 +189,7 @@ &__error { @include H6; - color: $crimson; + color: var(--crimson); padding-top: 5px; } } diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss index 0d46969cc..cc12200ae 100644 --- a/ui/pages/onboarding-flow/create-password/index.scss +++ b/ui/pages/onboarding-flow/create-password/index.scss @@ -9,7 +9,7 @@ } &__link-text { - color: $primary-1; + color: var(--primary-1); } &__form { @@ -25,7 +25,7 @@ &--checkmark { i { - color: $success-1; + color: var(--success-1); } } diff --git a/ui/pages/onboarding-flow/import-srp/index.scss b/ui/pages/onboarding-flow/import-srp/index.scss index daaff46bd..5804089f9 100644 --- a/ui/pages/onboarding-flow/import-srp/index.scss +++ b/ui/pages/onboarding-flow/import-srp/index.scss @@ -10,11 +10,11 @@ max-width: 500px; a { - color: $Blue-500; + color: var(--Blue-500); &:hover { cursor: pointer; - color: $Blue-300; + color: var(--Blue-300); } } } @@ -59,13 +59,13 @@ } &--error { - border: 1px solid $error-1; + border: 1px solid var(--error-1); } &__error-message { @include H7; - color: $error-1; + color: var(--error-1); } } diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss index b6c9e762c..4e97f5ac5 100644 --- a/ui/pages/onboarding-flow/index.scss +++ b/ui/pages/onboarding-flow/index.scss @@ -11,7 +11,7 @@ .onboarding-flow { width: 100%; - background-color: $white; + background-color: var(--white); display: flex; flex-direction: column; justify-content: center; @@ -20,7 +20,7 @@ &__wrapper { margin-top: 40px; padding: 32px; - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); border-radius: 20px; } diff --git a/ui/pages/onboarding-flow/metametrics/index.scss b/ui/pages/onboarding-flow/metametrics/index.scss index c4c539963..bb260c7a5 100644 --- a/ui/pages/onboarding-flow/metametrics/index.scss +++ b/ui/pages/onboarding-flow/metametrics/index.scss @@ -25,7 +25,7 @@ } &__terms a { - color: $Blue-500; + color: var(--Blue-500); } &__buttons { diff --git a/ui/pages/onboarding-flow/onboarding-app-header/index.scss b/ui/pages/onboarding-flow/onboarding-app-header/index.scss index 68202b7fb..1c8c92740 100644 --- a/ui/pages/onboarding-flow/onboarding-app-header/index.scss +++ b/ui/pages/onboarding-flow/onboarding-app-header/index.scss @@ -1,6 +1,6 @@ .onboarding-app-header { align-items: center; - background: $white; + background: var(--white); position: relative; z-index: $header-z-index; display: flex; diff --git a/ui/pages/onboarding-flow/pin-extension/index.scss b/ui/pages/onboarding-flow/pin-extension/index.scss index 6e0e7e026..3bc6bd174 100644 --- a/ui/pages/onboarding-flow/pin-extension/index.scss +++ b/ui/pages/onboarding-flow/pin-extension/index.scss @@ -2,11 +2,11 @@ max-width: 800px; .control-dots .dot { - background: $ui-2; + background: var(--ui-2); box-shadow: none; &.selected { - background: $ui-4; + background: var(--ui-4); } } diff --git a/ui/pages/onboarding-flow/privacy-settings/index.scss b/ui/pages/onboarding-flow/privacy-settings/index.scss index e5a6d059b..2ad913958 100644 --- a/ui/pages/onboarding-flow/privacy-settings/index.scss +++ b/ui/pages/onboarding-flow/privacy-settings/index.scss @@ -22,11 +22,11 @@ margin-bottom: 20px; a { - color: $Blue-500; + color: var(--Blue-500); &:hover { cursor: pointer; - color: $Blue-300; + color: var(--Blue-300); } } } diff --git a/ui/pages/onboarding-flow/recovery-phrase/index.scss b/ui/pages/onboarding-flow/recovery-phrase/index.scss index ab2f3447a..8bad463aa 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/index.scss +++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss @@ -39,7 +39,7 @@ justify-content: center; padding: 8px 0 18px; border-radius: 4px; - color: $ui-white; + color: var(--ui-white); &--text { margin-top: 32px; @@ -83,7 +83,7 @@ display: flex; justify-content: space-evenly; width: 32%; - color: $primary-blue; + color: var(--primary-blue); cursor: pointer; margin-bottom: 24px; @@ -92,7 +92,7 @@ } &:active { - color: $ui-black; + color: var(--ui-black); background-color: transparent; border: none; transform: scale(0.97); @@ -109,7 +109,7 @@ &--with-input { width: 120px; - box-shadow: 0 3px 4px -3px $Grey-800; + box-shadow: 0 3px 4px -3px var(--Grey-800); border-width: 2px; border-radius: 13px; height: 32px; diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss index ef2d0b314..3a1f80041 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss +++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss @@ -25,7 +25,7 @@ } &__highlighted { - background-color: $primary-2; + background-color: var(--primary-2); padding: 12px; border-radius: 10px; } diff --git a/ui/pages/onboarding-flow/welcome/index.scss b/ui/pages/onboarding-flow/welcome/index.scss index 78804c057..eecb1f30a 100644 --- a/ui/pages/onboarding-flow/welcome/index.scss +++ b/ui/pages/onboarding-flow/welcome/index.scss @@ -4,11 +4,11 @@ width: 600px; .control-dots .dot { - background: $ui-2; + background: var(--ui-2); box-shadow: none; &.selected { - background: $ui-4; + background: var(--ui-4); } } @@ -18,11 +18,11 @@ } .carousel .control-next.control-arrow::before { - border-left-color: $ui-3; + border-left-color: var(--ui-3); } .carousel .control-prev.control-arrow::before { - border-right-color: $ui-3; + border-right-color: var(--ui-3); } .carousel.carousel-slider .control-arrow:hover { diff --git a/ui/pages/permissions-connect/choose-account/index.scss b/ui/pages/permissions-connect/choose-account/index.scss index d48c938fc..910770dfd 100644 --- a/ui/pages/permissions-connect/choose-account/index.scss +++ b/ui/pages/permissions-connect/choose-account/index.scss @@ -16,7 +16,7 @@ } &__cancel { - color: $Red-400; + color: var(--Red-400); } &__footer-container { diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss index 716702921..9876fb73f 100644 --- a/ui/pages/permissions-connect/index.scss +++ b/ui/pages/permissions-connect/index.scss @@ -26,7 +26,7 @@ &__back { @include H7; - color: $Grey-500; + color: var(--Grey-500); font-weight: bold; cursor: pointer; @@ -38,7 +38,7 @@ &__page-count { @include H7; - color: $Grey-500; + color: var(--Grey-500); grid-column: 2; justify-self: end; font-weight: bold; diff --git a/ui/pages/permissions-connect/redirect/index.scss b/ui/pages/permissions-connect/redirect/index.scss index 4005019cf..edd0a15e8 100644 --- a/ui/pages/permissions-connect/redirect/index.scss +++ b/ui/pages/permissions-connect/redirect/index.scss @@ -12,7 +12,7 @@ justify-content: space-between; align-items: center; text-align: center; - color: $Black-100; + color: var(--Black-100); } &__icons { diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.scss b/ui/pages/send/send-content/send-gas-row/send-gas-row.scss index 676d40885..af3776d85 100644 --- a/ui/pages/send/send-content/send-gas-row/send-gas-row.scss +++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.scss @@ -2,10 +2,10 @@ @include Paragraph; height: 54px; - border: 1px solid $alto; + border: 1px solid var(--alto); border-radius: 4px; - background-color: $white; - color: $scorpion; + background-color: var(--white); + color: var(--scorpion); padding: 8px 10px; position: relative; @@ -16,7 +16,7 @@ &__input { @include Paragraph; - color: $scorpion; + color: var(--scorpion); border: none; max-width: 22ch; } @@ -24,7 +24,7 @@ &__primary-currency { @include Paragraph; - color: $scorpion; + color: var(--scorpion); font-weight: 400; } @@ -36,7 +36,7 @@ &__converted-currency { @include H7; - color: $dusty-gray; + color: var(--dusty-gray); } &__input-wrapper { @@ -64,7 +64,7 @@ &__currency-symbol { margin-top: 1px; - color: $scorpion; + color: var(--scorpion); } .react-numeric-input { diff --git a/ui/pages/send/send.scss b/ui/pages/send/send.scss index 6b3df6db9..10a02f96f 100644 --- a/ui/pages/send/send.scss +++ b/ui/pages/send/send.scss @@ -5,7 +5,7 @@ position: relative; display: flex; justify-content: center; - background-color: $Grey-000; + background-color: var(--Grey-000); border-bottom: none; padding: 14px 0 3px 0; @@ -39,8 +39,8 @@ margin: 0; padding: 0.5rem; flex: 0 0 auto; - background-color: $Grey-000; - border-bottom: 1px solid $alto; + background-color: var(--Grey-000); + border-bottom: 1px solid var(--alto); } &__select-recipient-wrapper { @@ -58,7 +58,7 @@ @extend %row-nowrap; padding: 1rem; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); border-radius: 0; align-items: center; justify-content: flex-start; @@ -87,7 +87,7 @@ padding: 0.5rem; text-align: center; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); justify-content: flex-start; } } @@ -99,13 +99,13 @@ &__group-label { @include H8; - background-color: $Grey-000; - color: $Grey-600; + background-color: var(--Grey-000); + color: var(--Grey-600); padding: 0.5rem 1rem; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); &:first-of-type { - border-top: 1px solid $alto; + border-top: 1px solid var(--alto); } } @@ -115,7 +115,7 @@ padding: 0.75rem 1rem; align-items: center; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); cursor: pointer; &:hover { @@ -141,13 +141,13 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - color: $black; + color: var(--black); } &__subtitle { @include H8; - color: $Grey-500; + color: var(--Grey-500); } } @@ -167,14 +167,14 @@ flex: 1 1 auto; width: 0; align-items: center; - background: $white; + background: var(--white); border-radius: 0.5rem; padding: 0.75rem 0.5rem; - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); transition: border-color 150ms ease-in-out; &:focus-within { - border-color: $Grey-500; + border-color: var(--Grey-500); } &__status-icon { @@ -199,7 +199,7 @@ outline: none; &::placeholder { - color: $Grey-200; + color: var(--Grey-200); } } @@ -226,7 +226,7 @@ } &--valid { - border-color: $Blue-500; + border-color: var(--Blue-500); .ens-input__wrapper { &__status-icon { @@ -238,7 +238,7 @@ @include H7; - color: $Blue-500; + color: var(--Blue-500); } } } @@ -257,7 +257,7 @@ &__subtitle { @include H7; - color: $Grey-500; + color: var(--Grey-500); margin-top: 0.25rem; } } diff --git a/ui/pages/settings/alerts-tab/alerts-tab.scss b/ui/pages/settings/alerts-tab/alerts-tab.scss index 5f6ef2de4..de31726bf 100644 --- a/ui/pages/settings/alerts-tab/alerts-tab.scss +++ b/ui/pages/settings/alerts-tab/alerts-tab.scss @@ -9,7 +9,7 @@ } &__body > * { - border-bottom: 1px solid $Grey-100; + border-bottom: 1px solid var(--Grey-100); padding: 16px 8px; height: 100%; } diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss index 085a85a3f..16e3da6cf 100644 --- a/ui/pages/settings/contact-list-tab/index.scss +++ b/ui/pages/settings/contact-list-tab/index.scss @@ -24,7 +24,7 @@ border-bottom: 1px solid #dedede; &:hover { - border: 1px solid $primary-blue; + border: 1px solid var(--primary-blue); cursor: pointer; } } @@ -54,7 +54,7 @@ @include H6; justify-content: flex-end; - color: $accent-red; + color: var(--accent-red); } } @@ -87,13 +87,13 @@ &__input { @include H4; - border: 1px solid $Grey-200; + border: 1px solid var(--Grey-200); border-radius: 6px; - color: $Grey-800; + color: var(--Grey-800); padding: 0.875rem 1rem; &:focus-within { - border-color: $Blue-500; + border-color: var(--Blue-500); } margin-top: 0.25rem; @@ -129,7 +129,7 @@ &__label--capitalized { @include H7; - color: $Grey-500; + color: var(--Grey-500); margin-bottom: 0.25rem; } @@ -143,7 +143,7 @@ display: flex; flex-flow: row nowrap; - color: $Grey-800; + color: var(--Grey-800); word-break: break-word; &--address { @@ -214,7 +214,7 @@ @include H7; left: 8px; - color: $red; + color: var(--red); } } diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss index 0ebb018db..b10a15b37 100644 --- a/ui/pages/settings/index.scss +++ b/ui/pages/settings/index.scss @@ -6,7 +6,7 @@ .settings-page { position: relative; - background: $white; + background: var(--white); display: flex; flex-flow: column nowrap; @@ -36,7 +36,7 @@ @include H4; padding: 16px 4px; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); margin-right: 24px; height: 72px; align-items: center; @@ -55,7 +55,7 @@ &__subheader--link:hover { cursor: pointer; - color: $primary-blue; + color: var(--primary-blue); } &__subheader--break { @@ -115,7 +115,7 @@ &__close-button::after { content: '\00D7'; font-size: 40px; - color: $ui-4; + color: var(--ui-4); cursor: pointer; } @@ -203,7 +203,7 @@ &__content-description { @include H6; - color: $dusty-gray; + color: var(--dusty-gray); padding-top: 5px; } diff --git a/ui/pages/settings/info-tab/index.scss b/ui/pages/settings/info-tab/index.scss index 4604a5bc4..45f6112c9 100644 --- a/ui/pages/settings/info-tab/index.scss +++ b/ui/pages/settings/info-tab/index.scss @@ -41,21 +41,21 @@ @include H6; padding-top: 5px; - color: $dusty-gray; + color: var(--dusty-gray); } &__separator { margin: 15px 0; width: 80px; - border-color: $alto; + border-color: var(--alto); border: none; height: 1px; - background-color: $alto; - color: $alto; + background-color: var(--alto); + color: var(--alto); } &__about { - color: $dusty-gray; + color: var(--dusty-gray); margin-bottom: 15px; } } diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss index 74942f809..a42037f78 100644 --- a/ui/pages/settings/networks-tab/index.scss +++ b/ui/pages/settings/networks-tab/index.scss @@ -28,7 +28,7 @@ @include H4; padding: 16px 4px; - border-bottom: 1px solid $alto; + border-bottom: 1px solid var(--alto); height: 72px; align-items: center; display: flex; @@ -42,7 +42,7 @@ &__sub-header-text { @include H4; - color: $ui-4; + color: var(--ui-4); margin-right: 10px; } diff --git a/ui/pages/settings/settings-tab/index.scss b/ui/pages/settings/settings-tab/index.scss index 39670e46f..f4e6d4c79 100644 --- a/ui/pages/settings/settings-tab/index.scss +++ b/ui/pages/settings/settings-tab/index.scss @@ -2,7 +2,7 @@ &__error { padding-bottom: 20px; text-align: center; - color: $crimson; + color: var(--crimson); } &__rpc-save-button { @@ -14,15 +14,15 @@ &__button--red { border-color: lighten($monzo, 10%); - color: $monzo; + color: var(--monzo); &:active { background: lighten($monzo, 55%); - border-color: $monzo; + border-color: var(--monzo); } &:hover { - border-color: $monzo; + border-color: var(--monzo); } } diff --git a/ui/pages/swaps/awaiting-swap/index.scss b/ui/pages/swaps/awaiting-swap/index.scss index f2792eb5a..297970dc1 100644 --- a/ui/pages/swaps/awaiting-swap/index.scss +++ b/ui/pages/swaps/awaiting-swap/index.scss @@ -21,7 +21,7 @@ } a { - color: $Blue-500; + color: var(--Blue-500); } &__status-image { @@ -32,13 +32,13 @@ &__header { @include H3; - color: $Black-100; + color: var(--Black-100); } &__main-descrption { @include H6; - color: $Grey-500; + color: var(--Grey-500); margin-top: 16px; width: 100%; } @@ -46,7 +46,7 @@ &__time-estimate { @include H7; - color: $Black-100; + color: var(--Black-100); margin-top: 20px; font-style: italic; @@ -66,7 +66,7 @@ &__view-on-etherscan, &__support-link { - color: $Blue-500; + color: var(--Blue-500); margin-top: 24px; cursor: pointer; } @@ -90,7 +90,7 @@ } &__amount-and-symbol { - color: $Black-100; + color: var(--Black-100); font-weight: bold; } } diff --git a/ui/pages/swaps/build-quote/index.scss b/ui/pages/swaps/build-quote/index.scss index 4a7634cd0..f8cb43258 100644 --- a/ui/pages/swaps/build-quote/index.scss +++ b/ui/pages/swaps/build-quote/index.scss @@ -42,7 +42,7 @@ @include H5; font-weight: bold; - color: $Black-100; + color: var(--Black-100); margin-top: 3px; } @@ -67,7 +67,7 @@ &__max-button { @include H7; - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; } @@ -75,7 +75,7 @@ @include H7; width: 100%; - color: $Grey-500; + color: var(--Grey-500); margin-top: 4px; display: flex; flex-flow: column; @@ -84,17 +84,17 @@ &--error { div:first-of-type { font-weight: bold; - color: $Black-100; + color: var(--Black-100); } .build-quote__form-error:first-of-type { font-weight: bold; - color: $Red-500; + color: var(--Red-500); } div:last-of-type { font-weight: normal; - color: $Grey-500; + color: var(--Grey-500); } } } @@ -142,7 +142,7 @@ @include H7; width: 100%; - color: $Grey-500; + color: var(--Grey-500); margin-top: 4px; .info-tooltip { @@ -151,7 +151,7 @@ } &__token-etherscan-link { - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; } diff --git a/ui/pages/swaps/countdown-timer/index.scss b/ui/pages/swaps/countdown-timer/index.scss index 8f065a402..f6d31f58d 100644 --- a/ui/pages/swaps/countdown-timer/index.scss +++ b/ui/pages/swaps/countdown-timer/index.scss @@ -19,7 +19,7 @@ &--warning { .countdown-timer__time { - color: $Red-500; + color: var(--Red-500); } } } diff --git a/ui/pages/swaps/dropdown-input-pair/index.scss b/ui/pages/swaps/dropdown-input-pair/index.scss index cc2764ec4..7428130ba 100644 --- a/ui/pages/swaps/dropdown-input-pair/index.scss +++ b/ui/pages/swaps/dropdown-input-pair/index.scss @@ -14,7 +14,7 @@ } div { - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; @@ -47,7 +47,7 @@ height: 100%; display: flex; align-items: center; - color: $Grey-500; + color: var(--Grey-500); &--two-lines { right: inherit; diff --git a/ui/pages/swaps/dropdown-search-list/index.scss b/ui/pages/swaps/dropdown-search-list/index.scss index c8321e9df..2d4127c1e 100644 --- a/ui/pages/swaps/dropdown-search-list/index.scss +++ b/ui/pages/swaps/dropdown-search-list/index.scss @@ -19,7 +19,7 @@ &--open { box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); } &__close-area { @@ -44,14 +44,14 @@ height: 60px; &:hover { - background: $Grey-000; + background: var(--Grey-000); } } &__caret { position: absolute; right: 16px; - color: $Grey-200; + color: var(--Grey-200); } &__selector-closed { @@ -83,7 +83,7 @@ &__closed-primary-label { @include H4; - color: $Black-100; + color: var(--Black-100); max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -92,14 +92,14 @@ &__search-list--open { box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); } &__default-dropdown-icon { width: 34px; height: 34px; border-radius: 50%; - background: $Grey-200; + background: var(--Grey-200); flex: 0 1 auto; } @@ -118,14 +118,14 @@ } &__select-default { - color: $Grey-200; + color: var(--Grey-200); } &__placeholder { @include H6; padding: 16px; - color: $Grey-500; + color: var(--Grey-500); min-height: 300px; position: relative; z-index: 1002; @@ -149,10 +149,10 @@ padding: 16px 12px; box-sizing: border-box; cursor: pointer; - border-top: 1px solid $Grey-100; + border-top: 1px solid var(--Grey-100); position: relative; z-index: 1; - background: $white; + background: var(--white); } &__loading-item-text-container { diff --git a/ui/pages/swaps/exchange-rate-display/index.scss b/ui/pages/swaps/exchange-rate-display/index.scss index 3f9a44ae4..64dfafb82 100644 --- a/ui/pages/swaps/exchange-rate-display/index.scss +++ b/ui/pages/swaps/exchange-rate-display/index.scss @@ -4,7 +4,7 @@ display: flex; align-items: flex-end; justify-content: center; - color: $Black-100; + color: var(--Black-100); width: 100%; flex-wrap: wrap; @@ -48,6 +48,6 @@ } &--white { - color: $white; + color: var(--white); } } diff --git a/ui/pages/swaps/fee-card/index.scss b/ui/pages/swaps/fee-card/index.scss index 3e39de1b5..022fc25f9 100644 --- a/ui/pages/swaps/fee-card/index.scss +++ b/ui/pages/swaps/fee-card/index.scss @@ -23,7 +23,7 @@ @include H6; font-weight: bold; - color: $Blue-500; + color: var(--Blue-500); } &__quote-link-container { @@ -35,13 +35,13 @@ &__quote-link-text { @include H7; - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; padding-right: 4px; } &__caret-right { - color: $Blue-500; + color: var(--Blue-500); width: 6px; height: 6px; display: flex; @@ -84,7 +84,7 @@ } &__row-header-text--bold { - color: $Black-100; + color: var(--Black-100); } &__row-header-text { @@ -147,18 +147,18 @@ &__link, &__link:hover { - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; } &__edit-link { - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; padding-left: 6px; } &__total-box { - border-top: 1px solid $Grey-100; + border-top: 1px solid var(--Grey-100); padding: 12px 16px 16px 16px; } @@ -174,13 +174,13 @@ display: flex; justify-content: flex-end; font-weight: bold; - color: $Grey-500; + color: var(--Grey-500); margin-top: 4px; } &__row-header-secondary, &__row-header-secondary--bold { - color: $Grey-500; + color: var(--Grey-500); } &__row-header-secondary, @@ -189,11 +189,11 @@ } &__row-header-primary { - color: $Grey-500; + color: var(--Grey-500); } &__row-header-primary--bold { - color: $Black-100; + color: var(--Black-100); } &__row-header-text--bold, diff --git a/ui/pages/swaps/import-token/index.scss b/ui/pages/swaps/import-token/index.scss index 28e7c396b..d7b12960a 100644 --- a/ui/pages/swaps/import-token/index.scss +++ b/ui/pages/swaps/import-token/index.scss @@ -5,19 +5,19 @@ margin-top: 0; &--danger { - border-color: $Red-300; - background: $Red-000; + border-color: var(--Red-300); + background: var(--Red-000); } &__message { - color: $Black-100; + color: var(--Black-100); text-align: left; } } &__contract-address { border-radius: 8px; - background-color: $Grey-000; + background-color: var(--Grey-000); padding: 5px 10px; } diff --git a/ui/pages/swaps/index.scss b/ui/pages/swaps/index.scss index 75d5db813..38bbcee7c 100644 --- a/ui/pages/swaps/index.scss +++ b/ui/pages/swaps/index.scss @@ -36,7 +36,7 @@ @media screen and (min-width: $break-large) { width: 460px; background: white; - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); border-radius: 8px; height: 620px; @@ -66,7 +66,7 @@ @include H5; font-weight: bold; - color: $Black-100; + color: var(--Black-100); margin-top: -5px; flex: 1; text-align: center; @@ -79,7 +79,7 @@ align-items: center; padding-top: 0; padding-bottom: 16px; - background: $Grey-000; + background: var(--Grey-000); width: 100%; position: relative; flex-direction: row; @@ -94,7 +94,7 @@ &__header-cancel { @include H7; - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; padding-right: 24px; flex: 1; @@ -104,7 +104,7 @@ &__header-edit { @include H7; - color: $Blue-500; + color: var(--Blue-500); cursor: pointer; padding-left: 24px; flex: 1; diff --git a/ui/pages/swaps/loading-swaps-quotes/index.scss b/ui/pages/swaps/loading-swaps-quotes/index.scss index e9b21bf0e..60b0d46dd 100644 --- a/ui/pages/swaps/loading-swaps-quotes/index.scss +++ b/ui/pages/swaps/loading-swaps-quotes/index.scss @@ -17,7 +17,7 @@ &__quote-counter { @include H7; - color: $Grey-500; + color: var(--Grey-500); margin-top: 3px; display: flex; justify-content: center; @@ -29,7 +29,7 @@ @include H4; font-weight: bold; - color: $Black-100; + color: var(--Black-100); display: flex; justify-content: center; width: 100%; @@ -107,7 +107,7 @@ display: flex; justify-content: center; align-items: center; - background: $ui-black; + background: var(--ui-black); } img { @@ -116,21 +116,21 @@ } span { - color: $ui-white; + color: var(--ui-white); } } &__loading-bar-container { width: 248px; height: 3px; - background: $Grey-100; + background: var(--Grey-100); display: flex; margin-top: 16px; } &__loading-bar { height: 3px; - background: $Blue-500; + background: var(--Blue-500); -webkit-transition: width 0.5s linear; -moz-transition: width 0.5s linear; -o-transition: width 0.5s linear; diff --git a/ui/pages/swaps/main-quote-summary/index.scss b/ui/pages/swaps/main-quote-summary/index.scss index 28d47f7e3..87c714d8d 100644 --- a/ui/pages/swaps/main-quote-summary/index.scss +++ b/ui/pages/swaps/main-quote-summary/index.scss @@ -5,7 +5,7 @@ align-items: center; position: relative; width: 100%; - color: $Black-100; + color: var(--Black-100); margin-top: 28px; margin-bottom: 56px; @@ -18,7 +18,7 @@ @include H6; - color: $Grey-500; + color: var(--Grey-500); } &__source-row { @@ -53,7 +53,7 @@ &__destination-row-symbol { margin-left: 5px; - color: $Black-100; + color: var(--Black-100); } &__icon, @@ -117,6 +117,6 @@ } &__exchange-rate-display { - color: $Grey-500; + color: var(--Grey-500); } } diff --git a/ui/pages/swaps/searchable-item-list/index.scss b/ui/pages/swaps/searchable-item-list/index.scss index 85e4fb5a3..f656928c2 100644 --- a/ui/pages/swaps/searchable-item-list/index.scss +++ b/ui/pages/swaps/searchable-item-list/index.scss @@ -1,12 +1,12 @@ .searchable-item-list { - background: $white; + background: var(--white); width: 100%; position: relative; &__search { > div { border: none; - border-bottom: 1px solid $Grey-100; + border-bottom: 1px solid var(--Grey-100); border-radius: 0; height: 55px; font-size: 12px; @@ -14,26 +14,26 @@ input { @include H6; - color: $Grey-500; + color: var(--Grey-500); line-height: 100%; &::-webkit-input-placeholder { - color: $Grey-500; + color: var(--Grey-500); opacity: 1; } &:-moz-placeholder { - color: $Grey-500; + color: var(--Grey-500); opacity: 1; } &::-moz-placeholder { - color: $Grey-500; + color: var(--Grey-500); opacity: 1; } &::placeholder { - color: $Grey-500; + color: var(--Grey-500); opacity: 1; } } @@ -54,7 +54,7 @@ padding: 8px 12px; box-sizing: border-box; cursor: pointer; - border-top: 1px solid $Grey-100; + border-top: 1px solid var(--Grey-100); position: relative; min-height: 50px; @@ -68,11 +68,11 @@ &:hover, &:focus { - background: $Grey-000; + background: var(--Grey-000); } &--selected { - border: 1px solid $malibu-blue !important; + border: 1px solid var(--malibu-blue) !important; } &--disabled { @@ -94,7 +94,7 @@ &__message { text-align: left; - color: $Black-100; + color: var(--Black-100); } a { @@ -170,7 +170,7 @@ @include H7; line-height: 100%; - color: $Grey-500; + color: var(--Grey-500); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -185,7 +185,7 @@ @include H7; line-height: 100%; - color: $Grey-500; + color: var(--Grey-500); opacity: 0.5; text-overflow: ellipsis; overflow: hidden; @@ -202,7 +202,7 @@ } &__item--highlighted { - background: $Grey-000; + background: var(--Grey-000); } &__identicon { diff --git a/ui/pages/swaps/select-quote-popover/index.scss b/ui/pages/swaps/select-quote-popover/index.scss index e2a3a2cc7..07bc9c209 100644 --- a/ui/pages/swaps/select-quote-popover/index.scss +++ b/ui/pages/swaps/select-quote-popover/index.scss @@ -28,7 +28,7 @@ &__popover-bg { height: 100%; width: 100%; - background: $Grey-100; + background: var(--Grey-100); opacity: 1; @media screen and (min-width: $break-large) { @@ -58,7 +58,7 @@ @include H8; font-weight: bold; - color: $Black-100; + color: var(--Black-100); height: 43px; margin-bottom: 4px; } @@ -72,17 +72,17 @@ @include H6; cursor: pointer; - color: $black; + color: var(--black); height: 49px; - border-bottom: 1px solid $Grey-100; + border-bottom: 1px solid var(--Grey-100); margin-bottom: 8px; border-radius: 8px; - background: $Grey-000; + background: var(--Grey-000); padding-right: 12px; border: none; &:hover { - border: 1px solid $Blue-500; + border: 1px solid var(--Blue-500); width: 101%; padding-right: 11px; padding-left: 19.5px; @@ -90,7 +90,7 @@ &--no-hover { &:hover { - border: 1px solid $Grey-100; + border: 1px solid var(--Grey-100); width: 100%; padding-right: 12px; padding-left: 20px; @@ -98,8 +98,8 @@ } &--selected { - color: $white; - background: linear-gradient(90deg, $Blue-500 0%, $Blue-400 101.32%); + color: var(--white); + background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%); box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15); border-radius: 8px; border-bottom: none; @@ -107,7 +107,7 @@ height: 64px; &:hover { - background: linear-gradient(90deg, $Blue-500 0%, $Blue-400 101.32%); + background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%); width: 100%; padding-left: 20px; padding-right: 12px; @@ -115,15 +115,15 @@ } .select-quote-popover__caret-right { - color: $white; + color: var(--white); &:hover { - color: $Grey-500; + color: var(--Grey-500); } } .select-quote-popover__zero-slippage { - color: $white; + color: var(--white); } } } @@ -146,7 +146,7 @@ } &__caret-right { - color: $Grey-500; + color: var(--Grey-500); width: 32px; height: 32px; display: flex; @@ -160,7 +160,7 @@ &:hover { border-radius: 8px; background: white; - border: 1px solid $Blue-500; + border: 1px solid var(--Blue-500); } } @@ -211,7 +211,7 @@ &__receiving-symbol { - color: $Grey-500; + color: var(--Grey-500); > div { width: 12px; @@ -247,15 +247,15 @@ padding-bottom: 2px; &--blue { - background: $Blue-300; + background: var(--Blue-300); } &--orange { - background: $Orange-400; + background: var(--Orange-400); } &--green { - background: $Green-500; + background: var(--Green-500); } } } diff --git a/ui/pages/swaps/select-quote-popover/quote-details/index.scss b/ui/pages/swaps/select-quote-popover/quote-details/index.scss index 8de9ed0c5..31039fa62 100644 --- a/ui/pages/swaps/select-quote-popover/quote-details/index.scss +++ b/ui/pages/swaps/select-quote-popover/quote-details/index.scss @@ -7,7 +7,7 @@ &__detail-header { @include H7; - color: $Grey-400; + color: var(--Grey-400); margin-bottom: 2px; display: flex; } @@ -15,7 +15,7 @@ &__detail-content { @include H6; - color: $Black-100; + color: var(--Black-100); > div { justify-content: flex-start; @@ -23,17 +23,17 @@ } &__conversion-rate { - color: $Black-100; + color: var(--Black-100); justify-content: flex-start; align-items: center; height: inherit; .view-quote__conversion-rate-eth-label { - color: $Black-100; + color: var(--Black-100); } i { - color: $Blue-500; + color: var(--Blue-500); } * { @@ -62,7 +62,7 @@ display: flex; flex-flow: column; justify-content: center; - border-top: 1px solid $Grey-100; + border-top: 1px solid var(--Grey-100); &--high { min-height: 60px; @@ -73,7 +73,7 @@ .view-quote__conversion-rate-token-label { @include H6; - color: $Black-100; + color: var(--Black-100); font-weight: bold; margin-left: 2px; } diff --git a/ui/pages/swaps/slippage-buttons/index.scss b/ui/pages/swaps/slippage-buttons/index.scss index fcfab7eb9..be5b061db 100644 --- a/ui/pages/swaps/slippage-buttons/index.scss +++ b/ui/pages/swaps/slippage-buttons/index.scss @@ -47,7 +47,7 @@ &__error-text { @include H7; - color: $Red-500; + color: var(--Red-500); margin-top: 8px; } @@ -71,7 +71,7 @@ border: none; width: 64px; text-align: center; - background: $Blue-500; + background: var(--Blue-500); color: white; font-weight: inherit; @@ -115,7 +115,7 @@ &--danger { input { - background: $Red-500; + background: var(--Red-500); } } } diff --git a/ui/pages/swaps/swaps-footer/index.scss b/ui/pages/swaps/swaps-footer/index.scss index 6827eac88..a360a9ae7 100644 --- a/ui/pages/swaps/swaps-footer/index.scss +++ b/ui/pages/swaps/swaps-footer/index.scss @@ -3,8 +3,8 @@ &--warning { .btn-primary { - background: $Red-500; - border-color: $Red-500; + background: var(--Red-500); + border-color: var(--Red-500); } } @@ -38,7 +38,7 @@ &__bottom-text { @include H7; - color: $Blue-500; + color: var(--Blue-500); margin-bottom: 16px; cursor: pointer; display: flex; diff --git a/ui/pages/swaps/view-quote/index.scss b/ui/pages/swaps/view-quote/index.scss index f7048df2c..90b037741 100644 --- a/ui/pages/swaps/view-quote/index.scss +++ b/ui/pages/swaps/view-quote/index.scss @@ -36,7 +36,7 @@ &--danger { span { - color: $Red-500; + color: var(--Red-500); } } } @@ -64,7 +64,7 @@ cursor: pointer; border-radius: 28px; padding: 5px 18px; - background: linear-gradient(90deg, $Blue-500 0%, $Blue-400 101.32%); + background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%); @media screen and (min-width: $break-large) { @@ -113,7 +113,7 @@ &.low { .actionable-message { button { - background: $Blue-500; + background: var(--Blue-500); color: #fff; } } @@ -121,22 +121,22 @@ &.medium { .actionable-message { - border-color: $Yellow-500; - background: $Yellow-100; + border-color: var(--Yellow-500); + background: var(--Yellow-100); button { - background: $Yellow-500; + background: var(--Yellow-500); } } } &.high { .actionable-message { - border-color: $Red-300; - background: $Red-000; + border-color: var(--Red-300); + background: var(--Red-000); button { - background: $Red-500; + background: var(--Red-500); color: #fff; } } @@ -208,7 +208,7 @@ &__metamask-rate-text { @include H7; - color: $Grey-500; + color: var(--Grey-500); } &__metamask-rate-info-icon { diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss index aaad02b85..bf83eadc8 100644 --- a/ui/pages/unlock-page/index.scss +++ b/ui/pages/unlock-page/index.scss @@ -6,10 +6,10 @@ width: 357px; padding: 30px; font-weight: 400; - color: $silver-chalice; + color: var(--silver-chalice); &__container { - background: $white; + background: var(--white); display: flex; align-self: stretch; justify-content: center; @@ -25,7 +25,7 @@ margin-top: 5px; font-weight: 800; - color: $tundora; + color: var(--tundora); } &__form { @@ -48,7 +48,7 @@ &__link { cursor: pointer; background-color: unset; - color: $Blue-500; + color: var(--Blue-500); font-size: unset; } @@ -57,7 +57,7 @@ font-size: 0.75rem; a { - color: $Blue-500; + color: var(--Blue-500); } } }