Use LCH colors

1 files changed, 8 insertions, 9 deletions

diff --git a/src/_vars.scss b/src/_vars.scss
index a9ca9bf..e838a82 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
-@use 'hsluv-sass/src/hsluv' as hsluv;
+@use '@oddbird/blend';
 @use 'functions' as fn;
 
 iro.$vars-root-size: 16px;
@@ -88,11 +88,10 @@ media.$unit-intervals: (
 
 @function accent-palette($base) {
     @return (
-        --hi:        scale-color($base, $lightness: 15%),
+        --hi:        blend.scale($base, $lightness: 15%, $chroma: 20%),
         --main:      $base,
-        --lo:        scale-color($base, $lightness: -15%),
-        --lo2:       scale-color($base, $lightness: -25%),
-        --semi:      rgba($base, .4),
+        --lo:        blend.scale($base, $lightness: -15%),
+        --lo2:       blend.scale($base, $lightness: -25%),
         --selection: rgba($base, .99),
         --fg:        #fff,
     );
@@ -116,10 +115,10 @@ media.$unit-intervals: (
             --fg-lo:  fn.color(--gray11, null), // Strong text
 
             --accent: (
-                --blue:   accent-palette(hsluv.hsluv(259, 68.1%, 47.7%)),
-                --red:    accent-palette(hsluv.hsluv(0, 68.1%, 47.7%)),
-                --green:  accent-palette(hsluv.hsluv(131, 68.1%, 47.7%)),
-                --yellow: accent-palette(hsluv.hsluv(78, 68.1%, 47.7%)),
+                --blue:   accent-palette(blend.lch(48% 50 279)),
+                --red:    accent-palette(blend.lch(48% 50 23)),
+                --green:  accent-palette(blend.lch(58% 50 141)),
+                --yellow: accent-palette(blend.lch(73% 50 90)),
 
                 --primary: iro.props-ref('colors', --colors --accent --blue),
                 --error:   iro.props-ref('colors', --colors --accent --red),