From b0ccb341c917737bc373d8a7b607ad30acc9c0e4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 7 May 2024 08:29:19 +0200 Subject: Replace dark theme with media theme --- src/_apply-vars.scss | 6 +++--- src/_declare-vars.scss | 32 ++++++++++++++++++++++++++++++++ src/_functions.scss | 13 +++++++++++-- 3 files changed, 46 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 0fbc5e3..689b048 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -19,10 +19,10 @@ } } -@include iro.bem-theme('dark') { +@include iro.bem-theme('media') { @include iro.props-assign('colors'); - @include iro.props-assign('colors-dark'); - @include iro.props-assign('palette-dark'); + @include iro.props-assign('colors-media'); + @include iro.props-assign('palette-media'); } @include iro.bem-theme('def') { diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index eb20836..303da35 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -293,6 +293,38 @@ // +@include iro.props-store(( + --colors: ( + --gray: fn.gray-palette(12%, true), + ), +), 'palette-media'); + +@include iro.props-store(( + --colors: ( + --border: ( + --stable: iro.props-get-static(--colors --gray --5, 'palette-media'), + --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media'), + ), + + --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), + --green: fn.color-palette(blend.lch(78% 50 147), -1), + --yellow: fn.color-palette(blend.lch(88% 50 70), -1), + + --accent: ( + --primary: iro.props-ref('colors-media', --colors --blue), + --error: iro.props-ref('colors-media', --colors --red), + --success: iro.props-ref('colors-media', --colors --green), + --warning: iro.props-ref('colors-media', --colors --yellow), + --link-idle: iro.props-ref('colors-media', --colors --blue), + --link-visited: iro.props-ref('colors-media', --colors --purple), + ), + ) +), 'colors-media'); + +// + @each $breakpoint in map-keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @include iro.props-store(( diff --git a/src/_functions.scss b/src/_functions.scss index 354c5f7..82e8435 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use 'sass:math'; @use 'sass:map'; @use 'iro-sass/src/index' as iro; @@ -104,6 +105,10 @@ @return $result; } +@function gray-to-alpha($color) { + @return rgba(#fff, color.whiteness($color)); +} + @function color-palette($base, $dir: 1) { @return ( --solid: ( @@ -125,7 +130,7 @@ ); } -@function gray-palette($lightness) { +@function gray-palette($lightness, $alpha: false) { $grays: (); @for $i from 0 through 100 { @@ -135,7 +140,11 @@ $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); @each $key, $color in $colors { - $colors: map.set($colors, $key, $color); + @if $alpha { + $colors: map.set($colors, $key, gray-to-alpha($color)); + } @else { + $colors: map.set($colors, $key, $color); + } } @return $colors; -- cgit v1.2.3-70-g09d2