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/_body.scss79
-rw-r--r--src/scopes/_body.vars.scss3
-rw-r--r--src/scopes/_code.scss54
-rw-r--r--src/scopes/_code.vars.scss4
-rw-r--r--src/scopes/_figures.scss27
-rw-r--r--src/scopes/_figures.vars.scss10
-rw-r--r--src/scopes/_headings.scss112
-rw-r--r--src/scopes/_implicit.scss269
-rw-r--r--src/scopes/_links.scss186
-rw-r--r--src/scopes/_links.vars.scss31
-rw-r--r--src/scopes/_lists.scss80
-rw-r--r--src/scopes/_tables.scss156
13 files changed, 527 insertions, 512 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 91a7785..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) 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(props.get(vars.$compact--indent) - props.get(vars.$border-width));
23 } 23 }
24 } 24 }
25 } 25 }
26} 26}
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 65c6d2f..f307f58 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -7,52 +7,53 @@
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 15
15 strong { 16 strong {
16 color: props.get(vars.$strong--text-color); 17 color: props.get(vars.$strong--text-color);
17 } 18 }
18 19
19 p, 20 p,
20 ul, 21 ul,
21 ol { 22 ol {
22 max-inline-size: props.get(vars.$paragraph--max-inline-size); 23 max-inline-size: props.get(vars.$paragraph--max-inline-size);
23 margin-block-start: props.get(vars.$paragraph--margin-bs); 24 margin-block-start: props.get(vars.$paragraph--margin-bs);
24 } 25 }
25 26
26 ul, 27 ul,
27 ol { 28 ol {
28 box-sizing: border-box; 29 box-sizing: border-box;
29 } 30 }
30 31
31 img { 32 img {
32 display: block; 33 display: block;
33 inline-size: auto; 34 inline-size: auto;
34 max-inline-size: 100%; 35 max-inline-size: 100%;
35 block-size: auto; 36 block-size: auto;
36 max-block-size: props.get(vars.$img--max-block-size); 37 max-block-size: props.get(vars.$img--max-block-size);
37 margin-block-start: props.get(vars.$paragraph--margin-bs); 38 margin-block-start: props.get(vars.$paragraph--margin-bs);
38 } 39 }
39 40
40 figure { 41 figure {
41 margin-block-start: props.get(vars.$paragraph--margin-bs); 42 margin-block-start: props.get(vars.$paragraph--margin-bs);
42 43
43 img { 44 img {
44 margin-block: 0; 45 margin-block: 0;
45 } 46 }
46 } 47 }
47 48
48 hr { 49 hr {
49 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); 50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
50 } 51 }
51 52
52 table, 53 table,
53 pre, 54 pre,
54 blockquote { 55 blockquote {
55 margin-block-start: props.get(vars.$paragraph--margin-bs); 56 margin-block-start: props.get(vars.$paragraph--margin-bs);
56 } 57 }
57 } 58 }
58} 59}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 6c38c3f..1de2cfd 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -4,8 +4,9 @@
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$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; 8$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
8$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; 9$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
9$img--max-block-size: props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default; 10$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
10 11
11$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; 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 8a040c2..08472f2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -4,12 +4,12 @@
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, --heading), '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, --base, --200), 'color') !default; 15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index f619506..d931820 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,21 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../objects/figure.vars' as figure;
5
6@forward 'figures.vars';
7@use 'figures.vars' as vars;
8 5
9@mixin styles { 6@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 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);
11 13
12 @include bem.scope('figures') { 14 &::before {
13 figcaption { 15 display: block;
14 padding-block: props.get(vars.$pad-b); 16 margin-block: -100em 100em;
15 font-size: props.get(vars.$font-size); 17 content: '';
16 color: props.get(vars.$text-color); 18 }
17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); 19 }
18 } 20 }
19 }
20} 21}
diff --git a/src/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss
deleted file mode 100644
index 67c8cd5..0000000
--- a/src/scopes/_figures.vars.scss
+++ /dev/null
@@ -1,10 +0,0 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3@use './implicit.vars' as implicit;
4
5$pad-b: props.def(--s-figures--pad-b, props.get(core.$size--100)) !default;
6$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
7$font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
8
9$text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute), 'color') !default;
10$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default;
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 020e311..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 body { 22 body {
21 padding: 0; 23 padding: 0;
22 margin: 0; 24 margin: 0;
23 font-family: props.get(vars.$body--font-family); 25 font-family: props.get(vars.$body--font-family);
24 font-size: props.get(vars.$body--font-size); 26 font-size: props.get(vars.$body--font-size);
25 font-feature-settings: props.get(vars.$body--feature-settings); 27 font-feature-settings: props.get(vars.$body--feature-settings);
26 line-height: props.get(vars.$body--line-height); 28 line-height: props.get(vars.$body--line-height);
27 color: props.get(core.$theme, --text); 29 color: props.get(core.$theme, --text);
28 background-color: props.get(core.$theme, --bg-base); 30 background-color: props.get(core.$theme, --bg-base);
29 } 31 }
30 32
31 pre, 33 pre,
32 code { 34 code {
33 font-family: props.get(vars.$code--font-family); 35 font-family: props.get(vars.$code--font-family);
34 font-size: props.get(vars.$code--font-size); 36 font-size: props.get(vars.$code--font-size);
35 font-feature-settings: props.get(vars.$code--feature-settings); 37 font-feature-settings: props.get(vars.$code--feature-settings);
36 line-height: props.get(vars.$code--line-height); 38 line-height: props.get(vars.$code--line-height);
37 } 39 }
38 40
39 pre { 41 pre {
40 margin: 0; 42 margin: 0;
41 overflow-x: auto; 43 overflow-x: auto;
42 44
43 code { 45 code {
44 font-size: 1em; 46 font-size: 1em;
45 color: currentColor; 47 color: currentColor;
46 } 48 }
47 } 49 }
48 50
49 h1, 51 h1,
50 h2, 52 h2,
51 h3, 53 h3,
52 h4, 54 h4,
53 h5, 55 h5,
54 h6 { 56 h6 {
55 margin-block: props.get(vars.$heading--margin-bs) 0; 57 margin-block: props.get(vars.$heading--margin-bs) 0;
56 font-family: props.get(vars.$heading--font-family); 58 font-family: props.get(vars.$heading--font-family);
57 font-size: props.get(vars.$heading--font-size); 59 font-size: props.get(vars.$heading--font-size);
58 font-weight: props.get(vars.$heading--font-weight); 60 font-weight: props.get(vars.$heading--font-weight);
59 font-feature-settings: props.get(vars.$heading--feature-settings); 61 font-feature-settings: props.get(vars.$heading--feature-settings);
60 line-height: props.get(vars.$heading--line-height); 62 line-height: props.get(vars.$heading--line-height);
61 color: props.get(vars.$heading--color); 63 color: props.get(vars.$heading--color);
62 64
63 & + & { 65 & + & {
64 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 66 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
65 } 67 }
66 } 68 }
67 69
68 p { 70 p {
69 margin-block: props.get(vars.$paragraph--margin-bs) 0; 71 margin-block: props.get(vars.$paragraph--margin-bs) 0;
70 72
71 &:empty { 73 &:empty {
72 display: none; 74 display: none;
73 } 75 }
74 } 76 }
75 77
76 strong { 78 strong {
77 font-weight: bold; 79 font-weight: bold;
78 } 80 }
79 81
80 small { 82 small {
81 font-size: props.get(vars.$small--font-size); 83 font-size: props.get(vars.$small--font-size);
82 } 84 }
83 85
84 ul, 86 ul,
85 ol { 87 ol {
86 padding: 0; 88 padding: 0;
87 margin: 0; 89 margin: 0;
88 list-style: none; 90 list-style: none;
89 } 91 }
90 92
91 li { 93 li {
92 padding: 0; 94 padding: 0;
93 margin: 0; 95 margin: 0;
94 } 96 }
95 97
96 :focus, 98 :focus,
97 :focus-visible { 99 :focus-visible {
98 outline: 0; 100 outline: 0;
99 } 101 }
100 102
101 :link, 103 :link,
102 :visited { 104 :visited {
103 color: currentColor; 105 color: currentColor;
104 text-decoration: none; 106 text-decoration: none;
105 } 107 }
106 108
107 109
108 button, 110 button,
109 input, 111 input,
110 textarea { 112 textarea {
111 box-sizing: content-box; 113 box-sizing: content-box;
112 padding: 0; 114 padding: 0;
113 margin: 0; 115 margin: 0;
114 font-family: inherit; 116 font-family: inherit;
115 font-size: 1em; 117 font-size: 1em;
116 font-style: inherit; 118 font-style: inherit;
117 font-weight: inherit; 119 font-weight: inherit;
118 line-height: inherit; 120 line-height: inherit;
119 color: currentColor; 121 color: currentColor;
120 text-align: inherit; 122 text-align: inherit;
121 text-transform: inherit; 123 text-transform: inherit;
122 appearance: none; 124 appearance: none;
123 background: none; 125 background: none;
124 border: 0; 126 border: 0;
125 127
126 &::-moz-focus-inner { 128 &::-moz-focus-inner {
127 border: 0; 129 border: 0;
128 } 130 }
129 } 131 }
130 132
131 input, 133 input,
132 textarea { 134 textarea {
133 &::placeholder { 135 &::placeholder {
134 color: props.get(core.$theme, --text-mute); 136 color: props.get(core.$theme, --text-mute);
135 opacity: 1; 137 opacity: 1;
136 } 138 }
137 139
138 &:disabled { 140 &:disabled {
139 color: props.get(core.$theme, --text-disabled); 141 color: props.get(core.$theme, --text-disabled);
140 } 142 }
141 } 143 }
142 144
143 textarea { 145 textarea {
144 block-size: calc(1em * props.get(core.$font--standard--line-height)); 146 block-size: calc(1em * props.get(core.$font--standard--line-height));
145 } 147 }
146 148
147 hr { 149 hr {
148 block-size: props.get(core.$border-width--thin); 150 block-size: props.get(core.$border-width--thin);
149 margin: 0; 151 margin: 0;
150 background-color: props.get(core.$theme, --border); 152 background-color: props.get(core.$theme, --border);
151 border: 0; 153 border: 0;
152 } 154 }
153 155
154 figure { 156 figure {
155 padding: 0; 157 padding: 0;
156 margin: 0; 158 margin: 0;
157 } 159 }
158 } 160
161 @each $theme in map.keys(props.get(core.$transparent-colors)) {
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/_links.scss b/src/scopes/_links.scss
index 4092633..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,111 +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') { 95 @include bem.elem('image') {
96 img { 96 img {
97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
98 border: props.get(vars.$key-focus--border-offset) solid transparent; 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)); 99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
100 } 100 }
101 101
102 &:link, 102 &:link,
103 &:visited { 103 &:visited {
104 &:focus-visible { 104 &:focus-visible {
105 outline: none; 105 outline: none;
106 box-shadow: none; 106 box-shadow: none;
107 107
108 img { 108 img {
109 outline: props.get(vars.$key-focus--border-color) solid 109 outline: props.get(vars.$key-focus--border-color) solid
110 props.get(vars.$key-focus--border-width); 110 props.get(vars.$key-focus--border-width);
111 box-shadow: 0 0 0 111 box-shadow: 0 0 0
112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
113 props.get(vars.$key-focus--outline-color); 113 props.get(vars.$key-focus--outline-color);
114 } 114 }
115 } 115 }
116 } 116 }
117 } 117 }
118 } 118 }
119} 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/_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-14 03:53:41 +0000