@deriv-ds/design-intelligence-layer 0.1.0 → 0.2.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.
Files changed (11) hide show
  1. package/AGENTS.md +14 -14
  2. package/README.md +22 -22
  3. package/dist/index.cjs +161 -160
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +161 -160
  6. package/dist/index.js.map +1 -1
  7. package/guides/design-system-guide/trading-game-ds-guide.md +9 -9
  8. package/guides/personas/trading-game-player-field-guide.md +4 -112
  9. package/guides/rules/design-system-consuming-project.mdc +17 -17
  10. package/package.json +1 -1
  11. package/src/styles.css +1489 -202
package/AGENTS.md CHANGED
@@ -1,4 +1,4 @@
1
- # AI Agent Instructions — @trading-game/design-intelligence-layer
1
+ # AI Agent Instructions — @deriv-ds/design-intelligence-layer
2
2
 
3
3
  This file is read automatically by AI coding agents (Cursor, Windsurf, Claude Code, Copilot, and others) to understand how to build with this design system correctly.
4
4
 
@@ -10,22 +10,22 @@ Before building any landing page, product screen, game view, or feature UI, you
10
10
 
11
11
  **Design principles** — the decision framework for every layout, hierarchy, motion, copy, and component choice:
12
12
  ```
13
- node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
13
+ node_modules/@deriv-ds/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
14
14
  ```
15
15
 
16
16
  **Accessibility standards** — the inclusion standard every screen must meet (WCAG 2.1 AA):
17
17
  ```
18
- node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
18
+ node_modules/@deriv-ds/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
19
19
  ```
20
20
 
21
21
  **Personas** — the three player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX decisions:
22
22
  ```
23
- node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
23
+ node_modules/@deriv-ds/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
24
24
  ```
25
25
 
26
26
  **Brand voice** — channel-specific voice application, banned phrases, vocabulary reference, and formatting rules for all player-facing copy:
27
27
  ```
28
- node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
28
+ node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
29
29
  ```
30
30
 
31
31
  All four files apply to all projects built with this package — landing pages, product screens, and games.
@@ -39,20 +39,20 @@ Run the checklists at the end of the design principles and accessibility standar
39
39
  You MUST also follow the full agent rules file:
40
40
 
41
41
  ```
42
- node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc
42
+ node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc
43
43
  ```
44
44
 
45
45
  **Cursor users:** Copy this file into `.cursor/rules/` after every package upgrade:
46
46
 
47
47
  ```bash
48
- cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
48
+ cp node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
49
49
  ```
50
50
 
51
51
  ---
52
52
 
53
53
  ## Step 3 — Core rules summary
54
54
 
55
- 1. **Check before building** — if a component exists in `@trading-game/design-intelligence-layer`, import it. Never re-implement it.
55
+ 1. **Check before building** — if a component exists in `@deriv-ds/design-intelligence-layer`, import it. Never re-implement it.
56
56
  2. **Tokens only** — use semantic token classes (`bg-prominent`, `text-on-prominent`, `border-border`, etc.). Never hardcode hex values, raw Tailwind palette colors, or CSS variables.
57
57
  3. **Design principles and accessibility first** — every screen must reflect the 8 design principles and meet the accessibility standards (WCAG 2.1 AA). Run both checklists before shipping.
58
58
  4. **No separate installs** — do not install `lucide-react`, `tailwindcss`, or other bundled dependencies separately.
@@ -63,9 +63,9 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
63
63
 
64
64
  ## Reference
65
65
 
66
- - Full token + component reference: `node_modules/@trading-game/design-intelligence-layer/README.md`
67
- - Design principles: `node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md`
68
- - Accessibility standards: `node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md`
69
- - Personas: `node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
70
- - Brand voice: `node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md`
71
- - Full agent rules: `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`
66
+ - Full token + component reference: `node_modules/@deriv-ds/design-intelligence-layer/README.md`
67
+ - Design principles: `node_modules/@deriv-ds/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md`
68
+ - Accessibility standards: `node_modules/@deriv-ds/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md`
69
+ - Personas: `node_modules/@deriv-ds/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
70
+ - Brand voice: `node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md`
71
+ - Full agent rules: `node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A component library and design token system for the Trading Game product. Built on [shadcn/ui](https://ui.shadcn.com/) with a custom Figma-driven token architecture, Tailwind CSS v4, and React 19.
4
4
 
5
- Published as **`@trading-game/design-intelligence-layer`** on npm.
5
+ Published as **`@deriv-ds/design-intelligence-layer`** on npm.
6
6
 
7
7
  ---
8
8
 
@@ -11,7 +11,7 @@ Published as **`@trading-game/design-intelligence-layer`** on npm.
11
11
  ### Installation
12
12
 
13
13
  ```bash
14
- npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
14
+ npm install @deriv-ds/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
15
15
  ```
16
16
 
17
17
  > **Note:** The `--safe-chain-skip-minimum-package-age` flag bypasses npm's 72-hour safe-chain hold on newly published packages. Required when the latest version was published less than 72 hours ago (common for AI agents and CI pipelines).
@@ -21,9 +21,9 @@ npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-min
21
21
  In your main CSS file (e.g. `globals.css`), add these three lines **in this order**:
22
22
 
23
23
  ```css
24
- @import "@trading-game/design-intelligence-layer/styles";
24
+ @import "@deriv-ds/design-intelligence-layer/styles";
25
25
  @import "tailwindcss";
26
- @source "../node_modules/@trading-game/design-intelligence-layer/dist";
26
+ @source "../node_modules/@deriv-ds/design-intelligence-layer/dist";
27
27
  ```
28
28
 
29
29
  > **Why `@source`?** Tailwind v4 skips `node_modules` by default. Without this line, Tailwind won't generate CSS for the component classes. Adjust the path if your CSS file is not one level below `node_modules` (e.g. in a monorepo use `../../node_modules/...`).
@@ -57,7 +57,7 @@ Use `font-body`, `font-display`, or `font-sans` in your Tailwind classes — all
57
57
  ### 3. Use components
58
58
 
59
59
  ```tsx
60
- import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
60
+ import { Button, Card, Badge } from "@deriv-ds/design-intelligence-layer"
61
61
 
62
62
  export default function App() {
63
63
  return (
@@ -247,7 +247,7 @@ On the `line` variant, hover state shows `text-primary` (blue) with no backgroun
247
247
 
248
248
  ## Design tokens
249
249
 
250
- All tokens are CSS custom properties, loaded automatically via `@trading-game/design-intelligence-layer/styles`.
250
+ All tokens are CSS custom properties, loaded automatically via `@deriv-ds/design-intelligence-layer/styles`.
251
251
 
252
252
  ### Background tokens
253
253
 
@@ -386,16 +386,16 @@ The styles export includes pre-built typography classes using **Plus Jakarta San
386
386
 
387
387
  ## Upgrading the design system
388
388
 
389
- When you bump `@trading-game/design-intelligence-layer` and run `npm install` (or `npm ci`):
389
+ When you bump `@deriv-ds/design-intelligence-layer` and run `npm install` (or `npm ci`):
390
390
 
391
391
  | How you use the package | What happens |
392
392
  |-------------------------|----------------|
393
- | You **import** components only from `@trading-game/design-intelligence-layer` | After install and a rebuild, your app uses the **new** implementations in `node_modules/.../dist` — buttons, cards, etc. reflect the version you installed. |
393
+ | You **import** components only from `@deriv-ds/design-intelligence-layer` | After install and a rebuild, your app uses the **new** implementations in `node_modules/.../dist` — buttons, cards, etc. reflect the version you installed. |
394
394
  | You **copied** `components/ui/*` (or similar) into your repo | Those files **do not** auto-update. You must delete them and switch to package imports, or manually merge changes from the new package. |
395
395
 
396
396
  **Overrides:** Passing large `className` strings onto DS components can mask new defaults (e.g. old radius after a “pill button” update). After upgrading, review those callsites.
397
397
 
398
- **Cursor / AI agents:** The package ships agent rules at `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`. Cursor does **not** load rules from `node_modules` by default — **re-copy** that file into `.cursor/rules/` after each upgrade so instructions match the release (same command as in **AI Agent Setup** below). The rules include **Rule 7 — Package version upgrades**: agents should search for duplicated components, align with the package, and **tell you explicitly** if local component code was replaced.
398
+ **Cursor / AI agents:** The package ships agent rules at `node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`. Cursor does **not** load rules from `node_modules` by default — **re-copy** that file into `.cursor/rules/` after each upgrade so instructions match the release (same command as in **AI Agent Setup** below). The rules include **Rule 7 — Package version upgrades**: agents should search for duplicated components, align with the package, and **tell you explicitly** if local component code was replaced.
399
399
 
400
400
  ---
401
401
 
@@ -406,7 +406,7 @@ When you bump `@trading-game/design-intelligence-layer` and run `npm install` (o
406
406
  The package ships an `AGENTS.md` file that most AI tools read automatically. After installing the package, copy it to your project root:
407
407
 
408
408
  ```bash
409
- cp node_modules/@trading-game/design-intelligence-layer/AGENTS.md ./AGENTS.md
409
+ cp node_modules/@deriv-ds/design-intelligence-layer/AGENTS.md ./AGENTS.md
410
410
  ```
411
411
 
412
412
  This tells any AI agent to:
@@ -416,22 +416,22 @@ This tells any AI agent to:
416
416
 
417
417
  **Design principles file** (bundled in the package):
418
418
  ```
419
- node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
419
+ node_modules/@deriv-ds/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md
420
420
  ```
421
421
 
422
422
  **Accessibility standards file** (bundled in the package):
423
423
  ```
424
- node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
424
+ node_modules/@deriv-ds/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md
425
425
  ```
426
426
 
427
427
  **Personas file** (bundled in the package):
428
428
  ```
429
- node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
429
+ node_modules/@deriv-ds/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
430
430
  ```
431
431
 
432
432
  **Brand voice** (bundled in the package):
433
433
  ```
434
- node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
434
+ node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
435
435
  ```
436
436
 
437
437
  All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and brand voice to guide all player-facing copy.
@@ -442,7 +442,7 @@ Copy the included rule file into your project:
442
442
 
443
443
  ```bash
444
444
  mkdir -p .cursor/rules
445
- cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
445
+ cp node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc .cursor/rules/
446
446
  ```
447
447
 
448
448
  Re-run this **`cp` after every design-system version bump** so your workspace rules stay in sync with the installed package.
@@ -454,19 +454,19 @@ Add the following to your project's `CLAUDE.md`:
454
454
  ```markdown
455
455
  ## Design System
456
456
 
457
- This project uses @trading-game/design-intelligence-layer. Before writing any UI:
458
- 1. Read node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
459
- 2. Read node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
460
- 3. Read node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
461
- 4. Read node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy
457
+ This project uses @deriv-ds/design-intelligence-layer. Before writing any UI:
458
+ 1. Read node_modules/@deriv-ds/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
459
+ 2. Read node_modules/@deriv-ds/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
460
+ 3. Read node_modules/@deriv-ds/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
461
+ 4. Read node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy
462
462
  5. Check if the component exists in the package — import it, don't re-implement
463
463
  6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
464
464
  7. Do not install lucide-react, tailwindcss, or other bundled dependencies separately
465
465
  8. If no token exists for a value, ask before using a hardcoded value
466
466
  9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy guides/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor
467
467
 
468
- See node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc for full rules.
469
- See node_modules/@trading-game/design-intelligence-layer/README.md for complete token and component reference.
468
+ See node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc for full rules.
469
+ See node_modules/@deriv-ds/design-intelligence-layer/README.md for complete token and component reference.
470
470
  ```
471
471
 
472
472
  ---