Fixed divider

3 files changed, 61 insertions, 7 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 4ed8092..9b58e77 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -91,6 +91,26 @@
             }
         }
 
+        @include bem.modifier('quiet') {
+            font-size:   props.get(vars.$quiet--label-font-size);
+            font-weight: 500;
+            color:       props.get(vars.$quiet--label-color);
+
+            &::before,
+            &::after {
+                block-size:       props.get(vars.$quiet--border-width);
+                background-color: props.get(vars.$quiet--bg-color);
+            }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$vertical--quiet--bg-color);
+            }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$dot--quiet--bg-color);
+            }
+        }
+
         @include bem.modifier('faint') {
             font-size:   props.get(vars.$faint--label-font-size);
             font-weight: 500;
@@ -103,11 +123,11 @@
             }
 
             @include bem.modifier('vertical') {
-                background-color: props.get(vars.$vertical--faint--bg-color);
+                background-color: props.get(vars.$vertical--quiet--bg-color);
             }
 
             @include bem.modifier('dot') {
-                background-color: props.get(vars.$dot--faint--bg-color);
+                background-color: props.get(vars.$dot--quiet--bg-color);
             }
         }
 
@@ -157,6 +177,17 @@
                     }
                 }
     
+                @include bem.modifier('quiet') {
+                    &::before,
+                    &::after {
+                        background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
+                    }
+    
+                    @include bem.elem('label') {
+                        color: props.get(vars.$static-themes, $theme, --quiet, --label);
+                    }
+                }
+    
                 @include bem.modifier('faint') {
                     &::before,
                     &::after {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 5cd68c1..5a5639b 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -13,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
 $medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
 $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
 
+$quiet--border-width:    props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
+$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
+
 $faint--border-width:    props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
 $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
 
@@ -22,12 +25,15 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
 $medium--bg-color:    props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
 $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
 
-$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
-$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$quiet--bg-color:    props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
+$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
 
-$vertical--faint--bg-color:    props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$vertical--quiet--bg-color:    props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
 
-$dot--faint--bg-color:    props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$dot--quiet--bg-color:    props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
 
 $static-themes: props.def(--o-divider, (), 'color');
 
@@ -44,10 +50,14 @@ $static-themes: props.def(--o-divider, (), 'color');
                 --bg:    props.get(core.$transparent-colors, $theme, --300),
                 --label: props.get(core.$transparent-colors, $theme, --500),
             ),
-            --faint: (
+            --quiet: (
                 --bg:    props.get(core.$transparent-colors, $theme, --300),
                 --label: props.get(core.$transparent-colors, $theme, --500),
             ),
+            --faint: (
+                --bg:    props.get(core.$transparent-colors, $theme, --200),
+                --label: props.get(core.$transparent-colors, $theme, --400),
+            ),
         )
     ));
 }
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index ea08984..5429ab5 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -12,34 +12,45 @@ mixin view-divider
 
         .c-box
             +div-heading('xs')= 'Heading'
+            +divider('quiet')
+            p= loremIpsum
+
+        .c-box
+            +div-heading('xs')= 'Heading'
             +divider('faint')
             p= loremIpsum
 
         .c-box
             +divider('strong')= 'Strong'
             +divider('medium')= 'Medium'
+            +divider('quiet')= 'Quiet'
             +divider('faint')= 'Faint'
             +divider('strong')
             +divider('medium')
+            +divider('quiet')
             +divider('faint')
 
         .c-box
             .l-media(style="height: 1em")
                 +divider('strong')(vertical=true class="l-media__block")
                 +divider('medium')(vertical=true class="l-media__block")
+                +divider('quiet')(vertical=true class="l-media__block")
                 +divider('faint')(vertical=true class="l-media__block")
             .l-media(style="height: 1em")
                 +divider('strong')(dot=true class="l-media__block")
                 +divider('medium')(dot=true class="l-media__block")
+                +divider('quiet')(dot=true class="l-media__block")
                 +divider('faint')(dot=true class="l-media__block")
 
         each theme in ['accent', 'negative']
             .c-box
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                 +divider('faint')(color=theme)= 'Faint'
                 +divider('strong')(color=theme)
                 +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                 +divider('faint')(color=theme)
 
         each theme in ['static-black', 'static-white']
@@ -49,7 +60,9 @@ mixin view-divider
             .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                 +divider('faint')(color=theme)= 'Faint'
                 +divider('strong')(color=theme)
                 +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                 +divider('faint')(color=theme)