New divider variant: dot

3 files changed, 35 insertions, 5 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 65f1718..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -46,10 +46,24 @@
 
         @include bem.modifier('vertical') {
             align-self:       stretch;
-            inline-size:      1px;
+            inline-size:      props.get(vars.$vertical--border-width);
             block-size:       auto;
             margin-block:     0;
-            background-color: props.get(vars.$faint--bg-color);
+            background-color: props.get(vars.$strong--bg-color);
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        @include bem.modifier('dot') {
+            align-self:       center;
+            inline-size:      props.get(vars.$dot--size);
+            block-size:       props.get(vars.$dot--size);
+            margin-block:     0;
+            background-color: props.get(vars.$strong--bg-color);
+            border-radius:    props.get(vars.$dot--size);
 
             &::before,
             &::after {
@@ -67,6 +81,14 @@
                 block-size:       props.get(vars.$medium--border-width);
                 background-color: props.get(vars.$medium--bg-color);
             }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$medium--bg-color);
+            }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$medium--bg-color);
+            }
         }
 
         @include bem.modifier('faint') {
@@ -83,6 +105,10 @@
             @include bem.modifier('vertical') {
                 background-color: props.get(vars.$vertical--faint--bg-color);
             }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$dot--faint--bg-color);
+            }
         }
 
         @include bem.modifier('labelled') {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 1117fd5..5cd68c1 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -3,7 +3,9 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
+$dot--size:              props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
 
 $strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
 $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
@@ -23,7 +25,9 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core
 $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;
 
-$vertical--faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$vertical--faint--bg-color:    props.def(--o-divider--vertical--faint--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;
 
 $static-themes: props.def(--o-divider, (), 'color');
 
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
index 357c9dd..f86938d 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -6,4 +6,4 @@ $border-width: props.def(--s-figures--border-width, props.get(core.$border-width
 $font-size:    props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
 
 $text-color:   props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default;