Add light media theme

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 @@
 @include iro.bem-theme('media') {
     @include iro.props-assign('colors');
     @include iro.props-assign('colors-media');
-    @include iro.props-assign('palette-media');
+    @include iro.props-assign('palette-media-dark');
+}
+
+@include iro.bem-theme('media-light') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('colors-media-light');
+    @include iro.props-assign('palette-media-light');
 }
 
 @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 @@
 
 @include iro.props-store((
     --colors: (
+        --gray: fn.gray-palette(97%, true),
+    ),
+), 'palette-media-light');
+
+@include iro.props-store((
+    --colors: (
+        --border: (
+            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-light'),
+            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
+        ),
+    )
+), 'colors-media-light');
+
+//
+
+@include iro.props-store((
+    --colors: (
         --gray: fn.gray-palette(12%, true),
     ),
-), 'palette-media');
+), 'palette-media-dark');
 
 @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'),
+            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
+            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-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),
-        --green:  fn.color-palette(blend.lch(78% 50 147), -1),
-        --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
+        --blue:   iro.props-get-static(--colors --blue, 'colors-dark'),
+        --purple: iro.props-get-static(--colors --purple, 'colors-dark'),
+        --red:    iro.props-get-static(--colors --red, 'colors-dark'),
+        --green:  iro.props-get-static(--colors --green, 'colors-dark'),
+        --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'),
 
         --accent: (
             --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 @@
     @return $result;
 }
 
-@function gray-to-alpha($color) {
-    @return rgba(#fff, color.whiteness($color));
+@function gray-to-alpha($lightness, $color) {
+    @if $lightness >= 50% {
+        @return rgba(#000, color.blackness($color));
+    } @else {
+        @return rgba(#fff, color.whiteness($color));
+    }
 }
 
 @function color-palette($base, $dir: 1) {
@@ -141,7 +145,7 @@
 
     @each $key, $color in $colors {
         @if $alpha {
-            $colors: map.set($colors, $key, gray-to-alpha($color));
+            $colors: map.set($colors, $key, gray-to-alpha($lightness, $color));
         } @else {
             $colors: map.set($colors, $key, $color);
         }