Add static divider styles

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 @@
 @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);
+                    }
+                }
+            }
+        }
     }
 }
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
             +divider('medium')
             +divider('faint')
 
-        .c-box
-            +divider('strong')(color='blue')= 'Strong'
-            +divider('medium')(color='blue')= 'Medium'
-            +divider('faint')(color='blue')= 'Faint'
-            +divider('strong')(color='blue')
-            +divider('medium')(color='blue')
-            +divider('faint')(color='blue')
-
-        .c-box
-            +divider('strong')(color='purple')= 'Strong'
-            +divider('medium')(color='purple')= 'Medium'
-            +divider('faint')(color='purple')= 'Faint'
-            +divider('strong')(color='purple')
-            +divider('medium')(color='purple')
-            +divider('faint')(color='purple')
-
-        .c-box
-            +divider('strong')(color='red')= 'Strong'
-            +divider('medium')(color='red')= 'Medium'
-            +divider('faint')(color='red')= 'Faint'
-            +divider('strong')(color='red')
-            +divider('medium')(color='red')
-            +divider('faint')(color='red')
-
-        .c-box
-            +divider('strong')(color='green')= 'Strong'
-            +divider('medium')(color='green')= 'Medium'
-            +divider('faint')(color='green')= 'Faint'
-            +divider('strong')(color='green')
-            +divider('medium')(color='green')
-            +divider('faint')(color='green')
-
-        .c-box
-            +divider('strong')(color='yellow')= 'Strong'
-            +divider('medium')(color='yellow')= 'Medium'
-            +divider('faint')(color='yellow')= 'Faint'
-            +divider('strong')(color='yellow')
-            +divider('medium')(color='yellow')
-            +divider('faint')(color='yellow')
+        each theme in ['blue', 'purple', 'red', 'green', 'yellow']
+            .c-box
+                +divider('strong')(color=theme)= 'Strong'
+                +divider('medium')(color=theme)= 'Medium'
+                +divider('faint')(color=theme)= 'Faint'
+                +divider('strong')(color=theme)
+                +divider('medium')(color=theme)
+                +divider('faint')(color=theme)
+
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +divider('strong')(color=theme)= 'Strong'
+                +divider('medium')(color=theme)= 'Medium'
+                +divider('faint')(color=theme)= 'Faint'
+                +divider('strong')(color=theme)
+                +divider('medium')(color=theme)
+                +divider('faint')(color=theme)