From f1c517da618ba92e537e8e4856203fe988df8636 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 24 Jun 2024 17:07:19 +0200 Subject: Update --- src/_config.scss | 153 +++++++++++++++++---------------- src/_functions.scss | 64 ++------------ src/functions/_colors.scss | 180 --------------------------------------- src/functions/colors/_apca.scss | 127 +++++++++++++++++++++++++++ src/functions/colors/_index.scss | 2 + src/functions/colors/_oklch.scss | 88 +++++++++++++++++++ src/objects/_checkbox.scss | 8 ++ src/objects/_text-field.scss | 6 +- src/scopes/_code.scss | 2 +- 9 files changed, 311 insertions(+), 319 deletions(-) delete mode 100644 src/functions/_colors.scss create mode 100644 src/functions/colors/_apca.scss create mode 100644 src/functions/colors/_index.scss create mode 100644 src/functions/colors/_oklch.scss (limited to 'src') diff --git a/src/_config.scss b/src/_config.scss index be118b2..eb52b5a 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -6,7 +6,6 @@ @use 'iro-sass/src/easing' as easing; @use 'include-media/dist/include-media' as media; @use '@oddbird/blend'; -@use 'functions/colors' as iro-colors; iro.$vars-root-size: 16px; @@ -31,65 +30,65 @@ $palette-precision: 0.01 !default; $palette-chroma-easing: 'ease' !default; $static-colors: ( - --base: hsl(0, 0%, 97%), + --base: hsl(0, 0%, 98%), --contrasts: ( - --100: math.div( 1, 13) * 106 - 10, - --200: math.div( 2, 13) * 106 - 10, - --300: math.div( 3, 13) * 106 - 10, - --400: math.div( 4, 13) * 106 - 10, - --500: math.div( 5, 13) * 106 - 10, - --600: math.div( 6, 13) * 106 - 10, - --700: math.div( 7, 13) * 106 - 10, - --800: math.div( 8, 13) * 106 - 10, - --900: math.div( 9, 13) * 106 - 10, - --1000: math.div(10, 13) * 106 - 10, - --1100: math.div(11, 13) * 106 - 10, - --1200: math.div(12, 13) * 106 - 10, - --1300: math.div(13, 13) * 106 - 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: iro-colors.oklch(56% 0.14 265.25), - --purple: iro-colors.oklch(56% 0.14 305.58), - --red: iro-colors.oklch(56% 0.14 18.69), - --green: iro-colors.oklch(56% 0.14 150.48), - --yellow: iro-colors.oklch(56% 0.14 84.08), + --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), ), ) !default; $theme-light: ( --contrasts: ( --grays: ( - --50: -10, - --75: -5, + --50: -8, + --75: -4, --100: 0, - --200: easing.cubic-bezier(.3, .1, .7, .9, math.div(1, 8)) * 106, - --300: easing.cubic-bezier(.3, .1, .7, .9, math.div(2, 8)) * 106, - --400: easing.cubic-bezier(.3, .1, .7, .9, math.div(3, 8)) * 106, + --200: easing.cubic-bezier(.2, .1, .7, .95, math.div(1, 8)) * 106, + --300: easing.cubic-bezier(.2, .1, .7, .95, math.div(2, 8)) * 106, + --400: easing.cubic-bezier(.2, .1, .7, .95, math.div(3, 8)) * 106, - --500: easing.cubic-bezier(.3, .1, .7, .9, math.div(4, 8)) * 106, - --600: easing.cubic-bezier(.3, .1, .7, .9, math.div(5, 8)) * 106, - --700: easing.cubic-bezier(.3, .1, .7, .9, math.div(6, 8)) * 106, - --800: easing.cubic-bezier(.3, .1, .7, .9, math.div(7, 8)) * 106, - --900: easing.cubic-bezier(.3, .1, .7, .9, math.div(8, 8)) * 106, + --500: easing.cubic-bezier(.2, .1, .7, .95, math.div(4, 8)) * 106, + --600: easing.cubic-bezier(.2, .1, .7, .95, math.div(5, 8)) * 106, + --700: easing.cubic-bezier(.2, .1, .7, .95, math.div(6, 8)) * 106, + --800: easing.cubic-bezier(.2, .1, .7, .95, math.div(7, 8)) * 106, + --900: easing.cubic-bezier(.2, .1, .7, .95, math.div(8, 8)) * 106, ), --colors: ( - --100: math.div( 0, 13) * 100 + 5, - --200: math.div( 1, 13) * 100 + 5, - --300: math.div( 2, 13) * 100 + 5, - --400: math.div( 3, 13) * 100 + 5, - --500: math.div( 4, 13) * 100 + 5, - --600: math.div( 5, 13) * 100 + 5, - --700: math.div( 6, 13) * 100 + 5, - --800: math.div( 7, 13) * 100 + 5, - --900: math.div( 8, 13) * 100 + 5, - --1000: math.div( 9, 13) * 100 + 5, - --1100: math.div(10, 13) * 100 + 5, - --1200: math.div(11, 13) * 100 + 5, - --1300: math.div(12, 13) * 100 + 5, + --100: math.div( 0, 12) * 95 + 5, + --200: math.div( 1, 12) * 95 + 5, + --300: math.div( 2, 12) * 95 + 5, + --400: math.div( 3, 12) * 95 + 5, + --500: math.div( 4, 12) * 95 + 5, + --600: math.div( 5, 12) * 95 + 5, + --700: math.div( 6, 12) * 95 + 5, + --800: math.div( 7, 12) * 95 + 5, + --900: math.div( 8, 12) * 95 + 5, + --1000: math.div( 9, 12) * 95 + 5, + --1100: math.div(10, 12) * 95 + 5, + --1200: math.div(11, 12) * 95 + 5, + --1300: math.div(12, 12) * 95 + 5, ), ), @@ -99,12 +98,12 @@ $theme-light: ( ), --palettes: ( - --base: hsl(0, 0%, 97%) --grays --full, - --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted, - --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted, - --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted, - --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted, - --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted, + --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, ), --semantic: ( @@ -143,46 +142,46 @@ $theme-dark: ( --75: 1.5, --100: 0, - --200: easing.cubic-bezier(.5, .1, .7, .8, math.div(1, 8)) * -108, - --300: easing.cubic-bezier(.5, .1, .7, .8, math.div(2, 8)) * -108, - --400: easing.cubic-bezier(.5, .1, .7, .8, math.div(3, 8)) * -108, + --200: easing.cubic-bezier(.3, .1, .7, .8, math.div(1, 8)) * -108, + --300: easing.cubic-bezier(.3, .1, .7, .8, math.div(2, 8)) * -108, + --400: easing.cubic-bezier(.3, .1, .7, .8, math.div(3, 8)) * -108, - --500: easing.cubic-bezier(.5, .1, .7, .8, math.div(4, 8)) * -108, - --600: easing.cubic-bezier(.5, .1, .7, .8, math.div(5, 8)) * -108, - --700: easing.cubic-bezier(.5, .1, .7, .8, math.div(6, 8)) * -108, - --800: easing.cubic-bezier(.5, .1, .7, .8, math.div(7, 8)) * -108, - --900: easing.cubic-bezier(.5, .1, .7, .8, math.div(8, 8)) * -108, + --500: easing.cubic-bezier(.3, .1, .7, .8, math.div(4, 8)) * -108, + --600: easing.cubic-bezier(.3, .1, .7, .8, math.div(5, 8)) * -108, + --700: easing.cubic-bezier(.3, .1, .7, .8, math.div(6, 8)) * -108, + --800: easing.cubic-bezier(.3, .1, .7, .8, math.div(7, 8)) * -108, + --900: easing.cubic-bezier(.3, .1, .7, .8, math.div(8, 8)) * -108, ), --colors: ( - --100: math.div( 0, 13) * -110 - 5, - --200: math.div( 1, 13) * -110 - 5, - --300: math.div( 2, 13) * -110 - 5, - --400: math.div( 3, 13) * -110 - 5, - --500: math.div( 4, 13) * -110 - 5, - --600: math.div( 5, 13) * -110 - 5, - --700: math.div( 6, 13) * -110 - 5, - --800: math.div( 7, 13) * -110 - 5, - --900: math.div( 8, 13) * -110 - 5, - --1000: math.div( 9, 13) * -110 - 5, - --1100: math.div(10, 13) * -110 - 5, - --1200: math.div(11, 13) * -110 - 5, - --1300: math.div(12, 13) * -110 - 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, ), ), --ranges: ( --full: 1, - --muted: .4, + --muted: .3, ), --palettes: ( - --base: hsl(0, 0%, 19%) --grays --full, - --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted, - --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted, - --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted, - --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted, - --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted, + --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, ), --semantic: ( diff --git a/src/_functions.scss b/src/_functions.scss index 9c29285..0c04f1d 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -67,63 +67,11 @@ @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; } -@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { - $chroma-range: 1 - $chroma-range; - - $palette: (); - - @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { - $contrasts: iro.fn-list-reverse($contrasts); - } - - $reference-lightness: blend.lightness($reference-color); - $i: 0; - - @while $i <= 1 { - $l: $i * 200% - 100%; - $c: 0%; - - @if $chroma-range != 0 { - $c: $i * 2 - 1; - $c: if( - $reference-lightness >= 50%, - math.clamp(0, $c, 1), - math.clamp(0, -1 * $c, 1) - ); - $c: $chroma-range * $c * -100%; - } - - $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c)); - - $i: $i + config.$palette-precision; - } - - $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); - - @each $key, $color in $palette { - $palette: map.set($palette, #{$key}-text, blend.contrast($color)) - } - - @return $palette; -} - @function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { - $base-lch: blend-convert.Lab_to_LCH( - iro-colors.lin_sRGB_to_Oklab( - blend-convert.lin_sRGB( - blend-convert.sassToRgb($base-color) - ) - ) - ); - $ref-lch: blend-convert.Lab_to_LCH( - iro-colors.lin_sRGB_to_Oklab( - blend-convert.lin_sRGB( - blend-convert.sassToRgb($reference-color) - ) - ) - ); - $ref-l: list.nth($ref-lch, 1); - $ref-y: iro-colors.apca_sRGB_to_Y($reference-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); $cmax: math.max(map.values($contrasts)...); $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); @@ -131,10 +79,10 @@ $black-y: iro-colors.apca_sRGB_to_Y(#000); $white-y: iro-colors.apca_sRGB_to_Y(#fff); - $palette: (); - $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); + $palette: (); + @each $key, $contrast in $contrasts { //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); $y: iro-colors.apcaReverse($contrast, $ref-y); diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss deleted file mode 100644 index d3c0035..0000000 --- a/src/functions/_colors.scss +++ /dev/null @@ -1,180 +0,0 @@ -/* stylelint-disable scss/dollar-variable-pattern */ -/* stylelint-disable scss/at-function-pattern */ - -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -@use '@oddbird/blend/sass/convert' as blend-convert; -@use '@oddbird/blend/sass/utils/pow'; - -$SA98G: ( - mainTRC: 2.4, - - sRco: 0.2126729, - sGco: 0.7151522, - sBco: 0.0721750, - - normBG: 0.56, - normTXT: 0.57, - revTXT: 0.62, - revBG: 0.65, - - blkThrs: 0.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, -); - -@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 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)); -} - -@function apca_Y_to_sRGB($y) { - $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); - @return rgb($c, $c, $c); -} - -@function apcaContrast($txtY, $bgY) { - $icp: 0.0 1.1; - - @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { - @return 0; - } - - @if $txtY <= map.get($SA98G, blkThrs) { - $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); - } - @if $bgY <= map.get($SA98G, blkThrs) { - $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); - } - - @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { - @return 0; - } - - $outputContrast: 0; - - @if $bgY > $txtY { - $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); - - @if $SAPC >= map.get($SA98G, loClip) { - $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); - } - } @else { - $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); - - @if $SAPC <= -1 * map.get($SA98G, loClip) { - $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); - } - } - - @return $outputContrast * 100.0; -} - -@function apcaReverse($contrast, $knownY, $knownType: 'bg') { - $unknownY: $knownY; - - $knownExp: 0; - $unknownExp: 0; - - $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); - - @if $knownY <= map.get($SA98G, blkThrs) { - $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); - } - - @if $knownType == 'bg' { - $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); - $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); - $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); - } @else { - $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); - $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); - $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); - } - - @if '#{$unknownY}' == '#{math.sqrt(-1)}' { - @return false; - } - - @if $unknownY > 1.06 or $unknownY < 0 { - @return false; - } - - @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.max(math.min($unknownY, 1), 0); - - @return $unknownY; -} diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss new file mode 100644 index 0000000..d9236b2 --- /dev/null +++ b/src/functions/colors/_apca.scss @@ -0,0 +1,127 @@ +/* stylelint-disable scss/dollar-variable-pattern */ +/* stylelint-disable scss/at-function-pattern */ + +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; + +$SA98G: ( + mainTRC: 2.4, + + sRco: 0.2126729, + sGco: 0.7151522, + sBco: 0.0721750, + + normBG: 0.56, + normTXT: 0.57, + revTXT: 0.62, + revBG: 0.65, + + blkThrs: 0.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, +); + +@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)); +} + +@function apca_Y_to_sRGB($y) { + $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); + @return rgb($c, $c, $c); +} + +@function apcaContrast($txtY, $bgY) { + $icp: 0.0 1.1; + + @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { + @return 0; + } + + @if $txtY <= map.get($SA98G, blkThrs) { + $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); + } + @if $bgY <= map.get($SA98G, blkThrs) { + $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); + } + + @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { + @return 0; + } + + $outputContrast: 0; + + @if $bgY > $txtY { + $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); + + @if $SAPC >= map.get($SA98G, loClip) { + $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); + } + } @else { + $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); + + @if $SAPC <= -1 * map.get($SA98G, loClip) { + $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); + } + } + + @return $outputContrast * 100.0; +} + +@function apcaReverse($contrast, $knownY, $knownType: 'bg') { + $unknownY: $knownY; + + $knownExp: 0; + $unknownExp: 0; + + $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); + + @if $knownY <= map.get($SA98G, blkThrs) { + $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); + } + + @if $knownType == 'bg' { + $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); + } @else { + $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); + } + + @if '#{$unknownY}' == '#{math.sqrt(-1)}' { + @return false; + } + + @if $unknownY > 1.06 or $unknownY < 0 { + @return false; + } + + @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.max(math.min($unknownY, 1), 0); + + @return $unknownY; +} diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss new file mode 100644 index 0000000..26c3027 --- /dev/null +++ b/src/functions/colors/_index.scss @@ -0,0 +1,2 @@ +@forward 'apca'; +@forward 'oklch'; diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss new file mode 100644 index 0000000..e3df041 --- /dev/null +++ b/src/functions/colors/_oklch.scss @@ -0,0 +1,88 @@ +/* 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; +} diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 8e9e64c..e56b10e 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -202,6 +202,14 @@ &::before { background-color: fn.color(--key-focus --box-bg); } + + &::after { + border-color: fn.color(--key-focus --box-bg); + } + + @include iro.bem-elem('check-icon') { + color: fn.color(--key-focus --box-bg); + } } } } diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 04c809e..37108ab 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -69,13 +69,13 @@ --outline: fn.global-color(--focus-static --400), ), --error: ( - --border: fn.global-color(--negative --900), + --border: fn.global-color(--negative --700), --hover: ( - --border: fn.global-color(--negative --800), + --border: fn.global-color(--negative --900), ), --focus: ( - --border: fn.global-color(--negative --800), + --border: fn.global-color(--negative --900), ), ), --disabled: ( diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index 0ff3a2c..4df711b 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -18,7 +18,7 @@ ), --colors: ( --inline: ( - --fg: fn.global-color(--red --1100), + --fg: fn.global-color(--red --1200), --bg: fn.global-color(--red --200), ), --block: ( -- cgit v1.2.3-70-g09d2