From 4c88538c4d267de7cd21cc29c07e7c8360145441 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Oct 2024 19:04:07 +0200 Subject: New palette generation --- src/_config.defaults.scss | 138 +++++++++++++++++++++------------------------- 1 file changed, 63 insertions(+), 75 deletions(-) (limited to 'src/_config.defaults.scss') diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 60f0c34..f2dd420 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -3,12 +3,10 @@ @use 'sass:math'; @use 'iro-sass/src/easing' as easing; -$palette-chroma-easing: 'ease'; - $static-colors: ( --base: hsl(0, 0%, 98%), - --contrasts: ( + --levels: ( --100: math.div(0, 12) * 110 - 10, --200: math.div(1, 12) * 110 - 10, --300: math.div(2, 12) * 110 - 10, @@ -79,52 +77,47 @@ $semantic-colors-common: ( ); $theme-light: ( - --contrasts: ( + --levels: ( --grays: ( - --50: -8, - --75: -4, - --100: 0, + --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), + --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), + --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), - --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98, - --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98, - --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98, + --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), + --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), + --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), - --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98, - --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98, - --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98, - --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98, - --900: 106, + --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), + --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), + --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), + --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), + --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), ), --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, - --1100: math.div(10, 12) * 96 + 5, - --1200: math.div(11, 12) * 96 + 5, - --1300: math.div(12, 12) * 96 + 5, + --100: (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))), ), ), - - --ranges: ( - --full: .3, - --muted: .1, - ), --palettes: ( - --base: hsl(260, 90%, 98%) --grays --full, - --blue: oklch(56% .16 275.25) --colors --muted, - --purple: oklch(56% .16 305.58) --colors --muted, - --red: oklch(56% .16 14.69) --colors --muted, - --green: oklch(56% .16 150.48) --colors --muted, - --yellow: oklch(56% .16 84.08) --colors --muted, + --base: hsl(260, 70%, 98%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, ), --semantic: map.merge($semantic-colors-common, ( @@ -139,52 +132,47 @@ $theme-light: ( ); $theme-dark: ( - --contrasts: ( + --levels: ( --grays: ( - --50: 4.4, - --75: 2.2, - --100: 0, + --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), + --75: (2.2) (.3 + .7 * easing.ease(math.div(9, 12))), + --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), - --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, - --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, - --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, + --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), + --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), + --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), - --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, - --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, - --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, - --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, - --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, + --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), + --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), + --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), + --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), + --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), ), --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, - --1100: math.div(10, 12) * -100 - 5, - --1200: math.div(11, 12) * -100 - 5, - --1300: math.div(12, 12) * -100 - 5, + --100: (math.div(0, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(12, 12))), ), ), - - --ranges: ( - --full: 1, - --muted: .3, - ), --palettes: ( - --base: hsl(257, 7%, 19%) --grays --full, - --blue: oklch(56% .16 275.25) --colors --muted, - --purple: oklch(56% .16 305.58) --colors --muted, - --red: oklch(56% .16 14.69) --colors --muted, - --green: oklch(56% .16 150.48) --colors --muted, - --yellow: oklch(56% .16 84.08) --colors --muted, + --base: hsl(257, 7%, 19%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, ), --semantic: map.merge($semantic-colors-common, ( -- cgit v1.3.1