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 |
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 | } |