Add static divider styles

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 @@
 @use '../functions' as fn;
 @use '../config';
 
+$static-themes: 'black' 'white';
+
 @include iro.props-namespace('divider') {
     @include iro.props-store((
         --dims: (
@@ -50,6 +52,27 @@
         }
     }
 
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --strong: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --800),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --medium: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --faint: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                )
+            ),
+        ));
+    }
+
     @include iro.bem-object(iro.props-namespace()) {
         display:        flex;
         flex-direction: row;
@@ -140,5 +163,40 @@
                 }
             }
         }
+
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                &::before,
+                &::after {
+                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--static-#{$theme} --strong --label);
+                }
+
+                @include iro.bem-modifier('medium') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --medium --label);
+                    }
+                }
+    
+                @include iro.bem-modifier('faint') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --faint --label);
+                    }
+                }
+            }
+        }
     }
 }