summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
committerVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
commit5c878876d3bdd2c7cd094871fa0644f3310bcec8 (patch)
tree0a41059f6983040f429d786ab0ad0dbf89764e96 /src/objects/_action-button.vars.scss
parentFixed divider (diff)
downloadiro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.gz
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.bz2
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.zip
Commit merge of button and badge into action-button (and rename it to button)
Diffstat (limited to 'src/objects/_action-button.vars.scss')
-rw-r--r--src/objects/_action-button.vars.scss359
1 files changed, 0 insertions, 359 deletions
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 6693b61..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,359 +0,0 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
8$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default;
9
10$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default;
11$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
12$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
14$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
15
16$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default;
17$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default;
18$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
26$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
27
28$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default;
29$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
31$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
32$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
33
34$shadow-x: props.def(--o-action-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-action-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-action-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-action-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
39$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
40$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
41$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
42
43$fixed-sizes: (
44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
47) !default;
48
49$themes: props.def(--o-action-button, (), 'color');
50
51$default-theme-override: () !default;
52$default-theme: map.deep-merge((
53 --bg-color: props.get(core.$theme, --bg-l2),
54 --label-color: props.get(core.$theme, --text),
55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
56 --shadow-color: props.get(core.$theme, --shadow),
57
58 --hover: (
59 --bg-color: props.get(core.$theme, --border-mute),
60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border-strong),
62 ),
63
64 --active: (
65 --bg-color: props.get(core.$theme, --border),
66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --text-mute-more),
68 ),
69
70 --disabled: (
71 --bg-color: transparent,
72 --label-color: props.get(core.$theme, --border-strong),
73 --border-color: props.get(core.$theme, --border),
74 ),
75
76 --key-focus: (
77 --border-color: props.get(core.$theme, --focus, --border),
78 --outline-color: props.get(core.$theme, --focus, --outline),
79 ),
80
81 --selected: (
82 --bg-color: props.get(core.$theme, --text),
83 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
85
86 --hover: (
87 --bg-color: props.get(core.$theme, --heading),
88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --heading),
90 ),
91
92 --active: (
93 --bg-color: props.get(core.$theme, --heading),
94 --label-color: props.get(core.$theme, --base, --50),
95 --border-color: props.get(core.$theme, --heading),
96 ),
97
98 --disabled: (
99 --bg-color: props.get(core.$theme, --border-mute),
100 --label-color: props.get(core.$theme, --border-strong),
101 --border-color: props.get(core.$theme, --border-mute),
102 ),
103 ),
104
105 --static: (
106 --bg-color: props.get(core.$theme, --border-mute),
107 --label-color: props.get(core.$theme, --heading),
108 --border-color: props.get(core.$theme, --border-mute),
109
110 --hover: (
111 --bg-color: props.get(core.$theme, --border),
112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border),
114 ),
115
116 --active: (
117 --bg-color: props.get(core.$theme, --border-strong),
118 --label-color: props.get(core.$theme, --heading),
119 --border-color: props.get(core.$theme, --border-strong),
120 ),
121 ),
122
123 --quiet: (
124 --label-color: props.get(core.$theme, --text),
125
126 --hover: (
127 --bg-color: props.get(core.$theme, --border-mute),
128 --label-color: props.get(core.$theme, --heading),
129 ),
130
131 --active: (
132 --bg-color: props.get(core.$theme, --border),
133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --disabled: (
137 --label-color: props.get(core.$theme, --border-strong),
138 ),
139 ),
140), $default-theme-override) !default;
141$default-theme: props.def(--o-action-button, $default-theme, 'color');
142
143$default-theme-dark-override: () !default;
144$default-theme-dark: map.deep-merge((
145 --bg-color: props.get(core.$theme, --border-mute),
146 --border-color: props.get(core.$theme, --border-mute),
147
148 --hover: (
149 --bg-color: props.get(core.$theme, --border),
150 --border-color: props.get(core.$theme, --border),
151 ),
152
153 --active: (
154 --bg-color: props.get(core.$theme, --border-strong),
155 --border-color: props.get(core.$theme, --border-strong),
156 ),
157
158 --selected: (
159 --border-color: props.get(core.$theme, --text),
160 ),
161), $default-theme-override) !default;
162$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
163
164@each $theme in map.keys(props.get(core.$transparent-colors)) {
165 $button-theme: --static-#{string.slice($theme, 3)};
166
167 $themes: props.merge($themes, (
168 $button-theme: (
169 --bg-color: props.get(core.$transparent-colors, $theme, --200),
170 --label-color: props.get(core.$transparent-colors, $theme, --900),
171 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
172 --shadow-color: props.get(core.$transparent-colors, --black, --200),
173
174 --hover: (
175 --bg-color: props.get(core.$transparent-colors, $theme, --300),
176 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 --border-color: props.get(core.$transparent-colors, $theme, --400),
178 ),
179
180 --active: (
181 --bg-color: props.get(core.$transparent-colors, $theme, --400),
182 --label-color: props.get(core.$transparent-colors, $theme, --900),
183 --border-color: props.get(core.$transparent-colors, $theme, --500),
184 ),
185
186 --disabled: (
187 --bg-color: props.get(core.$transparent-colors, $theme, --100),
188 --label-color: props.get(core.$transparent-colors, $theme, --500),
189 --border-color: props.get(core.$transparent-colors, $theme, --300),
190 ),
191
192 --key-focus: (
193 --border-color: props.get(core.$transparent-colors, $theme, --900),
194 --outline-color: props.get(core.$transparent-colors, $theme, --300),
195 ),
196
197 --selected: (
198 --bg-color: props.get(core.$transparent-colors, $theme, --800),
199 --label-color: props.get(core.$transparent-colors, $theme, --text),
200 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
201
202 --hover: (
203 --bg-color: props.get(core.$transparent-colors, $theme, --900),
204 --label-color: props.get(core.$transparent-colors, $theme, --text),
205 --border-color: props.get(core.$transparent-colors, $theme, --100),
206 ),
207
208 --active: (
209 --bg-color: props.get(core.$transparent-colors, $theme, --900),
210 --label-color: props.get(core.$transparent-colors, $theme, --text),
211 --border-color: props.get(core.$transparent-colors, $theme, --100),
212 ),
213
214 --disabled: (
215 --bg-color: props.get(core.$transparent-colors, $theme, --200),
216 --label-color: props.get(core.$transparent-colors, $theme, --500),
217 --border-color: props.get(core.$transparent-colors, $theme, --100),
218 ),
219 ),
220
221 --static: (
222 --bg-color: props.get(core.$transparent-colors, $theme, --200),
223 --label-color: props.get(core.$transparent-colors, $theme, --900),
224 --border-color: transparent,
225
226 --hover: (
227 --bg-color: props.get(core.$transparent-colors, $theme, --300),
228 --label-color: props.get(core.$transparent-colors, $theme, --900),
229 --border-color: transparent,
230 ),
231
232 --active: (
233 --bg-color: props.get(core.$transparent-colors, $theme, --400),
234 --label-color: props.get(core.$transparent-colors, $theme, --900),
235 --border-color: transparent,
236 ),
237 ),
238
239 --quiet: (
240 --label-color: props.get(core.$transparent-colors, $theme, --900),
241
242 --hover: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --200),
244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 ),
246
247 --active: (
248 --bg-color: props.get(core.$transparent-colors, $theme, --300),
249 --label-color: props.get(core.$transparent-colors, $theme, --900),
250 ),
251
252 --disabled: (
253 --label-color: props.get(core.$transparent-colors, $theme, --500),
254 ),
255 ),
256 )
257 ));
258}
259
260$themes-config: (
261 accent: --accent,
262 positive: --positive,
263 negative: --negative,
264 warning: --warning,
265) !default;
266
267@each $theme, $key in $themes-config {
268 $themes: props.merge($themes, (
269 --#{$theme}: (
270 --bg-color: props.get(core.$theme, $key, --200),
271 --label-color: props.get(core.$theme, $key, --1100),
272 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
273 --shadow-color: props.get(core.$theme, $key, --200),
274
275 --hover: (
276 --bg-color: props.get(core.$theme, $key, --300),
277 --label-color: props.get(core.$theme, $key, --1200),
278 --border-color: props.get(core.$theme, $key, --600),
279 ),
280
281 --active: (
282 --bg-color: props.get(core.$theme, $key, --400),
283 --label-color: props.get(core.$theme, $key, --1300),
284 --border-color: props.get(core.$theme, $key, --800),
285 ),
286
287 --disabled: (
288 --bg-color: props.get(core.$theme, --bg-l1),
289 --label-color: props.get(core.$theme, --border-strong),
290 --border-color: props.get(core.$theme, --border),
291 ),
292
293 --key-focus: (
294 --border-color: props.get(core.$theme, --focus, --border),
295 --outline-color: props.get(core.$theme, --focus, --outline),
296 ),
297
298 --selected: (
299 --bg-color: props.get(core.$theme, #{$key}-static, --900),
300 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
301 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
302
303 --hover: (
304 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
305 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
306 --border-color: props.get(core.$theme, #{$key}-static, --1000),
307 ),
308
309 --active: (
310 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
311 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
312 --border-color: props.get(core.$theme, #{$key}-static, --1100),
313 ),
314
315 --disabled: (
316 --bg-color: props.get(core.$theme, --border-mute),
317 --label-color: props.get(core.$theme, --border-strong),
318 --border-color: props.get(core.$theme, --border-mute),
319 ),
320 ),
321
322 --static: (
323 --bg-color: props.get(core.$theme, $key, --100),
324 --label-color: props.get(core.$theme, $key, --1100),
325 --border-color: props.get(core.$theme, $key, --300),
326
327 --hover: (
328 --bg-color: props.get(core.$theme, $key, --200),
329 --label-color: props.get(core.$theme, $key, --1200),
330 --border-color: props.get(core.$theme, $key, --400),
331 ),
332
333 --active: (
334 --bg-color: props.get(core.$theme, $key, --300),
335 --label-color: props.get(core.$theme, $key, --1300),
336 --border-color: props.get(core.$theme, $key, --500),
337 ),
338 ),
339
340 --quiet: (
341 --label-color: props.get(core.$theme, $key, --1100),
342
343 --hover: (
344 --bg-color: props.get(core.$theme, $key, --200),
345 --label-color: props.get(core.$theme, $key, --1200),
346 ),
347
348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300),
351 ),
352
353 --disabled: (
354 --label-color: props.get(core.$theme, --border-strong),
355 ),
356 ),
357 )
358 ));
359}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 18:07:40 +0000