@deriv-com/trading-game-design-system 0.2.3 → 0.2.5

package/README.md

@@ -22,6 +22,8 @@ npm install @deriv-com/trading-game-design-system --safe-chain-skip-minimum-pack
 
 > **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.
 
+> **Fonts included:** Barlow and Orbitron are loaded automatically via `@font-face` — no extra setup needed.
+
 2. Use components in your app:
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/trading-game-design-system",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -9,6 +9,16 @@
  * or import it in your JS entry point.
  */
 
+/* Fonts — Barlow (body) */
+@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"); }
+@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"); }
+@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"); }
+@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"); }
+@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"); }
+
+/* Fonts — Orbitron (display/headings) */
+@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"); }
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -65,6 +75,8 @@
 }
 
 :root {
+  --font-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
+  --font-orbitron: "Orbitron", ui-sans-serif, system-ui, sans-serif;
   --radius: 0.625rem;
   /* Light mode */
   --background: oklch(1 0 0);
@@ -157,6 +169,74 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
   }
 }
+
+/* Typography — Heading scale (Orbitron · Semibold 600 · LS 1.5px) */
+.heading-h1 {
+  font-family: var(--font-orbitron);
+  font-weight: 600;
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+.heading-h2 {
+  font-family: var(--font-orbitron);
+  font-weight: 600;
+  font-size: 64px;
+  line-height: 64px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+.heading-h3 {
+  font-family: var(--font-orbitron);
+  font-weight: 600;
+  font-size: 48px;
+  line-height: 48px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+.heading-h4 {
+  font-family: var(--font-orbitron);
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+.heading-xs {
+  font-family: var(--font-orbitron);
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 24px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+/* Typography — Body scale (Barlow · Semibold 600) */
+.body-lg {
+  font-family: var(--font-barlow);
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+}
+.body-md {
+  font-family: var(--font-barlow);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+.body-sm {
+  font-family: var(--font-barlow);
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+}
+.body-xs {
+  font-family: var(--font-barlow);
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 12px;
+}