Add red divider

3 files changed, 28 insertions, 3 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 9764ddb..943ab5f 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -35,6 +35,10 @@
                 --bg:    fn.global-color(--obj),
                 --label: fn.global-color(--fg-hi2),
             ),
+            --red: (
+                --bg:    fn.global-color(--red --solid --bg),
+                --label: fn.global-color(--red --solid --obj),
+            ),
         ),
     ), 'colors');
 
@@ -64,6 +68,10 @@
             background-color: fn.color(--faint --bg);
         }
 
+        @include iro.bem-modifier('red') {
+            background-color: fn.color(--red --bg);
+        }
+
         @include iro.bem-modifier('labelled') {
             display:          flex;
             flex-direction:   row;
@@ -126,6 +134,17 @@
                     font-weight: 500;
                 }
             }
+
+            @include iro.bem-modifier('red') {
+                &::before,
+                &::after {
+                    background-color: fn.color(--red --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--red --label);
+                }
+            }
         }
     }
 }
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 094df07..46425cd 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -1,9 +1,10 @@
 mixin divider(level)
     -
         let classes = {
-            'o-divider':             true,
-            'o-divider--labelled':   !!block,
-            ['o-divider--' + level]: true
+            'o-divider':                        true,
+            'o-divider--labelled':              !!block,
+            ['o-divider--' + level]:            true,
+            ['o-divider--' + attributes.color]: !!attributes.color
         }
 
     div(class=classes)&attributes(attributes)
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index 8c3ec0c..af142cf 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -19,3 +19,8 @@ mixin view-divider
             +divider('strong')= 'Strong'
             +divider('medium')= 'Medium'
             +divider('faint')= 'Faint'
+
+        .c-box
+            +divider('strong')(color='red')= 'Strong'
+            +divider('medium')(color='red')= 'Medium'
+            +divider('faint')(color='red')= 'Faint'