summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_divider.scss58
-rw-r--r--tpl/views/divider.pug59
2 files changed, 78 insertions, 39 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 5e80de4..29ab537 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,6 +3,8 @@
3@use '../functions' as fn; 3@use '../functions' as fn;
4@use '../config'; 4@use '../config';
5 5
6$static-themes: 'black' 'white';
7
6@include iro.props-namespace('divider') { 8@include iro.props-namespace('divider') {
7 @include iro.props-store(( 9 @include iro.props-store((
8 --dims: ( 10 --dims: (
@@ -50,6 +52,27 @@
50 } 52 }
51 } 53 }
52 54
55 @each $theme in $static-themes {
56 @include iro.props-store((
57 --colors: (
58 --static-#{$theme}: (
59 --strong: (
60 --bg: fn.global-color(--#{$theme}-transparent --800),
61 --label: fn.global-color(--#{$theme}-transparent --900),
62 ),
63 --medium: (
64 --bg: fn.global-color(--#{$theme}-transparent --300),
65 --label: fn.global-color(--#{$theme}-transparent --500),
66 ),
67 --faint: (
68 --bg: fn.global-color(--#{$theme}-transparent --300),
69 --label: fn.global-color(--#{$theme}-transparent --500),
70 ),
71 )
72 ),
73 ));
74 }
75
53 @include iro.bem-object(iro.props-namespace()) { 76 @include iro.bem-object(iro.props-namespace()) {
54 display: flex; 77 display: flex;
55 flex-direction: row; 78 flex-direction: row;
@@ -140,5 +163,40 @@
140 } 163 }
141 } 164 }
142 } 165 }
166
167 @each $theme in $static-themes {
168 @include iro.bem-modifier(static-#{$theme}) {
169 &::before,
170 &::after {
171 background-color: fn.color(--static-#{$theme} --strong --bg);
172 }
173
174 @include iro.bem-elem('label') {
175 color: fn.color(--static-#{$theme} --strong --label);
176 }
177
178 @include iro.bem-modifier('medium') {
179 &::before,
180 &::after {
181 background-color: fn.color(--static-#{$theme} --medium --bg);
182 }
183
184 @include iro.bem-elem('label') {
185 color: fn.color(--static-#{$theme} --medium --label);
186 }
187 }
188
189 @include iro.bem-modifier('faint') {
190 &::before,
191 &::after {
192 background-color: fn.color(--static-#{$theme} --faint --bg);
193 }
194
195 @include iro.bem-elem('label') {
196 color: fn.color(--static-#{$theme} --faint --label);
197 }
198 }
199 }
200 }
143 } 201 }
144} 202}
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index 43a538c..ee7b372 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -23,42 +23,23 @@ mixin view-divider
23 +divider('medium') 23 +divider('medium')
24 +divider('faint') 24 +divider('faint')
25 25
26 .c-box 26 each theme in ['blue', 'purple', 'red', 'green', 'yellow']
27 +divider('strong')(color='blue')= 'Strong' 27 .c-box
28 +divider('medium')(color='blue')= 'Medium' 28 +divider('strong')(color=theme)= 'Strong'
29 +divider('faint')(color='blue')= 'Faint' 29 +divider('medium')(color=theme)= 'Medium'
30 +divider('strong')(color='blue') 30 +divider('faint')(color=theme)= 'Faint'
31 +divider('medium')(color='blue') 31 +divider('strong')(color=theme)
32 +divider('faint')(color='blue') 32 +divider('medium')(color=theme)
33 33 +divider('faint')(color=theme)
34 .c-box 34
35 +divider('strong')(color='purple')= 'Strong' 35 each theme in ['static-black', 'static-white']
36 +divider('medium')(color='purple')= 'Medium' 36 -
37 +divider('faint')(color='purple')= 'Faint' 37 const bg = theme.startsWith('static-black') ? 500 : 1000;
38 +divider('strong')(color='purple') 38
39 +divider('medium')(color='purple') 39 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
40 +divider('faint')(color='purple') 40 +divider('strong')(color=theme)= 'Strong'
41 41 +divider('medium')(color=theme)= 'Medium'
42 .c-box 42 +divider('faint')(color=theme)= 'Faint'
43 +divider('strong')(color='red')= 'Strong' 43 +divider('strong')(color=theme)
44 +divider('medium')(color='red')= 'Medium' 44 +divider('medium')(color=theme)
45 +divider('faint')(color='red')= 'Faint' 45 +divider('faint')(color=theme)
46 +divider('strong')(color='red')
47 +divider('medium')(color='red')
48 +divider('faint')(color='red')
49
50 .c-box
51 +divider('strong')(color='green')= 'Strong'
52 +divider('medium')(color='green')= 'Medium'
53 +divider('faint')(color='green')= 'Faint'
54 +divider('strong')(color='green')
55 +divider('medium')(color='green')
56 +divider('faint')(color='green')
57
58 .c-box
59 +divider('strong')(color='yellow')= 'Strong'
60 +divider('medium')(color='yellow')= 'Medium'
61 +divider('faint')(color='yellow')= 'Faint'
62 +divider('strong')(color='yellow')
63 +divider('medium')(color='yellow')
64 +divider('faint')(color='yellow')