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.

changed text using color-grey to color-secondary
  • Loading branch information
@jadzeidan
jadzeidan committed Oct 28, 2022
1 parent 6054a36 commit 9fcac2d
Show file tree
Hide file tree
Showing 34 changed files with 65 additions and 62 deletions.
6 changes: 3 additions & 3 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 All @@ -13,7 +13,7 @@
}

.successText {
color: var(--color-gray);
color: var(--color-secondary);
font-weight: 400;
font-size: var(--size-subheader);
margin-bottom: var(--space-quarter);
Expand All @@ -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/badge/badge.module.css
View file
Expand Up @@ -9,7 +9,7 @@
}

.generic {
color: var(--color-gray);
color: var(--color-secondary);
}

.primary {
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
6 changes: 3 additions & 3 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 @@ -73,7 +73,7 @@
.sidebarHeader {
font-size: var(--sidebar-header-size);
line-height: var(--sidebar-header-line-height);
color: var(--color-gray);
color: var(--color-secondary);
text-transform: uppercase;
}

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
4 changes: 2 additions & 2 deletions 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 Expand Up @@ -88,7 +88,7 @@
.label,
.columnLabel,
.inlineLabel {
color: var(--color-gray);
color: var(--color-secondary);
font-size: var(--size-default);
}

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/add/add.module.css
View file
Expand Up @@ -18,7 +18,7 @@
}

.successMessage {
color: var(--color-gray);
color: var(--color-secondary);
}

.successMessage strong {
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

0 comments on commit 9fcac2d

Please sign in to comment.