summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquotes.scss28
-rw-r--r--src/scopes/_blockquotes.vars.scss29
-rw-r--r--src/scopes/_body.scss26
-rw-r--r--src/scopes/_body.vars.scss31
-rw-r--r--src/scopes/_code.scss46
-rw-r--r--src/scopes/_code.vars.scss33
-rw-r--r--src/scopes/_figures.scss22
-rw-r--r--src/scopes/_headings.scss90
-rw-r--r--src/scopes/_implicit.scss105
-rw-r--r--src/scopes/_implicit.vars.scss83
-rw-r--r--src/scopes/_links.scss109
-rw-r--r--src/scopes/_links.vars.scss129
-rw-r--r--src/scopes/_lists.scss30
-rw-r--r--src/scopes/_lists.vars.scss13
-rw-r--r--src/scopes/_tables.scss48
-rw-r--r--src/scopes/_tables.vars.scss4
16 files changed, 331 insertions, 495 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index bc4fd39..10e6d81 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,27 +1,25 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5 5
6@forward "blockquotes.vars"; 6@forward 'blockquotes.vars';
7@use "blockquotes.vars" as vars; 7@use 'blockquotes.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.scope("blockquotes") { 12 @include bem.scope('blockquotes') {
13 blockquote { 13 blockquote {
14 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); 14 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
15 margin-block: props.get(vars.$margin-bs) 0; 15 margin-block: props.get(vars.$margin-bs) 0;
16 margin-inline: 1px 0; 16 margin-inline: 1px 0;
17 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color);
18 } 18 }
19 19
20 @include bem.modifier("compact") { 20 @include bem.modifier('compact') {
21 blockquote { 21 blockquote {
22 padding-inline-start: calc( 22 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
23 props.get(vars.$compact--indent) - props.get(vars.$border-width)
24 );
25 } 23 }
26 } 24 }
27 } 25 }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 117b4a6..63c40b0 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,24 +1,11 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3@use "./implicit.vars" as implicit; 3@use './implicit.vars' as implicit;
4 4
5$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; 5$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
6$margin-bs: props.def( 6$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
7 --s-blockquotes--margin-bs, 7$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default;
8 props.get(implicit.$paragraph--margin-bs)
9) !default;
10$border-width: props.def(
11 --s-blockquotes--border-width,
12 props.get(core.$border-width--thick)
13) !default;
14 8
15$compact--indent: props.def( 9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
16 --s-blockquotes--compact--indent,
17 props.get(core.$list--compact-indent)
18) !default;
19 10
20$border-color: props.def( 11$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default;
21 --s-blockquotes--border-color,
22 props.get(core.$theme, --border),
23 "color"
24) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 6c5ba63..77a3eb1 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -1,15 +1,15 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5 5
6@forward "body.vars"; 6@forward 'body.vars';
7@use "body.vars" as vars; 7@use 'body.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.scope("body") { 12 @include bem.scope('body') {
13 font-size: props.get(vars.$font-size); 13 font-size: props.get(vars.$font-size);
14 line-height: props.get(vars.$line-height); 14 line-height: props.get(vars.$line-height);
15 15
@@ -30,11 +30,11 @@
30 } 30 }
31 31
32 img { 32 img {
33 display: block; 33 display: block;
34 inline-size: auto; 34 inline-size: auto;
35 max-inline-size: 100%; 35 max-inline-size: 100%;
36 block-size: auto; 36 block-size: auto;
37 max-block-size: props.get(vars.$img--max-block-size); 37 max-block-size: props.get(vars.$img--max-block-size);
38 margin-block-start: props.get(vars.$paragraph--margin-bs); 38 margin-block-start: props.get(vars.$paragraph--margin-bs);
39 } 39 }
40 40
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 414e0c1..981ef32 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -1,25 +1,12 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4@use "../layouts/container.vars" as container; 4@use '../layouts/container.vars' as container;
5 5
6$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; 6$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
7$line-height: props.def( 7$line-height: props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
8 --s-body--line-height, 8$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
9 calc(props.get(core.$font--standard--line-height) + 0.1) 9$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
10) !default; 10$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
11$paragraph--margin-bs: props.def(
12 --s-body--paragraph--margin-bs,
13 props.get(core.$size--300)
14) !default;
15$paragraph--max-inline-size: props.def(
16 --s-body--paragraph--max-inline-size,
17 props.get(container.$fixed)
18) !default;
19$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
20 11
21$strong--text-color: props.def( 12$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
22 --s-body--strong--text-color,
23 props.get(core.$theme, --heading),
24 "color"
25) !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index d931c22..db43de0 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,39 +1,39 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5 5
6@forward "code.vars"; 6@forward 'code.vars';
7@use "code.vars" as vars; 7@use 'code.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.scope("code") { 12 @include bem.scope('code') {
13 code { 13 code {
14 padding-block: props.get(vars.$inline--pad-b); 14 padding-block: props.get(vars.$inline--pad-b);
15 padding-inline: props.get(vars.$inline--pad-i); 15 padding-inline: props.get(vars.$inline--pad-i);
16 color: props.get(vars.$inline--fg); 16 color: props.get(vars.$inline--fg);
17 background-color: props.get(vars.$inline--bg); 17 background-color: props.get(vars.$inline--bg);
18 border-radius: props.get(vars.$inline--rounding); 18 border-radius: props.get(vars.$inline--rounding);
19 } 19 }
20 20
21 pre { 21 pre {
22 padding-block: props.get(vars.$block--pad-b); 22 padding-block: props.get(vars.$block--pad-b);
23 padding-inline: props.get(vars.$block--pad-i); 23 padding-inline: props.get(vars.$block--pad-i);
24 margin-block: props.get(vars.$block--margin-bs) 0; 24 margin-block: props.get(vars.$block--margin-bs) 0;
25 margin-inline: 0; 25 margin-inline: 0;
26 color: props.get(vars.$block--fg); 26 color: props.get(vars.$block--fg);
27 background-color: props.get(vars.$block--bg); 27 background-color: props.get(vars.$block--bg);
28 border-radius: props.get(vars.$block--rounding); 28 border-radius: props.get(vars.$block--rounding);
29 29
30 code { 30 code {
31 display: inline-block; 31 display: inline-block;
32 padding: 0; 32 padding: 0;
33 margin-inline-end: props.get(vars.$block--pad-i); 33 margin-inline-end: props.get(vars.$block--pad-i);
34 color: currentColor; 34 color: currentColor;
35 background-color: transparent; 35 background-color: transparent;
36 border-radius: 0; 36 border-radius: 0;
37 } 37 }
38 } 38 }
39 } 39 }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index e22421c..329d372 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,25 +1,18 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3@use "./implicit.vars" as implicit; 3@use './implicit.vars' as implicit;
4 4
5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; 5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
6$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; 6$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
7$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default; 7$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default;
8 8
9$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; 9$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
10$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; 10$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
11$block--margin-bs: props.def( 11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
12 --s-code--block--margin-bs, 12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
13 props.get(implicit.$paragraph--margin-bs)
14) !default;
15$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
16 13
17$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default; 14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
18$inline--bg: props.def( 15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
19 --s-code--inline--bg,
20 props.get(core.$theme, --base, --200),
21 "color"
22) !default;
23 16
24$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default; 17$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
25$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), "color") !default; 18$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index 852ab5a..c993f5a 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,20 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../objects/figure.vars" as figure; 4@use '../objects/figure.vars' as figure;
5 5
6@mixin styles { 6@mixin styles {
7 @include bem.scope("figures") { 7 @include bem.scope('figures') {
8 figcaption { 8 figcaption {
9 padding-block: props.get(figure.$pad-b); 9 padding-block: props.get(figure.$pad-b);
10 font-size: props.get(figure.$font-size); 10 font-size: props.get(figure.$font-size);
11 color: props.get(figure.$text-color); 11 color: props.get(figure.$text-color);
12 border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); 12 border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
13 13
14 &::before { 14 &::before {
15 display: block; 15 display: block;
16 margin-block: -100em 100em; 16 margin-block: -100em 100em;
17 content: ""; 17 content: '';
18 } 18 }
19 } 19 }
20 } 20 }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index a6a7bbb..23623fd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,8 +1,8 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:string"; 2@use 'sass:string';
3@use "pkg:iro-sass/bem"; 3@use 'pkg:iro-sass/src/bem';
4@use "pkg:iro-sass/props"; 4@use 'pkg:iro-sass/src/props';
5@use "../objects/heading.vars" as heading; 5@use '../objects/heading.vars' as heading;
6 6
7@mixin styles { 7@mixin styles {
8 /* stylelint-disable-next-line scss/dollar-variable-pattern */ 8 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -15,62 +15,56 @@
15 xxl: h1, 15 xxl: h1,
16 ); 16 );
17 17
18 @include bem.scope("headings") { 18 @include bem.scope('headings') {
19 h1, 19 h1,
20 h2, 20 h2,
21 h3, 21 h3,
22 h4, 22 h4,
23 h5, 23 h5,
24 h6 { 24 h6 {
25 display: block; 25 display: block;
26 margin-block-start: props.get(heading.$margin-bs); 26 margin-block-start: props.get(heading.$margin-bs);
27 font-family: props.get(heading.$font-family); 27 font-family: props.get(heading.$font-family);
28 font-weight: props.get(heading.$font-weight); 28 font-weight: props.get(heading.$font-weight);
29 font-feature-settings: props.get(heading.$feature-settings); 29 font-feature-settings: props.get(heading.$feature-settings);
30 line-height: props.get(heading.$line-height); 30 line-height: props.get(heading.$line-height);
31 text-transform: props.get(heading.$text-transform); 31 text-transform: props.get(heading.$text-transform);
32 letter-spacing: normal; 32 letter-spacing: normal;
33 transform: translateX(props.get(heading.$offset)); 33 transform: translateX(props.get(heading.$offset));
34 } 34 }
35 35
36 @include bem.elem("highlight") { 36 @include bem.elem('highlight') {
37 background-image: linear-gradient( 37 background-image: linear-gradient(to top,
38 to top, 38 transparent .15em,
39 transparent 0.15em, 39 props.get(heading.$bg-color) .15em,
40 props.get(heading.$bg-color) 0.15em, 40 props.get(heading.$bg-color) .6em,
41 props.get(heading.$bg-color) 0.6em, 41 transparent .6em);
42 transparent 0.6em
43 );
44 } 42 }
45 43
46 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 44 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes {
47 $feature-settings, $text-transform, $text-color in heading.$sizes
48 {
49 #{map.get($-size-map, $mod)} { 45 #{map.get($-size-map, $mod)} {
50 font-family: props.get($font-family); 46 font-family: props.get($font-family);
51 font-size: props.get($font-size); 47 font-size: props.get($font-size);
52 font-weight: props.get($font-weight); 48 font-weight: props.get($font-weight);
53 font-feature-settings: props.get($feature-settings); 49 font-feature-settings: props.get($feature-settings);
54 line-height: props.get($line-height); 50 line-height: props.get($line-height);
55 color: props.get($text-color); 51 color: props.get($text-color);
56 text-transform: props.get($text-transform); 52 text-transform: props.get($text-transform);
57 letter-spacing: props.get($letter-spacing); 53 letter-spacing: props.get($letter-spacing);
58 } 54 }
59 } 55 }
60 56
61 @include bem.modifier("display") { 57 @include bem.modifier('display') {
62 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 58 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes {
63 $feature-settings, $text-transform, $text-color in heading.$display--sizes
64 {
65 #{map.get($-size-map, $mod)} { 59 #{map.get($-size-map, $mod)} {
66 font-family: props.get($font-family); 60 font-family: props.get($font-family);
67 font-size: props.get($font-size); 61 font-size: props.get($font-size);
68 font-weight: props.get($font-weight); 62 font-weight: props.get($font-weight);
69 font-feature-settings: props.get($feature-settings); 63 font-feature-settings: props.get($feature-settings);
70 line-height: props.get($line-height); 64 line-height: props.get($line-height);
71 color: props.get($text-color); 65 color: props.get($text-color);
72 text-transform: props.get($text-transform); 66 text-transform: props.get($text-transform);
73 letter-spacing: props.get($letter-spacing); 67 letter-spacing: props.get($letter-spacing);
74 } 68 }
75 } 69 }
76 } 70 }
@@ -85,16 +79,10 @@
85 } 79 }
86 } 80 }
87 81
88 @include bem.modifier("display") { 82 @include bem.modifier('display') {
89 @each $mod, $value in heading.$sizes { 83 @each $mod, $value in heading.$sizes {
90 #{map.get($-size-map, $mod)} { 84 #{map.get($-size-map, $mod)} {
91 color: props.get( 85 color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
92 heading.$static-themes,
93 $theme,
94 --display,
95 --#{$mod},
96 --text-color
97 );
98 } 86 }
99 } 87 }
100 } 88 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index f8c575d..728fd22 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,21 +1,21 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:math"; 2@use 'sass:math';
3@use "sass:meta"; 3@use 'sass:meta';
4@use "sass:string"; 4@use 'sass:string';
5@use "pkg:iro-sass/bem"; 5@use 'pkg:iro-sass/src/bem';
6@use "pkg:iro-sass/props"; 6@use 'pkg:iro-sass/src/props';
7@use "../props" as *; 7@use '../props' as *;
8@use "../core.vars" as core; 8@use '../core.vars' as core;
9 9
10@forward "implicit.vars"; 10@forward 'implicit.vars';
11@use "implicit.vars" as vars; 11@use 'implicit.vars' as vars;
12 12
13@mixin styles { 13@mixin styles {
14 @include materialize-at-root(meta.module-variables("vars")); 14 @include materialize-at-root(meta.module-variables('vars'));
15 15
16 @layer scope { 16 @layer scope {
17 html { 17 html {
18 accent-color: props.get(core.$theme, --accent, --600); 18 accent-color: props.get(core.$theme, --accent, --600);
19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
20 20
21 &:has(dialog[open]), 21 &:has(dialog[open]),
@@ -26,31 +26,31 @@
26 } 26 }
27 27
28 body { 28 body {
29 padding: 0; 29 padding: 0;
30 margin: 0; 30 margin: 0;
31 font-family: props.get(vars.$body--font-family); 31 font-family: props.get(vars.$body--font-family);
32 font-size: props.get(vars.$body--font-size); 32 font-size: props.get(vars.$body--font-size);
33 font-feature-settings: props.get(vars.$body--feature-settings); 33 font-feature-settings: props.get(vars.$body--feature-settings);
34 line-height: props.get(vars.$body--line-height); 34 line-height: props.get(vars.$body--line-height);
35 color: props.get(core.$theme, --text); 35 color: props.get(core.$theme, --text);
36 background-color: props.get(core.$theme, --bg-base); 36 background-color: props.get(core.$theme, --bg-base);
37 } 37 }
38 38
39 pre, 39 pre,
40 code { 40 code {
41 font-family: props.get(vars.$code--font-family); 41 font-family: props.get(vars.$code--font-family);
42 font-size: props.get(vars.$code--font-size); 42 font-size: props.get(vars.$code--font-size);
43 font-feature-settings: props.get(vars.$code--feature-settings); 43 font-feature-settings: props.get(vars.$code--feature-settings);
44 line-height: props.get(vars.$code--line-height); 44 line-height: props.get(vars.$code--line-height);
45 } 45 }
46 46
47 pre { 47 pre {
48 margin: 0; 48 margin: 0;
49 overflow-x: auto; 49 overflow-x: auto;
50 50
51 code { 51 code {
52 font-size: 1em; 52 font-size: 1em;
53 color: currentColor; 53 color: currentColor;
54 } 54 }
55 } 55 }
56 56
@@ -60,13 +60,13 @@
60 h4, 60 h4,
61 h5, 61 h5,
62 h6 { 62 h6 {
63 margin-block: props.get(vars.$heading--margin-bs) 0; 63 margin-block: props.get(vars.$heading--margin-bs) 0;
64 font-family: props.get(vars.$heading--font-family); 64 font-family: props.get(vars.$heading--font-family);
65 font-size: props.get(vars.$heading--font-size); 65 font-size: props.get(vars.$heading--font-size);
66 font-weight: props.get(vars.$heading--font-weight); 66 font-weight: props.get(vars.$heading--font-weight);
67 font-feature-settings: props.get(vars.$heading--feature-settings); 67 font-feature-settings: props.get(vars.$heading--feature-settings);
68 line-height: props.get(vars.$heading--line-height); 68 line-height: props.get(vars.$heading--line-height);
69 color: props.get(vars.$heading--color); 69 color: props.get(vars.$heading--color);
70 70
71 & + & { 71 & + & {
72 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 72 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
@@ -91,14 +91,14 @@
91 91
92 ul, 92 ul,
93 ol { 93 ol {
94 padding: 0; 94 padding: 0;
95 margin: 0; 95 margin: 0;
96 list-style: none; 96 list-style: none;
97 } 97 }
98 98
99 li { 99 li {
100 padding: 0; 100 padding: 0;
101 margin: 0; 101 margin: 0;
102 } 102 }
103 103
104 :focus, 104 :focus,
@@ -108,27 +108,28 @@
108 108
109 :link, 109 :link,
110 :visited { 110 :visited {
111 color: currentColor; 111 color: currentColor;
112 text-decoration: none; 112 text-decoration: none;
113 } 113 }
114 114
115
115 button, 116 button,
116 input, 117 input,
117 textarea { 118 textarea {
118 box-sizing: content-box; 119 box-sizing: content-box;
119 padding: 0; 120 padding: 0;
120 margin: 0; 121 margin: 0;
121 font-family: inherit; 122 font-family: inherit;
122 font-size: 1em; 123 font-size: 1em;
123 font-style: inherit; 124 font-style: inherit;
124 font-weight: inherit; 125 font-weight: inherit;
125 line-height: inherit; 126 line-height: inherit;
126 color: currentColor; 127 color: currentColor;
127 text-align: inherit; 128 text-align: inherit;
128 text-transform: inherit; 129 text-transform: inherit;
129 appearance: none; 130 appearance: none;
130 background: none; 131 background: none;
131 border: 0; 132 border: 0;
132 133
133 &::-moz-focus-inner { 134 &::-moz-focus-inner {
134 border: 0; 135 border: 0;
@@ -138,7 +139,7 @@
138 input, 139 input,
139 textarea { 140 textarea {
140 &::placeholder { 141 &::placeholder {
141 color: props.get(core.$theme, --text-mute); 142 color: props.get(core.$theme, --text-mute);
142 opacity: 1; 143 opacity: 1;
143 } 144 }
144 145
@@ -152,15 +153,15 @@
152 } 153 }
153 154
154 hr { 155 hr {
155 block-size: props.get(core.$border-width--thin); 156 block-size: props.get(core.$border-width--thin);
156 margin: 0; 157 margin: 0;
157 background-color: props.get(core.$theme, --border); 158 background-color: props.get(core.$theme, --border);
158 border: 0; 159 border: 0;
159 } 160 }
160 161
161 figure { 162 figure {
162 padding: 0; 163 padding: 0;
163 margin: 0; 164 margin: 0;
164 } 165 }
165 166
166 @each $theme in map.keys(props.get(core.$transparent-colors)) { 167 @each $theme in map.keys(props.get(core.$transparent-colors)) {
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index f0256b0..64d4a8f 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,69 +1,26 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4$paragraph--margin-bs: props.def( 4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
5 --s-implicit--paragraph--margin-bs,
6 props.get(core.$size--200)
7) !default;
8 5
9$small--font-size: props.def( 6$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
10 --s-implicit--small--font-size,
11 props.get(core.$font-size--75)
12) !default;
13 7
14$body--font-family: props.def( 8$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default;
15 --s-implicit--body--font-family, 9$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
16 props.get(core.$font--standard--family) 10$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
17) !default; 11$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
18$body--line-height: props.def(
19 --s-implicit--body--line-height,
20 props.get(core.$font--standard--line-height)
21) !default;
22$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
23$body--feature-settings: props.def(
24 --s-implicit--body--feature-settings,
25 props.get(core.$font--standard--feature-settings)
26) !default;
27 12
28$code--font-family: props.def( 13$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
29 --s-implicit--code--font-family, 14$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
30 props.get(core.$font--mono--family) 15$code--font-size: props.def(--s-implicit--code--font-size, .93em);
31) !default; 16$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
32$code--line-height: props.def(
33 --s-implicit--code--line-height,
34 props.get(core.$font--mono--line-height)
35) !default;
36$code--font-size: props.def(--s-implicit--code--font-size, 0.93em);
37$code--feature-settings: props.def(
38 --s-implicit--code--feature-settings,
39 props.get(core.$font--mono--feature-settings)
40) !default;
41 17
42$heading--margin-bs: props.def( 18$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
43 --s-implicit--heading--margin-bs, 19$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
44 props.get(core.$size--700) 20$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
45) !default; 21$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
46$heading--margin-bs-sibling: props.def( 22$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default;
47 --s-implicit--heading--margin-bs-sibling, 23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
48 props.get(core.$size--325) 24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49) !default;
50$heading--font-family: props.def(
51 --s-implicit--heading--font-family,
52 props.get(core.$font--standard--family)
53) !default;
54$heading--line-height: props.def(
55 --s-implicit--heading--line-height,
56 props.get(core.$font--standard--line-height)
57) !default;
58$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default;
59$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
60$heading--feature-settings: props.def(
61 --s-implicit--heading--feature-settings,
62 props.get(core.$font--standard--feature-settings)
63) !default;
64 25
65$heading--color: props.def( 26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
66 --s-implicit--heading--color,
67 props.get(core.$theme, --heading),
68 "color"
69) !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index fea78f1..8498487 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,79 +1,78 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:meta"; 2@use 'sass:meta';
3@use "sass:string"; 3@use 'sass:string';
4@use "pkg:iro-sass/bem"; 4@use 'pkg:iro-sass/src/bem';
5@use "pkg:iro-sass/props"; 5@use 'pkg:iro-sass/src/props';
6@use "../props" as *; 6@use '../props' as *;
7 7
8@forward "links.vars"; 8@forward 'links.vars';
9@use "links.vars" as vars; 9@use 'links.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables("vars")); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.scope("links") { 14 @include bem.scope('links') {
15 :link, 15 :link,
16 :visited { 16 :visited {
17 color: currentColor; 17 color: currentColor;
18 text-decoration: underline; 18 text-decoration: underline;
19 text-decoration-thickness: props.get(vars.$underline-width); 19 text-decoration-thickness: props.get(vars.$underline-width);
20 text-decoration-color: props.get(vars.$underline-color); 20 text-decoration-color: props.get(vars.$underline-color);
21 border-radius: props.get(vars.$rounding-sm); 21 border-radius: props.get(vars.$rounding-sm);
22 box-decoration-break: clone; 22 box-decoration-break: clone;
23 23
24 &:hover { 24 &:hover {
25 text-decoration: underline; 25 text-decoration: underline;
26 text-decoration-thickness: props.get(vars.$hover--underline-width); 26 text-decoration-thickness: props.get(vars.$hover--underline-width);
27 text-decoration-skip-ink: none; 27 text-decoration-skip-ink: none;
28 } 28 }
29 29
30 &:focus-visible { 30 &:focus-visible {
31 color: props.get(vars.$key-focus--text-color); 31 color: props.get(vars.$key-focus--text-color);
32 text-decoration: none; 32 text-decoration: none;
33 outline: props.get(vars.$key-focus--border-color) solid 33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
34 props.get(vars.$key-focus--border-width); 34 box-shadow:
35 box-shadow: 0 0 0 35 0
36 calc( 36 0
37 props.get(vars.$key-focus--border-width) + 37 0
38 props.get(vars.$key-focus--outline-width) 38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 )
40 props.get(vars.$key-focus--outline-color); 39 props.get(vars.$key-focus--outline-color);
41 } 40 }
42 } 41 }
43 42
44 @include bem.modifier("invisible") { 43 @include bem.modifier('invisible') {
45 :link, 44 :link,
46 :visited { 45 :visited {
47 text-decoration: none; 46 text-decoration: none;
48 } 47 }
49 } 48 }
50 49
51 @include bem.modifier("colored") { 50 @include bem.modifier('colored') {
52 :link { 51 :link {
53 color: props.get(vars.$colored--text-color); 52 color: props.get(vars.$colored--text-color);
54 text-decoration-color: props.get(vars.$colored--underline-color); 53 text-decoration-color: props.get(vars.$colored--underline-color);
55 54
56 &:hover { 55 &:hover {
57 color: props.get(vars.$colored--hover--text-color); 56 color: props.get(vars.$colored--hover--text-color);
58 } 57 }
59 } 58 }
60 59
61 :visited { 60 :visited {
62 color: props.get(vars.$colored--visited--text-color); 61 color: props.get(vars.$colored--visited--text-color);
63 text-decoration-color: props.get(vars.$colored--visited--underline-color); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
64 63
65 &:hover { 64 &:hover {
66 color: props.get(vars.$colored--visited--hover--text-color); 65 color: props.get(vars.$colored--visited--hover--text-color);
67 } 66 }
68 } 67 }
69 } 68 }
70 69
71 @include bem.modifier("mark-external") { 70 @include bem.modifier('mark-external') {
72 :link, 71 :link,
73 :visited { 72 :visited {
74 &[href^="http"] { 73 &[href^='http'] {
75 &::after { 74 &::after {
76 content: " ↗"; 75 content: ' ↗';
77 } 76 }
78 } 77 }
79 } 78 }
@@ -83,30 +82,21 @@
83 @include bem.modifier(string.slice($theme, 3)) { 82 @include bem.modifier(string.slice($theme, 3)) {
84 :link, 83 :link,
85 :visited { 84 :visited {
86 color: props.get(vars.$static-themes, $theme, --text-color); 85 color: props.get(vars.$static-themes, $theme, --text-color);
87 text-decoration-color: props.get( 86 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
88 vars.$static-themes,
89 $theme,
90 --underline-color
91 );
92 87
93 &:hover { 88 &:hover {
94 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 89 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
95 } 90 }
96 91
97 &:focus-visible { 92 &:focus-visible {
98 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 93 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
99 outline-color: props.get( 94 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
100 vars.$static-themes, 95 box-shadow:
101 $theme, 96 0
102 --key-focus, 97 0
103 --border-color 98 0
104 ); 99 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
105 box-shadow: 0 0 0
106 calc(
107 props.get(vars.$key-focus--border-width) +
108 props.get(vars.$key-focus--outline-width)
109 )
110 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 100 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
111 } 101 }
112 } 102 }
@@ -116,26 +106,21 @@
116 :has(img) { 106 :has(img) {
117 img { 107 img {
118 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 108 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
119 border: props.get(vars.$key-focus--border-offset) solid transparent; 109 border: props.get(vars.$key-focus--border-offset) solid transparent;
120 border-radius: calc( 110 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
121 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
122 );
123 } 111 }
124 112
125 &:link, 113 &:link,
126 &:visited { 114 &:visited {
127 &:focus-visible { 115 &:focus-visible {
128 outline: none; 116 outline: none;
129 box-shadow: none; 117 box-shadow: none;
130 118
131 img { 119 img {
132 outline: props.get(vars.$key-focus--border-color) solid 120 outline: props.get(vars.$key-focus--border-color) solid
133 props.get(vars.$key-focus--border-width); 121 props.get(vars.$key-focus--border-width);
134 box-shadow: 0 0 0 122 box-shadow: 0 0 0
135 calc( 123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
136 props.get(vars.$key-focus--border-width) +
137 props.get(vars.$key-focus--outline-width)
138 )
139 props.get(vars.$key-focus--outline-color); 124 props.get(vars.$key-focus--outline-color);
140 } 125 }
141 } 126 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index c06789b..cd80e4c 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,106 +1,49 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:string"; 2@use 'sass:string';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../core.vars" as core; 4@use '../core.vars' as core;
5 5
6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; 6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
7$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; 7$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
8$underline-width: props.def( 8$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
9 --s-links--underline-width, 9$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
10 props.get(core.$border-width--thin)
11) !default;
12$hover--underline-width: props.def(
13 --s-links--hover--underline-width,
14 props.get(core.$border-width--medium)
15) !default;
16 10
17$key-focus--border-width: props.def( 11$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
18 --s-links--key-focus--border-width, 12$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
19 props.get(core.$key-focus--border-width) 13$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
20) !default;
21$key-focus--border-offset: props.def(
22 --s-links--key-focus--border-offset,
23 props.get(core.$key-focus--border-offset)
24) !default;
25$key-focus--outline-width: props.def(
26 --s-links--key-focus--outline-width,
27 props.get(core.$key-focus--outline-width)
28) !default;
29 14
30$underline-color: props.def( 15$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
31 --s-links--underline-color,
32 props.get(core.$theme, --text-mute-more),
33 "color"
34) !default;
35 16
36$colored--text-color: props.def( 17$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
37 --s-links--colored--text-color, 18$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
38 props.get(core.$theme, --accent, --1100), 19$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
39 "color"
40) !default;
41$colored--underline-color: props.def(
42 --s-links--colored--underline-color,
43 props.get(core.$theme, --accent, --600),
44 "color"
45) !default;
46$colored--hover--text-color: props.def(
47 --s-links--colored--hover--text-color,
48 props.get(core.$theme, --accent, --1300),
49 "color"
50) !default;
51 20
52$colored--visited--text-color: props.def( 21$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
53 --s-links--colored--visited--text-color, 22$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
54 props.get(core.$theme, --purple, --1100), 23$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
55 "color"
56) !default;
57$colored--visited--underline-color: props.def(
58 --s-links--colored--visited--underline-color,
59 props.get(core.$theme, --purple, --600),
60 "color"
61) !default;
62$colored--visited--hover--text-color: props.def(
63 --s-links--colored--visited--hover--text-color,
64 props.get(core.$theme, --purple, --1300),
65 "color"
66) !default;
67 24
68$key-focus--text-color: props.def( 25$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
69 --s-links--key-focus--text-color, 26$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
70 props.get(core.$theme, --focus, --text), 27$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
71 "color"
72) !default;
73$key-focus--border-color: props.def(
74 --s-links--key-focus--border-color,
75 props.get(core.$theme, --focus, --border),
76 "color"
77) !default;
78$key-focus--outline-color: props.def(
79 --s-links--key-focus--outline-color,
80 props.get(core.$theme, --focus, --outline),
81 "color"
82) !default;
83 28
84$static-themes: props.def(--s-links, (), "color"); 29$static-themes: props.def(--s-links, (), 'color');
85@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
86 $link-theme: --static-#{string.slice($theme, 3)}; 31 $link-theme: --static-#{string.slice($theme, 3)};
87 32
88 $static-themes: props.merge( 33 $static-themes: props.merge($static-themes, (
89 $static-themes, 34 $link-theme: (
90 ( 35 --text-color: currentColor,
91 $link-theme: ( 36 --underline-color: props.get(core.$transparent-colors, $theme, --500),
92 --text-color: currentColor,
93 --underline-color: props.get(core.$transparent-colors, $theme, --500),
94 --hover: (
95 --text-color: props.get(core.$transparent-colors, $theme, --900),
96 ),
97 37
98 --key-focus: ( 38 --hover: (
99 --text-color: props.get(core.$transparent-colors, $theme, --900), 39 --text-color: props.get(core.$transparent-colors, $theme, --900),
100 --border-color: props.get(core.$transparent-colors, $theme, --900), 40 ),
101 --outline-color: props.get(core.$transparent-colors, $theme, --300), 41
102 ), 42 --key-focus: (
103 ), 43 --text-color: props.get(core.$transparent-colors, $theme, --900),
44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ),
104 ) 47 )
105 ); 48 ));
106} 49}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 7b9ddbc..0285bb0 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,20 +1,20 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5@use "../core.vars" as core; 5@use '../core.vars' as core;
6 6
7@forward "lists.vars"; 7@forward 'lists.vars';
8@use "lists.vars" as vars; 8@use 'lists.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables("vars")); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.scope("lists") { 13 @include bem.scope('lists') {
14 ul, 14 ul,
15 ol { 15 ol {
16 padding-inline-start: props.get(vars.$indent); 16 padding-inline-start: props.get(vars.$indent);
17 margin-block-start: props.get(vars.$margin-bs); 17 margin-block-start: props.get(vars.$margin-bs);
18 18
19 ul, 19 ul,
20 ol { 20 ol {
@@ -31,22 +31,22 @@
31 } 31 }
32 32
33 dl { 33 dl {
34 padding: 0; 34 padding: 0;
35 margin-block: props.get(vars.$margin-bs) 0; 35 margin-block: props.get(vars.$margin-bs) 0;
36 margin-inline: 0; 36 margin-inline: 0;
37 } 37 }
38 38
39 dt { 39 dt {
40 font-weight: bold; 40 font-weight: bold;
41 color: props.get(core.$theme, --heading); 41 color: props.get(core.$theme, --heading);
42 } 42 }
43 43
44 dd { 44 dd {
45 margin-block: 0; 45 margin-block: 0;
46 margin-inline: props.get(vars.$indent) 0; 46 margin-inline: props.get(vars.$indent) 0;
47 } 47 }
48 48
49 @include bem.modifier("compact") { 49 @include bem.modifier('compact') {
50 ul, 50 ul,
51 ol { 51 ol {
52 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); 52 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index 57fcc54..e40f194 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,11 +1,8 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3@use "./implicit.vars" as implicit; 3@use './implicit.vars' as implicit;
4 4
5$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; 5$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
6$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 6$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
7 7
8$compact--indent: props.def( 8$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
9 --s-lists--compact--indent,
10 props.get(core.$list--compact-indent)
11) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 7442874..cb3a10c 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,40 +1,40 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5@use "../objects/table.vars" as table; 5@use '../objects/table.vars' as table;
6 6
7@forward "tables.vars"; 7@forward 'tables.vars';
8@use "tables.vars" as vars; 8@use 'tables.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables("vars")); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.scope("tables") { 13 @include bem.scope('tables') {
14 table { 14 table {
15 margin-block-start: props.get(vars.$margin-bs); 15 margin-block-start: props.get(vars.$margin-bs);
16 border-spacing: 0; 16 border-spacing: 0;
17 border-collapse: separate; 17 border-collapse: separate;
18 } 18 }
19 19
20 th { 20 th {
21 padding-block: props.get(table.$pad-b); 21 padding-block: props.get(table.$pad-b);
22 padding-inline: props.get(table.$pad-i); 22 padding-inline: props.get(table.$pad-i);
23 font-family: props.get(table.$heading--font-family); 23 font-family: props.get(table.$heading--font-family);
24 font-size: props.get(table.$heading--font-size); 24 font-size: props.get(table.$heading--font-size);
25 font-weight: props.get(table.$heading--font-weight); 25 font-weight: props.get(table.$heading--font-weight);
26 color: props.get(table.$heading-color); 26 color: props.get(table.$heading-color);
27 text-align: start; 27 text-align: start;
28 text-transform: props.get(table.$heading--text-transform); 28 text-transform: props.get(table.$heading--text-transform);
29 letter-spacing: props.get(table.$heading--letter-spacing); 29 letter-spacing: props.get(table.$heading--letter-spacing);
30 } 30 }
31 31
32 td { 32 td {
33 padding-block: props.get(table.$pad-b); 33 padding-block: props.get(table.$pad-b);
34 padding-inline: props.get(table.$pad-i); 34 padding-inline: props.get(table.$pad-i);
35 border-color: props.get(table.$border-color); 35 border-color: props.get(table.$border-color);
36 border-style: solid; 36 border-style: solid;
37 border-width: 0; 37 border-width: 0;
38 border-block-start-width: props.get(table.$border-width); 38 border-block-start-width: props.get(table.$border-width);
39 } 39 }
40 40
@@ -46,7 +46,7 @@
46 } 46 }
47 } 47 }
48 48
49 @include bem.modifier("flush") { 49 @include bem.modifier('flush') {
50 th, 50 th,
51 td { 51 td {
52 &:first-child { 52 &:first-child {
@@ -59,7 +59,7 @@
59 } 59 }
60 } 60 }
61 61
62 @include bem.modifier("box") { 62 @include bem.modifier('box') {
63 td { 63 td {
64 background-color: props.get(table.$box--bg-color); 64 background-color: props.get(table.$box--bg-color);
65 65
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 12d0a0c..dfb4c76 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,4 +1,4 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "implicit.vars" as implicit; 2@use 'implicit.vars' as implicit;
3 3
4$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 4$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 20:05:32 +0000