@deriv-ds/design-intelligence-layer 0.3.0 → 0.4.1

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 (9) hide show
  1. package/README.md +11 -4
  2. package/dist/index.cjs +2554 -1791
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +289 -102
  5. package/dist/index.d.ts +289 -102
  6. package/dist/index.js +2466 -1699
  7. package/dist/index.js.map +1 -1
  8. package/package.json +10 -4
  9. package/src/styles.css +131 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-ds/design-intelligence-layer",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
4
4
  "description": "Deriv Design System — shadcn/ui components with Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -35,7 +35,8 @@
35
35
  "dist/",
36
36
  "src/styles.css",
37
37
  "guides/",
38
- "AGENTS.md"
38
+ "AGENTS.md",
39
+ "README.md"
39
40
  ],
40
41
  "publishConfig": {
41
42
  "access": "public"
@@ -60,6 +61,7 @@
60
61
  "react-hook-form": "^7.71.2",
61
62
  "react-resizable-panels": "^4.7.1",
62
63
  "recharts": "^2.15.4",
64
+ "shiki": "^4.0.2",
63
65
  "sonner": "^2.0.7",
64
66
  "tailwind-merge": "^3.5.0",
65
67
  "vaul": "^1.1.2",
@@ -71,8 +73,8 @@
71
73
  "@types/react": "^19",
72
74
  "@types/react-dom": "^19",
73
75
  "eslint": "^9",
74
- "eslint-config-next": "16.1.6",
75
- "next": "16.1.6",
76
+ "eslint-config-next": "16.2.6",
77
+ "next": "16.2.6",
76
78
  "next-themes": "^0.4.6",
77
79
  "react": "19.2.3",
78
80
  "react-dom": "19.2.3",
@@ -81,5 +83,9 @@
81
83
  "tsup": "^8.5.1",
82
84
  "tw-animate-css": "^1.4.0",
83
85
  "typescript": "^5"
86
+ },
87
+ "overrides": {
88
+ "lodash": "^4.18.0",
89
+ "postcss": "^8.5.10"
84
90
  }
85
91
  }
package/src/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * Trading Game Design System — Design Tokens
2
+ * Quill Design System — Design Tokens
3
3
  *
4
4
  * Usage in consumer apps:
5
5
  * import "@deriv-ds/design-intelligence-layer/styles"
@@ -20,9 +20,14 @@
20
20
  --color-primary-canvas: var(--background-primary-canvas);
21
21
  --color-secondary-surface: var(--background-secondary-surface);
22
22
  --color-secondary-canvas: var(--background-secondary-canvas);
23
+ --color-card: var(--background-primary-surface);
24
+ --color-popover: var(--background-primary-surface);
23
25
  /* ── Foundation border tokens ── */
24
26
  --color-default: var(--border-default-default);
25
27
  --color-selected: var(--border-selected-default);
28
+ --color-selected-inverse: var(--border-selected-inverse);
29
+ --color-border-subtle: var(--border-subtle-default);
30
+ --color-border-prominent: var(--border-prominent-default);
26
31
  /* ── Text tokens (repurposed from bg aliases) ── */
27
32
  --color-prominent: var(--text-prominent-default);
28
33
  --color-subtle: var(--text-subtle-default);
@@ -54,6 +59,7 @@
54
59
  --color-alert-error-border: var(--alert-error-border);
55
60
 
56
61
  --color-overlay: var(--overlay);
62
+ --color-slider-track: var(--slider-track);
57
63
  --color-slider-range: var(--slider-range);
58
64
  --color-tabs: var(--tabs);
59
65
  --color-tabs-active: var(--tabs-active);
@@ -152,6 +158,7 @@
152
158
  --color-tab-border-selected: var(--tab-border-selected);
153
159
  /* ── Segmented Control colour bridges ── */
154
160
  --color-segmented-control-text-prominent: var(--segmented-control-text-prominent);
161
+ --color-segmented-control-text-default: var(--segmented-control-text-default);
155
162
  --color-segmented-control-text-disabled: var(--segmented-control-text-disabled);
156
163
  --color-segmented-control-icon-prominent: var(--segmented-control-icon-prominent);
157
164
  --color-segmented-control-icon-disabled: var(--segmented-control-icon-disabled);
@@ -254,6 +261,17 @@
254
261
  --color-list-item-secondary-bg-pressed: var(--list-item-secondary-bg-pressed);
255
262
  --color-list-item-secondary-bg-selected: var(--list-item-secondary-bg-selected);
256
263
  --color-list-item-secondary-bg-disabled: var(--list-item-secondary-bg-disabled);
264
+ --color-list-item-icon-prominent: var(--list-item-icon-prominent);
265
+ --color-list-item-icon-disabled: var(--list-item-icon-disabled);
266
+ --color-list-item-flag-placeholder: var(--list-item-flag-placeholder);
267
+ /* ── Toggle colour bridges ── */
268
+ --color-toggle-track-off: var(--toggle-track-off);
269
+ --color-toggle-track-off-hover: var(--toggle-track-off-hover);
270
+ --color-toggle-track-off-active: var(--toggle-track-off-active);
271
+ --color-toggle-track-on: var(--toggle-track-on);
272
+ --color-toggle-track-on-hover: var(--toggle-track-on-hover);
273
+ --color-toggle-track-on-active: var(--toggle-track-on-active);
274
+ --color-toggle-knob: var(--toggle-knob);
257
275
  /* ── Field colour bridges ── */
258
276
  --color-field-text-prominent: var(--field-text-prominent);
259
277
  --color-field-text-subtle: var(--field-text-subtle);
@@ -332,6 +350,28 @@
332
350
  --color-notification-text-read-unread: var(--notification-text-read-unread);
333
351
  --color-notification-icon-delete: var(--notification-icon-delete);
334
352
  --color-notification-text-delete: var(--notification-text-delete);
353
+ /* ── Accordion component colour bridges ── */
354
+ --color-accordion-bg-default: var(--accordion-bg-default);
355
+ --color-accordion-bg-hover: var(--accordion-bg-hover);
356
+ --color-accordion-bg-active: var(--accordion-bg-active);
357
+ --color-accordion-bg-expand: var(--accordion-bg-expand);
358
+ --color-accordion-icon: var(--accordion-icon);
359
+ --color-accordion-icon-disabled: var(--accordion-icon-disabled);
360
+ --color-accordion-title: var(--accordion-title);
361
+ --color-accordion-title-disabled: var(--accordion-title-disabled);
362
+ --color-accordion-subtitle: var(--accordion-subtitle);
363
+ --color-accordion-subtitle-disabled: var(--accordion-subtitle-disabled);
364
+ --color-accordion-border: var(--accordion-border);
365
+ /* ── Accordion shadow — registered as a named Tailwind shadow utility ── */
366
+ --shadow-accordion-fill: var(--accordion-shadow-fill);
367
+ /* ── Accordion animations ── */
368
+ --animate-accordion-down: accordion-down var(--duration-base) var(--ease-standard);
369
+ --animate-accordion-up: accordion-up var(--duration-base) var(--ease-standard);
370
+
371
+ /* ── Breadcrumb ── */
372
+ --color-breadcrumb-default: var(--breadcrumb-default);
373
+ --color-breadcrumb-selected: var(--breadcrumb-selected);
374
+ --color-breadcrumb-sep: var(--breadcrumb-sep);
335
375
  }
336
376
 
337
377
  /* ══════════════════════════════════════════════════════════════
@@ -1135,8 +1175,8 @@
1135
1175
  --alert-info-border: var(--border-information-default);
1136
1176
  --alert-error-text: var(--text-error-default);
1137
1177
  --alert-error-border: var(--border-error-default);
1138
- --slider-range: oklch(0.665 0.222 22.7 / 40%); /* TODO: no matching primitive — coral-700 @ 40%; alpha scale has 32% and 48% stops only */
1139
- /* coral-700 at 40% opacity */
1178
+ --slider-track: var(--primitive-mono-alpha-8); /* rgba(0,0,0,0.08) — matches Quill progress bar track */
1179
+ --slider-range: var(--primitive-mono-1000); /* #000000 solid — matches Quill progress bar indicator */
1140
1180
  --sidebar: var(--background-primary-surface);
1141
1181
  --sidebar-foreground: var(--text-prominent-default);
1142
1182
  --sidebar-primary: var(--primary);
@@ -1384,6 +1424,26 @@
1384
1424
  ══════════════════════════════════════════════════════════════ */
1385
1425
  :root {
1386
1426
 
1427
+ /* Accordion */
1428
+ --accordion-bg-default: var(--background-primary-surface);
1429
+ --accordion-bg-hover: var(--background-default-opacity-default); /* #181C25 @ 4% */
1430
+ --accordion-bg-active: var(--background-hover-default); /* #181C25 @ 8% */
1431
+ --accordion-bg-expand: var(--background-default-opacity-default); /* #181C25 @ 4% */
1432
+ --accordion-icon: var(--primitive-black-alpha-900); /* rgba(0,0,0,0.72) — Figma exact */
1433
+ --accordion-icon-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
1434
+ --accordion-title: var(--text-prominent-default); /* #181C25 solid */
1435
+ --accordion-title-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
1436
+ --accordion-subtitle: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
1437
+ --accordion-subtitle-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
1438
+ --accordion-border: var(--primitive-black-alpha-100); /* rgba(0,0,0,0.08) — Figma exact */
1439
+ --accordion-radius: 24px; /* ⚠ no standard token at 24px; nearest are rounded-3xl=22px, rounded-4xl=26px */
1440
+ --accordion-shadow-fill: 0px 1px 2px 0px rgba(0,0,0,0.04), 0px 2px 6px 0px rgba(0,0,0,0.08);
1441
+
1442
+ /* Breadcrumb */
1443
+ --breadcrumb-default: var(--primitive-black-alpha-900); /* rgba(0,0,0,0.72) — Figma exact */
1444
+ --breadcrumb-selected: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
1445
+ --breadcrumb-sep: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
1446
+
1387
1447
  /* Button */
1388
1448
  --button-primary-normal-bg-default: var(--primitive-coral-700);
1389
1449
  --button-primary-normal-bg-hover: var(--primitive-coral-800);
@@ -1538,6 +1598,15 @@
1538
1598
  --list-item-secondary-bg-selected: var(--primitive-slate-alpha-100);
1539
1599
  --list-item-secondary-bg-disabled: var(--primitive-slate-50);
1540
1600
 
1601
+ /* Toggle */
1602
+ --toggle-track-off: var(--primitive-slate-alpha-200); /* #181C25 @ 16% */
1603
+ --toggle-track-off-hover: var(--primitive-slate-alpha-300); /* #181C25 @ 24% */
1604
+ --toggle-track-off-active: var(--primitive-slate-alpha-600); /* #181C25 @ 48% */
1605
+ --toggle-track-on: var(--primitive-green-alpha-1000); /* green @ 80% */
1606
+ --toggle-track-on-hover: var(--primitive-green-alpha-1100); /* green @ 88% */
1607
+ --toggle-track-on-active: var(--primitive-green-900); /* #007a22 solid */
1608
+ --toggle-knob: var(--primitive-slate-50); /* #ffffff always */
1609
+
1541
1610
  /* Search Field */
1542
1611
  --search-field-text-prominent: var(--primitive-slate-1200);
1543
1612
  --search-field-text-subtle: var(--primitive-slate-alpha-600);
@@ -1609,17 +1678,18 @@
1609
1678
  --tab-bg-pressed: var(--primitive-slate-alpha-200);
1610
1679
  --tab-border-default: var(--primitive-slate-alpha-100);
1611
1680
  --tab-border-focus: var(--primitive-slate-1200);
1612
- --tab-border-selected: var(--primitive-slate-1200);
1681
+ --tab-border-selected: var(--primitive-coral-700);
1613
1682
 
1614
1683
  /* Segmented Control */
1615
- --segmented-control-text-prominent: var(--primitive-slate-1200);
1616
- --segmented-control-text-disabled: var(--primitive-slate-alpha-200);
1684
+ --segmented-control-text-prominent: var(--primitive-slate-1200); /* #181C25 solid — selected label */
1685
+ --segmented-control-text-default: var(--primitive-slate-alpha-900); /* #181C25 @ 72% — unselected label */
1686
+ --segmented-control-text-disabled: var(--primitive-slate-alpha-200);
1617
1687
  --segmented-control-icon-prominent: var(--primitive-slate-1200);
1618
- --segmented-control-icon-disabled: var(--primitive-slate-alpha-200);
1619
- --segmented-control-container-bg: var(--primitive-slate-alpha-100);
1688
+ --segmented-control-icon-disabled: var(--primitive-slate-alpha-200);
1689
+ --segmented-control-container-bg: var(--primitive-mono-alpha-4); /* rgba(0,0,0,0.04) — matches Figma */
1620
1690
  --segmented-control-segment-bg-selected: var(--primitive-slate-50);
1621
- --segmented-control-segment-bg-hover: var(--primitive-slate-alpha-100);
1622
- --segmented-control-segment-bg-pressed: var(--primitive-slate-alpha-200);
1691
+ --segmented-control-segment-bg-hover: var(--primitive-slate-alpha-100);
1692
+ --segmented-control-segment-bg-pressed: var(--primitive-slate-alpha-200);
1623
1693
 
1624
1694
  /* Tooltip */
1625
1695
  --tooltip-text-default: var(--primitive-slate-50);
@@ -1833,6 +1903,7 @@
1833
1903
  :root {
1834
1904
  --primitive-size-1: 1px;
1835
1905
  --primitive-size-1-5: 1.5px;
1906
+ --primitive-size-2: 2px;
1836
1907
  --primitive-size-4: 4px;
1837
1908
  --primitive-size-6: 6px;
1838
1909
  --primitive-size-8: 8px;
@@ -1866,6 +1937,7 @@
1866
1937
  /* Border widths */
1867
1938
  --semantic-size-border-1: var(--primitive-size-1);
1868
1939
  --semantic-size-border-1-5: var(--primitive-size-1-5);
1940
+ --semantic-size-border-2: var(--primitive-size-2);
1869
1941
 
1870
1942
  /* Corner radii */
1871
1943
  --semantic-size-radius-4: var(--primitive-size-4);
@@ -1965,7 +2037,7 @@
1965
2037
  --tab-sm-font-weight-default: 400;
1966
2038
  --tab-sm-font-weight-selected: 600;
1967
2039
  --tab-sm-radius: var(--semantic-size-radius-4);
1968
- --tab-sm-border-width: var(--semantic-size-border-1);
2040
+ --tab-sm-border-width: var(--semantic-size-border-1-5);
1969
2041
 
1970
2042
  --tab-md-height: var(--semantic-size-width-height-40);
1971
2043
  --tab-md-padding-horizontal: var(--semantic-size-spacing-16);
@@ -1974,7 +2046,7 @@
1974
2046
  --tab-md-font-weight-default: 400;
1975
2047
  --tab-md-font-weight-selected: 600;
1976
2048
  --tab-md-radius: var(--semantic-size-radius-4);
1977
- --tab-md-border-width: var(--semantic-size-border-1);
2049
+ --tab-md-border-width: var(--semantic-size-border-1-5);
1978
2050
 
1979
2051
  --tab-lg-height: var(--semantic-size-width-height-48);
1980
2052
  --tab-lg-padding-horizontal: var(--semantic-size-spacing-20);
@@ -1983,7 +2055,7 @@
1983
2055
  --tab-lg-font-weight-default: 400;
1984
2056
  --tab-lg-font-weight-selected: 600;
1985
2057
  --tab-lg-radius: var(--semantic-size-radius-4);
1986
- --tab-lg-border-width: var(--semantic-size-border-1);
2058
+ --tab-lg-border-width: var(--semantic-size-border-1-5);
1987
2059
 
1988
2060
  /* ── Progress Bar ── */
1989
2061
  --progress-sm-height: var(--semantic-size-width-height-4);
@@ -2227,6 +2299,19 @@
2227
2299
 
2228
2300
  .dark {
2229
2301
 
2302
+ /* Breadcrumb — colour tokens that flip in dark mode */
2303
+ --breadcrumb-default: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% */
2304
+ --breadcrumb-selected: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
2305
+ --breadcrumb-sep: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
2306
+
2307
+ /* Accordion — all colour tokens flip to white-based in dark mode */
2308
+ --accordion-icon: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% */
2309
+ --accordion-icon-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
2310
+ --accordion-title-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
2311
+ --accordion-subtitle: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
2312
+ --accordion-subtitle-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
2313
+ --accordion-border: var(--primitive-white-alpha-100); /* rgba(255,255,255,0.08) */
2314
+
2230
2315
  /* Button */
2231
2316
  --button-secondary-normal-bg-hover: var(--primitive-white-alpha-100);
2232
2317
  --button-secondary-normal-bg-pressed: var(--primitive-white-alpha-200);
@@ -2331,6 +2416,19 @@
2331
2416
  --list-item-secondary-bg-selected: var(--primitive-white-alpha-100);
2332
2417
  --list-item-secondary-bg-disabled: var(--primitive-slate-1100);
2333
2418
 
2419
+ /* Toggle */
2420
+ --toggle-track-off: var(--primitive-white-alpha-200); /* #fff @ 16% */
2421
+ --toggle-track-off-hover: var(--primitive-white-alpha-300); /* #fff @ 24% */
2422
+ --toggle-track-off-active: var(--primitive-white-alpha-600); /* #fff @ 48% */
2423
+ --toggle-track-on: var(--primitive-green-alpha-1000); /* green @ 80% */
2424
+ --toggle-track-on-hover: var(--primitive-green-alpha-1100); /* green @ 88% */
2425
+ --toggle-track-on-active: var(--primitive-green-500); /* #4DBC6B light green */
2426
+ --toggle-knob: var(--primitive-slate-50); /* #ffffff always */
2427
+
2428
+ /* Slider */
2429
+ --slider-track: var(--primitive-white-alpha-100); /* rgba(255,255,255,0.08) — dark mode mirror */
2430
+ --slider-range: var(--primitive-mono-50); /* #ffffff solid — dark mode mirror */
2431
+
2334
2432
  /* Search Field */
2335
2433
  --search-field-text-prominent: var(--primitive-slate-50);
2336
2434
  --search-field-text-subtle: var(--primitive-white-alpha-600);
@@ -2402,17 +2500,18 @@
2402
2500
  --tab-bg-pressed: var(--primitive-white-alpha-200);
2403
2501
  --tab-border-default: var(--primitive-white-alpha-100);
2404
2502
  --tab-border-focus: var(--primitive-slate-50);
2405
- --tab-border-selected: var(--primitive-slate-50);
2503
+ --tab-border-selected: var(--primitive-coral-700);
2406
2504
 
2407
2505
  /* Segmented Control */
2408
- --segmented-control-text-prominent: var(--primitive-slate-50);
2409
- --segmented-control-text-disabled: var(--primitive-white-alpha-200);
2506
+ --segmented-control-text-prominent: var(--primitive-slate-50); /* #FFFFFF solid — selected label */
2507
+ --segmented-control-text-default: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% — unselected label */
2508
+ --segmented-control-text-disabled: var(--primitive-white-alpha-200);
2410
2509
  --segmented-control-icon-prominent: var(--primitive-slate-50);
2411
- --segmented-control-icon-disabled: var(--primitive-white-alpha-200);
2412
- --segmented-control-container-bg: var(--primitive-slate-1300);
2413
- --segmented-control-segment-bg-selected: var(--primitive-slate-1000);
2414
- --segmented-control-segment-bg-hover: var(--primitive-white-alpha-100);
2415
- --segmented-control-segment-bg-pressed: var(--primitive-white-alpha-200);
2510
+ --segmented-control-icon-disabled: var(--primitive-white-alpha-200);
2511
+ --segmented-control-container-bg: var(--primitive-white-alpha-75); /* rgba(255,255,255,0.04) — 4% white */
2512
+ --segmented-control-segment-bg-selected: var(--primitive-white-alpha-200); /* rgba(255,255,255,0.16) — Figma spec */
2513
+ --segmented-control-segment-bg-hover: var(--primitive-white-alpha-100);
2514
+ --segmented-control-segment-bg-pressed: var(--primitive-white-alpha-200);
2416
2515
 
2417
2516
  /* Tooltip */
2418
2517
  --tooltip-text-default: var(--primitive-slate-1200);
@@ -2553,3 +2652,14 @@
2553
2652
  background-color: var(--primitive-blue-alpha-300);
2554
2653
  color: var(--text-prominent-default);
2555
2654
  }
2655
+
2656
+ /* ── Accordion — height animations (uses Radix's --radix-accordion-content-height) ── */
2657
+ @keyframes accordion-down {
2658
+ from { height: 0; }
2659
+ to { height: var(--radix-accordion-content-height); }
2660
+ }
2661
+
2662
+ @keyframes accordion-up {
2663
+ from { height: var(--radix-accordion-content-height); }
2664
+ to { height: 0; }
2665
+ }