From 55ec90a5c6ad6f652c73f6d73869300eb1aceb8c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 13 Feb 2022 11:58:14 +0100 Subject: Restructuring --- src/_declare-vars.scss | 160 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 src/_declare-vars.scss (limited to 'src/_declare-vars.scss') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss new file mode 100644 index 0000000..38d39dd --- /dev/null +++ b/src/_declare-vars.scss @@ -0,0 +1,160 @@ +@use 'iro-sass/src/index' as iro; +@use 'include-media/dist/include-media' as media; +@use '@oddbird/blend'; +@use 'functions' as fn; + +@include iro.props-store(( + --dims: ( + --spacing: ( + --base: iro.fn-px-to-rem(24px), + --factors: ( + --xxs: .125, + --xs: .25, + --sm: .5, + --md: 1, + --lg: 1.5, + --xl: 2, + --xxl: 2.5, + ), + --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)), + --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)), + --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)), + ), + + --font: ( + --standard: ( + --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), + --line-height: 1.5, + ), + --headline: ( + --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), + --line-height: 1.2, + --weight: 700, + ) + ), + + --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), + ), + + --border-width: ( + --thick: 4px, + --medium: 2px, + --thin: 1px, + ), + + --focus-outline-width: 3px, + + --paragraph: ( + --margin-top: fn.dim(--spacing --sm, null), + ), + + --list: ( + --indent: 3rem, + ), + ), +), 'dims'); + +// + +@include iro.fn-execute { + @include iro.props-store(( + --colors: ( + --gray-h: 220, + --gray-s: 5%, + + --bg-hi2: fn.color(--gray1, null), // Lightest background + --bg-hi: fn.color(--gray2, null), // Lighter background + --bg: fn.color(--gray3, null), // Background + + --obj-hi: fn.color(--gray4, null), + --obj: fn.color(--gray5, null), + --obj-lo: fn.color(--gray6, null), + + --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: ( + --blue: fn.accent-palette(blend.lch(48% 50 279)), + --red: fn.accent-palette(blend.lch(48% 50 23)), + --green: fn.accent-palette(blend.lch(58% 50 141)), + --yellow: fn.accent-palette(blend.lch(73% 50 90)), + + --primary: iro.props-ref('colors', --colors --accent --blue), + --error: iro.props-ref('colors', --colors --accent --red), + --success: iro.props-ref('colors', --colors --accent --green), + ), + + --selection: ( + --bg: fn.color(--accent --primary --selection, null), + --bg-img: fn.color(--accent --primary --semi, null), + --fg: fn.color(--accent --primary --fg, null), + ), + + --focus: ( + --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), + --fill: fn.color(--accent --primary --main, null), + --text: fn.color(--accent --primary --lo, null), + --fill-text: fn.color(--accent --primary --fg, null), + ), + ), + ), 'colors'); + + @include iro.props-store(( + --colors: fn.gray-palette(94%) + ), 'palette-light'); + + @include iro.props-store(( + --colors: fn.gray-palette(100%) + ), 'palette-light-raised'); +} + +// + +@include iro.fn-execute { + @include iro.props-store(( + --colors: ( + --accent: ( + --blue: fn.accent-palette(blend.lch(58% 60 279), -1), + --red: fn.accent-palette(blend.lch(58% 60 23), -1), + --green: fn.accent-palette(blend.lch(68% 60 141), -1), + --yellow: fn.accent-palette(blend.lch(83% 60 90), -1), + + --primary: iro.props-ref('colors-dark', --colors --accent --blue), + --error: iro.props-ref('colors-dark', --colors --accent --red), + --success: iro.props-ref('colors-dark', --colors --accent --green), + ), + ) + ), 'colors-dark'); + + @include iro.props-store(( + --colors: fn.gray-palette(9%) + ), 'palette-dark'); + + @include iro.props-store(( + --colors: fn.gray-palette(16%) + ), 'palette-dark-raised'); +} + +// + +@each $breakpoint in map-keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.props-store(( + --colors: () + ), $breakpoint); + } +} -- cgit v1.2.3-54-g00ecf