From 62c3ca9a9f51a8bbca93e5e003d5feb052806a2f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 09:36:00 +0100 Subject: Init --- src/_vars.scss | 202 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 src/_vars.scss (limited to 'src/_vars.scss') diff --git a/src/_vars.scss b/src/_vars.scss new file mode 100644 index 0000000..5a6c1d0 --- /dev/null +++ b/src/_vars.scss @@ -0,0 +1,202 @@ +@use 'iro-sass/src/index' as iro; + +iro.$vars-root-size: 16px; + +$breakpoints: ( + md: 40rem, + sm: 28rem +); + +$unit-intervals: ( + 'px': 1, + 'em': .01, + 'rem': .01, + '': 0 +); + +// + +$font--main: ( + family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), + line-height: 1.5 +); + +$font--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, +); + +$line-height: map-get($font--main, line-height); + +// + +$theme-light: ( + --gray1: hsl(210, 0%, 100%), // 1.11 + --gray2: hsl(210, 0%, 98%), // 1.07 + --gray3: hsl(210, 0%, 95%), // 1 + --gray4: hsl(210, 0%, 90%), // 1.11 + --gray5: hsl(210, 0%, 87%), // 1.2 + --gray6: hsl(210, 0%, 78%), // 1.51 + --gray7: hsl(210, 0%, 69%), // 1.93 + --gray8: hsl(210, 0%, 55%), // 3 + --gray9: hsl(210, 0%, 38%), // 5.53 + --gray10: hsl(210, 0%, 19%), // 11.78 + --gray11: hsl(210, 0%, 0%), // 18.75 +); + +$theme-lighter: ( + --gray1: hsl(210, 0%, 100%), // 1 + --gray2: hsl(210, 0%, 100%), // 1 + --gray3: hsl(210, 0%, 100%), // 1 + --gray4: hsl(210, 0%, 95%), // 1.11 + --gray5: hsl(210, 0%, 92%), // 1.19 + --gray6: hsl(210, 0%, 82%), // 1.52 + --gray7: hsl(210, 0%, 73%), // 1.94 + --gray8: hsl(210, 0%, 58%), // 3.03 + --gray9: hsl(210, 0%, 41%), // 5.48 + --gray10: hsl(210, 0%, 22%), // 11.72 + --gray11: hsl(210, 0%, 0%), // 21 +); + +// + +@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)), + ), + ), + + --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: iro.props-get(--dims --spacing --y --sm, null), + ), + + --list: ( + --indent: 3rem, + ), + ), + + --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 + + --obj-hi: iro.props-get(--colors --gray4, null), + --obj: iro.props-get(--colors --gray5, null), + --obj-lo: iro.props-get(--colors --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 + + --accent: ( + --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), + --primary-const: $primary-accent-base, + --primary-const-lo: scale-color($primary-accent-base, $lightness: -15%), + --primary-const-lo2: scale-color($primary-accent-base, $lightness: -25%), + --primary-const-semi: rgba($primary-accent-base, .4), + --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), + + --error-hi: scale-color($error-accent-base, $lightness: 15%), + --error: $error-accent-base, + --error-lo: scale-color($error-accent-base, $lightness: -15%), + --error-lo2: scale-color($error-accent-base, $lightness: -25%), + --error-fg: #fff, + + --success-hi: scale-color($success-accent-base, $lightness: 15%), + --success: $success-accent-base, + --success-lo: scale-color($success-accent-base, $lightness: -15%), + --success-lo2: scale-color($success-accent-base, $lightness: -25%), + --success-fg: #fff, + ), + + --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-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), + ), + + --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), + ), + ), + )); +} + +// + +@include iro.fn-execute { + @include iro.props-store((), 'dark'); +} + +// + +@each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include iro.props-store(( + --colors: () + ), $breakpoint); + } +} -- cgit v1.2.3-54-g00ecf