@deriv-com/trading-game-design-system 0.2.4 → 0.2.6

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 (3) hide show
  1. package/README.md +3 -1
  2. package/package.json +1 -1
  3. package/src/styles.css +13 -4
package/README.md CHANGED
@@ -15,13 +15,15 @@ npm install @deriv-com/trading-game-design-system --safe-chain-skip-minimum-pack
15
15
  1. Import the design tokens and tell Tailwind to scan the package (requires Tailwind CSS v4):
16
16
 
17
17
  ```css
18
- @import "@deriv-com/trading-game-design-system/styles";
19
18
  @import "tailwindcss";
19
+ @import "@deriv-com/trading-game-design-system/styles";
20
20
  @source "../node_modules/@deriv-com/trading-game-design-system/dist";
21
21
  ```
22
22
 
23
23
  > **Why `@source`?** Tailwind v4 skips `node_modules` by default. Without this line, Tailwind won't generate CSS for the component classes (e.g. `bg-primary`, `text-primary-foreground`). This is the standard way to use any Tailwind-based component library with v4.
24
24
 
25
+ > **Fonts included:** Barlow and Orbitron are loaded automatically via `@font-face` — no extra setup needed.
26
+
25
27
  2. Use components in your app:
26
28
 
27
29
  ```tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-com/trading-game-design-system",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
4
4
  "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
package/src/styles.css CHANGED
@@ -5,12 +5,21 @@
5
5
  * import "@deriv-com/trading-game-design-system/styles"
6
6
  *
7
7
  * Requires Tailwind CSS v4 in your project.
8
- * Add `@import "@deriv-com/trading-game-design-system/styles"` in your CSS
9
- * or import it in your JS entry point.
8
+ * Add these lines to your CSS (after @import "tailwindcss"):
9
+ * @import "tailwindcss";
10
+ * @import "@deriv-com/trading-game-design-system/styles";
11
+ * @source "../node_modules/@deriv-com/trading-game-design-system/dist";
10
12
  */
11
13
 
12
- /* Fonts — Barlow (body) + Orbitron (display/headings) */
13
- @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap");
14
+ /* Fonts — Barlow (body) */
15
+ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E_DMs5.woff2) format("woff2"); }
16
+ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E_DMs5.woff2) format("woff2"); }
17
+ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30_os.woff2) format("woff2"); }
18
+ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3-_ks.woff2) format("woff2"); }
19
+ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3l_gs.woff2) format("woff2"); }
20
+
21
+ /* Fonts — Orbitron (display/headings) */
22
+ @font-face { font-family: "Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(https://fonts.gstatic.com/s/orbitron/v31/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWg1fDAlp7lk.woff2) format("woff2"); }
14
23
 
15
24
  @custom-variant dark (&:is(.dark *));
16
25