summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-24 09:14:43 +0200
committerVolpeon <git@volpeon.ink>2024-06-24 09:14:43 +0200
commit029fb64837173b70b31ac579cb005c2995806c49 (patch)
treef6244dea821118a39c8e81dc80acc6343ef39971 /src
parentWIP: New color calculations (diff)
downloadiro-design-029fb64837173b70b31ac579cb005c2995806c49.tar.gz
iro-design-029fb64837173b70b31ac579cb005c2995806c49.tar.bz2
iro-design-029fb64837173b70b31ac579cb005c2995806c49.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_config.scss155
-rw-r--r--src/_functions.scss101
-rw-r--r--src/functions/_colors.scss35
3 files changed, 153 insertions, 138 deletions
diff --git a/src/_config.scss b/src/_config.scss
index 950ff3b..be118b2 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,9 +1,12 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:math';
3@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
4@use 'iro-sass/src/responsive' as res; 5@use 'iro-sass/src/responsive' as res;
6@use 'iro-sass/src/easing' as easing;
5@use 'include-media/dist/include-media' as media; 7@use 'include-media/dist/include-media' as media;
6@use '@oddbird/blend'; 8@use '@oddbird/blend';
9@use 'functions/colors' as iro-colors;
7 10
8iro.$vars-root-size: 16px; 11iro.$vars-root-size: 16px;
9 12
@@ -25,31 +28,33 @@ res.$named-viewports: media.$breakpoints;
25 28
26$palette-precision: 0.01 !default; 29$palette-precision: 0.01 !default;
27 30
31$palette-chroma-easing: 'ease' !default;
32
28$static-colors: ( 33$static-colors: (
29 --base: hsl(0, 0%, 97%), 34 --base: hsl(0, 0%, 97%),
30 35
31 --contrasts: ( 36 --contrasts: (
32 --100: -1.08, 37 --100: math.div( 1, 13) * 106 - 10,
33 --200: -1.20, 38 --200: math.div( 2, 13) * 106 - 10,
34 --300: -1.33, 39 --300: math.div( 3, 13) * 106 - 10,
35 --400: -1.58, 40 --400: math.div( 4, 13) * 106 - 10,
36 --500: -1.92, 41 --500: math.div( 5, 13) * 106 - 10,
37 --600: -2.39, 42 --600: math.div( 6, 13) * 106 - 10,
38 --700: -3.01, 43 --700: math.div( 7, 13) * 106 - 10,
39 --800: -3.87, 44 --800: math.div( 8, 13) * 106 - 10,
40 --900: -5.07, 45 --900: math.div( 9, 13) * 106 - 10,
41 --1000: -6.72, 46 --1000: math.div(10, 13) * 106 - 10,
42 --1100: -8.84, 47 --1100: math.div(11, 13) * 106 - 10,
43 --1200: -11.31, 48 --1200: math.div(12, 13) * 106 - 10,
44 --1300: -13.94, 49 --1300: math.div(13, 13) * 106 - 10,
45 ), 50 ),
46 51
47 --palettes: ( 52 --palettes: (
48 --blue: blend.lch(48% 50 279), 53 --blue: iro-colors.oklch(56% 0.14 265.25),
49 --purple: blend.lch(48% 50 308), 54 --purple: iro-colors.oklch(56% 0.14 305.58),
50 --red: blend.lch(48% 50 23), 55 --red: iro-colors.oklch(56% 0.14 18.69),
51 --green: blend.lch(63% 50 147), 56 --green: iro-colors.oklch(56% 0.14 150.48),
52 --yellow: blend.lch(68% 50 80), 57 --yellow: iro-colors.oklch(56% 0.14 84.08),
53 ), 58 ),
54) !default; 59) !default;
55 60
@@ -60,46 +65,46 @@ $theme-light: (
60 --75: -5, 65 --75: -5,
61 --100: 0, 66 --100: 0,
62 67
63 --200: 13.2375, 68 --200: easing.cubic-bezier(.3, .1, .7, .9, math.div(1, 8)) * 106,
64 --300: 26.475, 69 --300: easing.cubic-bezier(.3, .1, .7, .9, math.div(2, 8)) * 106,
65 --400: 39.7125, 70 --400: easing.cubic-bezier(.3, .1, .7, .9, math.div(3, 8)) * 106,
66 71
67 --500: 52.95, 72 --500: easing.cubic-bezier(.3, .1, .7, .9, math.div(4, 8)) * 106,
68 --600: 66.1875, 73 --600: easing.cubic-bezier(.3, .1, .7, .9, math.div(5, 8)) * 106,
69 --700: 79.425, 74 --700: easing.cubic-bezier(.3, .1, .7, .9, math.div(6, 8)) * 106,
70 --800: 92.6625, 75 --800: easing.cubic-bezier(.3, .1, .7, .9, math.div(7, 8)) * 106,
71 --900: 105.9, 76 --900: easing.cubic-bezier(.3, .1, .7, .9, math.div(8, 8)) * 106,
72 ), 77 ),
73 78
74 --colors: ( 79 --colors: (
75 --100: -1.18, 80 --100: math.div( 0, 13) * 100 + 5,
76 --200: -1.30, 81 --200: math.div( 1, 13) * 100 + 5,
77 --300: -1.43, 82 --300: math.div( 2, 13) * 100 + 5,
78 --400: -1.68, 83 --400: math.div( 3, 13) * 100 + 5,
79 --500: -2.00, 84 --500: math.div( 4, 13) * 100 + 5,
80 --600: -2.45, 85 --600: math.div( 5, 13) * 100 + 5,
81 --700: -3.04, 86 --700: math.div( 6, 13) * 100 + 5,
82 --800: -3.87, 87 --800: math.div( 7, 13) * 100 + 5,
83 --900: -5.07, 88 --900: math.div( 8, 13) * 100 + 5,
84 --1000: -6.72, 89 --1000: math.div( 9, 13) * 100 + 5,
85 --1100: -8.84, 90 --1100: math.div(10, 13) * 100 + 5,
86 --1200: -11.31, 91 --1200: math.div(11, 13) * 100 + 5,
87 --1300: -13.94, 92 --1300: math.div(12, 13) * 100 + 5,
88 ), 93 ),
89 ), 94 ),
90 95
91 --ranges: ( 96 --ranges: (
92 --full: 1, 97 --full: 1,
93 --muted: .2, 98 --muted: .1,
94 ), 99 ),
95 100
96 --palettes: ( 101 --palettes: (
97 --base: hsl(0, 0%, 97%) --grays --full, 102 --base: hsl(0, 0%, 97%) --grays --full,
98 --blue: blend.lch(48% 50 279) --colors --muted, 103 --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted,
99 --purple: blend.lch(48% 50 308) --colors --muted, 104 --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
100 --red: blend.lch(48% 50 23) --colors --muted, 105 --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted,
101 --green: blend.lch(63% 50 147) --colors --muted, 106 --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted,
102 --yellow: blend.lch(68% 50 80) --colors --muted, 107 --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted,
103 ), 108 ),
104 109
105 --semantic: ( 110 --semantic: (
@@ -134,50 +139,50 @@ $theme-light: (
134$theme-dark: ( 139$theme-dark: (
135 --contrasts: ( 140 --contrasts: (
136 --grays: ( 141 --grays: (
137 --50: -1.31, 142 --50: 3,
138 --75: -1.18, 143 --75: 1.5,
139 --100: 1, 144 --100: 0,
140 145
141 --200: 1.15, 146 --200: easing.cubic-bezier(.5, .1, .7, .8, math.div(1, 8)) * -108,
142 --300: 1.35, 147 --300: easing.cubic-bezier(.5, .1, .7, .8, math.div(2, 8)) * -108,
143 --400: 1.7, 148 --400: easing.cubic-bezier(.5, .1, .7, .8, math.div(3, 8)) * -108,
144 149
145 --500: 2.4, 150 --500: easing.cubic-bezier(.5, .1, .7, .8, math.div(4, 8)) * -108,
146 --600: 3.3, 151 --600: easing.cubic-bezier(.5, .1, .7, .8, math.div(5, 8)) * -108,
147 --700: 6, 152 --700: easing.cubic-bezier(.5, .1, .7, .8, math.div(6, 8)) * -108,
148 --800: 13, 153 --800: easing.cubic-bezier(.5, .1, .7, .8, math.div(7, 8)) * -108,
149 --900: 20, 154 --900: easing.cubic-bezier(.5, .1, .7, .8, math.div(8, 8)) * -108,
150 ), 155 ),
151 156
152 --colors: ( 157 --colors: (
153 --100: 1.12, 158 --100: math.div( 0, 13) * -110 - 5,
154 --200: 1.30, 159 --200: math.div( 1, 13) * -110 - 5,
155 --300: 1.58, 160 --300: math.div( 2, 13) * -110 - 5,
156 --400: 1.96, 161 --400: math.div( 3, 13) * -110 - 5,
157 --500: 2.45, 162 --500: math.div( 4, 13) * -110 - 5,
158 --600: 3.09, 163 --600: math.div( 5, 13) * -110 - 5,
159 --700: 3.90, 164 --700: math.div( 6, 13) * -110 - 5,
160 --800: 4.85, 165 --800: math.div( 7, 13) * -110 - 5,
161 --900: 6.02, 166 --900: math.div( 8, 13) * -110 - 5,
162 --1000: 7.34, 167 --1000: math.div( 9, 13) * -110 - 5,
163 --1100: 8.77, 168 --1100: math.div(10, 13) * -110 - 5,
164 --1200: 10.18, 169 --1200: math.div(11, 13) * -110 - 5,
165 --1300: 11.64, 170 --1300: math.div(12, 13) * -110 - 5,
166 ), 171 ),
167 ), 172 ),
168 173
169 --ranges: ( 174 --ranges: (
170 --full: 1, 175 --full: 1,
171 --muted: .2, 176 --muted: .4,
172 ), 177 ),
173 178
174 --palettes: ( 179 --palettes: (
175 --base: hsl(0, 0%, 19%) --grays --full, 180 --base: hsl(0, 0%, 19%) --grays --full,
176 --blue: blend.lch(48% 50 279) --colors --muted, 181 --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted,
177 --purple: blend.lch(48% 50 308) --colors --muted, 182 --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
178 --red: blend.lch(48% 50 23) --colors --muted, 183 --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted,
179 --green: blend.lch(63% 50 147) --colors --muted, 184 --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted,
180 --yellow: blend.lch(68% 50 80) --colors --muted, 185 --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted,
181 ), 186 ),
182 187
183 --semantic: ( 188 --semantic: (
diff --git a/src/_functions.scss b/src/_functions.scss
index 2d4aeef..9c29285 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,8 +7,9 @@
7@use '@oddbird/blend'; 7@use '@oddbird/blend';
8@use '@oddbird/blend/sass/convert' as blend-convert; 8@use '@oddbird/blend/sass/convert' as blend-convert;
9 9
10@use 'functions/colors' as iro-colors;
11@use 'iro-sass/src/index' as iro; 10@use 'iro-sass/src/index' as iro;
11@use 'iro-sass/src/easing' as easing;
12@use 'functions/colors' as iro-colors;
12@use 'config'; 13@use 'config';
13 14
14@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { 15@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
@@ -66,51 +67,6 @@
66 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; 67 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
67} 68}
68 69
69@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) {
70 $ref-lum: lum($reference-color);
71
72 $result: ();
73 $colors-len: list.length($colors);
74 $colors-idx: 1;
75 $wanted-len: list.length($wanted-contrasts);
76 $wanted-idx: 1;
77
78 @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
79 $color: list.nth($colors, $colors-idx);
80 $lum: lum($color);
81 $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum));
82
83 @if $contrast != 1 {
84 @if $lum <= $ref-lum {
85 $contrast: -1 * $contrast;
86 }
87 }
88
89 $wanted: list.nth($wanted-contrasts, $wanted-idx);
90 $wanted-key: list.nth($wanted, 1);
91 $wanted-contrast: list.nth($wanted, 2);
92
93 @if $contrast >= $wanted-contrast {
94 $result: map.set($result, $wanted-key, $color);
95 $wanted-idx: $wanted-idx + 1;
96 } @else {
97 $colors-idx: $colors-idx + 1;
98 }
99 }
100
101 $last-color: list.nth($colors, $colors-len);
102
103 @if $wanted-idx <= $wanted-len {
104 @for $i from $wanted-idx through $wanted-len {
105 $wanted: list.nth($wanted-contrasts, $i);
106 $wanted-key: list.nth($wanted, 1);
107 $result: map.set($result, $wanted-key, $last-color);
108 }
109 }
110
111 @return $result;
112}
113
114@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { 70@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
115 $chroma-range: 1 - $chroma-range; 71 $chroma-range: 1 - $chroma-range;
116 72
@@ -159,17 +115,33 @@
159 ) 115 )
160 ) 116 )
161 ); 117 );
118 $ref-lch: blend-convert.Lab_to_LCH(
119 iro-colors.lin_sRGB_to_Oklab(
120 blend-convert.lin_sRGB(
121 blend-convert.sassToRgb($reference-color)
122 )
123 )
124 );
125 $ref-l: list.nth($ref-lch, 1);
162 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); 126 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
163 127
128 $cmax: math.max(map.values($contrasts)...);
129 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
130
131 $black-y: iro-colors.apca_sRGB_to_Y(#000);
132 $white-y: iro-colors.apca_sRGB_to_Y(#fff);
133
164 $palette: (); 134 $palette: ();
165 135
136 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
137
166 @each $key, $contrast in $contrasts { 138 @each $key, $contrast in $contrasts {
139 //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
167 $y: iro-colors.apcaReverse($contrast, $ref-y); 140 $y: iro-colors.apcaReverse($contrast, $ref-y);
168 $l: list.nth($base-lch, 1); 141 $l: list.nth($base-lch, 1);
142 $c: 1;
169 143
170 @if $y != false { 144 @if $y != false {
171 @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y);
172
173 $y-lch: blend-convert.Lab_to_LCH( 145 $y-lch: blend-convert.Lab_to_LCH(
174 iro-colors.lin_sRGB_to_Oklab( 146 iro-colors.lin_sRGB_to_Oklab(
175 blend-convert.lin_sRGB( 147 blend-convert.lin_sRGB(
@@ -181,20 +153,37 @@
181 ); 153 );
182 $l: list.nth($y-lch, 1); 154 $l: list.nth($y-lch, 1);
183 } @else { 155 } @else {
184 @debug $contrast, $ref-y, $y; 156 $y: $ref-y;
157 }
158
159 @if $chroma-range != 1 {
160 $c: if(
161 $ref-l > .5,
162 math.clamp(0, math.div($contrast, $cmax), 1),
163 -1 * math.clamp(-1, math.div($contrast, $cmax), 0)
164 );
165 $c: meta.call($chroma-easing, $c);
166 $c: $chroma-range + (1 - $chroma-range) * $c;
185 } 167 }
186 168
187 $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); 169 $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3));
188 //$color: blend-convert.LCH_to_Lab($color); 170 //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
189 //$color: iro-colors.Oklab_to_lin_sRGB($color); 171 //$color: blend-convert.rgbToSass(
190 //$color: blend-convert(); 172 // blend-convert.gam_sRGB(
173 // iro-colors.Oklab_to_lin_sRGB(
174 // blend-convert.LCH_to_Lab($color)
175 // )
176 // )
177 //);
178
179 $contrast-black: iro-colors.apcaContrast($black-y, $y);
180 $contrast-white: iro-colors.apcaContrast($white-y, $y);
191 181
192 $palette: map.set($palette, $key, $color); 182 $palette: map.set($palette, $key, $color);
193 $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff)); 183 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
184 //$palette: map.set($palette, #{$key}-text, blend.contrast($color));
194 } 185 }
195 186
196 @debug '-------------------------------------------';
197
198 @return $palette; 187 @return $palette;
199} 188}
200 189
diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss
index 265c09a..d3c0035 100644
--- a/src/functions/_colors.scss
+++ b/src/functions/_colors.scss
@@ -6,6 +6,7 @@
6@use 'sass:map'; 6@use 'sass:map';
7@use 'sass:math'; 7@use 'sass:math';
8@use 'sass:meta'; 8@use 'sass:meta';
9@use '@oddbird/blend/sass/convert' as blend-convert;
9@use '@oddbird/blend/sass/utils/pow'; 10@use '@oddbird/blend/sass/utils/pow';
10 11
11$SA98G: ( 12$SA98G: (
@@ -56,18 +57,32 @@ $SA98G: (
56 $a_: list.nth($color, 2); 57 $a_: list.nth($color, 2);
57 $b_: list.nth($color, 3); 58 $b_: list.nth($color, 3);
58 59
59 $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b-; 60 $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_;
60 $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b-; 61 $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_;
61 $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b-; 62 $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_;
62 63
63 $l: $l * $l * $l; 64 $l: $l * $l * $l;
64 $m: $m * $m * $m; 65 $m: $m * $m * $m;
65 $s: $s * $s * $s; 66 $s: $s * $s * $s;
66 67
67 @return ( 68 @return (
68 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * 4s, 69 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s,
69 -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s, 70 -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s,
70 -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s, 71 -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s,
72 );
73}
74
75@function oklch($arg) {
76 $l: math.div(list.nth($arg, 1), 100%);
77 $c: list.nth($arg, 2);
78 $h: list.nth($arg, 3);
79
80 @return blend-convert.rgbToSass(
81 blend-convert.gam_sRGB(
82 Oklab_to_lin_sRGB(
83 blend-convert.LCH_to_Lab($l $c $h)
84 )
85 )
71 ); 86 );
72} 87}
73 88
@@ -83,6 +98,12 @@ $SA98G: (
83} 98}
84 99
85@function apcaContrast($txtY, $bgY) { 100@function apcaContrast($txtY, $bgY) {
101 $icp: 0.0 1.1;
102
103 @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
104 @return 0;
105 }
106
86 @if $txtY <= map.get($SA98G, blkThrs) { 107 @if $txtY <= map.get($SA98G, blkThrs) {
87 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); 108 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
88 } 109 }
@@ -110,7 +131,7 @@ $SA98G: (
110 } 131 }
111 } 132 }
112 133
113 @return outputContrast * 100.0; 134 @return $outputContrast * 100.0;
114} 135}
115 136
116@function apcaReverse($contrast, $knownY, $knownType: 'bg') { 137@function apcaReverse($contrast, $knownY, $knownType: 'bg') {