diff options
author | Volpeon <git@volpeon.ink> | 2022-02-13 10:15:46 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-13 10:15:46 +0100 |
commit | 1c7272be54be8783d81dd25900c6c7dc9beca09d (patch) | |
tree | 941216fd904303222b73e9ffb5fb1fd6e68dd045 /src/_vars.scss | |
parent | Calculate gray palette via contrast automatically (diff) | |
download | iro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.tar.gz iro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.tar.bz2 iro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.zip |
Better palette generation algorithm
Diffstat (limited to 'src/_vars.scss')
-rw-r--r-- | src/_vars.scss | 90 |
1 files changed, 35 insertions, 55 deletions
diff --git a/src/_vars.scss b/src/_vars.scss index cafdb3d..569d535 100644 --- a/src/_vars.scss +++ b/src/_vars.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | @use 'sass:math'; | 1 | @use 'sass:map'; |
2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'iro-sass/src/index' as iro; |
3 | @use 'include-media/dist/include-media' as media; | 3 | @use 'include-media/dist/include-media' as media; |
4 | @use '@oddbird/blend'; | 4 | @use '@oddbird/blend'; |
@@ -21,37 +21,45 @@ media.$unit-intervals: ( | |||
21 | $grays: (); | 21 | $grays: (); |
22 | 22 | ||
23 | @for $i from 0 through 100 { | 23 | @for $i from 0 through 100 { |
24 | $grays: append($grays, $i * 1%); | 24 | $grays: append($grays, blend.lch($i * 1% 0 0)); |
25 | } | 25 | } |
26 | 26 | ||
27 | $grays-rev: iro.fn-list-reverse($grays); | 27 | $wanted-grays: ( |
28 | 28 | -1.1, | |
29 | @function find-gray($lightness, $contrast) { | 29 | -1.05, |
30 | $base: blend.lch($lightness 0 0); | 30 | 1, |
31 | $dir: if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1); | 31 | 1.15, |
32 | $args: (); | 32 | 1.37, |
33 | 33 | 1.73, | |
34 | @if $dir == 1 { | 34 | 2.4, |
35 | @each $gray in $grays-rev { | 35 | 3.26, |
36 | @if $gray < $lightness { | 36 | 7.14, |
37 | $args: append($args, blend.lch($gray 0 0)); | 37 | 11, |
38 | } | 38 | 17.4, |
39 | } | 39 | ); |
40 | } @else { | 40 | |
41 | @each $gray in $grays { | 41 | @function accent-palette($base, $dir: 1) { |
42 | @if $gray > $lightness { | 42 | @return ( |
43 | $args: append($args, blend.lch($gray 0 0)); | 43 | --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), |
44 | } | 44 | --main: $base, |
45 | } | 45 | --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), |
46 | } | 46 | --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), |
47 | --semi: rgba($base, .4), | ||
48 | --selection: rgba($base, .99), | ||
49 | --fg: blend.contrast($base, #fff, #000), | ||
50 | ); | ||
51 | } | ||
52 | |||
53 | @function gray-palette($lightness) { | ||
54 | $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays); | ||
55 | |||
56 | $palette: (); | ||
47 | 57 | ||
48 | @if length($args) == 0 { | 58 | @for $i from 1 through length($colors) { |
49 | @return $base; | 59 | $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i)))); |
50 | } | 60 | } |
51 | 61 | ||
52 | $args: append($args, math.abs($contrast)); | 62 | @return $palette; |
53 | $result: blend.contrast($base, $args...); | ||
54 | @return hsl(fn.color(--gray-h), fn.color(--gray-s), lightness($result)); | ||
55 | } | 63 | } |
56 | 64 | ||
57 | // | 65 | // |
@@ -120,34 +128,6 @@ $grays-rev: iro.fn-list-reverse($grays); | |||
120 | 128 | ||
121 | // | 129 | // |
122 | 130 | ||
123 | @function accent-palette($base, $dir: 1) { | ||
124 | @return ( | ||
125 | --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), | ||
126 | --main: $base, | ||
127 | --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), | ||
128 | --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), | ||
129 | --semi: rgba($base, .4), | ||
130 | --selection: rgba($base, .99), | ||
131 | --fg: blend.contrast($base, #fff, #000), | ||
132 | ); | ||
133 | } | ||
134 | |||
135 | @function gray-palette($lightness) { | ||
136 | @return ( | ||
137 | --gray1: find-gray($lightness, -1.1), | ||
138 | --gray2: find-gray($lightness, -1.05), | ||
139 | --gray3: find-gray($lightness, 1), | ||
140 | --gray4: find-gray($lightness, 1.15), | ||
141 | --gray5: find-gray($lightness, 1.37), | ||
142 | --gray6: find-gray($lightness, 1.73), | ||
143 | --gray7: find-gray($lightness, 2.4), | ||
144 | --gray8: find-gray($lightness, 3.26), | ||
145 | --gray9: find-gray($lightness, 7.14), | ||
146 | --gray10: find-gray($lightness, 11), | ||
147 | --gray11: find-gray($lightness, 17.4), | ||
148 | ); | ||
149 | } | ||
150 | |||
151 | @include iro.fn-execute { | 131 | @include iro.fn-execute { |
152 | @include iro.props-store(( | 132 | @include iro.props-store(( |
153 | --colors: ( | 133 | --colors: ( |