summaryrefslogtreecommitdiffstats
path: root/src/_declare-vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_declare-vars.scss')
-rw-r--r--src/_declare-vars.scss225
1 files changed, 52 insertions, 173 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index bf7e955..37d9cae 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,7 +1,9 @@
1@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
3@use '@oddbird/blend'; 4@use '@oddbird/blend';
4@use 'functions' as fn; 5@use 'functions' as fn;
6@use 'config';
5 7
6@include iro.props-store(( 8@include iro.props-store((
7 --dims: ( 9 --dims: (
@@ -102,12 +104,12 @@
102 ), 104 ),
103 105
104 --paragraph: ( 106 --paragraph: (
105 --margin-top: fn.dim(--size --300, null), 107 --margin-bs: fn.dim(--size --300, null),
106 ), 108 ),
107 109
108 --heading: ( 110 --heading: (
109 --margin-top: fn.dim(--size --700, null), 111 --margin-bs: fn.dim(--size --700, null),
110 --margin-top-sibling: fn.dim(--size --325, null), 112 --margin-bs-sibling: fn.dim(--size --325, null),
111 113
112 --lg: fn.dim(--font-size --400, null), 114 --lg: fn.dim(--font-size --400, null),
113 --md: fn.dim(--font-size --75, null), 115 --md: fn.dim(--font-size --75, null),
@@ -137,12 +139,18 @@
137 --compact-indent: fn.dim(--size --250, null), 139 --compact-indent: fn.dim(--size --250, null),
138 ), 140 ),
139 ), 141 ),
140), 'dims'); 142));
143
144@each $breakpoint in map.keys(media.$breakpoints) {
145 @include media.media('<=#{$breakpoint}') {
146 @include iro.props-store((), $breakpoint);
147 }
148}
141 149
142@include iro.props-store(( 150@include iro.props-store((
143 --dims: ( 151 --dims: (
144 --heading: ( 152 --heading: (
145 --margin-top: fn.dim(--size --600, null), 153 --margin-bs: fn.dim(--size --600, null),
146 ), 154 ),
147 155
148 --list: ( 156 --list: (
@@ -154,7 +162,7 @@
154@include iro.props-store(( 162@include iro.props-store((
155 --dims: ( 163 --dims: (
156 --heading: ( 164 --heading: (
157 --margin-top: fn.dim(--size --500, null), 165 --margin-bs: fn.dim(--size --500, null),
158 ), 166 ),
159 167
160 --list: ( 168 --list: (
@@ -167,185 +175,56 @@
167 175
168@include iro.props-store(( 176@include iro.props-store((
169 --colors: ( 177 --colors: (
170 --gray: fn.gray-palette(100%), 178 --base: fn.palette(
171 ), 179 map.get(config.$theme-light, --base),
172), 'palette-light-hi'); 180 map.get(config.$theme-light, --grays),
173
174@include iro.props-store((
175 --colors: (
176 --gray: fn.gray-palette(97%),
177 ),
178), 'palette-light');
179
180@include iro.props-store((
181 --colors: (
182 --gray: fn.gray-palette(93%),
183 ),
184), 'palette-light-lo');
185
186// @include iro.props-store((
187// --colors: (
188// --gray: fn.gray-palette(88%),
189// ),
190// ), 'palette-light-lo2');
191
192@include iro.props-store((
193 --colors: (
194 --bg-hi2: fn.color(--gray --1, null), // Lightest background
195 --bg-hi: fn.color(--gray --2, null), // Lighter background
196 --bg: fn.color(--gray --3, null), // Background
197
198 --obj-hi: fn.color(--gray --4, null),
199 --obj: fn.color(--gray --5, null),
200 --obj-lo: fn.color(--gray --6, null),
201
202 --fg-hi3: fn.color(--gray --7, null), // Disabled text
203 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
204 --fg-hi: fn.color(--gray --9, null), // Faint text
205 --fg: fn.color(--gray --10, null), // Text
206 --fg-lo: fn.color(--gray --11, null), // Strong text
207
208 --border: (
209 --regular: fn.color(--obj, null),
210 --stable: iro.props-get-static(--colors --gray --5, 'palette-light'),
211 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-light'),
212 ),
213
214 --blue: fn.color-palette(blend.lch(48% 50 279)),
215 --purple: fn.color-palette(blend.lch(48% 50 308)),
216 --red: fn.color-palette(blend.lch(48% 50 23)),
217 --green: fn.color-palette(blend.lch(63% 50 147)),
218 --yellow: fn.color-palette(blend.lch(68% 50 70)),
219
220 --accent: (
221 --primary: iro.props-ref('colors', --colors --blue),
222 --error: iro.props-ref('colors', --colors --red),
223 --success: iro.props-ref('colors', --colors --green),
224 --warning: iro.props-ref('colors', --colors --yellow),
225 --link-idle: iro.props-ref('colors', --colors --blue),
226 --link-visited: iro.props-ref('colors', --colors --purple),
227 ),
228
229 --selection: (
230 --bg: fn.color(--accent --primary --selection, null),
231 --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
232 --fg: fn.color(--accent --primary --solid --fg, null),
233 ), 181 ),
234
235 --focus: (
236 --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
237 --fill: fn.color(--accent --primary --solid --bg, null),
238 --text: fn.color(--accent --primary --solid --obj, null),
239 --fill-text: fn.color(--accent --primary --solid --fg, null),
240 ),
241 ),
242), 'colors');
243
244//
245
246// @include iro.props-store((
247// --colors: (
248// --gray: fn.gray-palette(1%),
249// ),
250// ), 'palette-dark-hi2');
251
252@include iro.props-store((
253 --colors: (
254 --gray: fn.gray-palette(7%),
255 ),
256), 'palette-dark-hi');
257
258@include iro.props-store((
259 --colors: (
260 --gray: fn.gray-palette(12%),
261 ), 182 ),
262), 'palette-dark'); 183));
263 184
264@include iro.props-store(( 185@include iro.props-store((
265 --colors: ( 186 --colors: (
266 --gray: fn.gray-palette(17%), 187 --base: fn.palette(
267 ), 188 map.get(config.$theme-dark, --base),
268), 'palette-dark-lo'); 189 map.get(config.$theme-dark, --grays),
269
270@include iro.props-store((
271 --colors: (
272 --border: (
273 --stable: iro.props-get-static(--colors --gray --5, 'palette-dark-lo'),
274 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-dark-lo'),
275 ), 190 ),
276
277 --blue: fn.color-palette(blend.lch(63% 50 279), -1),
278 --purple: fn.color-palette(blend.lch(63% 50 308), -1),
279 --red: fn.color-palette(blend.lch(63% 50 23), -1),
280 --green: fn.color-palette(blend.lch(78% 50 147), -1),
281 --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
282
283 --accent: (
284 --primary: iro.props-ref('colors-dark', --colors --blue),
285 --error: iro.props-ref('colors-dark', --colors --red),
286 --success: iro.props-ref('colors-dark', --colors --green),
287 --warning: iro.props-ref('colors-dark', --colors --yellow),
288 --link-idle: iro.props-ref('colors-dark', --colors --blue),
289 --link-visited: iro.props-ref('colors-dark', --colors --purple),
290 ),
291 )
292), 'colors-dark');
293
294//
295
296@include iro.props-store((
297 --colors: (
298 --gray: fn.gray-palette(97%, true),
299 ), 191 ),
300), 'palette-media-light'); 192), 'dark');
301
302@include iro.props-store((
303 --colors: (
304 --border: (
305 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-light'),
306 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
307 ),
308 )
309), 'colors-media-light');
310 193
311// 194@each $name, $theme in config.$themes {
195 $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
312 196
313@include iro.props-store(( 197 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
314 --colors: ( 198 @include iro.props-store((
315 --gray: fn.gray-palette(12%, true), 199 --colors: (
316 ), 200 --#{$color}: fn.palette(
317), 'palette-media-dark'); 201 map.get($theme, --#{$color}),
202 map.get($theme, --colors),
203 map.get($theme, --base),
204 ),
205 ),
206 ), $props-name);
207 }
318 208
319@include iro.props-store(( 209 @include iro.props-store((
320 --colors: ( 210 --colors: (
321 --border: ( 211 --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
322 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
323 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'),
324 ), 212 ),
213 ), $props-name);
325 214
326 --blue: iro.props-get-static(--colors --blue, 'colors-dark'), 215 @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {
327 --purple: iro.props-get-static(--colors --purple, 'colors-dark'), 216 @include iro.props-store((
328 --red: iro.props-get-static(--colors --red, 'colors-dark'), 217 --colors: (
329 --green: iro.props-get-static(--colors --green, 'colors-dark'), 218 --#{$color}: fn.color(--base map.get($theme, --#{$color})),
330 --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'), 219 ),
220 ), $props-name);
221 }
222}
331 223
332 --accent: ( 224@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
333 --primary: iro.props-ref('colors-media', --colors --blue), 225 @include iro.props-store((
334 --error: iro.props-ref('colors-media', --colors --red), 226 --colors: (
335 --success: iro.props-ref('colors-media', --colors --green), 227 --#{$color}-static: iro.props-get-static(--colors --#{$color}),
336 --warning: iro.props-ref('colors-media', --colors --yellow),
337 --link-idle: iro.props-ref('colors-media', --colors --blue),
338 --link-visited: iro.props-ref('colors-media', --colors --purple),
339 ), 228 ),
340 ) 229 ));
341), 'colors-media');
342
343//
344
345@each $breakpoint in map-keys(media.$breakpoints) {
346 @include media.media('<=#{$breakpoint}') {
347 @include iro.props-store((
348 --colors: ()
349 ), $breakpoint);
350 }
351} 230}