From 55ec90a5c6ad6f652c73f6d73869300eb1aceb8c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 13 Feb 2022 11:58:14 +0100 Subject: Restructuring --- src/_vars.scss | 221 --------------------------------------------------------- 1 file changed, 221 deletions(-) delete mode 100644 src/_vars.scss (limited to 'src/_vars.scss') diff --git a/src/_vars.scss b/src/_vars.scss deleted file mode 100644 index d2fbc10..0000000 --- a/src/_vars.scss +++ /dev/null @@ -1,221 +0,0 @@ -@use 'sass:map'; -@use 'iro-sass/src/index' as iro; -@use 'include-media/dist/include-media' as media; -@use '@oddbird/blend'; -@use 'functions' as fn; - -iro.$vars-root-size: 16px; - -media.$breakpoints: ( - md: 40rem, - sm: 28rem -); - -media.$unit-intervals: ( - 'px': 1, - 'em': .01, - 'rem': .01, - '': 0 -); - -$grays: (); - -@for $i from 0 through 100 { - $grays: append($grays, blend.lch($i * 1% 0 0)); -} - -$wanted-grays: ( - -1.25, - -1.1, - 1, - 1.15, - 1.37, - 1.73, - 2.4, - 3.26, - 5, - 11, - 21, -); - -@function accent-palette($base, $dir: 1) { - @return ( - --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), - --main: $base, - --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), - --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), - --semi: rgba($base, .4), - --selection: rgba($base, .99), - --fg: blend.contrast($base), - ); -} - -@function gray-palette($lightness) { - $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays); - - $palette: (); - - @for $i from 1 through length($colors) { - $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i)))); - } - - @return $palette; -} - -// - -@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: accent-palette(blend.lch(48% 50 279)), - --red: accent-palette(blend.lch(48% 50 23)), - --green: accent-palette(blend.lch(58% 50 141)), - --yellow: 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: gray-palette(94%) - ), 'palette-light'); - - @include iro.props-store(( - --colors: gray-palette(100%) - ), 'palette-light-raised'); -} - -// - -@include iro.fn-execute { - @include iro.props-store(( - --colors: ( - --accent: ( - --blue: accent-palette(blend.lch(58% 60 279), -1), - --red: accent-palette(blend.lch(58% 60 23), -1), - --green: accent-palette(blend.lch(68% 60 141), -1), - --yellow: 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: gray-palette(9%) - ), 'palette-dark'); - - @include iro.props-store(( - --colors: 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-70-g09d2