diff options
| author | Volpeon <git@volpeon.ink> | 2025-08-06 16:40:56 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2025-08-06 16:40:56 +0200 |
| commit | 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch) | |
| tree | 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/_functions.scss | |
| parent | Fix button font size (diff) | |
| download | iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip | |
Switch to tab indentation
Diffstat (limited to 'src/_functions.scss')
| -rw-r--r-- | src/_functions.scss | 86 |
1 files changed, 43 insertions, 43 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index b41609e..ec1f9d8 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -8,63 +8,63 @@ | |||
| 8 | @use 'apca'; | 8 | @use 'apca'; |
| 9 | 9 | ||
| 10 | @function palette($base-color, $levels, $ref-color: $base-color) { | 10 | @function palette($base-color, $levels, $ref-color: $base-color) { |
| 11 | $base-lch: color.to-space($base-color, oklch); | 11 | $base-lch: color.to-space($base-color, oklch); |
| 12 | $ref-lch: color.to-space($ref-color, oklch); | 12 | $ref-lch: color.to-space($ref-color, oklch); |
| 13 | 13 | ||
| 14 | $ref-l: color.channel($ref-lch, 'lightness'); | 14 | $ref-l: color.channel($ref-lch, 'lightness'); |
| 15 | $ref-y: apca.sRGB_to_Y($ref-lch); | 15 | $ref-y: apca.sRGB_to_Y($ref-lch); |
| 16 | 16 | ||
| 17 | $black-y: apca.sRGB_to_Y(#000); | 17 | $black-y: apca.sRGB_to_Y(#000); |
| 18 | $white-y: apca.sRGB_to_Y(#fff); | 18 | $white-y: apca.sRGB_to_Y(#fff); |
| 19 | 19 | ||
| 20 | $palette: (); | 20 | $palette: (); |
| 21 | 21 | ||
| 22 | @each $key, $level in $levels { | 22 | @each $key, $level in $levels { |
| 23 | $color: list.nth($level, 1); | 23 | $color: list.nth($level, 1); |
| 24 | $y: 0; | 24 | $y: 0; |
| 25 | $c: 1; | 25 | $c: 1; |
| 26 | $h: 0deg; | 26 | $h: 0deg; |
| 27 | 27 | ||
| 28 | @if list.length($level) > 1 { | 28 | @if list.length($level) > 1 { |
| 29 | $c: list.nth($level, 2); | 29 | $c: list.nth($level, 2); |
| 30 | } | 30 | } |
| 31 | @if list.length($level) > 2 { | 31 | @if list.length($level) > 2 { |
| 32 | $h: list.nth($level, 3); | 32 | $h: list.nth($level, 3); |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | @if meta.type-of($color) != 'color' { | 35 | @if meta.type-of($color) != 'color' { |
| 36 | $y: apca.reverse($color, $ref-y); | 36 | $y: apca.reverse($color, $ref-y); |
| 37 | $l: color.channel($base-lch, 'lightness'); | 37 | $l: color.channel($base-lch, 'lightness'); |
| 38 | 38 | ||
| 39 | @if $y != false { | 39 | @if $y != false { |
| 40 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); | 40 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); |
| 41 | } @else { | 41 | } @else { |
| 42 | $y: $ref-y; | 42 | $y: $ref-y; |
| 43 | } | 43 | } |
| 44 | 44 | ||
| 45 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); | 45 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); |
| 46 | } @else { | 46 | } @else { |
| 47 | $y: apca.sRGB_to_Y($color); | 47 | $y: apca.sRGB_to_Y($color); |
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | $contrast-black: apca.contrast($black-y, $y); | 50 | $contrast-black: apca.contrast($black-y, $y); |
| 51 | $contrast-white: apca.contrast($white-y, $y); | 51 | $contrast-white: apca.contrast($white-y, $y); |
| 52 | 52 | ||
| 53 | $palette: map.set($palette, $key, $color); | 53 | $palette: map.set($palette, $key, $color); |
| 54 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); | 54 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); |
| 55 | } | 55 | } |
| 56 | 56 | ||
| 57 | @return $palette; | 57 | @return $palette; |
| 58 | } | 58 | } |
| 59 | 59 | ||
| 60 | @function transparent-palette($color, $text, $alphas) { | 60 | @function transparent-palette($color, $text, $alphas) { |
| 61 | $palette: ( | 61 | $palette: ( |
| 62 | --text: $text, | 62 | --text: $text, |
| 63 | ); | 63 | ); |
| 64 | 64 | ||
| 65 | @each $key, $alpha in $alphas { | 65 | @each $key, $alpha in $alphas { |
| 66 | $palette: map.set($palette, $key, rgba($color, $alpha)); | 66 | $palette: map.set($palette, $key, rgba($color, $alpha)); |
| 67 | } | 67 | } |
| 68 | 68 | ||
| 69 | @return $palette; | 69 | @return $palette; |
| 70 | } | 70 | } |
