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.scss68
1 files changed, 31 insertions, 37 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 37d9cae..2084905 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:list';
2@use 'iro-sass/src/index' as iro; 3@use 'iro-sass/src/index' as iro;
3@use 'include-media/dist/include-media' as media; 4@use 'include-media/dist/include-media' as media;
4@use '@oddbird/blend'; 5@use '@oddbird/blend';
@@ -99,6 +100,8 @@
99 --thin: 1px, 100 --thin: 1px,
100 ), 101 ),
101 102
103 --rounding: 3px,
104
102 --focus: ( 105 --focus: (
103 --outline-width: 3px, 106 --outline-width: 3px,
104 ), 107 ),
@@ -173,58 +176,49 @@
173 176
174// 177//
175 178
176@include iro.props-store(( 179@each $theme-name, $theme in config.$themes {
177 --colors: ( 180 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
178 --base: fn.palette(
179 map.get(config.$theme-light, --base),
180 map.get(config.$theme-light, --grays),
181 ),
182 ),
183));
184
185@include iro.props-store((
186 --colors: (
187 --base: fn.palette(
188 map.get(config.$theme-dark, --base),
189 map.get(config.$theme-dark, --grays),
190 ),
191 ),
192), 'dark');
193 181
194@each $name, $theme in config.$themes { 182 @each $palette-name, $palette in map.get($theme, --palettes) {
195 $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name); 183 $base-color: list.nth($palette, 1);
184 $contrasts: list.nth($palette, 2);
185 $ranges: list.nth($palette, 3);
196 186
197 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
198 @include iro.props-store(( 187 @include iro.props-store((
199 --colors: ( 188 --colors: (
200 --#{$color}: fn.palette( 189 $palette-name: fn.palette(
201 map.get($theme, --#{$color}), 190 $base-color,
202 map.get($theme, --colors), 191 map.get($theme, --contrasts, $contrasts),
203 map.get($theme, --base), 192 map.get($theme, --ranges, $ranges),
193 nth(map.get($theme, --palettes, --base), 1),
204 ), 194 ),
205 ), 195 ),
206 ), $props-name); 196 ), $tree);
207 }
208 197
209 @include iro.props-store(( 198 @if $theme-name == config.$theme-default {
210 --colors: ( 199 @include iro.props-store((
211 --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name), 200 --colors: (
212 ), 201 #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
213 ), $props-name); 202 ),
203 ), $tree);
204 }
205 }
214 206
215 @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' { 207 @each $color, $ref in map.get($theme, --semantic-colors) {
216 @include iro.props-store(( 208 @include iro.props-store((
217 --colors: ( 209 --colors: (
218 --#{$color}: fn.color(--base map.get($theme, --#{$color})), 210 $color: fn.color($ref),
219 ), 211 ),
220 ), $props-name); 212 ), $tree);
221 } 213 }
222} 214}
223 215
224@each $color in 'blue' 'purple' 'red' 'green' 'yellow' { 216@each $theme-name, $theme in config.$themes {
217 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
218
225 @include iro.props-store(( 219 @include iro.props-store((
226 --colors: ( 220 --colors: (
227 --#{$color}-static: iro.props-get-static(--colors --#{$color}), 221
228 ), 222 ),
229 )); 223 ), $tree);
230} 224}