From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/_functions.scss | 135 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 src_old/_functions.scss (limited to 'src_old/_functions.scss') diff --git a/src_old/_functions.scss b/src_old/_functions.scss new file mode 100644 index 0000000..523aa84 --- /dev/null +++ b/src_old/_functions.scss @@ -0,0 +1,135 @@ +@use 'sass:color'; +@use 'sass:math'; +@use 'sass:map'; +@use 'sass:list'; +@use 'sass:meta'; + +@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, $ref-color: $base-color) { + $base-lch: color.to-space($base-color, oklch); + $ref-lch: color.to-space($ref-color, oklch); + + $ref-l: color.channel($ref-lch, 'lightness'); + $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); + + $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-inv: false; + @if $chroma-range < 0 { + $chroma-inv: true; + $chroma-range: -1 * $chroma-range; + } + $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); + + $palette: (); + + @each $key, $contrast in $contrasts { + $y: iro-colors.apcaReverse($contrast, $ref-y); + $l: color.channel($base-lch, 'lightness'); + $c: 1; + + @if $y != false { + $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); + } @else { + $y: $ref-y; + } + + @if $chroma-range != 1 { + $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); + @if $chroma-inv { + $c: 1 - $c; + } + $c: meta.call($chroma-easing, $c); + $c: $chroma-range + (1 - $chroma-range) * $c; + } + + $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); + + $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)); + } + + @return $palette; +} + +@function transparent-palette($color, $text, $alphas) { + $palette: ( + --text: $text, + ); + + @each $key, $alpha in $alphas { + $palette: map.set($palette, $key, rgba($color, $alpha)); + } + + @return $palette; +} + +@function px-to-em($size, $base: iro.$vars-root-size) { + @return math.div($size, $base) * 1em; +} -- cgit v1.2.3-70-g09d2