summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_apply-vars.scss6
-rw-r--r--src/_declare-vars.scss32
-rw-r--r--src/_functions.scss13
-rw-r--r--tpl/objects/action-button.pug2
-rw-r--r--tpl/objects/icon.pug2
-rw-r--r--tpl/views/lightbox.pug4
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 @@
19 } 19 }
20} 20}
21 21
22@include iro.bem-theme('dark') { 22@include iro.bem-theme('media') {
23 @include iro.props-assign('colors'); 23 @include iro.props-assign('colors');
24 @include iro.props-assign('colors-dark'); 24 @include iro.props-assign('colors-media');
25 @include iro.props-assign('palette-dark'); 25 @include iro.props-assign('palette-media');
26} 26}
27 27
28@include iro.bem-theme('def') { 28@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 @@
293 293
294// 294//
295 295
296@include iro.props-store((
297 --colors: (
298 --gray: fn.gray-palette(12%, true),
299 ),
300), 'palette-media');
301
302@include iro.props-store((
303 --colors: (
304 --border: (
305 --stable: iro.props-get-static(--colors --gray --5, 'palette-media'),
306 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media'),
307 ),
308
309 --blue: fn.color-palette(blend.lch(63% 50 279), -1),
310 --purple: fn.color-palette(blend.lch(63% 50 308), -1),
311 --red: fn.color-palette(blend.lch(63% 50 23), -1),
312 --green: fn.color-palette(blend.lch(78% 50 147), -1),
313 --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
314
315 --accent: (
316 --primary: iro.props-ref('colors-media', --colors --blue),
317 --error: iro.props-ref('colors-media', --colors --red),
318 --success: iro.props-ref('colors-media', --colors --green),
319 --warning: iro.props-ref('colors-media', --colors --yellow),
320 --link-idle: iro.props-ref('colors-media', --colors --blue),
321 --link-visited: iro.props-ref('colors-media', --colors --purple),
322 ),
323 )
324), 'colors-media');
325
326//
327
296@each $breakpoint in map-keys(media.$breakpoints) { 328@each $breakpoint in map-keys(media.$breakpoints) {
297 @include media.media('<=#{$breakpoint}') { 329 @include media.media('<=#{$breakpoint}') {
298 @include iro.props-store(( 330 @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 @@
1@use 'sass:color';
1@use 'sass:math'; 2@use 'sass:math';
2@use 'sass:map'; 3@use 'sass:map';
3@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
@@ -104,6 +105,10 @@
104 @return $result; 105 @return $result;
105} 106}
106 107
108@function gray-to-alpha($color) {
109 @return rgba(#fff, color.whiteness($color));
110}
111
107@function color-palette($base, $dir: 1) { 112@function color-palette($base, $dir: 1) {
108 @return ( 113 @return (
109 --solid: ( 114 --solid: (
@@ -125,7 +130,7 @@
125 ); 130 );
126} 131}
127 132
128@function gray-palette($lightness) { 133@function gray-palette($lightness, $alpha: false) {
129 $grays: (); 134 $grays: ();
130 135
131 @for $i from 0 through 100 { 136 @for $i from 0 through 100 {
@@ -135,7 +140,11 @@
135 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); 140 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
136 141
137 @each $key, $color in $colors { 142 @each $key, $color in $colors {
138 $colors: map.set($colors, $key, $color); 143 @if $alpha {
144 $colors: map.set($colors, $key, gray-to-alpha($color));
145 } @else {
146 $colors: map.set($colors, $key, $color);
147 }
139 } 148 }
140 149
141 @return $colors; 150 @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
17 17
18 a(class=classes href=href) 18 a(class=classes href=href)
19 if attributes.icon 19 if attributes.icon
20 +icon(attributes.icon)(block=!block) 20 +icon(attributes.icon)
21 = ' ' 21 = ' '
22 block 22 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)
9 classes[attributes.class] = true; 9 classes[attributes.class] = true;
10 } 10 }
11 11
12 svg(class=classes) 12 svg(class=classes width="1.142857143em" height="1.142857143em" aria-hidden="true")
13 use(href=href) 13 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 @@
1mixin view-lightbox 1mixin view-lightbox
2 +view('lightbox', 'Lightbox') 2 +view('lightbox', 'Lightbox')
3 .c-box 3 .c-box
4 +backdrop(class='t-dark') 4 +backdrop(class='t-media')
5 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) 5 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
6 = "Let's try multiple links! " 6 = "Let's try multiple links! "
7 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 7 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
@@ -14,7 +14,7 @@ mixin view-lightbox
14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
15 15
16 .c-box 16 .c-box
17 +backdrop(class='t-dark') 17 +backdrop(class='t-media')
18 +lightbox(['avatar.png']) 18 +lightbox(['avatar.png'])
19 = "Let's try multiple links! " 19 = "Let's try multiple links! "
20 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 20 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")