More colored divider

2 files changed, 45 insertions, 7 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 943ab5f..93b1914 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -35,10 +35,26 @@
                 --bg:    fn.global-color(--obj),
                 --label: fn.global-color(--fg-hi2),
             ),
+            --blue: (
+                --bg:    fn.global-color(--blue --solid --bg),
+                --label: fn.global-color(--blue --solid --obj),
+            ),
+            --purple: (
+                --bg:    fn.global-color(--purple --solid --bg),
+                --label: fn.global-color(--purple --solid --obj),
+            ),
             --red: (
                 --bg:    fn.global-color(--red --solid --bg),
                 --label: fn.global-color(--red --solid --obj),
             ),
+            --green: (
+                --bg:    fn.global-color(--green --solid --bg),
+                --label: fn.global-color(--green --solid --obj),
+            ),
+            --yellow: (
+                --bg:    fn.global-color(--yellow --solid --bg),
+                --label: fn.global-color(--yellow --solid --obj),
+            ),
         ),
     ), 'colors');
 
@@ -135,14 +151,16 @@
                 }
             }
 
-            @include iro.bem-modifier('red') {
-                &::before,
-                &::after {
-                    background-color: fn.color(--red --bg);
-                }
+            @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+                @include iro.bem-modifier($color) {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--#{$color} --bg);
+                    }
 
-                @include iro.bem-elem('label') {
-                    color: fn.color(--red --label);
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--#{$color} --label);
+                    }
                 }
             }
         }
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index af142cf..9d0b2cb 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -21,6 +21,26 @@ mixin view-divider
             +divider('faint')= 'Faint'
 
         .c-box
+            +divider('strong')(color='blue')= 'Strong'
+            +divider('medium')(color='blue')= 'Medium'
+            +divider('faint')(color='blue')= 'Faint'
+
+        .c-box
+            +divider('strong')(color='purple')= 'Strong'
+            +divider('medium')(color='purple')= 'Medium'
+            +divider('faint')(color='purple')= 'Faint'
+
+        .c-box
             +divider('strong')(color='red')= 'Strong'
             +divider('medium')(color='red')= 'Medium'
             +divider('faint')(color='red')= 'Faint'
+
+        .c-box
+            +divider('strong')(color='green')= 'Strong'
+            +divider('medium')(color='green')= 'Medium'
+            +divider('faint')(color='green')= 'Faint'
+
+        .c-box
+            +divider('strong')(color='yellow')= 'Strong'
+            +divider('medium')(color='yellow')= 'Medium'
+            +divider('faint')(color='yellow')= 'Faint'