diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_divider.scss | 58 |
1 files changed, 58 insertions, 0 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 | } |