From 0577b8d19c08e4a0d99b6da615747cf801c9cb97 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 19 Nov 2024 10:19:18 +0100 Subject: Add body scope --- src/_iro-design.scss | 1 + src/scopes/_blockquotes.vars.scss | 4 ++-- src/scopes/_body.scss | 35 +++++++++++++++++++++++++++++++++++ src/scopes/_body.vars.scss | 9 +++++++++ src/scopes/_code.vars.scss | 4 ++-- src/scopes/_implicit.vars.scss | 2 +- src/scopes/_lists.vars.scss | 4 ++-- src/scopes/_tables.vars.scss | 4 ++-- 8 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 src/scopes/_body.scss create mode 100644 src/scopes/_body.vars.scss 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; -- cgit v1.2.3-70-g09d2