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