From 029fb64837173b70b31ac579cb005c2995806c49 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 24 Jun 2024 09:14:43 +0200 Subject: Update --- src/_config.scss | 155 +++++++++++++++++++++++---------------------- src/_functions.scss | 101 +++++++++++++---------------- src/functions/_colors.scss | 35 ++++++++-- 3 files changed, 153 insertions(+), 138 deletions(-) (limited to 'src') 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 @@ @use 'sass:list'; @use 'sass:map'; +@use 'sass:math'; @use 'iro-sass/src/index' as iro; @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'; +@use 'functions/colors' as iro-colors; iro.$vars-root-size: 16px; @@ -25,31 +28,33 @@ res.$named-viewports: media.$breakpoints; $palette-precision: 0.01 !default; +$palette-chroma-easing: 'ease' !default; + $static-colors: ( --base: hsl(0, 0%, 97%), --contrasts: ( - --100: -1.08, - --200: -1.20, - --300: -1.33, - --400: -1.58, - --500: -1.92, - --600: -2.39, - --700: -3.01, - --800: -3.87, - --900: -5.07, - --1000: -6.72, - --1100: -8.84, - --1200: -11.31, - --1300: -13.94, + --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, ), --palettes: ( - --blue: blend.lch(48% 50 279), - --purple: blend.lch(48% 50 308), - --red: blend.lch(48% 50 23), - --green: blend.lch(63% 50 147), - --yellow: blend.lch(68% 50 80), + --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), ), ) !default; @@ -60,46 +65,46 @@ $theme-light: ( --75: -5, --100: 0, - --200: 13.2375, - --300: 26.475, - --400: 39.7125, + --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, - --500: 52.95, - --600: 66.1875, - --700: 79.425, - --800: 92.6625, - --900: 105.9, + --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, ), --colors: ( - --100: -1.18, - --200: -1.30, - --300: -1.43, - --400: -1.68, - --500: -2.00, - --600: -2.45, - --700: -3.04, - --800: -3.87, - --900: -5.07, - --1000: -6.72, - --1100: -8.84, - --1200: -11.31, - --1300: -13.94, + --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, ), ), --ranges: ( --full: 1, - --muted: .2, + --muted: .1, ), --palettes: ( --base: hsl(0, 0%, 97%) --grays --full, - --blue: blend.lch(48% 50 279) --colors --muted, - --purple: blend.lch(48% 50 308) --colors --muted, - --red: blend.lch(48% 50 23) --colors --muted, - --green: blend.lch(63% 50 147) --colors --muted, - --yellow: blend.lch(68% 50 80) --colors --muted, + --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, ), --semantic: ( @@ -134,50 +139,50 @@ $theme-light: ( $theme-dark: ( --contrasts: ( --grays: ( - --50: -1.31, - --75: -1.18, - --100: 1, + --50: 3, + --75: 1.5, + --100: 0, - --200: 1.15, - --300: 1.35, - --400: 1.7, + --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, - --500: 2.4, - --600: 3.3, - --700: 6, - --800: 13, - --900: 20, + --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, ), --colors: ( - --100: 1.12, - --200: 1.30, - --300: 1.58, - --400: 1.96, - --500: 2.45, - --600: 3.09, - --700: 3.90, - --800: 4.85, - --900: 6.02, - --1000: 7.34, - --1100: 8.77, - --1200: 10.18, - --1300: 11.64, + --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, ), ), --ranges: ( --full: 1, - --muted: .2, + --muted: .4, ), --palettes: ( --base: hsl(0, 0%, 19%) --grays --full, - --blue: blend.lch(48% 50 279) --colors --muted, - --purple: blend.lch(48% 50 308) --colors --muted, - --red: blend.lch(48% 50 23) --colors --muted, - --green: blend.lch(63% 50 147) --colors --muted, - --yellow: blend.lch(68% 50 80) --colors --muted, + --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, ), --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 @@ @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; -@use 'functions/colors' as iro-colors; @use 'iro-sass/src/index' as iro; +@use 'iro-sass/src/easing' as easing; +@use 'functions/colors' as iro-colors; @use 'config'; @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { @@ -66,51 +67,6 @@ @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; } -@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) { - $ref-lum: lum($reference-color); - - $result: (); - $colors-len: list.length($colors); - $colors-idx: 1; - $wanted-len: list.length($wanted-contrasts); - $wanted-idx: 1; - - @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len { - $color: list.nth($colors, $colors-idx); - $lum: lum($color); - $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum)); - - @if $contrast != 1 { - @if $lum <= $ref-lum { - $contrast: -1 * $contrast; - } - } - - $wanted: list.nth($wanted-contrasts, $wanted-idx); - $wanted-key: list.nth($wanted, 1); - $wanted-contrast: list.nth($wanted, 2); - - @if $contrast >= $wanted-contrast { - $result: map.set($result, $wanted-key, $color); - $wanted-idx: $wanted-idx + 1; - } @else { - $colors-idx: $colors-idx + 1; - } - } - - $last-color: list.nth($colors, $colors-len); - - @if $wanted-idx <= $wanted-len { - @for $i from $wanted-idx through $wanted-len { - $wanted: list.nth($wanted-contrasts, $i); - $wanted-key: list.nth($wanted, 1); - $result: map.set($result, $wanted-key, $last-color); - } - } - - @return $result; -} - @function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { $chroma-range: 1 - $chroma-range; @@ -159,17 +115,33 @@ ) ) ); + $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); + $cmax: math.max(map.values($contrasts)...); + $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); + + $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); + @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); + $c: 1; @if $y != false { - @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y); - $y-lch: blend-convert.Lab_to_LCH( iro-colors.lin_sRGB_to_Oklab( blend-convert.lin_sRGB( @@ -181,20 +153,37 @@ ); $l: list.nth($y-lch, 1); } @else { - @debug $contrast, $ref-y, $y; + $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: meta.call($chroma-easing, $c); + $c: $chroma-range + (1 - $chroma-range) * $c; } - $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); - //$color: blend-convert.LCH_to_Lab($color); - //$color: iro-colors.Oklab_to_lin_sRGB($color); - //$color: blend-convert(); + $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) + // ) + // ) + //); + + $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($l > 50%, #000, #fff)); + $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)); } - @debug '-------------------------------------------'; - @return $palette; } 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 @@ @use 'sass:map'; @use 'sass:math'; @use 'sass:meta'; +@use '@oddbird/blend/sass/convert' as blend-convert; @use '@oddbird/blend/sass/utils/pow'; $SA98G: ( @@ -56,18 +57,32 @@ $SA98G: ( $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_ + 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 * 4s, - -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s, - -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s, + 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) + ) + ) ); } @@ -83,6 +98,12 @@ $SA98G: ( } @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)); } @@ -110,7 +131,7 @@ $SA98G: ( } } - @return outputContrast * 100.0; + @return $outputContrast * 100.0; } @function apcaReverse($contrast, $knownY, $knownType: 'bg') { -- cgit v1.2.3-70-g09d2