@use 'sass:color'; @use 'sass:math'; @use 'sass:map'; @use 'sass:list'; @use 'sass:meta'; @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; @use 'iro-sass/src/index' as iro; @use 'iro-sass/src/easing' as easing; @use 'functions/colors' as iro-colors; @use 'config'; @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 palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { $base-lch: iro-colors.parse-oklch($base-color); $ref-lch: iro-colors.parse-oklch($reference-color); $ref-l: list.nth($ref-lch, 1); $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); $cmax: math.max(map.values($contrasts)...); $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); $black-y: iro-colors.apca_sRGB_to_Y(#000); $white-y: iro-colors.apca_sRGB_to_Y(#fff); $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); $palette: (); @each $key, $contrast in $contrasts { //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); $y: iro-colors.apcaReverse($contrast, $ref-y); $l: list.nth($base-lch, 1); $c: 1; @if $y != false { $y-lch: blend-convert.Lab_to_LCH( iro-colors.lin_sRGB_to_Oklab( blend-convert.lin_sRGB( blend-convert.sassToRgb( iro-colors.apca_Y_to_sRGB($y) ) ) ) ); $l: list.nth($y-lch, 1); } @else { $y: $ref-y; } @if $chroma-range != 1 { $c: if( $ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0) ); $c: meta.call($chroma-easing, $c); $c: $chroma-range + (1 - $chroma-range) * $c; } $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3)); //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3); //$color: blend-convert.rgbToSass( // blend-convert.gam_sRGB( // iro-colors.Oklab_to_lin_sRGB( // blend-convert.LCH_to_Lab($color) // ) // ) //); $contrast-black: iro-colors.apcaContrast($black-y, $y); $contrast-white: iro-colors.apcaContrast($white-y, $y); $palette: map.set($palette, $key, $color); $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); //$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; }