From 055093d463a1d58bd412df1bfe189e27909f8adc Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 15 May 2021 18:11:24 +0200
Subject: Added light theme

---
 assets/css/_vars.scss | 141 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 97 insertions(+), 44 deletions(-)

(limited to 'assets/css/_vars.scss')

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ab3d9e5..388db0e 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -24,56 +24,109 @@ $font-size:       16px;
 $line-height:     1.7;
 $content--width:  42rem;
 
-$gray0: hsl(220, 7%, 7%);
-$gray1: hsl(220, 7%, 11%);
-$gray2: hsl(220, 7%, 18%);
-$gray3: hsl(220, 7%, 23%);
-$gray4: hsl(220, 7%, 38%);
-$gray5: hsl(220, 7%, 60%);
-$gray6: hsl(220, 7%, 76%);
-$gray7: hsl(220, 7%, 100%);
+@include iro-execute {
+    $gray0: hsl(220, 7%, 7%);
+    $gray1: hsl(220, 7%, 11%);
+    $gray2: hsl(220, 7%, 18%);
+    $gray3: hsl(220, 7%, 23%);
+    $gray4: hsl(220, 7%, 38%);
+    $gray5: hsl(220, 7%, 60%);
+    $gray6: hsl(220, 7%, 76%);
+    $gray7: hsl(220, 7%, 100%);
 
-@include store((
-    --dims: (
-        --outer:  4rem,
-        --indent: 2rem,
-    ),
-    --colors: (
-        --bg-hi:  $gray0, // Darker background
-        --bg:     $gray1, // Background
-        --bg-lo:  $gray2, // Lighter background
-    
-        --obj-hi: $gray3,
-        --obj:    $gray4,
-    
-        --fg-hi:  $gray5, // Faint text
-        --fg:     $gray6, // Text
-        --fg-lo:  $gray7, // Strong text
-
-        --accent: (
-            --h:     354,
-            --s:     84%,
-            --l:     55%,
-            --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+    @include store((
+        --dims: (
+            --outer:  4rem,
+            --indent: 2rem,
+
+            --obj-shadow: 0 .4em 3.5em,
         ),
+        --colors: (
+            --bg-hi:  $gray0, // Darker background
+            --bg:     $gray1, // Background
+            --bg-lo:  $gray2, // Lighter background
+        
+            --obj-hi: $gray3,
+            --obj:    $gray4,
+        
+            --fg-hi:  $gray5, // Faint text
+            --fg:     $gray6, // Text
+            --fg-lo:  $gray7, // Strong text
 
-        --focus-ring: var(--colors--fg-lo),
+            --obj-shadow: transparent,
 
-        --select: (
-            --bg:     rgba($gray7, .996),
-            --img-bg: rgba($gray7, .5),
-            --fg:     $gray0,
-        ),
+            --accent: (
+                --h:     354,
+                --s:     84%,
+                --l:     55%,
+                --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+            ),
+
+            --focus-ring: var(--colors--fg-lo),
 
-        --link: (
-            --idle: var(--colors--fg-lo),
-            --colored: (
-                --idle:    hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), //
-                --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
-            )
+            --select: (
+                --bg:     rgba($gray7, .996),
+                --img-bg: rgba($gray7, .5),
+                --fg:     var(--colors--bg-hi),
+            ),
+
+            --link: (
+                --idle: var(--colors--fg-lo),
+                --colored: (
+                    --idle:    hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
+                )
+            ),
+        )
+    ));
+}
+
+@include iro-execute {
+    $gray0: hsl(220, 7%, 100%);
+    $gray1: hsl(220, 7%, 97%);
+    $gray2: hsl(220, 7%, 88%);
+    $gray3: hsl(220, 7%, 83%);
+    $gray4: hsl(220, 7%, 68%);
+    $gray5: hsl(220, 7%, 40%);
+    $gray6: hsl(220, 7%, 16%);
+    $gray7: hsl(220, 7%, 0%);
+
+    @include store((
+        --colors: (
+            --bg-hi:  $gray0, // Darker background
+            --bg:     $gray1, // Background
+            --bg-lo:  $gray2, // Lighter background
+        
+            --obj-hi: $gray3,
+            --obj:    $gray4,
+        
+            --fg-hi:  $gray5, // Faint text
+            --fg:     $gray6, // Text
+            --fg-lo:  $gray7, // Strong text
+
+            --obj-shadow: rgba(#000, .05),
+
+            --accent: (
+                --h:     354,
+                --s:     74%,
+                --l:     48%,
+                --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+            ),
+
+            --select: (
+                --bg:     rgba($gray7, .996),
+                --img-bg: rgba($gray7, .5),
+            ),
+
+            --link: (
+                --colored: (
+                    --idle:    hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), //
+                )
+            ),
         ),
-    )
-));
+    ), 'light');
+}
 
 @each $breakpoint in map-keys($breakpoints) {
     @include media('<=#{$breakpoint}') {
-- 
cgit v1.2.3-54-g00ecf