feat(design-tokens): add @bytelyst/design-tokens package
- Canonical bytelyst.tokens.json with colors, typography, spacing, radius, elevation, motion, breakpoints - loadTokens() for programmatic access - generate.ts script outputs 4 platform formats: - tokens.css (CSS custom properties with --ml-* prefix) - tokens.ts (TypeScript constants) - MindLystTokens.kt (Kotlin object for KMP shared module) - MindLystTheme.swift (Swift structs for SwiftUI) - Shared across LysnrAI dashboards and MindLyst native apps
This commit is contained in:
saravanakumardb1
parent
cf8781cc11
commit
b80d249c78
24
packages/design-tokens/package.json
Normal file
24
packages/design-tokens/package.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "@bytelyst/design-tokens",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
},
|
||||||
|
"./tokens.json": "./tokens/bytelyst.tokens.json",
|
||||||
|
"./css": "./generated/tokens.css"
|
||||||
|
},
|
||||||
|
"main": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"files": ["dist", "tokens", "generated", "scripts"],
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"generate": "tsx scripts/generate.ts",
|
||||||
|
"test": "vitest run"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"tsx": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
156
packages/design-tokens/scripts/generate.ts
Normal file
156
packages/design-tokens/scripts/generate.ts
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
/**
|
||||||
|
* Token generator — reads bytelyst.tokens.json, outputs 4 platform formats:
|
||||||
|
* 1. CSS custom properties (tokens.css)
|
||||||
|
* 2. TypeScript constants (tokens.ts)
|
||||||
|
* 3. Kotlin object (MindLystTokens.kt) — for KMP shared module
|
||||||
|
* 4. Swift structs (MindLystTheme.swift) — for iOS SwiftUI
|
||||||
|
*
|
||||||
|
* Usage: tsx scripts/generate.ts
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
|
||||||
|
import { resolve, dirname } from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
|
const tokensPath = resolve(__dirname, "../tokens/bytelyst.tokens.json");
|
||||||
|
const outDir = resolve(__dirname, "../generated");
|
||||||
|
|
||||||
|
mkdirSync(outDir, { recursive: true });
|
||||||
|
|
||||||
|
const tokens = JSON.parse(readFileSync(tokensPath, "utf-8"));
|
||||||
|
|
||||||
|
// ── 1. CSS ───────────────────────────────────────────────────────────
|
||||||
|
function generateCSS(): string {
|
||||||
|
const lines: string[] = [
|
||||||
|
"/* Auto-generated from bytelyst.tokens.json — do not edit manually */",
|
||||||
|
"",
|
||||||
|
":root {",
|
||||||
|
];
|
||||||
|
|
||||||
|
// Semantic colors (dark theme as default)
|
||||||
|
for (const [key, value] of Object.entries(tokens.color.semantic.dark)) {
|
||||||
|
lines.push(` --ml-${camelToKebab(key)}: ${value};`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
for (const [key, value] of Object.entries(tokens.typography.fontFamily)) {
|
||||||
|
lines.push(` --ml-font-${key}: ${value};`);
|
||||||
|
}
|
||||||
|
for (const [key, value] of Object.entries(tokens.typography.fontSize)) {
|
||||||
|
lines.push(` --ml-text-${key}: ${value}px;`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Spacing
|
||||||
|
for (const [key, value] of Object.entries(tokens.spacing)) {
|
||||||
|
lines.push(` --ml-space-${key}: ${value}px;`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Radius
|
||||||
|
for (const [key, value] of Object.entries(tokens.radius)) {
|
||||||
|
lines.push(` --ml-radius-${key}: ${value}px;`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Elevation
|
||||||
|
for (const [key, value] of Object.entries(tokens.elevation)) {
|
||||||
|
lines.push(` --ml-shadow-${key}: ${value};`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push("}", "");
|
||||||
|
return lines.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 2. TypeScript ────────────────────────────────────────────────────
|
||||||
|
function generateTS(): string {
|
||||||
|
return [
|
||||||
|
"// Auto-generated from bytelyst.tokens.json — do not edit manually",
|
||||||
|
"",
|
||||||
|
`export const tokens = ${JSON.stringify(tokens, null, 2)} as const;`,
|
||||||
|
"",
|
||||||
|
"export type Tokens = typeof tokens;",
|
||||||
|
"",
|
||||||
|
].join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 3. Kotlin ────────────────────────────────────────────────────────
|
||||||
|
function generateKotlin(): string {
|
||||||
|
const lines: string[] = [
|
||||||
|
"// Auto-generated from bytelyst.tokens.json — do not edit manually",
|
||||||
|
"package com.mindlyst.shared.theme",
|
||||||
|
"",
|
||||||
|
"object MindLystTokens {",
|
||||||
|
"",
|
||||||
|
" // Semantic colors (dark)",
|
||||||
|
" object Colors {",
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(tokens.color.semantic.dark)) {
|
||||||
|
if (typeof value === "string" && value.startsWith("#")) {
|
||||||
|
const hex = value.replace("#", "");
|
||||||
|
lines.push(` const val ${key} = 0xFF${hex.toUpperCase()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(" }", "", " // Brain gradients", " object Brains {");
|
||||||
|
for (const [name, grad] of Object.entries(tokens.color.brain) as [string, { from: string; to: string }][]) {
|
||||||
|
const fromHex = grad.from.replace("#", "");
|
||||||
|
const toHex = grad.to.replace("#", "");
|
||||||
|
lines.push(` val ${name}From = 0xFF${fromHex.toUpperCase()}`);
|
||||||
|
lines.push(` val ${name}To = 0xFF${toHex.toUpperCase()}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(" }", "", " // Spacing (8pt grid)", " object Spacing {");
|
||||||
|
for (const [key, value] of Object.entries(tokens.spacing)) {
|
||||||
|
lines.push(` const val x${key} = ${value}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(" }", "", " // Radius", " object Radius {");
|
||||||
|
for (const [key, value] of Object.entries(tokens.radius)) {
|
||||||
|
lines.push(` const val ${key} = ${value}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(" }", "}");
|
||||||
|
return lines.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 4. Swift ─────────────────────────────────────────────────────────
|
||||||
|
function generateSwift(): string {
|
||||||
|
const lines: string[] = [
|
||||||
|
"// Auto-generated from bytelyst.tokens.json — do not edit manually",
|
||||||
|
"import SwiftUI",
|
||||||
|
"",
|
||||||
|
"struct MindLystColors {",
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(tokens.color.semantic.dark)) {
|
||||||
|
if (typeof value === "string" && value.startsWith("#")) {
|
||||||
|
lines.push(` static let ${key} = Color(hex: "${value}")`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push("}", "", "struct MindLystSpacing {");
|
||||||
|
for (const [key, value] of Object.entries(tokens.spacing)) {
|
||||||
|
lines.push(` static let x${key}: CGFloat = ${value}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push("}", "", "struct MindLystRadius {");
|
||||||
|
for (const [key, value] of Object.entries(tokens.radius)) {
|
||||||
|
lines.push(` static let ${key}: CGFloat = ${value}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push("}");
|
||||||
|
return lines.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Helpers ──────────────────────────────────────────────────────────
|
||||||
|
function camelToKebab(str: string): string {
|
||||||
|
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Write all ────────────────────────────────────────────────────────
|
||||||
|
writeFileSync(resolve(outDir, "tokens.css"), generateCSS());
|
||||||
|
writeFileSync(resolve(outDir, "tokens.ts"), generateTS());
|
||||||
|
writeFileSync(resolve(outDir, "MindLystTokens.kt"), generateKotlin());
|
||||||
|
writeFileSync(resolve(outDir, "MindLystTheme.swift"), generateSwift());
|
||||||
|
|
||||||
|
console.log("Generated 4 token files in generated/");
|
||||||
49
packages/design-tokens/src/index.ts
Normal file
49
packages/design-tokens/src/index.ts
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* Design tokens — programmatic access to the canonical token JSON.
|
||||||
|
* For generated platform files, see the `generated/` directory.
|
||||||
|
* For the canonical JSON source, see `tokens/bytelyst.tokens.json`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { readFileSync } from "node:fs";
|
||||||
|
import { resolve, dirname } from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
|
export interface DesignTokens {
|
||||||
|
meta: { name: string; version: string; updatedAt: string; scale: string };
|
||||||
|
color: {
|
||||||
|
palette: Record<string, Record<string, string>>;
|
||||||
|
semantic: {
|
||||||
|
dark: Record<string, string>;
|
||||||
|
light: Record<string, string>;
|
||||||
|
};
|
||||||
|
brain: Record<string, { from: string; to: string }>;
|
||||||
|
};
|
||||||
|
typography: {
|
||||||
|
fontFamily: Record<string, string>;
|
||||||
|
fontWeight: Record<string, number>;
|
||||||
|
fontSize: Record<string, number>;
|
||||||
|
lineHeight: Record<string, number>;
|
||||||
|
letterSpacing: Record<string, number>;
|
||||||
|
};
|
||||||
|
spacing: Record<string, number>;
|
||||||
|
radius: Record<string, number>;
|
||||||
|
elevation: Record<string, string>;
|
||||||
|
motion: {
|
||||||
|
duration: Record<string, number>;
|
||||||
|
easing: Record<string, string>;
|
||||||
|
};
|
||||||
|
breakpoints: Record<string, number>;
|
||||||
|
layout: Record<string, number>;
|
||||||
|
}
|
||||||
|
|
||||||
|
let _cached: DesignTokens | null = null;
|
||||||
|
|
||||||
|
export function loadTokens(): DesignTokens {
|
||||||
|
if (_cached) return _cached;
|
||||||
|
const tokenPath = resolve(__dirname, "../tokens/bytelyst.tokens.json");
|
||||||
|
const raw = readFileSync(tokenPath, "utf-8");
|
||||||
|
_cached = JSON.parse(raw) as DesignTokens;
|
||||||
|
return _cached;
|
||||||
|
}
|
||||||
165
packages/design-tokens/tokens/bytelyst.tokens.json
Normal file
165
packages/design-tokens/tokens/bytelyst.tokens.json
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
{
|
||||||
|
"meta": {
|
||||||
|
"name": "ByteLyst Design Tokens",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"updatedAt": "2026-02-12",
|
||||||
|
"scale": "8pt"
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"palette": {
|
||||||
|
"neutral": {
|
||||||
|
"0": "#FFFFFF",
|
||||||
|
"50": "#F6F8FC",
|
||||||
|
"100": "#EEF2FA",
|
||||||
|
"200": "#DCE4F2",
|
||||||
|
"300": "#BFCBDE",
|
||||||
|
"400": "#92A1BA",
|
||||||
|
"500": "#6C7C98",
|
||||||
|
"600": "#55637A",
|
||||||
|
"700": "#3B455A",
|
||||||
|
"800": "#1A2335",
|
||||||
|
"900": "#0E1320",
|
||||||
|
"950": "#06070A"
|
||||||
|
},
|
||||||
|
"brand": {
|
||||||
|
"blue": "#5A8CFF",
|
||||||
|
"cyan": "#2EE6D6",
|
||||||
|
"coral": "#FF6E6E",
|
||||||
|
"gold": "#FFD166",
|
||||||
|
"mint": "#34D399",
|
||||||
|
"warning": "#F59E0B"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"semantic": {
|
||||||
|
"dark": {
|
||||||
|
"bgCanvas": "#06070A",
|
||||||
|
"bgElevated": "#0E1118",
|
||||||
|
"surfaceCard": "#121725",
|
||||||
|
"surfaceMuted": "#1A2335",
|
||||||
|
"borderDefault": "rgba(255,255,255,0.12)",
|
||||||
|
"borderStrong": "rgba(255,255,255,0.22)",
|
||||||
|
"textPrimary": "#EFF4FF",
|
||||||
|
"textSecondary": "#A5B1C7",
|
||||||
|
"textTertiary": "#6C7C98",
|
||||||
|
"accentPrimary": "#5A8CFF",
|
||||||
|
"accentSecondary": "#2EE6D6",
|
||||||
|
"success": "#34D399",
|
||||||
|
"warning": "#F59E0B",
|
||||||
|
"danger": "#FF6E6E",
|
||||||
|
"focusRing": "rgba(90,140,255,0.45)",
|
||||||
|
"overlayScrim": "rgba(5,8,18,0.72)"
|
||||||
|
},
|
||||||
|
"light": {
|
||||||
|
"bgCanvas": "#F6F8FC",
|
||||||
|
"bgElevated": "#EEF2FA",
|
||||||
|
"surfaceCard": "#FFFFFF",
|
||||||
|
"surfaceMuted": "#F3F5FA",
|
||||||
|
"borderDefault": "rgba(14,19,32,0.12)",
|
||||||
|
"borderStrong": "rgba(14,19,32,0.24)",
|
||||||
|
"textPrimary": "#0E1320",
|
||||||
|
"textSecondary": "#55637A",
|
||||||
|
"textTertiary": "#6C7C98",
|
||||||
|
"accentPrimary": "#5A8CFF",
|
||||||
|
"accentSecondary": "#2EE6D6",
|
||||||
|
"success": "#13956A",
|
||||||
|
"warning": "#B87504",
|
||||||
|
"danger": "#D24242",
|
||||||
|
"focusRing": "rgba(90,140,255,0.35)",
|
||||||
|
"overlayScrim": "rgba(10,13,23,0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"brain": {
|
||||||
|
"work": { "from": "#5A8CFF", "to": "#2EE6D6" },
|
||||||
|
"home": { "from": "#FF6E6E", "to": "#FFD166" },
|
||||||
|
"money": { "from": "#34D399", "to": "#2EE6D6" },
|
||||||
|
"health": { "from": "#2EE6D6", "to": "#9FE870" },
|
||||||
|
"global": { "from": "#7D8FB4", "to": "#A5B1C7" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"typography": {
|
||||||
|
"fontFamily": {
|
||||||
|
"display": "'Space Grotesk', 'SF Pro Display', sans-serif",
|
||||||
|
"body": "'DM Sans', 'SF Pro Text', sans-serif",
|
||||||
|
"mono": "'IBM Plex Mono', 'SF Mono', monospace"
|
||||||
|
},
|
||||||
|
"fontWeight": {
|
||||||
|
"regular": 400,
|
||||||
|
"medium": 500,
|
||||||
|
"semibold": 600,
|
||||||
|
"bold": 700
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"xs": 12,
|
||||||
|
"sm": 14,
|
||||||
|
"md": 16,
|
||||||
|
"lg": 18,
|
||||||
|
"xl": 22,
|
||||||
|
"2xl": 28,
|
||||||
|
"3xl": 36
|
||||||
|
},
|
||||||
|
"lineHeight": {
|
||||||
|
"tight": 1.2,
|
||||||
|
"normal": 1.45,
|
||||||
|
"relaxed": 1.65
|
||||||
|
},
|
||||||
|
"letterSpacing": {
|
||||||
|
"tight": -0.02,
|
||||||
|
"normal": 0,
|
||||||
|
"wide": 0.02
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"0": 0,
|
||||||
|
"1": 4,
|
||||||
|
"2": 8,
|
||||||
|
"3": 12,
|
||||||
|
"4": 16,
|
||||||
|
"5": 20,
|
||||||
|
"6": 24,
|
||||||
|
"7": 28,
|
||||||
|
"8": 32,
|
||||||
|
"10": 40,
|
||||||
|
"12": 48,
|
||||||
|
"16": 64
|
||||||
|
},
|
||||||
|
"radius": {
|
||||||
|
"xs": 8,
|
||||||
|
"sm": 12,
|
||||||
|
"md": 16,
|
||||||
|
"lg": 20,
|
||||||
|
"xl": 24,
|
||||||
|
"pill": 999
|
||||||
|
},
|
||||||
|
"elevation": {
|
||||||
|
"none": "0 0 0 rgba(0,0,0,0)",
|
||||||
|
"sm": "0 4px 12px rgba(0,0,0,0.12)",
|
||||||
|
"md": "0 12px 28px rgba(0,0,0,0.18)",
|
||||||
|
"lg": "0 20px 48px rgba(0,0,0,0.24)"
|
||||||
|
},
|
||||||
|
"motion": {
|
||||||
|
"duration": {
|
||||||
|
"instant": 70,
|
||||||
|
"fast": 140,
|
||||||
|
"base": 220,
|
||||||
|
"slow": 320
|
||||||
|
},
|
||||||
|
"easing": {
|
||||||
|
"standard": "cubic-bezier(0.2, 0.0, 0.2, 1)",
|
||||||
|
"decelerate": "cubic-bezier(0.0, 0.0, 0.2, 1)",
|
||||||
|
"accelerate": "cubic-bezier(0.4, 0.0, 1, 1)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"breakpoints": {
|
||||||
|
"mobile": 0,
|
||||||
|
"tablet": 768,
|
||||||
|
"desktop": 1200,
|
||||||
|
"wide": 1440
|
||||||
|
},
|
||||||
|
"layout": {
|
||||||
|
"maxContentWidth": 1280,
|
||||||
|
"mobileGutter": 16,
|
||||||
|
"tabletGutter": 24,
|
||||||
|
"desktopGutter": 32,
|
||||||
|
"touchTargetMin": 44
|
||||||
|
}
|
||||||
|
}
|
||||||
9
packages/design-tokens/tsconfig.json
Normal file
9
packages/design-tokens/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "dist",
|
||||||
|
"rootDir": "src"
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["src/**/*.test.ts"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user