summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
committerVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
commit41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/scopes
parentFix button font size (diff)
downloadiro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
Switch to tab indentationHEADmaster
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquotes.scss28
-rw-r--r--src/scopes/_body.scss80
-rw-r--r--src/scopes/_code.scss54
-rw-r--r--src/scopes/_figures.scss26
-rw-r--r--src/scopes/_headings.scss112
-rw-r--r--src/scopes/_implicit.scss280
-rw-r--r--src/scopes/_links.scss186
-rw-r--r--src/scopes/_links.vars.scss30
-rw-r--r--src/scopes/_lists.scss80
-rw-r--r--src/scopes/_tables.scss156
10 files changed, 516 insertions, 516 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 6d32212..f307f58 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -7,53 +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 line-height: props.get(vars.$line-height);
15 15
16 strong { 16 strong {
17 color: props.get(vars.$strong--text-color); 17 color: props.get(vars.$strong--text-color);
18 } 18 }
19 19
20 p, 20 p,
21 ul, 21 ul,
22 ol { 22 ol {
23 max-inline-size: props.get(vars.$paragraph--max-inline-size); 23 max-inline-size: props.get(vars.$paragraph--max-inline-size);
24 margin-block-start: props.get(vars.$paragraph--margin-bs); 24 margin-block-start: props.get(vars.$paragraph--margin-bs);
25 } 25 }
26 26
27 ul, 27 ul,
28 ol { 28 ol {
29 box-sizing: border-box; 29 box-sizing: border-box;
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
41 figure { 41 figure {
42 margin-block-start: props.get(vars.$paragraph--margin-bs); 42 margin-block-start: props.get(vars.$paragraph--margin-bs);
43 43
44 img { 44 img {
45 margin-block: 0; 45 margin-block: 0;
46 } 46 }
47 } 47 }
48 48
49 hr { 49 hr {
50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); 50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
51 } 51 }
52 52
53 table, 53 table,
54 pre, 54 pre,
55 blockquote { 55 blockquote {
56 margin-block-start: props.get(vars.$paragraph--margin-bs); 56 margin-block-start: props.get(vars.$paragraph--margin-bs);
57 } 57 }
58 } 58 }
59} 59}
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/_figures.scss b/src/scopes/_figures.scss
index 981a8b6..d931820 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -4,18 +4,18 @@
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 }
21} 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 78f06be..cee1639 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -11,170 +11,170 @@
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 21
22 body { 22 body {
23 padding: 0; 23 padding: 0;
24 margin: 0; 24 margin: 0;
25 font-family: props.get(vars.$body--font-family); 25 font-family: props.get(vars.$body--font-family);
26 font-size: props.get(vars.$body--font-size); 26 font-size: props.get(vars.$body--font-size);
27 font-feature-settings: props.get(vars.$body--feature-settings); 27 font-feature-settings: props.get(vars.$body--feature-settings);
28 line-height: props.get(vars.$body--line-height); 28 line-height: props.get(vars.$body--line-height);
29 color: props.get(core.$theme, --text); 29 color: props.get(core.$theme, --text);
30 background-color: props.get(core.$theme, --bg-base); 30 background-color: props.get(core.$theme, --bg-base);
31 } 31 }
32 32
33 pre, 33 pre,
34 code { 34 code {
35 font-family: props.get(vars.$code--font-family); 35 font-family: props.get(vars.$code--font-family);
36 font-size: props.get(vars.$code--font-size); 36 font-size: props.get(vars.$code--font-size);
37 font-feature-settings: props.get(vars.$code--feature-settings); 37 font-feature-settings: props.get(vars.$code--feature-settings);
38 line-height: props.get(vars.$code--line-height); 38 line-height: props.get(vars.$code--line-height);
39 } 39 }
40 40
41 pre { 41 pre {
42 margin: 0; 42 margin: 0;
43 overflow-x: auto; 43 overflow-x: auto;
44 44
45 code { 45 code {
46 font-size: 1em; 46 font-size: 1em;
47 color: currentColor; 47 color: currentColor;
48 } 48 }
49 } 49 }
50 50
51 h1, 51 h1,
52 h2, 52 h2,
53 h3, 53 h3,
54 h4, 54 h4,
55 h5, 55 h5,
56 h6 { 56 h6 {
57 margin-block: props.get(vars.$heading--margin-bs) 0; 57 margin-block: props.get(vars.$heading--margin-bs) 0;
58 font-family: props.get(vars.$heading--font-family); 58 font-family: props.get(vars.$heading--font-family);
59 font-size: props.get(vars.$heading--font-size); 59 font-size: props.get(vars.$heading--font-size);
60 font-weight: props.get(vars.$heading--font-weight); 60 font-weight: props.get(vars.$heading--font-weight);
61 font-feature-settings: props.get(vars.$heading--feature-settings); 61 font-feature-settings: props.get(vars.$heading--feature-settings);
62 line-height: props.get(vars.$heading--line-height); 62 line-height: props.get(vars.$heading--line-height);
63 color: props.get(vars.$heading--color); 63 color: props.get(vars.$heading--color);
64 64
65 & + & { 65 & + & {
66 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 66 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
67 } 67 }
68 } 68 }
69 69
70 p { 70 p {
71 margin-block: props.get(vars.$paragraph--margin-bs) 0; 71 margin-block: props.get(vars.$paragraph--margin-bs) 0;
72 72
73 &:empty { 73 &:empty {
74 display: none; 74 display: none;
75 } 75 }
76 } 76 }
77 77
78 strong { 78 strong {
79 font-weight: bold; 79 font-weight: bold;
80 } 80 }
81 81
82 small { 82 small {
83 font-size: props.get(vars.$small--font-size); 83 font-size: props.get(vars.$small--font-size);
84 } 84 }
85 85
86 ul, 86 ul,
87 ol { 87 ol {
88 padding: 0; 88 padding: 0;
89 margin: 0; 89 margin: 0;
90 list-style: none; 90 list-style: none;
91 } 91 }
92 92
93 li { 93 li {
94 padding: 0; 94 padding: 0;
95 margin: 0; 95 margin: 0;
96 } 96 }
97 97
98 :focus, 98 :focus,
99 :focus-visible { 99 :focus-visible {
100 outline: 0; 100 outline: 0;
101 } 101 }
102 102
103 :link, 103 :link,
104 :visited { 104 :visited {
105 color: currentColor; 105 color: currentColor;
106 text-decoration: none; 106 text-decoration: none;
107 } 107 }
108 108
109 109
110 button, 110 button,
111 input, 111 input,
112 textarea { 112 textarea {
113 box-sizing: content-box; 113 box-sizing: content-box;
114 padding: 0; 114 padding: 0;
115 margin: 0; 115 margin: 0;
116 font-family: inherit; 116 font-family: inherit;
117 font-size: 1em; 117 font-size: 1em;
118 font-style: inherit; 118 font-style: inherit;
119 font-weight: inherit; 119 font-weight: inherit;
120 line-height: inherit; 120 line-height: inherit;
121 color: currentColor; 121 color: currentColor;
122 text-align: inherit; 122 text-align: inherit;
123 text-transform: inherit; 123 text-transform: inherit;
124 appearance: none; 124 appearance: none;
125 background: none; 125 background: none;
126 border: 0; 126 border: 0;
127 127
128 &::-moz-focus-inner { 128 &::-moz-focus-inner {
129 border: 0; 129 border: 0;
130 } 130 }
131 } 131 }
132 132
133 input, 133 input,
134 textarea { 134 textarea {
135 &::placeholder { 135 &::placeholder {
136 color: props.get(core.$theme, --text-mute); 136 color: props.get(core.$theme, --text-mute);
137 opacity: 1; 137 opacity: 1;
138 } 138 }
139 139
140 &:disabled { 140 &:disabled {
141 color: props.get(core.$theme, --text-disabled); 141 color: props.get(core.$theme, --text-disabled);
142 } 142 }
143 } 143 }
144 144
145 textarea { 145 textarea {
146 block-size: calc(1em * props.get(core.$font--standard--line-height)); 146 block-size: calc(1em * props.get(core.$font--standard--line-height));
147 } 147 }
148 148
149 hr { 149 hr {
150 block-size: props.get(core.$border-width--thin); 150 block-size: props.get(core.$border-width--thin);
151 margin: 0; 151 margin: 0;
152 background-color: props.get(core.$theme, --border); 152 background-color: props.get(core.$theme, --border);
153 border: 0; 153 border: 0;
154 } 154 }
155 155
156 figure { 156 figure {
157 padding: 0; 157 padding: 0;
158 margin: 0; 158 margin: 0;
159 } 159 }
160 160
161 @each $theme in map.keys(props.get(core.$transparent-colors)) { 161 @each $theme in map.keys(props.get(core.$transparent-colors)) {
162 .t-static-#{string.slice($theme, 3)} { 162 .t-static-#{string.slice($theme, 3)} {
163 color: props.get(core.$transparent-colors, $theme, --800); 163 color: props.get(core.$transparent-colors, $theme, --800);
164 164
165 h1, 165 h1,
166 h2, 166 h2,
167 h3, 167 h3,
168 h4, 168 h4,
169 h5, 169 h5,
170 h6 { 170 h6 {
171 color: props.get(core.$transparent-colors, $theme, --900); 171 color: props.get(core.$transparent-colors, $theme, --900);
172 } 172 }
173 173
174 hr { 174 hr {
175 color: props.get(core.$transparent-colors, $theme, --400); 175 color: props.get(core.$transparent-colors, $theme, --400);
176 } 176 }
177 } 177 }
178 } 178 }
179 } 179 }
180} 180}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4ff242c..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-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-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 ac7815a..c69cc32 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -28,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
28 28
29$static-themes: props.def(--s-links, (), 'color'); 29$static-themes: props.def(--s-links, (), 'color');
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $link-theme: --static-#{string.slice($theme, 3)}; 31 $link-theme: --static-#{string.slice($theme, 3)};
32 32
33 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
34 $link-theme: ( 34 $link-theme: (
35 --text-color: currentColor, 35 --text-color: currentColor,
36 --underline-color: props.get(core.$transparent-colors, $theme, --500), 36 --underline-color: props.get(core.$transparent-colors, $theme, --500),
37 37
38 --hover: ( 38 --hover: (
39 --text-color: props.get(core.$transparent-colors, $theme, --900), 39 --text-color: props.get(core.$transparent-colors, $theme, --900),
40 ), 40 ),
41 41
42 --key-focus: ( 42 --key-focus: (
43 --text-color: props.get(core.$transparent-colors, $theme, --900), 43 --text-color: props.get(core.$transparent-colors, $theme, --900),
44 --border-color: props.get(core.$transparent-colors, $theme, --900), 44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300), 45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ), 46 ),
47 ) 47 )
48 )); 48 ));
49} 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-08-12 11:05:15 +0000