9 files changed, 244 insertions, 231 deletions
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%),
+    --contrasts: (
-    --blue:   blend.lch(48% 50 279),
+        --grays: (
-    --purple: blend.lch(48% 50 308),
+            --50:  1.1,
-    --red:    blend.lch(48% 50 23),
+            --75:  1.04,
-    --green:  blend.lch(63% 50 147),
+            --100: 1,
-    --yellow: blend.lch(68% 50 70),
+        
+            --200: -1.15,
-    --grays: (
+            --300: -1.35,
-        --50:  1.1,
+            --400: -1.7,
-        --75:  1.04,
+        
-        --100: 1,
+            --500: -2.4,
-    
+            --600: -3.3,
-        --200: -1.15,
+            --700: -6,
-        --300: -1.35,
+            --800: -13,
-        --400: -1.7,
+            --900: -20,
-    
+        ),
-        --500: -2.4,
-        --600: -3.3,
+        --colors: (
-        --700: -6,
+            --100:  -1.08,
-        --800: -13,
+            --200:  -1.20,
-        --900: -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,
+    --ranges: (
-        --200:  -1.20,
+        --full:  1,
-        --300:  -1.33,
+        --muted: 0.8,
-        --400:  -1.58,
+    ),
-        --500:  -1.92,
-        --600:  -2.39,
+    --palettes: (
-        --700:  -3.01,
+        --base:  hsl(0, 0%, 97%)       --grays --full,
-        --800:  -3.87,
+        --blue:   blend.lch(48% 50 279) --colors --muted,
-        --900:  -5.07,
+        --purple: blend.lch(48% 50 308) --colors --muted,
-        --1000: -6.72,
+        --red:    blend.lch(48% 50 23)  --colors --muted,
-        --1100: -8.84,
+        --green:  blend.lch(63% 50 147) --colors --muted,
-        --1200: -11.31,
+        --yellow: blend.lch(68% 50 80)  --colors --muted,
-        --1300: -13.94,
    ),
-    --accent:         --blue,
+    --semantic-colors: (
+        --accent:         --blue,
+        --focus:          --yellow-static,
-    --bg-l2:          --50,
+        --bg-l2:          --base --50,
-    --bg-l1:          --100,
+        --bg-l1:          --base --100,
-    --bg-base:        --200,
+        --bg-base:        --base --200,
-    --border-mute:    --200,
+        --border-mute:    --base --200,
-    --border:         --300,
+        --border:         --base --300,
-    --border-strong:  --400,
+        --border-strong:  --base --400,
-    --text-disabled:  --500,
+        --text-disabled:  --base --500,
-    --text-mute-more: --600,
+        --text-mute-more: --base --600,
-    --text-mute:      --700,
+        --text-mute:      --base --700,
-    --text:           --800,
+        --text:           --base --800,
-    --heading:        --900,
+        --heading:        --base --900,
+    ),
 ) !default;
 $theme-dark: (
-    --base:  hsl(0, 0%, 19%),
+    --contrasts: (
-    --blue:   blend.lch(48% 50 279),
+        --grays: (
-    --purple: blend.lch(48% 50 308),
+            --50:  -1.31,
-    --red:    blend.lch(48% 50 23),
+            --75:  -1.18,
-    --green:  blend.lch(63% 50 147),
+            --100: 1,
-    --yellow: blend.lch(68% 50 70),
+        
+            --200: 1.15,
-    --grays: (
+            --300: 1.35,
-        --50:  -1.31,
+            --400: 1.7,
-        --75:  -1.18,
+        
-        --100: 1,
+            --500: 2.4,
-    
+            --600: 3.3,
-        --200: 1.15,
+            --700: 6,
-        --300: 1.35,
+            --800: 13,
-        --400: 1.7,
+            --900: 20,
-    
+        ),
-        --500: 2.4,
-        --600: 3.3,
+        --colors: (
-        --700: 6,
+            --100:  1.12,
-        --800: 13,
+            --200:  1.30,
-        --900: 20,
+            --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,
+    --ranges: (
-        --200:  1.30,
+        --full:  1,
-        --300:  1.58,
+        --muted: 0.8,
-        --400:  1.96,
+    ),
-        --500:  2.45,
-        --600:  3.09,
+    --palettes: (
-        --700:  3.90,
+        --base:  hsl(0, 0%, 19%)       --grays --full,
-        --800:  4.85,
+        --blue:   blend.lch(48% 50 279) --colors --muted,
-        --900:  6.02,
+        --purple: blend.lch(48% 50 308) --colors --muted,
-        --1000: 7.34,
+        --red:    blend.lch(48% 50 23)  --colors --muted,
-        --1100: 8.77,
+        --green:  blend.lch(63% 50 147) --colors --muted,
-        --1200: 10.18,
+        --yellow: blend.lch(68% 50 80)  --colors --muted,
-        --1300: 11.64,
    ),
-    --accent:         --blue,
+    --semantic-colors: (
+        --accent:         --blue,
+        --focus:          --yellow-static,
-    --bg-base:        --50,
+        --bg-base:        --base --50,
-    --bg-l1:          --75,
+        --bg-l1:          --base --75,
-    --bg-l2:          --100,
+        --bg-l2:          --base --100,
-    --border-mute:    --200,
+        --border-mute:    --base --200,
-    --border:         --300,
+        --border:         --base --300,
-    --border-strong:  --400,
+        --border-strong:  --base --400,
-    --text-disabled:  --500,
+        --text-disabled:  --base --500,
-    --text-mute-more: --600,
+        --text-mute-more: --base --600,
-    --text-mute:      --700,
+        --text-mute:      --base --700,
-    --text:           --800,
+        --text:           --base --800,
-    --heading:        --900,
+        --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((
+@each $theme-name, $theme in config.$themes {
-    --colors: (
+    $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
-        --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 $name, $theme in config.$themes {
+    @each $palette-name, $palette in map.get($theme, --palettes) {
-    $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
+        $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(
+                $palette-name: fn.palette(
-                    map.get($theme, --#{$color}),
+                    $base-color,
-                    map.get($theme, --colors),
+                    map.get($theme, --contrasts, $contrasts),
-                    map.get($theme, --base),
+                    map.get($theme, --ranges, $ranges),
+                    nth(map.get($theme, --palettes, --base), 1),
                ),
            ),
-        ), $props-name);
+        ), $tree);
-    }
-    @include iro.props-store((
+        @if $theme-name == config.$theme-default {
-        --colors: (
+            @include iro.props-store((
-            --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
+                --colors: (
-        ),
+                    #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
-    ), $props-name);
+                ),
+            ), $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)) {
+            $palette:   map.get(config.$themes, config.$theme-default, --palettes, --base);
-                $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);
+            $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' {
+        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
-            @include iro.bem-modifier($palette) {
+            $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)) {
+                    @for $i from 1 through list.length($contrasts) {
-                        $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);
+                        $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') {

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 @@
1	@use 'iro-sass/src/index' as iro;
2	@use '../functions' as fn;
3
4	@include iro.props-namespace('code') {
5	@include iro.props-store((
6	--dims: (
7	--inline: (
8	--pad-x: fn.global-dim(--size --50),
9	--pad-y: fn.global-dim(--size --10),
10	--rounding: 3px,
11	),
12	--block: (
13	--pad-x: fn.global-dim(--size --150),
14	--pad-y: fn.global-dim(--size --85),
15	--margin-top: fn.global-dim(--paragraph --margin-top),
16	--rounding: 3px,
17	)
18	)
19	), 'dims');
20
21	@include iro.props-store((
22	--colors: (
23	--inline: (
24	--fg: fn.global-color(--red --quiet --fg),
25	--bg: fn.global-color(--red --quiet --bg),
26	),
27	--block: (
28	--fg: fn.global-color(--fg),
29	--bg: fn.global-color(--bg-hi2),
30	)
31	)
32	), 'colors');
33
34	@include iro.props-store((
35	--colors: (
36	--block: (
37	--fg: fn.global-color(--fg-lo),
38	--bg: fn.global-color(--obj-hi),
39	)
40	)
41	), 'palette-light-hi');
42
43	@include iro.bem-scope(iro.props-namespace()) {
44	code {
45	padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
46	border-radius: fn.dim(--inline --rounding);
47	background-color: fn.color(--inline --bg);
48	color: fn.color(--inline --fg);
49	}
50
51	pre {
52	margin: fn.dim(--block --margin-top) 0 0 0;
53	padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
54	border-radius: fn.dim(--block --rounding);
55	background-color: fn.color(--block --bg);
56	color: fn.color(--block --fg);
57
58	code {
59	display: inline-block;
60	margin-right: fn.dim(--block --pad-x);
61	padding: 0;
62	border-radius: 0;
63	background-color: transparent;
64	color: currentColor;
65	}
66	}
67	}
68	}


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;
26	$palette-precision: 5 !default;	26	$palette-precision: 5 !default;
27		27
28	$theme-light: (	28	$theme-light: (
29	--base: hsl(0, 0%, 97%),	29	--contrasts: (
30	--blue: blend.lch(48% 50 279),	30	--grays: (
31	--purple: blend.lch(48% 50 308),	31	--50: 1.1,
32	--red: blend.lch(48% 50 23),	32	--75: 1.04,
33	--green: blend.lch(63% 50 147),	33	--100: 1,
34	--yellow: blend.lch(68% 50 70),	34
35		35	--200: -1.15,
36	--grays: (	36	--300: -1.35,
37	--50: 1.1,	37	--400: -1.7,
38	--75: 1.04,	38
39	--100: 1,	39	--500: -2.4,
40		40	--600: -3.3,
41	--200: -1.15,	41	--700: -6,
42	--300: -1.35,	42	--800: -13,
43	--400: -1.7,	43	--900: -20,
44		44	),
45	--500: -2.4,	45
46	--600: -3.3,	46	--colors: (
47	--700: -6,	47	--100: -1.08,
48	--800: -13,	48	--200: -1.20,
49	--900: -20,	49	--300: -1.33,
		50	--400: -1.58,
		51	--500: -1.92,
		52	--600: -2.39,
		53	--700: -3.01,
		54	--800: -3.87,
		55	--900: -5.07,
		56	--1000: -6.72,
		57	--1100: -8.84,
		58	--1200: -11.31,
		59	--1300: -13.94,
		60	),
50	),	61	),
51	--colors: (	62
52	--100: -1.08,	63	--ranges: (
53	--200: -1.20,	64	--full: 1,
54	--300: -1.33,	65	--muted: 0.8,
55	--400: -1.58,	66	),
56	--500: -1.92,	67
57	--600: -2.39,	68	--palettes: (
58	--700: -3.01,	69	--base: hsl(0, 0%, 97%) --grays --full,
59	--800: -3.87,	70	--blue: blend.lch(48% 50 279) --colors --muted,
60	--900: -5.07,	71	--purple: blend.lch(48% 50 308) --colors --muted,
61	--1000: -6.72,	72	--red: blend.lch(48% 50 23) --colors --muted,
62	--1100: -8.84,	73	--green: blend.lch(63% 50 147) --colors --muted,
63	--1200: -11.31,	74	--yellow: blend.lch(68% 50 80) --colors --muted,
64	--1300: -13.94,
65	),	75	),
66		76
67	--accent: --blue,	77	--semantic-colors: (
		78	--accent: --blue,
		79	--focus: --yellow-static,
68		80
69	--bg-l2: --50,	81	--bg-l2: --base --50,
70	--bg-l1: --100,	82	--bg-l1: --base --100,
71	--bg-base: --200,	83	--bg-base: --base --200,
72		84
73	--border-mute: --200,	85	--border-mute: --base --200,
74	--border: --300,	86	--border: --base --300,
75	--border-strong: --400,	87	--border-strong: --base --400,
76		88
77	--text-disabled: --500,	89	--text-disabled: --base --500,
78	--text-mute-more: --600,	90	--text-mute-more: --base --600,
79	--text-mute: --700,	91	--text-mute: --base --700,
80	--text: --800,	92	--text: --base --800,
81	--heading: --900,	93	--heading: --base --900,
		94	),
82	) !default;	95	) !default;
83		96
84	$theme-dark: (	97	$theme-dark: (
85	--base: hsl(0, 0%, 19%),	98	--contrasts: (
86	--blue: blend.lch(48% 50 279),	99	--grays: (
87	--purple: blend.lch(48% 50 308),	100	--50: -1.31,
88	--red: blend.lch(48% 50 23),	101	--75: -1.18,
89	--green: blend.lch(63% 50 147),	102	--100: 1,
90	--yellow: blend.lch(68% 50 70),	103
91		104	--200: 1.15,
92	--grays: (	105	--300: 1.35,
93	--50: -1.31,	106	--400: 1.7,
94	--75: -1.18,	107
95	--100: 1,	108	--500: 2.4,
96		109	--600: 3.3,
97	--200: 1.15,	110	--700: 6,
98	--300: 1.35,	111	--800: 13,
99	--400: 1.7,	112	--900: 20,
100		113	),
101	--500: 2.4,	114
102	--600: 3.3,	115	--colors: (
103	--700: 6,	116	--100: 1.12,
104	--800: 13,	117	--200: 1.30,
105	--900: 20,	118	--300: 1.58,
		119	--400: 1.96,
		120	--500: 2.45,
		121	--600: 3.09,
		122	--700: 3.90,
		123	--800: 4.85,
		124	--900: 6.02,
		125	--1000: 7.34,
		126	--1100: 8.77,
		127	--1200: 10.18,
		128	--1300: 11.64,
		129	),
106	),	130	),
107	--colors: (	131
108	--100: 1.12,	132	--ranges: (
109	--200: 1.30,	133	--full: 1,
110	--300: 1.58,	134	--muted: 0.8,
111	--400: 1.96,	135	),
112	--500: 2.45,	136
113	--600: 3.09,	137	--palettes: (
114	--700: 3.90,	138	--base: hsl(0, 0%, 19%) --grays --full,
115	--800: 4.85,	139	--blue: blend.lch(48% 50 279) --colors --muted,
116	--900: 6.02,	140	--purple: blend.lch(48% 50 308) --colors --muted,
117	--1000: 7.34,	141	--red: blend.lch(48% 50 23) --colors --muted,
118	--1100: 8.77,	142	--green: blend.lch(63% 50 147) --colors --muted,
119	--1200: 10.18,	143	--yellow: blend.lch(68% 50 80) --colors --muted,
120	--1300: 11.64,
121	),	144	),
122		145
123	--accent: --blue,	146	--semantic-colors: (
		147	--accent: --blue,
		148	--focus: --yellow-static,
124		149
125	--bg-base: --50,	150	--bg-base: --base --50,
126	--bg-l1: --75,	151	--bg-l1: --base --75,
127	--bg-l2: --100,	152	--bg-l2: --base --100,
128		153
129	--border-mute: --200,	154	--border-mute: --base --200,
130	--border: --300,	155	--border: --base --300,
131	--border-strong: --400,	156	--border-strong: --base --400,
132		157
133	--text-disabled: --500,	158	--text-disabled: --base --500,
134	--text-mute-more: --600,	159	--text-mute-more: --base --600,
135	--text-mute: --700,	160	--text-mute: --base --700,
136	--text: --800,	161	--text: --base --800,
137	--heading: --900,	162	--heading: --base --900,
		163	),
138	) !default;	164	) !default;
139		165
140	$themes: (	166	$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 @@
1	@use 'sass:map';	1	@use 'sass:map';
		2	@use 'sass:list';
2	@use 'iro-sass/src/index' as iro;	3	@use 'iro-sass/src/index' as iro;
3	@use 'include-media/dist/include-media' as media;	4	@use 'include-media/dist/include-media' as media;
4	@use '@oddbird/blend';	5	@use '@oddbird/blend';
@@ -99,6 +100,8 @@
99	--thin: 1px,	100	--thin: 1px,
100	),	101	),
101		102
		103	--rounding: 3px,
		104
102	--focus: (	105	--focus: (
103	--outline-width: 3px,	106	--outline-width: 3px,
104	),	107	),
@@ -173,58 +176,49 @@
173		176
174	//	177	//
175		178
176	@include iro.props-store((	179	@each $theme-name, $theme in config.$themes {
177	--colors: (	180	$tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
178	--base: fn.palette(
179	map.get(config.$theme-light, --base),
180	map.get(config.$theme-light, --grays),
181	),
182	),
183	));
184
185	@include iro.props-store((
186	--colors: (
187	--base: fn.palette(
188	map.get(config.$theme-dark, --base),
189	map.get(config.$theme-dark, --grays),
190	),
191	),
192	), 'dark');
193		181
194	@each $name, $theme in config.$themes {	182	@each $palette-name, $palette in map.get($theme, --palettes) {
195	$props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);	183	$base-color: list.nth($palette, 1);
		184	$contrasts: list.nth($palette, 2);
		185	$ranges: list.nth($palette, 3);
196		186
197	@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
198	@include iro.props-store((	187	@include iro.props-store((
199	--colors: (	188	--colors: (
200	--#{$color}: fn.palette(	189	$palette-name: fn.palette(
201	map.get($theme, --#{$color}),	190	$base-color,
202	map.get($theme, --colors),	191	map.get($theme, --contrasts, $contrasts),
203	map.get($theme, --base),	192	map.get($theme, --ranges, $ranges),
		193	nth(map.get($theme, --palettes, --base), 1),
204	),	194	),
205	),	195	),
206	), $props-name);	196	), $tree);
207	}
208		197
209	@include iro.props-store((	198	@if $theme-name == config.$theme-default {
210	--colors: (	199	@include iro.props-store((
211	--accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),	200	--colors: (
212	),	201	#{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
213	), $props-name);	202	),
		203	), $tree);
		204	}
		205	}
214		206
215	@each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {	207	@each $color, $ref in map.get($theme, --semantic-colors) {
216	@include iro.props-store((	208	@include iro.props-store((
217	--colors: (	209	--colors: (
218	--#{$color}: fn.color(--base map.get($theme, --#{$color})),	210	$color: fn.color($ref),
219	),	211	),
220	), $props-name);	212	), $tree);
221	}	213	}
222	}	214	}
223		215
224	@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {	216	@each $theme-name, $theme in config.$themes {
		217	$tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
		218
225	@include iro.props-store((	219	@include iro.props-store((
226	--colors: (	220	--colors: (
227	--#{$color}-static: iro.props-get-static(--colors --#{$color}),	221
228	),	222	),
229	));	223	), $tree);
230	}	224	}


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 @@
107	@return $result;	107	@return $result;
108	}	108	}
109		109
110	@function palette($base-color, $contrasts, $reference-color: $base-color) {	110	@function palette($base-color, $contrasts, $range: 1, $reference-color: $base-color) {
111	$palette: ();	111	$palette: ();
112		112
113	@if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {	113	@if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
@@ -117,7 +117,7 @@
117	$i: -100%;	117	$i: -100%;
118		118
119	@while $i <= 100% {	119	@while $i <= 100% {
120	$palette: list.append($palette, blend.scale($base-color, $l: $i));	120	$palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: -.8 * math.abs($i)));
121	$i: $i + config.$palette-precision;	121	$i: $i + config.$palette-precision;
122	}	122	}
123		123


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 @@
1	@use 'scopes/links';	1	@use 'scopes/links';
2	// @use 'scopes/code';	2	@use 'scopes/code';
3	// @use 'scopes/blockquotes';	3	// @use 'scopes/blockquotes';
4	// @use 'scopes/lists';	4	// @use 'scopes/lists';
5	@use 'scopes/headings';	5	@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 @@
		1	@use 'sass:map';
1	@use 'iro-sass/src/index' as iro;	2	@use 'iro-sass/src/index' as iro;
2	@use '../functions' as fn;	3	@use '../functions' as fn;
		4	@use '../config';
3		5
4	@include iro.props-namespace('divider') {	6	@include iro.props-namespace('divider') {
5	@include iro.props-store((	7	@include iro.props-store((
@@ -32,29 +34,22 @@
32	--bg: fn.global-color(--border),	34	--bg: fn.global-color(--border),
33	--label: fn.global-color(--text-mute-more),	35	--label: fn.global-color(--text-mute-more),
34	),	36	),
35	--blue: (
36	--bg: fn.global-color(--blue --700),
37	--label: fn.global-color(--blue --1000),
38	),
39	--purple: (
40	--bg: fn.global-color(--purple --700),
41	--label: fn.global-color(--purple --1000),
42	),
43	--red: (
44	--bg: fn.global-color(--red --700),
45	--label: fn.global-color(--red --1000),
46	),
47	--green: (
48	--bg: fn.global-color(--green --700),
49	--label: fn.global-color(--green --1000),
50	),
51	--yellow: (
52	--bg: fn.global-color(--yellow --700),
53	--label: fn.global-color(--yellow --1000),
54	),
55	),	37	),
56	));	38	));
57		39
		40	@each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
		41	@if $color != '--base' {
		42	@include iro.props-store((
		43	--colors: (
		44	$color: (
		45	--bg: fn.global-color($color --700),
		46	--label: fn.global-color($color --1000),
		47	)
		48	),
		49	));
		50	}
		51	}
		52
58	@include iro.bem-object(iro.props-namespace()) {	53	@include iro.bem-object(iro.props-namespace()) {
59	display: flex;	54	display: flex;
60	flex-direction: row;	55	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 @@
1	@use 'sass:map';	1	@use 'sass:map';
2	@use 'sass:list';	2	@use 'sass:list';
		3	@use 'sass:string';
3	@use 'iro-sass/src/index' as iro;	4	@use 'iro-sass/src/index' as iro;
4	@use '../functions' as fn;	5	@use '../functions' as fn;
5	@use '../config';	6	@use '../config';
@@ -12,8 +13,11 @@
12	@include iro.bem-elem('item') {	13	@include iro.bem-elem('item') {
13	flex: 1 1 auto;	14	flex: 1 1 auto;
14		15
15	@for $i from 1 through list.length(map.get(config.$theme-light, --grays)) {	16	$palette: map.get(config.$themes, config.$theme-default, --palettes, --base);
16	$key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);	17	$contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
		18
		19	@for $i from 1 through list.length($contrasts) {
		20	$key: list.nth(map.keys($contrasts), $i);
17		21
18	&:nth-child(#{$i}) {	22	&:nth-child(#{$i}) {
19	background-color: fn.global-color(--base $key);	23	background-color: fn.global-color(--base $key);
@@ -21,14 +25,16 @@
21	}	25	}
22	}	26	}
23		27
24	@each $palette in 'blue' 'purple' 'red' 'green' 'yellow' {	28	@each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
25	@include iro.bem-modifier($palette) {	29	$contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
		30
		31	@include iro.bem-modifier(string.slice($palette-name, 3)) {
26	@include iro.bem-elem('item') {	32	@include iro.bem-elem('item') {
27	@for $i from 1 through list.length(map.get(config.$theme-light, --colors)) {	33	@for $i from 1 through list.length($contrasts) {
28	$key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);	34	$key: list.nth(map.keys($contrasts), $i);
29		35
30	&:nth-child(#{$i}) {	36	&:nth-child(#{$i}) {
31	background-color: fn.global-color(--#{$palette} $key);	37	background-color: fn.global-color($palette-name $key);
32	}	38	}
33	}	39	}
34	}	40	}


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 @@
		1	@use 'iro-sass/src/index' as iro;
		2	@use '../functions' as fn;
		3
		4	@include iro.props-namespace('code') {
		5	@include iro.props-store((
		6	--dims: (
		7	--inline: (
		8	--pad-i: fn.global-dim(--size --50),
		9	--pad-b: fn.global-dim(--size --10),
		10	--rounding: fn.global-dim(--rounding),
		11	),
		12	--block: (
		13	--pad-i: fn.global-dim(--size --150),
		14	--pad-b: fn.global-dim(--size --85),
		15	--margin-bs: fn.global-dim(--paragraph --margin-bs),
		16	--rounding: fn.global-dim(--rounding),
		17	)
		18	),
		19	--colors: (
		20	--inline: (
		21	--fg: fn.global-color(--red --1100),
		22	--bg: fn.global-color(--red --200),
		23	),
		24	--block: (
		25	--fg: fn.global-color(--text),
		26	--bg: fn.global-color(--bg-l2),
		27	)
		28	)
		29	));
		30
		31	@include iro.bem-scope(iro.props-namespace()) {
		32	code {
		33	padding-block: fn.dim(--inline --pad-b);
		34	padding-inline: fn.dim(--inline --pad-i);
		35	border-radius: fn.dim(--inline --rounding);
		36	background-color: fn.color(--inline --bg);
		37	color: fn.color(--inline --fg);
		38	}
		39
		40	pre {
		41	margin-block: fn.dim(--block --margin-bs) 0;
		42	margin-inline: 0;
		43	padding-block: fn.dim(--block --pad-b);
		44	padding-inline: fn.dim(--block --pad-i);
		45	border-radius: fn.dim(--block --rounding);
		46	background-color: fn.color(--block --bg);
		47	color: fn.color(--block --fg);
		48
		49	code {
		50	display: inline-block;
		51	margin-inline-end: fn.dim(--block --pad-i);
		52	padding: 0;
		53	border-radius: 0;
		54	background-color: transparent;
		55	color: currentColor;
		56	}
		57	}
		58	}
		59	}


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 @@
15		15
16	--idle: (	16	--idle: (
17	--text: fn.global-color(--accent --1000),	17	--text: fn.global-color(--accent --1000),
18	--underline: fn.global-color(--accent --700),	18	--underline: fn.global-color(--accent --1000),
19		19
20	--hover: (	20	--hover: (
21	--text: fn.global-color(--accent --1200),	21	--text: fn.global-color(--accent --1200),
@@ -24,7 +24,7 @@
24		24
25	--visited: (	25	--visited: (
26	--text: fn.global-color(--purple --1000),	26	--text: fn.global-color(--purple --1000),
27	--underline: fn.global-color(--purple --700),	27	--underline: fn.global-color(--purple --1000),
28		28
29	--hover: (	29	--hover: (
30	--text: fn.global-color(--purple --1200),	30	--text: fn.global-color(--purple --1200),
@@ -50,6 +50,7 @@
50	&:hover {	50	&:hover {
51	text-decoration: underline;	51	text-decoration: underline;
52	text-decoration-thickness: fn.dim(--hover --underline);	52	text-decoration-thickness: fn.dim(--hover --underline);
		53	text-decoration-skip-ink: none;
53	}	54	}
54		55
55	@include iro.bem-at-theme('keyboard') {	56	@include iro.bem-at-theme('keyboard') {