style color variables refactoring and fixes

src/components/Button/styles.css

@@ -7,6 +7,7 @@
     border-radius: 100px;
     border: 1px solid var(--color-shadow);
 
+    color: var(--color-text);
     background-color: var(--color-back);
 
     transition: box-shadow 150ms;

src/components/Card/styles.css

@@ -42,7 +42,7 @@
 }
 
 .card-body {
-    background-color: var(--color-back-main);
+    background-color: var(--color-back);
     padding: var(--size-m);
 }
 
@@ -56,7 +56,7 @@
 .card.simple .card-body:before {
     position: absolute;
     content: '';
-    background-color: var(--color-back-main);
+    background-color: var(--color-back);
 
     border-radius: var(--radius) var(--radius) 0 0;
     width: 100%;

src/components/Page/styles.css

@@ -1,5 +1,5 @@
 .page hr {
-    border: 1px solid black;
+    border: 1px solid var(--color-text);
     margin-top: var(--size-m);
     margin-bottom: var(--size-m);
 }

src/components/Wrapper/index.tsx

@@ -14,7 +14,7 @@ export const Wrapper: React.FC<WrapperProps> = props => (
                 display: flex;
                 flex-direction: column;
                 min-height: 100vh;
-                background-color: white;
+                background-color: var(--color-back-main);
 
                 font-family: var(--text-font);
                 font-size: var(--font-size-default);