diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-13 16:01:03 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-13 16:01:03 +0100 |
| commit | a8d6946bbc6b4c835b2812ddb8eae98393777199 (patch) | |
| tree | 5fa4bbfef96e72866e9b6b8152ea01eaeb106012 /src/_functions.scss | |
| parent | Update (diff) | |
| download | iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.gz iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.bz2 iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.zip | |
Improved accent structure
Diffstat (limited to 'src/_functions.scss')
| -rw-r--r-- | src/_functions.scss | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 56fdf39..c45dcfb 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -78,10 +78,12 @@ | |||
| 78 | } | 78 | } |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | $wanted-contrast: nth($wanted-contrasts, $wanted-idx); | 81 | $wanted: nth($wanted-contrasts, $wanted-idx); |
| 82 | $wanted-key: nth($wanted, 1); | ||
| 83 | $wanted-contrast: nth($wanted, 2); | ||
| 82 | 84 | ||
| 83 | @if $contrast >= $wanted-contrast { | 85 | @if $contrast >= $wanted-contrast { |
| 84 | $result: append($result, $color); | 86 | $result: map.set($result, $wanted-key, $color); |
| 85 | $wanted-idx: $wanted-idx + 1; | 87 | $wanted-idx: $wanted-idx + 1; |
| 86 | } @else { | 88 | } @else { |
| 87 | $colors-idx: $colors-idx + $dir * 1; | 89 | $colors-idx: $colors-idx + $dir * 1; |
| @@ -90,19 +92,23 @@ | |||
| 90 | 92 | ||
| 91 | $last-color: nth($colors, if($dir == -1, 1, $colors-len)); | 93 | $last-color: nth($colors, if($dir == -1, 1, $colors-len)); |
| 92 | 94 | ||
| 93 | @for $i from $wanted-idx through $wanted-len { | 95 | @if $wanted-idx <= $wanted-len { |
| 94 | $result: append($result, $last-color); | 96 | @for $i from $wanted-idx through $wanted-len { |
| 97 | $wanted: nth($wanted-contrasts, $i); | ||
| 98 | $wanted-key: nth($wanted, 1); | ||
| 99 | $result: map.set($result, $wanted-key, $last-color); | ||
| 100 | } | ||
| 95 | } | 101 | } |
| 96 | 102 | ||
| 97 | @return $result; | 103 | @return $result; |
| 98 | } | 104 | } |
| 99 | 105 | ||
| 100 | @function accent-palette($base, $dir: 1) { | 106 | @function color-palette($base, $dir: 1) { |
| 101 | @return ( | 107 | @return ( |
| 102 | --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), | 108 | --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), |
| 103 | --main: $base, | 109 | --bg: $base, |
| 104 | --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), | 110 | --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), |
| 105 | --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), | 111 | --obj-lo: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), |
| 106 | --semi: rgba($base, .4), | 112 | --semi: rgba($base, .4), |
| 107 | --selection: rgba($base, .99), | 113 | --selection: rgba($base, .99), |
| 108 | --fg: blend.contrast($base), | 114 | --fg: blend.contrast($base), |
| @@ -118,11 +124,9 @@ | |||
| 118 | 124 | ||
| 119 | $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); | 125 | $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); |
| 120 | 126 | ||
| 121 | $palette: (); | 127 | @each $key, $color in $colors { |
| 122 | 128 | $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color))); | |
| 123 | @for $i from 1 through length($colors) { | ||
| 124 | $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i)))); | ||
| 125 | } | 129 | } |
| 126 | 130 | ||
| 127 | @return $palette; | 131 | @return $colors; |
| 128 | } | 132 | } |
