set base colors

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/button.njk

@@ -1,6 +1,6 @@
 <template id="tesoft-button-template">
     <style>
-        @import "src/styles/default.css";
+        @import "/src/styles/default.css";
     </style>
 
     <button>

frontend/src/components/loader.njk

@@ -4,7 +4,6 @@
 
         :host {
             display: block;
-            opacity: 60%;
             width: 4.8rem;
             height: 4.8rem;
         }
@@ -22,19 +21,30 @@
             animation: rotate 2s linear infinite;
             transform-origin: center;
         }
+
+        .dark {
+            fill: var(--dark-gray);
+        }
+
+        .bright {
+            fill: var(--light-gray);
+        }
     </style>
 
     <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="32" cy="32" r="32" stroke-width="1.5783"/>
+        <circle class="dark" cx="32" cy="32" r="32" stroke-width="1.5783"/>
-        <path d="m32 2a30 30 0 0 0-30 30 30 30 0 0 0 30 30 30 30 0 0 0 30-30 30 30 0 0 0-30-30zm0 4a26 26 0 0 1 26 26 26 26 0 0 1-26 26 26 26 0 0 1-26-26 26 26 0 0 1 26-26zm0 19a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7z"
+        <path class="bright"
-              fill="#fff" stroke-width="1.0568"/>
+              d="m32 2a30 30 0 0 0-30 30 30 30 0 0 0 30 30 30 30 0 0 0 30-30 30 30 0 0 0-30-30zm0 4a26 26 0 0 1 26 26 26 26 0 0 1-26 26 26 26 0 0 1-26-26 26 26 0 0 1 26-26zm0 19a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7z"
-        <path class="loading"
+              stroke-width="1.0568"/>
+        <path class="bright loading"
               d="m32 9a23 23 0 0 0-23 23h5a18 18 0 0 1 18-18v-5zm0 7a16 16 0 0 0-16 16h5a11 11 0 0 1 11-11v-5zm11 16a11 11 0 0 1-11 11v5a16 16 0 0 0 16-16h-5zm7 0a18 18 0 0 1-18 18v5a23 23 0 0 0 23-23h-5z"
-              fill="#fff" stroke-width="2.4251"/>
+              stroke-width="2.4251"/>
-        <path d="m45.645 32.951-12.727 12.729 2.1211 2.1211-16.199 16.199h11.312l10.543-10.543 2.1211 2.1211 12.729-12.727-9.9004-9.9004z"
+        <path class="dark"
+              d="m45.645 32.951-12.727 12.729 2.1211 2.1211-16.199 16.199h11.312l10.543-10.543 2.1211 2.1211 12.729-12.727-9.9004-9.9004z"
               stroke-width="2"/>
-        <path d="m45.645 35.779-9.8984 9.9004 2.1211 2.1211-16.199 16.199h5.6562l13.371-13.371 2.1211 2.1211 9.9004-9.8984-7.0723-7.0723zm0 4.2441 2.8281 2.8281-5.6562 5.6562-2.8281-2.8281 5.6562-5.6562z"
+        <path class="bright"
-              fill="#fff" stroke-width="1.184"/>
+              d="m45.645 35.779-9.8984 9.9004 2.1211 2.1211-16.199 16.199h5.6562l13.371-13.371 2.1211 2.1211 9.9004-9.8984-7.0723-7.0723zm0 4.2441 2.8281 2.8281-5.6562 5.6562-2.8281-2.8281 5.6562-5.6562z"
+              stroke-width="1.184"/>
     </svg>
 </template>
 

frontend/src/styles/default.css

@@ -1,5 +1,8 @@
 :root {
-
+    --dark-gray: #222831;
+    --gray: #393E46;
+    --gold: #FFD369;
+    --light-gray: #EEEEEE;
 }
 
 html {
@@ -32,3 +35,7 @@ html {
 .hidden {
     display: none !important;
 }
+
+a {
+    color: var(--gold);
+}

frontend/src/styles/main.css

@@ -9,3 +9,8 @@
     src: url(/public/assets/AdwaitaSans-Regular.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+body {
+    background-color: var(--dark-gray);
+    color: var(--light-gray);
+}