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

Dark Mode: Replace color occurences (#14112)

Browse Source
This commit is contained in:
Guillaume Roux 2022-03-23 16:43:53 +01:00 committed by GitHub
parent 09830ac183
commit 8683282a6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 61 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -228,7 +228,7 @@
&__help-link {
cursor: pointer;
text-decoration: underline;
color: var(--primary-blue);
color: var(--color-primary-default);
margin-inline-start: 3px;
}

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

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

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

@ -77,7 +77,7 @@
@include H7;
cursor: pointer;
color: var(--primary-blue);
color: var(--color-primary-default);
}
b {

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

@ -12,11 +12,11 @@
background-color: transparent;
&:hover {
background-color: var(--Grey-000);
background-color: var(--color-background-alternative);
}
&:active {
background-color: #ededed;
background-color: var(--color-background-alternative);
}
}

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

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

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

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

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

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

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

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

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

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

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

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

2
ui/components/ui/pulse-loader/index.scss
View File

@ -4,7 +4,7 @@
&__loading-dot-one,
&__loading-dot-two,
&__loading-dot-three {
background: var(--Blue-500);
background: var(--color-primary-default);
width: 9px;
height: 9px;
margin-right: 2px;

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

@ -35,7 +35,7 @@
border: none;
background: none;
font-size: 12px;
color: var(--Blue-500);
color: var(--color-primary-default);
&:focus {
outline: none;

25
ui/css/utilities/colors.scss
View File

@ -1,30 +1,5 @@
:root {
// These are the colors of the MetaMask design system
// Only design system colors should be added, no superfluous variables
--Blue-300: #43aefc;
--Blue-400: #1098fc;
--Blue-500: #037dd6;
// Greys
--Grey-000: #f2f3f4;
--Grey-100: #d6d9dc;
--Grey-200: #bbc0c5;
--Grey-400: #848c96;
--Grey-500: #6a737d;
// Reds
--Red-000: #fcf2f3;
--Red-300: #e88f97;
--Red-500: #d73a49;
// Orange
--Orange-500: #f66a0a;
// Yellow
--Yellow-100: #fefcde;
--Yellow-500: #ffd33d;
// Black
--Black-100: #24292e;
// Primary colors
--primary-blue: var(--Blue-500);
// Accents
--accent-red: var(--Red-500);
// Everything below this line is part of the new color system
--primary-1: #037dd6;
--secondary-1: #f66a0a;

2
ui/pages/confirm-add-suggested-token/index.scss
View File

@ -5,7 +5,7 @@
@include H7;
display: inline;
color: var(--primary-blue);
color: var(--color-primary-default);
padding-left: 0;
}

8
ui/pages/confirm-approve/confirm-approve-content/index.scss
View File

@ -204,7 +204,7 @@
div {
width: 22px;
height: 2px;
background: var(--primary-blue);
background: var(--color-primary-default);
position: absolute;
}
@ -220,7 +220,7 @@
&__circle {
width: 14px;
height: 14px;
border: 2px solid var(--primary-blue);
border: 2px solid var(--color-primary-default);
border-radius: 50%;
background: white;
position: absolute;
@ -320,7 +320,7 @@
@include H6;
font-weight: 500;
color: var(--primary-blue);
color: var(--color-primary-default);
}
&__medium-text,
@ -344,7 +344,7 @@
}
&__small-blue-text {
color: var(--primary-blue);
color: var(--color-primary-default);
}
&__info-row {

2
ui/pages/connected-accounts/index.scss
View File

@ -4,7 +4,7 @@
a:hover {
@include H6;
color: var(--primary-blue);
color: var(--color-primary-default);
cursor: pointer;
}
}

2
ui/pages/connected-sites/index.scss
View File

@ -28,7 +28,7 @@
a:hover {
@include H6;
color: var(--primary-blue);
color: var(--color-primary-default);
cursor: pointer;
}
}

4
ui/pages/create-account/import-account/index.scss
View File

@ -1,7 +1,7 @@
.new-account-info-link {
cursor: pointer;
text-decoration: underline;
color: var(--primary-blue);
color: var(--color-primary-default);
margin-inline-start: 4px;
}
@ -57,7 +57,7 @@
}
&__help-link {
color: var(--primary-blue);
color: var(--color-primary-default);
}
&__input-password {

2
ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
View File

@ -56,7 +56,7 @@
}
&__export-text {
color: var(--primary-blue);
color: var(--color-primary-default);
cursor: pointer;
font-weight: 500;
}

8
ui/pages/import-token/index.scss
View File

@ -41,7 +41,7 @@
&__edit {
flex: 1 1 auto;
text-align: right;
color: var(--primary-blue);
color: var(--color-primary-default);
padding-right: 4px;
cursor: pointer;
}
@ -51,7 +51,7 @@
@include H7;
display: inline;
color: var(--primary-blue);
color: var(--color-primary-default);
padding-left: 0;
}
@ -61,11 +61,11 @@
}
&__collectible-address-error-link {
color: var(--primary-blue);
color: var(--color-primary-default);
cursor: pointer;
&:hover {
color: var(--Blue-400);
color: var(--color-primary-default);
}
}
}

2
ui/pages/onboarding-flow/privacy-settings/index.scss
View File

@ -26,7 +26,7 @@
&:hover {
cursor: pointer;
color: var(--Blue-300);
color: var(--color-primary-default);
}
}
}

2
ui/pages/permissions-connect/flask/snap-install/index.scss
View File

@ -16,7 +16,7 @@
color: var(--ui-4);
.link {
color: var(--primary-blue);
color: var(--color-primary-default);
margin-inline-start: 4px;
cursor: pointer;
}

2
ui/pages/permissions-connect/redirect/index.scss
View File

@ -12,7 +12,7 @@
justify-content: space-between;
align-items: center;
text-align: center;
color: var(--Black-100);
color: var(--color-text-default);
}
&__icons {

2
ui/pages/send/send.scss
View File

@ -202,7 +202,7 @@
background-color: var(--color-background-default);
&::placeholder {
color: var(--Grey-200);
color: var(--color-text-muted);
}
}

2
ui/pages/settings/alerts-tab/alerts-tab.scss
View File

@ -23,7 +23,7 @@
}
&__item {
border-bottom: 1px solid var(--Grey-100);
border-bottom: 1px solid var(--color-border-muted);
padding: 16px 32px;
display: flex;
justify-content: space-between;

2
ui/pages/settings/flask/view-snap/index.scss
View File

@ -72,7 +72,7 @@
min-width: 0;
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--Grey-100);
border-bottom: 1px solid var(--color-border-muted);
padding-bottom: 16px;
margin-bottom: 16px;

2
ui/pages/swaps/countdown-timer/index.scss
View File

@ -19,7 +19,7 @@
&--warning {
.countdown-timer__time {
color: var(--Red-500);
color: var(--color-error-default);
}
}
}

2
ui/pages/swaps/searchable-item-list/index.scss
View File

@ -202,7 +202,7 @@
}
&__item--highlighted {
background: var(--Grey-000);
background: var(--color-background-alternative);
}
&__identicon {

2
ui/pages/swaps/select-quote-popover/quote-details/index.scss
View File

@ -7,7 +7,7 @@
&__detail-header {
@include H7;
color: var(--Grey-400);
color: var(--color-text-alternative);
margin-bottom: 2px;
display: flex;
}

2
ui/pages/swaps/slippage-buttons/index.scss
View File

@ -120,7 +120,7 @@
&--danger {
input {
background: var(--Red-500);
background: var(--color-error-default);
}
}
}

4
ui/pages/swaps/swaps-footer/index.scss
View File

@ -3,8 +3,8 @@
&--warning {
.btn-primary {
background: var(--Red-500);
border-color: var(--Red-500);
background: var(--color-error-default);
border-color: var(--color-error-default);
}
}

18
ui/pages/swaps/view-quote/index.scss
View File

@ -45,7 +45,7 @@
&--danger {
span {
color: var(--Red-500);
color: var(--color-error-default);
}
}
}
@ -74,30 +74,30 @@
.actionable-message {
button {
background: var(--color-primary-default);
color: #fff;
color: var(--color-primary-inverse);
}
}
}
&.medium {
.actionable-message {
border-color: var(--Yellow-500);
background: var(--Yellow-100);
border-color: var(--color-warning-default);
background: var(--color-warning-muted);
button {
background: var(--Yellow-500);
background: var(--color-warning-default);
}
}
}
&.high {
.actionable-message {
border-color: var(--Red-300);
background: var(--Red-000);
border-color: var(--color-warning-default);
background: var(--color-warning-muted);
button {
background: var(--Red-500);
color: #fff;
background: var(--color-warning-default);
color: var(--color-warning-inverse);
}
}
}