From 0c7379a655825ed338ed210c73a636290ace7f7b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 29 Mar 2022 09:04:45 +0200 Subject: Added global border color --- src/_declare-vars.scss | 57 +++++++++++++++++++++++++----------------------- src/_functions.scss | 2 +- src/_utils.scss | 2 +- src/objects/_dialog.scss | 2 +- 4 files changed, 33 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 89d10fe..fedb72f 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -99,6 +99,24 @@ // +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(100%), + ), +), 'palette-light-hi'); + +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(96%), + ), +), 'palette-light'); + +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(92%), + ), +), 'palette-light-lo'); + @include iro.props-store(( --colors: ( --bg-hi2: fn.color(--gray --1, null), // Lightest background @@ -115,7 +133,8 @@ --fg: fn.color(--gray --10, null), // Text --fg-lo: fn.color(--gray --11, null), // Strong text - --gray: ( --h: 220, --s: 0% ), + --border: iro.props-get-static(--colors --gray --5, 'palette-light'), + --blue: fn.color-palette(blend.lch(48% 50 279)), --purple: fn.color-palette(blend.lch(48% 50 308)), --red: fn.color-palette(blend.lch(48% 50 23)), @@ -146,28 +165,30 @@ ), ), 'colors'); +// + @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(100%), + --gray: fn.gray-palette(5%), ), -), 'palette-light-hi'); +), 'palette-dark-hi'); @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(96%), + --gray: fn.gray-palette(9%), ), -), 'palette-light'); +), 'palette-dark'); @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(92%), + --gray: fn.gray-palette(13%), ), -), 'palette-light-lo'); - -// +), 'palette-dark-lo'); @include iro.props-store(( --colors: ( + --border: iro.props-get-static(--colors --gray --5, 'palette-dark'), + --blue: fn.color-palette(blend.lch(63% 50 279), -1), --purple: fn.color-palette(blend.lch(63% 50 308), -1), --red: fn.color-palette(blend.lch(63% 50 23), -1), @@ -185,24 +206,6 @@ ) ), 'colors-dark'); -@include iro.props-store(( - --colors: ( - --gray: fn.gray-palette(5%), - ), -), 'palette-dark-hi'); - -@include iro.props-store(( - --colors: ( - --gray: fn.gray-palette(9%), - ), -), 'palette-dark'); - -@include iro.props-store(( - --colors: ( - --gray: fn.gray-palette(13%), - ), -), 'palette-dark-lo'); - // @each $breakpoint in map-keys(media.$breakpoints) { diff --git a/src/_functions.scss b/src/_functions.scss index 5a30a88..7b43d95 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -125,7 +125,7 @@ $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); @each $key, $color in $colors { - $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color))); + $colors: map.set($colors, $key, $color); } @return $colors; diff --git a/src/_utils.scss b/src/_utils.scss index 4aea27c..7981125 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -123,6 +123,6 @@ $dirs: ( } @include iro.bem-utility('b#{$dir}-1') { - border#{$suffix}: 1px solid fn.global-color(--obj); + border#{$suffix}: 1px solid fn.global-color(--border); } } diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index ac77a66..7c9fb57 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -37,7 +37,7 @@ @include iro.props-store(( --colors: ( --outer-border: rgba(#000, .2), - --inner-border: fn.global-color(--obj), + --inner-border: fn.global-color(--border), --shadow: 0 .2em .5em rgba(#000, .2), ), ), 'colors'); -- cgit v1.2.3-54-g00ecf