m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

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

Browse Source
This commit is contained in:
David Walsh 2022-01-06 11:35:49 -06:00 committed by GitHub
parent f5dcd12293
commit 10dc686505
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
191 changed files with 1071 additions and 1137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/components/app/account-menu/index.scss
View File

@ -7,7 +7,7 @@
background: rgba($black, 0.8); background: rgba($black, 0.8);
box-shadow: rgba($black, 0.15) 0 2px 2px 2px; box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
min-width: 150px; min-width: 150px;
color: $white; color: var(--white);
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
right: calc(((100vw - 100%) / 2) + 8px); right: calc(((100vw - 100%) / 2) + 8px);
@ -67,7 +67,7 @@
} }
&__divider { &__divider {
background-color: $scorpion; background-color: var(--scorpion);
width: 100%; width: 100%;
height: 1px; height: 1px;
} }
@ -100,10 +100,10 @@
& &__lock-button { & &__lock-button {
@include H7; @include H7;
border: 1px solid $ui-white; border: 1px solid var(--ui-white);
background-color: transparent; background-color: transparent;
color: $white;
padding: 3.5px 5px; padding: 3.5px 5px;
color: var(--white);
width: 59px; width: 59px;
&:hover { &:hover {
@ -151,8 +151,8 @@
height: 15px; height: 15px;
margin-top: 5px; margin-top: 5px;
margin-right: 10px; margin-right: 10px;
background-color: $dusty-gray; background-color: var(--dusty-gray);
color: $black; color: var(--black);
font-weight: normal; font-weight: normal;
letter-spacing: 0.5px; letter-spacing: 0.5px;
display: flex; display: flex;
@ -186,7 +186,7 @@
.remove-account-icon::after { .remove-account-icon::after {
content: '\00D7'; content: '\00D7';
font-size: 25px; font-size: 25px;
color: $white; color: var(--white);
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
margin-top: -5px; margin-top: -5px;
@ -224,7 +224,7 @@
&__name { &__name {
@include H4; @include H4;
color: $white; color: var(--white);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -234,7 +234,7 @@
&__balance { &__balance {
@include H6; @include H6;
color: $dusty-gray; color: var(--dusty-gray);
} }
&__action { &__action {

6
ui/components/app/advanced-gas-controls/index.scss
View File

@ -8,10 +8,10 @@
} }
.form-field__row--error .form-field__heading-title h6 { .form-field__row--error .form-field__heading-title h6 {
color: $error-1; color: var(--error-1);
& path { & path {
fill: $error-1; fill: var(--error-1);
} }
} }
@ -21,6 +21,6 @@
} }
path { path {
fill: $ui-3; fill: var(--ui-3);
} }
} }

2
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 2px; margin-top: 2px;
color: $ui-4; color: var(--ui-4);
font-size: $font-size-h8; font-size: $font-size-h8;
&__label { &__label {

2
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/index.scss
View File

@ -8,7 +8,7 @@
} }
&__separator { &__separator {
border-top: 1px solid $ui-grey; border-top: 1px solid var(--ui-grey);
margin: 16px 0; margin: 16px 0;
} }
} }

4
ui/components/app/advanced-gas-fee-popover/index.scss
View File

@ -1,6 +1,6 @@
.advanced-gas-fee-popover { .advanced-gas-fee-popover {
&__separator { &__separator {
border-top: 1px solid $ui-grey; border-top: 1px solid var(--ui-grey);
margin: 16px 0; margin: 16px 0;
} }
@ -12,7 +12,7 @@
border-radius: 0; border-radius: 0;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom: 1px solid $ui-grey; border-bottom: 1px solid var(--ui-grey);
} }
.popover-footer { .popover-footer {

4
ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.scss
View File

@ -16,7 +16,7 @@
} }
&__content-link { &__content-link {
color: $primary-blue; color: var(--primary-blue);
cursor: pointer; cursor: pointer;
} }
@ -49,7 +49,7 @@
margin-bottom: 16px; margin-bottom: 16px;
padding: 16px; padding: 16px;
font-size: 14px; font-size: 14px;
border: 1px solid $accent-red; border: 1px solid var(--accent-red);
background: #f8eae8; background: #f8eae8;
border-radius: 3px; border-radius: 3px;
} }

6
ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
View File

@ -17,7 +17,7 @@
} }
& &__dismiss-button { & &__dismiss-button {
background: $primary-blue; background: var(--primary-blue);
color: white; color: white;
height: 40px; height: 40px;
width: 100px; width: 100px;
@ -29,7 +29,7 @@
margin-bottom: 16px; margin-bottom: 16px;
padding: 16px; padding: 16px;
border: 1px solid $accent-red; border: 1px solid var(--accent-red);
background: #f8eae8; background: #f8eae8;
border-radius: 3px; border-radius: 3px;
} }
@ -52,7 +52,7 @@
display: flex; display: flex;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
color: $Grey-500; color: var(--Grey-500);
} }
&__checkbox-label-tooltip { &__checkbox-label-tooltip {

4
ui/components/app/app-header/index.scss
View File

@ -1,6 +1,6 @@
.app-header { .app-header {
align-items: center; align-items: center;
background: $Grey-000; background: var(--Grey-000);
position: relative; position: relative;
z-index: $header-z-index; z-index: $header-z-index;
display: flex; display: flex;
@ -23,7 +23,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 32px; height: 32px;
background: $Grey-000; background: var(--Grey-000);
bottom: -32px; bottom: -32px;
} }
} }

2
ui/components/app/asset-list-item/asset-list-item.scss
View File

@ -29,7 +29,7 @@
} }
&__chevron-right { &__chevron-right {
color: $Grey-500; color: var(--Grey-500);
} }
.list-item__right-content { .list-item__right-content {

2
ui/components/app/cancel-speedup-popover/index.scss
View File

@ -21,7 +21,7 @@
} }
&__separator { &__separator {
border-bottom: 1px solid $ui-grey; border-bottom: 1px solid var(--ui-grey);
width: 100%; width: 100%;
} }
} }

4
ui/components/app/collectible-details/index.scss
View File

@ -52,13 +52,13 @@ $spacer-break-small: 16px;
&__contract-link, &__contract-link,
&__image-link { &__image-link {
color: $primary-1; color: var(--primary-1);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-all; word-break: break-all;
&:hover { &:hover {
color: $primary-3; color: var(--primary-3);
} }
} }

2
ui/components/app/collectible-options/index.scss
View File

@ -1,7 +1,7 @@
.collectible-options { .collectible-options {
&__button { &__button {
font-size: $font-size-paragraph; font-size: $font-size-paragraph;
color: $Black-100; color: var(--Black-100);
background-color: inherit; background-color: inherit;
padding: 2px 0 2px 8px; padding: 2px 0 2px 8px;
} }

2
ui/components/app/collectibles-detection-notice/index.scss
View File

@ -11,7 +11,7 @@
content: '\00D7'; content: '\00D7';
font-size: 29px; font-size: 29px;
font-weight: 200; font-weight: 200;
color: $black; color: var(--black);
background-color: transparent; background-color: transparent;
top: 0; top: 0;
right: 12px; right: 12px;

4
ui/components/app/collectibles-items/index.scss
View File

@ -17,8 +17,8 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 8px; padding: 8px;
background: $ui-4; background: var(--ui-4);
color: $ui-white; color: var(--ui-white);
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }

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

@ -9,7 +9,7 @@
@include H7; @include H7;
font-weight: 500; font-weight: 500;
color: $scorpion; color: var(--scorpion);
text-transform: uppercase; text-transform: uppercase;
} }
@ -26,7 +26,7 @@
} }
&__secondary { &__secondary {
color: $oslo-gray; color: var(--oslo-gray);
justify-content: flex-end; justify-content: flex-end;
} }
@ -35,10 +35,10 @@
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 6px; margin-bottom: 6px;
color: $scorpion; color: var(--scorpion);
&--edit { &--edit {
color: $primary-blue; color: var(--primary-blue);
cursor: pointer; cursor: pointer;
} }

10
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
View File

@ -19,15 +19,15 @@
@include H7; @include H7;
text-transform: uppercase; text-transform: uppercase;
color: $oslo-gray; color: var(--oslo-gray);
padding: 3px 8px; padding: 3px 8px;
border: 1px solid $oslo-gray; border: 1px solid var(--oslo-gray);
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
} }
&__nonce { &__nonce {
color: $oslo-gray; color: var(--oslo-gray);
} }
&__title { &__title {
@ -50,13 +50,13 @@
} }
&__subtitle { &__subtitle {
color: $oslo-gray; color: var(--oslo-gray);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&--border { &--border {
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
} }
} }

2
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
View File

@ -2,7 +2,7 @@
background-color: #fffcdb; background-color: #fffcdb;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
padding: 12px 24px; padding: 12px 24px;
&__icon { &__icon {

6
ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -19,7 +19,7 @@
&__data { &__data {
padding: 16px; padding: 16px;
color: $oslo-gray; color: var(--oslo-gray);
& > .disclosure { & > .disclosure {
margin-top: 0; margin-top: 0;
@ -57,7 +57,7 @@
} }
&__gas-fee { &__gas-fee {
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
.advanced-gas-inputs__gas-edit-rows { .advanced-gas-inputs__gas-edit-rows {
margin-bottom: 16px; margin-bottom: 16px;
@ -69,7 +69,7 @@
font-weight: 500; font-weight: 500;
text-transform: capitalize; text-transform: capitalize;
color: $black; color: var(--black);
padding-left: 5px; padding-left: 5px;
} }

2
ui/components/app/confirm-page-container/confirm-page-container-header/index.scss
View File

@ -6,7 +6,7 @@
&__row { &__row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
padding: 4px 13px 4px 13px; padding: 4px 13px 4px 13px;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;

4
ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
View File

@ -3,7 +3,7 @@
justify-content: space-between; justify-content: space-between;
font: inherit; font: inherit;
padding: 4px 10px 4px 10px; padding: 4px 10px 4px 10px;
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
flex: 0 0 auto; flex: 0 0 auto;
&__container { &__container {
@ -44,7 +44,7 @@
&__longtext { &__longtext {
@include H9; @include H9;
color: $oslo-gray; color: var(--oslo-gray);
} }
&__imageflip { &__imageflip {

12
ui/components/app/connected-accounts-list/index.scss
View File

@ -24,7 +24,7 @@
@extend %account-status-typography; @extend %account-status-typography;
display: inline; display: inline;
color: $Grey-500; color: var(--Grey-500);
} }
&__account-status-link { &__account-status-link {
@ -34,7 +34,7 @@
&, &,
&:hover { &:hover {
color: $primary-blue; color: var(--primary-blue);
cursor: pointer; cursor: pointer;
} }
} }
@ -46,11 +46,11 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 16px 24px; padding: 16px 24px;
border-top: 1px solid $geyser; border-top: 1px solid var(--geyser);
&--highlight { &--highlight {
background-color: $Yellow-000; background-color: var(--Yellow-000);
border: 1px solid $accent-yellow; border: 1px solid var(--accent-yellow);
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
@ -69,7 +69,7 @@
&__button { &__button {
font-size: $font-size-h4; font-size: $font-size-h4;
background: inherit; background: inherit;
color: $Grey-500; color: var(--Grey-500);
} }
} }

2
ui/components/app/connected-accounts-permissions/index.scss
View File

@ -3,7 +3,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: $Grey-500; color: var(--Grey-500);
strong { strong {
font-weight: bold; font-weight: bold;

4
ui/components/app/connected-status-indicator/index.scss
View File

@ -47,13 +47,13 @@
} }
&__grey-circle { &__grey-circle {
border-color: $Grey-500; border-color: var(--Grey-500);
} }
&__text { &__text {
@include H8; @include H8;
color: $Grey-500; color: var(--Grey-500);
margin-left: 6px; margin-left: 6px;
white-space: nowrap; white-space: nowrap;
} }

2
ui/components/app/edit-gas-display-education/index.scss
View File

@ -1,5 +1,5 @@
.edit-gas-display-education { .edit-gas-display-education {
a { a {
color: $primary-1; color: var(--primary-1);
} }
} }

8
ui/components/app/edit-gas-display/index.scss
View File

@ -28,8 +28,8 @@
button.edit-gas-display__dapp-acknowledgement-button { button.edit-gas-display__dapp-acknowledgement-button {
margin: 40px auto 0 auto; margin: 40px auto 0 auto;
display: block; display: block;
color: $secondary-1; color: var(--secondary-1);
border: 1px solid $secondary-1; border: 1px solid var(--secondary-1);
text-transform: unset; text-transform: unset;
width: auto; width: auto;
background: transparent; background: transparent;
@ -43,7 +43,7 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
background: transparent; background: transparent;
color: $primary-1; color: var(--primary-1);
font-weight: bold; font-weight: bold;
} }
@ -58,7 +58,7 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
background: transparent; background: transparent;
color: $primary-1; color: var(--primary-1);
} }
} }

8
ui/components/app/edit-gas-fee-button/index.scss
View File

@ -8,7 +8,7 @@
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: $primary-1; color: var(--primary-1);
background: transparent; background: transparent;
border: 0; border: 0;
padding-inline-end: 0; padding-inline-end: 0;
@ -16,7 +16,7 @@
} }
i { i {
color: $primary-1; color: var(--primary-1);
margin-right: 2px; margin-right: 2px;
} }
@ -36,11 +36,11 @@
&__tooltip { &__tooltip {
p { p {
color: $Grey-500; color: var(--Grey-500);
} }
b { b {
color: $neutral-black; color: var(--neutral-black);
display: inline-block; display: inline-block;
min-width: 60%; min-width: 60%;
} }

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

@ -1,7 +1,7 @@
.edit-gas-item { .edit-gas-item {
border-radius: 24px; border-radius: 24px;
background: white; background: white;
color: $ui-4; color: var(--ui-4);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
@ -12,11 +12,11 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: $primary-2; background-color: var(--primary-2);
} }
&--selected { &--selected {
background-color: $ui-1; background-color: var(--ui-1);
} }
button.edit-gas-item--disabled[disabled] { button.edit-gas-item--disabled[disabled] {
@ -27,7 +27,7 @@
&__name { &__name {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: $ui-black; color: var(--ui-black);
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
@ -78,11 +78,11 @@
&__time-estimate-low, &__time-estimate-low,
&__fee-estimate-high { &__fee-estimate-high {
color: $secondary-1; color: var(--secondary-1);
} }
&__time-estimate-medium, &__time-estimate-medium,
&__time-estimate-high { &__time-estimate-high {
color: $success-3; color: var(--success-3);
} }
} }

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

@ -20,7 +20,7 @@
} }
&__dialog { &__dialog {
background-color: $Orange-500; background-color: var(--Orange-500);
border-radius: 30px; border-radius: 30px;
margin: 4px 0; margin: 4px 0;
text-align: center; text-align: center;

8
ui/components/app/edit-gas-fee-popover/index.scss
View File

@ -2,7 +2,7 @@
height: 500px; height: 500px;
&__wrapper { &__wrapper {
border-top: 1px solid $ui-grey; border-top: 1px solid var(--ui-grey);
} }
&__content { &__content {
@ -14,7 +14,7 @@
} }
&__header { &__header {
color: $ui-4; color: var(--ui-4);
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
margin: 0 12px; margin: 0 12px;
@ -36,7 +36,7 @@
} }
&__separator { &__separator {
border-top: 1px solid $ui-grey; border-top: 1px solid var(--ui-grey);
margin: 8px 12px; margin: 8px 12px;
} }
} }
@ -46,6 +46,6 @@
} }
&__know-more a { &__know-more a {
color: $primary-1; color: var(--primary-1);
} }
} }

10
ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
View File

@ -2,14 +2,14 @@
margin: 24px 0 12px; margin: 24px 0 12px;
&__info { &__info {
border-top: 1px solid $ui-2; border-top: 1px solid var(--ui-2);
border-bottom: 1px solid $ui-2; border-bottom: 1px solid var(--ui-2);
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
&__separator { &__separator {
border-left: 1px solid $ui-2; border-left: 1px solid var(--ui-2);
height: 65%; height: 65%;
} }
@ -25,13 +25,13 @@
} }
&-data { &-data {
color: $ui-4; color: var(--ui-4);
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
&-label { &-label {
color: $Black-100; color: var(--Black-100);
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
margin-top: 4px; margin-top: 4px;

6
ui/components/app/flask/experimental-area/index.scss
View File

@ -1,5 +1,5 @@
.experimental-area { .experimental-area {
color: $flask-purple; color: var(--flask-purple);
margin: auto; margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -46,9 +46,9 @@
} }
button { button {
background-color: $flask-purple !important; background-color: var(--flask-purple) !important;
border: 0 !important; border: 0 !important;
color: $ui-1; color: var(--ui-1);
width: 200px; width: 200px;
} }
} }

4
ui/components/app/flask/snaps-authorship-pill/index.scss
View File

@ -6,11 +6,11 @@
&:hover, &:hover,
&:focus { &:focus {
.chip { .chip {
background-color: $ui-1; background-color: var(--ui-1);
} }
} }
} }
.snaps-authorship-icon { .snaps-authorship-icon {
color: $ui-4; color: var(--ui-4);
} }

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

@ -23,12 +23,12 @@
} }
.fa-info-circle { .fa-info-circle {
color: $silver; color: var(--silver);
cursor: pointer; cursor: pointer;
} }
.fa-info-circle:hover { .fa-info-circle:hover {
color: $mid-gray; color: var(--mid-gray);
} }
} }
@ -53,9 +53,9 @@
@include Paragraph; @include Paragraph;
direction: ltr; direction: ltr;
border: 1px solid $dusty-gray; border: 1px solid var(--dusty-gray);
border-radius: 4px; border-radius: 4px;
color: $mid-gray; color: var(--mid-gray);
height: 24px; height: 24px;
width: 100%; width: 100%;
padding-left: 8px; padding-left: 8px;
@ -64,11 +64,11 @@
} }
&__input--error { &__input--error {
border: 1px solid $red; border: 1px solid var(--red);
} }
&__input--warning { &__input--warning {
border: 1px solid $orange; border: 1px solid var(--orange);
} }
&__input-arrows { &__input-arrows {
@ -99,7 +99,7 @@
&__i-wrap:hover { &__i-wrap:hover {
background: #4eade7; background: #4eade7;
color: $white; color: var(--white);
} }
i:hover { i:hover {
@ -116,11 +116,11 @@
} }
&__input-arrows--error { &__input-arrows--error {
border: 1px solid $red; border: 1px solid var(--red);
} }
&__input-arrows--warning { &__input-arrows--warning {
border: 1px solid $orange; border: 1px solid var(--orange);
} }
input[type="number"] { input[type="number"] {
@ -145,7 +145,7 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 10px; right: 10px;
color: $dusty-gray; color: var(--dusty-gray);
} }
&__custom-text { &__custom-text {

2
ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
View File

@ -10,7 +10,7 @@
&__transaction-data-summary { &__transaction-data-summary {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
color: $mid-gray; color: var(--mid-gray);
margin-top: 12px; margin-top: 12px;
padding-left: 18px; padding-left: 18px;
padding-right: 18px; padding-right: 18px;

4
ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
View File

@ -11,14 +11,14 @@
@include Paragraph; @include Paragraph;
margin-top: 19px; margin-top: 19px;
color: $black; color: var(--black);
} }
&__blurb { &__blurb {
@include H7; @include H7;
width: 95%; width: 95%;
color: $black; color: var(--black);
margin-top: 5px; margin-top: 5px;
margin-bottom: 15px; margin-bottom: 15px;
} }

12
ui/components/app/gas-customization/gas-modal-page-container/index.scss
View File

@ -46,7 +46,7 @@
&__title { &__title {
@include H5; @include H5;
color: $black; color: var(--black);
font-weight: 500; font-weight: 500;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -80,7 +80,7 @@
} }
&.tab--active button { &.tab--active button {
color: $primary-blue; color: var(--primary-blue);
} }
} }
} }
@ -101,11 +101,11 @@
@include H7; @include H7;
width: 100%; width: 100%;
background: $polar; background: var(--polar);
padding: 15px 21px; padding: 15px 21px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
color: $scorpion; color: var(--scorpion);
&__send-info, &__send-info,
&__transaction-info, &__transaction-info,
@ -154,7 +154,7 @@
&__info-row--fade { &__info-row--fade {
background: white; background: white;
color: $dusty-gray; color: var(--dusty-gray);
border-top: 1px solid $mischka; border-top: 1px solid var(--mischka);
} }
} }

26
ui/components/app/gas-customization/gas-price-button-group/index.scss
View File

@ -15,7 +15,7 @@
&__time-estimate { &__time-estimate {
margin-top: 5.5px; margin-top: 5.5px;
color: $silver-chalice; color: var(--silver-chalice);
height: 15.4px; height: 15.4px;
} }
@ -34,9 +34,9 @@
display: flex; display: flex;
padding-top: 17px; padding-top: 17px;
border-radius: 4px; border-radius: 4px;
border-color: $spindle; border-color: var(--spindle);
background: $white; background: var(--white);
color: $scorpion; color: var(--scorpion);
div { div {
display: flex; display: flex;
@ -52,13 +52,13 @@
} }
.button-group__button--active { .button-group__button--active {
border-color: $primary-blue; border-color: var(--primary-blue);
color: $scorpion; color: var(--scorpion);
i { i {
&:last-child { &:last-child {
display: flex; display: flex;
color: $primary-blue; color: var(--primary-blue);
margin-top: 8px; margin-top: 8px;
} }
} }
@ -115,7 +115,7 @@
.button-group__button, .button-group__button,
.button-group__button--active { .button-group__button--active {
background: white; background: white;
color: $scorpion; color: var(--scorpion);
padding: 4px; padding: 4px;
div { div {
@ -133,13 +133,13 @@
} }
.button-group__button--active { .button-group__button--active {
color: $white; color: var(--white);
background: $dodger-blue; background: var(--dodger-blue);
i { i {
&:last-child { &:last-child {
display: flex; display: flex;
color: $primary-blue; color: var(--primary-blue);
margin-top: 10px; margin-top: 10px;
} }
} }
@ -185,7 +185,7 @@
font-weight: 500; font-weight: 500;
margin-top: 4px; margin-top: 4px;
color: $black; color: var(--black);
} }
.button-group__button, .button-group__button,
@ -244,7 +244,7 @@
i { i {
display: flex; display: flex;
color: $primary-blue; color: var(--primary-blue);
font-weight: 900; font-weight: 900;
} }
} }

8
ui/components/app/gas-customization/gas-slider/index.scss
View File

@ -16,7 +16,7 @@
-webkit-appearance: none !important; -webkit-appearance: none !important;
height: 34px; height: 34px;
width: 34px; width: 34px;
background-color: $primary-blue; background-color: var(--primary-blue);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
@ -26,7 +26,7 @@
&__bar { &__bar {
height: 6px; height: 6px;
width: 322px; width: 322px;
background: $alto; background: var(--alto);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: absolute; position: absolute;
@ -41,7 +41,7 @@
margin-left: 102px; margin-left: 102px;
width: 322px; width: 322px;
z-index: 1; z-index: 1;
background-color: $blizzard-blue; background-color: var(--blizzard-blue);
} }
&__labels { &__labels {
@ -50,6 +50,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: -6px; margin-top: -6px;
color: $mid-gray; color: var(--mid-gray);
} }
} }

2
ui/components/app/gas-details-item/gas-details-item-title/index.scss
View File

@ -3,7 +3,7 @@
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
font-size: 12px; font-size: 12px;
color: $Grey-500; color: var(--Grey-500);
line-height: inherit; line-height: inherit;
} }
} }

2
ui/components/app/gas-details-item/index.scss
View File

@ -1,6 +1,6 @@
.gas-details-item { .gas-details-item {
&__gas-fee-warning { &__gas-fee-warning {
color: $secondary-1; color: var(--secondary-1);
} }
&__currency-container, &__currency-container,

12
ui/components/app/gas-timing/index.scss
View File

@ -1,21 +1,21 @@
.typography.gas-timing { .typography.gas-timing {
color: $ui-4; color: var(--ui-4);
&--positive { &--positive {
color: $success-3; color: var(--success-3);
} }
&--warning { &--warning {
color: $alert-3; color: var(--alert-3);
} }
&--negative { &--negative {
color: $error-1; color: var(--error-1);
font-weight: bold; font-weight: bold;
} }
&--negative-V2 { &--negative-V2 {
color: $secondary-1; color: var(--secondary-1);
font-weight: bold; font-weight: bold;
} }
@ -24,7 +24,7 @@
margin-inline-start: 4px; margin-inline-start: 4px;
path { path {
fill: $error-1; fill: var(--error-1);
} }
} }
} }

10
ui/components/app/home-notification/index.scss
View File

@ -25,13 +25,13 @@
&__text { &__text {
@include H7; @include H7;
color: $white; color: var(--white);
} }
&__text-link { &__text-link {
@include H7; @include H7;
color: $primary-blue; color: var(--primary-blue);
cursor: pointer; cursor: pointer;
} }
@ -59,7 +59,7 @@
& &__checkbox-label { & &__checkbox-label {
@include H7; @include H7;
color: $white; color: var(--white);
margin-left: 10px; margin-left: 10px;
margin-top: 1px; margin-top: 1px;
user-select: none; user-select: none;
@ -71,7 +71,7 @@
& &__ignore-button { & &__ignore-button {
border-color: #6a737d; border-color: #6a737d;
box-sizing: border-box; box-sizing: border-box;
color: $white; color: var(--white);
background-color: inherit; background-color: inherit;
height: 34px; height: 34px;
width: 155px; width: 155px;
@ -94,7 +94,7 @@
& &__accept-button { & &__accept-button {
border-color: #6a737d; border-color: #6a737d;
box-sizing: border-box; box-sizing: border-box;
color: $white; color: var(--white);
background-color: inherit; background-color: inherit;
height: 34px; height: 34px;
width: 155px; width: 155px;

6
ui/components/app/info-box/index.scss
View File

@ -1,17 +1,17 @@
.info-box { .info-box {
border-radius: 4px; border-radius: 4px;
background-color: $alabaster; background-color: var(--alabaster);
position: relative; position: relative;
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
color: $mid-gray; color: var(--mid-gray);
&__close::after { &__close::after {
content: '\00D7'; content: '\00D7';
font-size: 29px; font-size: 29px;
font-weight: 200; font-weight: 200;
color: $dusty-gray; color: var(--dusty-gray);
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 0; top: 0;

4
ui/components/app/menu-bar/index.scss
View File

@ -3,7 +3,7 @@
grid-template-columns: 30% minmax(30%, 1fr) 30%; grid-template-columns: 30% minmax(30%, 1fr) 30%;
column-gap: 5px; column-gap: 5px;
padding: 0 8px; padding: 0 8px;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
height: 64px; height: 64px;
.menu-bar__account-options { .menu-bar__account-options {
@ -32,6 +32,6 @@
&__explorer-origin { &__explorer-origin {
@include H7; @include H7;
color: $Grey-500; color: var(--Grey-500);
} }
} }

2
ui/components/app/modal/index.scss
View File

@ -35,7 +35,7 @@
&__header-close::after { &__header-close::after {
content: '\00D7'; content: '\00D7';
font-size: 40px; font-size: 40px;
color: $dusty-gray; color: var(--dusty-gray);
position: absolute; position: absolute;
top: -5px; top: -5px;
right: 10px; right: 10px;

4
ui/components/app/modals/account-details-modal/index.scss
View File

@ -15,7 +15,7 @@
width: 100%; width: 100%;
height: 1px; height: 1px;
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
background-color: $alto; background-color: var(--alto);
} }
& .qr-header { & .qr-header {
@ -31,7 +31,7 @@
& .ellip-address-wrapper { & .ellip-address-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid $alto; border: 1px solid var(--alto);
padding: 5px 10px; padding: 5px 10px;
margin-top: 7px; margin-top: 7px;
width: 286px; width: 286px;

6
ui/components/app/modals/account-modal-container/index.scss
View File

@ -7,12 +7,12 @@
align-items: center; align-items: center;
position: relative; position: relative;
padding: 5px 0 31px 0; padding: 5px 0 31px 0;
border: 1px solid $silver; border: 1px solid var(--silver);
border-radius: 4px; border-radius: 4px;
} }
&__back { &__back {
color: $dusty-gray; color: var(--dusty-gray);
position: absolute; position: absolute;
top: 13px; top: 13px;
left: 17px; left: 17px;
@ -31,7 +31,7 @@
@include H1; @include H1;
background-color: transparent; background-color: transparent;
color: $ui-black; color: var(--ui-black);
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: -10px; top: -10px;

12
ui/components/app/modals/add-to-addressbook-modal/index.scss
View File

@ -1,7 +1,7 @@
.add-to-address-book-modal { .add-to-address-book-modal {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
background-color: $white; background-color: var(--white);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 16px rgba($black, 0.25); box-shadow: 0 5px 16px rgba($black, 0.25);
@ -9,7 +9,7 @@
@extend %col-nowrap; @extend %col-nowrap;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
&__header { &__header {
@include H3; @include H3;
@ -17,22 +17,22 @@
} }
&__input-label { &__input-label {
color: $Grey-600; color: var(--Grey-600);
margin-top: 1.25rem; margin-top: 1.25rem;
} }
&__input { &__input {
@include H4; @include H4;
background: $white; background: var(--white);
border: 1px solid $Grey-100; border: 1px solid var(--Grey-100);
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
margin-top: 0.75rem; margin-top: 0.75rem;
&::placeholder { &::placeholder {
color: $Grey-300; color: var(--Grey-300);
} }
} }

2
ui/components/app/modals/customize-nonce/index.scss
View File

@ -17,7 +17,7 @@
&__close { &__close {
@include H4; @include H4;
color: $ui-black; color: var(--ui-black);
background: none; background: none;
flex: 0; flex: 0;
align-self: flex-start; align-self: flex-start;

12
ui/components/app/modals/deposit-ether-modal/index.scss
View File

@ -7,7 +7,7 @@
&__header { &__header {
width: 100%; width: 100%;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-color: $mid-gray; background-color: var(--mid-gray);
display: flex; display: flex;
position: relative; position: relative;
padding: 25px; padding: 25px;
@ -17,20 +17,20 @@
&__title { &__title {
@include H3; @include H3;
color: $white; color: var(--white);
} }
&__description { &__description {
@include Paragraph; @include Paragraph;
color: $white; color: var(--white);
margin-top: 10px; margin-top: 10px;
} }
&__close::after { &__close::after {
content: '\00D7'; content: '\00D7';
font-size: 2em; font-size: 2em;
color: $white; color: var(--white);
position: absolute; position: absolute;
top: 20.8px; top: 20.8px;
right: 28px; right: 28px;
@ -63,7 +63,7 @@
} }
&__buy-row { &__buy-row {
border-bottom: 1px solid $alto; border-bottom: 1px solid var(--alto);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -105,7 +105,7 @@
} }
&__description { &__description {
color: $cape-cod; color: var(--cape-cod);
padding-bottom: 20px; padding-bottom: 20px;
align-self: flex-start; align-self: flex-start;

6
ui/components/app/modals/edit-approval-permission/index.scss
View File

@ -99,7 +99,7 @@
} }
&__option-label--selected { &__option-label--selected {
color: $primary-blue; color: var(--primary-blue);
} }
&__option-description { &__option-description {
@ -136,7 +136,7 @@
} }
&__radio-button-outline--selected { &__radio-button-outline--selected {
background: $primary-blue; background: var(--primary-blue);
} }
&__radio-button-fill { &__radio-button-fill {
@ -150,7 +150,7 @@
&__radio-button-dot { &__radio-button-dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: $primary-blue; background: var(--primary-blue);
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
} }

16
ui/components/app/modals/export-private-key-modal/index.scss
View File

@ -10,7 +10,7 @@
width: 100%; width: 100%;
height: 1px; height: 1px;
margin: 19px 0 8px 0; margin: 19px 0 8px 0;
background-color: $alto; background-color: var(--alto);
} }
&__account-name { &__account-name {
@ -28,12 +28,12 @@
&__password--error { &__password--error {
@include H6; @include H6;
color: $scorpion; color: var(--scorpion);
margin-bottom: 10px; margin-bottom: 10px;
} }
&__password--error { &__password--error {
color: $crimson; color: var(--crimson);
margin-bottom: 0; margin-bottom: 0;
} }
@ -46,7 +46,7 @@
} }
&__password::-webkit-input-placeholder { &__password::-webkit-input-placeholder {
color: $dusty-gray; color: var(--dusty-gray);
} }
&__password--warning { &__password--warning {
@ -55,7 +55,7 @@
border-radius: 8px; border-radius: 8px;
background-color: #fff6f6; background-color: #fff6f6;
font-weight: 500; font-weight: 500;
color: $crimson; color: var(--crimson);
width: 292px; width: 292px;
padding: 9px 15px; padding: 9px 15px;
margin-top: 18px; margin-top: 18px;
@ -64,14 +64,14 @@
&__password-display-wrapper { &__password-display-wrapper {
height: 80px; height: 80px;
width: 291px; width: 291px;
border: 1px solid $silver; border: 1px solid var(--silver);
border-radius: 2px; border-radius: 2px;
} }
&__password-display-textarea { &__password-display-textarea {
@include Paragraph; @include Paragraph;
color: $crimson; color: var(--crimson);
border: none; border: none;
height: 75px; height: 75px;
width: 100%; width: 100%;
@ -101,7 +101,7 @@
& .ellip-address-wrapper { & .ellip-address-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid $alto; border: 1px solid var(--alto);
padding: 5px 10px; padding: 5px 10px;
margin-top: 7px; margin-top: 7px;
width: 286px; width: 286px;

8
ui/components/app/modals/hide-token-confirmation-modal/index.scss
View File

@ -1,7 +1,7 @@
.hide-token-confirmation { .hide-token-confirmation {
min-height: 250.72px; min-height: 250.72px;
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--white);
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);
&__container { &__container {
@ -18,7 +18,7 @@
&__symbol { &__symbol {
@include Paragraph; @include Paragraph;
color: $tundora; color: var(--tundora);
text-align: center; text-align: center;
margin-bottom: 7.5px; margin-bottom: 7.5px;
} }
@ -28,7 +28,7 @@
height: 30px; height: 30px;
width: 271.28px; width: 271.28px;
color: $tundora; color: var(--tundora);
text-align: center; text-align: center;
margin-bottom: 10.5px; margin-bottom: 10.5px;
} }
@ -38,7 +38,7 @@
min-height: 41px; min-height: 41px;
width: 318px; width: 318px;
color: $scorpion; color: var(--scorpion);
text-align: center; text-align: center;
} }

12
ui/components/app/modals/new-account-modal/index.scss
View File

@ -1,7 +1,7 @@
.new-account-modal { .new-account-modal {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
background-color: $white; background-color: var(--white);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 16px rgba($black, 0.25); box-shadow: 0 5px 16px rgba($black, 0.25);
@ -9,7 +9,7 @@
@extend %col-nowrap; @extend %col-nowrap;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
&__header { &__header {
@include H4; @include H4;
@ -29,22 +29,22 @@
} }
&__input-label { &__input-label {
color: $Grey-600; color: var(--Grey-600);
margin-top: 1.25rem; margin-top: 1.25rem;
} }
&__input { &__input {
@include H4; @include H4;
background: $white; background: var(--white);
border: 1px solid $Grey-100; border: 1px solid var(--Grey-100);
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
margin-top: 0.75rem; margin-top: 0.75rem;
&::placeholder { &::placeholder {
color: $Grey-300; color: var(--Grey-300);
} }
} }

6
ui/components/app/permission-page-container/index.scss
View File

@ -27,7 +27,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
padding: 9px; padding: 9px;
} }
@ -49,7 +49,7 @@
a, a,
a:hover { a:hover {
color: $dodger-blue; color: var(--dodger-blue);
} }
&__requested { &__requested {
@ -68,7 +68,7 @@
@include H6; @include H6;
margin-left: 16px; margin-left: 16px;
color: $Black-100; color: var(--Black-100);
} }
} }
} }

2
ui/components/app/permissions-connect-footer/index.scss
View File

@ -12,7 +12,7 @@
margin-top: 10px; margin-top: 10px;
&--link { &--link {
color: $primary-blue; color: var(--primary-blue);
margin-left: 4px; margin-left: 4px;
cursor: pointer; cursor: pointer;
} }

4
ui/components/app/permissions-connect-header/index.scss
View File

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

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

@ -4,18 +4,18 @@
width: 100%; width: 100%;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: $Black-100; color: var(--Black-100);
i { i {
display: block; display: block;
padding: 16px; padding: 16px;
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
color: $Grey-500; color: var(--Grey-500);
font-size: 1rem; font-size: 1rem;
} }
} }

4
ui/components/app/selected-account/index.scss
View File

@ -14,7 +14,7 @@
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
color: $black; color: var(--black);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -43,7 +43,7 @@
background-color: unset; background-color: unset;
&:hover { &:hover {
background-color: $Grey-000; background-color: var(--Grey-000);
} }
&:active { &:active {

26
ui/components/app/signature-request-original/index.scss
View File

@ -2,7 +2,7 @@
&__container { &__container {
width: 380px; width: 380px;
border-radius: 8px; border-radius: 8px;
background-color: $white; background-color: var(--white);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -54,7 +54,7 @@
&__header-background { &__header-background {
position: absolute; position: absolute;
background-color: $athens-grey; background-color: var(--athens-grey);
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -76,7 +76,7 @@
&__header__tip { &__header__tip {
height: 25px; height: 25px;
width: 25px; width: 25px;
background: $athens-grey; background: var(--athens-grey);
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; position: absolute;
bottom: -8px; bottom: -8px;
@ -91,7 +91,7 @@
} }
&__account { &__account {
color: $dusty-gray; color: var(--dusty-gray);
margin-left: 17px; margin-left: 17px;
} }
@ -103,7 +103,7 @@
@include H7; @include H7;
height: 22px; height: 22px;
background-color: $white; background-color: var(--white);
width: 124px; width: 124px;
.account-list-item { .account-list-item {
@ -123,7 +123,7 @@
} }
&__balance { &__balance {
color: $dusty-gray; color: var(--dusty-gray);
margin-right: 17px; margin-right: 17px;
width: 124px; width: 124px;
} }
@ -181,19 +181,19 @@
} }
&__notice { &__notice {
color: $dusty-gray; color: var(--dusty-gray);
padding: 0 10px; padding: 0 10px;
} }
&__warning { &__warning {
color: $crimson; color: var(--crimson);
} }
&__rows { &__rows {
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-top: 1px solid $geyser; border-top: 1px solid var(--geyser);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
} }
@ -208,7 +208,7 @@
@include H5; @include H5;
width: 80px; width: 80px;
color: $dusty-gray; color: var(--dusty-gray);
margin-top: 12px; margin-top: 12px;
margin-left: 18px; margin-left: 18px;
width: 100%; width: 100%;
@ -217,7 +217,7 @@
&__row-value { &__row-value {
@include H6; @include H6;
color: $scorpion; color: var(--scorpion);
width: 100%; width: 100%;
overflow-wrap: break-word; overflow-wrap: break-word;
border-bottom: 1px solid #d2d8dd; border-bottom: 1px solid #d2d8dd;
@ -228,7 +228,7 @@
&__help-link { &__help-link {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
color: $primary-blue; color: var(--primary-blue);
margin-inline-start: 3px; margin-inline-start: 3px;
} }
@ -241,7 +241,7 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
flex: 0 0 auto; flex: 0 0 auto;
border-top: 1px solid $geyser; border-top: 1px solid var(--geyser);
padding: 1.6rem; padding: 1.6rem;
button { button {

2
ui/components/app/signature-request/signature-request-header/index.scss
View File

@ -3,7 +3,7 @@
display: flex; display: flex;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid $geyser; border-bottom: 1px solid var(--geyser);
justify-content: space-between; justify-content: space-between;
&--account, &--account,

20
ui/components/app/step-progress-bar/index.scss
View File

@ -67,40 +67,40 @@ ul.two-steps {
} }
.progressbar li.active { .progressbar li.active {
color: $primary-blue; color: var(--primary-blue);
[dir='rtl'] & { [dir='rtl'] & {
color: $primary-blue; color: var(--primary-blue);
} }
} }
.progressbar li.active::before { .progressbar li.active::before {
border-color: $primary-blue; border-color: var(--primary-blue);
z-index: 1; z-index: 1;
[dir='rtl'] & { [dir='rtl'] & {
border-color: $primary-blue; border-color: var(--primary-blue);
z-index: 1; z-index: 1;
} }
} }
.progressbar li.active + li::after { .progressbar li.active + li::after {
background-color: $primary-blue; background-color: var(--primary-blue);
z-index: -1; z-index: -1;
[dir='rtl'] & { [dir='rtl'] & {
background-color: $primary-blue; background-color: var(--primary-blue);
z-index: -1; z-index: -1;
} }
} }
.progressbar li.complete::before { .progressbar li.complete::before {
background-color: $primary-blue; background-color: var(--primary-blue);
color: $ui-white; color: var(--ui-white);
[dir='rtl'] & { [dir='rtl'] & {
background-color: $primary-blue; background-color: var(--primary-blue);
color: $ui-white; color: var(--ui-white);
} }
} }

2
ui/components/app/tab-bar/index.scss
View File

@ -33,7 +33,7 @@
@include H4; @include H4;
padding: 24px; padding: 24px;
border-bottom: 1px solid $alto; border-bottom: 1px solid var(--alto);
opacity: 1; opacity: 1;
} }

2
ui/components/app/token-cell/token-cell.scss
View File

@ -1,5 +1,5 @@
.token-cell { .token-cell {
&--outdated .list-item__heading { &--outdated .list-item__heading {
color: $Grey-500; color: var(--Grey-500);
} }
} }

6
ui/components/app/transaction-activity-log/index.scss
View File

@ -56,11 +56,11 @@
&__activity-text { &__activity-text {
@include H7; @include H7;
color: $dusty-gray; color: var(--dusty-gray);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $black; color: var(--black);
} }
} }
@ -77,7 +77,7 @@
@include H7; @include H7;
cursor: pointer; cursor: pointer;
color: $primary-blue; color: var(--primary-blue);
} }
b { b {

6
ui/components/app/transaction-breakdown/index.scss
View File

@ -5,7 +5,7 @@
padding-bottom: 4px; padding-bottom: 4px;
padding-top: 8px; padding-top: 8px;
font-size: 14px; font-size: 14px;
color: $Black-100; color: var(--Black-100);
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
} }
@ -23,12 +23,12 @@
&--eth-total { &--eth-total {
font-weight: bold; font-weight: bold;
color: $Black-100; color: var(--Black-100);
} }
&--amount { &--amount {
font-weight: bold; font-weight: bold;
color: $Black-100; color: var(--Black-100);
} }
} }
} }

2
ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss
View File

@ -1,7 +1,7 @@
.transaction-breakdown-row { .transaction-breakdown-row {
@include H7; @include H7;
color: $Grey-500; color: var(--Grey-500);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 8px 0; padding: 8px 0;

2
ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
View File

@ -8,7 +8,7 @@
} }
&__info { &__info {
color: $ui-black; color: var(--ui-black);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex-wrap: wrap; flex-wrap: wrap;

2
ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
View File

@ -12,7 +12,7 @@
background-color: transparent; background-color: transparent;
&:hover { &:hover {
background-color: $Grey-000; background-color: var(--Grey-000);
} }
&:active { &:active {

6
ui/components/app/transaction-detail-item/index.scss
View File

@ -1,7 +1,7 @@
.transaction-detail-item { .transaction-detail-item {
color: $ui-4; color: var(--ui-4);
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid $ui-3; border-bottom: 1px solid var(--ui-3);
&__row { &__row {
display: flex; display: flex;
@ -34,7 +34,7 @@
margin-inline-start: 4px; margin-inline-start: 4px;
path { path {
fill: $ui-3; fill: var(--ui-3);
} }
} }

2
ui/components/app/transaction-detail/index.scss
View File

@ -8,7 +8,7 @@
button { button {
@include H7; @include H7;
color: $primary-1; color: var(--primary-1);
background: transparent; background: transparent;
border: 0; border: 0;
padding-inline-end: 0; padding-inline-end: 0;

2
ui/components/app/transaction-icon/transaction-icon.scss
View File

@ -3,6 +3,6 @@
height: 28px; height: 28px;
width: 28px; width: 28px;
border-radius: 14px; border-radius: 14px;
background: $Grey-100; background: var(--Grey-100);
} }
} }

4
ui/components/app/transaction-list-item-details/index.scss
View File

@ -16,7 +16,7 @@
&__sender-to-recipient-header { &__sender-to-recipient-header {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: $Black-100; color: var(--Black-100);
font-weight: bold; font-weight: bold;
padding-bottom: 7px; padding-bottom: 7px;
@ -34,7 +34,7 @@
& > div:first-child { & > div:first-child {
font-size: 14px; font-size: 14px;
color: $Black-100; color: var(--Black-100);
font-weight: bold; font-weight: bold;
} }

8
ui/components/app/transaction-list-item/index.scss
View File

@ -1,6 +1,6 @@
.transaction-list-item { .transaction-list-item {
&__primary-currency { &__primary-currency {
color: $Black-100; color: var(--Black-100);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -9,15 +9,15 @@
@include H7; @include H7;
margin-top: 4px; margin-top: 4px;
color: $Grey-500; color: var(--Grey-500);
} }
& &--unconfirmed { & &--unconfirmed {
color: $Grey-500; color: var(--Grey-500);
} }
&--unconfirmed &__primary-currency { &--unconfirmed &__primary-currency {
color: $Grey-500; color: var(--Grey-500);
} }
&__pending-actions { &__pending-actions {

6
ui/components/app/transaction-list/index.scss
View File

@ -13,8 +13,8 @@
@include H6; @include H6;
flex: 0 0 auto; flex: 0 0 auto;
color: $Grey-400; color: var(--Grey-400);
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
padding: 8px 0 8px 20px; padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
@ -41,7 +41,7 @@
grid-row-start: 2; grid-row-start: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $silver; color: var(--silver);
} }
&__view-more { &__view-more {

16
ui/components/app/transaction-status/index.scss
View File

@ -2,34 +2,34 @@
display: inline; display: inline;
&--confirmed { &--confirmed {
color: $success-3; color: var(--success-3);
} }
&--unapproved { &--unapproved {
color: $Orange-500; color: var(--Orange-500);
} }
&--failed { &--failed {
color: $Red-500; color: var(--Red-500);
} }
&--cancelled { &--cancelled {
color: $Red-500; color: var(--Red-500);
} }
&--dropped { &--dropped {
color: $Red-500; color: var(--Red-500);
} }
&--rejected { &--rejected {
color: $Red-500; color: var(--Red-500);
} }
&--pending { &--pending {
color: $Orange-500; color: var(--Orange-500);
} }
&--queued { &--queued {
color: $Grey-500; color: var(--Grey-500);
} }
} }

10
ui/components/app/wallet-overview/index.scss
View File

@ -56,7 +56,7 @@
&__primary-balance { &__primary-balance {
@include H2; @include H2;
color: $black; color: var(--black);
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
@ -67,7 +67,7 @@
&__cached-balance, &__cached-balance,
&__cached-star { &__cached-star {
color: $web-orange; color: var(--web-orange);
} }
&__cached-secondary-balance { &__cached-secondary-balance {
@ -79,7 +79,7 @@
&__secondary-balance { &__secondary-balance {
@include Paragraph; @include Paragraph;
color: $Grey-400; color: var(--Grey-400);
} }
&__button { &__button {
@ -117,7 +117,7 @@
&__primary-balance { &__primary-balance {
@include H2; @include H2;
color: $black; color: var(--black);
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
@ -125,7 +125,7 @@
&__secondary-balance { &__secondary-balance {
@include H5; @include H5;
color: $Grey-400; color: var(--Grey-400);
} }
&__button { &__button {

6
ui/components/app/whats-new-popup/index.scss
View File

@ -9,7 +9,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 24px 24px 24px; margin: 0 24px 24px 24px;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid var(--Grey-100);
position: relative; position: relative;
} }
@ -41,7 +41,7 @@
} }
&__notification-date { &__notification-date {
color: $Grey-500; color: var(--Grey-500);
} }
&__button { &__button {
@ -56,7 +56,7 @@
&__link { &__link {
@include H6; @include H6;
color: $Blue-500; color: var(--Blue-500);
cursor: pointer; cursor: pointer;
} }

16
ui/components/ui/account-list/index.scss
View File

@ -61,7 +61,7 @@
} }
&:hover { &:hover {
background: $Grey-000; background: var(--Grey-000);
cursor: pointer; cursor: pointer;
} }
@ -75,7 +75,7 @@
&__label { &__label {
@include H6; @include H6;
color: $Black-100; color: var(--Black-100);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -84,7 +84,7 @@
&__balance { &__balance {
@include H7; @include H7;
color: $Grey-500; color: var(--Grey-500);
} }
&__last-connected { &__last-connected {
@ -93,7 +93,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
color: $primary-blue; color: var(--primary-blue);
} }
} }
@ -113,14 +113,14 @@
} }
.fa-info-circle { .fa-info-circle {
color: $Grey-200; color: var(--Grey-200);
cursor: pointer; cursor: pointer;
margin-inline-start: 8px; margin-inline-start: 8px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.fa-info-circle:hover { .fa-info-circle:hover {
color: $Grey-300; color: var(--Grey-300);
} }
&__text, &__text,
@ -130,11 +130,11 @@
} }
&__text-blue { &__text-blue {
color: $primary-blue; color: var(--primary-blue);
cursor: pointer; cursor: pointer;
} }
&__text-grey { &__text-grey {
color: $Grey-500; color: var(--Grey-500);
} }
} }

32
ui/components/ui/actionable-message/index.scss
View File

@ -1,6 +1,6 @@
.actionable-message { .actionable-message {
background: $Blue-000; background: var(--Blue-000);
border: 1px solid $Blue-200; border: 1px solid var(--Blue-200);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
margin-top: 18px; margin-top: 18px;
@ -31,7 +31,7 @@
@include H7; @include H7;
&__message { &__message {
color: $Blue-600; color: var(--Blue-600);
text-align: center; text-align: center;
} }
@ -41,7 +41,7 @@
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
color: $Blue-600; color: var(--Blue-600);
&--single { &--single {
width: 100%; width: 100%;
@ -56,13 +56,13 @@
} }
&-danger { &-danger {
background: $Red-500; background: var(--Red-500);
color: #fff; color: #fff;
} }
} }
&__action-v2 { &__action-v2 {
color: $primary-1; color: var(--primary-1);
background: none; background: none;
border: none; border: none;
font-size: 12px; font-size: 12px;
@ -78,13 +78,13 @@
} }
&--warning { &--warning {
background: $Yellow-100; background: var(--Yellow-100);
border: 1px solid $Yellow-500; border: 1px solid var(--Yellow-500);
justify-content: center; justify-content: center;
.actionable-message__message, .actionable-message__message,
.actionable-message__action { .actionable-message__action {
color: $Black-100; color: var(--Black-100);
} }
.actionable-message__action--secondary { .actionable-message__action--secondary {
@ -93,22 +93,22 @@
} }
&--danger { &--danger {
background: $Red-000; background: var(--Red-000);
border: 1px solid $Red-300; border: 1px solid var(--Red-300);
justify-content: flex-start; justify-content: flex-start;
.actionable-message__message { .actionable-message__message {
color: $Black-100; color: var(--Black-100);
text-align: left; text-align: left;
} }
} }
&--info { &--info {
background: $Green-000; background: var(--Green-000);
border: 1px solid $Green-200; border: 1px solid var(--Green-200);
.actionable-message__message { .actionable-message__message {
color: $Black-100; color: var(--Black-100);
} }
} }
@ -149,6 +149,6 @@
.actionable-message--warning.actionable-message--with-right-button { .actionable-message--warning.actionable-message--with-right-button {
.actionable-message__action { .actionable-message__action {
background: $Yellow-500; background: var(--Yellow-500);
} }
} }

12
ui/components/ui/alert-circle-icon/index.scss
View File

@ -1,13 +1,13 @@
.alert-circle-icon { .alert-circle-icon {
&--danger { &--danger {
border-color: $accent-red; border-color: var(--accent-red);
color: $accent-red; color: var(--accent-red);
background: $Red-000; background: var(--Red-000);
} }
&--warning { &--warning {
border-color: $accent-yellow; border-color: var(--accent-yellow);
color: $accent-yellow; color: var(--accent-yellow);
background: $Yellow-000; background: var(--Yellow-000);
} }
} }

4
ui/components/ui/box/box.scss
View File

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

28
ui/components/ui/button-group/index.scss
View File

@ -5,9 +5,9 @@
&__button { &__button {
font-size: $font-size-h5; font-size: $font-size-h5;
color: $tundora; color: var(--tundora);
border-style: solid; border-style: solid;
border-color: $alto; border-color: var(--alto);
border-width: 1px 1px 1px; border-width: 1px 1px 1px;
border-left: 0; border-left: 0;
flex: 1; flex: 1;
@ -17,7 +17,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
&:first-child { &:first-child {
border-left: 1px solid $alto; border-left: 1px solid var(--alto);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
@ -26,8 +26,8 @@
} }
&--active { &--active {
background-color: $dodger-blue; background-color: var(--dodger-blue);
color: $white; color: var(--white);
} }
&:disabled { &:disabled {
@ -40,9 +40,9 @@
.radio-button { .radio-button {
@include H7; @include H7;
color: $Grey-700; color: var(--Grey-700);
border: 1px solid $Grey-100; border: 1px solid var(--Grey-100);
background: $white; background: var(--white);
border-radius: 25px; border-radius: 25px;
height: 25px; height: 25px;
margin-right: 8px; margin-right: 8px;
@ -50,15 +50,15 @@
padding: 0; padding: 0;
&--active { &--active {
background: $Blue-500; background: var(--Blue-500);
color: white; color: white;
border: none; border: none;
} }
&--danger { &--danger {
border: 1px solid $Red-500; border: 1px solid var(--Red-500);
color: $Red-500; color: var(--Red-500);
background: $white; background: var(--white);
} }
&:hover { &:hover {
@ -67,8 +67,8 @@
} }
.radio-button--active.radio-button--danger { .radio-button--active.radio-button--danger {
border: 1px solid $Red-500; border: 1px solid var(--Red-500);
color: white; color: white;
background: $Red-500; background: var(--Red-500);
} }
} }

162
ui/components/ui/button/buttons.scss
View File

@ -2,15 +2,15 @@
Buttons 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 { .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; @include H6;
font-weight: 500; font-weight: 500;
@ -38,146 +38,146 @@ $warning-light-orange: #f8b588;
} }
.btn-secondary { .btn-secondary {
color: $Blue-500; color: var(--Blue-500);
border: 1px solid $hover-secondary; border: 1px solid var(--hover-secondary);
background-color: $white; background-color: var(--white);
&:hover { &:hover {
border-color: $Blue-500; border-color: var(--Blue-500);
} }
&:active { &:active {
background: $Blue-000; background: var(--Blue-000);
border-color: $Blue-500; border-color: var(--Blue-500);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
opacity: 1; opacity: 1;
color: $hover-secondary; color: var(--hover-secondary);
} }
} }
.btn-warning { .btn-warning {
color: $Orange-500; color: var(--Orange-500);
border: 1px solid $hover-orange; border: 1px solid var(--hover-orange);
background-color: $white; background-color: var(--white);
&:hover { &:hover {
border-color: $Orange-500; border-color: var(--Orange-500);
} }
&:active { &:active {
background: $Orange-000; background: var(--Orange-000);
border-color: $Orange-500; border-color: var(--Orange-500);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
opacity: 1; opacity: 1;
color: $hover-orange; color: var(--hover-orange);
} }
} }
.btn-danger { .btn-danger {
color: $Red-500; color: var(--Red-500);
border: 1px solid $hover-red; border: 1px solid var(--hover-red);
background-color: $white; background-color: var(--white);
&:hover { &:hover {
border-color: $Red-500; border-color: var(--Red-500);
} }
&:active { &:active {
background: $Red-000; background: var(--Red-000);
border-color: $Red-500; border-color: var(--Red-500);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
opacity: 1; opacity: 1;
color: $hover-red; color: var(--hover-red);
} }
} }
.btn-danger-primary { .btn-danger-primary {
color: $white; color: var(--white);
border: 1px solid $Red-500; border: 1px solid var(--Red-500);
background-color: $Red-500; background-color: var(--Red-500);
&:hover { &:hover {
border-color: $hover-red-primary; border-color: var(--hover-red-primary);
background-color: $hover-red-primary; background-color: var(--hover-red-primary);
} }
&:active { &:active {
background: $Red-600; background: var(--Red-600);
border-color: $Red-600; border-color: var(--Red-600);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
opacity: 1; opacity: 1;
border-color: $hover-red; border-color: var(--hover-red);
background-color: $hover-red; background-color: var(--hover-red);
} }
} }
.btn-default { .btn-default {
color: $Grey-500; color: var(--Grey-500);
border: 1px solid $hover-default; border: 1px solid var(--hover-default);
&:hover { &:hover {
border-color: $Grey-500; border-color: var(--Grey-500);
} }
&:active { &:active {
background: #fbfbfc; background: #fbfbfc;
border-color: $Grey-500; border-color: var(--Grey-500);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
opacity: 1; opacity: 1;
color: $hover-default; color: var(--hover-default);
} }
} }
.btn-primary { .btn-primary {
color: $white; color: var(--white);
border: 1px solid $Blue-500; border: 1px solid var(--Blue-500);
background-color: $Blue-500; background-color: var(--Blue-500);
&:hover { &:hover {
border-color: $hover-confirm; border-color: var(--hover-confirm);
background-color: $hover-confirm; background-color: var(--hover-confirm);
} }
&:active { &:active {
background: $Blue-600; background: var(--Blue-600);
border-color: $Blue-600; border-color: var(--Blue-600);
} }
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $hover-secondary; border-color: var(--hover-secondary);
background-color: $hover-secondary; background-color: var(--hover-secondary);
} }
} }
.btn-link { .btn-link {
@include H4; @include H4;
color: $Blue-500; color: var(--Blue-500);
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
&:hover { &:hover {
color: $Blue-400; color: var(--Blue-400);
} }
&:active { &:active {
color: $Blue-600; color: var(--Blue-600);
} }
&--disabled, &--disabled,
@ -185,7 +185,7 @@ $warning-light-orange: #f8b588;
cursor: auto; cursor: auto;
opacity: 1; opacity: 1;
pointer-events: none; pointer-events: none;
color: $hover-secondary; color: var(--hover-secondary);
} }
} }
@ -198,8 +198,8 @@ $warning-light-orange: #f8b588;
*/ */
.btn-raised { .btn-raised {
color: $primary-blue; color: var(--primary-blue);
background-color: $white; background-color: var(--white);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
padding: 6px; padding: 6px;
height: initial; height: initial;
@ -214,7 +214,7 @@ $warning-light-orange: #f8b588;
height: 54px; height: 54px;
width: 198px; width: 198px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
color: $white; color: var(--white);
font-weight: 500; font-weight: 500;
transition: 200ms ease-in-out; transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, 0.9); background-color: rgba(247, 134, 28, 0.9);
@ -237,84 +237,84 @@ input[type="submit"][disabled] {
} }
&.btn-secondary { &.btn-secondary {
border: 1px solid $Blue-500; border: 1px solid var(--Blue-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $hover-secondary; border-color: var(--hover-secondary);
color: $hover-secondary; color: var(--hover-secondary);
} }
&:active { &:active {
border-color: $Blue-600; border-color: var(--Blue-600);
} }
} }
&.btn-default { &.btn-default {
border: 1px solid $Grey-500; border: 1px solid var(--Grey-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $Grey-100; border-color: var(--Grey-100);
color: $hover-default; color: var(--hover-default);
} }
&:active { &:active {
border-color: $Grey-600; border-color: var(--Grey-600);
} }
} }
&.btn-danger { &.btn-danger {
border: 1px solid $Red-500; border: 1px solid var(--Red-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $Red-100; border-color: var(--Red-100);
color: $Red-300; color: var(--Red-300);
} }
&:active { &:active {
border-color: $Red-600; border-color: var(--Red-600);
} }
} }
&.btn-warning { &.btn-warning {
border: 1px solid $Orange-500; border: 1px solid var(--Orange-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $warning-light-orange; border-color: var(--warning-light-orange);
color: $warning-light-orange; color: var(--warning-light-orange);
} }
&:active { &:active {
border-color: $Orange-600; border-color: var(--Orange-600);
} }
} }
&.btn-primary { &.btn-primary {
background-color: $Blue-500; background-color: var(--Blue-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
background-color: $hover-secondary; background-color: var(--hover-secondary);
} }
&:active { &:active {
background-color: $Blue-600; background-color: var(--Blue-600);
} }
} }
&.btn-danger-primary { &.btn-danger-primary {
background-color: $Red-500; background-color: var(--Red-500);
&--disabled, &--disabled,
&[disabled] { &[disabled] {
background-color: $Red-300; background-color: var(--Red-300);
} }
&:active { &:active {
background-color: $Red-600; background-color: var(--Red-600);
} }
} }
} }

10
ui/components/ui/callout/callout.scss
View File

@ -10,7 +10,7 @@
transition: opacity 0.75s 0s; transition: opacity 0.75s 0s;
a { a {
color: $primary-1; color: var(--primary-1);
} }
&--dismissible { &--dismissible {
@ -37,19 +37,19 @@
} }
&--warning { &--warning {
border-left: 2px solid $alert-1; border-left: 2px solid var(--alert-1);
} }
&--danger { &--danger {
border-left: 2px solid $error-1; border-left: 2px solid var(--error-1);
} }
&--info { &--info {
border-left: 2px solid $primary-1; border-left: 2px solid var(--primary-1);
} }
&--success { &--success {
border-left: 2px solid $success-1; border-left: 2px solid var(--success-1);
} }
& .info-icon { & .info-icon {

10
ui/components/ui/check-box/index.scss
View File

@ -1,8 +1,8 @@
.check-box { .check-box {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: $white; background: var(--white);
color: $Grey-100; color: var(--Grey-100);
width: 18px; width: 18px;
height: 18px; height: 18px;
font-size: 21px; font-size: 21px;
@ -12,12 +12,12 @@
&__checked, &__checked,
&__indeterminate { &__indeterminate {
color: $primary-blue; color: var(--primary-blue);
border-color: $primary-blue; border-color: var(--primary-blue);
} }
&:disabled { &:disabled {
color: $Grey-100; color: var(--Grey-100);
cursor: not-allowed; cursor: not-allowed;
} }
} }

6
ui/components/ui/chip/chip.scss
View File

@ -4,7 +4,7 @@
$self: &; $self: &;
border-radius: 100px; border-radius: 100px;
border: 1px solid design-system.$ui-1; border: 1px solid var(--ui-1);
padding: 8px 16px; padding: 8px 16px;
margin: 0 4px; margin: 0 4px;
display: flex; display: flex;
@ -18,10 +18,10 @@
@each $variant, $color in design-system.$color-map { @each $variant, $color in design-system.$color-map {
&--border-color-#{$variant} { &--border-color-#{$variant} {
border-color: $color; border-color: var($color);
} }
&--background-color-#{$variant} { &--background-color-#{$variant} {
background-color: $color; background-color: var($color);
} }
} }

4
ui/components/ui/circle-icon/index.scss
View File

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

10
ui/components/ui/color-indicator/color-indicator.scss
View File

@ -41,15 +41,15 @@ $sizes: (
@each $variant, $color in design-system.$color-map { @each $variant, $color in design-system.$color-map {
&--color-#{$variant} { &--color-#{$variant} {
border-color: $color; border-color: var($color);
&#{$self}--partial-filled #{$self}__inner-circle { &#{$self}--partial-filled #{$self}__inner-circle {
background-color: $color; background-color: var($color);
} }
&#{$self}--filled { &#{$self}--filled {
background-color: $color; background-color: var($color);
} }
& #{$self}__icon { & #{$self}__icon {
color: #{utilities.choose-contrast-color($color)}; color: var(--black);
} }
} }
} }
@ -57,7 +57,7 @@ $sizes: (
// separate iterator to ensure borderColor takes precedence // separate iterator to ensure borderColor takes precedence
@each $variant, $color in design-system.$color-map { @each $variant, $color in design-system.$color-map {
&--border-color-#{$variant} { &--border-color-#{$variant} {
border-color: $color; border-color: var($color);
} }
} }
} }

2
ui/components/ui/confusable/index.scss
View File

@ -1,5 +1,5 @@
.confusable { .confusable {
&__point { &__point {
color: $Red-500; color: var(--Red-500);
} }
} }

2
ui/components/ui/definition-list/definition-list.scss
View File

@ -6,7 +6,7 @@
align-items: center; align-items: center;
& i { & i {
color: $ui-3; color: var(--ui-3);
margin-left: 6px; margin-left: 6px;
font-size: $font-size-h8; font-size: $font-size-h8;
} }

20
ui/components/ui/dialog/dialog.scss
View File

@ -2,25 +2,25 @@
@include H7; @include H7;
padding: 1rem; padding: 1rem;
border: 1px solid $black; border: 1px solid var(--black);
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
&--message { &--message {
border-color: $Blue-200; border-color: var(--Blue-200);
color: $Blue-600; color: var(--Blue-600);
background-color: $Blue-000; background-color: var(--Blue-000);
} }
&--error { &--error {
border-color: $Red-300; border-color: var(--Red-300);
color: $Red-600; color: var(--Red-600);
background-color: $Red-000; background-color: var(--Red-000);
} }
&--warning { &--warning {
border-color: $Orange-300; border-color: var(--Orange-300);
color: $Orange-600; color: var(--Orange-600);
background-color: $Orange-000; background-color: var(--Orange-000);
} }
} }

8
ui/components/ui/editable-label/index.scss
View File

@ -16,10 +16,10 @@
width: 250px; width: 250px;
text-align: center; text-align: center;
border: 1px solid $alto; border: 1px solid var(--alto);
&--error { &--error {
border: 1px solid $monzo; border: 1px solid var(--monzo);
} }
} }
@ -32,14 +32,14 @@
&__icon { &__icon {
cursor: pointer; cursor: pointer;
color: $dusty-gray; color: var(--dusty-gray);
} }
&__error { &__error {
@include H7; @include H7;
left: 8px; left: 8px;
color: $red; color: var(--red);
} }
&__error-amount { &__error-amount {

6
ui/components/ui/error-message/index.scss
View File

@ -2,9 +2,9 @@
@include H7; @include H7;
min-height: 32px; min-height: 32px;
border: 1px solid $Red-300; border: 1px solid var(--Red-300);
color: $ui-black; color: var(--ui-black);
background: $error-2; background: var(--error-2);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;

12
ui/components/ui/export-text-container/index.scss
View File

@ -3,7 +3,7 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid $alto; border: 1px solid var(--alto);
border-radius: 4px; border-radius: 4px;
font-weight: 400; font-weight: 400;
@ -13,7 +13,7 @@
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
border-radius: 4px; border-radius: 4px;
background: $alabaster; background: var(--alabaster);
} }
&__text { &__text {
@ -21,14 +21,14 @@
resize: none; resize: none;
border: none; border: none;
background: $alabaster; background: var(--alabaster);
text-align: center; text-align: center;
} }
&__buttons-container { &__buttons-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-top: 1px solid $alto; border-top: 1px solid var(--alto);
width: 100%; width: 100%;
} }
@ -41,10 +41,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: $primary-blue; color: var(--primary-blue);
&--copy { &--copy {
border-right: 1px solid $alto; border-right: 1px solid var(--alto);
} }
} }

8
ui/components/ui/form-field/index.scss
View File

@ -18,7 +18,7 @@
&__error, &__error,
&__error h6 { &__error h6 {
color: $error-1 !important; color: var(--error-1) !important;
padding-top: 6px; padding-top: 6px;
} }
@ -34,16 +34,16 @@
&__input { &__input {
width: 100%; width: 100%;
border: solid 1px $ui-3; border: solid 1px var(--ui-3);
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
&:focus { &:focus {
border: solid 2px $primary-1; border: solid 2px var(--primary-1);
} }
&--error { &--error {
border-color: $error-1; border-color: var(--error-1);
} }
} }
} }

4
ui/components/ui/icon-border/icon-border.scss
View File

@ -1,7 +1,7 @@
.icon-border { .icon-border {
border-radius: 50%; border-radius: 50%;
border: 1px solid $ui-1; border: 1px solid var(--ui-1);
background: $ui-1; background: var(--ui-1);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
ui/components/ui/icon-button/icon-button.scss
View File

@ -9,7 +9,7 @@
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
color: $Blue-500; color: var(--Blue-500);
&__circle { &__circle {
display: flex; display: flex;

2
ui/components/ui/icon-with-fallback/icon-with-fallback.scss
View File

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

2
ui/components/ui/icon-with-label/index.scss
View File

@ -6,6 +6,6 @@
@include H8; @include H8;
margin-left: 4px; margin-left: 4px;
color: $Grey-500; color: var(--Grey-500);
} }
} }

Some files were not shown because too many files have changed in this diff Show More