From 0adc2b7014d9909869bc9888ac90a3ec142d9488 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Oct 2024 12:36:57 +0200 Subject: Replace Oddbird with native SASS color functions --- .stylelintrc.json | 3 ++ package.json | 1 - src/_config.scss | 97 ++++++++++++++++++++-------------------- src/_declare-vars.scss | 1 - src/_functions.scss | 45 +++++-------------- src/functions/colors/_apca.scss | 54 +++++++++++----------- src/functions/colors/_index.scss | 1 - src/functions/colors/_oklch.scss | 88 ------------------------------------ 8 files changed, 88 insertions(+), 202 deletions(-) delete mode 100644 src/functions/colors/_oklch.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 622a3c3..09d474e 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,6 +4,9 @@ "stylelint-order" ], "rules": { + "@stylistic/indentation": 4, + "@stylistic/number-leading-zero": "never", + "@stylistic/declaration-colon-space-after": null, "max-nesting-depth": 7, "selector-class-pattern": [ "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", diff --git a/package.json b/package.json index 38acdf7..7462243 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" }, "dependencies": { - "@oddbird/blend": "^0.2.4", "include-media": "^2.0.0", "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#c82ae7f3c766ff9d36c82183abf0f734e72a00a8" }, diff --git a/src/_config.scss b/src/_config.scss index 5449a04..3ec6607 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -5,7 +5,6 @@ @use 'iro-sass/src/responsive' as res; @use 'iro-sass/src/easing' as easing; @use 'include-media/dist/include-media' as media; -@use '@oddbird/blend'; iro.$vars-root-size: 16px; @@ -25,7 +24,7 @@ media.$unit-intervals: ( res.$named-viewports: media.$breakpoints; -$palette-precision: 0.01 !default; +$palette-precision: .01 !default; $palette-chroma-easing: 'ease' !default; @@ -33,27 +32,27 @@ $static-colors: ( --base: hsl(0, 0%, 98%), --contrasts: ( - --100: math.div( 0, 12) * 110 - 10, - --200: math.div( 1, 12) * 110 - 10, - --300: math.div( 2, 12) * 110 - 10, - --400: math.div( 3, 12) * 110 - 10, - --500: math.div( 4, 12) * 110 - 10, - --600: math.div( 5, 12) * 110 - 10, - --700: math.div( 6, 12) * 110 - 10, - --800: math.div( 7, 12) * 110 - 10, - --900: math.div( 8, 12) * 110 - 10, - --1000: math.div( 9, 12) * 110 - 10, + --100: math.div(0, 12) * 110 - 10, + --200: math.div(1, 12) * 110 - 10, + --300: math.div(2, 12) * 110 - 10, + --400: math.div(3, 12) * 110 - 10, + --500: math.div(4, 12) * 110 - 10, + --600: math.div(5, 12) * 110 - 10, + --700: math.div(6, 12) * 110 - 10, + --800: math.div(7, 12) * 110 - 10, + --900: math.div(8, 12) * 110 - 10, + --1000: math.div(9, 12) * 110 - 10, --1100: math.div(10, 12) * 110 - 10, --1200: math.div(11, 12) * 110 - 10, --1300: math.div(12, 12) * 110 - 10, ), --palettes: ( - --blue: oklch(56% 0.14 265.25), - --purple: oklch(56% 0.14 305.58), - --red: oklch(56% 0.14 18.69), - --green: oklch(56% 0.14 150.48), - --yellow: oklch(56% 0.14 84.08), + --blue: oklch(56% .14 265.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 18.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), ), --transparents: ( @@ -121,16 +120,16 @@ $theme-light: ( ), --colors: ( - --100: math.div( 0, 12) * 96 + 5, - --200: math.div( 1, 12) * 96 + 5, - --300: math.div( 2, 12) * 96 + 5, - --400: math.div( 3, 12) * 96 + 5, - --500: math.div( 4, 12) * 96 + 5, - --600: math.div( 5, 12) * 96 + 5, - --700: math.div( 6, 12) * 96 + 5, - --800: math.div( 7, 12) * 96 + 5, - --900: math.div( 8, 12) * 96 + 5, - --1000: math.div( 9, 12) * 96 + 5, + --100: math.div(0, 12) * 96 + 5, + --200: math.div(1, 12) * 96 + 5, + --300: math.div(2, 12) * 96 + 5, + --400: math.div(3, 12) * 96 + 5, + --500: math.div(4, 12) * 96 + 5, + --600: math.div(5, 12) * 96 + 5, + --700: math.div(6, 12) * 96 + 5, + --800: math.div(7, 12) * 96 + 5, + --900: math.div(8, 12) * 96 + 5, + --1000: math.div(9, 12) * 96 + 5, --1100: math.div(10, 12) * 96 + 5, --1200: math.div(11, 12) * 96 + 5, --1300: math.div(12, 12) * 96 + 5, @@ -144,11 +143,11 @@ $theme-light: ( --palettes: ( --base: hsl(0, 0%, 98%) --grays --full, - --blue: oklch(56% 0.16 265.25) --colors --muted, - --purple: oklch(56% 0.16 305.58) --colors --muted, - --red: oklch(56% 0.16 18.69) --colors --muted, - --green: oklch(56% 0.16 150.48) --colors --muted, - --yellow: oklch(56% 0.16 84.08) --colors --muted, + --blue: oklch(56% .16 265.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 18.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, ), --semantic: map.merge($semantic-colors-common, ( @@ -158,7 +157,7 @@ $theme-light: ( )), --constants: ( - --shadow: rgba(#000, 0.15), + --shadow: rgba(#000, .15), ), ) !default; @@ -181,16 +180,16 @@ $theme-dark: ( ), --colors: ( - --100: math.div( 0, 12) * -100 - 5, - --200: math.div( 1, 12) * -100 - 5, - --300: math.div( 2, 12) * -100 - 5, - --400: math.div( 3, 12) * -100 - 5, - --500: math.div( 4, 12) * -100 - 5, - --600: math.div( 5, 12) * -100 - 5, - --700: math.div( 6, 12) * -100 - 5, - --800: math.div( 7, 12) * -100 - 5, - --900: math.div( 8, 12) * -100 - 5, - --1000: math.div( 9, 12) * -100 - 5, + --100: math.div(0, 12) * -100 - 5, + --200: math.div(1, 12) * -100 - 5, + --300: math.div(2, 12) * -100 - 5, + --400: math.div(3, 12) * -100 - 5, + --500: math.div(4, 12) * -100 - 5, + --600: math.div(5, 12) * -100 - 5, + --700: math.div(6, 12) * -100 - 5, + --800: math.div(7, 12) * -100 - 5, + --900: math.div(8, 12) * -100 - 5, + --1000: math.div(9, 12) * -100 - 5, --1100: math.div(10, 12) * -100 - 5, --1200: math.div(11, 12) * -100 - 5, --1300: math.div(12, 12) * -100 - 5, @@ -204,11 +203,11 @@ $theme-dark: ( --palettes: ( --base: hsl(0, 0%, 20%) --grays --full, - --blue: oklch(56% 0.16 265.25) --colors --muted, - --purple: oklch(56% 0.16 305.58) --colors --muted, - --red: oklch(56% 0.16 18.69) --colors --muted, - --green: oklch(56% 0.16 150.48) --colors --muted, - --yellow: oklch(56% 0.16 84.08) --colors --muted, + --blue: oklch(56% .16 265.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 18.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, ), --semantic: map.merge($semantic-colors-common, ( @@ -218,7 +217,7 @@ $theme-dark: ( )), --constants: ( - --shadow: rgba(#000, 0.5), + --shadow: rgba(#000, .5), ), ) !default; diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index e205354..0aa1cca 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -3,7 +3,6 @@ @use 'sass:list'; @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; -@use '@oddbird/blend'; @use 'functions' as fn; @use 'config'; diff --git a/src/_functions.scss b/src/_functions.scss index d615614..cbdb951 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -4,9 +4,6 @@ @use 'sass:list'; @use 'sass:meta'; -@use '@oddbird/blend'; -@use '@oddbird/blend/sass/convert' as blend-convert; - @use 'iro-sass/src/index' as iro; @use 'iro-sass/src/easing' as easing; @use 'functions/colors' as iro-colors; @@ -67,11 +64,12 @@ @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; } -@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { - $base-lch: iro-colors.parse-oklch($base-color); - $ref-lch: iro-colors.parse-oklch($reference-color); - $ref-l: list.nth($ref-lch, 1); - $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); +@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { + $base-lch: color.to-space($base-color, oklch); + $ref-lch: color.to-space($ref-color, oklch); + + $ref-l: color.channel($ref-lch, 'lightness'); + $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); $cmax: math.max(map.values($contrasts)...); $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); @@ -84,52 +82,29 @@ $palette: (); @each $key, $contrast in $contrasts { - //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); $y: iro-colors.apcaReverse($contrast, $ref-y); - $l: list.nth($base-lch, 1); + $l: color.channel($base-lch, 'lightness'); $c: 1; @if $y != false { - $y-lch: blend-convert.Lab_to_LCH( - iro-colors.lin_sRGB_to_Oklab( - blend-convert.lin_sRGB( - blend-convert.sassToRgb( - iro-colors.apca_Y_to_sRGB($y) - ) - ) - ) - ); - $l: list.nth($y-lch, 1); + $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); } @else { $y: $ref-y; } @if $chroma-range != 1 { - $c: if( - $ref-l > .5, - math.clamp(0, math.div($contrast, $cmax), 1), - -1 * math.clamp(-1, math.div($contrast, $cmax), 0) - ); + $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); $c: meta.call($chroma-easing, $c); $c: $chroma-range + (1 - $chroma-range) * $c; } - $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3)); - //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3); - //$color: blend-convert.rgbToSass( - // blend-convert.gam_sRGB( - // iro-colors.Oklab_to_lin_sRGB( - // blend-convert.LCH_to_Lab($color) - // ) - // ) - //); + $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); $contrast-black: iro-colors.apcaContrast($black-y, $y); $contrast-white: iro-colors.apcaContrast($white-y, $y); $palette: map.set($palette, $key, $color); $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); - //$palette: map.set($palette, #{$key}-text, blend.contrast($color)); } @return $palette; diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss index d9236b2..c848db7 100644 --- a/src/functions/colors/_apca.scss +++ b/src/functions/colors/_apca.scss @@ -9,34 +9,36 @@ $SA98G: ( mainTRC: 2.4, - sRco: 0.2126729, - sGco: 0.7151522, - sBco: 0.0721750, + sRco: .2126729, + sGco: .7151522, + sBco: .072175, - normBG: 0.56, - normTXT: 0.57, - revTXT: 0.62, - revBG: 0.65, + normBG: .56, + normTXT: .57, + revTXT: .62, + revBG: .65, - blkThrs: 0.022, + blkThrs: .022, blkClmp: 1.414, scaleBoW: 1.14, scaleWoB: 1.14, - loBoWoffset: 0.027, - loWoBoffset: 0.027, - deltaYmin: 0.0005, - loClip: 0.0001, - - mFactor: 1.94685544331710, - mOffsetIn: 0.03873938165714010, - mExpAdj: 0.2833433964208690, - mOffsetOut: 0.3128657958707580, + loBoWoffset: .027, + loWoBoffset: .027, + deltaYmin: .0005, + loClip: .0001, + + mFactor: 1.9468554433171, + mOffsetIn: .0387393816571401, + mExpAdj: .283343396420869, + mOffsetOut: .312865795870758, ); @function apca_sRGB_to_Y($color) { - @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + - map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + - map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC)); + $rgb: color.to-space($color, rgb); + + @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); } @function apca_Y_to_sRGB($y) { @@ -45,7 +47,7 @@ $SA98G: ( } @function apcaContrast($txtY, $bgY) { - $icp: 0.0 1.1; + $icp: 1.1; @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { @return 0; @@ -78,7 +80,7 @@ $SA98G: ( } } - @return $outputContrast * 100.0; + @return $outputContrast * 100; } @function apcaReverse($contrast, $knownY, $knownType: 'bg') { @@ -90,7 +92,7 @@ $SA98G: ( $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); - $contrast: math.div($contrast * 0.01 + $offset, $scale); + $contrast: math.div($contrast * .01 + $offset, $scale); @if $knownY <= map.get($SA98G, blkThrs) { $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); @@ -115,10 +117,8 @@ $SA98G: ( } @if $unknownY <= map.get($SA98G, blkThrs) { - $unknownY: math.pow( - ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), - math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp)) - ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); + $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), + math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); } $unknownY: math.max(math.min($unknownY, 1), 0); diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss index 26c3027..9dad0f9 100644 --- a/src/functions/colors/_index.scss +++ b/src/functions/colors/_index.scss @@ -1,2 +1 @@ @forward 'apca'; -@forward 'oklch'; diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss deleted file mode 100644 index e3df041..0000000 --- a/src/functions/colors/_oklch.scss +++ /dev/null @@ -1,88 +0,0 @@ -/* stylelint-disable scss/dollar-variable-pattern */ -/* stylelint-disable scss/at-function-pattern */ - -@use 'sass:list'; -@use 'sass:math'; -@use 'sass:meta'; -@use 'sass:string'; -@use '@oddbird/blend/sass/convert' as blend-convert; -@use '@oddbird/blend/sass/utils/pow'; -@use 'iro-sass/src/index' as iro; - -@function lin_sRGB_to_Oklab($color) { - $r_: list.nth($color, 1); - $g_: list.nth($color, 2); - $b_: list.nth($color, 3); - - $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); - $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); - $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); - - @return ( - 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, - 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, - 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, - ); -} - -@function Oklab_to_lin_sRGB($color) { - $l_: list.nth($color, 1); - $a_: list.nth($color, 2); - $b_: list.nth($color, 3); - - $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_; - $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_; - $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_; - - $l: $l * $l * $l; - $m: $m * $m * $m; - $s: $s * $s * $s; - - @return ( - 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s, - -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s, - -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s, - ); -} - -@function oklch($arg) { - $l: math.div(list.nth($arg, 1), 100%); - $c: list.nth($arg, 2); - $h: list.nth($arg, 3); - - @return blend-convert.rgbToSass( - blend-convert.gam_sRGB( - Oklab_to_lin_sRGB( - blend-convert.LCH_to_Lab($l $c $h) - ) - ) - ); -} - -@function parse-oklch($color) { - @if meta.type-of($color) == 'color' { - @return blend-convert.Lab_to_LCH( - lin_sRGB_to_Oklab( - blend-convert.lin_sRGB( - blend-convert.sassToRgb($color) - ) - ) - ); - } - - @if meta.type-of($color) != 'string' { - @return null; - } - - @if string.slice($color, 1, 6) == 'oklch(' { - $args: string.split(string.slice($color, 7, -2), ' '); - - $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%); - $c: iro.fn-to-number(list.nth($args, 2)); - $h: iro.fn-to-number(list.nth($args, 3)); - - @return $l $c $h; - } - - @return null; -} -- cgit v1.2.3-70-g09d2