@ibis-design/css 0.8.0 → 0.8.2
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/README.md +22 -5
- package/dist/design-tokens.css +131 -128
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -89,7 +89,7 @@ Import the stylesheet for each component you render. Class names are stable acro
|
|
|
89
89
|
| `@ibis-design/css/components/tipIndicator.css` | `.ibis-tip-indicator` |
|
|
90
90
|
| `@ibis-design/css/components/tooltip.css` | `.ibis-tooltip` |
|
|
91
91
|
|
|
92
|
-
For
|
|
92
|
+
For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/package/@ibis-design/svelte) or [@ibis-design/react](https://www.npmjs.com/package/@ibis-design/react) instead of copying markup by hand.
|
|
93
93
|
|
|
94
94
|
---
|
|
95
95
|
|
|
@@ -317,15 +317,32 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
|
|
|
317
317
|
@import "@ibis-design/css/components/dropdown.css";
|
|
318
318
|
```
|
|
319
319
|
|
|
320
|
-
Pair with your own JS for open/close.
|
|
320
|
+
Pair with your own JS for open/close. Example structure (add `ibis-dropdown--open` and toggle `hidden` on the menu):
|
|
321
321
|
|
|
322
322
|
```html
|
|
323
|
-
<div class="ibis-dropdown">
|
|
324
|
-
|
|
323
|
+
<div class="ibis-dropdown ibis-dropdown--open" role="combobox" aria-expanded="true">
|
|
324
|
+
<button type="button" class="ibis-dropdown__trigger">
|
|
325
|
+
<div class="ibis-input ibis-input--md">
|
|
326
|
+
<label class="ibis-input__label">Country</label>
|
|
327
|
+
<div class="ibis-input__wrapper">
|
|
328
|
+
<div class="ibis-input__field-wrapper">
|
|
329
|
+
<input type="text" class="ibis-input__field" value="United States" readonly />
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</button>
|
|
334
|
+
<ul role="listbox" class="ibis-dropdown__menu">
|
|
335
|
+
<li role="option" aria-selected="true">
|
|
336
|
+
<button type="button" class="ibis-dropdown__item">United States</button>
|
|
337
|
+
</li>
|
|
338
|
+
<li role="option">
|
|
339
|
+
<button type="button" class="ibis-dropdown__item">Canada</button>
|
|
340
|
+
</li>
|
|
341
|
+
</ul>
|
|
325
342
|
</div>
|
|
326
343
|
```
|
|
327
344
|
|
|
328
|
-
For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown` or build menu behavior on `.ibis-dropdown-button` below.
|
|
345
|
+
For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown`, **@ibis-design/react** `Dropdown`, or build menu behavior on `.ibis-dropdown-button` below.
|
|
329
346
|
|
|
330
347
|
---
|
|
331
348
|
|
package/dist/design-tokens.css
CHANGED
|
@@ -222,46 +222,47 @@
|
|
|
222
222
|
*/
|
|
223
223
|
|
|
224
224
|
[data-theme="ib-dark"] {
|
|
225
|
-
--color-primary-50: #
|
|
226
|
-
--color-primary-100: #
|
|
227
|
-
--color-primary-200: #
|
|
228
|
-
--color-primary-300: #
|
|
229
|
-
--color-primary-400: #
|
|
230
|
-
--color-primary-500: #
|
|
231
|
-
--color-primary-600: #
|
|
232
|
-
--color-primary-700: #
|
|
233
|
-
--color-primary-800: #
|
|
234
|
-
--color-primary-900: #
|
|
235
|
-
--color-primary-950: #
|
|
236
|
-
--color-neutral-50: #
|
|
237
|
-
--color-neutral-100: #
|
|
238
|
-
--color-neutral-200: #
|
|
239
|
-
--color-neutral-300: #
|
|
240
|
-
--color-neutral-400: #
|
|
241
|
-
--color-neutral-500: #
|
|
242
|
-
--color-neutral-600: #
|
|
243
|
-
--color-neutral-700: #
|
|
244
|
-
--color-neutral-800: #
|
|
245
|
-
--color-neutral-900: #
|
|
225
|
+
--color-primary-50: #14121f;
|
|
226
|
+
--color-primary-100: #251440;
|
|
227
|
+
--color-primary-200: #301362;
|
|
228
|
+
--color-primary-300: #3b1570;
|
|
229
|
+
--color-primary-400: #48277d;
|
|
230
|
+
--color-primary-500: #713bc1;
|
|
231
|
+
--color-primary-600: #7d42d6;
|
|
232
|
+
--color-primary-700: #8647e5;
|
|
233
|
+
--color-primary-800: #8e56e0;
|
|
234
|
+
--color-primary-900: #aa8ff6;
|
|
235
|
+
--color-primary-950: #ded7fd;
|
|
236
|
+
--color-neutral-50: #0d0d0d;
|
|
237
|
+
--color-neutral-100: #0f111a;
|
|
238
|
+
--color-neutral-200: #1e1e24;
|
|
239
|
+
--color-neutral-300: #2d2d35;
|
|
240
|
+
--color-neutral-400: #404454;
|
|
241
|
+
--color-neutral-500: #5d5d5d;
|
|
242
|
+
--color-neutral-600: #6d6d6d;
|
|
243
|
+
--color-neutral-700: #8d8d8e;
|
|
244
|
+
--color-neutral-800: #c1c1c1;
|
|
245
|
+
--color-neutral-900: #e0e2eb;
|
|
246
246
|
--color-neutral-950: #f4f4f4;
|
|
247
247
|
--color-white: #FFFFFF;
|
|
248
248
|
--color-black: #000000;
|
|
249
|
-
--color-green: #
|
|
250
|
-
--color-red: #
|
|
251
|
-
--color-orange: #
|
|
252
|
-
--color-toaster-accent: #
|
|
253
|
-
--color-gradients-main-start: #
|
|
254
|
-
--color-gradients-main-end: #
|
|
255
|
-
--color-gradients-purple-start: #
|
|
256
|
-
--color-gradients-purple-end: #
|
|
257
|
-
--color-gradients-dark-purple-start: #
|
|
258
|
-
--color-gradients-dark-purple-end: #
|
|
259
|
-
--color-gradients-skeleton-start: rgba(255,255,255,0.08);
|
|
260
|
-
--color-gradients-skeleton-middle: rgba(255,255,255,0.18);
|
|
261
|
-
--color-gradients-skeleton-end: rgba(255,255,255,0.08);
|
|
262
|
-
--color-gradients-button-start: #
|
|
263
|
-
--color-gradients-button-end: #
|
|
264
|
-
--color-backgrounds-classic-light: #
|
|
249
|
+
--color-green: #0DA529;
|
|
250
|
+
--color-red: #E85A52;
|
|
251
|
+
--color-orange: #FB9A33;
|
|
252
|
+
--color-toaster-accent: #FF54D4;
|
|
253
|
+
--color-gradients-main-start: #251440;
|
|
254
|
+
--color-gradients-main-end: #630050;
|
|
255
|
+
--color-gradients-purple-start: #713BC1;
|
|
256
|
+
--color-gradients-purple-end: #C519A3;
|
|
257
|
+
--color-gradients-dark-purple-start: #522398;
|
|
258
|
+
--color-gradients-dark-purple-end: #8E56E0;
|
|
259
|
+
--color-gradients-skeleton-start: rgba(255, 255, 255, 0.08);
|
|
260
|
+
--color-gradients-skeleton-middle: rgba(255, 255, 255, 0.18);
|
|
261
|
+
--color-gradients-skeleton-end: rgba(255, 255, 255, 0.08);
|
|
262
|
+
--color-gradients-button-start: #8E56E0;
|
|
263
|
+
--color-gradients-button-end: #713BC1;
|
|
264
|
+
--color-backgrounds-classic-light: #1a1528;
|
|
265
|
+
--color-backgrounds-classic-dark: #0f111a;
|
|
265
266
|
--font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
|
|
266
267
|
--font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
|
|
267
268
|
--font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
|
|
@@ -286,7 +287,7 @@
|
|
|
286
287
|
--border-color-button: #BD91FF;
|
|
287
288
|
--color-text-primary: var(--color-white);
|
|
288
289
|
--color-text-inverse: var(--color-black);
|
|
289
|
-
--color-toaster-default: var(--color-neutral-
|
|
290
|
+
--color-toaster-default: var(--color-neutral-300);
|
|
290
291
|
--color-toaster-success: var(--color-green);
|
|
291
292
|
--color-toaster-error: var(--color-red);
|
|
292
293
|
--color-status-success: var(--color-green);
|
|
@@ -298,8 +299,8 @@
|
|
|
298
299
|
--gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
|
|
299
300
|
--gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
|
|
300
301
|
--gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
|
|
301
|
-
--border-color-default: var(--color-neutral-
|
|
302
|
-
--border-color-focus: var(--color-primary-
|
|
302
|
+
--border-color-default: var(--color-neutral-400);
|
|
303
|
+
--border-color-focus: var(--color-primary-400);
|
|
303
304
|
}
|
|
304
305
|
|
|
305
306
|
/**
|
|
@@ -307,47 +308,48 @@
|
|
|
307
308
|
*/
|
|
308
309
|
|
|
309
310
|
[data-theme="alc-light"] {
|
|
310
|
-
--color-primary-50: #
|
|
311
|
-
--color-primary-100: #
|
|
312
|
-
--color-primary-200: #
|
|
313
|
-
--color-primary-300: #
|
|
314
|
-
--color-primary-400: #
|
|
315
|
-
--color-primary-500: #
|
|
316
|
-
--color-primary-600: #
|
|
317
|
-
--color-primary-700: #
|
|
318
|
-
--color-primary-800: #
|
|
319
|
-
--color-primary-900: #
|
|
320
|
-
--color-primary-950: #
|
|
321
|
-
--color-neutral-50: #
|
|
322
|
-
--color-neutral-100: #
|
|
323
|
-
--color-neutral-200: #
|
|
324
|
-
--color-neutral-300: #
|
|
325
|
-
--color-neutral-400: #
|
|
326
|
-
--color-neutral-500: #
|
|
327
|
-
--color-neutral-600: #
|
|
328
|
-
--color-neutral-700: #
|
|
329
|
-
--color-neutral-800: #
|
|
330
|
-
--color-neutral-900: #
|
|
311
|
+
--color-primary-50: #d8e2ff;
|
|
312
|
+
--color-primary-100: #d8e2ff;
|
|
313
|
+
--color-primary-200: #c5d8ff;
|
|
314
|
+
--color-primary-300: #90b8ff;
|
|
315
|
+
--color-primary-400: #0939c4;
|
|
316
|
+
--color-primary-500: #3864e7;
|
|
317
|
+
--color-primary-600: #3557ba;
|
|
318
|
+
--color-primary-700: #0939c4;
|
|
319
|
+
--color-primary-800: #13224c;
|
|
320
|
+
--color-primary-900: #17285c;
|
|
321
|
+
--color-primary-950: #13224c;
|
|
322
|
+
--color-neutral-50: #fafafa;
|
|
323
|
+
--color-neutral-100: #fbfcfe;
|
|
324
|
+
--color-neutral-200: #e0e2eb;
|
|
325
|
+
--color-neutral-300: #dbdbdb;
|
|
326
|
+
--color-neutral-400: #c1c1c1;
|
|
327
|
+
--color-neutral-500: #a8a8a8;
|
|
328
|
+
--color-neutral-600: #8d8d8e;
|
|
329
|
+
--color-neutral-700: #666666;
|
|
330
|
+
--color-neutral-800: #4d4d4d;
|
|
331
|
+
--color-neutral-900: #404454;
|
|
331
332
|
--color-neutral-950: #000000;
|
|
332
333
|
--color-white: #FFFFFF;
|
|
333
334
|
--color-black: #000000;
|
|
334
|
-
--color-green: #
|
|
335
|
-
--color-red: #
|
|
336
|
-
--color-orange: #
|
|
337
|
-
--color-brand-secondary: #
|
|
338
|
-
--color-alchemy-neutral-yellow: #
|
|
339
|
-
--color-alchemy-neutral-blue: #
|
|
340
|
-
--color-alchemy-neutral-green: #
|
|
335
|
+
--color-green: #0DA529;
|
|
336
|
+
--color-red: #FF0420;
|
|
337
|
+
--color-orange: #A85F00;
|
|
338
|
+
--color-brand-secondary: #17285C; /** Secondary button label and border (Figma) */
|
|
339
|
+
--color-alchemy-neutral-yellow: #ffe6c7;
|
|
340
|
+
--color-alchemy-neutral-blue: #d8e2ff;
|
|
341
|
+
--color-alchemy-neutral-green: #d6ffda;
|
|
342
|
+
--color-alchemy-neutral-purple: #eae6f4;
|
|
341
343
|
--color-gradients-main-start: #244197;
|
|
342
344
|
--color-gradients-main-end: #090F20;
|
|
343
|
-
--color-gradients-brand-start: #
|
|
344
|
-
--color-gradients-brand-middle: #
|
|
345
|
-
--color-gradients-brand-end: #
|
|
346
|
-
--color-gradients-button-start: #
|
|
347
|
-
--color-gradients-button-end: #
|
|
345
|
+
--color-gradients-brand-start: #3866ED;
|
|
346
|
+
--color-gradients-brand-middle: #3E6FFF;
|
|
347
|
+
--color-gradients-brand-end: #3557BA;
|
|
348
|
+
--color-gradients-button-start: #17285C;
|
|
349
|
+
--color-gradients-button-end: #13224C;
|
|
348
350
|
--color-backgrounds-classic-light: #fafafa;
|
|
349
351
|
--color-backgrounds-classic-dark: #0d0d0d;
|
|
350
|
-
--color-backgrounds-cardbg-purple: #
|
|
352
|
+
--color-backgrounds-cardbg-purple: #9747ff;
|
|
351
353
|
--color-backgrounds-cardbg-dark-purple: #522398;
|
|
352
354
|
--font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
|
|
353
355
|
--font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
|
|
@@ -382,24 +384,24 @@
|
|
|
382
384
|
--border-radius-xl: 1rem;
|
|
383
385
|
--border-radius-2xl: 1.5rem;
|
|
384
386
|
--border-radius-full: 9999px;
|
|
387
|
+
--border-color-button: #0939C4;
|
|
385
388
|
--color-text-primary: var(--color-black);
|
|
386
389
|
--color-text-inverse: var(--color-white);
|
|
387
390
|
--color-toaster-default: var(--color-neutral-200);
|
|
388
391
|
--color-toaster-success: var(--color-green);
|
|
389
392
|
--color-toaster-error: var(--color-red);
|
|
393
|
+
--color-toaster-accent: var(--color-brand-secondary);
|
|
390
394
|
--color-status-success: var(--color-green);
|
|
391
395
|
--color-status-error: var(--color-red);
|
|
392
396
|
--color-status-warning: var(--color-orange);
|
|
393
397
|
--color-brand-primary: var(--color-primary-500);
|
|
394
|
-
--color-brand-neutral: var(--color-neutral-
|
|
398
|
+
--color-brand-neutral: var(--color-neutral-600);
|
|
395
399
|
--color-backgrounds-themed-ibis-white: var(--color-white);
|
|
396
|
-
--gradient-brand-primary: linear-gradient(
|
|
397
|
-
--gradient-brand-accent: linear-gradient(
|
|
398
|
-
--gradient-button: linear-gradient(
|
|
400
|
+
--gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
|
|
401
|
+
--gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
|
|
402
|
+
--gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
|
|
399
403
|
--border-color-default: var(--color-neutral-200);
|
|
400
|
-
--border-color-focus: var(--color-primary-
|
|
401
|
-
--color-toaster-accent: var(--color-brand-primary);
|
|
402
|
-
--border-color-button: var(--color-brand-primary);
|
|
404
|
+
--border-color-focus: var(--color-primary-400);
|
|
403
405
|
}
|
|
404
406
|
|
|
405
407
|
/**
|
|
@@ -407,48 +409,49 @@
|
|
|
407
409
|
*/
|
|
408
410
|
|
|
409
411
|
[data-theme="alc-dark"] {
|
|
410
|
-
--color-primary-50: #
|
|
411
|
-
--color-primary-100: #
|
|
412
|
-
--color-primary-200: #
|
|
413
|
-
--color-primary-300: #
|
|
414
|
-
--color-primary-400: #
|
|
415
|
-
--color-primary-500: #
|
|
416
|
-
--color-primary-600: #
|
|
417
|
-
--color-primary-700: #
|
|
418
|
-
--color-primary-800: #
|
|
419
|
-
--color-primary-900: #
|
|
420
|
-
--color-primary-950: #
|
|
421
|
-
--color-neutral-50: #
|
|
422
|
-
--color-neutral-100: #
|
|
423
|
-
--color-neutral-200: #
|
|
424
|
-
--color-neutral-300: #
|
|
425
|
-
--color-neutral-400: #
|
|
426
|
-
--color-neutral-500: #
|
|
427
|
-
--color-neutral-600: #
|
|
428
|
-
--color-neutral-700: #
|
|
429
|
-
--color-neutral-800: #
|
|
430
|
-
--color-neutral-900: #
|
|
431
|
-
--color-neutral-950: #
|
|
412
|
+
--color-primary-50: #13224c;
|
|
413
|
+
--color-primary-100: #13224c;
|
|
414
|
+
--color-primary-200: #14234f;
|
|
415
|
+
--color-primary-300: #17285c;
|
|
416
|
+
--color-primary-400: #90b8ff;
|
|
417
|
+
--color-primary-500: #3864e7;
|
|
418
|
+
--color-primary-600: #3e6fff;
|
|
419
|
+
--color-primary-700: #4774fa;
|
|
420
|
+
--color-primary-800: #4774fa;
|
|
421
|
+
--color-primary-900: #90b8ff;
|
|
422
|
+
--color-primary-950: #d8e2ff;
|
|
423
|
+
--color-neutral-50: #0d0d0d;
|
|
424
|
+
--color-neutral-100: #0f111a;
|
|
425
|
+
--color-neutral-200: #161f39;
|
|
426
|
+
--color-neutral-300: #1a132c;
|
|
427
|
+
--color-neutral-400: #404454;
|
|
428
|
+
--color-neutral-500: #666666;
|
|
429
|
+
--color-neutral-600: #8d8d8e;
|
|
430
|
+
--color-neutral-700: #8d8d8e;
|
|
431
|
+
--color-neutral-800: #c1c1c1;
|
|
432
|
+
--color-neutral-900: #e0e2eb;
|
|
433
|
+
--color-neutral-950: #fbfcfe;
|
|
432
434
|
--color-white: #FFFFFF;
|
|
433
435
|
--color-black: #000000;
|
|
434
|
-
--color-green: #
|
|
435
|
-
--color-red: #
|
|
436
|
-
--color-orange: #
|
|
437
|
-
--color-brand-secondary: #
|
|
438
|
-
--color-alchemy-neutral-yellow: #
|
|
439
|
-
--color-alchemy-neutral-blue: #
|
|
440
|
-
--color-alchemy-neutral-green: #
|
|
436
|
+
--color-green: #0DA529;
|
|
437
|
+
--color-red: #FF5A5A;
|
|
438
|
+
--color-orange: #E89A33;
|
|
439
|
+
--color-brand-secondary: #4774FA; /** Secondary button label and border (Figma dark) */
|
|
440
|
+
--color-alchemy-neutral-yellow: #3d3020;
|
|
441
|
+
--color-alchemy-neutral-blue: #161f39;
|
|
442
|
+
--color-alchemy-neutral-green: #1a2e1e;
|
|
443
|
+
--color-alchemy-neutral-purple: #2a2240;
|
|
441
444
|
--color-gradients-main-start: #244197;
|
|
442
445
|
--color-gradients-main-end: #090F20;
|
|
443
|
-
--color-gradients-brand-start: #
|
|
444
|
-
--color-gradients-brand-middle: #
|
|
445
|
-
--color-gradients-brand-end: #
|
|
446
|
-
--color-gradients-button-start: #
|
|
447
|
-
--color-gradients-button-end: #
|
|
448
|
-
--color-backgrounds-classic-light: #
|
|
449
|
-
--color-backgrounds-classic-dark: #
|
|
450
|
-
--color-backgrounds-cardbg-purple: #
|
|
451
|
-
--color-backgrounds-cardbg-dark-purple: #
|
|
446
|
+
--color-gradients-brand-start: #3866ED;
|
|
447
|
+
--color-gradients-brand-middle: #3E6FFF;
|
|
448
|
+
--color-gradients-brand-end: #3557BA;
|
|
449
|
+
--color-gradients-button-start: #3E6FFF;
|
|
450
|
+
--color-gradients-button-end: #4774FA;
|
|
451
|
+
--color-backgrounds-classic-light: #161f39;
|
|
452
|
+
--color-backgrounds-classic-dark: #0f111a;
|
|
453
|
+
--color-backgrounds-cardbg-purple: #522398;
|
|
454
|
+
--color-backgrounds-cardbg-dark-purple: #0939c4;
|
|
452
455
|
--font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
|
|
453
456
|
--font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
|
|
454
457
|
--font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
|
|
@@ -482,22 +485,22 @@
|
|
|
482
485
|
--border-radius-xl: 1rem;
|
|
483
486
|
--border-radius-2xl: 1.5rem;
|
|
484
487
|
--border-radius-full: 9999px;
|
|
488
|
+
--border-color-button: #3E6FFF;
|
|
485
489
|
--color-text-primary: var(--color-white);
|
|
486
490
|
--color-text-inverse: var(--color-black);
|
|
487
|
-
--color-toaster-default: var(--color-neutral-
|
|
491
|
+
--color-toaster-default: var(--color-neutral-300);
|
|
488
492
|
--color-toaster-success: var(--color-green);
|
|
489
493
|
--color-toaster-error: var(--color-red);
|
|
494
|
+
--color-toaster-accent: var(--color-brand-secondary);
|
|
490
495
|
--color-status-success: var(--color-green);
|
|
491
496
|
--color-status-error: var(--color-red);
|
|
492
497
|
--color-status-warning: var(--color-orange);
|
|
493
498
|
--color-brand-primary: var(--color-primary-500);
|
|
494
|
-
--color-brand-neutral: var(--color-neutral-
|
|
499
|
+
--color-brand-neutral: var(--color-neutral-600);
|
|
495
500
|
--color-backgrounds-themed-ibis-white: var(--color-white);
|
|
496
|
-
--gradient-brand-primary: linear-gradient(
|
|
497
|
-
--gradient-brand-accent: linear-gradient(
|
|
498
|
-
--gradient-button: linear-gradient(
|
|
499
|
-
--border-color-default: var(--color-neutral-
|
|
500
|
-
--border-color-focus: var(--color-primary-
|
|
501
|
-
--color-toaster-accent: var(--color-brand-primary);
|
|
502
|
-
--border-color-button: var(--color-brand-primary);
|
|
501
|
+
--gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
|
|
502
|
+
--gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
|
|
503
|
+
--gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
|
|
504
|
+
--border-color-default: var(--color-neutral-400);
|
|
505
|
+
--border-color-focus: var(--color-primary-600);
|
|
503
506
|
}
|