@deriv-web-design/ui 0.0.15 → 0.0.19
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/dist/index.css +1420 -156
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +212 -3
- package/dist/index.d.ts +212 -3
- package/dist/index.js +1523 -409
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1515 -408
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
- package/tokens.css +50 -19
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deriv-web-design/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -27,12 +27,13 @@
|
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@lottiefiles/dotlottie-react": "^0.18.9"
|
|
30
|
+
"@lottiefiles/dotlottie-react": "^0.18.9",
|
|
31
|
+
"gsap": "^3.15.0"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
34
|
+
"framer-motion": "^11 || ^12",
|
|
33
35
|
"react": "^18 || ^19",
|
|
34
|
-
"react-dom": "^18 || ^19"
|
|
35
|
-
"framer-motion": "^11 || ^12"
|
|
36
|
+
"react-dom": "^18 || ^19"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
39
|
"@storybook/react": "^10.2.17",
|
package/tokens.css
CHANGED
|
@@ -8,25 +8,25 @@
|
|
|
8
8
|
/* Color — Slate */
|
|
9
9
|
--color-slate-50: #ffffff;
|
|
10
10
|
--color-slate-75: #f6f7f8;
|
|
11
|
-
--color-slate-100: #
|
|
12
|
-
--color-slate-200: #
|
|
13
|
-
--color-slate-300: #
|
|
14
|
-
--color-slate-400: #
|
|
15
|
-
--color-slate-500: #
|
|
16
|
-
--color-slate-600: #
|
|
17
|
-
--color-slate-700: #
|
|
18
|
-
--color-slate-800: #
|
|
11
|
+
--color-slate-100: #ebecef;
|
|
12
|
+
--color-slate-200: #ced0d6;
|
|
13
|
+
--color-slate-300: #b1b4bc;
|
|
14
|
+
--color-slate-400: #9498a2;
|
|
15
|
+
--color-slate-500: #787d88;
|
|
16
|
+
--color-slate-600: #5c616d;
|
|
17
|
+
--color-slate-700: #414652;
|
|
18
|
+
--color-slate-800: #383d4a;
|
|
19
19
|
--color-slate-900: #30354f;
|
|
20
|
-
--color-slate-1000: #
|
|
21
|
-
--color-slate-1100: #
|
|
22
|
-
--color-slate-1200: #
|
|
23
|
-
--color-slate-1300: #
|
|
24
|
-
--color-slate-1400: #
|
|
20
|
+
--color-slate-1000: #303541;
|
|
21
|
+
--color-slate-1100: #282c38;
|
|
22
|
+
--color-slate-1200: #20242f;
|
|
23
|
+
--color-slate-1300: #181c25;
|
|
24
|
+
--color-slate-1400: #11141b;
|
|
25
25
|
|
|
26
26
|
/* Color — Coral */
|
|
27
|
-
--color-coral-
|
|
28
|
-
--color-coral-
|
|
29
|
-
--color-coral-
|
|
27
|
+
--color-coral-700: #ff444f;
|
|
28
|
+
--color-coral-800: #e12e3a;
|
|
29
|
+
--color-coral-900: #c41c28;
|
|
30
30
|
|
|
31
31
|
/* Color — Emerald */
|
|
32
32
|
--color-emerald-500: #4cd6c0;
|
|
@@ -239,8 +239,8 @@
|
|
|
239
239
|
:root {
|
|
240
240
|
/* Button — Primary */
|
|
241
241
|
--button-primary-background: var(--color-coral-700);
|
|
242
|
-
--button-primary-background-hover: var(--color-coral-
|
|
243
|
-
--button-primary-background-active: var(--color-coral-
|
|
242
|
+
--button-primary-background-hover: var(--color-coral-800);
|
|
243
|
+
--button-primary-background-active: var(--color-coral-900);
|
|
244
244
|
--button-primary-text: var(--color-slate-50);
|
|
245
245
|
--button-primary-border: var(--color-coral-700);
|
|
246
246
|
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
--button-disabled-border: var(--color-slate-200);
|
|
272
272
|
|
|
273
273
|
/* Link — Coral scheme */
|
|
274
|
-
--link-coral-color: var(--color-coral-
|
|
274
|
+
--link-coral-color: var(--color-coral-700);
|
|
275
275
|
|
|
276
276
|
/* Link — Black scheme */
|
|
277
277
|
--link-black-color: var(--color-slate-1300);
|
|
@@ -532,6 +532,37 @@
|
|
|
532
532
|
--bottom-sheet-action-secondary-active-bg: var(--color-opacity-slate-16);
|
|
533
533
|
--bottom-sheet-list-item-border: var(--color-opacity-slate-8);
|
|
534
534
|
|
|
535
|
+
/* Text Color */
|
|
536
|
+
--text-primary: var(--color-slate-1200);
|
|
537
|
+
--text-secondary: var(--color-slate-1000);
|
|
538
|
+
--text-tertiary: var(--color-slate-500);
|
|
539
|
+
--text-disabled: var(--color-slate-400);
|
|
540
|
+
--text-inverse: var(--color-slate-50);
|
|
541
|
+
--text-brand: var(--color-coral-700);
|
|
542
|
+
--text-success: var(--color-emerald-700);
|
|
543
|
+
--text-warning: var(--color-yellow-600);
|
|
544
|
+
--text-danger: var(--color-cherry-700);
|
|
545
|
+
|
|
546
|
+
/* Icon Color */
|
|
547
|
+
--icon-primary: var(--color-slate-1200);
|
|
548
|
+
--icon-secondary: var(--color-slate-700);
|
|
549
|
+
--icon-tertiary: var(--color-slate-500);
|
|
550
|
+
--icon-disabled: var(--color-slate-400);
|
|
551
|
+
--icon-inverse: var(--color-slate-50);
|
|
552
|
+
--icon-brand: var(--color-coral-700);
|
|
553
|
+
--icon-success: var(--color-emerald-700);
|
|
554
|
+
--icon-warning: var(--color-yellow-600);
|
|
555
|
+
--icon-danger: var(--color-cherry-700);
|
|
556
|
+
--icon-info: var(--color-blue-600);
|
|
557
|
+
|
|
558
|
+
/* Background */
|
|
559
|
+
--background-page: var(--color-slate-50);
|
|
560
|
+
--background-surface: var(--color-slate-50);
|
|
561
|
+
--background-surface-secondary: var(--color-slate-75);
|
|
562
|
+
--background-surface-tertiary: var(--color-slate-100);
|
|
563
|
+
--background-surface-inverse: var(--color-slate-1200);
|
|
564
|
+
--background-brand: var(--color-coral-700);
|
|
565
|
+
|
|
535
566
|
/* Border */
|
|
536
567
|
--border-subtle: var(--color-slate-200);
|
|
537
568
|
--border-default: var(--color-slate-300);
|