From 1e902449652213eb1feae5e61740cb9ce3b9d6e3 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 22 Jun 2024 10:39:48 +0200
Subject: WIP: Refactoring

---
 src/.old/scopes/_code.scss |  68 --------------
 src/_config.scss           | 214 +++++++++++++++++++++++++--------------------
 src/_declare-vars.scss     |  68 +++++++-------
 src/_functions.scss        |   4 +-
 src/_scopes.scss           |   2 +-
 src/objects/_divider.scss  |  35 ++++----
 src/objects/_palette.scss  |  20 +++--
 src/scopes/_code.scss      |  59 +++++++++++++
 src/scopes/_links.scss     |   5 +-
 9 files changed, 244 insertions(+), 231 deletions(-)
 delete mode 100644 src/.old/scopes/_code.scss
 create mode 100644 src/scopes/_code.scss

(limited to 'src')

diff --git a/src/.old/scopes/_code.scss b/src/.old/scopes/_code.scss
deleted file mode 100644
index 4eb9458..0000000
--- a/src/.old/scopes/_code.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('code') {
-    @include iro.props-store((
-        --dims: (
-            --inline: (
-                --pad-x:    fn.global-dim(--size --50),
-                --pad-y:    fn.global-dim(--size --10),
-                --rounding: 3px,
-            ),
-            --block: (
-                --pad-x:      fn.global-dim(--size --150),
-                --pad-y:      fn.global-dim(--size --85),
-                --margin-top: fn.global-dim(--paragraph --margin-top),
-                --rounding:   3px,
-            )
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --inline: (
-                --fg: fn.global-color(--red --quiet --fg),
-                --bg: fn.global-color(--red --quiet --bg),
-            ),
-            --block: (
-                --fg: fn.global-color(--fg),
-                --bg: fn.global-color(--bg-hi2),
-            )
-        )
-    ), 'colors');
-
-    @include iro.props-store((
-        --colors: (
-            --block: (
-                --fg: fn.global-color(--fg-lo),
-                --bg: fn.global-color(--obj-hi),
-            )
-        )
-    ), 'palette-light-hi');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        code {
-            padding:          fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
-            border-radius:    fn.dim(--inline --rounding);
-            background-color: fn.color(--inline --bg);
-            color:            fn.color(--inline --fg);
-        }
-
-        pre {
-            margin:           fn.dim(--block --margin-top) 0 0 0;
-            padding:          fn.dim(--block --pad-y) fn.dim(--block --pad-x);
-            border-radius:    fn.dim(--block --rounding);
-            background-color: fn.color(--block --bg);
-            color:            fn.color(--block --fg);
-
-            code {
-                display:          inline-block;
-                margin-right:     fn.dim(--block --pad-x);
-                padding:          0;
-                border-radius:    0;
-                background-color: transparent;
-                color:            currentColor;
-            }
-        }
-    }
-}
diff --git a/src/_config.scss b/src/_config.scss
index 08374fb..be01a69 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -26,115 +26,141 @@ res.$named-viewports: media.$breakpoints;
 $palette-precision: 5 !default;
 
 $theme-light: (
-    --base:  hsl(0, 0%, 97%),
-    --blue:   blend.lch(48% 50 279),
-    --purple: blend.lch(48% 50 308),
-    --red:    blend.lch(48% 50 23),
-    --green:  blend.lch(63% 50 147),
-    --yellow: blend.lch(68% 50 70),
-
-    --grays: (
-        --50:  1.1,
-        --75:  1.04,
-        --100: 1,
-    
-        --200: -1.15,
-        --300: -1.35,
-        --400: -1.7,
-    
-        --500: -2.4,
-        --600: -3.3,
-        --700: -6,
-        --800: -13,
-        --900: -20,
+    --contrasts: (
+        --grays: (
+            --50:  1.1,
+            --75:  1.04,
+            --100: 1,
+        
+            --200: -1.15,
+            --300: -1.35,
+            --400: -1.7,
+        
+            --500: -2.4,
+            --600: -3.3,
+            --700: -6,
+            --800: -13,
+            --900: -20,
+        ),
+
+        --colors: (
+            --100:  -1.08,
+            --200:  -1.20,
+            --300:  -1.33,
+            --400:  -1.58,
+            --500:  -1.92,
+            --600:  -2.39,
+            --700:  -3.01,
+            --800:  -3.87,
+            --900:  -5.07,
+            --1000: -6.72,
+            --1100: -8.84,
+            --1200: -11.31,
+            --1300: -13.94,
+        ),
     ),
-    --colors: (
-        --100:  -1.08,
-        --200:  -1.20,
-        --300:  -1.33,
-        --400:  -1.58,
-        --500:  -1.92,
-        --600:  -2.39,
-        --700:  -3.01,
-        --800:  -3.87,
-        --900:  -5.07,
-        --1000: -6.72,
-        --1100: -8.84,
-        --1200: -11.31,
-        --1300: -13.94,
+
+    --ranges: (
+        --full:  1,
+        --muted: 0.8,
+    ),
+
+    --palettes: (
+        --base:  hsl(0, 0%, 97%)       --grays --full,
+        --blue:   blend.lch(48% 50 279) --colors --muted,
+        --purple: blend.lch(48% 50 308) --colors --muted,
+        --red:    blend.lch(48% 50 23)  --colors --muted,
+        --green:  blend.lch(63% 50 147) --colors --muted,
+        --yellow: blend.lch(68% 50 80)  --colors --muted,
     ),
 
-    --accent:         --blue,
+    --semantic-colors: (
+        --accent:         --blue,
+        --focus:          --yellow-static,
 
-    --bg-l2:          --50,
-    --bg-l1:          --100,
-    --bg-base:        --200,
+        --bg-l2:          --base --50,
+        --bg-l1:          --base --100,
+        --bg-base:        --base --200,
 
-    --border-mute:    --200,
-    --border:         --300,
-    --border-strong:  --400,
+        --border-mute:    --base --200,
+        --border:         --base --300,
+        --border-strong:  --base --400,
 
-    --text-disabled:  --500,
-    --text-mute-more: --600,
-    --text-mute:      --700,
-    --text:           --800,
-    --heading:        --900,
+        --text-disabled:  --base --500,
+        --text-mute-more: --base --600,
+        --text-mute:      --base --700,
+        --text:           --base --800,
+        --heading:        --base --900,
+    ),
 ) !default;
 
 $theme-dark: (
-    --base:  hsl(0, 0%, 19%),
-    --blue:   blend.lch(48% 50 279),
-    --purple: blend.lch(48% 50 308),
-    --red:    blend.lch(48% 50 23),
-    --green:  blend.lch(63% 50 147),
-    --yellow: blend.lch(68% 50 70),
-
-    --grays: (
-        --50:  -1.31,
-        --75:  -1.18,
-        --100: 1,
-    
-        --200: 1.15,
-        --300: 1.35,
-        --400: 1.7,
-    
-        --500: 2.4,
-        --600: 3.3,
-        --700: 6,
-        --800: 13,
-        --900: 20,
+    --contrasts: (
+        --grays: (
+            --50:  -1.31,
+            --75:  -1.18,
+            --100: 1,
+        
+            --200: 1.15,
+            --300: 1.35,
+            --400: 1.7,
+        
+            --500: 2.4,
+            --600: 3.3,
+            --700: 6,
+            --800: 13,
+            --900: 20,
+        ),
+
+        --colors: (
+            --100:  1.12,
+            --200:  1.30,
+            --300:  1.58,
+            --400:  1.96,
+            --500:  2.45,
+            --600:  3.09,
+            --700:  3.90,
+            --800:  4.85,
+            --900:  6.02,
+            --1000: 7.34,
+            --1100: 8.77,
+            --1200: 10.18,
+            --1300: 11.64,
+        ),
     ),
-    --colors: (
-        --100:  1.12,
-        --200:  1.30,
-        --300:  1.58,
-        --400:  1.96,
-        --500:  2.45,
-        --600:  3.09,
-        --700:  3.90,
-        --800:  4.85,
-        --900:  6.02,
-        --1000: 7.34,
-        --1100: 8.77,
-        --1200: 10.18,
-        --1300: 11.64,
+
+    --ranges: (
+        --full:  1,
+        --muted: 0.8,
+    ),
+
+    --palettes: (
+        --base:  hsl(0, 0%, 19%)       --grays --full,
+        --blue:   blend.lch(48% 50 279) --colors --muted,
+        --purple: blend.lch(48% 50 308) --colors --muted,
+        --red:    blend.lch(48% 50 23)  --colors --muted,
+        --green:  blend.lch(63% 50 147) --colors --muted,
+        --yellow: blend.lch(68% 50 80)  --colors --muted,
     ),
 
-    --accent:         --blue,
+    --semantic-colors: (
+        --accent:         --blue,
+        --focus:          --yellow-static,
 
-    --bg-base:        --50,
-    --bg-l1:          --75,
-    --bg-l2:          --100,
+        --bg-base:        --base --50,
+        --bg-l1:          --base --75,
+        --bg-l2:          --base --100,
 
-    --border-mute:    --200,
-    --border:         --300,
-    --border-strong:  --400,
+        --border-mute:    --base --200,
+        --border:         --base --300,
+        --border-strong:  --base --400,
 
-    --text-disabled:  --500,
-    --text-mute-more: --600,
-    --text-mute:      --700,
-    --text:           --800,
-    --heading:        --900,
+        --text-disabled:  --base --500,
+        --text-mute-more: --base --600,
+        --text-mute:      --base --700,
+        --text:           --base --800,
+        --heading:        --base --900,
+    ),
 ) !default;
 
 $themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 37d9cae..2084905 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 @use '@oddbird/blend';
@@ -99,6 +100,8 @@
             --thin:   1px,
         ),
 
+        --rounding:   3px,
+
         --focus: (
             --outline-width: 3px,
         ),
@@ -173,58 +176,49 @@
 
 //
 
-@include iro.props-store((
-    --colors: (
-        --base: fn.palette(
-            map.get(config.$theme-light, --base),
-            map.get(config.$theme-light, --grays),
-        ),
-    ),
-));
-
-@include iro.props-store((
-    --colors: (
-        --base: fn.palette(
-            map.get(config.$theme-dark, --base),
-            map.get(config.$theme-dark, --grays),
-        ),
-    ),
-), 'dark');
+@each $theme-name, $theme in config.$themes {
+    $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
 
-@each $name, $theme in config.$themes {
-    $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
+    @each $palette-name, $palette in map.get($theme, --palettes) {
+        $base-color: list.nth($palette, 1);
+        $contrasts:  list.nth($palette, 2);
+        $ranges:     list.nth($palette, 3);
 
-    @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
         @include iro.props-store((
             --colors: (
-                --#{$color}: fn.palette(
-                    map.get($theme, --#{$color}),
-                    map.get($theme, --colors),
-                    map.get($theme, --base),
+                $palette-name: fn.palette(
+                    $base-color,
+                    map.get($theme, --contrasts, $contrasts),
+                    map.get($theme, --ranges, $ranges),
+                    nth(map.get($theme, --palettes, --base), 1),
                 ),
             ),
-        ), $props-name);
-    }
+        ), $tree);
 
-    @include iro.props-store((
-        --colors: (
-            --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
-        ),
-    ), $props-name);
+        @if $theme-name == config.$theme-default {
+            @include iro.props-store((
+                --colors: (
+                    #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
+                ),
+            ), $tree);
+        }
+    }
 
-    @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {
+    @each $color, $ref in map.get($theme, --semantic-colors) {
         @include iro.props-store((
             --colors: (
-                --#{$color}: fn.color(--base map.get($theme, --#{$color})),
+                $color: fn.color($ref),
             ),
-        ), $props-name);
+        ), $tree);
     }    
 }
 
-@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+@each $theme-name, $theme in config.$themes {
+    $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
+
     @include iro.props-store((
         --colors: (
-            --#{$color}-static: iro.props-get-static(--colors --#{$color}),
+            
         ),
-    ));
+    ), $tree);
 }
diff --git a/src/_functions.scss b/src/_functions.scss
index aaa8ac9..7c0ded3 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -107,7 +107,7 @@
     @return $result;
 }
 
-@function palette($base-color, $contrasts, $reference-color: $base-color) {
+@function palette($base-color, $contrasts, $range: 1, $reference-color: $base-color) {
     $palette: ();
 
     @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
@@ -117,7 +117,7 @@
     $i: -100%;
 
     @while $i <= 100% {
-        $palette: list.append($palette, blend.scale($base-color, $l: $i));
+        $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: -.8 * math.abs($i)));
         $i: $i + config.$palette-precision;
     }
 
diff --git a/src/_scopes.scss b/src/_scopes.scss
index eb28177..fc1f89d 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,5 +1,5 @@
 @use 'scopes/links';
-// @use 'scopes/code';
+@use 'scopes/code';
 // @use 'scopes/blockquotes';
 // @use 'scopes/lists';
 @use 'scopes/headings';
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 465bbcf..3332331 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
+@use '../config';
 
 @include iro.props-namespace('divider') {
     @include iro.props-store((
@@ -32,29 +34,22 @@
                 --bg:    fn.global-color(--border),
                 --label: fn.global-color(--text-mute-more),
             ),
-            --blue: (
-                --bg:    fn.global-color(--blue --700),
-                --label: fn.global-color(--blue --1000),
-            ),
-            --purple: (
-                --bg:    fn.global-color(--purple --700),
-                --label: fn.global-color(--purple --1000),
-            ),
-            --red: (
-                --bg:    fn.global-color(--red --700),
-                --label: fn.global-color(--red --1000),
-            ),
-            --green: (
-                --bg:    fn.global-color(--green --700),
-                --label: fn.global-color(--green --1000),
-            ),
-            --yellow: (
-                --bg:    fn.global-color(--yellow --700),
-                --label: fn.global-color(--yellow --1000),
-            ),
         ),
     ));
 
+    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
+        @if $color != '--base' {
+            @include iro.props-store((
+                --colors: (
+                    $color: (
+                        --bg:    fn.global-color($color --700),
+                        --label: fn.global-color($color --1000),
+                    )
+                ),
+            ));
+        }
+    }
+
     @include iro.bem-object(iro.props-namespace()) {
         display:        flex;
         flex-direction: row;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index a86c026..9ecdfac 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:string';
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 @use '../config';
@@ -12,8 +13,11 @@
         @include iro.bem-elem('item') {
             flex: 1 1 auto;
 
-            @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) {
-                $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);
+            $palette:   map.get(config.$themes, config.$theme-default, --palettes, --base);
+            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+
+            @for $i from 1 through list.length($contrasts) {
+                $key: list.nth(map.keys($contrasts), $i);
 
                 &:nth-child(#{$i}) {
                     background-color: fn.global-color(--base $key);
@@ -21,14 +25,16 @@
             }
         }
 
-        @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' {
-            @include iro.bem-modifier($palette) {
+        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
+            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+
+            @include iro.bem-modifier(string.slice($palette-name, 3)) {
                 @include iro.bem-elem('item') {
-                    @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) {
-                        $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);
+                    @for $i from 1 through list.length($contrasts) {
+                        $key: list.nth(map.keys($contrasts), $i);
         
                         &:nth-child(#{$i}) {
-                            background-color: fn.global-color(--#{$palette} $key);
+                            background-color: fn.global-color($palette-name $key);
                         }
                     }
                 }
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..a6905a3
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('code') {
+    @include iro.props-store((
+        --dims: (
+            --inline: (
+                --pad-i:    fn.global-dim(--size --50),
+                --pad-b:    fn.global-dim(--size --10),
+                --rounding: fn.global-dim(--rounding),
+            ),
+            --block: (
+                --pad-i:      fn.global-dim(--size --150),
+                --pad-b:      fn.global-dim(--size --85),
+                --margin-bs:  fn.global-dim(--paragraph --margin-bs),
+                --rounding:   fn.global-dim(--rounding),
+            )
+        ),
+        --colors: (
+            --inline: (
+                --fg: fn.global-color(--red --1100),
+                --bg: fn.global-color(--red --200),
+            ),
+            --block: (
+                --fg: fn.global-color(--text),
+                --bg: fn.global-color(--bg-l2),
+            )
+        )
+    ));
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        code {
+            padding-block:    fn.dim(--inline --pad-b);
+            padding-inline:   fn.dim(--inline --pad-i);
+            border-radius:    fn.dim(--inline --rounding);
+            background-color: fn.color(--inline --bg);
+            color:            fn.color(--inline --fg);
+        }
+
+        pre {
+            margin-block:     fn.dim(--block --margin-bs) 0;
+            margin-inline:    0;
+            padding-block:    fn.dim(--block --pad-b);
+            padding-inline:   fn.dim(--block --pad-i);
+            border-radius:    fn.dim(--block --rounding);
+            background-color: fn.color(--block --bg);
+            color:            fn.color(--block --fg);
+
+            code {
+                display:           inline-block;
+                margin-inline-end: fn.dim(--block --pad-i);
+                padding:           0;
+                border-radius:     0;
+                background-color:  transparent;
+                color:             currentColor;
+            }
+        }
+    }
+}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 115b199..d0c47ef 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -15,7 +15,7 @@
 
             --idle: (
                 --text:          fn.global-color(--accent --1000),
-                --underline:     fn.global-color(--accent --700),
+                --underline:     fn.global-color(--accent --1000),
 
                 --hover: (
                     --text:      fn.global-color(--accent --1200),
@@ -24,7 +24,7 @@
 
             --visited: (
                 --text:          fn.global-color(--purple --1000),
-                --underline:     fn.global-color(--purple --700),
+                --underline:     fn.global-color(--purple --1000),
 
                 --hover: (
                     --text:      fn.global-color(--purple --1200),
@@ -50,6 +50,7 @@
             &:hover {
                 text-decoration:           underline;
                 text-decoration-thickness: fn.dim(--hover --underline);
+                text-decoration-skip-ink:  none;
             }
 
             @include iro.bem-at-theme('keyboard') {
-- 
cgit v1.2.3-54-g00ecf