diff options
-rw-r--r-- | src/objects/_divider.scss | 58 | ||||
-rw-r--r-- | tpl/views/divider.pug | 59 |
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') | ||