summaryrefslogtreecommitdiffstats
path: root/src_old/_vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src_old/_vars.scss')
-rw-r--r--src_old/_vars.scss298
1 files changed, 0 insertions, 298 deletions
diff --git a/src_old/_vars.scss b/src_old/_vars.scss
deleted file mode 100644
index 6e2cbfc..0000000
--- a/src_old/_vars.scss
+++ /dev/null
@@ -1,298 +0,0 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:list';
4@use 'iro-sass/src/index' as iro;
5@use 'include-media/dist/include-media' as media;
6@use 'functions' as fn;
7@use 'config';
8
9@include iro.props-store((
10 --dims: (
11 --size: (
12 --0: 0,
13 --10: iro.fn-px-to-rem(1px),
14 --25: iro.fn-px-to-rem(2px),
15 --40: iro.fn-px-to-rem(3px),
16 --50: iro.fn-px-to-rem(4px),
17 --65: iro.fn-px-to-rem(5px),
18 --75: iro.fn-px-to-rem(6px),
19 --85: iro.fn-px-to-rem(7px),
20 --100: iro.fn-px-to-rem(8px),
21 --115: iro.fn-px-to-rem(9px),
22 --125: iro.fn-px-to-rem(10px),
23 --130: iro.fn-px-to-rem(11px),
24 --150: iro.fn-px-to-rem(12px),
25 --160: iro.fn-px-to-rem(13px),
26 --175: iro.fn-px-to-rem(14px),
27 --200: iro.fn-px-to-rem(16px),
28 --225: iro.fn-px-to-rem(18px),
29 --250: iro.fn-px-to-rem(20px),
30 --275: iro.fn-px-to-rem(22px),
31 --300: iro.fn-px-to-rem(24px),
32 --325: iro.fn-px-to-rem(26px),
33 --350: iro.fn-px-to-rem(28px),
34 --375: iro.fn-px-to-rem(30px),
35 --400: iro.fn-px-to-rem(32px),
36 --450: iro.fn-px-to-rem(36px),
37 --500: iro.fn-px-to-rem(40px),
38 --550: iro.fn-px-to-rem(44px),
39 --600: iro.fn-px-to-rem(48px),
40 --650: iro.fn-px-to-rem(52px),
41 --700: iro.fn-px-to-rem(56px),
42 --800: iro.fn-px-to-rem(64px),
43 --900: iro.fn-px-to-rem(72px),
44 --1000: iro.fn-px-to-rem(80px),
45 --1200: iro.fn-px-to-rem(96px),
46 --1600: iro.fn-px-to-rem(128px),
47 --2000: iro.fn-px-to-rem(160px),
48 --2400: iro.fn-px-to-rem(192px),
49 --2500: iro.fn-px-to-rem(200px),
50 --2600: iro.fn-px-to-rem(208px),
51 --2800: iro.fn-px-to-rem(224px),
52 --3200: iro.fn-px-to-rem(256px),
53 --3400: iro.fn-px-to-rem(272px),
54 --3500: iro.fn-px-to-rem(280px),
55 --3600: iro.fn-px-to-rem(288px),
56 --3800: iro.fn-px-to-rem(304px),
57 --4600: iro.fn-px-to-rem(368px),
58 --5000: iro.fn-px-to-rem(400px),
59 --6000: iro.fn-px-to-rem(480px),
60 ),
61
62 --font: (
63 --standard: (
64 --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
65 --line-height: 1.5,
66 --feature-settings: ('\'ss01\''),
67 ),
68 --headline: (
69 --family: ('Inter', fn.dim(--font --standard --family, null)),
70 --line-height: 1.3,
71 --weight: 800,
72 --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''),
73 ),
74 --mono: (
75 --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace),
76 --line-height: 1.4,
77 )
78 ),
79
80 --font-size: (
81 --50: iro.fn-px-to-rem(12px),
82 --75: iro.fn-px-to-rem(13px),
83 --100: iro.fn-px-to-rem(14px),
84 --150: iro.fn-px-to-rem(16px),
85 --200: iro.fn-px-to-rem(18px),
86 --300: iro.fn-px-to-rem(20px),
87 --400: iro.fn-px-to-rem(24px),
88 --500: iro.fn-px-to-rem(28px),
89 --600: iro.fn-px-to-rem(32px),
90 --700: iro.fn-px-to-rem(36px),
91 --800: iro.fn-px-to-rem(40px),
92 --900: iro.fn-px-to-rem(45px),
93 --1000: iro.fn-px-to-rem(50px),
94 --1100: iro.fn-px-to-rem(60px),
95 ),
96
97 --border: (
98 --thick: 4px,
99 --medium: 2px,
100 --thin: 1px,
101 ),
102
103 --shadow: (
104 --x: 0,
105 --y: 1px,
106 --blur: 4px,
107 ),
108
109 --rounding: 4px,
110
111 --key-focus: (
112 --outline: fn.dim(--border --thick, null),
113 --border: fn.dim(--border --medium, null),
114 --border-offset: fn.dim(--border --medium, null),
115 ),
116
117 --paragraph: (
118 --margin-bs: fn.dim(--size --300, null),
119 ),
120
121 --heading: (
122 --margin-bs: fn.dim(--size --700, null),
123 --margin-bs-sibling: fn.dim(--size --325, null),
124
125 --xxl: fn.dim(--font-size --300, null),
126 --xl: fn.dim(--font-size --200, null),
127 --lg: fn.dim(--font-size --150, null),
128 --md: fn.dim(--font-size --100, null),
129 --sm: fn.dim(--font-size --75, null),
130 --xs: fn.dim(--font-size --50, null),
131
132 --display: (
133 --xxl: fn.dim(--font-size --1100, null),
134 --xl: fn.dim(--font-size --700, null),
135 --lg: fn.dim(--font-size --300, null),
136 --md: fn.dim(--font-size --150, null),
137 --sm: fn.dim(--font-size --75, null),
138 --xs: fn.dim(--font-size --50, null),
139 ),
140
141 --display-sm: (
142 --xxl: fn.dim(--font-size --900, null),
143 --xl: fn.dim(--font-size --600, null),
144 --lg: fn.dim(--font-size --200, null),
145 --md: fn.dim(--font-size --100, null),
146 --sm: fn.dim(--font-size --75, null),
147 --xs: fn.dim(--font-size --50, null),
148 )
149 ),
150
151 --list: (
152 --indent: fn.dim(--size --400, null),
153 --compact-indent: fn.dim(--size --250, null),
154 ),
155 ),
156));
157
158@each $breakpoint in map.keys(media.$breakpoints) {
159 @include media.media('<=#{$breakpoint}') {
160 @include iro.props-store((), $breakpoint);
161 }
162}
163
164@include iro.props-store((
165 --dims: (
166 --heading: (
167 --margin-bs: fn.dim(--size --600, null),
168 ),
169
170 --list: (
171 --indent: fn.dim(--size --300),
172 ),
173 )
174), 'sm');
175
176@include iro.props-store((
177 --dims: (
178 --heading: (
179 --margin-bs: fn.dim(--size --500, null),
180 ),
181
182 --list: (
183 --indent: fn.dim(--size --250),
184 ),
185 )
186), 'xs');
187
188//
189
190@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
191 @include iro.props-store((
192 --colors: (
193 #{$palette-name}-static: fn.palette(
194 $palette,
195 map.get(config.$static-colors, --contrasts),
196 1,
197 map.get(config.$static-colors, --base),
198 ),
199 ),
200 ));
201}
202
203@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
204 $color: list.nth($palette, 1);
205 $text: list.nth($palette, 2);
206
207 @include iro.props-store((
208 --colors: (
209 #{$palette-name}-transparent: fn.transparent-palette(
210 $color,
211 $text,
212 map.get(config.$static-colors, --transparents),
213 ),
214 ),
215 ));
216}
217
218@each $theme-name, $theme in config.$themes {
219 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
220
221 @each $palette-name, $palette in map.get($theme, --palettes) {
222 $base-color: list.nth($palette, 1);
223 $contrasts: list.nth($palette, 2);
224 $ranges: list.nth($palette, 3);
225
226 @include iro.props-store((
227 --colors: (
228 $palette-name: fn.palette(
229 $base-color,
230 map.get($theme, --contrasts, $contrasts),
231 map.get($theme, --ranges, $ranges),
232 list.nth(map.get($theme, --palettes, --base), 1),
233 ),
234 ),
235 ), $tree);
236 }
237
238 @each $color, $value in map.get($theme, --constants) {
239 @include iro.props-store((
240 --colors: (
241 $color: $value,
242 ),
243 ), $tree);
244 }
245
246 @each $color, $ref in map.get($theme, --semantic) {
247 $res: ();
248
249 @if meta.type-of($ref) == 'map' {
250 @each $key, $r in $ref {
251 $res: map.set($res, $key, fn.color($r));
252 }
253 } @else {
254 $res: fn.color($ref);
255 }
256
257 @include iro.props-store((
258 --colors: (
259 $color: $res,
260 ),
261 ), $tree);
262 }
263}
264
265@each $theme-name, $theme in config.$themes {
266 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
267
268 @include iro.props-store((
269 --colors: (
270
271 ),
272 ), $tree);
273}
274
275@mixin apply-vars {
276 :root {
277 @include iro.props-assign;
278
279 @each $breakpoint in map.keys(media.$breakpoints) {
280 @include media.media('<=#{$breakpoint}') {
281 @include iro.props-assign($breakpoint);
282 }
283 }
284
285 @media (prefers-color-scheme: dark) {
286 @include iro.props-assign('dark');
287 }
288 }
289
290 @each $theme-name, $theme in config.$themes {
291 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
292
293 @include iro.bem-theme($theme-name) {
294 @include iro.props-assign();
295 @include iro.props-assign($tree, --colors);
296 }
297 }
298}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 08:46:14 +0000