From b6735c257d445135e5f5319878eee3016cb147d7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Oct 2024 23:38:11 +0200 Subject: Make it easier to extend config --- src/_config.defaults.scss | 199 ++++++++++++++++++++++++++++++++++++++++++++++ src/_config.scss | 198 ++------------------------------------------- src/_iro-design.scss | 1 + 3 files changed, 207 insertions(+), 191 deletions(-) create mode 100644 src/_config.defaults.scss diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss new file mode 100644 index 0000000..60f0c34 --- /dev/null +++ b/src/_config.defaults.scss @@ -0,0 +1,199 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'iro-sass/src/easing' as easing; + +$palette-chroma-easing: 'ease'; + +$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, + --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% .14 275.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 14.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), + ), + + --transparents: ( + --100: 0, + --200: .1, + --300: .25, + --400: .4, + --500: .55, + --600: .7, + --700: .8, + --800: .9, + --900: 1, + ), +); + +$semantic-colors-common: ( + --accent: --blue, + --accent-static: --blue-static, + --positive: --green, + --positive-static: --green-static, + --negative: --red, + --negative-static: --red-static, + --warning: --yellow, + --warning-static: --yellow-static, + + --focus-raw: --accent, + --focus-static: --accent-static, + + --border-mute: --base --200, + --border: --base --300, + --border-strong: --base --400, + + --text-disabled: --base --500, + --text-mute-more: --base --600, + --text-mute: --base --700, + --text: --base --800, + --heading: --base --900, + + --focus: ( + --outline: --focus-raw --400, + --border-mute: --focus-raw --900, + --border: --focus-raw --1000, + --border-text: --focus-raw --1000-text, + --border-strong: --focus-raw --1100, + --text: --focus-raw --1100, + ), +); + +$theme-light: ( + --contrasts: ( + --grays: ( + --50: -8, + --75: -4, + --100: 0, + + --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, + + --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, + ), + + --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, + ), + ), + + --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, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-l2: --base --50, + --bg-l1: --base --100, + --bg-base: --base --200, + )), + + --constants: ( + --shadow: rgba(#000, .15), + ), +); + +$theme-dark: ( + --contrasts: ( + --grays: ( + --50: 4.4, + --75: 2.2, + --100: 0, + + --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, + + --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, + ), + + --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, + ), + ), + + --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, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-base: --base --50, + --bg-l1: --base --75, + --bg-l2: --base --100, + )), + + --constants: ( + --shadow: rgba(#000, .5), + ), +); diff --git a/src/_config.scss b/src/_config.scss index d2f62da..e0ae933 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -2,212 +2,28 @@ @use 'sass:map'; @use 'sass:math'; @use 'iro-sass/src/easing' as easing; +@use 'config.defaults' as def; -$palette-chroma-easing: 'ease' !default; +$palette-chroma-easing: def.$palette-chroma-easing !default; $static-colors-override: () !default; -$static-colors: map.deep-merge(( - --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, - --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% .14 275.25), - --purple: oklch(56% .14 305.58), - --red: oklch(56% .14 14.69), - --green: oklch(56% .14 150.48), - --yellow: oklch(56% .14 84.08), - ), - - --transparents: ( - --100: 0, - --200: .1, - --300: .25, - --400: .4, - --500: .55, - --600: .7, - --700: .8, - --800: .9, - --900: 1, - ), -), $static-colors-override) !default; +$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default; $semantic-colors-common-override: () !default; -$semantic-colors-common: map.deep-merge(( - --accent: --blue, - --accent-static: --blue-static, - --positive: --green, - --positive-static: --green-static, - --negative: --red, - --negative-static: --red-static, - --warning: --yellow, - --warning-static: --yellow-static, - - --focus-raw: --accent, - --focus-static: --accent-static, - - --border-mute: --base --200, - --border: --base --300, - --border-strong: --base --400, - - --text-disabled: --base --500, - --text-mute-more: --base --600, - --text-mute: --base --700, - --text: --base --800, - --heading: --base --900, - - --focus: ( - --outline: --focus-raw --400, - --border-mute: --focus-raw --900, - --border: --focus-raw --1000, - --border-text: --focus-raw --1000-text, - --border-strong: --focus-raw --1100, - --text: --focus-raw --1100, - ), -), $semantic-colors-common-override) !default; +$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default; $theme-light-override: () !default; -$theme-light: map.deep-merge(( - --contrasts: ( - --grays: ( - --50: -8, - --75: -4, - --100: 0, - - --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, - - --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, - ), - - --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, - ), - ), - - --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, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-l2: --base --50, - --bg-l1: --base --100, - --bg-base: --base --200, - )), - - --constants: ( - --shadow: rgba(#000, .15), - ), -), $theme-light-override) !default; +$theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default; $theme-dark-override: () !default; -$theme-dark: map.deep-merge(( - --contrasts: ( - --grays: ( - --50: 4.4, - --75: 2.2, - --100: 0, - - --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, - - --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, - ), - - --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, - ), - ), - - --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, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-base: --base --50, - --bg-l1: --base --75, - --bg-l2: --base --100, - )), - - --constants: ( - --shadow: rgba(#000, .5), - ), -), $theme-dark-override) !default; +$theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default; $themes-override: () !default; $themes: map.deep-merge(( --main: ( light: $theme-light, dark: $theme-dark, - ) + ), ), $themes-override) !default; $theme-default: list.nth(map.keys($themes), 1) !default; diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 988f23a..a80f640 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -19,6 +19,7 @@ $breakpoints: ( ) !default, ); +@forward 'config.defaults' as config-defaults--*; @forward 'config' as config--*; @forward 'props' as props--*; @forward 'core' as core--*; -- cgit v1.2.3-70-g09d2