From 0adc2b7014d9909869bc9888ac90a3ec142d9488 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Oct 2024 12:36:57 +0200 Subject: Replace Oddbird with native SASS color functions --- src/_config.scss | 97 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 48 insertions(+), 49 deletions(-) (limited to 'src/_config.scss') diff --git a/src/_config.scss b/src/_config.scss index 5449a04..3ec6607 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -5,7 +5,6 @@ @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'; iro.$vars-root-size: 16px; @@ -25,7 +24,7 @@ media.$unit-intervals: ( res.$named-viewports: media.$breakpoints; -$palette-precision: 0.01 !default; +$palette-precision: .01 !default; $palette-chroma-easing: 'ease' !default; @@ -33,27 +32,27 @@ $static-colors: ( --base: hsl(0, 0%, 98%), --contrasts: ( - --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, + --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: 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), + --blue: oklch(56% .14 265.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 18.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), ), --transparents: ( @@ -121,16 +120,16 @@ $theme-light: ( ), --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, + --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, @@ -144,11 +143,11 @@ $theme-light: ( --palettes: ( --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, + --blue: oklch(56% .16 265.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 18.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, ), --semantic: map.merge($semantic-colors-common, ( @@ -158,7 +157,7 @@ $theme-light: ( )), --constants: ( - --shadow: rgba(#000, 0.15), + --shadow: rgba(#000, .15), ), ) !default; @@ -181,16 +180,16 @@ $theme-dark: ( ), --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, + --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, @@ -204,11 +203,11 @@ $theme-dark: ( --palettes: ( --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, + --blue: oklch(56% .16 265.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 18.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, ), --semantic: map.merge($semantic-colors-common, ( @@ -218,7 +217,7 @@ $theme-dark: ( )), --constants: ( - --shadow: rgba(#000, 0.5), + --shadow: rgba(#000, .5), ), ) !default; -- cgit v1.2.3-70-g09d2