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