From c645b7be46f343ef66c0e19532a12e6d6dd9db88 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 12 Feb 2022 10:10:33 +0100
Subject: Added dark color palette

---
 src/_vars.scss | 70 ++++++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 49 insertions(+), 21 deletions(-)

(limited to 'src/_vars.scss')

diff --git a/src/_vars.scss b/src/_vars.scss
index 8531715..6d273f4 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -30,18 +30,11 @@ media.$unit-intervals: (
                 --lg: 1.5,
                 --xl: 2,
             ),
-            --x: (
-                --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
-                --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
-                --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
-            ),
-            --y: (
-                --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
-                --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
-                --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
-                --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
-                --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
-            ),
+            --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
+            --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
+            --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
+            --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
+            --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
         ),
 
         --font: (
@@ -75,7 +68,7 @@ media.$unit-intervals: (
         --focus-outline-width: 3px,
 
         --paragraph: (
-            --margin-top: fn.dim(--spacing --y --sm, null),
+            --margin-top: fn.dim(--spacing --sm, null),
         ),
 
         --list: (
@@ -86,15 +79,15 @@ media.$unit-intervals: (
 
 //
 
-@function accent-palette($base) {
+@function accent-palette($base, $dir: 1) {
     @return (
-        --hi:        blend.scale($base, $lightness: 15%, $chroma: 20%),
+        --hi:        blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
         --main:      $base,
-        --lo:        blend.scale($base, $lightness: -15%, $chroma: -20%),
-        --lo2:       blend.scale($base, $lightness: -25%, $chroma: -40%),
+        --lo:        blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
+        --lo2:       blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
         --semi:      rgba($base, .4),
         --selection: rgba($base, .99),
-        --fg:        #fff,
+        --fg:        blend.contrast($base, #fff, #000),
     );
 }
 
@@ -178,15 +171,50 @@ media.$unit-intervals: (
 
 @include iro.fn-execute {
     @include iro.props-store((
-        --colors: ()
+        --colors: (
+            --accent: (
+                --blue:   accent-palette(blend.lch(58% 60 279), -1),
+                --red:    accent-palette(blend.lch(58% 60 23), -1),
+                --green:  accent-palette(blend.lch(68% 60 141), -1),
+                --yellow: accent-palette(blend.lch(83% 60 90), -1),
+
+                --primary: iro.props-ref('colors-dark', --colors --accent --blue),
+                --error:   iro.props-ref('colors-dark', --colors --accent --red),
+                --success: iro.props-ref('colors-dark', --colors --accent --green),
+            ),
+        )
     ), 'colors-dark');
     
     @include iro.props-store((
-        --colors: ()
+        --colors: (
+            --gray1:  hsl(210, 0%, 6%),   // 1.1
+            --gray2:  hsl(210, 0%, 8%),   // 1.05
+            --gray3:  hsl(210, 0%, 10%),  // 1
+            --gray4:  hsl(210, 0%, 14%),  // 1.12
+            --gray5:  hsl(210, 0%, 20%),  // 1.37
+            --gray6:  hsl(210, 0%, 26%),  // 1.73
+            --gray7:  hsl(210, 0%, 34%),  // 2.4
+            --gray8:  hsl(210, 0%, 42%),  // 3.26
+            --gray9:  hsl(210, 0%, 65%),  // 7.14
+            --gray10: hsl(210, 0%, 86%),  // 12.57
+            --gray11: hsl(210, 0%, 100%), // 17.4
+        )
     ), 'palette-dark');
     
     @include iro.props-store((
-        --colors: ()
+        --colors: (
+            --gray1:  hsl(210, 0%, 10%),  // 1.12
+            --gray2:  hsl(210, 0%, 12%),  // 1.06
+            --gray3:  hsl(210, 0%, 14%),  // 1
+            --gray4:  hsl(210, 0%, 18%),  // 1.14
+            --gray5:  hsl(210, 0%, 23%),  // 1.38
+            --gray6:  hsl(210, 0%, 29%),  // 1.75
+            --gray7:  hsl(210, 0%, 37%),  // 2.39
+            --gray8:  hsl(210, 0%, 45%),  // 3.27
+            --gray9:  hsl(210, 0%, 69%),  // 7.15
+            --gray10: hsl(210, 0%, 90%),  // 12.43
+            --gray11: hsl(210, 0%, 100%), // 15.52
+        )
     ), 'palette-dark-raised');
 }
 
-- 
cgit v1.2.3-70-g09d2