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 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 80 insertions(+), 75 deletions(-) (limited to 'src/_config.scss') 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: ( -- cgit v1.2.3-70-g09d2