@deriv-web-design/ui 0.0.14 → 0.0.17

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.
Files changed (10) hide show
  1. package/dist/index.css +384 -161
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +65 -11
  4. package/dist/index.d.ts +65 -11
  5. package/dist/index.js +849 -345
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +793 -292
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +5 -4
  10. package/tokens.css +67 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-web-design/ui",
3
- "version": "0.0.14",
3
+ "version": "0.0.17",
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: #eceeef;
12
- --color-slate-200: #e0e3e5;
13
- --color-slate-300: #cfd4d8;
14
- --color-slate-400: #bfc6cc;
15
- --color-slate-500: #7b8a96;
16
- --color-slate-600: #5c6770;
17
- --color-slate-700: #414c52;
18
- --color-slate-800: #353c44;
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: #232c3a;
21
- --color-slate-1100: #20242f;
22
- --color-slate-1200: #181c25;
23
- --color-slate-1300: #14141c;
24
- --color-slate-1400: #000000;
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-500: #ff444f;
28
- --color-coral-600: #e73c36;
29
- --color-coral-700: #dc1f28;
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;
@@ -82,6 +82,11 @@
82
82
  --color-opacity-white-72: rgba(255, 255, 255, 0.72);
83
83
  --color-opacity-white-88: rgba(255, 255, 255, 0.88);
84
84
 
85
+ /* Content Width */
86
+ --content-width-846: 52.875rem;
87
+ --content-width-1064: 66.5rem;
88
+ --content-width-1280: 80rem;
89
+
85
90
  /* Spacing */
86
91
  --spacing-0: 0rem;
87
92
  --spacing-2: 0.125rem;
@@ -234,8 +239,8 @@
234
239
  :root {
235
240
  /* Button — Primary */
236
241
  --button-primary-background: var(--color-coral-700);
237
- --button-primary-background-hover: var(--color-coral-600);
238
- --button-primary-background-active: var(--color-coral-500);
242
+ --button-primary-background-hover: var(--color-coral-800);
243
+ --button-primary-background-active: var(--color-coral-900);
239
244
  --button-primary-text: var(--color-slate-50);
240
245
  --button-primary-border: var(--color-coral-700);
241
246
 
@@ -266,7 +271,7 @@
266
271
  --button-disabled-border: var(--color-slate-200);
267
272
 
268
273
  /* Link — Coral scheme */
269
- --link-coral-color: var(--color-coral-500);
274
+ --link-coral-color: var(--color-coral-700);
270
275
 
271
276
  /* Link — Black scheme */
272
277
  --link-black-color: var(--color-slate-1300);
@@ -527,6 +532,49 @@
527
532
  --bottom-sheet-action-secondary-active-bg: var(--color-opacity-slate-16);
528
533
  --bottom-sheet-list-item-border: var(--color-opacity-slate-8);
529
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
+
566
+ /* Border */
567
+ --border-subtle: var(--color-slate-200);
568
+ --border-default: var(--color-slate-300);
569
+ --border-strong: var(--color-slate-1200);
570
+ --border-inverse: var(--color-slate-50);
571
+ --border-brand: var(--color-coral-700);
572
+ --border-focus: var(--color-blue-600);
573
+ --border-success: var(--color-emerald-700);
574
+ --border-warning: var(--color-yellow-600);
575
+ --border-danger: var(--color-cherry-700);
576
+ --border-disabled: var(--color-slate-200);
577
+
530
578
  /* Footer */
531
579
  --footer-background: var(--color-slate-1200);
532
580
  --footer-surface: var(--color-slate-1100);