summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquotes.scss36
-rw-r--r--src/scopes/_blockquotes.vars.scss11
-rw-r--r--src/scopes/_body.scss59
-rw-r--r--src/scopes/_body.vars.scss12
-rw-r--r--src/scopes/_code.scss67
-rw-r--r--src/scopes/_code.vars.scss18
-rw-r--r--src/scopes/_figures.scss21
-rw-r--r--src/scopes/_headings.scss147
-rw-r--r--src/scopes/_implicit.scss180
-rw-r--r--src/scopes/_implicit.vars.scss26
-rw-r--r--src/scopes/_links.scss164
-rw-r--r--src/scopes/_links.vars.scss48
-rw-r--r--src/scopes/_lists.scss44
-rw-r--r--src/scopes/_lists.vars.scss8
-rw-r--r--src/scopes/_tables.scss83
-rw-r--r--src/scopes/_tables.vars.scss4
16 files changed, 598 insertions, 330 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index f6a13fe..91a7785 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,33 +1,25 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('blockquotes') { 6@forward 'blockquotes.vars';
5 @include iro.props-store(( 7@use 'blockquotes.vars' as vars;
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9 --border: fn.global-dim(--border --thick),
10 8
11 --compact: ( 9@mixin styles {
12 --indent: fn.global-dim(--list --compact-indent), 10 @include materialize-at-root(meta.module-variables('vars'));
13 ),
14 ),
15 --colors: (
16 --border: fn.global-color(--border),
17 )
18 ));
19 11
20 @include iro.bem-scope(iro.props-namespace()) { 12 @include bem.scope('blockquotes') {
21 blockquote { 13 blockquote {
22 margin-block: fn.dim(--margin-bs); 14 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
15 margin-block: props.get(vars.$margin-bs) 0;
23 margin-inline: 1px 0; 16 margin-inline: 1px 0;
24 padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border)); 17 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color);
25 border-inline-start: fn.dim(--border) solid fn.color(--border);
26 } 18 }
27 19
28 @include iro.bem-modifier('compact') { 20 @include bem.modifier('compact') {
29 blockquote { 21 blockquote {
30 padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border)); 22 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
31 } 23 }
32 } 24 }
33 } 25 }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
new file mode 100644
index 0000000..6aae242
--- /dev/null
+++ b/src/scopes/_blockquotes.vars.scss
@@ -0,0 +1,11 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3@use './implicit.vars' as implicit;
4
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;
7$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default;
8
9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
10
11$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..6d32212
--- /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 4df711b..9b2a63d 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,58 +1,39 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('code') { 6@forward 'code.vars';
5 @include iro.props-store(( 7@use 'code.vars' as vars;
6 --dims: (
7 --inline: (
8 --pad-i: fn.global-dim(--size --50),
9 --pad-b: fn.global-dim(--size --10),
10 --rounding: fn.global-dim(--rounding),
11 ),
12 --block: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 --rounding: fn.global-dim(--rounding),
17 )
18 ),
19 --colors: (
20 --inline: (
21 --fg: fn.global-color(--red --1200),
22 --bg: fn.global-color(--red --200),
23 ),
24 --block: (
25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--base --50),
27 )
28 )
29 ));
30 8
31 @include iro.bem-scope(iro.props-namespace()) { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars'));
11
12 @include bem.scope('code') {
32 code { 13 code {
33 padding-block: fn.dim(--inline --pad-b); 14 padding-block: props.get(vars.$inline--pad-b);
34 padding-inline: fn.dim(--inline --pad-i); 15 padding-inline: props.get(vars.$inline--pad-i);
35 border-radius: fn.dim(--inline --rounding); 16 color: props.get(vars.$inline--fg);
36 background-color: fn.color(--inline --bg); 17 background-color: props.get(vars.$inline--bg);
37 color: fn.color(--inline --fg); 18 border-radius: props.get(vars.$inline--rounding);
38 } 19 }
39 20
40 pre { 21 pre {
41 margin-block: fn.dim(--block --margin-bs) 0; 22 padding-block: props.get(vars.$block--pad-b);
23 padding-inline: props.get(vars.$block--pad-i);
24 margin-block: props.get(vars.$block--margin-bs) 0;
42 margin-inline: 0; 25 margin-inline: 0;
43 padding-block: fn.dim(--block --pad-b); 26 color: props.get(vars.$block--fg);
44 padding-inline: fn.dim(--block --pad-i); 27 background-color: props.get(vars.$block--bg);
45 border-radius: fn.dim(--block --rounding); 28 border-radius: props.get(vars.$block--rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48 29
49 code { 30 code {
50 display: inline-block; 31 display: inline-block;
51 margin-inline-end: fn.dim(--block --pad-i);
52 padding: 0; 32 padding: 0;
53 border-radius: 0; 33 margin-inline-end: props.get(vars.$block--pad-i);
54 background-color: transparent;
55 color: currentColor; 34 color: currentColor;
35 background-color: transparent;
36 border-radius: 0;
56 } 37 }
57 } 38 }
58 } 39 }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
new file mode 100644
index 0000000..8a040c2
--- /dev/null
+++ b/src/scopes/_code.vars.scss
@@ -0,0 +1,18 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3@use './implicit.vars' as implicit;
4
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;
7$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default;
8
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;
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;
13
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;
16
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;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
new file mode 100644
index 0000000..981a8b6
--- /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 9593792..32559cd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,114 +1,65 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:map';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use '../mixins' as mx; 3@use 'iro-sass/src/props';
4@use 'include-media/dist/include-media' as media; 4@use '../objects/heading.vars' as heading;
5 5
6@include iro.props-namespace('headings') { 6@mixin styles {
7 @include iro.bem-scope(iro.props-namespace()) { 7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
8 $-size-map: (
9 xs: h6,
10 sm: h5,
11 md: h4,
12 lg: h3,
13 xl: h2,
14 xxl: h1,
15 );
16
17 @include bem.scope('headings') {
8 h1, 18 h1,
9 h2, 19 h2,
10 h3, 20 h3,
11 h4, 21 h4,
12 h5, 22 h5,
13 h6 { 23 h6 {
14 @include mx.set-font(--headline); 24 display: block;
15 25 margin-block-start: props.get(heading.$margin-bs);
16 display: block; 26 font-family: props.get(heading.$font-family);
17 transform: translateX(-.06em); 27 font-weight: props.get(heading.$font-weight);
18 letter-spacing: normal; 28 font-feature-settings: props.get(heading.$feature-settings);
19 text-transform: none; 29 line-height: props.get(heading.$line-height);
20 } 30 text-transform: none;
21 31 letter-spacing: normal;
22 32 transform: translateX(props.get(heading.$offset));
23 h1 {
24 @include mx.heading-strong(--xxl);
25 }
26
27 h2 {
28 @include mx.heading-strong(--xl);
29 }
30
31 h3 {
32 @include mx.heading-medium(--lg);
33 }
34
35 h4 {
36 @include mx.heading-medium(--md);
37 }
38
39 h5 {
40 @include mx.heading-faint(--sm);
41 }
42
43 h6 {
44 @include mx.heading-faint(--xs);
45 } 33 }
46 34
47 @include iro.bem-elem('highlight') { 35 @include bem.elem('highlight') {
48 background-image: linear-gradient( 36 background-image: linear-gradient(to top,
49 to top, 37 transparent .15em,
50 transparent .15em, 38 props.get(heading.$bg-color) .15em,
51 fn.foreign-color(--heading, --bg) .15em, 39 props.get(heading.$bg-color) .6em,
52 fn.foreign-color(--heading, --bg) .6em, 40 transparent .6em);
53 transparent .6em
54 );
55 } 41 }
56 42
57 @include iro.bem-modifier('display') { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
58 h1, 44 #{map.get($-size-map, $mod)} {
59 h2, 45 font-family: props.get($font-family);
60 h3, 46 font-size: props.get($font-size);
61 h4, 47 font-weight: props.get($font-weight);
62 h5, 48 font-feature-settings: props.get($feature-settings);
63 h6 { 49 line-height: props.get($line-height);
64 @include mx.set-font(--headline); 50 letter-spacing: props.get($letter-spacing);
65 } 51 }
52 }
66 53
67 h1 { 54 @include bem.modifier('display') {
68 @include mx.heading-strong(--display --xxl); 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
69 56 #{map.get($-size-map, $mod)} {
70 @include media.media('<=md') { 57 font-family: props.get($font-family);
71 @include mx.heading-strong(--display-sm --xxl); 58 font-size: props.get($font-size);
72 } 59 font-weight: props.get($font-weight);
73 } 60 font-feature-settings: props.get($feature-settings);
74 61 line-height: props.get($line-height);
75 h2 { 62 letter-spacing: props.get($letter-spacing);
76 @include mx.heading-strong(--display --xl);
77
78 @include media.media('<=md') {
79 @include mx.heading-strong(--display-sm --xl);
80 }
81 }
82
83 h3 {
84 @include mx.heading-strong(--display --lg);
85
86 @include media.media('<=md') {
87 @include mx.heading-strong(--display-sm --lg);
88 }
89 }
90
91 h4 {
92 @include mx.heading-strong(--display --md);
93
94 @include media.media('<=md') {
95 @include mx.heading-strong(--display-sm --md);
96 }
97 }
98
99 h5 {
100 @include mx.heading-medium(--display --sm);
101
102 @include media.media('<=md') {
103 @include mx.heading-medium(--display-sm --sm);
104 }
105 }
106
107 h6 {
108 @include mx.heading-faint(--display --xs);
109
110 @include media.media('<=md') {
111 @include mx.heading-faint(--display-sm --xs);
112 } 63 }
113 } 64 }
114 } 65 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
new file mode 100644
index 0000000..78f06be
--- /dev/null
+++ b/src/scopes/_implicit.scss
@@ -0,0 +1,180 @@
1@use 'sass:map';
2@use 'sass:math';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8@use '../core.vars' as core;
9
10@forward 'implicit.vars';
11@use 'implicit.vars' as vars;
12
13@mixin styles {
14 @include materialize-at-root(meta.module-variables('vars'));
15
16 @layer scope {
17 html {
18 accent-color: props.get(core.$theme, --accent, --600);
19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
20 }
21
22 body {
23 padding: 0;
24 margin: 0;
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 }
32
33 pre,
34 code {
35 font-family: props.get(vars.$code--font-family);
36 font-size: props.get(vars.$code--font-size);
37 font-feature-settings: props.get(vars.$code--feature-settings);
38 line-height: props.get(vars.$code--line-height);
39 }
40
41 pre {
42 margin: 0;
43 overflow-x: auto;
44
45 code {
46 font-size: 1em;
47 color: currentColor;
48 }
49 }
50
51 h1,
52 h2,
53 h3,
54 h4,
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);
64
65 & + & {
66 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
67 }
68 }
69
70 p {
71 margin-block: props.get(vars.$paragraph--margin-bs) 0;
72
73 &:empty {
74 display: none;
75 }
76 }
77
78 strong {
79 font-weight: bold;
80 }
81
82 small {
83 font-size: props.get(vars.$small--font-size);
84 }
85
86 ul,
87 ol {
88 padding: 0;
89 margin: 0;
90 list-style: none;
91 }
92
93 li {
94 padding: 0;
95 margin: 0;
96 }
97
98 :focus,
99 :focus-visible {
100 outline: 0;
101 }
102
103 :link,
104 :visited {
105 color: currentColor;
106 text-decoration: none;
107 }
108
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;
127
128 &::-moz-focus-inner {
129 border: 0;
130 }
131 }
132
133 input,
134 textarea {
135 &::placeholder {
136 color: props.get(core.$theme, --text-mute);
137 opacity: 1;
138 }
139
140 &:disabled {
141 color: props.get(core.$theme, --text-disabled);
142 }
143 }
144
145 textarea {
146 block-size: calc(1em * props.get(core.$font--standard--line-height));
147 }
148
149 hr {
150 block-size: props.get(core.$border-width--thin);
151 margin: 0;
152 background-color: props.get(core.$theme, --border);
153 border: 0;
154 }
155
156 figure {
157 padding: 0;
158 margin: 0;
159 }
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 }
180}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
new file mode 100644
index 0000000..388f0af
--- /dev/null
+++ b/src/scopes/_implicit.vars.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
5
6$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
7
8$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default;
9$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
10$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
11$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
12
13$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
14$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
15$code--font-size: props.def(--s-implicit--code--font-size, .93em);
16$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
17
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;
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;
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));
24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
25
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 d47c406..4092633 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,140 +1,116 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:map';
2@use '../functions' as fn; 2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
3 7
4$static-themes: 'black' 'white' !default; 8@forward 'links.vars';
9@use 'links.vars' as vars;
5 10
6@include iro.props-namespace('links') { 11@mixin styles {
7 @include iro.props-store(( 12 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --rounding: fn.global-dim(--rounding),
10 --underline: fn.global-dim(--border --thin),
11 13
12 --hover: ( 14 @include bem.scope('links') {
13 --underline: fn.global-dim(--border --medium),
14 ),
15
16 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --border),
20 ),
21 ),
22 --colors: (
23 --underline: fn.global-color(--text-mute-more),
24
25 --colored: (
26 --text: fn.global-color(--accent --1100),
27 --underline: fn.global-color(--accent --600),
28
29 --hover: (
30 --text: fn.global-color(--accent --1300),
31 ),
32
33 --visited: (
34 --text: fn.global-color(--purple --1100),
35 --underline: fn.global-color(--purple --600),
36
37 --hover: (
38 --text: fn.global-color(--purple --1300),
39 ),
40 ),
41 ),
42
43 --key-focus: (
44 --text: fn.global-color(--focus --text),
45 --border: fn.global-color(--focus --border),
46 --outline: fn.global-color(--focus --outline),
47 ),
48 ),
49 ));
50
51 @each $theme in $static-themes {
52 @include iro.props-store((
53 --colors: (
54 --static-#{$theme}: (
55 --text: fn.global-color(--#{$theme}-transparent --800),
56 --underline: fn.global-color(--#{$theme}-transparent --500),
57
58 --hover: (
59 --text: fn.global-color(--#{$theme}-transparent --900),
60 ),
61
62 --key-focus: (
63 --text: fn.global-color(--#{$theme}-transparent --900),
64 --border: fn.global-color(--#{$theme}-transparent --900),
65 --outline: fn.global-color(--#{$theme}-transparent --300),
66 ),
67 )
68 )
69 ));
70 }
71
72 @include iro.bem-scope(iro.props-namespace()) {
73 :link, 15 :link,
74 :visited { 16 :visited {
75 border-radius: fn.dim(--rounding);
76 color: currentColor; 17 color: currentColor;
77 text-decoration: underline; 18 text-decoration: underline;
78 text-decoration-color: fn.color(--underline); 19 text-decoration-thickness: props.get(vars.$underline-width);
79 text-decoration-thickness: fn.dim(--underline); 20 text-decoration-color: props.get(vars.$underline-color);
21 border-radius: props.get(vars.$rounding);
80 box-decoration-break: clone; 22 box-decoration-break: clone;
81 23
82 &:hover { 24 &:hover {
83 text-decoration: underline; 25 text-decoration: underline;
84 text-decoration-thickness: fn.dim(--hover --underline);
85 text-decoration-skip-ink: none; 26 text-decoration-skip-ink: none;
27 text-decoration-thickness: props.get(vars.$hover--underline-width);
86 } 28 }
87 29
88 &:focus-visible { 30 &:focus-visible {
89 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 31 color: props.get(vars.$key-focus--text-color);
90 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 32 text-decoration: none;
91 color: fn.color(--key-focus --text); 33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
92 text-decoration: none; 34 box-shadow:
35 0
36 0
37 0
38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 props.get(vars.$key-focus--outline-color);
93 } 40 }
94 } 41 }
95 42
96 @include iro.bem-modifier('invisible') { 43 @include bem.modifier('invisible') {
97 :link, 44 :link,
98 :visited { 45 :visited {
99 text-decoration: none; 46 text-decoration: none;
100 } 47 }
101 } 48 }
102 49
103 @include iro.bem-modifier('colored') { 50 @include bem.modifier('colored') {
104 :link { 51 :link {
105 color: fn.color(--colored --text); 52 color: props.get(vars.$colored--text-color);
106 text-decoration-color: fn.color(--colored --underline); 53 text-decoration-color: props.get(vars.$colored--underline-color);
107 54
108 &:hover { 55 &:hover {
109 color: fn.color(--colored --hover --text); 56 color: props.get(vars.$colored--hover--text-color);
110 } 57 }
111 } 58 }
112 59
113 :visited { 60 :visited {
114 color: fn.color(--colored --visited --text); 61 color: props.get(vars.$colored--visited--text-color);
115 text-decoration-color: fn.color(--colored --visited --underline); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
116 63
117 &:hover { 64 &:hover {
118 color: fn.color(--colored --visited --hover --text); 65 color: props.get(vars.$colored--visited--hover--text-color);
119 } 66 }
120 } 67 }
121 } 68 }
122 69
123 @each $theme in $static-themes { 70 @each $theme in map.keys(props.get(vars.$static-themes)) {
124 @include iro.bem-modifier(static-#{$theme}) { 71 @include bem.modifier(string.slice($theme, 3)) {
125 :link, 72 :link,
126 :visited { 73 :visited {
127 color: fn.color(--static-#{$theme} --text); 74 color: props.get(vars.$static-themes, $theme, --text-color);
128 text-decoration-color: fn.color(--static-#{$theme} --underline); 75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
129 76
130 &:hover { 77 &:hover {
131 color: fn.color(--static-#{$theme} --hover --text); 78 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
132 } 79 }
133 80
134 &:focus-visible { 81 &:focus-visible {
135 outline-color: fn.color(--static-#{$theme} --key-focus --border); 82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
136 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); 83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
137 color: fn.color(--static-#{$theme} --key-focus --text); 84 box-shadow:
85 0
86 0
87 0
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);
90 }
91 }
92 }
93 }
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);
138 } 114 }
139 } 115 }
140 } 116 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
new file mode 100644
index 0000000..b9bf4d1
--- /dev/null
+++ b/src/scopes/_links.vars.scss
@@ -0,0 +1,48 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
7$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
10$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
11$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
12$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
13
14$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
15
16$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
17$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
18$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
19
20$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
21$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
22$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
23
24$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
25$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
26$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
27
28$static-themes: props.def(--s-links, (), 'color');
29@each $theme in map.keys(props.get(core.$transparent-colors)) {
30 $link-theme: --static-#{string.slice($theme, 3)};
31
32 $static-themes: props.merge($static-themes, (
33 $link-theme: (
34 --text-color: currentColor,
35 --underline-color: props.get(core.$transparent-colors, $theme, --500),
36
37 --hover: (
38 --text-color: props.get(core.$transparent-colors, $theme, --900),
39 ),
40
41 --key-focus: (
42 --text-color: props.get(core.$transparent-colors, $theme, --900),
43 --border-color: props.get(core.$transparent-colors, $theme, --900),
44 --outline-color: props.get(core.$transparent-colors, $theme, --300),
45 ),
46 )
47 ));
48}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index bad9731..98b1df1 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,26 +1,20 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use '../core.vars' as core;
3 6
4@include iro.props-namespace('lists') { 7@forward 'lists.vars';
5 @include iro.props-store(( 8@use 'lists.vars' as vars;
6 --dims: (
7 --indent: calc(fn.global-dim(--list --indent) + 1em),
8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9 9
10 --compact: ( 10@mixin styles {
11 --indent: fn.global-dim(--list --compact-indent), 11 @include materialize-at-root(meta.module-variables('vars'));
12 ),
13 ),
14 --colors: (
15 --border: fn.global-color(--border-mute),
16 )
17 ));
18 12
19 @include iro.bem-scope(iro.props-namespace()) { 13 @include bem.scope('lists') {
20 ul, 14 ul,
21 ol { 15 ol {
22 margin-block-start: fn.dim(--margin-bs); 16 padding-inline-start: props.get(vars.$indent);
23 padding-inline-start: fn.dim(--indent); 17 margin-block-start: props.get(vars.$margin-bs);
24 18
25 ul, 19 ul,
26 ol { 20 ol {
@@ -37,29 +31,29 @@
37 } 31 }
38 32
39 dl { 33 dl {
40 margin-block: fn.dim(--margin-bs) 0;
41 margin-inline: 0;
42 padding: 0; 34 padding: 0;
35 margin-block: props.get(vars.$margin-bs) 0;
36 margin-inline: 0;
43 } 37 }
44 38
45 dt { 39 dt {
46 color: fn.global-color(--heading);
47 font-weight: bold; 40 font-weight: bold;
41 color: props.get(core.$theme, --heading);
48 } 42 }
49 43
50 dd { 44 dd {
51 margin-block: 0; 45 margin-block: 0;
52 margin-inline: fn.dim(--indent) 0; 46 margin-inline: props.get(vars.$indent) 0;
53 } 47 }
54 48
55 @include iro.bem-modifier('compact') { 49 @include bem.modifier('compact') {
56 ul, 50 ul,
57 ol { 51 ol {
58 padding-inline-start: calc(fn.dim(--compact --indent) - 3px); 52 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
59 } 53 }
60 54
61 dd { 55 dd {
62 margin-inline-start: calc(fn.dim(--compact --indent) - 3px); 56 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
63 } 57 }
64 } 58 }
65 } 59 }
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
new file mode 100644
index 0000000..8c46bc3
--- /dev/null
+++ b/src/scopes/_lists.vars.scss
@@ -0,0 +1,8 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3@use './implicit.vars' as implicit;
4
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;
7
8$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 9b2124d..0a87eaa 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,65 +1,52 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use '../mixins' as mx; 3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use '../objects/table.vars' as table;
4 6
5@include iro.props-namespace('tables') { 7@forward 'tables.vars';
6 @include iro.props-store(( 8@use 'tables.vars' as vars;
7 --dims: (
8 --pad-i: fn.foreign-dim(--table, --pad-i),
9 --pad-b: fn.foreign-dim(--table, --pad-b),
10 --rounding: fn.foreign-dim(--table, --rounding),
11 --border: fn.foreign-dim(--table, --border),
12 --margin-bs: fn.global-dim(--paragraph --margin-bs),
13 ),
14 --colors: (
15 --border: fn.foreign-color(--table, --border),
16 --heading: fn.foreign-color(--table, --heading),
17 --box: (
18 --bg: fn.foreign-color(--table, --box --bg),
19 )
20 )
21 ));
22 9
23 @include iro.bem-scope(iro.props-namespace()) { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars'));
12
13 @include bem.scope('tables') {
24 table { 14 table {
25 margin-block-start: fn.dim(--margin-bs); 15 margin-block-start: props.get(vars.$margin-bs);
26 border-spacing: 0; 16 border-spacing: 0;
27 border-collapse: separate; 17 border-collapse: separate;
28 } 18 }
29 19
30 th { 20 th {
31 @include mx.set-font(--standard, ( 21 padding-block: props.get(table.$pad-b);
32 --line-height: null, 22 padding-inline: props.get(table.$pad-i);
33 --size: fn.global-dim(--font-size --50), 23 font-family: props.get(table.$heading--font-family);
34 --weight: bold, 24 font-size: props.get(table.$heading--font-size);
35 --transform: uppercase, 25 font-weight: props.get(table.$heading--font-weight);
36 --spacing: .5px 26 color: props.get(table.$heading-color);
37 ));
38
39 padding-block: fn.dim(--pad-b);
40 padding-inline: fn.dim(--pad-i);
41 color: fn.color(--heading);
42 text-align: start; 27 text-align: start;
28 text-transform: props.get(table.$heading--text-transform);
29 letter-spacing: props.get(table.$heading--letter-spacing);
43 } 30 }
44 31
45 td { 32 td {
46 padding-block: fn.dim(--pad-b); 33 padding-block: props.get(table.$pad-b);
47 padding-inline: fn.dim(--pad-i); 34 padding-inline: props.get(table.$pad-i);
48 border-width: 0; 35 border-color: props.get(table.$border-color);
49 border-block-start-width: fn.dim(--border);
50 border-style: solid; 36 border-style: solid;
51 border-color: fn.color(--border); 37 border-width: 0;
38 border-block-start-width: props.get(table.$border-width);
52 } 39 }
53 40
54 tr { 41 tr {
55 &:last-child { 42 &:last-child {
56 td { 43 td {
57 border-block-end-width: fn.dim(--border); 44 border-block-end-width: props.get(table.$border-width);
58 } 45 }
59 } 46 }
60 } 47 }
61 48
62 @include iro.bem-modifier('flush') { 49 @include bem.modifier('flush') {
63 th, 50 th,
64 td { 51 td {
65 &:first-child { 52 &:first-child {
@@ -72,16 +59,16 @@
72 } 59 }
73 } 60 }
74 61
75 @include iro.bem-modifier('box') { 62 @include bem.modifier('box') {
76 td { 63 td {
77 background-color: fn.color(--box --bg); 64 background-color: props.get(table.$box--bg-color);
78 65
79 &:first-child { 66 &:first-child {
80 border-inline-start-width: fn.dim(--border); 67 border-inline-start-width: props.get(table.$border-width);
81 } 68 }
82 69
83 &:last-child { 70 &:last-child {
84 border-inline-end-width: fn.dim(--border); 71 border-inline-end-width: props.get(table.$border-width);
85 } 72 }
86 } 73 }
87 74
@@ -89,11 +76,11 @@
89 &:first-child { 76 &:first-child {
90 td { 77 td {
91 &:first-child { 78 &:first-child {
92 border-start-start-radius: fn.dim(--rounding); 79 border-start-start-radius: props.get(table.$rounding);
93 } 80 }
94 81
95 &:last-child { 82 &:last-child {
96 border-start-end-radius: fn.dim(--rounding); 83 border-start-end-radius: props.get(table.$rounding);
97 } 84 }
98 } 85 }
99 } 86 }
@@ -101,11 +88,11 @@
101 &:last-child { 88 &:last-child {
102 td { 89 td {
103 &:first-child { 90 &:first-child {
104 border-end-start-radius: fn.dim(--rounding); 91 border-end-start-radius: props.get(table.$rounding);
105 } 92 }
106 93
107 &:last-child { 94 &:last-child {
108 border-end-end-radius: fn.dim(--rounding); 95 border-end-end-radius: props.get(table.$rounding);
109 } 96 }
110 } 97 }
111 } 98 }
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
new file mode 100644
index 0000000..362b70f
--- /dev/null
+++ b/src/scopes/_tables.vars.scss
@@ -0,0 +1,4 @@
1@use 'iro-sass/src/props';
2@use 'implicit.vars' as implicit;
3
4$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 11:52:50 +0000