From a4bac6daabb6a142cf9cc08f158898a4b5ba5b38 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Feb 2022 07:22:14 +0100 Subject: Use LCH colors --- package.json | 2 +- src/_vars.scss | 17 ++++++++--------- yarn.lock | 10 +++++----- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index b41b8d5..0a8a966 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000" }, "dependencies": { - "hsluv-sass": "^2.0.1", + "@oddbird/blend": "^0.2.3", "include-media": "^1.4.9", "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git" }, 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), diff --git a/yarn.lock b/yarn.lock index a6eb1bc..47c49bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -66,6 +66,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@oddbird/blend@^0.2.3": + version "0.2.3" + resolved "https://registry.yarnpkg.com/@oddbird/blend/-/blend-0.2.3.tgz#06408addb6acb4ef2a33affd484255e121ad5f23" + integrity sha512-P3MYNqeWTQ4RZdmRDOigxpcUK+pvqr+aTzHYnHxF84xmf/1quhCpbTsWZE6TPUifSQ346Cf+e4j0Zgn3fIUmSQ== + "@types/babel-types@*", "@types/babel-types@^7.0.0": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.11.tgz#263b113fa396fac4373188d73225297fb86f19a9" @@ -1175,11 +1180,6 @@ hosted-git-info@^4.0.1: dependencies: lru-cache "^6.0.0" -hsluv-sass@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/hsluv-sass/-/hsluv-sass-2.0.1.tgz#141368a4d08cd72cd3a156a1a5251e68ea0db2a4" - integrity sha512-dBWTq11yV3qcJHkMJQIR4u5/LtfllyIKfVCS/qMjBIlNHQqbyMWjWTby+WnjzAyQsZYPR8e/dC6dVKoaYhvyzA== - html-tags@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" -- cgit v1.2.3-70-g09d2