summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_action-button.vars.scss')
-rw-r--r--src/objects/_action-button.vars.scss305
1 files changed, 0 insertions, 305 deletions
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 84bb415..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,305 +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, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border),
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 --quiet: (
106 --label-color: props.get(core.$theme, --text),
107
108 --hover: (
109 --bg-color: props.get(core.$theme, --border-mute),
110 --label-color: props.get(core.$theme, --heading),
111 ),
112
113 --active: (
114 --bg-color: props.get(core.$theme, --border),
115 --label-color: props.get(core.$theme, --heading),
116 ),
117
118 --disabled: (
119 --label-color: props.get(core.$theme, --border-strong),
120 ),
121 ),
122), $default-theme-override) !default;
123$default-theme: props.def(--o-action-button, $default-theme, 'color');
124
125$default-theme-dark-override: () !default;
126$default-theme-dark: map.deep-merge((
127 --bg-color: props.get(core.$theme, --border-mute),
128 --border-color: props.get(core.$theme, --border-mute),
129
130 --hover: (
131 --bg-color: props.get(core.$theme, --border),
132 --border-color: props.get(core.$theme, --border),
133 ),
134
135 --active: (
136 --bg-color: props.get(core.$theme, --border-strong),
137 --border-color: props.get(core.$theme, --border-strong),
138 ),
139
140 --selected: (
141 --border-color: props.get(core.$theme, --text),
142 ),
143), $default-theme-override) !default;
144$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
145
146@each $theme in map.keys(props.get(core.$transparent-colors)) {
147 $button-theme: --static-#{string.slice($theme, 3)};
148
149 $themes: props.merge($themes, (
150 $button-theme: (
151 --bg-color: props.get(core.$transparent-colors, $theme, --200),
152 --label-color: props.get(core.$transparent-colors, $theme, --900),
153 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
154 --shadow-color: props.get(core.$transparent-colors, --black, --200),
155
156 --hover: (
157 --bg-color: props.get(core.$transparent-colors, $theme, --300),
158 --label-color: props.get(core.$transparent-colors, $theme, --900),
159 --border-color: props.get(core.$transparent-colors, $theme, --400),
160 ),
161
162 --active: (
163 --bg-color: props.get(core.$transparent-colors, $theme, --400),
164 --label-color: props.get(core.$transparent-colors, $theme, --900),
165 --border-color: props.get(core.$transparent-colors, $theme, --500),
166 ),
167
168 --disabled: (
169 --bg-color: props.get(core.$transparent-colors, $theme, --100),
170 --label-color: props.get(core.$transparent-colors, $theme, --500),
171 --border-color: props.get(core.$transparent-colors, $theme, --300),
172 ),
173
174 --key-focus: (
175 --border-color: props.get(core.$transparent-colors, $theme, --900),
176 --outline-color: props.get(core.$transparent-colors, $theme, --300),
177 ),
178
179 --selected: (
180 --bg-color: props.get(core.$transparent-colors, $theme, --800),
181 --label-color: props.get(core.$transparent-colors, $theme, --text),
182 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
183
184 --hover: (
185 --bg-color: props.get(core.$transparent-colors, $theme, --900),
186 --label-color: props.get(core.$transparent-colors, $theme, --text),
187 --border-color: props.get(core.$transparent-colors, $theme, --100),
188 ),
189
190 --active: (
191 --bg-color: props.get(core.$transparent-colors, $theme, --900),
192 --label-color: props.get(core.$transparent-colors, $theme, --text),
193 --border-color: props.get(core.$transparent-colors, $theme, --100),
194 ),
195
196 --disabled: (
197 --bg-color: props.get(core.$transparent-colors, $theme, --200),
198 --label-color: props.get(core.$transparent-colors, $theme, --500),
199 --border-color: props.get(core.$transparent-colors, $theme, --100),
200 ),
201 ),
202
203 --quiet: (
204 --label-color: props.get(core.$transparent-colors, $theme, --900),
205
206 --hover: (
207 --bg-color: props.get(core.$transparent-colors, $theme, --200),
208 --label-color: props.get(core.$transparent-colors, $theme, --900),
209 ),
210
211 --active: (
212 --bg-color: props.get(core.$transparent-colors, $theme, --300),
213 --label-color: props.get(core.$transparent-colors, $theme, --900),
214 ),
215
216 --disabled: (
217 --label-color: props.get(core.$transparent-colors, $theme, --500),
218 ),
219 ),
220 )
221 ));
222}
223
224$themes-config: (
225 accent: --accent,
226 positive: --positive,
227 negative: --negative,
228 warning: --warning,
229) !default;
230
231@each $theme, $key in $themes-config {
232 $themes: props.merge($themes, (
233 --#{$theme}: (
234 --bg-color: props.get(core.$theme, $key, --200),
235 --label-color: props.get(core.$theme, $key, --1100),
236 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
237 --shadow-color: props.get(core.$theme, $key, --200),
238
239 --hover: (
240 --bg-color: props.get(core.$theme, $key, --300),
241 --label-color: props.get(core.$theme, $key, --1200),
242 --border-color: props.get(core.$theme, $key, --600),
243 ),
244
245 --active: (
246 --bg-color: props.get(core.$theme, $key, --400),
247 --label-color: props.get(core.$theme, $key, --1300),
248 --border-color: props.get(core.$theme, $key, --800),
249 ),
250
251 --disabled: (
252 --bg-color: props.get(core.$theme, --bg-l1),
253 --label-color: props.get(core.$theme, --border-strong),
254 --border-color: props.get(core.$theme, --border),
255 ),
256
257 --key-focus: (
258 --border-color: props.get(core.$theme, --focus, --border),
259 --outline-color: props.get(core.$theme, --focus, --outline),
260 ),
261
262 --selected: (
263 --bg-color: props.get(core.$theme, #{$key}-static, --900),
264 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
265 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
266
267 --hover: (
268 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
269 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
270 --border-color: props.get(core.$theme, #{$key}-static, --1000),
271 ),
272
273 --active: (
274 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
275 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
276 --border-color: props.get(core.$theme, #{$key}-static, --1100),
277 ),
278
279 --disabled: (
280 --bg-color: props.get(core.$theme, --border-mute),
281 --label-color: props.get(core.$theme, --border-strong),
282 --border-color: props.get(core.$theme, --border-mute),
283 ),
284 ),
285
286 --quiet: (
287 --label-color: props.get(core.$theme, $key, --1100),
288
289 --hover: (
290 --bg-color: props.get(core.$theme, $key, --200),
291 --label-color: props.get(core.$theme, $key, --1200),
292 ),
293
294 --active: (
295 --bg-color: props.get(core.$theme, $key, --300),
296 --label-color: props.get(core.$theme, $key, --1300),
297 ),
298
299 --disabled: (
300 --label-color: props.get(core.$theme, --border-strong),
301 ),
302 ),
303 )
304 ));
305}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-23 11:41:14 +0000