summaryrefslogtreecommitdiffstats
path: root/src/scopes/_implicit.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes/_implicit.scss')
-rw-r--r--src/scopes/_implicit.scss105
1 files changed, 53 insertions, 52 deletions
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index f8c575d..728fd22 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,21 +1,21 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:math"; 2@use 'sass:math';
3@use "sass:meta"; 3@use 'sass:meta';
4@use "sass:string"; 4@use 'sass:string';
5@use "pkg:iro-sass/bem"; 5@use 'pkg:iro-sass/src/bem';
6@use "pkg:iro-sass/props"; 6@use 'pkg:iro-sass/src/props';
7@use "../props" as *; 7@use '../props' as *;
8@use "../core.vars" as core; 8@use '../core.vars' as core;
9 9
10@forward "implicit.vars"; 10@forward 'implicit.vars';
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 &:has(dialog[open]), 21 &:has(dialog[open]),
@@ -26,31 +26,31 @@
26 } 26 }
27 27
28 body { 28 body {
29 padding: 0; 29 padding: 0;
30 margin: 0; 30 margin: 0;
31 font-family: props.get(vars.$body--font-family); 31 font-family: props.get(vars.$body--font-family);
32 font-size: props.get(vars.$body--font-size); 32 font-size: props.get(vars.$body--font-size);
33 font-feature-settings: props.get(vars.$body--feature-settings); 33 font-feature-settings: props.get(vars.$body--feature-settings);
34 line-height: props.get(vars.$body--line-height); 34 line-height: props.get(vars.$body--line-height);
35 color: props.get(core.$theme, --text); 35 color: props.get(core.$theme, --text);
36 background-color: props.get(core.$theme, --bg-base); 36 background-color: props.get(core.$theme, --bg-base);
37 } 37 }
38 38
39 pre, 39 pre,
40 code { 40 code {
41 font-family: props.get(vars.$code--font-family); 41 font-family: props.get(vars.$code--font-family);
42 font-size: props.get(vars.$code--font-size); 42 font-size: props.get(vars.$code--font-size);
43 font-feature-settings: props.get(vars.$code--feature-settings); 43 font-feature-settings: props.get(vars.$code--feature-settings);
44 line-height: props.get(vars.$code--line-height); 44 line-height: props.get(vars.$code--line-height);
45 } 45 }
46 46
47 pre { 47 pre {
48 margin: 0; 48 margin: 0;
49 overflow-x: auto; 49 overflow-x: auto;
50 50
51 code { 51 code {
52 font-size: 1em; 52 font-size: 1em;
53 color: currentColor; 53 color: currentColor;
54 } 54 }
55 } 55 }
56 56
@@ -60,13 +60,13 @@
60 h4, 60 h4,
61 h5, 61 h5,
62 h6 { 62 h6 {
63 margin-block: props.get(vars.$heading--margin-bs) 0; 63 margin-block: props.get(vars.$heading--margin-bs) 0;
64 font-family: props.get(vars.$heading--font-family); 64 font-family: props.get(vars.$heading--font-family);
65 font-size: props.get(vars.$heading--font-size); 65 font-size: props.get(vars.$heading--font-size);
66 font-weight: props.get(vars.$heading--font-weight); 66 font-weight: props.get(vars.$heading--font-weight);
67 font-feature-settings: props.get(vars.$heading--feature-settings); 67 font-feature-settings: props.get(vars.$heading--feature-settings);
68 line-height: props.get(vars.$heading--line-height); 68 line-height: props.get(vars.$heading--line-height);
69 color: props.get(vars.$heading--color); 69 color: props.get(vars.$heading--color);
70 70
71 & + & { 71 & + & {
72 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 72 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
@@ -91,14 +91,14 @@
91 91
92 ul, 92 ul,
93 ol { 93 ol {
94 padding: 0; 94 padding: 0;
95 margin: 0; 95 margin: 0;
96 list-style: none; 96 list-style: none;
97 } 97 }
98 98
99 li { 99 li {
100 padding: 0; 100 padding: 0;
101 margin: 0; 101 margin: 0;
102 } 102 }
103 103
104 :focus, 104 :focus,
@@ -108,27 +108,28 @@
108 108
109 :link, 109 :link,
110 :visited { 110 :visited {
111 color: currentColor; 111 color: currentColor;
112 text-decoration: none; 112 text-decoration: none;
113 } 113 }
114 114
115
115 button, 116 button,
116 input, 117 input,
117 textarea { 118 textarea {
118 box-sizing: content-box; 119 box-sizing: content-box;
119 padding: 0; 120 padding: 0;
120 margin: 0; 121 margin: 0;
121 font-family: inherit; 122 font-family: inherit;
122 font-size: 1em; 123 font-size: 1em;
123 font-style: inherit; 124 font-style: inherit;
124 font-weight: inherit; 125 font-weight: inherit;
125 line-height: inherit; 126 line-height: inherit;
126 color: currentColor; 127 color: currentColor;
127 text-align: inherit; 128 text-align: inherit;
128 text-transform: inherit; 129 text-transform: inherit;
129 appearance: none; 130 appearance: none;
130 background: none; 131 background: none;
131 border: 0; 132 border: 0;
132 133
133 &::-moz-focus-inner { 134 &::-moz-focus-inner {
134 border: 0; 135 border: 0;
@@ -138,7 +139,7 @@
138 input, 139 input,
139 textarea { 140 textarea {
140 &::placeholder { 141 &::placeholder {
141 color: props.get(core.$theme, --text-mute); 142 color: props.get(core.$theme, --text-mute);
142 opacity: 1; 143 opacity: 1;
143 } 144 }
144 145
@@ -152,15 +153,15 @@
152 } 153 }
153 154
154 hr { 155 hr {
155 block-size: props.get(core.$border-width--thin); 156 block-size: props.get(core.$border-width--thin);
156 margin: 0; 157 margin: 0;
157 background-color: props.get(core.$theme, --border); 158 background-color: props.get(core.$theme, --border);
158 border: 0; 159 border: 0;
159 } 160 }
160 161
161 figure { 162 figure {
162 padding: 0; 163 padding: 0;
163 margin: 0; 164 margin: 0;
164 } 165 }
165 166
166 @each $theme in map.keys(props.get(core.$transparent-colors)) { 167 @each $theme in map.keys(props.get(core.$transparent-colors)) {