New divider variant: dotHEADmaster

5 files changed, 40 insertions, 25 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;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index 08a3035..981a8b6 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,15 @@
 @use 'sass:meta';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'figures.vars';
-@use 'figures.vars' as vars;
+@use '../objects/figure.vars' as figure;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
     @include bem.scope('figures') {
         figcaption {
-            padding-block:    props.get(vars.$pad-b);
-            font-size:        props.get(vars.$font-size);
-            color:            props.get(vars.$text-color);
-            border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
+            padding-block:    props.get(figure.$pad-b);
+            font-size:        props.get(figure.$font-size);
+            color:            props.get(figure.$text-color);
+            border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
 
             &::before {
                 display:       block;
diff --git a/src/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss
deleted file mode 100644
index 1737078..0000000
--- a/src/scopes/_figures.vars.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
-
-$pad-b:        props.def(--s-figures--pad-b, props.get(core.$size--100)) !default;
-$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
-$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;