From 10dab431a8b0dd70a1fab866fdc7a91fbf228d69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 30 Dec 2021 23:24:38 +0100
Subject: [PATCH] use solarized as color scheme

---
 ui/src/App.svelte                         |  2 +-
 ui/src/components/utils/IconButton.svelte |  2 +-
 ui/src/components/utils/Input.svelte      |  2 +-
 ui/src/components/utils/ProgessBar.svelte |  2 +-
 ui/src/components/widgets/Table.svelte    |  9 ++-
 ui/src/styles/colors-app.scss             | 93 +++++++++++++++++++++++
 ui/src/styles/colors.scss                 | 62 +++++----------
 7 files changed, 119 insertions(+), 53 deletions(-)
 create mode 100644 ui/src/styles/colors-app.scss

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index fdd567e..6b47a4d 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -35,7 +35,7 @@
 
 <style global lang="scss">
   @use "normalize.css/normalize.css";
-  @use "styles/colors";
+  @use "styles/colors-app";
   @use "styles/fonts";
 
   html,
diff --git a/ui/src/components/utils/IconButton.svelte b/ui/src/components/utils/IconButton.svelte
index c504bc6..9eda53f 100644
--- a/ui/src/components/utils/IconButton.svelte
+++ b/ui/src/components/utils/IconButton.svelte
@@ -25,6 +25,6 @@
   .active,
   button:hover {
     opacity: 1;
-    color: var(--active-color, var(--primary-lightest));
+    color: var(--active-color, var(--primary));
   }
 </style>
diff --git a/ui/src/components/utils/Input.svelte b/ui/src/components/utils/Input.svelte
index 93fbb09..04a5c56 100644
--- a/ui/src/components/utils/Input.svelte
+++ b/ui/src/components/utils/Input.svelte
@@ -31,7 +31,7 @@
 
     transition: box-shadow .25s;
     &.focused {
-      box-shadow: 0 0 2px 3px var(--primary-lightest);
+      box-shadow: 0 0 2px 3px var(--primary);
     }
   }
 
diff --git a/ui/src/components/utils/ProgessBar.svelte b/ui/src/components/utils/ProgessBar.svelte
index 7715083..362d259 100644
--- a/ui/src/components/utils/ProgessBar.svelte
+++ b/ui/src/components/utils/ProgessBar.svelte
@@ -20,7 +20,7 @@
   }
 
   .value {
-    background: var(--primary-lightest);
+    background: var(--primary);
     height: 100%;
     width: var(--value);
     transition: width 0.2s ease;
diff --git a/ui/src/components/widgets/Table.svelte b/ui/src/components/widgets/Table.svelte
index 6584fc4..6d66f8f 100644
--- a/ui/src/components/widgets/Table.svelte
+++ b/ui/src/components/widgets/Table.svelte
@@ -320,19 +320,20 @@ import Input from "../utils/Input.svelte";
 </table>
 
 <style lang="scss" scoped>
+  @use "../../styles/colors";
+
   table {
     width: 100%;
     table-layout: fixed;
 
     border-spacing: 0.5em 0;
 
-    tr {
-      $active-color: hsl(22, 70%, 40%);
+    tr {      
       &.left-active {
         td:first-child {
           background: linear-gradient(
             90deg,
-            $active-color 0%,
+            colors.$orange 0%,
             transparent 100%
           );
         }
@@ -343,7 +344,7 @@ import Input from "../utils/Input.svelte";
           background: linear-gradient(
             90deg,
             transparent 0%,
-            $active-color 100%
+            colors.$orange 100%
           );
         }
       }
diff --git a/ui/src/styles/colors-app.scss b/ui/src/styles/colors-app.scss
new file mode 100644
index 0000000..982ab96
--- /dev/null
+++ b/ui/src/styles/colors-app.scss
@@ -0,0 +1,93 @@
+@use "colors";
+
+@mixin rebase(
+    $rebase03,
+    $rebase02,
+    $rebase01,
+    $rebase00,
+    $rebase0,
+    $rebase1,
+    $rebase2,
+    $rebase3
+  ) {
+    --foreground: #{$rebase0};
+    --foreground-lighter: #{$rebase1};
+    --background: #{$rebase03};
+    --background-emph: #{$rebase02};
+    --primary: #{colors.$blue};
+  
+    background-color: $rebase03;
+    color: $rebase0;
+  }
+  
+  @mixin accentize($accent) {
+    a,
+    a:active,
+    a:visited,
+    code.url {
+      color: $accent;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $accent;
+    }
+  }
+  
+  html {
+    @include rebase(
+      colors.$base3,
+      colors.$base2,
+      colors.$base1,
+      colors.$base0,
+      colors.$base00,
+      colors.$base01,
+      colors.$base02,
+      colors.$base03
+    );
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    html {
+      @include rebase(
+        colors.$base03,
+        colors.$base02,
+        colors.$base01,
+        colors.$base00,
+        colors.$base0,
+        colors.$base1,
+        colors.$base2,
+        colors.$base3
+      );
+    }
+  }
+  
+  html,
+  body {
+    color: var(--foreground);
+    background: var(--background);
+  
+    * {
+      color: var(--foreground);
+    }
+  
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--foreground-lighter);
+      border-color: var(--foreground);
+    }
+  
+    a,
+    a:active,
+    a:visited {
+      color: var(--foreground-lighter);
+    }
+  }
+  
\ No newline at end of file
diff --git a/ui/src/styles/colors.scss b/ui/src/styles/colors.scss
index 6c3f479..b80c69d 100644
--- a/ui/src/styles/colors.scss
+++ b/ui/src/styles/colors.scss
@@ -1,45 +1,17 @@
-@use "sass:color";
-
-$primary: #2c3e50;
-$primary-lighter: #3a5068;
-$primary-lightest: #3a92f0;
-$background: white;
-
-html {
-  --foreground: #{$primary};
-  --foreground-lighter: #{$primary-lighter};
-  --background: #{$background};
-  --background-emph: #{color.scale($background, $lightness: -4%)};
-  --primary-lightest: #{$primary-lightest};
-  --error: darkred;
-  --warning: orange;
-
-  b {
-    color: red;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    --foreground: #{$background};
-    --foreground-lighter: #{color.scale($background, $lightness: -50%)};
-    --background: #{$primary};
-    --background-emph: #{$primary-lighter};
-    --primary-lightest: #{$primary-lightest};
-    --error: red;
-  }
-}
-
-html,
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
-
-a {
-  color: var(--foreground);
-}
-
-a:visited {
-  color: var(--foreground);
-}
+// https://ethanschoonover.com/solarized/
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #8a9b9c;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
\ No newline at end of file