summaryrefslogtreecommitdiffstats
path: root/src/_core.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_core.vars.scss')
-rw-r--r--src/_core.vars.scss259
1 files changed, 87 insertions, 172 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index bef5f88..11acbfa 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,45 +1,45 @@
1// stylelint-disable scss/dollar-variable-pattern 1// stylelint-disable scss/dollar-variable-pattern
2 2
3@use "sass:map"; 3@use 'sass:map';
4@use "sass:meta"; 4@use 'sass:meta';
5@use "sass:list"; 5@use 'sass:list';
6@use "functions" as fn; 6@use 'functions' as fn;
7@use "config"; 7@use 'config';
8@use "pkg:iro-sass/functions"; 8@use 'pkg:iro-sass/src/functions';
9@use "pkg:iro-sass/props"; 9@use 'pkg:iro-sass/src/props';
10 10
11$size--0: props.def(--size--0, 0) !default; 11$size--0: props.def(--size--0, 0) !default;
12$size--10: props.def(--size--10, functions.px-to-rem(1px)) !default; 12$size--10: props.def(--size--10, functions.px-to-rem(1px)) !default;
13$size--25: props.def(--size--25, functions.px-to-rem(2px)) !default; 13$size--25: props.def(--size--25, functions.px-to-rem(2px)) !default;
14$size--40: props.def(--size--40, functions.px-to-rem(3px)) !default; 14$size--40: props.def(--size--40, functions.px-to-rem(3px)) !default;
15$size--50: props.def(--size--50, functions.px-to-rem(4px)) !default; 15$size--50: props.def(--size--50, functions.px-to-rem(4px)) !default;
16$size--65: props.def(--size--65, functions.px-to-rem(5px)) !default; 16$size--65: props.def(--size--65, functions.px-to-rem(5px)) !default;
17$size--75: props.def(--size--75, functions.px-to-rem(6px)) !default; 17$size--75: props.def(--size--75, functions.px-to-rem(6px)) !default;
18$size--85: props.def(--size--85, functions.px-to-rem(7px)) !default; 18$size--85: props.def(--size--85, functions.px-to-rem(7px)) !default;
19$size--100: props.def(--size--100, functions.px-to-rem(8px)) !default; 19$size--100: props.def(--size--100, functions.px-to-rem(8px)) !default;
20$size--115: props.def(--size--115, functions.px-to-rem(9px)) !default; 20$size--115: props.def(--size--115, functions.px-to-rem(9px)) !default;
21$size--125: props.def(--size--125, functions.px-to-rem(10px)) !default; 21$size--125: props.def(--size--125, functions.px-to-rem(10px)) !default;
22$size--130: props.def(--size--130, functions.px-to-rem(11px)) !default; 22$size--130: props.def(--size--130, functions.px-to-rem(11px)) !default;
23$size--150: props.def(--size--150, functions.px-to-rem(12px)) !default; 23$size--150: props.def(--size--150, functions.px-to-rem(12px)) !default;
24$size--160: props.def(--size--160, functions.px-to-rem(13px)) !default; 24$size--160: props.def(--size--160, functions.px-to-rem(13px)) !default;
25$size--175: props.def(--size--175, functions.px-to-rem(14px)) !default; 25$size--175: props.def(--size--175, functions.px-to-rem(14px)) !default;
26$size--200: props.def(--size--200, functions.px-to-rem(16px)) !default; 26$size--200: props.def(--size--200, functions.px-to-rem(16px)) !default;
27$size--225: props.def(--size--225, functions.px-to-rem(18px)) !default; 27$size--225: props.def(--size--225, functions.px-to-rem(18px)) !default;
28$size--250: props.def(--size--250, functions.px-to-rem(20px)) !default; 28$size--250: props.def(--size--250, functions.px-to-rem(20px)) !default;
29$size--275: props.def(--size--275, functions.px-to-rem(22px)) !default; 29$size--275: props.def(--size--275, functions.px-to-rem(22px)) !default;
30$size--300: props.def(--size--300, functions.px-to-rem(24px)) !default; 30$size--300: props.def(--size--300, functions.px-to-rem(24px)) !default;
31$size--325: props.def(--size--325, functions.px-to-rem(26px)) !default; 31$size--325: props.def(--size--325, functions.px-to-rem(26px)) !default;
32$size--350: props.def(--size--350, functions.px-to-rem(28px)) !default; 32$size--350: props.def(--size--350, functions.px-to-rem(28px)) !default;
33$size--375: props.def(--size--375, functions.px-to-rem(30px)) !default; 33$size--375: props.def(--size--375, functions.px-to-rem(30px)) !default;
34$size--400: props.def(--size--400, functions.px-to-rem(32px)) !default; 34$size--400: props.def(--size--400, functions.px-to-rem(32px)) !default;
35$size--450: props.def(--size--450, functions.px-to-rem(36px)) !default; 35$size--450: props.def(--size--450, functions.px-to-rem(36px)) !default;
36$size--500: props.def(--size--500, functions.px-to-rem(40px)) !default; 36$size--500: props.def(--size--500, functions.px-to-rem(40px)) !default;
37$size--550: props.def(--size--550, functions.px-to-rem(44px)) !default; 37$size--550: props.def(--size--550, functions.px-to-rem(44px)) !default;
38$size--600: props.def(--size--600, functions.px-to-rem(48px)) !default; 38$size--600: props.def(--size--600, functions.px-to-rem(48px)) !default;
39$size--650: props.def(--size--650, functions.px-to-rem(52px)) !default; 39$size--650: props.def(--size--650, functions.px-to-rem(52px)) !default;
40$size--700: props.def(--size--700, functions.px-to-rem(56px)) !default; 40$size--700: props.def(--size--700, functions.px-to-rem(56px)) !default;
41$size--800: props.def(--size--800, functions.px-to-rem(64px)) !default; 41$size--800: props.def(--size--800, functions.px-to-rem(64px)) !default;
42$size--900: props.def(--size--900, functions.px-to-rem(72px)) !default; 42$size--900: props.def(--size--900, functions.px-to-rem(72px)) !default;
43$size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default; 43$size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default;
44$size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default; 44$size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default;
45$size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default; 45$size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default;
@@ -58,105 +58,58 @@ $size--4600: props.def(--size--4600, functions.px-to-rem(368px)) !default;
58$size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default; 58$size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default;
59$size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default; 59$size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default;
60 60
61$font--standard--family: props.def( 61$font--standard--family: props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default;
62 --font--standard--family, 62$font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default;
63 ( 63$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
64 "Inter",
65 "Open Sans",
66 "Segoe UI",
67 "Droid Sans",
68 Roboto,
69 Oxygen,
70 "Helvetica Neue",
71 Helvetica,
72 Tahoma,
73 Arial,
74 sans-serif
75 )
76) !default;
77$font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default;
78$font--standard--feature-settings: props.def(
79 --font--standard--feature-settings,
80 ("'ss01'")
81) !default;
82 64
83$font--headline--family: props.def( 65$font--headline--family: props.def(--font--headline--family, props.get($font--standard--family)) !default;
84 --font--headline--family, 66$font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default;
85 props.get($font--standard--family) 67$font--headline--weight: props.def(--font--headline--weight, 800) !default;
86) !default; 68$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
87$font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default;
88$font--headline--weight: props.def(--font--headline--weight, 800) !default;
89$font--headline--feature-settings: props.def(
90 --font--headline--feature-settings,
91 ("'opsz'" 32, "'ss01'", "'cv06'")
92) !default;
93 69
94$font--mono--family: props.def( 70$font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
95 --font--mono--family, 71$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default;
96 ( 72$font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default;
97 "Iosevka Term SS09",
98 "IBM Plex Mono",
99 "Menlo",
100 "DejaVu Sans Mono",
101 "Bitstream Vera Sans Mono",
102 Courier,
103 monospace
104 )
105) !default;
106$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default;
107$font--mono--feature-settings: props.def(
108 --font--mono--feature-settings,
109 ("'calt'" 0, "'dlig' 1", "'ss09' 1")
110) !default;
111 73
112$font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default; 74$font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default;
113$font-size--75: props.def(--font-size--75, functions.px-to-rem(13px)) !default; 75$font-size--75: props.def(--font-size--75 , functions.px-to-rem(13px)) !default;
114$font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default; 76$font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default;
115$font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default; 77$font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default;
116$font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default; 78$font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default;
117$font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default; 79$font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default;
118$font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default; 80$font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default;
119$font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default; 81$font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default;
120$font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default; 82$font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default;
121$font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default; 83$font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default;
122$font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default; 84$font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default;
123$font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default; 85$font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default;
124$font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default; 86$font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default;
125$font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default; 87$font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default;
126$font-size--1200: props.def(--font-size--1200, functions.px-to-rem(70px)) !default; 88$font-size--1200: props.def(--font-size--1200, functions.px-to-rem(70px)) !default;
127$font-size--1300: props.def(--font-size--1300, functions.px-to-rem(80px)) !default; 89$font-size--1300: props.def(--font-size--1300, functions.px-to-rem(80px)) !default;
128 90
129$border-width--thick: props.def(--border-width--thick, 4px) !default; 91$border-width--thick: props.def(--border-width--thick, 4px) !default;
130$border-width--medium: props.def(--border-width--medium, 2px) !default; 92$border-width--medium: props.def(--border-width--medium, 2px) !default;
131$border-width--thin: props.def(--border-width--thin, 1px) !default; 93$border-width--thin: props.def(--border-width--thin, 1px) !default;
132 94
133$shadow--l1--x: props.def(--shadow--l1--x, 0) !default; 95$shadow--l1--x: props.def(--shadow--l1--x, 0) !default;
134$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default; 96$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default;
135$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default; 97$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
136$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default; 98$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
137 99
138$shadow--l2--x: props.def(--shadow--l2--x, 0) !default; 100$shadow--l2--x: props.def(--shadow--l2--x, 0) !default;
139$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default; 101$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default;
140$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default; 102$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
141$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default; 103$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
142 104
143$rounding: props.def(--rounding, 12px) !default; 105$rounding: props.def(--rounding, 12px) !default;
144$rounding--sm: props.def(--rounding--sm, 4px) !default; 106$rounding--sm: props.def(--rounding--sm, 4px) !default;
145 107
146$key-focus--outline-width: props.def( 108$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
147 --key-focus--outline-width, 109$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
148 props.get($border-width--thick) 110$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
149) !default;
150$key-focus--border-width: props.def(
151 --key-focus--border-width,
152 props.get($border-width--medium)
153) !default;
154$key-focus--border-offset: props.def(
155 --key-focus--border-offset,
156 props.get($border-width--medium)
157) !default;
158 111
159$list--indent: props.def(--list--indent, props.get($size--400)) !default; 112$list--indent: props.def(--list--indent, props.get($size--400)) !default;
160$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default; 113$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
161 114
162$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default; 115$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
@@ -166,34 +119,20 @@ $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
166$-static-colors: (); 119$-static-colors: ();
167 120
168@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 121@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
169 $palette: fn.palette( 122 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
170 $palette, 123 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
171 map.get(config.$static-colors, --levels),
172 map.get(config.$static-colors, --base)
173 );
174 $-static-colors: map.merge(
175 $-static-colors,
176 (
177 $palette-name: $palette,
178 )
179 );
180} 124}
181 125
182// 126//
183 127
184$transparent-colors: props.def(--transparent-colors, (), "color"); 128$transparent-colors: props.def(--transparent-colors, (), 'color');
185 129
186@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { 130@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
187 $color: list.nth($palette, 1); 131 $color: list.nth($palette, 1);
188 $text: list.nth($palette, 2); 132 $text: list.nth($palette, 2);
189 133
190 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); 134 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
191 $transparent-colors: props.merge( 135 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
192 $transparent-colors,
193 (
194 $palette-name: $palette,
195 )
196 );
197} 136}
198 137
199// 138//
@@ -203,64 +142,40 @@ $themes: ();
203@each $theme-name, $theme in config.$themes { 142@each $theme-name, $theme in config.$themes {
204 @each $variant-name, $variant in $theme { 143 @each $variant-name, $variant in $theme {
205 @if $variant != null { 144 @if $variant != null {
206 $compiled: props.def(--colors, (), "color"); 145 $compiled: props.def(--colors, (), 'color');
207 146
208 @each $palette-name, $palette in $-static-colors { 147 @each $palette-name, $palette in $-static-colors {
209 $compiled: props.merge($compiled, (#{$palette-name}-static: $palette)); 148 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
210 } 149 }
211 150
212 @each $palette-name, $palette in map.get($variant, --palettes) { 151 @each $palette-name, $palette in map.get($variant, --palettes) {
213 $base-color: list.nth($palette, 1); 152 $base-color: list.nth($palette, 1);
214 $levels: list.nth($palette, 2); 153 $levels: list.nth($palette, 2);
215 154
216 $palette: fn.palette( 155 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
217 $base-color, 156 $compiled: props.merge($compiled, ( $palette-name: $palette ));
218 map.get($variant, --levels, $levels),
219 list.nth(map.get($variant, --palettes, --base), 1)
220 );
221 $compiled: props.merge(
222 $compiled,
223 (
224 $palette-name: $palette,
225 )
226 );
227 } 157 }
228 158
229 @each $color, $value in map.get($variant, --constants) { 159 @each $color, $value in map.get($variant, --constants) {
230 $compiled: props.merge( 160 $compiled: props.merge($compiled, ( $color: $value ));
231 $compiled,
232 (
233 $color: $value,
234 )
235 );
236 } 161 }
237 162
238 @each $color, $ref in map.get($variant, --semantic) { 163 @each $color, $ref in map.get($variant, --semantic) {
239 $res: (); 164 $res: ();
240 165
241 @if meta.type-of($ref) == "map" { 166 @if meta.type-of($ref) == 'map' {
242 @each $key, $r in $ref { 167 @each $key, $r in $ref {
243 $re1: list.nth($r, 1); 168 $re1: list.nth($r, 1);
244 $re2: functions.list-slice($r, 2); 169 $re2: functions.list-slice($r, 2);
245 $res: map.merge( 170 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
246 $res,
247 (
248 $key: props.get($compiled, $re1, $re2...),
249 )
250 );
251 } 171 }
252 } @else { 172 } @else {
253 $ref1: list.nth($ref, 1); 173 $ref1: list.nth($ref, 1);
254 $ref2: functions.list-slice($ref, 2); 174 $ref2: functions.list-slice($ref, 2);
255 $res: props.get($compiled, $ref1, $ref2...); 175 $res: props.get($compiled, $ref1, $ref2...);
256 } 176 }
257 177
258 $compiled: props.merge( 178 $compiled: props.merge($compiled, ( $color: $res ));
259 $compiled,
260 (
261 $color: $res,
262 )
263 );
264 } 179 }
265 180
266 $themes: map.set($themes, $theme-name, $variant-name, $compiled); 181 $themes: map.set($themes, $theme-name, $variant-name, $compiled);
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 20:11:20 +0000