summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-23 22:14:15 +0200
committerVolpeon <git@volpeon.ink>2024-10-23 22:14:15 +0200
commit862b746f9ea1ce127a15e300e32d7580ba1cdfa9 (patch)
treef55704ed05b7988306364b8cd238bc7c33ad69be
parentMake it easier to extend config (diff)
downloadiro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.tar.gz
iro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.tar.bz2
iro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.zip
Use CSS layers
Diffstat
-rw-r--r--package.json2
-rw-r--r--pnpm-lock.yaml10
-rw-r--r--src/scopes/_implicit.scss236
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 03:31:25 +0000