frontends: color variables refactoring

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
thisconnect · Oct 28, 2022 · 9fcac2d · 9fcac2d
1 parent 6054a36
commit 9fcac2d
Show file tree

Hide file tree

Showing 34 changed files with 65 additions and 62 deletions.
diff --git a/frontends/web/src/components/aopp/aopp.module.css b/frontends/web/src/components/aopp/aopp.module.css
@@ -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);
@@ -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);
@@ -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;

diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
@@ -9,7 +9,7 @@
 }
 
 .generic {
-  color: var(--color-gray);
+  color: var(--color-secondary);
 }
 
 .primary {

diff --git a/frontends/web/src/components/balance/balance.module.css b/frontends/web/src/components/balance/balance.module.css
@@ -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;

diff --git a/frontends/web/src/components/copy/Copy.module.css b/frontends/web/src/components/copy/Copy.module.css
@@ -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;

diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
@@ -33,7 +33,7 @@
 .primary {
     composes: button;
     background: var(--color-blue);
-    color: var(--color-white);
+    color: var(--color-alt);
 }
 
 .primary:not([disabled]):focus,
@@ -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);
 }
@@ -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,

diff --git a/frontends/web/src/components/forms/checkbox.module.css b/frontends/web/src/components/forms/checkbox.module.css
@@ -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;
@@ -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 {

diff --git a/frontends/web/src/components/forms/input.module.css b/frontends/web/src/components/forms/input.module.css
@@ -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;
@@ -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;

diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css
@@ -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 {

diff --git a/frontends/web/src/components/forms/select.module.css b/frontends/web/src/components/forms/select.module.css
@@ -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;

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -11,7 +11,7 @@
 }
 
 .close {
-    color: var(--color-white);
+    color: var(--color-alt);
     font-size: var(--size-default) !important;
     text-decoration: none;
     display: flex;

diff --git a/frontends/web/src/components/inlineMessage/InlineMessage.module.css b/frontends/web/src/components/inlineMessage/InlineMessage.module.css
@@ -6,7 +6,7 @@
 
 .inlineMessage.success {
 	background-color: var(--color-success);
-	color: var(--color-white);
+	color: var(--color-alt);
 }
 
 .inlineMessage.left {

diff --git a/frontends/web/src/components/layout/grid.module.css b/frontends/web/src/components/layout/grid.module.css
@@ -3,7 +3,7 @@
 }
 
 .columnAsCard {
-    background-color: var(--color-white);
+    background-color: var(--background-secondary);
     padding: var(--space-default);
 }
 

diff --git a/frontends/web/src/components/layout/header.module.css b/frontends/web/src/components/layout/header.module.css
@@ -1,5 +1,5 @@
 .container {
-    background-color: var(--color-white);
+    background-color: var(--background-secondary);
     width: 100%;
 }
 

diff --git a/frontends/web/src/components/settingsButton/settingsButton.module.css b/frontends/web/src/components/settingsButton/settingsButton.module.css
@@ -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);

diff --git a/frontends/web/src/components/sidebar/sidebar.css b/frontends/web/src/components/sidebar/sidebar.css
@@ -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;
@@ -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;
 }
 
@@ -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 {

diff --git a/frontends/web/src/components/status/status.module.css b/frontends/web/src/components/status/status.module.css
@@ -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 {

diff --git a/frontends/web/src/components/toast/Toast.module.css b/frontends/web/src/components/toast/Toast.module.css
@@ -36,7 +36,7 @@
 
 .toast p {
     margin: 0;
-    color: var(--color-white);
+    color: var(--color-alt);
 }
 
 @media (max-width: 768px) {

diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
@@ -3,7 +3,7 @@
 }
 
 .row {
-    background-color: var(--color-white) !important;
+    background-color: var(--background-secondary) !important;
     min-height: 52px;
 }
 
@@ -88,7 +88,7 @@
 .label,
 .columnLabel,
 .inlineLabel {
-    color: var(--color-gray);
+    color: var(--color-secondary);
     font-size: var(--size-default);
 }
 

diff --git a/frontends/web/src/components/transactions/transactions.module.css b/frontends/web/src/components/transactions/transactions.module.css
@@ -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;
@@ -25,7 +25,7 @@
 }
 
 .headers {
-  color: var(--color-softblack);
+  color: var(--color-default);
   font-weight: bold;
   height: 48px;
 }
@@ -86,7 +86,7 @@
 }
 
 .empty {
-  background-color: var(--color-white);
+  background-color: var(--background-secondary);
   height: 52px;
   display: flex;
   flex-direction: row;

diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
@@ -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;
 }

diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
@@ -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);

diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
@@ -18,7 +18,7 @@
 }
 
 .successMessage {
-    color: var(--color-gray);
+    color: var(--color-secondary);
 }
 
 .successMessage strong {

diff --git a/frontends/web/src/routes/account/receive/receive.module.css b/frontends/web/src/routes/account/receive/receive.module.css
@@ -52,7 +52,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--color-white);
+    background-color: var(--background-secondary);
 }
 
 .changeType {

diff --git a/frontends/web/src/routes/account/send/send.module.css b/frontends/web/src/routes/account/send/send.module.css
@@ -74,7 +74,7 @@
 
 .qrButton {
     border: none;
-    background-color: var(--color-white);
+    background-color: var(--background-secondary);
     width: 18px;
     height: 18px;
     padding: 0;

diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -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,
@@ -79,7 +79,7 @@
 }
 
 .table tbody td {
-    background-color: var(--color-white);
+    background-color: var(--background-secondary);
 }
 
 .clickable {
@@ -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));
 }
 
@@ -158,7 +158,7 @@
     }
 
     .table tfoot tr {
-        background-color: var(--color-white);
+        background-color: var(--background-secondary);
         display: flex;
         justify-content: space-between;
     }