diff options
author | Volpeon <git@volpeon.ink> | 2022-02-13 11:58:14 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-13 11:58:14 +0100 |
commit | 55ec90a5c6ad6f652c73f6d73869300eb1aceb8c (patch) | |
tree | a5d6d986cda03cead1b728fa8311710e79c83aaf /src/_functions.scss | |
parent | Color adjustments (diff) | |
download | iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.gz iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.bz2 iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.zip |
Restructuring
Diffstat (limited to 'src/_functions.scss')
-rw-r--r-- | src/_functions.scss | 42 |
1 files changed, 32 insertions, 10 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 73a1ec9..56fdf39 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -1,5 +1,7 @@ | |||
1 | @use 'sass:math'; | 1 | @use 'sass:math'; |
2 | @use 'sass:map'; | ||
2 | @use 'iro-sass/src/index' as iro; | 3 | @use 'iro-sass/src/index' as iro; |
4 | @use 'config'; | ||
3 | @use '@oddbird/blend'; | 5 | @use '@oddbird/blend'; |
4 | @use '@oddbird/blend/sass/convert' as blend-convert; | 6 | @use '@oddbird/blend/sass/convert' as blend-convert; |
5 | 7 | ||
@@ -53,16 +55,6 @@ | |||
53 | @return $map; | 55 | @return $map; |
54 | } | 56 | } |
55 | 57 | ||
56 | @mixin set-font($basis, $values: ()) { | ||
57 | $values: set-font($basis, $values); | ||
58 | |||
59 | @each $prop, $value in $values { | ||
60 | @if $value != null { | ||
61 | #{$prop}: $value; | ||
62 | } | ||
63 | } | ||
64 | } | ||
65 | |||
66 | @function multi-contrast($base-color, $colors, $wanted-contrasts) { | 58 | @function multi-contrast($base-color, $colors, $wanted-contrasts) { |
67 | $dir: if(lightness($base-color) >= 50%, -1, 1); | 59 | $dir: if(lightness($base-color) >= 50%, -1, 1); |
68 | $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; | 60 | $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; |
@@ -104,3 +96,33 @@ | |||
104 | 96 | ||
105 | @return $result; | 97 | @return $result; |
106 | } | 98 | } |
99 | |||
100 | @function accent-palette($base, $dir: 1) { | ||
101 | @return ( | ||
102 | --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), | ||
103 | --main: $base, | ||
104 | --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), | ||
105 | --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), | ||
106 | --semi: rgba($base, .4), | ||
107 | --selection: rgba($base, .99), | ||
108 | --fg: blend.contrast($base), | ||
109 | ); | ||
110 | } | ||
111 | |||
112 | @function gray-palette($lightness) { | ||
113 | $grays: (); | ||
114 | |||
115 | @for $i from 0 through 100 { | ||
116 | $grays: append($grays, blend.lch($i * 1% 0 0)); | ||
117 | } | ||
118 | |||
119 | $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); | ||
120 | |||
121 | $palette: (); | ||
122 | |||
123 | @for $i from 1 through length($colors) { | ||
124 | $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i)))); | ||
125 | } | ||
126 | |||
127 | @return $palette; | ||
128 | } | ||