diff options
Diffstat (limited to 'src/_functions.scss')
| -rw-r--r-- | src/_functions.scss | 51 |
1 files changed, 12 insertions, 39 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 4807cc1..ad45975 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -4,67 +4,40 @@ | |||
| 4 | @use 'sass:list'; | 4 | @use 'sass:list'; |
| 5 | @use 'sass:meta'; | 5 | @use 'sass:meta'; |
| 6 | 6 | ||
| 7 | @use 'iro-sass/src/index' as iro; | 7 | @use 'iro-sass/src/iro-sass' as iro; |
| 8 | @use 'iro-sass/src/easing' as easing; | 8 | @use 'iro-sass/src/easing'; |
| 9 | @use 'functions/colors' as iro-colors; | 9 | @use 'apca'; |
| 10 | @use 'palettes'; | 10 | @use 'themes'; |
| 11 | |||
| 12 | @function font-prop($data, $overrides, $key, $prop) { | ||
| 13 | @if (map.has-key($overrides, $prop)) { | ||
| 14 | @return map.get($overrides, $prop); | ||
| 15 | } @else if (map.has-key($data, $prop)) { | ||
| 16 | @return global-dim(--font $key $prop); | ||
| 17 | } | ||
| 18 | @return null; | ||
| 19 | } | ||
| 20 | |||
| 21 | @function set-font($key, $overrides: ()) { | ||
| 22 | $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); | ||
| 23 | |||
| 24 | $map: ( | ||
| 25 | font-family: font-prop($font, $overrides, $key, --family), | ||
| 26 | font-size: font-prop($font, $overrides, $key, --size), | ||
| 27 | font-weight: font-prop($font, $overrides, $key, --weight), | ||
| 28 | font-style: font-prop($font, $overrides, $key, --style), | ||
| 29 | line-height: font-prop($font, $overrides, $key, --line-height), | ||
| 30 | text-transform: font-prop($font, $overrides, $key, --transform), | ||
| 31 | letter-spacing: font-prop($font, $overrides, $key, --spacing), | ||
| 32 | font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), | ||
| 33 | font-feature-settings: font-prop($font, $overrides, $key, --feature-settings), | ||
| 34 | ); | ||
| 35 | |||
| 36 | @return $map; | ||
| 37 | } | ||
| 38 | 11 | ||
| 39 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { | 12 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { |
| 40 | $base-lch: color.to-space($base-color, oklch); | 13 | $base-lch: color.to-space($base-color, oklch); |
| 41 | $ref-lch: color.to-space($ref-color, oklch); | 14 | $ref-lch: color.to-space($ref-color, oklch); |
| 42 | 15 | ||
| 43 | $ref-l: color.channel($ref-lch, 'lightness'); | 16 | $ref-l: color.channel($ref-lch, 'lightness'); |
| 44 | $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); | 17 | $ref-y: apca.sRGB_to_Y($ref-lch); |
| 45 | 18 | ||
| 46 | $cmax: math.max(map.values($contrasts)...); | 19 | $cmax: math.max(map.values($contrasts)...); |
| 47 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); | 20 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); |
| 48 | 21 | ||
| 49 | $black-y: iro-colors.apca_sRGB_to_Y(#000); | 22 | $black-y: apca.sRGB_to_Y(#000); |
| 50 | $white-y: iro-colors.apca_sRGB_to_Y(#fff); | 23 | $white-y: apca.sRGB_to_Y(#fff); |
| 51 | 24 | ||
| 52 | $chroma-inv: false; | 25 | $chroma-inv: false; |
| 53 | @if $chroma-range < 0 { | 26 | @if $chroma-range < 0 { |
| 54 | $chroma-inv: true; | 27 | $chroma-inv: true; |
| 55 | $chroma-range: -1 * $chroma-range; | 28 | $chroma-range: -1 * $chroma-range; |
| 56 | } | 29 | } |
| 57 | $chroma-easing: meta.get-function(palettes.$palette-chroma-easing, $module: easing); | 30 | $chroma-easing: meta.get-function(themes.$palette-chroma-easing, $module: easing); |
| 58 | 31 | ||
| 59 | $palette: (); | 32 | $palette: (); |
| 60 | 33 | ||
| 61 | @each $key, $contrast in $contrasts { | 34 | @each $key, $contrast in $contrasts { |
| 62 | $y: iro-colors.apcaReverse($contrast, $ref-y); | 35 | $y: apca.reverse($contrast, $ref-y); |
| 63 | $l: color.channel($base-lch, 'lightness'); | 36 | $l: color.channel($base-lch, 'lightness'); |
| 64 | $c: 1; | 37 | $c: 1; |
| 65 | 38 | ||
| 66 | @if $y != false { | 39 | @if $y != false { |
| 67 | $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); | 40 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); |
| 68 | } @else { | 41 | } @else { |
| 69 | $y: $ref-y; | 42 | $y: $ref-y; |
| 70 | } | 43 | } |
| @@ -80,8 +53,8 @@ | |||
| 80 | 53 | ||
| 81 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); | 54 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); |
| 82 | 55 | ||
| 83 | $contrast-black: iro-colors.apcaContrast($black-y, $y); | 56 | $contrast-black: apca.contrast($black-y, $y); |
| 84 | $contrast-white: iro-colors.apcaContrast($white-y, $y); | 57 | $contrast-white: apca.contrast($white-y, $y); |
| 85 | 58 | ||
| 86 | $palette: map.set($palette, $key, $color); | 59 | $palette: map.set($palette, $key, $color); |
| 87 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); | 60 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); |
