From 3752b669fd7a848fa3c4db5bbf7d3a38eb322137 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 16 Oct 2024 07:24:13 +0200 Subject: declare-vars -> vars --- src/_declare-vars.scss | 289 ------------------------------------------------- src/_vars.scss | 289 +++++++++++++++++++++++++++++++++++++++++++++++++ src/index.scss | 2 +- src_demo/index.scss | 2 +- 4 files changed, 291 insertions(+), 291 deletions(-) delete mode 100644 src/_declare-vars.scss create mode 100644 src/_vars.scss diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss deleted file mode 100644 index afe1e15..0000000 --- a/src/_declare-vars.scss +++ /dev/null @@ -1,289 +0,0 @@ -@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'); - } - } -} diff --git a/src/_vars.scss b/src/_vars.scss new file mode 100644 index 0000000..afe1e15 --- /dev/null +++ b/src/_vars.scss @@ -0,0 +1,289 @@ +@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'); + } + } +} diff --git a/src/index.scss b/src/index.scss index bae26bc..a8d9c24 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,4 +1,4 @@ -@use 'declare-vars' as vars; +@use 'vars' as vars; @use 'base'; @use 'layouts'; diff --git a/src_demo/index.scss b/src_demo/index.scss index 22472a3..3aed9e7 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss @@ -1,4 +1,4 @@ -@use '../src/declare-vars' as vars; +@use '../src/vars' as vars; @use '../src/base'; @use 'base' as demo-base; -- cgit v1.2.3-70-g09d2