summaryrefslogtreecommitdiffstats
path: root/src/_vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_vars.scss')
-rw-r--r--src/_vars.scss90
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: (