diff options
Diffstat (limited to 'src/_vars.scss')
| -rw-r--r-- | src/_vars.scss | 86 |
1 files changed, 33 insertions, 53 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 | -1.1, | ||
| 29 | -1.05, | ||
| 30 | 1, | ||
| 31 | 1.15, | ||
| 32 | 1.37, | ||
| 33 | 1.73, | ||
| 34 | 2.4, | ||
| 35 | 3.26, | ||
| 36 | 7.14, | ||
| 37 | 11, | ||
| 38 | 17.4, | ||
| 39 | ); | ||
| 40 | |||
| 41 | @function accent-palette($base, $dir: 1) { | ||
| 42 | @return ( | ||
| 43 | --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), | ||
| 44 | --main: $base, | ||
| 45 | --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), | ||
| 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 | } | ||
| 28 | 52 | ||
| 29 | @function find-gray($lightness, $contrast) { | 53 | @function gray-palette($lightness) { |
| 30 | $base: blend.lch($lightness 0 0); | 54 | $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays); |
| 31 | $dir: if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1); | ||
| 32 | $args: (); | ||
| 33 | 55 | ||
| 34 | @if $dir == 1 { | 56 | $palette: (); |
| 35 | @each $gray in $grays-rev { | ||
| 36 | @if $gray < $lightness { | ||
| 37 | $args: append($args, blend.lch($gray 0 0)); | ||
| 38 | } | ||
| 39 | } | ||
| 40 | } @else { | ||
| 41 | @each $gray in $grays { | ||
| 42 | @if $gray > $lightness { | ||
| 43 | $args: append($args, blend.lch($gray 0 0)); | ||
| 44 | } | ||
| 45 | } | ||
| 46 | } | ||
| 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: ( |
