@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: iro.$props-default-tree, $default: null, $global: false) { @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); } @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: 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: iro.$props-default-tree, $default: null, $global: false) { @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); } @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: 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)) { @return global-dim(--font $key $prop); } @return null; } @function set-font($key, $overrides: ()) { $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); $map: ( font-family: font-prop($font, $overrides, $key, --family), font-size: font-prop($font, $overrides, $key, --size), font-weight: font-prop($font, $overrides, $key, --weight), font-style: font-prop($font, $overrides, $key, --style), line-height: font-prop($font, $overrides, $key, --line-height), text-transform: font-prop($font, $overrides, $key, --transform), letter-spacing: font-prop($font, $overrides, $key, --spacing), font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), font-feature-settings: font-prop($font, $overrides, $key, --feature-settings), ); @return $map; } @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: list.length($colors); $colors-idx: 1; $wanted-len: list.length($wanted-contrasts); $wanted-idx: 1; @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 { @if $lum <= $ref-lum { $contrast: -1 * $contrast; } } $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 + 1; } } $last-color: list.nth($colors, $colors-len); @if $wanted-idx <= $wanted-len { @for $i from $wanted-idx through $wanted-len { $wanted: list.nth($wanted-contrasts, $i); $wanted-key: list.nth($wanted, 1); $result: map.set($result, $wanted-key, $last-color); } } @return $result; } @function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) { $palette: (); @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { $contrasts: iro.fn-list-reverse($contrasts); } $reference-lightness: blend.lightness($reference-color); $i: -100%; @while $i <= 100% { $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%); $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c)); $i: $i + config.$palette-precision; } $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); @each $key, $color in $palette { $palette: map.set($palette, #{$key}-text, blend.contrast($color)) } @return $palette; } @function px-to-em($size, $base: iro.$vars-root-size) { @return math.div($size, $base) * 1em; }