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