Fixed divider

2 files changed, 48 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),
+            ),
         )
     ));
 }