From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/_vars.scss | 298 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 src_old/_vars.scss (limited to 'src_old/_vars.scss') diff --git a/src_old/_vars.scss b/src_old/_vars.scss new file mode 100644 index 0000000..6e2cbfc --- /dev/null +++ b/src_old/_vars.scss @@ -0,0 +1,298 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:list'; +@use 'iro-sass/src/index' as iro; +@use 'include-media/dist/include-media' as media; +@use 'functions' as fn; +@use 'config'; + +@include iro.props-store(( + --dims: ( + --size: ( + --0: 0, + --10: iro.fn-px-to-rem(1px), + --25: iro.fn-px-to-rem(2px), + --40: iro.fn-px-to-rem(3px), + --50: iro.fn-px-to-rem(4px), + --65: iro.fn-px-to-rem(5px), + --75: iro.fn-px-to-rem(6px), + --85: iro.fn-px-to-rem(7px), + --100: iro.fn-px-to-rem(8px), + --115: iro.fn-px-to-rem(9px), + --125: iro.fn-px-to-rem(10px), + --130: iro.fn-px-to-rem(11px), + --150: iro.fn-px-to-rem(12px), + --160: iro.fn-px-to-rem(13px), + --175: iro.fn-px-to-rem(14px), + --200: iro.fn-px-to-rem(16px), + --225: iro.fn-px-to-rem(18px), + --250: iro.fn-px-to-rem(20px), + --275: iro.fn-px-to-rem(22px), + --300: iro.fn-px-to-rem(24px), + --325: iro.fn-px-to-rem(26px), + --350: iro.fn-px-to-rem(28px), + --375: iro.fn-px-to-rem(30px), + --400: iro.fn-px-to-rem(32px), + --450: iro.fn-px-to-rem(36px), + --500: iro.fn-px-to-rem(40px), + --550: iro.fn-px-to-rem(44px), + --600: iro.fn-px-to-rem(48px), + --650: iro.fn-px-to-rem(52px), + --700: iro.fn-px-to-rem(56px), + --800: iro.fn-px-to-rem(64px), + --900: iro.fn-px-to-rem(72px), + --1000: iro.fn-px-to-rem(80px), + --1200: iro.fn-px-to-rem(96px), + --1600: iro.fn-px-to-rem(128px), + --2000: iro.fn-px-to-rem(160px), + --2400: iro.fn-px-to-rem(192px), + --2500: iro.fn-px-to-rem(200px), + --2600: iro.fn-px-to-rem(208px), + --2800: iro.fn-px-to-rem(224px), + --3200: iro.fn-px-to-rem(256px), + --3400: iro.fn-px-to-rem(272px), + --3500: iro.fn-px-to-rem(280px), + --3600: iro.fn-px-to-rem(288px), + --3800: iro.fn-px-to-rem(304px), + --4600: iro.fn-px-to-rem(368px), + --5000: iro.fn-px-to-rem(400px), + --6000: iro.fn-px-to-rem(480px), + ), + + --font: ( + --standard: ( + --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), + --line-height: 1.5, + --feature-settings: ('\'ss01\''), + ), + --headline: ( + --family: ('Inter', fn.dim(--font --standard --family, null)), + --line-height: 1.3, + --weight: 800, + --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''), + ), + --mono: ( + --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace), + --line-height: 1.4, + ) + ), + + --font-size: ( + --50: iro.fn-px-to-rem(12px), + --75: iro.fn-px-to-rem(13px), + --100: iro.fn-px-to-rem(14px), + --150: iro.fn-px-to-rem(16px), + --200: iro.fn-px-to-rem(18px), + --300: iro.fn-px-to-rem(20px), + --400: iro.fn-px-to-rem(24px), + --500: iro.fn-px-to-rem(28px), + --600: iro.fn-px-to-rem(32px), + --700: iro.fn-px-to-rem(36px), + --800: iro.fn-px-to-rem(40px), + --900: iro.fn-px-to-rem(45px), + --1000: iro.fn-px-to-rem(50px), + --1100: iro.fn-px-to-rem(60px), + ), + + --border: ( + --thick: 4px, + --medium: 2px, + --thin: 1px, + ), + + --shadow: ( + --x: 0, + --y: 1px, + --blur: 4px, + ), + + --rounding: 4px, + + --key-focus: ( + --outline: fn.dim(--border --thick, null), + --border: fn.dim(--border --medium, null), + --border-offset: fn.dim(--border --medium, null), + ), + + --paragraph: ( + --margin-bs: fn.dim(--size --300, null), + ), + + --heading: ( + --margin-bs: fn.dim(--size --700, null), + --margin-bs-sibling: fn.dim(--size --325, null), + + --xxl: fn.dim(--font-size --300, null), + --xl: fn.dim(--font-size --200, null), + --lg: fn.dim(--font-size --150, null), + --md: fn.dim(--font-size --100, null), + --sm: fn.dim(--font-size --75, null), + --xs: fn.dim(--font-size --50, null), + + --display: ( + --xxl: fn.dim(--font-size --1100, null), + --xl: fn.dim(--font-size --700, null), + --lg: fn.dim(--font-size --300, null), + --md: fn.dim(--font-size --150, null), + --sm: fn.dim(--font-size --75, null), + --xs: fn.dim(--font-size --50, null), + ), + + --display-sm: ( + --xxl: fn.dim(--font-size --900, null), + --xl: fn.dim(--font-size --600, null), + --lg: fn.dim(--font-size --200, null), + --md: fn.dim(--font-size --100, null), + --sm: fn.dim(--font-size --75, null), + --xs: fn.dim(--font-size --50, null), + ) + ), + + --list: ( + --indent: fn.dim(--size --400, null), + --compact-indent: fn.dim(--size --250, null), + ), + ), +)); + +@each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.props-store((), $breakpoint); + } +} + +@include iro.props-store(( + --dims: ( + --heading: ( + --margin-bs: fn.dim(--size --600, null), + ), + + --list: ( + --indent: fn.dim(--size --300), + ), + ) +), 'sm'); + +@include iro.props-store(( + --dims: ( + --heading: ( + --margin-bs: fn.dim(--size --500, null), + ), + + --list: ( + --indent: fn.dim(--size --250), + ), + ) +), 'xs'); + +// + +@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { + @include iro.props-store(( + --colors: ( + #{$palette-name}-static: fn.palette( + $palette, + map.get(config.$static-colors, --contrasts), + 1, + map.get(config.$static-colors, --base), + ), + ), + )); +} + +@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { + $color: list.nth($palette, 1); + $text: list.nth($palette, 2); + + @include iro.props-store(( + --colors: ( + #{$palette-name}-transparent: fn.transparent-palette( + $color, + $text, + map.get(config.$static-colors, --transparents), + ), + ), + )); +} + +@each $theme-name, $theme in config.$themes { + $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); + + @each $palette-name, $palette in map.get($theme, --palettes) { + $base-color: list.nth($palette, 1); + $contrasts: list.nth($palette, 2); + $ranges: list.nth($palette, 3); + + @include iro.props-store(( + --colors: ( + $palette-name: fn.palette( + $base-color, + map.get($theme, --contrasts, $contrasts), + map.get($theme, --ranges, $ranges), + list.nth(map.get($theme, --palettes, --base), 1), + ), + ), + ), $tree); + } + + @each $color, $value in map.get($theme, --constants) { + @include iro.props-store(( + --colors: ( + $color: $value, + ), + ), $tree); + } + + @each $color, $ref in map.get($theme, --semantic) { + $res: (); + + @if meta.type-of($ref) == 'map' { + @each $key, $r in $ref { + $res: map.set($res, $key, fn.color($r)); + } + } @else { + $res: fn.color($ref); + } + + @include iro.props-store(( + --colors: ( + $color: $res, + ), + ), $tree); + } +} + +@each $theme-name, $theme in config.$themes { + $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); + + @include iro.props-store(( + --colors: ( + + ), + ), $tree); +} + +@mixin apply-vars { + :root { + @include iro.props-assign; + + @each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.props-assign($breakpoint); + } + } + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('dark'); + } + } + + @each $theme-name, $theme in config.$themes { + $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); + + @include iro.bem-theme($theme-name) { + @include iro.props-assign(); + @include iro.props-assign($tree, --colors); + } + } +} -- cgit v1.2.3-70-g09d2