Replace dark theme with media theme

6 files changed, 50 insertions, 9 deletions

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;
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index e11e4a5..c0d7582 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -17,6 +17,6 @@ mixin action-button
 
     a(class=classes href=href)
         if attributes.icon
-            +icon(attributes.icon)(block=!block)
+            +icon(attributes.icon)
             = ' '
         block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 98d51ad..80273b0 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -9,5 +9,5 @@ mixin icon(id)
             classes[attributes.class] = true;
         }
 
-    svg(class=classes)
+    svg(class=classes width="1.142857143em" height="1.142857143em" aria-hidden="true")
         use(href=href)
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index c1e5054..8169a35 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,7 +1,7 @@
 mixin view-lightbox 
     +view('lightbox', 'Lightbox')
         .c-box
-            +backdrop(class='t-dark')
+            +backdrop(class='t-media')
                 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
@@ -14,7 +14,7 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         .c-box
-            +backdrop(class='t-dark')
+            +backdrop(class='t-media')
                 +lightbox(['avatar.png'])
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")