From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:17:33 +0100 Subject: Improved variable structure --- src/_vars.scss | 191 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 95 insertions(+), 96 deletions(-) (limited to 'src/_vars.scss') diff --git a/src/_vars.scss b/src/_vars.scss index c315438..c79b917 100644 --- a/src/_vars.scss +++ b/src/_vars.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; +@use 'functions' as fn; iro.$vars-root-size: 16px; @@ -32,77 +33,81 @@ $line-height: map-get($font--main, line-height); // -@include iro.fn-execute { - $primary-accent-base: hsl(222, 49.8%, 52.4%); - $error-accent-base: hsl(352, 49.8%, 52.4%); - $success-accent-base: hsl(113, 49.8%, 39.6%); - - @include iro.props-store(( - --dims: ( - --spacing: ( - --base: 1.6rem, - --factors: ( - --xs: .25, - --sm: .5, - --md: 1, - --lg: 1.5, - --xl: 2, - ), - --x: ( - --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)), - --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)), - --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)), - ), - --y: ( - --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)), - --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)), - --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)), - --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)), - --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)), - ), +@include iro.props-store(( + --dims: ( + --spacing: ( + --base: 1.6rem, + --factors: ( + --xs: .25, + --sm: .5, + --md: 1, + --lg: 1.5, + --xl: 2, ), - - --font-size: ( - --xs: iro.fn-px-to-rem(11px), - --sm: iro.fn-px-to-rem(13px), - --md: iro.fn-px-to-rem(14px), - --lg: iro.fn-px-to-rem(16px), - --xl: iro.fn-px-to-rem(18px), - --xxl: iro.fn-px-to-rem(22px), - --xxxl: iro.fn-px-to-rem(28px), + --x: ( + --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), + --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), + --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), ), - - --border-width: ( - --thick: 4px, - --medium: 2px, - --thin: 1px, + --y: ( + --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), + --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), + --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), + --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), + --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), ), + ), + + --font-size: ( + --xs: iro.fn-px-to-rem(11px), + --sm: iro.fn-px-to-rem(13px), + --md: iro.fn-px-to-rem(14px), + --lg: iro.fn-px-to-rem(16px), + --xl: iro.fn-px-to-rem(18px), + --xxl: iro.fn-px-to-rem(22px), + --xxxl: iro.fn-px-to-rem(28px), + ), - --focus-outline-width: 3px, + --border-width: ( + --thick: 4px, + --medium: 2px, + --thin: 1px, + ), - --paragraph: ( - --margin-top: iro.props-get(--dims --spacing --y --sm, null), - ), + --focus-outline-width: 3px, - --list: ( - --indent: 3rem, - ), + --paragraph: ( + --margin-top: fn.dim(--spacing --y --sm, null), + ), + + --list: ( + --indent: 3rem, ), - + ), +), 'dims'); + +// + +@include iro.fn-execute { + $primary-accent-base: hsl(222, 49.8%, 52.4%); + $error-accent-base: hsl(352, 49.8%, 52.4%); + $success-accent-base: hsl(113, 49.8%, 39.6%); + + @include iro.props-store(( --colors: ( - --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background - --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background - --bg: iro.props-get(--colors --gray3, null), // Background + --bg-hi2: fn.color(--gray1, null), // Lightest background + --bg-hi: fn.color(--gray2, null), // Lighter background + --bg: fn.color(--gray3, null), // Background - --obj-hi: iro.props-get(--colors --gray4, null), - --obj: iro.props-get(--colors --gray5, null), - --obj-lo: iro.props-get(--colors --gray6, null), + --obj-hi: fn.color(--gray4, null), + --obj: fn.color(--gray5, null), + --obj-lo: fn.color(--gray6, null), - --fg-hi3: iro.props-get(--colors --gray7, null), // Disabled text - --fg-hi2: iro.props-get(--colors --gray8, null), // Placeholder text - --fg-hi: iro.props-get(--colors --gray9, null), // Faint text - --fg: iro.props-get(--colors --gray10, null), // Text - --fg-lo: iro.props-get(--colors --gray11, null), // Strong text + --fg-hi3: fn.color(--gray7, null), // Disabled text + --fg-hi2: fn.color(--gray8, null), // Placeholder text + --fg-hi: fn.color(--gray9, null), // Faint text + --fg: fn.color(--gray10, null), // Text + --fg-lo: fn.color(--gray11, null), // Strong text --accent: ( --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), @@ -113,11 +118,11 @@ $line-height: map-get($font--main, line-height); --primary-const-selection: rgba($primary-accent-base, .99), --primary-const-fg: #fff, - --primary-hi: iro.props-get(--colors --accent --primary-const-hi, null), - --primary: iro.props-get(--colors --accent --primary-const, null), - --primary-lo: iro.props-get(--colors --accent --primary-const-lo, null), - --primary-lo2: iro.props-get(--colors --accent --primary-const-lo2, null), - --primary-fg: iro.props-get(--colors --accent --primary-const-fg, null), + --primary-hi: fn.color(--accent --primary-const-hi, null), + --primary: fn.color(--accent --primary-const, null), + --primary-lo: fn.color(--accent --primary-const-lo, null), + --primary-lo2: fn.color(--accent --primary-const-lo2, null), + --primary-fg: fn.color(--accent --primary-const-fg, null), --error-hi: scale-color($error-accent-base, $lightness: 15%), --error: $error-accent-base, @@ -133,27 +138,27 @@ $line-height: map-get($font--main, line-height); ), --grayscale-accent: ( - --primary-hi: iro.props-get(--colors --fg-hi2, null), - --primary: iro.props-get(--colors --fg-hi, null), - --primary-lo: iro.props-get(--colors --fg, null), - --primary-lo2: iro.props-get(--colors --fg-lo, null), + --primary-hi: fn.color(--fg-hi2, null), + --primary: fn.color(--fg-hi, null), + --primary-lo: fn.color(--fg, null), + --primary-lo2: fn.color(--fg-lo, null), --primary-fg: #fff, ), --selection: ( - --bg: iro.props-get(--colors --accent --primary-const-selection, null), - --bg-img: iro.props-get(--colors --accent --primary-const-semi, null), - --fg: iro.props-get(--colors --accent --primary-const-fg, null), + --bg: fn.color(--accent --primary-const-selection, null), + --bg-img: fn.color(--accent --primary-const-semi, null), + --fg: fn.color(--accent --primary-const-fg, null), ), --focus: ( - --shadow: 0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null), - --fill: iro.props-get(--colors --accent --primary-const, null), - --text: iro.props-get(--colors --accent --primary-const-lo, null), - --fill-text: iro.props-get(--colors --accent --primary-const-fg, null), + --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null), + --fill: fn.color(--accent --primary-const, null), + --text: fn.color(--accent --primary-const-lo, null), + --fill-text: fn.color(--accent --primary-const-fg, null), ), ), - )); + ), 'colors'); @include iro.props-store(( --colors: ( @@ -169,7 +174,7 @@ $line-height: map-get($font--main, line-height); --gray10: hsl(210, 0%, 19%), // 11.78 --gray11: hsl(210, 0%, 0%), // 18.75 ) - ), 'light-palette'); + ), 'palette-light'); @include iro.props-store(( --colors: ( @@ -185,29 +190,23 @@ $line-height: map-get($font--main, line-height); --gray10: hsl(210, 0%, 22%), // 11.72 --gray11: hsl(210, 0%, 0%), // 21 ) - ), 'light-raised-palette'); + ), 'palette-light-raised'); } // @include iro.fn-execute { - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark'); - } - - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark-palette'); - } + @include iro.props-store(( + --colors: () + ), 'colors-dark'); - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark-raised-palette'); - } + @include iro.props-store(( + --colors: () + ), 'palette-dark'); + + @include iro.props-store(( + --colors: () + ), 'palette-dark-raised'); } // -- cgit v1.2.3-54-g00ecf