Add body scope

8 files changed, 54 insertions, 9 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 6088344..5ed32e9 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -34,6 +34,7 @@ $breakpoints: (
 @forward 'layouts/split-view' as l-split-view--*;
 
 @forward 'scopes/implicit' as s-implicit--*;
+@forward 'scopes/body' as s-body--*;
 @forward 'scopes/blockquotes' as s-blockquotes--*;
 @forward 'scopes/code' as s-code--*;
 @forward 'scopes/headings' as s-headings--*;
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 9db1271..5a34957 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,9 +1,9 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './body' as body;
 
 $indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
-$margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(body.$paragraph--margin-bs)) !default;
 $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default;
 
 $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..eb39e8c
--- /dev/null
+++ b/src/scopes/_body.scss
@@ -0,0 +1,35 @@
+@use '@/styles/common' as iro;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+
+@forward 'body.vars';
+@use 'body.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.scope('body') {
+        font-size: props.get(vars.$font-size);
+
+        p {
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+
+        img {
+            display:         block;
+            inline-size:     auto;
+            max-inline-size: 100%;
+            block-size:      auto;
+            max-block-size:  props.get(vars.$img--max-block-size);
+            margin-block:    props.get(vars.$block--margin-b);
+        }
+
+        figure {
+            margin-block: props.get(vars.$block--margin-b);
+
+            img {
+                margin-block: 0;
+            }
+        }
+    } 
+}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
new file mode 100644
index 0000000..98f23bd
--- /dev/null
+++ b/src/scopes/_body.vars.scss
@@ -0,0 +1,9 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+
+$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$block--margin-b:      props.def(--s-body--block--margin-b, calc(2 * props.get($paragraph--margin-bs))) !default;
+
+$img--max-block-size: props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default;
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index c1bf27c..a80cc51 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './body' as body;
 
 $inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
 $inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
@@ -8,7 +8,7 @@ $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$roundin
 
 $block--pad-i:     props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
 $block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
-$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(body.$paragraph--margin-bs)) !default;
 $block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
 
 $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default;
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 0002591..fd47858 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
 
 $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
 
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index c4a0f22..f2511d8 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,8 +1,8 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './body' as body;
 
 $indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
-$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$margin-bs: props.def(--s-lists--margin-bs, props.get(body.$paragraph--margin-bs)) !default;
 
 $compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 362b70f..ded6b80 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,4 +1,4 @@
 @use 'iro-sass/src/props';
-@use 'implicit.vars' as implicit;
+@use 'body.vars' as body;
 
-$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$margin-bs: props.def(--s-tables--margin-bs, props.get(body.$paragraph--margin-bs)) !default;