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