summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 07:22:14 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 07:22:14 +0100
commita4bac6daabb6a142cf9cc08f158898a4b5ba5b38 (patch)
tree46d3a851ac94cefa4b7070b696ff07bef870e343 /src
parentUse HSLuv for accents (diff)
downloadiro-design-a4bac6daabb6a142cf9cc08f158898a4b5ba5b38.tar.gz
iro-design-a4bac6daabb6a142cf9cc08f158898a4b5ba5b38.tar.bz2
iro-design-a4bac6daabb6a142cf9cc08f158898a4b5ba5b38.zip
Use LCH colors
Diffstat (limited to 'src')
-rw-r--r--src/_vars.scss17
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use 'hsluv-sass/src/hsluv' as hsluv; 3@use '@oddbird/blend';
4@use 'functions' as fn; 4@use 'functions' as fn;
5 5
6iro.$vars-root-size: 16px; 6iro.$vars-root-size: 16px;
@@ -88,11 +88,10 @@ media.$unit-intervals: (
88 88
89@function accent-palette($base) { 89@function accent-palette($base) {
90 @return ( 90 @return (
91 --hi: scale-color($base, $lightness: 15%), 91 --hi: blend.scale($base, $lightness: 15%, $chroma: 20%),
92 --main: $base, 92 --main: $base,
93 --lo: scale-color($base, $lightness: -15%), 93 --lo: blend.scale($base, $lightness: -15%),
94 --lo2: scale-color($base, $lightness: -25%), 94 --lo2: blend.scale($base, $lightness: -25%),
95 --semi: rgba($base, .4),
96 --selection: rgba($base, .99), 95 --selection: rgba($base, .99),
97 --fg: #fff, 96 --fg: #fff,
98 ); 97 );
@@ -116,10 +115,10 @@ media.$unit-intervals: (
116 --fg-lo: fn.color(--gray11, null), // Strong text 115 --fg-lo: fn.color(--gray11, null), // Strong text
117 116
118 --accent: ( 117 --accent: (
119 --blue: accent-palette(hsluv.hsluv(259, 68.1%, 47.7%)), 118 --blue: accent-palette(blend.lch(48% 50 279)),
120 --red: accent-palette(hsluv.hsluv(0, 68.1%, 47.7%)), 119 --red: accent-palette(blend.lch(48% 50 23)),
121 --green: accent-palette(hsluv.hsluv(131, 68.1%, 47.7%)), 120 --green: accent-palette(blend.lch(58% 50 141)),
122 --yellow: accent-palette(hsluv.hsluv(78, 68.1%, 47.7%)), 121 --yellow: accent-palette(blend.lch(73% 50 90)),
123 122
124 --primary: iro.props-ref('colors', --colors --accent --blue), 123 --primary: iro.props-ref('colors', --colors --accent --blue),
125 --error: iro.props-ref('colors', --colors --accent --red), 124 --error: iro.props-ref('colors', --colors --accent --red),