diff options
author | Volpeon <git@volpeon.ink> | 2024-10-18 18:08:24 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-18 18:08:24 +0200 |
commit | 365c56edcc36b5b92902bac01ce44b43d01e8685 (patch) | |
tree | 644611792591a76e605068d0c9e230fad6a633e7 /src/scopes | |
parent | Revamped variable management (diff) | |
download | iro-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.scss | 25 | ||||
-rw-r--r-- | src/scopes/_blockquotes.vars.scss | 11 | ||||
-rw-r--r-- | src/scopes/_code.scss | 39 | ||||
-rw-r--r-- | src/scopes/_code.vars.scss | 18 | ||||
-rw-r--r-- | src/scopes/_headings.scss | 115 | ||||
-rw-r--r-- | src/scopes/_headings.vars.scss | 0 | ||||
-rw-r--r-- | src/scopes/_implicit.scss | 152 | ||||
-rw-r--r-- | src/scopes/_implicit.vars.scss | 7 | ||||
-rw-r--r-- | src/scopes/_links.scss | 93 | ||||
-rw-r--r-- | src/scopes/_links.vars.scss | 47 | ||||
-rw-r--r-- | src/scopes/_lists.scss | 59 | ||||
-rw-r--r-- | src/scopes/_lists.vars.scss | 8 | ||||
-rw-r--r-- | src/scopes/_tables.scss | 104 | ||||
-rw-r--r-- | src/scopes/_tables.vars.scss | 24 |
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 | )); | ||