summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_apply-vars.scss8
-rw-r--r--src/_declare-vars.scss33
-rw-r--r--src/_functions.scss10
3 files changed, 39 insertions, 12 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 689b048..bee2ff3 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -22,7 +22,13 @@
22@include iro.bem-theme('media') { 22@include iro.bem-theme('media') {
23 @include iro.props-assign('colors'); 23 @include iro.props-assign('colors');
24 @include iro.props-assign('colors-media'); 24 @include iro.props-assign('colors-media');
25 @include iro.props-assign('palette-media'); 25 @include iro.props-assign('palette-media-dark');
26}
27
28@include iro.bem-theme('media-light') {
29 @include iro.props-assign('colors');
30 @include iro.props-assign('colors-media-light');
31 @include iro.props-assign('palette-media-light');
26} 32}
27 33
28@include iro.bem-theme('def') { 34@include iro.bem-theme('def') {
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 303da35..bf7e955 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -295,22 +295,39 @@
295 295
296@include iro.props-store(( 296@include iro.props-store((
297 --colors: ( 297 --colors: (
298 --gray: fn.gray-palette(97%, true),
299 ),
300), 'palette-media-light');
301
302@include iro.props-store((
303 --colors: (
304 --border: (
305 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-light'),
306 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
307 ),
308 )
309), 'colors-media-light');
310
311//
312
313@include iro.props-store((
314 --colors: (
298 --gray: fn.gray-palette(12%, true), 315 --gray: fn.gray-palette(12%, true),
299 ), 316 ),
300), 'palette-media'); 317), 'palette-media-dark');
301 318
302@include iro.props-store(( 319@include iro.props-store((
303 --colors: ( 320 --colors: (
304 --border: ( 321 --border: (
305 --stable: iro.props-get-static(--colors --gray --5, 'palette-media'), 322 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
306 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media'), 323 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'),
307 ), 324 ),
308 325
309 --blue: fn.color-palette(blend.lch(63% 50 279), -1), 326 --blue: iro.props-get-static(--colors --blue, 'colors-dark'),
310 --purple: fn.color-palette(blend.lch(63% 50 308), -1), 327 --purple: iro.props-get-static(--colors --purple, 'colors-dark'),
311 --red: fn.color-palette(blend.lch(63% 50 23), -1), 328 --red: iro.props-get-static(--colors --red, 'colors-dark'),
312 --green: fn.color-palette(blend.lch(78% 50 147), -1), 329 --green: iro.props-get-static(--colors --green, 'colors-dark'),
313 --yellow: fn.color-palette(blend.lch(88% 50 70), -1), 330 --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'),
314 331
315 --accent: ( 332 --accent: (
316 --primary: iro.props-ref('colors-media', --colors --blue), 333 --primary: iro.props-ref('colors-media', --colors --blue),
diff --git a/src/_functions.scss b/src/_functions.scss
index 82e8435..148a28c 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -105,8 +105,12 @@
105 @return $result; 105 @return $result;
106} 106}
107 107
108@function gray-to-alpha($color) { 108@function gray-to-alpha($lightness, $color) {
109 @return rgba(#fff, color.whiteness($color)); 109 @if $lightness >= 50% {
110 @return rgba(#000, color.blackness($color));
111 } @else {
112 @return rgba(#fff, color.whiteness($color));
113 }
110} 114}
111 115
112@function color-palette($base, $dir: 1) { 116@function color-palette($base, $dir: 1) {
@@ -141,7 +145,7 @@
141 145
142 @each $key, $color in $colors { 146 @each $key, $color in $colors {
143 @if $alpha { 147 @if $alpha {
144 $colors: map.set($colors, $key, gray-to-alpha($color)); 148 $colors: map.set($colors, $key, gray-to-alpha($lightness, $color));
145 } @else { 149 } @else {
146 $colors: map.set($colors, $key, $color); 150 $colors: map.set($colors, $key, $color);
147 } 151 }