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/_apply-vars.scss          | 12 ++------
 src/_vars.scss                | 70 ++++++++++++++++++++++++++++++-------------
 src/layouts/_container.scss   | 14 ++++-----
 src/layouts/_form.scss        |  4 +--
 src/objects/_action-menu.scss |  7 +++++
 src/objects/_backdrop.scss    |  6 ++++
 src/objects/_checkbox.scss    |  2 +-
 src/objects/_dialog.scss      |  2 +-
 src/objects/_field-label.scss |  4 +--
 src/objects/_heading.scss     |  6 ++--
 src/objects/_radio.scss       |  2 +-
 src/objects/_rule.scss        |  2 +-
 src/objects/_switch.scss      |  2 +-
 13 files changed, 83 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 5d18afe..10bcb5c 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -14,6 +14,7 @@
     @include iro.props-assign('palette-light');
 
     @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
         @include iro.props-assign('palette-dark');
     }
 }
@@ -23,16 +24,7 @@
     @include iro.props-assign('palette-light-raised');
 
     @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
         @include iro.props-assign('palette-dark-raised');
     }
 }
-
-/*@media (prefers-color-scheme: dark) {
-    @include iro.props-assign('dark');
-    @include iro.props-assign('dark-palette');
-
-    @include iro.bem-theme('raised') {
-        @include iro.props-assign('dark-raised-palette');
-        @include iro.props-assign('dark');
-    }
-}*/
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');
 }
 
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index f63b04d..d3ecb5f 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,9 +7,9 @@
         --dims: (
             --content-width:     iro.fn-px-to-rem(700px),
             --sm-content-width:  iro.fn-px-to-rem(360px),
-            --pad-x:             3rem,
-            --pad-y:             3rem,
-            --in-page-spacing-y: fn.global-dim(--spacing --y --xl),
+            --pad-x:             fn.global-dim(--spacing --xl),
+            --pad-y:             fn.global-dim(--spacing --xl),
+            --in-page-spacing-y: fn.global-dim(--spacing --xl),
         )
     ), 'dims');
 
@@ -17,8 +17,8 @@
         overflow: hidden;
 
         @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * fn.global-dim(--spacing --y --xl));
-            margin-bottom: calc(-1 * fn.global-dim(--spacing --y --xl));
+            margin-top:    calc(-1 * fn.global-dim(--spacing --xl));
+            margin-bottom: calc(-1 * fn.global-dim(--spacing --xl));
 
             &::before,
             &::after {
@@ -29,11 +29,11 @@
             }
 
             &::before {
-                margin-bottom: fn.global-dim(--spacing --y --xl);
+                margin-bottom: fn.global-dim(--spacing --xl);
             }
 
             &::after {
-                margin-top: fn.global-dim(--spacing --y --xl);
+                margin-top: fn.global-dim(--spacing --xl);
             }
         }
 
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 7225807..4334192 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -4,8 +4,8 @@
 @include iro.props-namespace('form') {
     @include iro.props-store((
         --dims: (
-            --item-spacing-y:  fn.global-dim(--spacing --y --md),
-            --label-spacing-x: fn.global-dim(--spacing --x --md),
+            --item-spacing-y:  fn.global-dim(--spacing --md),
+            --label-spacing-x: fn.global-dim(--spacing --md),
             --hint-font-size:  fn.global-dim(--font-size --sm),
         ),
     ), 'dims');
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 4f73cf7..59e0287 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -40,6 +40,13 @@
         ),
     ), 'colors');
 
+    @include iro.props-store((
+        --colors: (
+            --shadow: 0 .2em .5em rgba(#000, .5),
+            --border: rgba(#fff, .08),
+        ),
+    ), 'colors-dark');
+
     @include iro.bem-object(iro.props-namespace()) {
         position:         absolute;
         z-index:          10000;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index e989e53..d5ce028 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -16,6 +16,12 @@
         ),
     ), 'colors');
 
+    @include iro.props-store((
+        --colors: (
+            --bg: rgba(#000, .75),
+        ),
+    ), 'colors-dark');
+
     @include iro.props-store((
         --dims: (
             --pad-y: iro.fn-px-to-rem(30px),
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 5d81b19..be47eee 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,7 +9,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --x --md),
+            --margin-right: fn.global-dim(--spacing --md),
         ),
     ), 'dims');
 
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 9c7dc1f..22325f4 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -10,7 +10,7 @@
             --width-md:           iro.fn-px-to-rem(800px),
             --width-lg:           iro.fn-px-to-rem(1100px),
             --rounding:           3px,
-            --title-body-spacing: fn.global-dim(--spacing --y --sm),
+            --title-body-spacing: fn.global-dim(--spacing --sm),
         ),
     ), 'dims');
 
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 66f5ef7..4b75282 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -4,8 +4,8 @@
 @include iro.props-namespace('field-label') {
     @include iro.props-store((
         --dims: (
-            --spacing-x:       fn.global-dim(--spacing --x --sm),
-            --spacing-y:       fn.global-dim(--spacing --y --xs),
+            --spacing-x:       fn.global-dim(--spacing --sm),
+            --spacing-y:       fn.global-dim(--spacing --xs),
             --label-font-size: fn.global-dim(--font-size --sm),
             --hint-font-size:  fn.global-dim(--font-size --sm),
         ),
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index c1feb5e..24971bb 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -5,9 +5,9 @@
     @include iro.props-store((
         --dims: (
             --in-page-margin: (
-                --top:         fn.global-dim(--spacing --y --lg),
-                --top-sibling: fn.global-dim(--spacing --y --md),
-                --bottom:      fn.global-dim(--spacing --y --sm),
+                --top:         fn.global-dim(--spacing --lg),
+                --top-sibling: fn.global-dim(--spacing --md),
+                --bottom:      fn.global-dim(--spacing --sm),
             ),
         ),
     ), 'dims');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 1a6e1a6..85f94f2 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -9,7 +9,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --x --md),
+            --margin-right: fn.global-dim(--spacing --md),
         ),
     ), 'dims');
 
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 7a9caa3..1892a3d 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('rule') {
     @include iro.props-store((
         --dims: (
-            --margin-y: fn.global-dim(--spacing --y --xs),
+            --margin-y: fn.global-dim(--spacing --xs),
     
             --strong: (
                 --border-width:    fn.global-dim(--border-width --thick),
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 1a2fb80..e0ff178 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -10,7 +10,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --x --md),
+            --margin-right: fn.global-dim(--spacing --md),
         ),
     ), 'dims');
 
-- 
cgit v1.2.3-70-g09d2