From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/_config.scss | 134 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 121 insertions(+), 13 deletions(-) (limited to 'src/_config.scss') diff --git a/src/_config.scss b/src/_config.scss index c42ad97..08374fb 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -1,6 +1,9 @@ +@use 'sass:list'; +@use 'sass:map'; @use 'iro-sass/src/index' as iro; @use 'iro-sass/src/responsive' as res; @use 'include-media/dist/include-media' as media; +@use '@oddbird/blend'; iro.$vars-root-size: 16px; @@ -20,18 +23,123 @@ media.$unit-intervals: ( res.$named-viewports: media.$breakpoints; -$wanted-grays: ( - --1: -1.3, - --2: -1.15, - --3: 1, +$palette-precision: 5 !default; - --4: 1.15, - --5: 1.35, - --6: 1.7, +$theme-light: ( + --base: hsl(0, 0%, 97%), + --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 70), - --7: 2.4, - --8: 3.3, - --9: 6, - --10: 13, - --11: 20, -); + --grays: ( + --50: 1.1, + --75: 1.04, + --100: 1, + + --200: -1.15, + --300: -1.35, + --400: -1.7, + + --500: -2.4, + --600: -3.3, + --700: -6, + --800: -13, + --900: -20, + ), + --colors: ( + --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, + ), + + --accent: --blue, + + --bg-l2: --50, + --bg-l1: --100, + --bg-base: --200, + + --border-mute: --200, + --border: --300, + --border-strong: --400, + + --text-disabled: --500, + --text-mute-more: --600, + --text-mute: --700, + --text: --800, + --heading: --900, +) !default; + +$theme-dark: ( + --base: hsl(0, 0%, 19%), + --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 70), + + --grays: ( + --50: -1.31, + --75: -1.18, + --100: 1, + + --200: 1.15, + --300: 1.35, + --400: 1.7, + + --500: 2.4, + --600: 3.3, + --700: 6, + --800: 13, + --900: 20, + ), + --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, + ), + + --accent: --blue, + + --bg-base: --50, + --bg-l1: --75, + --bg-l2: --100, + + --border-mute: --200, + --border: --300, + --border-strong: --400, + + --text-disabled: --500, + --text-mute-more: --600, + --text-mute: --700, + --text: --800, + --heading: --900, +) !default; + +$themes: ( + light: $theme-light, + dark: $theme-dark, +) !default; + +$theme-default: list.nth(map.keys($themes), 1) !default; -- cgit v1.2.3-54-g00ecf