From 41920ccc5b0777fe59f76d851acf2bbf83386bd5 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Sun, 6 Feb 2022 14:42:44 +0000
Subject: [PATCH] Switch to new color system

---
 src/_globals.scss                          | 125 +++++++++++++--------
 src/components/navigation.module.scss      |  28 ++---
 src/components/scambox/Chatbox.module.scss |  45 +++-----
 src/layouts/default.scss                   |  27 ++---
 src/pages/friends.module.scss              |   8 +-
 src/pages/index.module.scss                |  62 +++-------
 src/templates/blog/listing.module.scss     |   4 +-
 src/templates/blog/post.module.scss        |   6 +-
 src/templates/project.module.scss          |  35 ++++--
 9 files changed, 159 insertions(+), 181 deletions(-)

diff --git a/src/_globals.scss b/src/_globals.scss
index 765197e..5585143 100644
--- a/src/_globals.scss
+++ b/src/_globals.scss
@@ -27,47 +27,88 @@ $theme-light: (
     "purple": #6848da,
 );
 
-$accentColor: map.get($theme, "accent");
-$background: map.get($theme, "background");
-$lightBackground: map.get($theme-light, "background");
-$textColor: map.get($theme, "text");
-$lightTextColor: map.get($theme-light, "text");
-$accentColorDarker: darken($accentColor, 5);
-$borderColor: rgba(0, 0, 0, 0.25);
-$border: thin solid $borderColor;
+$border: thin solid var(--color-border);
 $textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
-$textShadowAccent: 0 0 20px rgba($accentColor, 0.15);
-$textShadowAccentLight: 0 0 20px rgba($accentColor, 0.3);
-
-$skillColor1: map.get($theme, "red");
-$skillColor2: map.get($theme, "orange");
-$skillColor3: map.get($theme, "green");
-$skillColor4: map.get($theme, "blue");
-$skillColor5: map.get($theme, "purple");
-
-$skillColor1Light: map.get($theme-light, "red");
-$skillColor2Light: map.get($theme-light, "orange");
-$skillColor3Light: map.get($theme-light, "green");
-$skillColor4Light: map.get($theme-light, "blue");
-$skillColor5Light: map.get($theme-light, "purple");
-
-$noticeColor: rgba($accentColor, 0.15);
+$textShadowAccent: 0 0 20px var(--color-accent-shadow);
 
 $cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
 $cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-    -1px 11px 33px -10px rgba($accentColor, 0.75);
+    -1px 11px 33px -10px var(--color-accent-shadow-hover);
 
 $cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
 $cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-    -1px 11px 33px -10px rgba($accentColor, 0.75);
+    -1px 11px 33px -10px var(--color-accent-shadow-hover);
 
-$homeProfileShadow: -1px 11px 33px -10px rgba($accentColor, 0.25);
+$homeProfileShadow: -1px 11px 33px -10px var(--color-accent-shadow-profile);
 $homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
 $homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
 
-$aboutCVShadow: 0 0 15px 0 rgba($accentColor, 0.25);
-$aboutCVColorEdu: map.get($theme, "blue");
-$aboutCVColorEduLight: map.get($theme-light, "blue");
+$aboutCVShadow: 0 0 15px 0 var(--color-accent-shadow-profile);
+
+@mixin vars {
+    --color-accent: #{map.get($theme, "accent")};
+    --color-accent-darker: #{darken(map.get($theme, "accent"), 5)};
+    --color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.15)};
+    --color-accent-shadow-button: #{rgba(map.get($theme, "accent"), 0.5)};
+    --color-accent-shadow-button-hover: #{rgba(map.get($theme, "accent"), 0.9)};
+    --color-accent-shadow-hover: #{rgba(map.get($theme, "accent"), 0.75)};
+    --color-accent-shadow-profile: #{rgba(map.get($theme, "accent"), 0.25)};
+    --color-background: #{map.get($theme, "background")};
+    --color-background-secondary: #{lighten(map.get($theme, "background"), 1)};
+    --color-background-glass: #{rgba(map.get($theme, "background"), 0.9)};
+    --color-background-transparent: #{rgba(map.get($theme, "background"), 0.95)};
+    --color-background-seethru: #{rgba(map.get($theme, "background"), 0.35)};
+    --color-background-extreme-seethru: #{rgba(
+            map.get($theme, "background"),
+            0.25
+        )};
+    --color-text: #{map.get($theme, "text")};
+    --color-border: rgba(0, 0, 0, 0.25);
+
+    --color-skill-1: #{map.get($theme, "red")};
+    --color-skill-2: #{map.get($theme, "orange")};
+    --color-skill-3: #{map.get($theme, "green")};
+    --color-skill-4: #{map.get($theme, "blue")};
+    --color-skill-5: #{map.get($theme, "purple")};
+
+    --color-notice: #{rgba(map.get($theme, "accent"), 0.15)};
+
+    --color-cv-edu: #{map.get($theme, "blue")};
+
+    @media (prefers-color-scheme: light) {
+        --color-background: #{map.get($theme-light, "background")};
+        --color-background-secondary: #{darken(
+                map.get($theme-light, "background"),
+                1
+            )};
+        --color-background-glass: #{rgba(
+                map.get($theme-light, "background"),
+                0.9
+            )};
+        --color-background-transparent: #{rgba(
+                map.get($theme-light, "background"),
+                0.95
+            )};
+        --color-background-seethru: #{rgba(
+                map.get($theme-light, "background"),
+                0.35
+            )};
+        --color-background-extreme-seethru: #{rgba(
+                map.get($theme-light, "background"),
+                0.25
+            )};
+        --color-text: #{map.get($theme-light, "text")};
+        --color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.3)};
+
+        --color-skill-1: #{map.get($theme-light, "red")};
+        --color-skill-2: #{map.get($theme-light, "orange")};
+        --color-skill-3: #{map.get($theme-light, "green")};
+        --color-skill-4: #{map.get($theme-light, "blue")};
+        --color-skill-5: #{map.get($theme-light, "purple")};
+
+        --color-cv-edu: #{map.get($theme-light, "blue")};
+    }
+}
 
 @mixin homeBg {
     background: linear-gradient(45deg, #000850 0%, #000320 100%),
@@ -99,10 +140,10 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
     box-shadow: $cardShadow;
     transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
         color 0.25s;
-    color: $textColor;
+    color: var(--color-text);
     text-decoration: none;
     margin: 20px;
-    background: $background;
+    background: var(--color-background);
 
     &:hover,
     &:active,
@@ -114,9 +155,6 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
     @media (prefers-color-scheme: light) {
         box-shadow: $cardLightShadow;
 
-        background: $lightBackground;
-        color: $lightTextColor;
-
         &:hover,
         &:active,
         &:focus {
@@ -130,17 +168,17 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
     display: flex;
     padding: 10px;
     text-align: center;
-    background: $accentColorDarker;
+    background: var(--color-accent-darker);
     color: white;
     text-decoration: none;
-    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
+    box-shadow: 0 0 33px -10px var(--color-accent-shadow-button);
     transition: box-shadow 0.25s;
     align-items: center;
     justify-content: center;
     text-shadow: 0 0 10px black;
 
     @media (prefers-color-scheme: light) {
-        background-color: $accentColor;
+        background-color: var(--color-accent);
     }
 
     svg {
@@ -150,7 +188,7 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
     &:hover,
     &:active,
     &:hover {
-        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
+        box-shadow: 0 0 33px -10px var(--color-accent-shadow-button-hover);
     }
 }
 
@@ -160,23 +198,18 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
 }
 
 @mixin homeBanner {
-    background: lighten($background, 1);
+    background: var(--color-background-secondary);
     cursor: pointer;
     text-decoration: none;
-    color: inherit;
+    color: var(--color-text);
     transition: background-color 0.25s, color 0.25s;
 
-    @media (prefers-color-scheme: light) {
-        background: darken($accentColor, 1);
-    }
-
     > div {
         display: flex;
         height: 100%;
         padding: 20px !important;
         line-height: 50px;
         font-size: 1.7em;
-        color: white;
 
         > span {
             margin-left: auto;
diff --git a/src/components/navigation.module.scss b/src/components/navigation.module.scss
index 47b69be..21c0290 100644
--- a/src/components/navigation.module.scss
+++ b/src/components/navigation.module.scss
@@ -7,9 +7,9 @@
     width: 100%;
     height: 100%;
     z-index: 1200;
-    background-color: rgba($background, 0.9);
+    background-color: var(--color-background-glass);
     backdrop-filter: blur(10px);
-    color: white;
+    color: var(--color-text);
     overflow: auto;
     opacity: 0;
     transition: opacity 0.25s, left 0.25s;
@@ -22,11 +22,6 @@
         pointer-events: auto;
     }
 
-    @media (prefers-color-scheme: light) {
-        background-color: rgba($lightBackground, 0.9);
-        color: black;
-    }
-
     .inner {
         display: flex;
         flex-direction: column;
@@ -75,23 +70,14 @@
     left: 0;
     display: flex;
     width: 100%;
-    background: rgba($background, 0.95);
-    color: $textColor;
+    background: var(--color-background-transparent);
+    color: var(--color-text);
     backdrop-filter: blur(5px);
     z-index: 999;
     transition: background-color 0.25s, color 0.25s;
 
     @supports (backdrop-filter: blur(5px)) {
-        background: rgba($background, 0.9);
-    }
-
-    @media (prefers-color-scheme: light) {
-        background: rgba($lightBackground, 0.95);
-        color: $lightTextColor;
-
-        @supports (backdrop-filter: blur(5px)) {
-            background: rgba($lightBackground, 0.9);
-        }
+        background: var(--color-background-glass);
     }
 
     .topBarInner {
@@ -135,7 +121,7 @@
                 transition: border-color 0.25s;
 
                 @media (prefers-color-scheme: light) {
-                    border-color: $accentColor;
+                    border-color: var(--color-accent);
                 }
             }
 
@@ -150,7 +136,7 @@
 
 .homeBar.homeBarTransparent {
     background: transparent;
-    color: $textColor;
+    color: white;
     backdrop-filter: blur(0);
 }
 
diff --git a/src/components/scambox/Chatbox.module.scss b/src/components/scambox/Chatbox.module.scss
index 3bdb68d..1eef064 100644
--- a/src/components/scambox/Chatbox.module.scss
+++ b/src/components/scambox/Chatbox.module.scss
@@ -26,7 +26,7 @@
         margin-bottom: 20px;
         background-image: linear-gradient(
             to top,
-            $background,
+            var(--color-background),
             transparent 20px
         );
     }
@@ -35,8 +35,16 @@
         border-radius: 0;
         margin-top: 20px;
         margin-bottom: 20px;
-        background-image: linear-gradient(to top, $background, transparent 20px),
-            linear-gradient(to bottom, $background, transparent 20px);
+        background-image: linear-gradient(
+                to top,
+                var(--color-background),
+                transparent 20px
+            ),
+            linear-gradient(
+                to bottom,
+                var(--color-background),
+                transparent 20px
+            );
     }
 
     &.openTop {
@@ -44,37 +52,10 @@
         margin-top: 20px;
         background-image: linear-gradient(
             to bottom,
-            $background,
+            var(--color-background),
             transparent 20px
         );
     }
-
-    @media (prefers-color-scheme: light) {
-        &.openBottom {
-            background-image: linear-gradient(
-                to top,
-                $lightBackground,
-                transparent 20px
-            );
-        }
-
-        &.openBoth {
-            background-image: linear-gradient(
-                    to top,
-                    $lightBackground,
-                    transparent 20px
-                ),
-                linear-gradient(to bottom, $lightBackground, transparent 20px);
-        }
-
-        &.openTop {
-            background-image: linear-gradient(
-                to bottom,
-                $lightBackground,
-                transparent 20px
-            );
-        }
-    }
 }
 
 .chatnotice {
@@ -104,7 +85,7 @@
     &.alignRight {
         align-items: flex-end;
 
-        --msg-color: #{$accentColor};
+        --msg-color: #{map.get($theme, "accent")};
     }
 
     .name {
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index 6228505..487fcbb 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -4,6 +4,10 @@
 
 @include EncodeSans.fontFaceVariable($type: "wghtOnly");
 
+:root {
+    @include vars;
+}
+
 * {
     box-sizing: border-box;
 
@@ -23,25 +27,22 @@ html,
     min-height: 100vh;
     font-family: $mainFont;
     scroll-behavior: smooth;
+    background: var(--color-background);
+    color: var(--color-text);
 }
 
 #gatsby-focus-wrapper {
-    background: $background;
-    color: $textColor;
+    background: var(--color-background);
+    color: var(--color-text);
     display: flex;
     flex-direction: column;
     transition: background-color 0.25s, color 0.25s;
-
-    @media (prefers-color-scheme: light) {
-        background: $lightBackground;
-        color: $lightTextColor;
-    }
 }
 
 footer {
-    background: darken($background, 1);
+    background: var(--color-background-secondary);
     width: 100%;
-    color: white;
+    color: var(--color-text);
     padding: 5px;
     text-align: center;
     transition: background-color 0.25s, color 0.25s;
@@ -75,7 +76,7 @@ section > article,
 
 article {
     a {
-        color: $accentColor;
+        color: var(--color-accent);
         text-decoration: underline dotted currentColor;
         text-decoration-skip: none;
     }
@@ -84,11 +85,7 @@ article {
 h1 {
     font-size: 2em;
 
-    color: $accentColor;
+    color: var(--color-accent);
 
     text-shadow: $textShadowAccent;
-
-    @media (prefers-color-scheme: light) {
-        text-shadow: $textShadowAccentLight;
-    }
 }
diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss
index a5a38a8..0cac984 100644
--- a/src/pages/friends.module.scss
+++ b/src/pages/friends.module.scss
@@ -61,19 +61,15 @@
                 transition: text-decoration 0.5s;
                 text-decoration: underline dotted rgba(0, 0, 0, 0);
                 padding: 6px 0 6px 0;
-                color: $textColor;
+                color: var(--color-text);
                 transition: color 0.25s;
                 display: flex;
                 align-items: center;
 
                 svg {
-                    color: $accentColor;
+                    color: var(--color-accent);
                     margin-right: 10px;
                 }
-
-                @media (prefers-color-scheme: light) {
-                    color: $lightTextColor;
-                }
             }
         }
     }
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 09f2af6..952e7b9 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -45,7 +45,7 @@
         }
 
         @media (prefers-color-scheme: light) {
-            background-color: $lightBackground;
+            background-color: var(--color-background);
         }
     }
 
@@ -63,9 +63,9 @@
             @include cardGeneric;
             display: flex;
             padding: $layoutPadding;
-            background-color: $background;
+            background-color: var(--color-background);
             margin: $layoutPadding;
-            color: $textColor;
+            color: var(--color-text);
             font-size: 1.6em;
             text-decoration: none;
             border-radius: 10px;
@@ -88,7 +88,7 @@
                 flex-shrink: 0;
 
                 .ctaAccent {
-                    color: $accentColor;
+                    color: var(--color-accent);
                     font-weight: 700;
                     margin-right: 10px;
                 }
@@ -131,13 +131,13 @@
             transition: text-decoration 0.5s;
             text-decoration: underline dotted rgba(white, 0);
             padding: 6px 0 6px 0;
-            color: $textColor;
+            color: inherit;
             display: flex;
             align-items: center;
 
             svg {
                 margin-right: 10px;
-                color: $accentColor;
+                color: var(--color-accent);
                 flex-shrink: 0;
             }
 
@@ -153,7 +153,7 @@
         }
 
         .contactLink > i {
-            color: $accentColor;
+            color: var(--color-accent);
             margin-left: -25px;
             margin-right: 5px;
         }
@@ -164,7 +164,7 @@
             transform: translate(40px, 20px);
             border-radius: 5px;
             padding: 20px 20px 20px 230px;
-            color: $textColor;
+            color: white;
         }
 
         .profileImage,
@@ -189,7 +189,7 @@
 
         .profileImageDummy {
             z-index: 10;
-            background: $accentColor;
+            background: var(--color-accent);
             opacity: 0.2;
             clip-path: $homeProfileClipBack;
         }
@@ -225,7 +225,6 @@
         padding: 15px !important;
         line-height: 15px;
         font-size: 1.2em;
-        color: white;
 
         > span {
             display: flex;
@@ -275,45 +274,23 @@
                     margin: 5px;
 
                     &.skill_framework {
-                        color: $skillColor1;
+                        color: var(--color-skill-1);
                     }
 
                     &.skill_platform {
-                        color: $skillColor2;
+                        color: var(--color-skill-2);
                     }
 
                     &.skill_program {
-                        color: $skillColor3;
+                        color: var(--color-skill-3);
                     }
 
                     &.skill_os {
-                        color: $skillColor4;
+                        color: var(--color-skill-4);
                     }
 
                     &.skill_language {
-                        color: $skillColor5;
-                    }
-
-                    @media (prefers-color-scheme: light) {
-                        &.skill_framework {
-                            color: $skillColor1Light;
-                        }
-
-                        &.skill_platform {
-                            color: $skillColor2Light;
-                        }
-
-                        &.skill_program {
-                            color: $skillColor3Light;
-                        }
-
-                        &.skill_os {
-                            color: $skillColor4Light;
-                        }
-
-                        &.skill_language {
-                            color: $skillColor5Light;
-                        }
+                        color: var(--color-skill-5);
                     }
                 }
             }
@@ -361,7 +338,7 @@
         left: 17px;
         width: 5px;
         height: calc(100% - 40px);
-        background-color: $accentColor;
+        background-color: var(--color-accent);
         border-radius: 100px;
         box-shadow: $aboutCVShadow;
 
@@ -372,7 +349,7 @@
             left: 0;
             width: 5px;
             height: 5px;
-            background-color: $accentColor;
+            background-color: var(--color-accent);
             border-radius: 100px;
             box-shadow: $aboutCVShadow;
         }
@@ -382,7 +359,7 @@
         position: relative;
         margin: 20px 10px;
 
-        --entry-color: #{$accentColor};
+        --entry-color: var(--color-accent);
 
         &:first-child {
             margin-top: 0;
@@ -461,10 +438,7 @@
         }
 
         &.entryTypeeducation {
-            --entry-color: #{$aboutCVColorEdu};
-            @media (prefers-color-scheme: light) {
-                --entry-color: #{$aboutCVColorEduLight};
-            }
+            --entry-color: var(--color-cv-edu);
         }
     }
 }
diff --git a/src/templates/blog/listing.module.scss b/src/templates/blog/listing.module.scss
index dd2f60b..9ec22ae 100644
--- a/src/templates/blog/listing.module.scss
+++ b/src/templates/blog/listing.module.scss
@@ -78,7 +78,7 @@
         border-bottom: thin dotted grey;
 
         .title {
-            color: $accentColor;
+            color: var(--color-accent);
             font-size: 1.5em;
             text-decoration: underline dotted currentColor;
         }
@@ -92,7 +92,7 @@
             margin-left: 10px;
 
             > span {
-                color: $accentColor;
+                color: var(--color-accent);
                 text-decoration: underline dotted currentColor;
             }
         }
diff --git a/src/templates/blog/post.module.scss b/src/templates/blog/post.module.scss
index 24f0935..d62d047 100644
--- a/src/templates/blog/post.module.scss
+++ b/src/templates/blog/post.module.scss
@@ -14,7 +14,7 @@
 }
 
 .noticeBox {
-    background-color: $noticeColor;
+    background-color: var(--color-notice);
     padding: $layoutPadding;
     border-radius: 10px;
 
@@ -66,11 +66,11 @@
         outline: none;
         border-radius: 10px;
         box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-            -1px 11px 33px -10px rgba($accentColor, 0.25);
+            -1px 11px 33px -10px var(--color-accent-shadow-profile);
 
         @media (prefers-color-scheme: light) {
             box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-                -1px 11px 33px -10px rgba($accentColor, 0.25);
+                -1px 11px 33px -10px var(--color-accent-shadow-profile);
         }
     }
 }
diff --git a/src/templates/project.module.scss b/src/templates/project.module.scss
index 108b554..e43ef21 100644
--- a/src/templates/project.module.scss
+++ b/src/templates/project.module.scss
@@ -21,12 +21,22 @@
         height: 400px;
         background: linear-gradient(
             to bottom,
-            rgba($background, 0.95),
-            rgba($background, 0.25) 20%,
-            rgba($background, 0.35) 80%,
-            rgba($background, 1) 100%
+            black,
+            var(--color-background-extreme-seethru) 20%,
+            var(--color-background-seethru) 80%,
+            var(--color-background) 100%
         );
 
+        @media (prefers-color-scheme: light) {
+            background: linear-gradient(
+                to bottom,
+                black,
+                var(--color-background-extreme-seethru) 20%,
+                var(--color-background-seethru) 60%,
+                var(--color-background) 100%
+            );
+        }
+
         .headerInner {
             max-width: $layoutWidth;
             width: 100%;
@@ -36,16 +46,22 @@
             flex-direction: column;
             text-shadow: 0 0 10px black, 0 0 20px black;
             padding: 10px 20px;
+            color: var(--color-text);
+
+            @media (prefers-color-scheme: light) {
+                text-shadow: none;
+            }
 
             * {
                 margin: 0;
-                color: white;
                 font-size: 1.25em;
             }
 
             h1 {
                 font-size: 2.2em;
                 margin-top: auto;
+                color: var(--color-accent);
+                text-shadow: $textShadowAccent;
             }
         }
     }
@@ -67,14 +83,9 @@
 }
 
 .projectAbout {
-    background: #060606;
-    color: white;
+    background: var(--color-background);
+    color: var(--color-text);
     transition: background-color 0.25s, color 0.25s;
-
-    @media (prefers-color-scheme: light) {
-        background: $lightBackground;
-        color: $lightTextColor;
-    }
 }
 
 .projectLinks {