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.scss2
-rw-r--r--src/scopes/_body.scss59
-rw-r--r--src/scopes/_body.vars.scss12
-rw-r--r--src/scopes/_code.scss54
-rw-r--r--src/scopes/_code.vars.scss10
-rw-r--r--src/scopes/_figures.scss21
-rw-r--r--src/scopes/_headings.scss112
-rw-r--r--src/scopes/_implicit.scss269
-rw-r--r--src/scopes/_implicit.vars.scss10
-rw-r--r--src/scopes/_links.scss168
-rw-r--r--src/scopes/_links.vars.scss31
-rw-r--r--src/scopes/_lists.scss80
-rw-r--r--src/scopes/_lists.vars.scss2
-rw-r--r--src/scopes/_tables.scss156
15 files changed, 576 insertions, 438 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index d488860..a99add8 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -7,20 +7,20 @@
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); 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(props.get(vars.$compact--indent) - props.get(vars.$border-width));
23 } 23 }
24 } 24 }
25 } 25 }
26} 26}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 9db1271..6aae242 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,6 +1,6 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3@use './implicit' 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(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..f307f58
--- /dev/null
+++ b/src/scopes/_body.scss
@@ -0,0 +1,59 @@
1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5
6@forward 'body.vars';
7@use 'body.vars' as vars;
8
9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars'));
11
12 @include bem.scope('body') {
13 font-size: props.get(vars.$font-size);
14 line-height: props.get(vars.$line-height);
15
16 strong {
17 color: props.get(vars.$strong--text-color);
18 }
19
20 p,
21 ul,
22 ol {
23 max-inline-size: props.get(vars.$paragraph--max-inline-size);
24 margin-block-start: props.get(vars.$paragraph--margin-bs);
25 }
26
27 ul,
28 ol {
29 box-sizing: border-box;
30 }
31
32 img {
33 display: block;
34 inline-size: auto;
35 max-inline-size: 100%;
36 block-size: auto;
37 max-block-size: props.get(vars.$img--max-block-size);
38 margin-block-start: props.get(vars.$paragraph--margin-bs);
39 }
40
41 figure {
42 margin-block-start: props.get(vars.$paragraph--margin-bs);
43
44 img {
45 margin-block: 0;
46 }
47 }
48
49 hr {
50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
51 }
52
53 table,
54 pre,
55 blockquote {
56 margin-block-start: props.get(vars.$paragraph--margin-bs);
57 }
58 }
59}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
new file mode 100644
index 0000000..1de2cfd
--- /dev/null
+++ b/src/scopes/_body.vars.scss
@@ -0,0 +1,12 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4@use '../layouts/container.vars' as container;
5
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;
8$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
9$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
10$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
11
12$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 9b2a63d..8147a14 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -7,34 +7,34 @@
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 }
40} 40}
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index c1bf27c..08472f2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,18 +1,18 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3@use './implicit' 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)) !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(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; 12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
13 13
14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default; 14$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, --red, --200), 'color') !default; 15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
16 16
17$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;
18$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
new file mode 100644
index 0000000..d931820
--- /dev/null
+++ b/src/scopes/_figures.scss
@@ -0,0 +1,21 @@
1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../objects/figure.vars' as figure;
5
6@mixin styles {
7 @include bem.scope('figures') {
8 figcaption {
9 padding-block: props.get(figure.$pad-b);
10 font-size: props.get(figure.$font-size);
11 color: props.get(figure.$text-color);
12 border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
13
14 &::before {
15 display: block;
16 margin-block: -100em 100em;
17 content: '';
18 }
19 }
20 }
21}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 32559cd..f8a7854 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -4,64 +4,64 @@
4@use '../objects/heading.vars' as heading; 4@use '../objects/heading.vars' as heading;
5 5
6@mixin styles { 6@mixin styles {
7 /* stylelint-disable-next-line scss/dollar-variable-pattern */ 7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
8 $-size-map: ( 8 $-size-map: (
9 xs: h6, 9 xs: h6,
10 sm: h5, 10 sm: h5,
11 md: h4, 11 md: h4,
12 lg: h3, 12 lg: h3,
13 xl: h2, 13 xl: h2,
14 xxl: h1, 14 xxl: h1,
15 ); 15 );
16 16
17 @include bem.scope('headings') { 17 @include bem.scope('headings') {
18 h1, 18 h1,
19 h2, 19 h2,
20 h3, 20 h3,
21 h4, 21 h4,
22 h5, 22 h5,
23 h6 { 23 h6 {
24 display: block; 24 display: block;
25 margin-block-start: props.get(heading.$margin-bs); 25 margin-block-start: props.get(heading.$margin-bs);
26 font-family: props.get(heading.$font-family); 26 font-family: props.get(heading.$font-family);
27 font-weight: props.get(heading.$font-weight); 27 font-weight: props.get(heading.$font-weight);
28 font-feature-settings: props.get(heading.$feature-settings); 28 font-feature-settings: props.get(heading.$feature-settings);
29 line-height: props.get(heading.$line-height); 29 line-height: props.get(heading.$line-height);
30 text-transform: none; 30 text-transform: none;
31 letter-spacing: normal; 31 letter-spacing: normal;
32 transform: translateX(props.get(heading.$offset)); 32 transform: translateX(props.get(heading.$offset));
33 } 33 }
34 34
35 @include bem.elem('highlight') { 35 @include bem.elem('highlight') {
36 background-image: linear-gradient(to top, 36 background-image: linear-gradient(to top,
37 transparent .15em, 37 transparent .15em,
38 props.get(heading.$bg-color) .15em, 38 props.get(heading.$bg-color) .15em,
39 props.get(heading.$bg-color) .6em, 39 props.get(heading.$bg-color) .6em,
40 transparent .6em); 40 transparent .6em);
41 } 41 }
42 42
43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
44 #{map.get($-size-map, $mod)} { 44 #{map.get($-size-map, $mod)} {
45 font-family: props.get($font-family); 45 font-family: props.get($font-family);
46 font-size: props.get($font-size); 46 font-size: props.get($font-size);
47 font-weight: props.get($font-weight); 47 font-weight: props.get($font-weight);
48 font-feature-settings: props.get($feature-settings); 48 font-feature-settings: props.get($feature-settings);
49 line-height: props.get($line-height); 49 line-height: props.get($line-height);
50 letter-spacing: props.get($letter-spacing); 50 letter-spacing: props.get($letter-spacing);
51 } 51 }
52 } 52 }
53 53
54 @include bem.modifier('display') { 54 @include bem.modifier('display') {
55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
56 #{map.get($-size-map, $mod)} { 56 #{map.get($-size-map, $mod)} {
57 font-family: props.get($font-family); 57 font-family: props.get($font-family);
58 font-size: props.get($font-size); 58 font-size: props.get($font-size);
59 font-weight: props.get($font-weight); 59 font-weight: props.get($font-weight);
60 font-feature-settings: props.get($feature-settings); 60 font-feature-settings: props.get($feature-settings);
61 line-height: props.get($line-height); 61 line-height: props.get($line-height);
62 letter-spacing: props.get($letter-spacing); 62 letter-spacing: props.get($letter-spacing);
63 } 63 }
64 } 64 }
65 } 65 }
66 } 66 }
67} 67}
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 18791a8..cee1639 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,5 +1,7 @@
1@use 'sass:map';
1@use 'sass:math'; 2@use 'sass:math';
2@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string';
3@use 'iro-sass/src/bem'; 5@use 'iro-sass/src/bem';
4@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
5@use '../props' as *; 7@use '../props' as *;
@@ -9,151 +11,170 @@
9@use 'implicit.vars' as vars; 11@use 'implicit.vars' as vars;
10 12
11@mixin styles { 13@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 14 @include materialize-at-root(meta.module-variables('vars'));
13 15
14 @layer scope { 16 @layer scope {
15 html { 17 html {
16 accent-color: props.get(core.$theme, --accent, --600); 18 accent-color: props.get(core.$theme, --accent, --600);
17 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
18 } 20 }
19 21
20 html, 22 body {
21 body { 23 padding: 0;
22 block-size: 100%; 24 margin: 0;
23 } 25 font-family: props.get(vars.$body--font-family);
26 font-size: props.get(vars.$body--font-size);
27 font-feature-settings: props.get(vars.$body--feature-settings);
28 line-height: props.get(vars.$body--line-height);
29 color: props.get(core.$theme, --text);
30 background-color: props.get(core.$theme, --bg-base);
31 }
24 32
25 body { 33 pre,
26 padding: 0; 34 code {
27 margin: 0; 35 font-family: props.get(vars.$code--font-family);
28 font-family: props.get(vars.$body--font-family); 36 font-size: props.get(vars.$code--font-size);
29 font-size: props.get(vars.$body--font-size); 37 font-feature-settings: props.get(vars.$code--feature-settings);
30 font-feature-settings: props.get(vars.$body--feature-settings); 38 line-height: props.get(vars.$code--line-height);
31 line-height: props.get(vars.$body--line-height); 39 }
32 color: props.get(core.$theme, --text);
33 background-color: props.get(core.$theme, --bg-base);
34 }
35 40
36 pre, 41 pre {
37 code { 42 margin: 0;
38 font-family: props.get(vars.$code--font-family); 43 overflow-x: auto;
39 font-size: props.get(vars.$code--font-size);
40 font-feature-settings: props.get(vars.$code--feature-settings);
41 line-height: props.get(vars.$code--line-height);
42 }
43 44
44 pre { 45 code {
45 margin: 0; 46 font-size: 1em;
46 overflow-x: auto; 47 color: currentColor;
48 }
49 }
47 50
48 code { 51 h1,
49 font-size: 1em; 52 h2,
50 color: currentColor; 53 h3,
51 } 54 h4,
52 } 55 h5,
56 h6 {
57 margin-block: props.get(vars.$heading--margin-bs) 0;
58 font-family: props.get(vars.$heading--font-family);
59 font-size: props.get(vars.$heading--font-size);
60 font-weight: props.get(vars.$heading--font-weight);
61 font-feature-settings: props.get(vars.$heading--feature-settings);
62 line-height: props.get(vars.$heading--line-height);
63 color: props.get(vars.$heading--color);
53 64
54 h1, 65 & + & {
55 h2, 66 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
56 h3, 67 }
57 h4, 68 }
58 h5,
59 h6 {
60 margin-block: props.get(vars.$heading--margin-bs) 0;
61 font-family: props.get(vars.$heading--font-family);
62 font-size: props.get(vars.$heading--font-size);
63 font-weight: props.get(vars.$heading--font-weight);
64 font-feature-settings: props.get(vars.$heading--feature-settings);
65 line-height: props.get(vars.$heading--line-height);
66 color: props.get(vars.$heading--color);
67 69
68 & + & { 70 p {
69 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 71 margin-block: props.get(vars.$paragraph--margin-bs) 0;
70 }
71 }
72 72
73 p { 73 &:empty {
74 margin-block: props.get(vars.$paragraph--margin-bs) 0; 74 display: none;
75 }
76 }
75 77
76 &:empty { 78 strong {
77 display: none; 79 font-weight: bold;
78 } 80 }
79 }
80 81
81 strong { 82 small {
82 font-weight: bold; 83 font-size: props.get(vars.$small--font-size);
83 } 84 }
84 85
85 small { 86 ul,
86 font-size: props.get(vars.$small--font-size); 87 ol {
87 } 88 padding: 0;
89 margin: 0;
90 list-style: none;
91 }
88 92
89 ul, 93 li {
90 ol { 94 padding: 0;
91 padding: 0; 95 margin: 0;
92 margin: 0; 96 }
93 list-style: none;
94 }
95 97
96 li { 98 :focus,
97 padding: 0; 99 :focus-visible {
98 margin: 0; 100 outline: 0;
99 } 101 }
100 102
101 :focus, 103 :link,
102 :focus-visible { 104 :visited {
103 outline: 0; 105 color: currentColor;
104 } 106 text-decoration: none;
107 }
105 108
106 :link,
107 :visited {
108 color: currentColor;
109 text-decoration: none;
110 }
111 109
110 button,
111 input,
112 textarea {
113 box-sizing: content-box;
114 padding: 0;
115 margin: 0;
116 font-family: inherit;
117 font-size: 1em;
118 font-style: inherit;
119 font-weight: inherit;
120 line-height: inherit;
121 color: currentColor;
122 text-align: inherit;
123 text-transform: inherit;
124 appearance: none;
125 background: none;
126 border: 0;
112 127
113 button, 128 &::-moz-focus-inner {
114 input, 129 border: 0;
115 textarea { 130 }
116 box-sizing: content-box; 131 }
117 padding: 0;
118 margin: 0;
119 font-family: inherit;
120 font-size: 1em;
121 font-style: inherit;
122 font-weight: inherit;
123 line-height: inherit;
124 color: currentColor;
125 text-align: inherit;
126 text-transform: inherit;
127 appearance: none;
128 background: none;
129 border: 0;
130 132
131 &::-moz-focus-inner { 133 input,
132 border: 0; 134 textarea {
133 } 135 &::placeholder {
134 } 136 color: props.get(core.$theme, --text-mute);
137 opacity: 1;
138 }
135 139
136 input, 140 &:disabled {
137 textarea { 141 color: props.get(core.$theme, --text-disabled);
138 &::placeholder { 142 }
139 color: props.get(core.$theme, --text-mute); 143 }
140 opacity: 1;
141 }
142 144
143 &:disabled { 145 textarea {
144 color: props.get(core.$theme, --text-disabled); 146 block-size: calc(1em * props.get(core.$font--standard--line-height));
145 } 147 }
146 }
147 148
148 textarea { 149 hr {
149 block-size: calc(1em * props.get(core.$font--standard--line-height)); 150 block-size: props.get(core.$border-width--thin);
150 } 151 margin: 0;
152 background-color: props.get(core.$theme, --border);
153 border: 0;
154 }
151 155
152 hr { 156 figure {
153 block-size: props.get(core.$border-width--thin); 157 padding: 0;
154 margin: 0; 158 margin: 0;
155 background-color: props.get(core.$theme, --border); 159 }
156 border: 0; 160
157 } 161 @each $theme in map.keys(props.get(core.$transparent-colors)) {
158 } 162 .t-static-#{string.slice($theme, 3)} {
163 color: props.get(core.$transparent-colors, $theme, --800);
164
165 h1,
166 h2,
167 h3,
168 h4,
169 h5,
170 h6 {
171 color: props.get(core.$transparent-colors, $theme, --900);
172 }
173
174 hr {
175 color: props.get(core.$transparent-colors, $theme, --400);
176 }
177 }
178 }
179 }
159} 180}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 0002591..388f0af 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,7 +1,7 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/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--300)) !default; 4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
5 5
6$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; 6$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
7 7
@@ -17,10 +17,10 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g
17 17
18$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; 18$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
19$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; 19$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
20$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default; 20$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
21$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; 21$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
22$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; 22$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default;
23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); 23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
25 25
26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color'); 26$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index cff4cc9..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,87 +9,111 @@
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); 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-skip-ink: none; 26 text-decoration-thickness: props.get(vars.$hover--underline-width);
27 text-decoration-thickness: props.get(vars.$hover--underline-width); 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 props.get(vars.$key-focus--border-width);
34 box-shadow: 34 box-shadow:
35 0 35 0
36 0 36 0
37 0 37 0
38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 props.get(vars.$key-focus--outline-color); 39 props.get(vars.$key-focus--outline-color);
40 } 40 }
41 } 41 }
42 42
43 @include bem.modifier('invisible') { 43 @include bem.modifier('invisible') {
44 :link, 44 :link,
45 :visited { 45 :visited {
46 text-decoration: none; 46 text-decoration: none;
47 } 47 }
48 } 48 }
49 49
50 @include bem.modifier('colored') { 50 @include bem.modifier('colored') {
51 :link { 51 :link {
52 color: props.get(vars.$colored--text-color); 52 color: props.get(vars.$colored--text-color);
53 text-decoration-color: props.get(vars.$colored--underline-color); 53 text-decoration-color: props.get(vars.$colored--underline-color);
54 54
55 &:hover { 55 &:hover {
56 color: props.get(vars.$colored--hover--text-color); 56 color: props.get(vars.$colored--hover--text-color);
57 } 57 }
58 } 58 }
59 59
60 :visited { 60 :visited {
61 color: props.get(vars.$colored--visited--text-color); 61 color: props.get(vars.$colored--visited--text-color);
62 text-decoration-color: props.get(vars.$colored--visited--underline-color); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
63 63
64 &:hover { 64 &:hover {
65 color: props.get(vars.$colored--visited--hover--text-color); 65 color: props.get(vars.$colored--visited--hover--text-color);
66 } 66 }
67 } 67 }
68 } 68 }
69 69
70 @each $theme in map.keys(props.get(vars.$static-themes)) { 70 @each $theme in map.keys(props.get(vars.$static-themes)) {
71 @include bem.modifier(string.slice($theme, 3)) { 71 @include bem.modifier(string.slice($theme, 3)) {
72 :link, 72 :link,
73 :visited { 73 :visited {
74 color: props.get(vars.$static-themes, $theme, --text-color); 74 color: props.get(vars.$static-themes, $theme, --text-color);
75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); 75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
76 76
77 &:hover { 77 &:hover {
78 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 78 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
79 } 79 }
80 80
81 &:focus-visible { 81 &:focus-visible {
82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); 83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
84 box-shadow: 84 box-shadow:
85 0 85 0
86 0 86 0
87 0 87 0
88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
90 } 90 }
91 } 91 }
92 } 92 }
93 } 93 }
94 } 94
95 @include bem.elem('image') {
96 img {
97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
98 border: props.get(vars.$key-focus--border-offset) solid transparent;
99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
100 }
101
102 &:link,
103 &:visited {
104 &:focus-visible {
105 outline: none;
106 box-shadow: none;
107
108 img {
109 outline: props.get(vars.$key-focus--border-color) solid
110 props.get(vars.$key-focus--border-width);
111 box-shadow: 0 0 0
112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
113 props.get(vars.$key-focus--outline-color);
114 }
115 }
116 }
117 }
118 }
95} 119}
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 91a73ab..c69cc32 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -4,6 +4,7 @@
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$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; 8$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
8$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; 9$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
9 10
@@ -27,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
27 28
28$static-themes: props.def(--s-links, (), 'color'); 29$static-themes: props.def(--s-links, (), 'color');
29@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
30 $link-theme: --static-#{string.slice($theme, 3)}; 31 $link-theme: --static-#{string.slice($theme, 3)};
31 32
32 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
33 $link-theme: ( 34 $link-theme: (
34 --text-color: props.get(core.$transparent-colors, $theme, --800), 35 --text-color: currentColor,
35 --underline-color: props.get(core.$transparent-colors, $theme, --500), 36 --underline-color: props.get(core.$transparent-colors, $theme, --500),
36 37
37 --hover: ( 38 --hover: (
38 --text-color: props.get(core.$transparent-colors, $theme, --900), 39 --text-color: props.get(core.$transparent-colors, $theme, --900),
39 ), 40 ),
40 41
41 --key-focus: ( 42 --key-focus: (
42 --text-color: props.get(core.$transparent-colors, $theme, --900), 43 --text-color: props.get(core.$transparent-colors, $theme, --900),
43 --border-color: props.get(core.$transparent-colors, $theme, --900), 44 --border-color: props.get(core.$transparent-colors, $theme, --900),
44 --outline-color: props.get(core.$transparent-colors, $theme, --300), 45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
45 ), 46 ),
46 ) 47 )
47 )); 48 ));
48} 49}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 98b1df1..fc8a577 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -8,53 +8,53 @@
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 {
21 margin-block-start: 0; 21 margin-block-start: 0;
22 } 22 }
23 } 23 }
24 24
25 ul { 25 ul {
26 list-style: disc; 26 list-style: disc;
27 } 27 }
28 28
29 ol { 29 ol {
30 list-style: decimal; 30 list-style: decimal;
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);
53 } 53 }
54 54
55 dd { 55 dd {
56 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); 56 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
57 } 57 }
58 } 58 }
59 } 59 }
60} 60}
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index c4a0f22..8c46bc3 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,6 +1,6 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3@use './implicit' 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;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 0a87eaa..5b64301 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -8,95 +8,95 @@
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
41 tr { 41 tr {
42 &:last-child { 42 &:last-child {
43 td { 43 td {
44 border-block-end-width: props.get(table.$border-width); 44 border-block-end-width: props.get(table.$border-width);
45 } 45 }
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 {
53 padding-inline-start: 0; 53 padding-inline-start: 0;
54 } 54 }
55 55
56 &:last-child { 56 &:last-child {
57 padding-inline-end: 0; 57 padding-inline-end: 0;
58 } 58 }
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
66 &:first-child { 66 &:first-child {
67 border-inline-start-width: props.get(table.$border-width); 67 border-inline-start-width: props.get(table.$border-width);
68 } 68 }
69 69
70 &:last-child { 70 &:last-child {
71 border-inline-end-width: props.get(table.$border-width); 71 border-inline-end-width: props.get(table.$border-width);
72 } 72 }
73 } 73 }
74 74
75 tr { 75 tr {
76 &:first-child { 76 &:first-child {
77 td { 77 td {
78 &:first-child { 78 &:first-child {
79 border-start-start-radius: props.get(table.$rounding); 79 border-start-start-radius: props.get(table.$rounding);
80 } 80 }
81 81
82 &:last-child { 82 &:last-child {
83 border-start-end-radius: props.get(table.$rounding); 83 border-start-end-radius: props.get(table.$rounding);
84 } 84 }
85 } 85 }
86 } 86 }
87 87
88 &:last-child { 88 &:last-child {
89 td { 89 td {
90 &:first-child { 90 &:first-child {
91 border-end-start-radius: props.get(table.$rounding); 91 border-end-start-radius: props.get(table.$rounding);
92 } 92 }
93 93
94 &:last-child { 94 &:last-child {
95 border-end-end-radius: props.get(table.$rounding); 95 border-end-end-radius: props.get(table.$rounding);
96 } 96 }
97 } 97 }
98 } 98 }
99 } 99 }
100 } 100 }
101 } 101 }
102} 102}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-17 15:20:08 +0000