summaryrefslogtreecommitdiffstats
path: root/src/objects/_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/_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/_button.vars.scss')
-rw-r--r--src/objects/_button.vars.scss353
1 files changed, 272 insertions, 81 deletions
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..1ab7e5a 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,164 +4,355 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-button--line-height, 1.4) !default; 6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; 7$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; 8$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
10$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 9
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; 10$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; 12$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 15
19$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; 16$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
20$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; 17$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
21$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; 18$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
22$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 27
24$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; 28$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
25$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; 29$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
26$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 33
34$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
29$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 39$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 40$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 42
33$sizes: ( 43$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, 44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, 45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, 46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 47) !default;
38 48
49$themes: props.def(--o-button, (), 'color');
50
39$default-theme-override: () !default; 51$default-theme-override: () !default;
40$default-theme: props.def(--o-button, ( 52$default-theme: map.deep-merge((
41 --bg: props.get(core.$theme, --border-mute), 53 --bg-color: props.get(core.$theme, --bg-l2),
42 --label: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
44 --outline-label: props.get(core.$theme, --text), 56 --shadow-color: props.get(core.$theme, --shadow),
45 57
46 --hover: ( 58 --hover: (
47 --bg: props.get(core.$theme, --border), 59 --bg-color: props.get(core.$theme, --border-mute),
48 --label: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border-strong),
49 ), 62 ),
50 63
51 --active: ( 64 --active: (
52 --bg: props.get(core.$theme, --border-strong), 65 --bg-color: props.get(core.$theme, --border),
53 --label: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --text-mute-more),
54 ), 68 ),
55 69
56 --disabled: ( 70 --disabled: (
57 --bg: props.get(core.$theme, --border-mute), 71 --bg-color: transparent,
58 --outline-border: props.get(core.$theme, --border), 72 --label-color: props.get(core.$theme, --border-strong),
59 --label: props.get(core.$theme, --text-disabled), 73 --border-color: props.get(core.$theme, --border),
60 ), 74 ),
61 75
62 --key-focus: ( 76 --key-focus: (
63 --label: props.get(core.$theme, --focus, --text), 77 --border-color: props.get(core.$theme, --focus, --border),
64 --border: props.get(core.$theme, --focus, --border), 78 --outline-color: props.get(core.$theme, --focus, --outline),
65 --outline: 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 ),
66 ), 121 ),
67 122
68 --primary: ( 123 --quiet: (
69 --bg: props.get(core.$theme, --base, --900), 124 --label-color: props.get(core.$theme, --text),
70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text),
73 125
74 --hover: ( 126 --hover: (
75 --bg: props.get(core.$theme, --base, --800), 127 --bg-color: props.get(core.$theme, --border-mute),
76 --label: props.get(core.$theme, --base, --800-text), 128 --label-color: props.get(core.$theme, --heading),
77 ), 129 ),
78 130
79 --active: ( 131 --active: (
80 --bg: props.get(core.$theme, --base, --700), 132 --bg-color: props.get(core.$theme, --border),
81 --label: props.get(core.$theme, --base, --700-text), 133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --disabled: (
137 --label-color: props.get(core.$theme, --border-strong),
82 ), 138 ),
83 ), 139 ),
84), 'color') !default; 140), $default-theme-override) !default;
85$default-theme: props.merge($default-theme, $default-theme-override); 141$default-theme: props.def(--o-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),
86 147
87$static-themes: props.def(--o-button, (), 'color'); 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-button, $default-theme-dark, 'dark');
88 163
89@each $theme in map.keys(props.get(core.$transparent-colors)) { 164@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)}; 165 $button-theme: --static-#{string.slice($theme, 3)};
91 166
92 $static-themes: props.merge($static-themes, ( 167 $themes: props.merge($themes, (
93 $button-theme: ( 168 $button-theme: (
94 --bg: props.get(core.$transparent-colors, $theme, --200), 169 --bg-color: props.get(core.$transparent-colors, $theme, --200),
95 --label: props.get(core.$transparent-colors, $theme, --900), 170 --label-color: props.get(core.$transparent-colors, $theme, --900),
96 --outline-border: props.get(core.$transparent-colors, $theme, --300), 171 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
97 --outline-label: props.get(core.$transparent-colors, $theme, --900), 172 --shadow-color: props.get(core.$transparent-colors, --black, --200),
98 173
99 --hover: ( 174 --hover: (
100 --bg: props.get(core.$transparent-colors, $theme, --300), 175 --bg-color: props.get(core.$transparent-colors, $theme, --300),
101 --label: props.get(core.$transparent-colors, $theme, --900), 176 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 --border-color: props.get(core.$transparent-colors, $theme, --400),
102 ), 178 ),
103 179
104 --active: ( 180 --active: (
105 --bg: props.get(core.$transparent-colors, $theme, --400), 181 --bg-color: props.get(core.$transparent-colors, $theme, --400),
106 --label: props.get(core.$transparent-colors, $theme, --900), 182 --label-color: props.get(core.$transparent-colors, $theme, --900),
183 --border-color: props.get(core.$transparent-colors, $theme, --500),
107 ), 184 ),
108 185
109 --disabled: ( 186 --disabled: (
110 --bg: props.get(core.$transparent-colors, $theme, --200), 187 --bg-color: props.get(core.$transparent-colors, $theme, --100),
111 --outline-border: props.get(core.$transparent-colors, $theme, --300), 188 --label-color: props.get(core.$transparent-colors, $theme, --500),
112 --label: props.get(core.$transparent-colors, $theme, --500), 189 --border-color: props.get(core.$transparent-colors, $theme, --300),
113 ), 190 ),
114 191
115 --key-focus: ( 192 --key-focus: (
116 --bg: props.get(core.$transparent-colors, $theme, --100), 193 --border-color: props.get(core.$transparent-colors, $theme, --900),
117 --label: props.get(core.$transparent-colors, $theme, --900), 194 --outline-color: props.get(core.$transparent-colors, $theme, --300),
118 --border: props.get(core.$transparent-colors, $theme, --900),
119 --outline: props.get(core.$transparent-colors, $theme, --300),
120 ), 195 ),
121 196
122 --primary: ( 197 --selected: (
123 --bg: props.get(core.$transparent-colors, $theme, --800), 198 --bg-color: props.get(core.$transparent-colors, $theme, --800),
124 --label: props.get(core.$transparent-colors, $theme, --text), 199 --label-color: props.get(core.$transparent-colors, $theme, --text),
125 --outline-border: props.get(core.$transparent-colors, $theme, --800), 200 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
126 --outline-label: props.get(core.$transparent-colors, $theme, --900), 201
127
128 --hover: ( 202 --hover: (
129 --bg: props.get(core.$transparent-colors, $theme, --900), 203 --bg-color: props.get(core.$transparent-colors, $theme, --900),
130 --label: props.get(core.$transparent-colors, $theme, --text), 204 --label-color: props.get(core.$transparent-colors, $theme, --text),
205 --border-color: props.get(core.$transparent-colors, $theme, --100),
131 ), 206 ),
132 207
133 --active: ( 208 --active: (
134 --bg: props.get(core.$transparent-colors, $theme, --900), 209 --bg-color: props.get(core.$transparent-colors, $theme, --900),
135 --label: props.get(core.$transparent-colors, $theme, --text), 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,
136 ), 230 ),
137 ) 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 ),
138 ) 256 )
139 )); 257 ));
140} 258}
141 259
142$themes-config: ( 260$themes-config: (
143 accent: --accent, 261 accent: --accent,
262 positive: --positive,
144 negative: --negative, 263 negative: --negative,
264 warning: --warning,
145) !default; 265) !default;
146 266
147$themes: props.def(--o-button, (), 'color');
148
149@each $theme, $key in $themes-config { 267@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, ( 268 $themes: props.merge($themes, (
151 --#{$theme}: ( 269 --#{$theme}: (
152 --bg: props.get(core.$theme, #{$key}-static, --900), 270 --bg-color: props.get(core.$theme, $key, --200),
153 --label: props.get(core.$theme, #{$key}-static, --900-text), 271 --label-color: props.get(core.$theme, $key, --1100),
154 --outline-border: props.get(core.$theme, $key, --900), 272 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
155 --outline-label: props.get(core.$theme, $key, --1000), 273 --shadow-color: props.get(core.$theme, $key, --200),
156 274
157 --hover: ( 275 --hover: (
158 --bg: props.get(core.$theme, #{$key}-static, --1000), 276 --bg-color: props.get(core.$theme, $key, --300),
159 --label: props.get(core.$theme, #{$key}-static, --1000-text), 277 --label-color: props.get(core.$theme, $key, --1200),
278 --border-color: props.get(core.$theme, $key, --600),
160 ), 279 ),
161 280
162 --active: ( 281 --active: (
163 --bg: props.get(core.$theme, #{$key}-static, --1100), 282 --bg-color: props.get(core.$theme, $key, --400),
164 --label: props.get(core.$theme, #{$key}-static, --1100-text), 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 ),
165 ), 356 ),
166 ) 357 )
167 )); 358 ));
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 03:40:52 +0000