From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/_functions.scss | 120 ++++++++++++++++++++-------------------------------- 1 file changed, 45 insertions(+), 75 deletions(-) (limited to 'src/_functions.scss') diff --git a/src/_functions.scss b/src/_functions.scss index 148a28c..aaa8ac9 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,46 +1,47 @@ @use 'sass:color'; @use 'sass:math'; @use 'sass:map'; +@use 'sass:list'; @use 'iro-sass/src/index' as iro; @use 'config'; @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; -@function color($key, $tree: 'colors', $default: null, $global: false) { - @return iro.props-get(join(--colors, $key), $tree, $default, $global); +@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { + @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); } -@function global-color($key, $tree: 'colors', $default: null, $global: true) { +@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) { @return color($key, $tree, $default, $global); } -@function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) { - @return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global); +@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { + @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global); } -@function dim($key, $tree: 'dims', $default: null, $global: false) { - @return iro.props-get(join(--dims, $key), $tree, $default, $global); +@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) { + @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); } -@function global-dim($key, $tree: 'dims', $default: null, $global: true) { +@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) { @return dim($key, $tree, $default, $global); } -@function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) { - @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global); +@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { + @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global); } @function font-prop($data, $overrides, $key, $prop) { - @if (map-has-key($overrides, $prop)) { - @return map-get($overrides, $prop); - } @else if (map-has-key($data, $prop)) { + @if (map.has-key($overrides, $prop)) { + @return map.get($overrides, $prop); + } @else if (map.has-key($data, $prop)) { @return global-dim(--font $key $prop); } @return null; } @function set-font($key, $overrides: ()) { - $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true); + $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); $map: ( font-family: font-prop($font, $overrides, $key, --family), @@ -57,47 +58,48 @@ @return $map; } -@function multi-contrast($base-color, $colors, $wanted-contrasts) { - $dir: if(lightness($base-color) >= 50%, -1, 1); - $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; +@function lum($color) { + @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; +} + +@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) { + $ref-lum: lum($reference-color); $result: (); - $colors-len: length($colors); - $colors-idx: if($dir == -1, $colors-len, 1); - $wanted-len: length($wanted-contrasts); + $colors-len: list.length($colors); + $colors-idx: 1; + $wanted-len: list.length($wanted-contrasts); $wanted-idx: 1; - @while $colors-idx >= 1 and $colors-idx <= $colors-len and $wanted-idx <= $wanted-len { - $color: nth($colors, $colors-idx); - $lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; - $contrast: math.div(math.max($base-lum, $lum), math.min($lum, $base-lum)); + @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len { + $color: list.nth($colors, $colors-idx); + $lum: lum($color); + $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum)); @if $contrast != 1 { - $contrast: $dir * $contrast; - - @if $lum <= $base-lum { + @if $lum <= $ref-lum { $contrast: -1 * $contrast; } } - $wanted: nth($wanted-contrasts, $wanted-idx); - $wanted-key: nth($wanted, 1); - $wanted-contrast: nth($wanted, 2); + $wanted: list.nth($wanted-contrasts, $wanted-idx); + $wanted-key: list.nth($wanted, 1); + $wanted-contrast: list.nth($wanted, 2); @if $contrast >= $wanted-contrast { $result: map.set($result, $wanted-key, $color); $wanted-idx: $wanted-idx + 1; } @else { - $colors-idx: $colors-idx + $dir * 1; + $colors-idx: $colors-idx + 1; } } - $last-color: nth($colors, if($dir == -1, 1, $colors-len)); + $last-color: list.nth($colors, $colors-len); @if $wanted-idx <= $wanted-len { @for $i from $wanted-idx through $wanted-len { - $wanted: nth($wanted-contrasts, $i); - $wanted-key: nth($wanted, 1); + $wanted: list.nth($wanted-contrasts, $i); + $wanted-key: list.nth($wanted, 1); $result: map.set($result, $wanted-key, $last-color); } } @@ -105,53 +107,21 @@ @return $result; } -@function gray-to-alpha($lightness, $color) { - @if $lightness >= 50% { - @return rgba(#000, color.blackness($color)); - } @else { - @return rgba(#fff, color.whiteness($color)); - } -} +@function palette($base-color, $contrasts, $reference-color: $base-color) { + $palette: (); -@function color-palette($base, $dir: 1) { - @return ( - --solid: ( - --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%), - --bg: $base, - --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), - --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), - --fg: blend.contrast($base), - ), - --quiet: ( - --bg: rgba($base, .1), - --obj: rgba($base, .2), - --obj-lo: rgba($base, .4), - --fg-hi: rgba($base, .7), - --fg: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), - --fg-lo: blend.scale($base, $lightness: $dir * -45%, $chroma: $dir * -22.5%), - ), - --selection: rgba($base, .99), - ); -} - -@function gray-palette($lightness, $alpha: false) { - $grays: (); - - @for $i from 0 through 100 { - $grays: append($grays, blend.lch($i * 1% 0 0)); + @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { + $contrasts: iro.fn-list-reverse($contrasts); } - $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); + $i: -100%; - @each $key, $color in $colors { - @if $alpha { - $colors: map.set($colors, $key, gray-to-alpha($lightness, $color)); - } @else { - $colors: map.set($colors, $key, $color); - } + @while $i <= 100% { + $palette: list.append($palette, blend.scale($base-color, $l: $i)); + $i: $i + config.$palette-precision; } - @return $colors; + @return multi-contrast($base-color, $palette, $contrasts, $reference-color); } @function px-to-em($size, $base: iro.$vars-root-size) { -- cgit v1.2.3-54-g00ecf