summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/scopes
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
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, 495 insertions, 331 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 10e6d81..bc4fd39 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,25 +1,27 @@
1@use 'sass:meta'; 1@use "sass:meta";
2@use 'pkg:iro-sass/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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(props.get(vars.$compact--indent) - props.get(vars.$border-width)); 22 padding-inline-start: calc(
23 props.get(vars.$compact--indent) - props.get(vars.$border-width)
24 );
23 } 25 }
24 } 26 }
25 } 27 }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 63c40b0..117b4a6 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,11 +1,24 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/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(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 6$margin-bs: props.def(
7$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; 7 --s-blockquotes--margin-bs,
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;
8 14
9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; 15$compact--indent: props.def(
16 --s-blockquotes--compact--indent,
17 props.get(core.$list--compact-indent)
18) !default;
10 19
11$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; 20$border-color: props.def(
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 77a3eb1..6c5ba63 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/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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 981ef32..414e0c1 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -1,12 +1,25 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/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(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default; 7$line-height: props.def(
8$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; 8 --s-body--line-height,
9$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; 9 calc(props.get(core.$font--standard--line-height) + 0.1)
10$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; 10) !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;
11 20
12$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; 21$strong--text-color: props.def(
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 db43de0..d931c22 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/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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 329d372..e22421c 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,18 +1,25 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/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(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 11$block--margin-bs: props.def(
12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; 12 --s-code--block--margin-bs,
13 props.get(implicit.$paragraph--margin-bs)
14) !default;
15$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
13 16
14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; 17$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default;
15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; 18$inline--bg: props.def(
19 --s-code--inline--bg,
20 props.get(core.$theme, --base, --200),
21 "color"
22) !default;
16 23
17$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; 24$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default;
18$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; 25$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 c993f5a..852ab5a 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/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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 23623fd..a6a7bbb 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/src/bem'; 3@use "pkg:iro-sass/bem";
4@use 'pkg:iro-sass/src/props'; 4@use "pkg:iro-sass/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,56 +15,62 @@
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(to top, 37 background-image: linear-gradient(
38 transparent .15em, 38 to top,
39 props.get(heading.$bg-color) .15em, 39 transparent 0.15em,
40 props.get(heading.$bg-color) .6em, 40 props.get(heading.$bg-color) 0.15em,
41 transparent .6em); 41 props.get(heading.$bg-color) 0.6em,
42 transparent 0.6em
43 );
42 } 44 }
43 45
44 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { 46 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
47 $feature-settings, $text-transform, $text-color in heading.$sizes
48 {
45 #{map.get($-size-map, $mod)} { 49 #{map.get($-size-map, $mod)} {
46 font-family: props.get($font-family); 50 font-family: props.get($font-family);
47 font-size: props.get($font-size); 51 font-size: props.get($font-size);
48 font-weight: props.get($font-weight); 52 font-weight: props.get($font-weight);
49 font-feature-settings: props.get($feature-settings); 53 font-feature-settings: props.get($feature-settings);
50 line-height: props.get($line-height); 54 line-height: props.get($line-height);
51 color: props.get($text-color); 55 color: props.get($text-color);
52 text-transform: props.get($text-transform); 56 text-transform: props.get($text-transform);
53 letter-spacing: props.get($letter-spacing); 57 letter-spacing: props.get($letter-spacing);
54 } 58 }
55 } 59 }
56 60
57 @include bem.modifier('display') { 61 @include bem.modifier("display") {
58 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { 62 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
63 $feature-settings, $text-transform, $text-color in heading.$display--sizes
64 {
59 #{map.get($-size-map, $mod)} { 65 #{map.get($-size-map, $mod)} {
60 font-family: props.get($font-family); 66 font-family: props.get($font-family);
61 font-size: props.get($font-size); 67 font-size: props.get($font-size);
62 font-weight: props.get($font-weight); 68 font-weight: props.get($font-weight);
63 font-feature-settings: props.get($feature-settings); 69 font-feature-settings: props.get($feature-settings);
64 line-height: props.get($line-height); 70 line-height: props.get($line-height);
65 color: props.get($text-color); 71 color: props.get($text-color);
66 text-transform: props.get($text-transform); 72 text-transform: props.get($text-transform);
67 letter-spacing: props.get($letter-spacing); 73 letter-spacing: props.get($letter-spacing);
68 } 74 }
69 } 75 }
70 } 76 }
@@ -79,10 +85,16 @@
79 } 85 }
80 } 86 }
81 87
82 @include bem.modifier('display') { 88 @include bem.modifier("display") {
83 @each $mod, $value in heading.$sizes { 89 @each $mod, $value in heading.$sizes {
84 #{map.get($-size-map, $mod)} { 90 #{map.get($-size-map, $mod)} {
85 color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color); 91 color: props.get(
92 heading.$static-themes,
93 $theme,
94 --display,
95 --#{$mod},
96 --text-color
97 );
86 } 98 }
87 } 99 }
88 } 100 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 728fd22..f8c575d 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/src/bem'; 5@use "pkg:iro-sass/bem";
6@use 'pkg:iro-sass/src/props'; 6@use "pkg:iro-sass/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,28 +108,27 @@
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
116 button, 115 button,
117 input, 116 input,
118 textarea { 117 textarea {
119 box-sizing: content-box; 118 box-sizing: content-box;
120 padding: 0; 119 padding: 0;
121 margin: 0; 120 margin: 0;
122 font-family: inherit; 121 font-family: inherit;
123 font-size: 1em; 122 font-size: 1em;
124 font-style: inherit; 123 font-style: inherit;
125 font-weight: inherit; 124 font-weight: inherit;
126 line-height: inherit; 125 line-height: inherit;
127 color: currentColor; 126 color: currentColor;
128 text-align: inherit; 127 text-align: inherit;
129 text-transform: inherit; 128 text-transform: inherit;
130 appearance: none; 129 appearance: none;
131 background: none; 130 background: none;
132 border: 0; 131 border: 0;
133 132
134 &::-moz-focus-inner { 133 &::-moz-focus-inner {
135 border: 0; 134 border: 0;
@@ -139,7 +138,7 @@
139 input, 138 input,
140 textarea { 139 textarea {
141 &::placeholder { 140 &::placeholder {
142 color: props.get(core.$theme, --text-mute); 141 color: props.get(core.$theme, --text-mute);
143 opacity: 1; 142 opacity: 1;
144 } 143 }
145 144
@@ -153,15 +152,15 @@
153 } 152 }
154 153
155 hr { 154 hr {
156 block-size: props.get(core.$border-width--thin); 155 block-size: props.get(core.$border-width--thin);
157 margin: 0; 156 margin: 0;
158 background-color: props.get(core.$theme, --border); 157 background-color: props.get(core.$theme, --border);
159 border: 0; 158 border: 0;
160 } 159 }
161 160
162 figure { 161 figure {
163 padding: 0; 162 padding: 0;
164 margin: 0; 163 margin: 0;
165 } 164 }
166 165
167 @each $theme in map.keys(props.get(core.$transparent-colors)) { 166 @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 64d4a8f..f0256b0 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,26 +1,69 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/props";
2@use '../core.vars' as core; 2@use "../core.vars" as core;
3 3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; 4$paragraph--margin-bs: props.def(
5 --s-implicit--paragraph--margin-bs,
6 props.get(core.$size--200)
7) !default;
5 8
6$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; 9$small--font-size: props.def(
10 --s-implicit--small--font-size,
11 props.get(core.$font-size--75)
12) !default;
7 13
8$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; 14$body--font-family: props.def(
9$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; 15 --s-implicit--body--font-family,
10$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); 16 props.get(core.$font--standard--family)
11$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 17) !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;
12 27
13$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; 28$code--font-family: props.def(
14$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; 29 --s-implicit--code--font-family,
15$code--font-size: props.def(--s-implicit--code--font-size, .93em); 30 props.get(core.$font--mono--family)
16$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; 31) !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;
17 41
18$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; 42$heading--margin-bs: props.def(
19$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; 43 --s-implicit--heading--margin-bs,
20$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default; 44 props.get(core.$size--700)
21$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; 45) !default;
22$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; 46$heading--margin-bs-sibling: props.def(
23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); 47 --s-implicit--heading--margin-bs-sibling,
24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 48 props.get(core.$size--325)
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;
25 64
26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default; 65$heading--color: props.def(
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 8498487..fea78f1 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,78 +1,79 @@
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/src/bem'; 4@use "pkg:iro-sass/bem";
5@use 'pkg:iro-sass/src/props'; 5@use "pkg:iro-sass/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 props.get(vars.$key-focus--border-width); 33 outline: props.get(vars.$key-focus--border-color) solid
34 box-shadow: 34 props.get(vars.$key-focus--border-width);
35 0 35 box-shadow: 0 0 0
36 0 36 calc(
37 0 37 props.get(vars.$key-focus--border-width) +
38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 38 props.get(vars.$key-focus--outline-width)
39 )
39 props.get(vars.$key-focus--outline-color); 40 props.get(vars.$key-focus--outline-color);
40 } 41 }
41 } 42 }
42 43
43 @include bem.modifier('invisible') { 44 @include bem.modifier("invisible") {
44 :link, 45 :link,
45 :visited { 46 :visited {
46 text-decoration: none; 47 text-decoration: none;
47 } 48 }
48 } 49 }
49 50
50 @include bem.modifier('colored') { 51 @include bem.modifier("colored") {
51 :link { 52 :link {
52 color: props.get(vars.$colored--text-color); 53 color: props.get(vars.$colored--text-color);
53 text-decoration-color: props.get(vars.$colored--underline-color); 54 text-decoration-color: props.get(vars.$colored--underline-color);
54 55
55 &:hover { 56 &:hover {
56 color: props.get(vars.$colored--hover--text-color); 57 color: props.get(vars.$colored--hover--text-color);
57 } 58 }
58 } 59 }
59 60
60 :visited { 61 :visited {
61 color: props.get(vars.$colored--visited--text-color); 62 color: props.get(vars.$colored--visited--text-color);
62 text-decoration-color: props.get(vars.$colored--visited--underline-color); 63 text-decoration-color: props.get(vars.$colored--visited--underline-color);
63 64
64 &:hover { 65 &:hover {
65 color: props.get(vars.$colored--visited--hover--text-color); 66 color: props.get(vars.$colored--visited--hover--text-color);
66 } 67 }
67 } 68 }
68 } 69 }
69 70
70 @include bem.modifier('mark-external') { 71 @include bem.modifier("mark-external") {
71 :link, 72 :link,
72 :visited { 73 :visited {
73 &[href^='http'] { 74 &[href^="http"] {
74 &::after { 75 &::after {
75 content: ' ↗'; 76 content: " ↗";
76 } 77 }
77 } 78 }
78 } 79 }
@@ -82,21 +83,30 @@
82 @include bem.modifier(string.slice($theme, 3)) { 83 @include bem.modifier(string.slice($theme, 3)) {
83 :link, 84 :link,
84 :visited { 85 :visited {
85 color: props.get(vars.$static-themes, $theme, --text-color); 86 color: props.get(vars.$static-themes, $theme, --text-color);
86 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); 87 text-decoration-color: props.get(
88 vars.$static-themes,
89 $theme,
90 --underline-color
91 );
87 92
88 &:hover { 93 &:hover {
89 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 94 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
90 } 95 }
91 96
92 &:focus-visible { 97 &:focus-visible {
93 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 98 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
94 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); 99 outline-color: props.get(
95 box-shadow: 100 vars.$static-themes,
96 0 101 $theme,
97 0 102 --key-focus,
98 0 103 --border-color
99 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 104 );
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 )
100 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 110 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
101 } 111 }
102 } 112 }
@@ -106,21 +116,26 @@
106 :has(img) { 116 :has(img) {
107 img { 117 img {
108 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 118 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
109 border: props.get(vars.$key-focus--border-offset) solid transparent; 119 border: props.get(vars.$key-focus--border-offset) solid transparent;
110 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 120 border-radius: calc(
121 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
122 );
111 } 123 }
112 124
113 &:link, 125 &:link,
114 &:visited { 126 &:visited {
115 &:focus-visible { 127 &:focus-visible {
116 outline: none; 128 outline: none;
117 box-shadow: none; 129 box-shadow: none;
118 130
119 img { 131 img {
120 outline: props.get(vars.$key-focus--border-color) solid 132 outline: props.get(vars.$key-focus--border-color) solid
121 props.get(vars.$key-focus--border-width); 133 props.get(vars.$key-focus--border-width);
122 box-shadow: 0 0 0 134 box-shadow: 0 0 0
123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 135 calc(
136 props.get(vars.$key-focus--border-width) +
137 props.get(vars.$key-focus--outline-width)
138 )
124 props.get(vars.$key-focus--outline-color); 139 props.get(vars.$key-focus--outline-color);
125 } 140 }
126 } 141 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index cd80e4c..c06789b 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,49 +1,106 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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(--s-links--underline-width, props.get(core.$border-width--thin)) !default; 8$underline-width: props.def(
9$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; 9 --s-links--underline-width,
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;
10 16
11$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 17$key-focus--border-width: props.def(
12$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 18 --s-links--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; 19 props.get(core.$key-focus--border-width)
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;
14 29
15$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; 30$underline-color: props.def(
31 --s-links--underline-color,
32 props.get(core.$theme, --text-mute-more),
33 "color"
34) !default;
16 35
17$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; 36$colored--text-color: props.def(
18$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; 37 --s-links--colored--text-color,
19$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; 38 props.get(core.$theme, --accent, --1100),
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;
20 51
21$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; 52$colored--visited--text-color: props.def(
22$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; 53 --s-links--colored--visited--text-color,
23$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; 54 props.get(core.$theme, --purple, --1100),
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;
24 67
25$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; 68$key-focus--text-color: props.def(
26$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 69 --s-links--key-focus--text-color,
27$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 70 props.get(core.$theme, --focus, --text),
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;
28 83
29$static-themes: props.def(--s-links, (), 'color'); 84$static-themes: props.def(--s-links, (), "color");
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 85@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $link-theme: --static-#{string.slice($theme, 3)}; 86 $link-theme: --static-#{string.slice($theme, 3)};
32 87
33 $static-themes: props.merge($static-themes, ( 88 $static-themes: props.merge(
34 $link-theme: ( 89 $static-themes,
35 --text-color: currentColor, 90 (
36 --underline-color: props.get(core.$transparent-colors, $theme, --500), 91 $link-theme: (
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 ),
37 97
38 --hover: ( 98 --key-focus: (
39 --text-color: props.get(core.$transparent-colors, $theme, --900), 99 --text-color: props.get(core.$transparent-colors, $theme, --900),
40 ), 100 --border-color: props.get(core.$transparent-colors, $theme, --900),
41 101 --outline-color: props.get(core.$transparent-colors, $theme, --300),
42 --key-focus: ( 102 ),
43 --text-color: props.get(core.$transparent-colors, $theme, --900), 103 ),
44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ),
47 ) 104 )
48 )); 105 );
49} 106}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 0285bb0..7b9ddbc 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/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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 e40f194..57fcc54 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,8 +1,11 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/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(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; 8$compact--indent: props.def(
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 cb3a10c..7442874 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/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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 dfb4c76..12d0a0c 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,4 +1,4 @@
1@use 'pkg:iro-sass/src/props'; 1@use "pkg:iro-sass/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 15:23:42 +0000