Skip to content

Commit

Permalink
frontends: color variables refactoring
Browse files Browse the repository at this point in the history 
Seperated text and background colors into their own variables. This makes colors easier to maintain because now it's possible to change text and background colors without affecting each other.

Also some text used --color-softblack instead of a designated /* font colors */ variable. Changed this text to --color-default so it is consistant with the other text colors.
  • Loading branch information
@jadzeidan
jadzeidan committed Oct 3, 2022
1 parent 6054a36 commit 094abeb
Show file tree
Hide file tree
Showing 30 changed files with 58 additions and 55 deletions.
4 changes: 2 additions & 2 deletions frontends/web/src/components/aopp/aopp.module.css
View file
@@ -1,6 +1,6 @@
.banner {
background-color: var(--color-blue);
color: var(--color-white);
color: var(--color-alt);
font-weight: 400;
font-size: var(--size-subheader);
padding: var(--space-half);
Expand Down Expand Up @@ -31,7 +31,7 @@
}

.message {
background-color: var(--color-white);
background-color: var(--background-secondary);
border-color: var(--color-mediumgray);
border-radius: 2px;
border-style: solid;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/balance/balance.module.css
View file
Expand Up @@ -117,7 +117,7 @@
display: inline-block;
text-decoration: none;
background-color: var(--color-blue);
color: var(--color-white);
color: var(--color-alt);
width: 18px;
height: 18px;
line-height: 18px;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/copy/Copy.module.css
View file
@@ -1,6 +1,6 @@
.button {
align-items: center;
background-color: var(--color-white);
background-color: var(--background-secondary);
border: none;
border-radius: 50%;
cursor: pointer;
Expand Down
6 changes: 3 additions & 3 deletions frontends/web/src/components/forms/button.module.css
View file
Expand Up @@ -33,7 +33,7 @@
.primary {
composes: button;
background: var(--color-blue);
color: var(--color-white);
color: var(--color-alt);
}

.primary:not([disabled]):focus,
Expand All @@ -43,7 +43,7 @@

.secondary {
composes: button;
background-color: var(--color-white);
background-color: var(--background-secondary);
border-color: var(--color-gray-alt);
color: var(--color-default);
}
Expand All @@ -63,7 +63,7 @@
composes: button;
background-color: var(--color-softred);
border-color: var(--color-softred);
color: var(--color-white);
color: var(--color-alt);
}

.danger:not([disabled]):focus,
Expand Down
14 changes: 7 additions & 7 deletions frontends/web/src/components/forms/checkbox.module.css
View file
Expand Up @@ -31,21 +31,21 @@
top: -1px;
}
.success input + label::before {
border-color: var(--color-white);
border-color: var(--background-secondary);
outline: 1px solid var(--color-success);
}
.warning input + label::before {
border-color: var(--color-white);
border-color: var(--background-secondary);
outline: 1px solid var(--color-warning);
}
.info input + label::before {
border-color: var(--color-white);
border-color: var(--background-secondary);
outline: 1px solid var(--color-info);
}

.checkbox input + label::after {
background: transparent;
border: solid var(--color-white);
border: solid var(--color-alt);
border-width: 0px 2px 2px 0;
width: 0.35em;
height: 0.55em;
Expand All @@ -69,19 +69,19 @@
.success input:checked + label::before {
background-color: var(--color-success);
border-color: var(--color-success);
color: var(--color-white);
color: var(--color-alt);
}

.warning input:checked + label::before {
background-color: var(--color-warning);
border-color: var(--color-warning);
color: var(--color-white);
color: var(--color-alt);
}

.info input:checked + label::before {
background-color: var(--color-info);
border-color: var(--color-info);
color: var(--color-white);
color: var(--color-alt);
}

.checkbox input:checked + label::after {
Expand Down
4 changes: 2 additions & 2 deletions frontends/web/src/components/forms/input.module.css
View file
Expand Up @@ -24,7 +24,7 @@
}

.input input {
background-color: var(--color-white);
background-color: var(--background-secondary);
border-color: var(--color-mediumgray);
border-radius: 2px;
border-style: solid;
Expand All @@ -49,7 +49,7 @@
}

.input input[disabled] {
background-color: var(--color-white) !important;
background-color: var(--background-secondary) !important;
border-color: var(--color-lightgray) !important;
color: var(--color-secondary) !important;
cursor: not-allowed;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/forms/radio.module.css
View file
Expand Up @@ -50,7 +50,7 @@
/* checked */

.radio input:checked + label::before {
background-color: var(--color-white);
background-color: var(--background-secondary);
}

.radio input:checked + label::after {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/forms/select.module.css
View file
Expand Up @@ -12,7 +12,7 @@

.select select {
appearance: none;
background-color: var(--color-white);
background-color: var(--background-secondary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
background-position: calc(100% - 12px);
background-repeat: no-repeat;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/guide/guide.module.css
View file
Expand Up @@ -11,7 +11,7 @@
}

.close {
color: var(--color-white);
color: var(--color-alt);
font-size: var(--size-default) !important;
text-decoration: none;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/inlineMessage/InlineMessage.module.css
View file
Expand Up @@ -6,7 +6,7 @@

.inlineMessage.success {
background-color: var(--color-success);
color: var(--color-white);
color: var(--color-alt);
}

.inlineMessage.left {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/layout/grid.module.css
View file
Expand Up @@ -3,7 +3,7 @@
}

.columnAsCard {
background-color: var(--color-white);
background-color: var(--background-secondary);
padding: var(--space-default);
}

Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/layout/header.module.css
View file
@@ -1,5 +1,5 @@
.container {
background-color: var(--color-white);
background-color: var(--background-secondary);
width: 100%;
}

Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/settingsButton/settingsButton.module.css
View file
Expand Up @@ -10,7 +10,7 @@
text-align:left;
border: none;
color: var(--color-blue);
background-color: var(--color-white);
background-color: var(--background-secondary);
font-size: var(--size-default);
font-weight: 400;
padding: 0 var(--space-half);
Expand Down
4 changes: 2 additions & 2 deletions frontends/web/src/components/sidebar/sidebar.css
View file
Expand Up @@ -20,7 +20,7 @@
position: fixed;
margin-left: calc(var(--sidebar-width-large) * -1);
align-content: stretch;
background-color: var(--color-softblack);
background-color: var(--background-dark);
display: flex;
flex-direction: column;
flex-shrink: 0;
Expand Down Expand Up @@ -137,7 +137,7 @@
a.sidebar-active .sidebar_label,
.sidebar a:hover .sidebar_label,
.activeGroup .sidebar_label {
color: var(--color-white);
color: var(--color-alt);
}

.sidebar a.sidebar-active .sidebar_label {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/status/status.module.css
View file
Expand Up @@ -33,7 +33,7 @@
.success label, /* also force label elements to use color white */
.warning label,
.info label {
color: var(--color-white);
color: var(--color-alt);
}

.close-success {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/toast/Toast.module.css
View file
Expand Up @@ -36,7 +36,7 @@

.toast p {
margin: 0;
color: var(--color-white);
color: var(--color-alt);
}

@media (max-width: 768px) {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/transactions/transaction.module.css
View file
Expand Up @@ -3,7 +3,7 @@
}

.row {
background-color: var(--color-white) !important;
background-color: var(--background-secondary) !important;
min-height: 52px;
}

Expand Down
6 changes: 3 additions & 3 deletions frontends/web/src/components/transactions/transactions.module.css
View file
Expand Up @@ -16,7 +16,7 @@

.columns {
align-items: center;
background-color: var(--color-white);
background-color: var(--background-secondary);
display: flex;
flex-direction: row;
justify-content: flex-start;
Expand All @@ -25,7 +25,7 @@
}

.headers {
color: var(--color-softblack);
color: var(--color-default);
font-weight: bold;
height: 48px;
}
Expand Down Expand Up @@ -86,7 +86,7 @@
}

.empty {
background-color: var(--color-white);
background-color: var(--background-secondary);
height: 52px;
display: flex;
flex-direction: row;
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/components/view/view.module.css
View file
Expand Up @@ -77,7 +77,7 @@
}
}
.dialog .inner {
background-color: var(--color-white);
background-color: var(--background-secondary);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
flex-grow: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/routes/account/account.module.css
View file
Expand Up @@ -30,7 +30,7 @@
.send {
background-color: var(--color-blue);
border-radius: 2px;
color: var(--color-white);
color: var(--color-alt);
display: inline-block;
font-size: var(--size-default);
height: calc(var(--item-height) / 1.5);
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/routes/account/receive/receive.module.css
View file
Expand Up @@ -52,7 +52,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-white);
background-color: var(--background-secondary);
}

.changeType {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/routes/account/send/send.module.css
View file
Expand Up @@ -74,7 +74,7 @@

.qrButton {
border: none;
background-color: var(--color-white);
background-color: var(--background-secondary);
width: 18px;
height: 18px;
padding: 0;
Expand Down
12 changes: 6 additions & 6 deletions frontends/web/src/routes/account/summary/accountssummary.module.css
View file
Expand Up @@ -57,14 +57,14 @@

.table thead th,
.table tfoot th {
background-color: var(--color-white);
color: var(--color-softblack);
background-color: var(--background-secondary);
color: var(--color-default);
font-size: var(--size-default);
font-weight: bold;
}

.table strong {
color: var(--color-softblack);
color: var(--color-default);
}

.table thead th:first-child,
Expand All @@ -79,7 +79,7 @@
}

.table tbody td {
background-color: var(--color-white);
background-color: var(--background-secondary);
}

.clickable {
Expand All @@ -92,7 +92,7 @@

.table tfoot th,
.table tfoot td {
background-color: var(--color-white);
background-color: var(--background-secondary);
padding-bottom: calc(var(--space-quarter) + var(--space-half));
}

Expand Down Expand Up @@ -158,7 +158,7 @@
}

.table tfoot tr {
background-color: var(--color-white);
background-color: var(--background-secondary);
display: flex;
justify-content: space-between;
}
Expand Down
10 changes: 5 additions & 5 deletions frontends/web/src/routes/account/summary/chart.module.css
View file
Expand Up @@ -36,10 +36,10 @@

.filters button {
appearance: none;
background: var(--color-white);
border: 2px solid var(--color-white);
background: var(--background-secondary);
border: 2px solid var(--background-secondary);
border-radius: 2rem;
color: var(--color-softblack);
color: var(--color-default);
line-height: 1.75;
margin-bottom: var(--spacing-half);
margin-left: var(--spacing-half);
Expand All @@ -54,13 +54,13 @@
.filters button.filterActive {
background: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
color: var(--color-alt);
}

.filters button[disabled] {
background: var(--color-mediumgray);
border-color: var(--color-mediumgray);
color: var(--color-white);
color: var(--color-alt);
}

.arrow svg {
Expand Down
2 changes: 1 addition & 1 deletion frontends/web/src/routes/device/bitbox01/bitbox01.module.css
View file
Expand Up @@ -117,7 +117,7 @@
.waitingContent {
max-width: 540px;
width: 100%;
background-color: var(--color-white);
background-color: var(--background-secondary);
padding: var(--space-default);
margin: 0 auto;
text-align: center;
Expand Down

0 comments on commit 094abeb

Please sign in to comment.