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