@deriv-ds/design-intelligence-layer 0.4.4 → 0.4.5
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 +16 -20
- package/dist/index.cjs +361 -3072
- package/dist/index.cjs.map +1 -0
- package/dist/index.js +551 -2909
- package/dist/index.js.map +1 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -6,23 +6,6 @@ Published as **`@deriv-ds/design-intelligence-layer`** on npm.
|
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
## License & FontAwesome Pro — read before installing
|
|
10
|
-
|
|
11
|
-
This package is **proprietary to Deriv** (`"license": "UNLICENSED"`). It is not open source and must never be published with public access or mirrored to a public registry.
|
|
12
|
-
|
|
13
|
-
The icon system depends on **FontAwesome Pro**, which is commercially licensed to Deriv on a **per-seat basis**. Compliance rules:
|
|
14
|
-
|
|
15
|
-
1. **Only licensed seat-holders may install or build this package.** FontAwesome counts every developer who uses Pro icons during development as a seat. Currently this is restricted to one designated engineer — do not share registry access beyond licensed seats.
|
|
16
|
-
2. **Token setup (required to install).** The FA registry token is read from an environment variable — it is never stored in the repo. The designated engineer adds this to their shell profile (and CI adds it as a masked secret):
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
export FONTAWESOME_NPM_AUTH_TOKEN=<token from the Deriv FontAwesome account>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
The committed-ignored `.npmrc` references it as `${FONTAWESOME_NPM_AUTH_TOKEN}`. Without the variable set, `npm install` fails loudly — that is intentional.
|
|
23
|
-
3. **Never bundle FA glyph data.** FA packages must stay in `dependencies` (tsup externalizes them) so the published tarball contains no FontAwesome code. Do not add `@fortawesome/*` to tsup's bundled output.
|
|
24
|
-
4. **Never commit the token.** `.npmrc` is gitignored; the token lives only in shell profiles and CI secrets. If it ever leaks, regenerate it at fontawesome.com → Account.
|
|
25
|
-
|
|
26
9
|
## Quick Start
|
|
27
10
|
|
|
28
11
|
### Installation
|
|
@@ -96,6 +79,19 @@ npm install react react-dom tailwindcss
|
|
|
96
79
|
|
|
97
80
|
> Requires React 18+ and Tailwind CSS v4+.
|
|
98
81
|
|
|
82
|
+
### Icons
|
|
83
|
+
|
|
84
|
+
Icons use **FontAwesome Pro 6** (Deriv-licensed). Do not install `lucide-react` — it is not used in this package. Use the bundled `Icon` component:
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { Icon } from "@deriv-ds/design-intelligence-layer"
|
|
88
|
+
|
|
89
|
+
<Icon name="bell" />
|
|
90
|
+
<Icon name="circle-check" weight="fill" className="text-success" />
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
The full icon catalog is at `node_modules/@deriv-ds/design-intelligence-layer/guides/design-system-guide/icon-reference.md`.
|
|
94
|
+
|
|
99
95
|
---
|
|
100
96
|
|
|
101
97
|
## What's inside
|
|
@@ -710,7 +706,7 @@ This project uses @deriv-ds/design-intelligence-layer (Quill Design System). Bef
|
|
|
710
706
|
4. Read node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/quill-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy
|
|
711
707
|
5. Check if the component exists in the package — import it, don't re-implement
|
|
712
708
|
6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
|
|
713
|
-
7. Do not install
|
|
709
|
+
7. Do not install lucide-react — icons use FontAwesome Pro via the bundled Icon component; do not install tailwindcss or other bundled dependencies separately
|
|
714
710
|
8. If no token exists for a value, ask before using a hardcoded value
|
|
715
711
|
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
|
|
716
712
|
|
|
@@ -736,7 +732,7 @@ See node_modules/@deriv-ds/design-intelligence-layer/README.md for complete toke
|
|
|
736
732
|
| `bg-[var(--primary)]` | `bg-primary` | Raw CSS var — Tailwind v4 maps tokens directly |
|
|
737
733
|
| `hsl(var(--primary))` | `bg-primary` | Tailwind v3 syntax — not needed in v4 |
|
|
738
734
|
| `font-[Plus_Jakarta_Sans]` | `font-sans` (Inter) | Project font is Inter, not Plus Jakarta Sans |
|
|
739
|
-
|
|
|
735
|
+
| `import ... from 'lucide-react'` | `import { Icon } from "@deriv-ds/design-intelligence-layer"` | Icons use FontAwesome Pro — lucide-react is not in this package |
|
|
740
736
|
|
|
741
737
|
---
|
|
742
738
|
|
|
@@ -744,7 +740,7 @@ See node_modules/@deriv-ds/design-intelligence-layer/README.md for complete toke
|
|
|
744
740
|
|
|
745
741
|
These are bundled with the package. Installing them separately can cause version conflicts:
|
|
746
742
|
|
|
747
|
-
-
|
|
743
|
+
- `lucide-react` — **not used**; icons are FontAwesome Pro via the bundled `Icon` component
|
|
748
744
|
- `radix-ui` — headless primitives
|
|
749
745
|
- `class-variance-authority` — variant API
|
|
750
746
|
- `cmdk` — command palette
|