diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | pnpm-lock.yaml | 10 | ||||
-rw-r--r-- | src/scopes/_implicit.scss | 236 |
3 files changed, 125 insertions, 123 deletions
diff --git a/package.json b/package.json index 9abf0aa..6b07c26 100644 --- a/package.json +++ b/package.json | |||
@@ -20,7 +20,7 @@ | |||
20 | }, | 20 | }, |
21 | "dependencies": { | 21 | "dependencies": { |
22 | "include-media": "^2.0.0", | 22 | "include-media": "^2.0.0", |
23 | "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a" | 23 | "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf" |
24 | }, | 24 | }, |
25 | "devDependencies": { | 25 | "devDependencies": { |
26 | "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0", | 26 | "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0", |
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c6b6b2..08ad701 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml | |||
@@ -12,8 +12,8 @@ importers: | |||
12 | specifier: ^2.0.0 | 12 | specifier: ^2.0.0 |
13 | version: 2.0.0 | 13 | version: 2.0.0 |
14 | iro-sass: | 14 | iro-sass: |
15 | specifier: git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a | 15 | specifier: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf |
16 | version: git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a | 16 | version: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf |
17 | devDependencies: | 17 | devDependencies: |
18 | iro-icons: | 18 | iro-icons: |
19 | specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0 | 19 | specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0 |
@@ -688,8 +688,8 @@ packages: | |||
688 | peerDependencies: | 688 | peerDependencies: |
689 | svg-sprite: ^2.0.2 | 689 | svg-sprite: ^2.0.2 |
690 | 690 | ||
691 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a: | 691 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: |
692 | resolution: {commit: 14f85b1899ae57edc3733bb39a9d311463f7c94a, repo: https://git.vulpes.one/git/iro-sass.git, type: git} | 692 | resolution: {commit: a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf, repo: https://git.vulpes.one/git/iro-sass.git, type: git} |
693 | version: 1.0.2 | 693 | version: 1.0.2 |
694 | 694 | ||
695 | is-arrayish@0.2.1: | 695 | is-arrayish@0.2.1: |
@@ -1916,7 +1916,7 @@ snapshots: | |||
1916 | dependencies: | 1916 | dependencies: |
1917 | svg-sprite: 2.0.4 | 1917 | svg-sprite: 2.0.4 |
1918 | 1918 | ||
1919 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a: {} | 1919 | iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: {} |
1920 | 1920 | ||
1921 | is-arrayish@0.2.1: {} | 1921 | is-arrayish@0.2.1: {} |
1922 | 1922 | ||
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index c368072..18791a8 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss | |||
@@ -11,147 +11,149 @@ | |||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | html { | 14 | @layer scope { |
15 | accent-color: props.get(core.$theme, --accent, --600); | 15 | html { |
16 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; | 16 | accent-color: props.get(core.$theme, --accent, --600); |
17 | } | 17 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; |
18 | } | ||
18 | 19 | ||
19 | html, | 20 | html, |
20 | body { | 21 | body { |
21 | block-size: 100%; | 22 | block-size: 100%; |
22 | } | 23 | } |
23 | 24 | ||
24 | body { | 25 | body { |
25 | padding: 0; | 26 | padding: 0; |
26 | margin: 0; | 27 | margin: 0; |
27 | font-family: props.get(vars.$body--font-family); | 28 | font-family: props.get(vars.$body--font-family); |
28 | font-size: props.get(vars.$body--font-size); | 29 | font-size: props.get(vars.$body--font-size); |
29 | font-feature-settings: props.get(vars.$body--feature-settings); | 30 | font-feature-settings: props.get(vars.$body--feature-settings); |
30 | line-height: props.get(vars.$body--line-height); | 31 | line-height: props.get(vars.$body--line-height); |
31 | color: props.get(core.$theme, --text); | 32 | color: props.get(core.$theme, --text); |
32 | background-color: props.get(core.$theme, --bg-base); | 33 | background-color: props.get(core.$theme, --bg-base); |
33 | } | 34 | } |
34 | 35 | ||
35 | pre, | 36 | pre, |
36 | code { | 37 | code { |
37 | font-family: props.get(vars.$code--font-family); | 38 | font-family: props.get(vars.$code--font-family); |
38 | font-size: props.get(vars.$code--font-size); | 39 | font-size: props.get(vars.$code--font-size); |
39 | font-feature-settings: props.get(vars.$code--feature-settings); | 40 | font-feature-settings: props.get(vars.$code--feature-settings); |
40 | line-height: props.get(vars.$code--line-height); | 41 | line-height: props.get(vars.$code--line-height); |
41 | } | 42 | } |
42 | 43 | ||
43 | pre { | 44 | pre { |
44 | margin: 0; | 45 | margin: 0; |
45 | overflow-x: auto; | 46 | overflow-x: auto; |
46 | 47 | ||
47 | code { | 48 | code { |
48 | font-size: 1em; | 49 | font-size: 1em; |
49 | color: currentColor; | 50 | color: currentColor; |
51 | } | ||
50 | } | 52 | } |
51 | } | ||
52 | 53 | ||
53 | h1, | 54 | h1, |
54 | h2, | 55 | h2, |
55 | h3, | 56 | h3, |
56 | h4, | 57 | h4, |
57 | h5, | 58 | h5, |
58 | h6 { | 59 | h6 { |
59 | margin-block: props.get(vars.$heading--margin-bs) 0; | 60 | margin-block: props.get(vars.$heading--margin-bs) 0; |
60 | font-family: props.get(vars.$heading--font-family); | 61 | font-family: props.get(vars.$heading--font-family); |
61 | font-size: props.get(vars.$heading--font-size); | 62 | font-size: props.get(vars.$heading--font-size); |
62 | font-weight: props.get(vars.$heading--font-weight); | 63 | font-weight: props.get(vars.$heading--font-weight); |
63 | font-feature-settings: props.get(vars.$heading--feature-settings); | 64 | font-feature-settings: props.get(vars.$heading--feature-settings); |
64 | line-height: props.get(vars.$heading--line-height); | 65 | line-height: props.get(vars.$heading--line-height); |
65 | color: props.get(vars.$heading--color); | 66 | color: props.get(vars.$heading--color); |
66 | 67 | ||
67 | & + & { | 68 | & + & { |
68 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); | 69 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); |
70 | } | ||
69 | } | 71 | } |
70 | } | ||
71 | 72 | ||
72 | p { | 73 | p { |
73 | margin-block: props.get(vars.$paragraph--margin-bs) 0; | 74 | margin-block: props.get(vars.$paragraph--margin-bs) 0; |
74 | 75 | ||
75 | &:empty { | 76 | &:empty { |
76 | display: none; | 77 | display: none; |
78 | } | ||
77 | } | 79 | } |
78 | } | ||
79 | 80 | ||
80 | strong { | 81 | strong { |
81 | font-weight: bold; | 82 | font-weight: bold; |
82 | } | 83 | } |
83 | 84 | ||
84 | small { | 85 | small { |
85 | font-size: props.get(vars.$small--font-size); | 86 | font-size: props.get(vars.$small--font-size); |
86 | } | 87 | } |
87 | 88 | ||
88 | ul, | 89 | ul, |
89 | ol { | 90 | ol { |
90 | padding: 0; | 91 | padding: 0; |
91 | margin: 0; | 92 | margin: 0; |
92 | list-style: none; | 93 | list-style: none; |
93 | } | 94 | } |
94 | 95 | ||
95 | li { | 96 | li { |
96 | padding: 0; | 97 | padding: 0; |
97 | margin: 0; | 98 | margin: 0; |
98 | } | 99 | } |
99 | 100 | ||
100 | :focus, | 101 | :focus, |
101 | :focus-visible { | 102 | :focus-visible { |
102 | outline: 0; | 103 | outline: 0; |
103 | } | 104 | } |
104 | 105 | ||
105 | :link, | 106 | :link, |
106 | :visited { | 107 | :visited { |
107 | color: currentColor; | 108 | color: currentColor; |
108 | text-decoration: none; | 109 | text-decoration: none; |
109 | } | 110 | } |
110 | 111 | ||
111 | 112 | ||
112 | button, | 113 | button, |
113 | input, | 114 | input, |
114 | textarea { | 115 | textarea { |
115 | box-sizing: content-box; | 116 | box-sizing: content-box; |
116 | padding: 0; | 117 | padding: 0; |
117 | margin: 0; | 118 | margin: 0; |
118 | font-family: inherit; | 119 | font-family: inherit; |
119 | font-size: 1em; | 120 | font-size: 1em; |
120 | font-style: inherit; | 121 | font-style: inherit; |
121 | font-weight: inherit; | 122 | font-weight: inherit; |
122 | line-height: inherit; | 123 | line-height: inherit; |
123 | color: currentColor; | 124 | color: currentColor; |
124 | text-align: inherit; | 125 | text-align: inherit; |
125 | text-transform: inherit; | 126 | text-transform: inherit; |
126 | appearance: none; | 127 | appearance: none; |
127 | background: none; | 128 | background: none; |
128 | border: 0; | 129 | border: 0; |
129 | 130 | ||
130 | &::-moz-focus-inner { | 131 | &::-moz-focus-inner { |
131 | border: 0; | 132 | border: 0; |
133 | } | ||
132 | } | 134 | } |
133 | } | ||
134 | 135 | ||
135 | input, | 136 | input, |
136 | textarea { | 137 | textarea { |
137 | &::placeholder { | 138 | &::placeholder { |
138 | color: props.get(core.$theme, --text-mute); | 139 | color: props.get(core.$theme, --text-mute); |
139 | opacity: 1; | 140 | opacity: 1; |
140 | } | 141 | } |
141 | 142 | ||
142 | &:disabled { | 143 | &:disabled { |
143 | color: props.get(core.$theme, --text-disabled); | 144 | color: props.get(core.$theme, --text-disabled); |
145 | } | ||
144 | } | 146 | } |
145 | } | ||
146 | 147 | ||
147 | textarea { | 148 | textarea { |
148 | block-size: calc(1em * props.get(core.$font--standard--line-height)); | 149 | block-size: calc(1em * props.get(core.$font--standard--line-height)); |
149 | } | 150 | } |
150 | 151 | ||
151 | hr { | 152 | hr { |
152 | block-size: props.get(core.$border-width--thin); | 153 | block-size: props.get(core.$border-width--thin); |
153 | margin: 0; | 154 | margin: 0; |
154 | background-color: props.get(core.$theme, --border); | 155 | background-color: props.get(core.$theme, --border); |
155 | border: 0; | 156 | border: 0; |
157 | } | ||
156 | } | 158 | } |
157 | } | 159 | } |