summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
committerVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
commit365c56edcc36b5b92902bac01ce44b43d01e8685 (patch)
tree644611792591a76e605068d0c9e230fad6a633e7 /src/scopes
parentRevamped variable management (diff)
downloadiro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.gz
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.bz2
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.zip
Refactoring
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquotes.scss25
-rw-r--r--src/scopes/_blockquotes.vars.scss11
-rw-r--r--src/scopes/_code.scss39
-rw-r--r--src/scopes/_code.vars.scss18
-rw-r--r--src/scopes/_headings.scss115
-rw-r--r--src/scopes/_headings.vars.scss0
-rw-r--r--src/scopes/_implicit.scss152
-rw-r--r--src/scopes/_implicit.vars.scss7
-rw-r--r--src/scopes/_links.scss93
-rw-r--r--src/scopes/_links.vars.scss47
-rw-r--r--src/scopes/_lists.scss59
-rw-r--r--src/scopes/_lists.vars.scss8
-rw-r--r--src/scopes/_tables.scss104
-rw-r--r--src/scopes/_tables.vars.scss24
14 files changed, 702 insertions, 0 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
new file mode 100644
index 0000000..7f93e42
--- /dev/null
+++ b/src/scopes/_blockquotes.scss
@@ -0,0 +1,25 @@
1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../props';
4
5@forward 'blockquotes.vars';
6@use 'blockquotes.vars' as vars;
7
8@mixin styles {
9 @include props.materialize(meta.module-variables('vars'));
10
11 @include iro.bem-scope('blockquotes') {
12 blockquote {
13 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
14 margin-block: props.get(vars.$margin-bs);
15 margin-inline: 1px 0;
16 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color);
17 }
18
19 @include iro.bem-modifier('compact') {
20 blockquote {
21 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
22 }
23 }
24 }
25}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
new file mode 100644
index 0000000..a3f8d85
--- /dev/null
+++ b/src/scopes/_blockquotes.vars.scss
@@ -0,0 +1,11 @@
1@use '../props';
2@use '../vars';
3@use './implicit.vars' as implicit-vars;
4
5$indent: props.def(--s-blockquotes--indent, props.get(vars.$list--indent)) !default;
6$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
7$border-width: props.def(--s-blockquotes--border-width, props.get(vars.$border-width--thick)) !default;
8
9$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(vars.$list--compact-indent)) !default;
10
11$border-color: props.def(--s-blockquotes--border-width, props.get(vars.$theme, --border)) !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..0d8cdd0
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,39 @@
1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../props';
4
5@forward 'code.vars';
6@use 'code.vars' as vars;
7
8@mixin styles {
9 @include props.materialize(meta.module-variables('vars'));
10
11 @include iro.bem-scope('code') {
12 code {
13 padding-block: props.get(vars.$inline--pad-b);
14 padding-inline: props.get(vars.$inline--pad-i);
15 color: props.get(vars.$inline--fg);
16 background-color: props.get(vars.$inline--bg);
17 border-radius: props.get(vars.$inline--rounding);
18 }
19
20 pre {
21 padding-block: props.get(vars.$block--pad-b);
22 padding-inline: props.get(vars.$block--pad-i);
23 margin-block: props.get(vars.$block--margin-bs) 0;
24 margin-inline: 0;
25 color: props.get(vars.$block--fg);
26 background-color: props.get(vars.$block--bg);
27 border-radius: props.get(vars.$block--rounding);
28
29 code {
30 display: inline-block;
31 padding: 0;
32 margin-inline-end: props.get(vars.$block--pad-i);
33 color: currentColor;
34 background-color: transparent;
35 border-radius: 0;
36 }
37 }
38 }
39}
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
new file mode 100644
index 0000000..27d75f7
--- /dev/null
+++ b/src/scopes/_code.vars.scss
@@ -0,0 +1,18 @@
1@use '../props';
2@use '../vars';
3@use './implicit.vars' as implicit-vars;
4
5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(vars.$size--50)) !default;
6$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(vars.$size--10)) !default;
7$inline--rounding: props.def(--s-code--inline--rounding, props.get(vars.$rounding)) !default;
8
9$block--pad-i: props.def(--s-code--block--pad-i, props.get(vars.$size--150)) !default;
10$block--pad-b: props.def(--s-code--block--pad-b, props.get(vars.$size--85)) !default;
11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
12$block--rounding: props.def(--s-code--block--rounding, props.get(vars.$rounding)) !default;
13
14$inline--fg: props.def(--s-code--inline--fg, props.get(vars.$theme, --red, --1200)) !default;
15$inline--bg: props.def(--s-code--inline--bg, props.get(vars.$theme, --red, --200)) !default;
16
17$block--fg: props.def(--s-code--block--fg, props.get(vars.$theme, --text)) !default;
18$block--bg: props.def(--s-code--block--bg, props.get(vars.$theme, --base, --50)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
new file mode 100644
index 0000000..e97e9f2
--- /dev/null
+++ b/src/scopes/_headings.scss
@@ -0,0 +1,115 @@
1@use 'include-media/dist/include-media' as media;
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../mixins' as mx;
4@use '../props';
5@use '../vars';
6
7@mixin styles {
8 @include iro.bem-scope('headings') {
9 h1,
10 h2,
11 h3,
12 h4,
13 h5,
14 h6 {
15 @include mx.set-font(--headline);
16
17 display: block;
18 text-transform: none;
19 letter-spacing: normal;
20 transform: translateX(-.06em);
21 }
22
23
24 h1 {
25 @include mx.heading-strong(--xxl);
26 }
27
28 h2 {
29 @include mx.heading-strong(--xl);
30 }
31
32 h3 {
33 @include mx.heading-medium(--lg);
34 }
35
36 h4 {
37 @include mx.heading-medium(--md);
38 }
39
40 h5 {
41 @include mx.heading-faint(--sm);
42 }
43
44 h6 {
45 @include mx.heading-faint(--xs);
46 }
47
48 @include iro.bem-elem('highlight') {
49 background-image: linear-gradient(to top,
50 transparent .15em,
51 fn.foreign-color(--heading, --bg) .15em,
52 fn.foreign-color(--heading, --bg) .6em,
53 transparent .6em);
54 }
55
56 @include iro.bem-modifier('display') {
57 h1,
58 h2,
59 h3,
60 h4,
61 h5,
62 h6 {
63 @include mx.set-font(--headline);
64 }
65
66 h1 {
67 @include mx.heading-strong(--display --xxl);
68
69 @include media.media('<=md') {
70 @include mx.heading-strong(--display-sm --xxl);
71 }
72 }
73
74 h2 {
75 @include mx.heading-strong(--display --xl);
76
77 @include media.media('<=md') {
78 @include mx.heading-strong(--display-sm --xl);
79 }
80 }
81
82 h3 {
83 @include mx.heading-strong(--display --lg);
84
85 @include media.media('<=md') {
86 @include mx.heading-strong(--display-sm --lg);
87 }
88 }
89
90 h4 {
91 @include mx.heading-strong(--display --md);
92
93 @include media.media('<=md') {
94 @include mx.heading-strong(--display-sm --md);
95 }
96 }
97
98 h5 {
99 @include mx.heading-medium(--display --sm);
100
101 @include media.media('<=md') {
102 @include mx.heading-medium(--display-sm --sm);
103 }
104 }
105
106 h6 {
107 @include mx.heading-faint(--display --xs);
108
109 @include media.media('<=md') {
110 @include mx.heading-faint(--display-sm --xs);
111 }
112 }
113 }
114 }
115}
diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/scopes/_headings.vars.scss
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
new file mode 100644
index 0000000..9c17868
--- /dev/null
+++ b/src/scopes/_implicit.scss
@@ -0,0 +1,152 @@
1@use 'sass:math';
2@use 'sass:meta';
3@use 'iro-sass/src/iro-sass' as iro;
4@use '../props';
5@use '../vars' as global-vars;
6
7@forward 'implicit.vars';
8@use 'implicit.vars' as vars;
9
10@mixin styles {
11 @include props.materialize(meta.module-variables('vars'));
12
13 html {
14 accent-color: props.get(global-vars.$theme, --accent, --600);
15 scrollbar-color: props.get(global-vars.$theme, --text-disabled) transparent;
16 }
17
18 html,
19 body {
20 block-size: 100%;
21 }
22
23 body {
24 //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
25
26 padding: 0;
27 margin: 0;
28 color: props.get(global-vars.$theme, --text);
29 background-color: props.get(global-vars.$theme, --bg-base);
30 }
31
32 pre,
33 code {
34 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
35 }
36
37 pre,
38 code {
39 //@include mx.set-font(--mono, (--size: .93em));
40 }
41
42 pre {
43 margin: 0;
44 overflow-x: auto;
45
46 code {
47 font-size: 1em;
48 color: currentColor;
49 }
50 }
51
52 h1,
53 h2,
54 h3,
55 h4,
56 h5,
57 h6 {
58 //@include mx.heading-medium(--md);
59
60 margin-block: props.get(vars.$heading--margin-bs) 0;
61
62 & + & {
63 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
64 }
65 }
66
67 p {
68 margin-block: props.get(vars.$paragraph--margin-bs) 0;
69
70 &:empty {
71 display: none;
72 }
73 }
74
75 strong {
76 font-weight: bold;
77 }
78
79 small {
80 font-size: props.get(global-vars.$font-size--75);
81 }
82
83 ul,
84 ol {
85 padding: 0;
86 margin: 0;
87 list-style: none;
88 }
89
90 li {
91 padding: 0;
92 margin: 0;
93 }
94
95 :focus,
96 :focus-visible {
97 outline: 0;
98 }
99
100 :link,
101 :visited {
102 color: currentColor;
103 text-decoration: none;
104 }
105
106
107 button,
108 input,
109 textarea {
110 box-sizing: content-box;
111 padding: 0;
112 margin: 0;
113 font-family: inherit;
114 font-size: 1em;
115 font-style: inherit;
116 font-weight: inherit;
117 line-height: inherit;
118 color: currentColor;
119 text-align: inherit;
120 text-transform: inherit;
121 appearance: none;
122 background: none;
123 border: 0;
124
125 &::-moz-focus-inner {
126 border: 0;
127 }
128 }
129
130 input,
131 textarea {
132 &::placeholder {
133 color: props.get(global-vars.$theme, --text-mute);
134 opacity: 1;
135 }
136
137 &:disabled {
138 color: props.get(global-vars.$theme, --text-disabled);
139 }
140 }
141
142 textarea {
143 block-size: calc(1em * props.get(global-vars.$font--standard--line-height));
144 }
145
146 hr {
147 block-size: props.get(global-vars.$border-width--thin);
148 margin: 0;
149 background-color: props.get(global-vars.$theme, --border-color);
150 border: 0;
151 }
152}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
new file mode 100644
index 0000000..c18ca78
--- /dev/null
+++ b/src/scopes/_implicit.vars.scss
@@ -0,0 +1,7 @@
1@use '../props';
2@use '../vars';
3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(vars.$size--300)) !default;
5
6$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(vars.$size--700)) !default;
7$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(vars.$size--325)) !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
new file mode 100644
index 0000000..69793b2
--- /dev/null
+++ b/src/scopes/_links.scss
@@ -0,0 +1,93 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'iro-sass/src/iro-sass' as iro;
4@use '../props';
5
6@forward 'links.vars';
7@use 'links.vars' as vars;
8
9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-scope('links') {
13 :link,
14 :visited {
15 color: currentColor;
16 text-decoration: underline;
17 text-decoration-thickness: props.get(vars.$underline-width);
18 text-decoration-color: props.get(vars.$underline-color);
19 border-radius: props.get(vars.$rounding);
20 box-decoration-break: clone;
21
22 &:hover {
23 text-decoration: underline;
24 text-decoration-skip-ink: none;
25 text-decoration-thickness: props.get(vars.$hover--underline-width);
26 }
27
28 &:focus-visible {
29 color: props.get(vars.$key-focus--text-color);
30 text-decoration: none;
31 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
32 box-shadow:
33 0
34 0
35 0
36 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
37 props.get(vars.$key-focus--outline-color);
38 }
39 }
40
41 @include iro.bem-modifier('invisible') {
42 :link,
43 :visited {
44 text-decoration: none;
45 }
46 }
47
48 @include iro.bem-modifier('colored') {
49 :link {
50 color: props.get(vars.$colored--text-color);
51 text-decoration-color: props.get(vars.$colored--underline-color);
52
53 &:hover {
54 color: props.get(vars.$colored--hover--text-color);
55 }
56 }
57
58 :visited {
59 color: props.get(vars.$colored--visited--text-color);
60 text-decoration-color: props.get(vars.$colored--visited--underline-color);
61
62 &:hover {
63 color: props.get(vars.$colored--visited--hover--text-color);
64 }
65 }
66 }
67
68 @each $theme in map.keys(props.get(vars.$static-themes)) {
69 @include iro.bem-modifier($theme) {
70 :link,
71 :visited {
72 color: props.get(vars.$static-themes, $theme, --text-color);
73 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
74
75 &:hover {
76 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
77 }
78
79 &:focus-visible {
80 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
81 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
82 box-shadow:
83 0
84 0
85 0
86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
87 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
88 }
89 }
90 }
91 }
92 }
93}
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
new file mode 100644
index 0000000..7880204
--- /dev/null
+++ b/src/scopes/_links.vars.scss
@@ -0,0 +1,47 @@
1@use 'sass:map';
2@use '../props';
3@use '../vars';
4
5$rounding: props.def(--s-links--rounding, props.get(vars.$rounding)) !default;
6$underline-width: props.def(--s-links--underline-width, props.get(vars.$border-width--thin)) !default;
7$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(vars.$border-width--medium)) !default;
8
9$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(vars.$key-focus--border-width)) !default;
10$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(vars.$key-focus--border-offset)) !default;
11$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(vars.$key-focus--outline-width)) !default;
12
13$underline-color: props.def(--s-links--underline-color, props.get(vars.$theme, --text-mute-more)) !default;
14
15$colored--text-color: props.def(--s-links--colored--text-color, props.get(vars.$theme, --accent, --1100)) !default;
16$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(vars.$theme, --accent, --600)) !default;
17$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(vars.$theme, --accent, --1300)) !default;
18
19$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(vars.$theme, --purple, --1100)) !default;
20$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(vars.$theme, --purple, --600)) !default;
21$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(vars.$theme, --purple, --1300)) !default;
22
23$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(vars.$theme, --focus, --text)) !default;
24$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(vars.$theme, --focus, --border)) !default;
25$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(vars.$theme, --focus, --outline)) !default;
26
27$static-themes: props.def(--s-links);
28@each $theme in map.keys(props.get(vars.$transparent-colors)) {
29 $link-theme: #{$theme}-static;
30
31 $static-themes: props.merge($static-themes, (
32 $link-theme: (
33 --text-color: props.get(vars.$transparent-colors, $theme, --800),
34 --underline-color: props.get(vars.$transparent-colors, $theme, --500),
35
36 --hover: (
37 --text-color: props.get(vars.$transparent-colors, $theme, --900),
38 ),
39
40 --key-focus: (
41 --text-color: props.get(vars.$transparent-colors, $theme, --900),
42 --border-color: props.get(vars.$transparent-colors, $theme, --900),
43 --outline-color: props.get(vars.$transparent-colors, $theme, --300),
44 ),
45 )
46 ));
47}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
new file mode 100644
index 0000000..db555a9
--- /dev/null
+++ b/src/scopes/_lists.scss
@@ -0,0 +1,59 @@
1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../props';
4@use '../vars' as global-vars;
5
6@forward 'lists.vars';
7@use 'lists.vars' as vars;
8
9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-scope('lists') {
13 ul,
14 ol {
15 padding-inline-start: props.get(vars.$indent);
16 margin-block-start: props.get(vars.$margin-bs);
17
18 ul,
19 ol {
20 margin-block-start: 0;
21 }
22 }
23
24 ul {
25 list-style: disc;
26 }
27
28 ol {
29 list-style: decimal;
30 }
31
32 dl {
33 padding: 0;
34 margin-block: props.get(vars.$margin-bs) 0;
35 margin-inline: 0;
36 }
37
38 dt {
39 font-weight: bold;
40 color: props.get(global-vars.$theme, --heading);
41 }
42
43 dd {
44 margin-block: 0;
45 margin-inline: props.get(vars.$indent) 0;
46 }
47
48 @include iro.bem-modifier('compact') {
49 ul,
50 ol {
51 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
52 }
53
54 dd {
55 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
56 }
57 }
58 }
59}
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
new file mode 100644
index 0000000..609cfb5
--- /dev/null
+++ b/src/scopes/_lists.vars.scss
@@ -0,0 +1,8 @@
1@use '../props';
2@use '../vars';
3@use './implicit.vars' as implicit-vars;
4
5$indent: props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default;
6$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
7
8$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$list--compact-indent)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
new file mode 100644
index 0000000..f722864
--- /dev/null
+++ b/src/scopes/_tables.scss
@@ -0,0 +1,104 @@
1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn;
4@use '../mixins' as mx;
5
6@forward 'lists.vars';
7@use 'lists.vars' as vars;
8
9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-scope('tables') {
13 table {
14 margin-block-start: fn.dim(--margin-bs);
15 border-spacing: 0;
16 border-collapse: separate;
17 }
18
19 th {
20 @include mx.set-font(--standard, (
21 --line-height: null,
22 --size: fn.global-dim(--font-size --50),
23 --weight: bold,
24 --transform: uppercase,
25 --spacing: .5px
26 ));
27
28 padding-block: fn.dim(--pad-b);
29 padding-inline: fn.dim(--pad-i);
30 color: fn.color(--heading);
31 text-align: start;
32 }
33
34 td {
35 padding-block: fn.dim(--pad-b);
36 padding-inline: fn.dim(--pad-i);
37 border-color: fn.color(--border);
38 border-style: solid;
39 border-width: 0;
40 border-block-start-width: fn.dim(--border);
41 }
42
43 tr {
44 &:last-child {
45 td {
46 border-block-end-width: fn.dim(--border);
47 }
48 }
49 }
50
51 @include iro.bem-modifier('flush') {
52 th,
53 td {
54 &:first-child {
55 padding-inline-start: 0;
56 }
57
58 &:last-child {
59 padding-inline-end: 0;
60 }
61 }
62 }
63
64 @include iro.bem-modifier('box') {
65 td {
66 background-color: fn.color(--box --bg);
67
68 &:first-child {
69 border-inline-start-width: fn.dim(--border);
70 }
71
72 &:last-child {
73 border-inline-end-width: fn.dim(--border);
74 }
75 }
76
77 tr {
78 &:first-child {
79 td {
80 &:first-child {
81 border-start-start-radius: fn.dim(--rounding);
82 }
83
84 &:last-child {
85 border-start-end-radius: fn.dim(--rounding);
86 }
87 }
88 }
89
90 &:last-child {
91 td {
92 &:first-child {
93 border-end-start-radius: fn.dim(--rounding);
94 }
95
96 &:last-child {
97 border-end-end-radius: fn.dim(--rounding);
98 }
99 }
100 }
101 }
102 }
103 }
104}
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
new file mode 100644
index 0000000..2c3f255
--- /dev/null
+++ b/src/scopes/_tables.vars.scss
@@ -0,0 +1,24 @@
1@use '../props';
2@use '../vars';
3
4$indent: props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default;
5$margin-bs: props.def(--s-lists--margin-bs, props.get(vars.$paragraph--margin-bs)) !default;
6
7$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$list--compact-indent)) !default;
8
9@include iro.props-store((
10 --dims: (
11 --pad-i: fn.foreign-dim(--table, --pad-i),
12 --pad-b: fn.foreign-dim(--table, --pad-b),
13 --rounding: fn.foreign-dim(--table, --rounding),
14 --border: fn.foreign-dim(--table, --border),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 ),
17 --colors: (
18 --border: fn.foreign-color(--table, --border),
19 --heading: fn.foreign-color(--table, --heading),
20 --box: (
21 --bg: fn.foreign-color(--table, --box --bg),
22 )
23 )
24));
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-25 14:13:10 +0000