@ory/elements-react 1.0.0 → 1.2.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ory/elements-react",
3
- "version": "1.0.0",
3
+ "version": "1.2.0-rc.0",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/index.d.ts",
@@ -42,14 +42,14 @@
42
42
  "types": "./dist/index.d.ts",
43
43
  "dependencies": {
44
44
  "@marsidev/react-turnstile": "^1.1.0",
45
- "@ory/client-fetch": "~1.20.0",
45
+ "@ory/client-fetch": "1.21.5",
46
46
  "@radix-ui/react-dropdown-menu": "2.1.14",
47
47
  "@radix-ui/react-switch": "1.2.4",
48
48
  "class-variance-authority": "0.7.1",
49
49
  "clsx": "2.1.1",
50
50
  "input-otp": "1.4.2",
51
51
  "react-hook-form": "7.56.4",
52
- "react-intl": "7.1.10",
52
+ "react-intl": "7.1.13",
53
53
  "sonner": "^2.0.0",
54
54
  "tailwind-merge": "3.3.0",
55
55
  "usehooks-ts": "3.1.1"
@@ -69,6 +69,7 @@
69
69
  "esbuild-plugin-svgr": "3.1.1",
70
70
  "eslint-plugin-react": "7.37.5",
71
71
  "postcss": "8.4.47",
72
+ "postcss-scope": "^1.7.4",
72
73
  "tailwindcss-animate": "1.0.7",
73
74
  "tsup": "8.4.0",
74
75
  "typedoc": "0.28.5"
@@ -151,11 +151,11 @@
151
151
  }
152
152
  },
153
153
  "borderRadius": {
154
- "buttons": "var(--border-radius-buttons)",
155
- "forms": "var(--border-radius-forms)",
156
- "general": "var(--border-radius-general)",
157
- "branding": "var(--border-radius-branding)",
158
- "cards": "var(--border-radius-cards)",
159
- "identifier": "var(--border-radius-identifier)"
154
+ "buttons": "var(--radius-buttons)",
155
+ "forms": "var(--radius-forms)",
156
+ "general": "var(--radius-general)",
157
+ "branding": "var(--radius-branding)",
158
+ "cards": "var(--radius-cards)",
159
+ "identifier": "var(--radius-identifier)"
160
160
  }
161
161
  }
@@ -0,0 +1,495 @@
1
+ /* Copyright © 2025 Ory Corp */
2
+ /* SPDX-License-Identifier: Apache-2.0 */
3
+
4
+ @theme {
5
+ --ui-100: #f1f5f9;
6
+ --ui-200: #e2e8f0;
7
+ --ui-300: #cbd5e1;
8
+ --ui-400: #94a3b8;
9
+ --ui-50: #f8fafc;
10
+ --ui-500: #64748b;
11
+ --ui-600: #475569;
12
+ --ui-700: #334155;
13
+ --ui-800: #1e293b;
14
+ --ui-900: #0f172a;
15
+ --ui-950: #020617;
16
+ --ui-black: #000000;
17
+ --ui-danger: #dc2626;
18
+ --ui-success: #22c55e;
19
+ --ui-transparent: #ffffff00;
20
+ --ui-warning: #eab308;
21
+ --ui-white: #ffffff;
22
+ --button-identifier-background-default: var(
23
+ --interface-background-brand-secondary
24
+ );
25
+ --button-identifier-background-hover: var(
26
+ --interface-background-brand-secondary-hover
27
+ );
28
+ --button-identifier-border-border-default: var(
29
+ --interface-border-brand-brand
30
+ );
31
+ --button-identifier-border-border-hover: var(--interface-border-brand-brand);
32
+ --button-identifier-foreground-default: var(
33
+ --interface-foreground-brand-on-secondary
34
+ );
35
+ --button-identifier-foreground-hover: var(
36
+ --interface-foreground-brand-on-secondary
37
+ );
38
+ --button-link-brand-brand: var(--interface-foreground-brand-primary);
39
+ --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
40
+ --button-link-default-primary: var(--interface-foreground-default-primary);
41
+ --button-link-default-primary-hover: var(
42
+ --interface-foreground-brand-primary
43
+ );
44
+ --button-link-default-secondary: var(
45
+ --interface-foreground-default-secondary
46
+ );
47
+ --button-link-default-secondary-hover: var(
48
+ --interface-foreground-default-tertiary
49
+ );
50
+ --button-link-disabled-disabled: var(
51
+ --interface-foreground-disabled-disabled
52
+ );
53
+ --button-primary-background-default: var(
54
+ --interface-background-brand-primary
55
+ );
56
+ --button-primary-background-disabled: var(
57
+ --interface-background-disabled-disabled
58
+ );
59
+ --button-primary-background-hover: var(
60
+ --interface-background-brand-primary-hover
61
+ );
62
+ --button-primary-border-default: var(--interface-border-default-none);
63
+ --button-primary-border-disabled: var(--interface-border-disabled-disabled);
64
+ --button-primary-border-hover: var(--interface-border-default-none);
65
+ --button-primary-foreground-default: var(
66
+ --interface-foreground-brand-on-primary
67
+ );
68
+ --button-primary-foreground-disabled: var(
69
+ --interface-foreground-disabled-on-disabled
70
+ );
71
+ --button-primary-foreground-hover: var(
72
+ --interface-foreground-brand-on-primary
73
+ );
74
+ --button-secondary-background-default: var(
75
+ --interface-background-default-primary
76
+ );
77
+ --button-secondary-background-disabled: var(
78
+ --interface-background-disabled-disabled
79
+ );
80
+ --button-secondary-background-hover: var(
81
+ --interface-background-default-primary-hover
82
+ );
83
+ --button-secondary-border-default: var(--interface-border-default-primary);
84
+ --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
85
+ --button-secondary-border-hover: var(--interface-border-default-primary);
86
+ --button-secondary-foreground-default: var(
87
+ --interface-foreground-default-primary
88
+ );
89
+ --button-secondary-foreground-disabled: var(
90
+ --interface-foreground-disabled-on-disabled
91
+ );
92
+ --button-secondary-foreground-hover: var(
93
+ --interface-foreground-default-secondary
94
+ );
95
+ --button-social-background-default: var(
96
+ --interface-background-default-primary
97
+ );
98
+ --button-social-background-disabled: var(
99
+ --interface-background-disabled-disabled
100
+ );
101
+ --button-social-background-generic-provider: var(
102
+ --interface-background-default-inverted
103
+ );
104
+ --button-social-background-hover: var(
105
+ --interface-background-default-primary-hover
106
+ );
107
+ --button-social-border-default: var(--interface-border-default-primary);
108
+ --button-social-border-disabled: var(--interface-border-disabled-disabled);
109
+ --button-social-border-generic-provider: var(--interface-border-default-none);
110
+ --button-social-border-hover: var(--interface-border-default-primary);
111
+ --button-social-foreground-default: var(
112
+ --interface-foreground-default-primary
113
+ );
114
+ --button-social-foreground-disabled: var(
115
+ --interface-foreground-disabled-on-disabled
116
+ );
117
+ --button-social-foreground-generic-provider: var(
118
+ --interface-foreground-default-inverted
119
+ );
120
+ --button-social-foreground-hover: var(
121
+ --interface-foreground-default-secondary
122
+ );
123
+ --checkbox-background-checked: var(--interface-background-brand-primary);
124
+ --checkbox-background-default: var(--interface-background-default-secondary);
125
+ --checkbox-border-checkbox-border-checked: var(
126
+ --interface-border-brand-brand
127
+ );
128
+ --checkbox-border-checkbox-border-default: var(
129
+ --interface-border-default-primary
130
+ );
131
+ --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
132
+ --checkbox-foreground-default: var(--interface-foreground-default-primary);
133
+ --form-background-default: var(--interface-background-default-primary);
134
+ --form-border-default: var(--interface-border-default-primary);
135
+ --input-background-default: var(--interface-background-default-primary);
136
+ --input-background-disabled: var(--interface-background-disabled-disabled);
137
+ --input-background-hover: var(--interface-background-default-primary-hover);
138
+ --input-border-default: var(--interface-border-default-primary);
139
+ --input-border-disabled: var(--interface-border-disabled-disabled);
140
+ --input-border-focus: var(--interface-border-brand-brand);
141
+ --input-border-hover: var(--interface-border-default-primary);
142
+ --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
143
+ --input-foreground-primary: var(--interface-foreground-default-primary);
144
+ --input-foreground-secondary: var(--interface-foreground-default-secondary);
145
+ --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
146
+ --interface-background-brand-primary: var(--brand-500);
147
+ --interface-background-brand-primary-hover: var(--brand-400);
148
+ --interface-background-brand-secondary: var(--brand-50);
149
+ --interface-background-brand-secondary-hover: var(--brand-100);
150
+ --interface-background-default-inverted: var(--ui-900);
151
+ --interface-background-default-inverted-hover: var(--ui-800);
152
+ --interface-background-default-none: var(--ui-transparent);
153
+ --interface-background-default-primary: var(--ui-white);
154
+ --interface-background-default-primary-hover: var(--ui-50);
155
+ --interface-background-default-secondary: var(--ui-50);
156
+ --interface-background-default-secondary-hover: var(--ui-200);
157
+ --interface-background-default-tertiary: var(--ui-200);
158
+ --interface-background-default-tertiary-hover: var(--ui-300);
159
+ --interface-background-disabled-disabled: var(--ui-200);
160
+ --interface-background-validation-danger: var(--ui-danger);
161
+ --interface-background-validation-success: var(--ui-success);
162
+ --interface-background-validation-warning: var(--ui-warning);
163
+ --interface-border-brand-brand: var(--brand-500);
164
+ --interface-border-default-inverted: var(--ui-700);
165
+ --interface-border-default-none: var(--ui-transparent);
166
+ --interface-border-default-primary: var(--ui-300);
167
+ --interface-border-disabled-disabled: var(--ui-300);
168
+ --interface-border-validation-danger: var(--ui-danger);
169
+ --interface-border-validation-success: var(--ui-success);
170
+ --interface-border-validation-warning: var(--ui-warning);
171
+ --interface-foreground-brand-on-primary: var(--brand-50);
172
+ --interface-foreground-brand-on-secondary: var(--brand-950);
173
+ --interface-foreground-brand-primary: var(--brand-500);
174
+ --interface-foreground-brand-secondary: var(--brand-50);
175
+ --interface-foreground-default-inverted: var(--ui-white);
176
+ --interface-foreground-default-primary: var(--ui-900);
177
+ --interface-foreground-default-secondary: var(--ui-700);
178
+ --interface-foreground-default-tertiary: var(--ui-500);
179
+ --interface-foreground-disabled-disabled: var(--ui-300);
180
+ --interface-foreground-disabled-on-disabled: var(--ui-400);
181
+ --interface-foreground-validation-danger: var(--ui-danger);
182
+ --interface-foreground-validation-success: var(--ui-success);
183
+ --interface-foreground-validation-warning: var(--ui-warning);
184
+ --ory-background-default: var(--interface-background-default-primary);
185
+ --ory-border-default: var(--interface-border-default-primary);
186
+ --ory-foreground-default: var(--interface-foreground-default-primary);
187
+ --radio-background-checked: var(--interface-background-brand-primary);
188
+ --radio-background-default: var(--interface-background-default-secondary);
189
+ --radio-border-checked: var(--interface-border-brand-brand);
190
+ --radio-border-default: var(--interface-border-default-primary);
191
+ --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
192
+ --radio-foreground-default: var(--interface-foreground-default-primary);
193
+ --toggle-background-checked: var(--interface-background-brand-primary);
194
+ --toggle-background-default: var(--interface-background-default-secondary);
195
+ --toggle-border-checked: var(--interface-border-default-none);
196
+ --toggle-border-default: var(--interface-border-default-primary);
197
+ --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
198
+ --toggle-foreground-default: var(--interface-foreground-brand-primary);
199
+ --brand-100: var(--ui-100);
200
+ --brand-200: var(--ui-300);
201
+ --brand-300: var(--ui-500);
202
+ --brand-400: var(--ui-700);
203
+ --brand-50: var(--ui-50);
204
+ --brand-500: var(--ui-900);
205
+ --brand-600: var(--ui-white);
206
+ --brand-700: var(--ui-200);
207
+ --brand-800: var(--ui-400);
208
+ --brand-900: var(--ui-600);
209
+ --brand-950: var(--ui-800);
210
+
211
+ --color-ui-100: var(--ui-100);
212
+ --color-ui-200: var(--ui-200);
213
+ --color-ui-300: var(--ui-300);
214
+ --color-ui-400: var(--ui-400);
215
+ --color-ui-50: var(--ui-50);
216
+ --color-ui-500: var(--ui-500);
217
+ --color-ui-600: var(--ui-600);
218
+ --color-ui-700: var(--ui-700);
219
+ --color-ui-800: var(--ui-800);
220
+ --color-ui-900: var(--ui-900);
221
+ --color-ui-950: var(--ui-950);
222
+ --color-ui-black: var(--ui-black);
223
+ --color-ui-danger: var(--ui-danger);
224
+ --color-ui-success: var(--ui-success);
225
+ --color-ui-transparent: var(--ui-transparent);
226
+ --color-ui-warning: var(--ui-warning);
227
+ --color-ui-white: var(--ui-white);
228
+ --color-button-identifier-background-default: var(
229
+ --button-identifier-background-default
230
+ );
231
+ --color-button-identifier-background-hover: var(
232
+ --button-identifier-background-hover
233
+ );
234
+ --color-button-identifier-border-border-default: var(
235
+ --button-identifier-border-border-default
236
+ );
237
+ --color-button-identifier-border-border-hover: var(
238
+ --button-identifier-border-border-hover
239
+ );
240
+ --color-button-identifier-foreground-default: var(
241
+ --button-identifier-foreground-default
242
+ );
243
+ --color-button-identifier-foreground-hover: var(
244
+ --button-identifier-foreground-hover
245
+ );
246
+ --color-button-link-brand-brand: var(--button-link-brand-brand);
247
+ --color-button-link-brand-brand-hover: var(--button-link-brand-brand-hover);
248
+ --color-button-link-default-primary: var(--button-link-default-primary);
249
+ --color-button-link-default-primary-hover: var(
250
+ --button-link-default-primary-hover
251
+ );
252
+ --color-button-link-default-secondary: var(--button-link-default-secondary);
253
+ --color-button-link-default-secondary-hover: var(
254
+ --button-link-default-secondary-hover
255
+ );
256
+ --color-button-link-disabled-disabled: var(--button-link-disabled-disabled);
257
+ --color-button-primary-background-default: var(
258
+ --button-primary-background-default
259
+ );
260
+ --color-button-primary-background-disabled: var(
261
+ --button-primary-background-disabled
262
+ );
263
+ --color-button-primary-background-hover: var(
264
+ --button-primary-background-hover
265
+ );
266
+ --color-button-primary-border-default: var(--button-primary-border-default);
267
+ --color-button-primary-border-disabled: var(--button-primary-border-disabled);
268
+ --color-button-primary-border-hover: var(--button-primary-border-hover);
269
+ --color-button-primary-foreground-default: var(
270
+ --button-primary-foreground-default
271
+ );
272
+ --color-button-primary-foreground-disabled: var(
273
+ --button-primary-foreground-disabled
274
+ );
275
+ --color-button-primary-foreground-hover: var(
276
+ --button-primary-foreground-hover
277
+ );
278
+ --color-button-secondary-background-default: var(
279
+ --button-secondary-background-default
280
+ );
281
+ --color-button-secondary-background-disabled: var(
282
+ --button-secondary-background-disabled
283
+ );
284
+ --color-button-secondary-background-hover: var(
285
+ --button-secondary-background-hover
286
+ );
287
+ --color-button-secondary-border-default: var(
288
+ --button-secondary-border-default
289
+ );
290
+ --color-button-secondary-border-disabled: var(
291
+ --button-secondary-border-disabled
292
+ );
293
+ --color-button-secondary-border-hover: var(--button-secondary-border-hover);
294
+ --color-button-secondary-foreground-default: var(
295
+ --button-secondary-foreground-default
296
+ );
297
+ --color-button-secondary-foreground-disabled: var(
298
+ --button-secondary-foreground-disabled
299
+ );
300
+ --color-button-secondary-foreground-hover: var(
301
+ --button-secondary-foreground-hover
302
+ );
303
+ --color-button-social-background-default: var(
304
+ --button-social-background-default
305
+ );
306
+ --color-button-social-background-disabled: var(
307
+ --button-social-background-disabled
308
+ );
309
+ --color-button-social-background-generic-provider: var(
310
+ --button-social-background-generic-provider
311
+ );
312
+ --color-button-social-background-hover: var(--button-social-background-hover);
313
+ --color-button-social-border-default: var(--button-social-border-default);
314
+ --color-button-social-border-disabled: var(--button-social-border-disabled);
315
+ --color-button-social-border-generic-provider: var(
316
+ --button-social-border-generic-provider
317
+ );
318
+ --color-button-social-border-hover: var(--button-social-border-hover);
319
+ --color-button-social-foreground-default: var(
320
+ --button-social-foreground-default
321
+ );
322
+ --color-button-social-foreground-disabled: var(
323
+ --button-social-foreground-disabled
324
+ );
325
+ --color-button-social-foreground-generic-provider: var(
326
+ --button-social-foreground-generic-provider
327
+ );
328
+ --color-button-social-foreground-hover: var(--button-social-foreground-hover);
329
+ --color-checkbox-background-checked: var(--checkbox-background-checked);
330
+ --color-checkbox-background-default: var(--checkbox-background-default);
331
+ --color-checkbox-border-checkbox-border-checked: var(
332
+ --checkbox-border-checkbox-border-checked
333
+ );
334
+ --color-checkbox-border-checkbox-border-default: var(
335
+ --checkbox-border-checkbox-border-default
336
+ );
337
+ --color-checkbox-foreground-checked: var(--checkbox-foreground-checked);
338
+ --color-checkbox-foreground-default: var(--checkbox-foreground-default);
339
+ --color-form-background-default: var(--form-background-default);
340
+ --color-form-border-default: var(--form-border-default);
341
+ --color-input-background-default: var(--input-background-default);
342
+ --color-input-background-disabled: var(--input-background-disabled);
343
+ --color-input-background-hover: var(--input-background-hover);
344
+ --color-input-border-default: var(--input-border-default);
345
+ --color-input-border-disabled: var(--input-border-disabled);
346
+ --color-input-border-focus: var(--input-border-focus);
347
+ --color-input-border-hover: var(--input-border-hover);
348
+ --color-input-foreground-disabled: var(--input-foreground-disabled);
349
+ --color-input-foreground-primary: var(--input-foreground-primary);
350
+ --color-input-foreground-secondary: var(--input-foreground-secondary);
351
+ --color-input-foreground-tertiary: var(--input-foreground-tertiary);
352
+ --color-interface-background-brand-primary: var(
353
+ --interface-background-brand-primary
354
+ );
355
+ --color-interface-background-brand-primary-hover: var(
356
+ --interface-background-brand-primary-hover
357
+ );
358
+ --color-interface-background-brand-secondary: var(
359
+ --interface-background-brand-secondary
360
+ );
361
+ --color-interface-background-brand-secondary-hover: var(
362
+ --interface-background-brand-secondary-hover
363
+ );
364
+ --color-interface-background-default-inverted: var(
365
+ --interface-background-default-inverted
366
+ );
367
+ --color-interface-background-default-inverted-hover: var(
368
+ --interface-background-default-inverted-hover
369
+ );
370
+ --color-interface-background-default-none: var(
371
+ --interface-background-default-none
372
+ );
373
+ --color-interface-background-default-primary: var(
374
+ --interface-background-default-primary
375
+ );
376
+ --color-interface-background-default-primary-hover: var(
377
+ --interface-background-default-primary-hover
378
+ );
379
+ --color-interface-background-default-secondary: var(
380
+ --interface-background-default-secondary
381
+ );
382
+ --color-interface-background-default-secondary-hover: var(
383
+ --interface-background-default-secondary-hover
384
+ );
385
+ --color-interface-background-default-tertiary: var(
386
+ --interface-background-default-tertiary
387
+ );
388
+ --color-interface-background-default-tertiary-hover: var(
389
+ --interface-background-default-tertiary-hover
390
+ );
391
+ --color-interface-background-disabled-disabled: var(
392
+ --interface-background-disabled-disabled
393
+ );
394
+ --color-interface-background-validation-danger: var(
395
+ --interface-background-validation-danger
396
+ );
397
+ --color-interface-background-validation-success: var(
398
+ --interface-background-validation-success
399
+ );
400
+ --color-interface-background-validation-warning: var(
401
+ --interface-background-validation-warning
402
+ );
403
+ --color-interface-border-brand-brand: var(--interface-border-brand-brand);
404
+ --color-interface-border-default-inverted: var(
405
+ --interface-border-default-inverted
406
+ );
407
+ --color-interface-border-default-none: var(--interface-border-default-none);
408
+ --color-interface-border-default-primary: var(
409
+ --interface-border-default-primary
410
+ );
411
+ --color-interface-border-disabled-disabled: var(
412
+ --interface-border-disabled-disabled
413
+ );
414
+ --color-interface-border-validation-danger: var(
415
+ --interface-border-validation-danger
416
+ );
417
+ --color-interface-border-validation-success: var(
418
+ --interface-border-validation-success
419
+ );
420
+ --color-interface-border-validation-warning: var(
421
+ --interface-border-validation-warning
422
+ );
423
+ --color-interface-foreground-brand-on-primary: var(
424
+ --interface-foreground-brand-on-primary
425
+ );
426
+ --color-interface-foreground-brand-on-secondary: var(
427
+ --interface-foreground-brand-on-secondary
428
+ );
429
+ --color-interface-foreground-brand-primary: var(
430
+ --interface-foreground-brand-primary
431
+ );
432
+ --color-interface-foreground-brand-secondary: var(
433
+ --interface-foreground-brand-secondary
434
+ );
435
+ --color-interface-foreground-default-inverted: var(
436
+ --interface-foreground-default-inverted
437
+ );
438
+ --color-interface-foreground-default-primary: var(
439
+ --interface-foreground-default-primary
440
+ );
441
+ --color-interface-foreground-default-secondary: var(
442
+ --interface-foreground-default-secondary
443
+ );
444
+ --color-interface-foreground-default-tertiary: var(
445
+ --interface-foreground-default-tertiary
446
+ );
447
+ --color-interface-foreground-disabled-disabled: var(
448
+ --interface-foreground-disabled-disabled
449
+ );
450
+ --color-interface-foreground-disabled-on-disabled: var(
451
+ --interface-foreground-disabled-on-disabled
452
+ );
453
+ --color-interface-foreground-validation-danger: var(
454
+ --interface-foreground-validation-danger
455
+ );
456
+ --color-interface-foreground-validation-success: var(
457
+ --interface-foreground-validation-success
458
+ );
459
+ --color-interface-foreground-validation-warning: var(
460
+ --interface-foreground-validation-warning
461
+ );
462
+ --color-ory-background-default: var(--ory-background-default);
463
+ --color-ory-border-default: var(--ory-border-default);
464
+ --color-ory-foreground-default: var(--ory-foreground-default);
465
+ --color-radio-background-checked: var(--radio-background-checked);
466
+ --color-radio-background-default: var(--radio-background-default);
467
+ --color-radio-border-checked: var(--radio-border-checked);
468
+ --color-radio-border-default: var(--radio-border-default);
469
+ --color-radio-foreground-checked: var(--radio-foreground-checked);
470
+ --color-radio-foreground-default: var(--radio-foreground-default);
471
+ --color-toggle-background-checked: var(--toggle-background-checked);
472
+ --color-toggle-background-default: var(--toggle-background-default);
473
+ --color-toggle-border-checked: var(--toggle-border-checked);
474
+ --color-toggle-border-default: var(--toggle-border-default);
475
+ --color-toggle-foreground-checked: var(--toggle-foreground-checked);
476
+ --color-toggle-foreground-default: var(--toggle-foreground-default);
477
+ --color-brand-100: var(--brand-100);
478
+ --color-brand-200: var(--brand-200);
479
+ --color-brand-300: var(--brand-300);
480
+ --color-brand-400: var(--brand-400);
481
+ --color-brand-50: var(--brand-50);
482
+ --color-brand-500: var(--brand-500);
483
+ --color-brand-600: var(--brand-600);
484
+ --color-brand-700: var(--brand-700);
485
+ --color-brand-800: var(--brand-800);
486
+ --color-brand-900: var(--brand-900);
487
+ --color-brand-950: var(--brand-950);
488
+
489
+ --radius-buttons: 0.25rem;
490
+ --radius-forms: 0.25rem;
491
+ --radius-general: 0.25rem;
492
+ --radius-branding: 0.5rem;
493
+ --radius-cards: 0.75rem;
494
+ --radius-identifier: 62.4375rem;
495
+ }