diff options
Diffstat (limited to 'src_old/_functions.scss')
| -rw-r--r-- | src_old/_functions.scss | 135 |
1 files changed, 0 insertions, 135 deletions
diff --git a/src_old/_functions.scss b/src_old/_functions.scss deleted file mode 100644 index 523aa84..0000000 --- a/src_old/_functions.scss +++ /dev/null | |||
| @@ -1,135 +0,0 @@ | |||
| 1 | @use 'sass:color'; | ||
| 2 | @use 'sass:math'; | ||
| 3 | @use 'sass:map'; | ||
| 4 | @use 'sass:list'; | ||
| 5 | @use 'sass:meta'; | ||
| 6 | |||
| 7 | @use 'iro-sass/src/index' as iro; | ||
| 8 | @use 'iro-sass/src/easing' as easing; | ||
| 9 | @use 'functions/colors' as iro-colors; | ||
| 10 | @use 'config'; | ||
| 11 | |||
| 12 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
| 13 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); | ||
| 14 | } | ||
| 15 | |||
| 16 | @function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 17 | @return color($key, $tree, $default, $global); | ||
| 18 | } | ||
| 19 | |||
| 20 | @function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 21 | @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global); | ||
| 22 | } | ||
| 23 | |||
| 24 | @function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
| 25 | @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); | ||
| 26 | } | ||
| 27 | |||
| 28 | @function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 29 | @return dim($key, $tree, $default, $global); | ||
| 30 | } | ||
| 31 | |||
| 32 | @function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
| 33 | @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global); | ||
| 34 | } | ||
| 35 | |||
| 36 | @function font-prop($data, $overrides, $key, $prop) { | ||
| 37 | @if (map.has-key($overrides, $prop)) { | ||
| 38 | @return map.get($overrides, $prop); | ||
| 39 | } @else if (map.has-key($data, $prop)) { | ||
| 40 | @return global-dim(--font $key $prop); | ||
| 41 | } | ||
| 42 | @return null; | ||
| 43 | } | ||
| 44 | |||
| 45 | @function set-font($key, $overrides: ()) { | ||
| 46 | $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); | ||
| 47 | |||
| 48 | $map: ( | ||
| 49 | font-family: font-prop($font, $overrides, $key, --family), | ||
| 50 | font-size: font-prop($font, $overrides, $key, --size), | ||
| 51 | font-weight: font-prop($font, $overrides, $key, --weight), | ||
| 52 | font-style: font-prop($font, $overrides, $key, --style), | ||
| 53 | line-height: font-prop($font, $overrides, $key, --line-height), | ||
| 54 | text-transform: font-prop($font, $overrides, $key, --transform), | ||
| 55 | letter-spacing: font-prop($font, $overrides, $key, --spacing), | ||
| 56 | font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), | ||
| 57 | font-feature-settings: font-prop($font, $overrides, $key, --feature-settings), | ||
| 58 | ); | ||
| 59 | |||
| 60 | @return $map; | ||
| 61 | } | ||
| 62 | |||
| 63 | @function lum($color) { | ||
| 64 | @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; | ||
| 65 | } | ||
| 66 | |||
| 67 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { | ||
| 68 | $base-lch: color.to-space($base-color, oklch); | ||
| 69 | $ref-lch: color.to-space($ref-color, oklch); | ||
| 70 | |||
| 71 | $ref-l: color.channel($ref-lch, 'lightness'); | ||
| 72 | $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); | ||
| 73 | |||
| 74 | $cmax: math.max(map.values($contrasts)...); | ||
| 75 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); | ||
| 76 | |||
| 77 | $black-y: iro-colors.apca_sRGB_to_Y(#000); | ||
| 78 | $white-y: iro-colors.apca_sRGB_to_Y(#fff); | ||
| 79 | |||
| 80 | $chroma-inv: false; | ||
| 81 | @if $chroma-range < 0 { | ||
| 82 | $chroma-inv: true; | ||
| 83 | $chroma-range: -1 * $chroma-range; | ||
| 84 | } | ||
| 85 | $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); | ||
| 86 | |||
| 87 | $palette: (); | ||
| 88 | |||
| 89 | @each $key, $contrast in $contrasts { | ||
| 90 | $y: iro-colors.apcaReverse($contrast, $ref-y); | ||
| 91 | $l: color.channel($base-lch, 'lightness'); | ||
| 92 | $c: 1; | ||
| 93 | |||
| 94 | @if $y != false { | ||
| 95 | $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); | ||
| 96 | } @else { | ||
| 97 | $y: $ref-y; | ||
| 98 | } | ||
| 99 | |||
| 100 | @if $chroma-range != 1 { | ||
| 101 | $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); | ||
| 102 | @if $chroma-inv { | ||
| 103 | $c: 1 - $c; | ||
| 104 | } | ||
| 105 | $c: meta.call($chroma-easing, $c); | ||
| 106 | $c: $chroma-range + (1 - $chroma-range) * $c; | ||
| 107 | } | ||
| 108 | |||
| 109 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); | ||
| 110 | |||
| 111 | $contrast-black: iro-colors.apcaContrast($black-y, $y); | ||
| 112 | $contrast-white: iro-colors.apcaContrast($white-y, $y); | ||
| 113 | |||
| 114 | $palette: map.set($palette, $key, $color); | ||
| 115 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); | ||
| 116 | } | ||
| 117 | |||
| 118 | @return $palette; | ||
| 119 | } | ||
| 120 | |||
| 121 | @function transparent-palette($color, $text, $alphas) { | ||
| 122 | $palette: ( | ||
| 123 | --text: $text, | ||
| 124 | ); | ||
| 125 | |||
| 126 | @each $key, $alpha in $alphas { | ||
| 127 | $palette: map.set($palette, $key, rgba($color, $alpha)); | ||
| 128 | } | ||
| 129 | |||
| 130 | @return $palette; | ||
| 131 | } | ||
| 132 | |||
| 133 | @function px-to-em($size, $base: iro.$vars-root-size) { | ||
| 134 | @return math.div($size, $base) * 1em; | ||
| 135 | } | ||
