- commit
- 0a80eb928a12b8d25f7f01226f3c5a7d3127cce2
- parent
- cce5a87d3b8ece9516c6de1f2514ae5daeeab62a
- Author
- Jonas Hvid <mail@johv.dk>
- Date
- 2022-05-01 21:54
fix slash division deprecation
Diffstat
| M | sass/color.scss | 78 | +++++++++++++++++++++++++++++++------------------------------ |
| M | sass/contrast.scss | 18 | ++++++++++-------- |
2 files changed, 50 insertions, 46 deletions
diff --git a/sass/color.scss b/sass/color.scss
@@ -18,11 +18,13 @@ 18 18 /// has half the chroma of `lch(40, 100, 10deg, 'hslab')`. 19 19 //// 20 20 -1 21 @use "sass:math"; -1 22 21 23 /// @type string 22 24 $planifolia-colorspace: 'lab' !default; 23 25 24 26 @function _pf-perc($x) {25 -1 @return if(unit($x) == '%', $x / 100%, $x);-1 27 @return if(unit($x) == '%', math.div($x, 100%), $x); 26 28 } 27 29 28 30 @function _pf-clip-needed($rgb) { @@ -37,21 +39,21 @@ $planifolia-colorspace: 'lab' !default; 37 39 } 38 40 39 41 @function _pf-srgb-to-rgb($c) {40 -1 $c: $c / 255;-1 42 $c: math.div($c, 255); 41 43 @if $c <= 0.04045 {42 -1 $c: $c / 12.92;-1 44 $c: math.div($c, 12.92); 43 45 } @else {44 -1 $c: pow(($c + 0.055) / 1.055, 2.4);-1 46 $c: pow(math.div($c + 0.055, 1.055), 2.4); 45 47 } 46 48 @return $c * 100; 47 49 } 48 50 49 51 @function _pf-rgb-to-srgb($c) {50 -1 $c: $c / 100;-1 52 $c: $c * 0.01; 51 53 @if $c <= 0.0031308 { 52 54 $c: $c * 12.92; 53 55 } @else {54 -1 $c: 1.055 * pow($c, 1 / 2.4) - 0.055;-1 56 $c: 1.055 * pow($c, math.div(1, 2.4)) - 0.055; 55 57 } 56 58 @return $c * 255; 57 59 } @@ -105,19 +107,19 @@ $planifolia-colorspace: 'lab' !default; 105 107 } 106 108 107 109 @function _pf-xyz-to-lab-f($t) {108 -1 @if $t > 216 / 24389 {109 -1 @return pow($t, 1/3);-1 110 @if $t > math.div(216, 24389) { -1 111 @return pow($t, math.div(1, 3)); 110 112 } @else {111 -1 @return 841 / 108 * $t + 4 / 29;-1 113 @return math.div(841, 108) * $t + math.div(4, 29); 112 114 } 113 115 } 114 116 115 117 @function _pf-xyz-to-lab($xyz) { 116 118 $white: (95.05, 100, 108.9); 117 119118 -1 $x: _pf-xyz-to-lab-f(nth($xyz, 1) / nth($white, 1));119 -1 $y: _pf-xyz-to-lab-f(nth($xyz, 2) / nth($white, 2));120 -1 $z: _pf-xyz-to-lab-f(nth($xyz, 3) / nth($white, 3));-1 120 $x: _pf-xyz-to-lab-f(math.div(nth($xyz, 1), nth($white, 1))); -1 121 $y: _pf-xyz-to-lab-f(math.div(nth($xyz, 2), nth($white, 2))); -1 122 $z: _pf-xyz-to-lab-f(math.div(nth($xyz, 3), nth($white, 3))); 121 123 122 124 $l: 116 * $y - 16; 123 125 $a: 500 * ($x - $y); @@ -127,29 +129,29 @@ $planifolia-colorspace: 'lab' !default; 127 129 } 128 130 129 131 @function _pf-lab-to-xyz-f($t) {130 -1 @if $t > 6 / 29 {-1 132 @if $t > math.div(6, 29) { 131 133 @return pow($t, 3); 132 134 } @else {133 -1 @return 108 / 841 * ($t - 4 / 29);-1 135 @return math.div(108, 841) * ($t - math.div(4, 29)); 134 136 } 135 137 } 136 138 137 139 @function _pf-lab-to-xyz($lab) { 138 140 $white: (95.05, 100, 108.9); 139 141140 -1 $l: (nth($lab, 1) + 16) / 116;-1 142 $l: math.div(nth($lab, 1) + 16, 116); 141 143142 -1 $x: nth($white, 1) * _pf-lab-to-xyz-f($l + nth($lab, 2) / 500);-1 144 $x: nth($white, 1) * _pf-lab-to-xyz-f($l + math.div(nth($lab, 2), 500)); 143 145 $y: nth($white, 2) * _pf-lab-to-xyz-f($l);144 -1 $z: nth($white, 3) * _pf-lab-to-xyz-f($l - nth($lab, 3) / 200);-1 146 $z: nth($white, 3) * _pf-lab-to-xyz-f($l - math.div(nth($lab, 3), 200)); 145 147 146 148 @return ($x, $y, $z); 147 149 } 148 150 149 151 @function _pf-xyz-to-yuuvv($xyz) { 150 152 $a: nth($xyz, 1) + 15 * nth($xyz, 2) + 3 * nth($xyz, 3);151 -1 $uu: if($a == 0, 0, 4 * nth($xyz, 1) / $a);152 -1 $vv: if($a == 0, 0, 9 * nth($xyz, 2) / $a);-1 153 $uu: if($a == 0, 0, math.div(4 * nth($xyz, 1), $a)); -1 154 $vv: if($a == 0, 0, math.div(9 * nth($xyz, 2), $a)); 153 155 @return (nth($xyz, 2), $uu, $vv); 154 156 } 155 157 @@ -158,8 +160,8 @@ $planifolia-colorspace: 'lab' !default; 158 160 $uu: nth($yuuvv, 2); 159 161 $vv: nth($yuuvv, 3); 160 162161 -1 $x: if($vv == 0, 0, $y * (9 * $uu) / (4 * $vv));162 -1 $z: if($vv == 0, 0, $y * (12 - 3 * $uu - 20 * $vv) / (4 * $vv));-1 163 $x: if($vv == 0, 0, math.div($y * (9 * $uu), 4 * $vv)); -1 164 $z: if($vv == 0, 0, math.div($y * (12 - 3 * $uu - 20 * $vv), 4 * $vv)); 163 165 164 166 @return ($x, $y, $z); 165 167 } @@ -168,8 +170,8 @@ $planifolia-colorspace: 'lab' !default; 168 170 $white: _pf-xyz-to-yuuvv((95.05, 100, 108.9)); 169 171 $yuuvv: _pf-xyz-to-yuuvv($xyz); 170 172171 -1 $y: nth($yuuvv, 1) / nth($white, 1);172 -1 $l: if($y > 216 / 24389, 116 * pow($y, 1 / 3) - 16, 24389 / 27 * $y);-1 173 $y: math.div(nth($yuuvv, 1), nth($white, 1)); -1 174 $l: if($y > math.div(216, 24389), 116 * pow($y, math.div(1, 3)) - 16, math.div(24389, 27) * $y); 173 175 174 176 $u: 13 * $l * (nth($yuuvv, 2) - nth($white, 2)); 175 177 $v: 13 * $l * (nth($yuuvv, 3) - nth($white, 3)); @@ -180,14 +182,14 @@ $planifolia-colorspace: 'lab' !default; 180 182 @function _pf-luv-to-xyz($luv) { 181 183 $white: _pf-xyz-to-yuuvv((95.05, 100, 108.9)); 182 184183 -1 $uu: if(nth($luv, 1) == 0, 0, nth($luv, 2) / (13 * nth($luv, 1)) + nth($white, 2));184 -1 $vv: if(nth($luv, 1) == 0, 0, nth($luv, 3) / (13 * nth($luv, 1)) + nth($white, 3));-1 185 $uu: if(nth($luv, 1) == 0, 0, math.div(nth($luv, 2), 13 * nth($luv, 1)) + nth($white, 2)); -1 186 $vv: if(nth($luv, 1) == 0, 0, math.div(nth($luv, 3), 13 * nth($luv, 1)) + nth($white, 3)); 185 187 186 188 $y: nth($white, 1); 187 189 @if nth($luv, 1) > 8 {188 -1 $y: $y * pow((nth($luv, 1) + 16) / 116, 3);-1 190 $y: $y * pow(math.div(nth($luv, 1) + 16, 116), 3); 189 191 } @else {190 -1 $y: $y * nth($luv, 1) * 27 / 24389;-1 192 $y: math.div($y * nth($luv, 1) * 27, 24389); 191 193 } 192 194 193 195 @return _pf-yuuvv-to-xyz(($y, $uu, $vv)); @@ -215,7 +217,7 @@ $planifolia-colorspace: 'lab' !default; 215 217 @function _pf-max-chroma($lightness, $hue, $colorspace) { 216 218 $c-min: 0; 217 219 $c-max: 200;218 -1 $c-tmp: ($c-min + $c-max) / 2;-1 220 $c-tmp: ($c-min + $c-max) * 0.5; 219 221 220 222 @while $c-max - $c-min > 1 { 221 223 $rgb: _lch-unclipped($lightness, $c-tmp, $hue, $colorspace); @@ -224,7 +226,7 @@ $planifolia-colorspace: 'lab' !default; 224 226 } @else { 225 227 $c-min: $c-tmp; 226 228 }227 -1 $c-tmp: ($c-min + $c-max) / 2;-1 229 $c-tmp: ($c-min + $c-max) * 0.5; 228 230 } 229 231 230 232 @return $c-tmp; @@ -241,7 +243,7 @@ $planifolia-colorspace: 'lab' !default; 241 243 } @else if $colorspace == 'hslab' { 242 244 $lch: _pf-to-lch($color, 'lab'); 243 245 $max: _pf-max-chroma(nth($lch, 1), nth($lch, 3), 'lab');244 -1 @return (nth($lch, 1), nth($lch, 2) / $max * 100, nth($lch, 3));-1 246 @return (nth($lch, 1), math.div(nth($lch, 2), $max) * 100, nth($lch, 3)); 245 247 } @else if $colorspace == 'luv' { 246 248 $xyz: _pf-to-xyz($color); 247 249 $luv: _pf-xyz-to-luv($xyz); @@ -249,9 +251,9 @@ $planifolia-colorspace: 'lab' !default; 249 251 } @else if $colorspace == 'hsluv' { 250 252 $lch: _pf-to-lch($color, 'luv'); 251 253 $max: _pf-max-chroma(nth($lch, 1), nth($lch, 3), 'luv');252 -1 @return (nth($lch, 1), nth($lch, 2) / $max * 100, nth($lch, 3));-1 254 @return (nth($lch, 1), math.div(nth($lch, 2), $max) * 100, nth($lch, 3)); 253 255 } @else if $colorspace == 'hsl' {254 -1 @return (lightness($color) / 1%, saturation($color) / 1%, hue($color));-1 256 @return (math.div(lightness($color), 1%), math.div(saturation($color), 1%), hue($color)); 255 257 } @else if $colorspace == 'yuv' { 256 258 $yuv: _pf-to-yuv($color); 257 259 @return _pf-lab-to-lch($yuv); @@ -267,16 +269,16 @@ $planifolia-colorspace: 'lab' !default; 267 269 @return _pf-from-xyz($xyz); 268 270 } @else if $colorspace == 'hslab' { 269 271 $max: _pf-max-chroma($lightness, $hue, 'lab');270 -1 @return _lch-unclipped($lightness, $chroma * $max / 100, $hue, 'lab');-1 272 @return _lch-unclipped($lightness, $chroma * $max * 0.01, $hue, 'lab'); 271 273 } @else if $colorspace == 'luv' { 272 274 $luv: _pf-lch-to-lab(($lightness, $chroma, $hue)); 273 275 $xyz: _pf-luv-to-xyz($luv); 274 276 @return _pf-from-xyz($xyz); 275 277 } @else if $colorspace == 'hsluv' { 276 278 $max: _pf-max-chroma($lightness, $hue, 'luv');277 -1 @return _lch-unclipped($lightness, $chroma * $max / 100, $hue, 'luv');-1 279 @return _lch-unclipped($lightness, $chroma * $max * 0.01, $hue, 'luv'); 278 280 } @else if $colorspace == 'hsl' {279 -1 $color: hsl($hue / 1deg * 1deg, $chroma * 1%, $lightness * 1%);-1 281 $color: hsl(math.div($hue, 1deg) * 1deg, $chroma * 1%, $lightness * 1%); 280 282 @return (red($color), green($color), blue($color)); 281 283 } @else if $colorspace == 'yuv' { 282 284 $yuv: _pf-lch-to-lab(($lightness, $chroma, $hue)); @@ -307,7 +309,7 @@ $planifolia-colorspace: 'lab' !default; 307 309 @if _pf-clip-needed($rgb) { 308 310 $c-min: 0; 309 311 $c-max: $chroma;310 -1 $c-tmp: ($c-min + $c-max) / 2;-1 312 $c-tmp: ($c-min + $c-max) * 0.5; 311 313 312 314 @while $c-max - $c-min > 0.01 { 313 315 $rgb: _lch-unclipped($lightness, $c-tmp, $hue, $colorspace); @@ -316,7 +318,7 @@ $planifolia-colorspace: 'lab' !default; 316 318 } @else { 317 319 $c-min: $c-tmp; 318 320 }319 -1 $c-tmp: ($c-min + $c-max) / 2;-1 321 $c-tmp: ($c-min + $c-max) * 0.5; 320 322 } 321 323 } 322 324 @@ -501,7 +503,7 @@ $planifolia-colorspace: 'lab' !default; 501 503 $h1: $h1 + if($h1 < $h2, 360deg, -360deg); 502 504 } 503 505504 -1 $h: ($h1 * $w1 + $h2 * $w2) / ($w1 + $w2);-1 506 $h: math.div($h1 * $w1 + $h2 * $w2, $w1 + $w2); 505 507 506 508 @return ($l, $c, $h); 507 509 }
diff --git a/sass/contrast.scss b/sass/contrast.scss
@@ -5,6 +5,8 @@ 5 5 /// [WCAG21](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) 6 6 //// 7 7 -1 8 @use "sass:math"; -1 9 8 10 /// @type color 9 11 $planifolia-contrast-dark-default: black !default; 10 12 /// @type color @@ -23,11 +25,11 @@ $planifolia-contrast-light-default: white !default; 23 25 } 24 26 25 27 @function _pf-srgb($channel) {26 -1 $x: $channel / 255;-1 28 $x: math.div($channel, 255); 27 29 @if $x <= 0.03928 {28 -1 @return $x / 12.92;-1 30 @return math.div($x, 12.92); 29 31 } @else {30 -1 $c: ($x + 0.055) / 1.055;-1 32 $c: math.div($x + 0.055, 1.055); 31 33 @if function-exists('pow') { 32 34 @return pow($c, 2.4); 33 35 } @else { @@ -53,9 +55,9 @@ $planifolia-contrast-light-default: white !default; 53 55 } 54 56 55 57 $a: $a2 + (1 - $a2) * $a1;56 -1 $r: ($a2 * red($fg) + (1 - $a2) * $a1 * red($bg)) / $a;57 -1 $g: ($a2 * green($fg) + (1 - $a2) * $a1 * green($bg)) / $a;58 -1 $b: ($a2 * blue($fg) + (1 - $a2) * $a1 * blue($bg)) / $a;-1 58 $r: math.div($a2 * red($fg) + (1 - $a2) * $a1 * red($bg), $a); -1 59 $g: math.div($a2 * green($fg) + (1 - $a2) * $a1 * green($bg), $a); -1 60 $b: math.div($a2 * blue($fg) + (1 - $a2) * $a1 * blue($bg), $a); 59 61 60 62 @return rgba($r, $g, $b, $a); 61 63 } @@ -71,7 +73,7 @@ $planifolia-contrast-light-default: white !default; 71 73 @function _pf-contrast($fg, $bg) { 72 74 $lbg: luma($bg); 73 75 $lfg: luma(alpha-blend($fg, $bg));74 -1 @return (max($lbg, $lfg) + 0.05) / (min($lbg, $lfg) + 0.05);-1 76 @return math.div(max($lbg, $lfg) + 0.05, min($lbg, $lfg) + 0.05); 75 77 } 76 78 77 79 /// Calculate the minimum possible contrast between two colors. @@ -119,7 +121,7 @@ $planifolia-contrast-light-default: white !default; 119 121 } @else { 120 122 $c1: contrast-min($color1, $color2); 121 123 $c2: contrast-min($color2, $color1);122 -1 @return ($c1 + $c2) / 2;-1 124 @return ($c1 + $c2) * 0.5; 123 125 } 124 126 } 125 127