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