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