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