summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 10:15:46 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 10:15:46 +0100
commit1c7272be54be8783d81dd25900c6c7dc9beca09d (patch)
tree941216fd904303222b73e9ffb5fb1fd6e68dd045 /src
parentCalculate gray palette via contrast automatically (diff)
downloadiro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.tar.gz
iro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.tar.bz2
iro-design-1c7272be54be8783d81dd25900c6c7dc9beca09d.zip
Better palette generation algorithm
Diffstat (limited to 'src')
-rw-r--r--src/_functions.scss45
-rw-r--r--src/_vars.scss90
2 files changed, 80 insertions, 55 deletions
diff --git a/src/_functions.scss b/src/_functions.scss
index 9425413..73a1ec9 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,4 +1,7 @@
1@use 'sass:math';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use '@oddbird/blend';
4@use '@oddbird/blend/sass/convert' as blend-convert;
2 5
3@function color($key, $tree: 'colors', $default: null, $global: false) { 6@function color($key, $tree: 'colors', $default: null, $global: false) {
4 @return iro.props-get(join(--colors, $key), $tree, $default, $global); 7 @return iro.props-get(join(--colors, $key), $tree, $default, $global);
@@ -59,3 +62,45 @@
59 } 62 }
60 } 63 }
61} 64}
65
66@function multi-contrast($base-color, $colors, $wanted-contrasts) {
67 $dir: if(lightness($base-color) >= 50%, -1, 1);
68 $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05;
69
70 $result: ();
71 $colors-len: length($colors);
72 $colors-idx: if($dir == -1, $colors-len, 1);
73 $wanted-len: length($wanted-contrasts);
74 $wanted-idx: 1;
75
76 @while $colors-idx >= 1 and $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
77 $color: nth($colors, $colors-idx);
78 $lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
79 $contrast: math.div(math.max($base-lum, $lum), math.min($lum, $base-lum));
80
81 @if $contrast != 1 {
82 $contrast: $dir * $contrast;
83
84 @if $lum <= $base-lum {
85 $contrast: -1 * $contrast;
86 }
87 }
88
89 $wanted-contrast: nth($wanted-contrasts, $wanted-idx);
90
91 @if $contrast >= $wanted-contrast {
92 $result: append($result, $color);
93 $wanted-idx: $wanted-idx + 1;
94 } @else {
95 $colors-idx: $colors-idx + $dir * 1;
96 }
97 }
98
99 $last-color: nth($colors, if($dir == -1, 1, $colors-len));
100
101 @for $i from $wanted-idx through $wanted-len {
102 $result: append($result, $last-color);
103 }
104
105 @return $result;
106}
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: (