Initial WallMuse project

packages/ui-tokens/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@wallmuse/ui-tokens",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "5.8.3"
+  }
+}

packages/ui-tokens/src/index.ts

@@ -0,0 +1,7 @@
+export const breakpoints = {
+  xs: 480,
+  sm: 640,
+  md: 900,
+  lg: 1200,
+  xl: 1600
+} as const;

packages/ui-tokens/src/tokens.css

@@ -0,0 +1,70 @@
+:root {
+  color-scheme: light;
+  --color-bg-page: #edf6ff;
+  --color-bg-surface: rgba(255, 255, 255, 0.62);
+  --color-bg-surface-strong: rgba(255, 255, 255, 0.82);
+  --color-bg-control: rgba(255, 255, 255, 0.56);
+  --color-bg-control-active: rgba(230, 240, 255, 0.86);
+  --color-border-soft: rgba(120, 150, 190, 0.2);
+  --color-border-strong: rgba(120, 160, 220, 0.36);
+  --color-text-primary: #172235;
+  --color-text-secondary: #617087;
+  --color-text-muted: #97a4b7;
+  --color-accent: #2f86ff;
+  --color-accent-soft: #dceaff;
+  --color-success: #20c997;
+  --color-warning: #f7b955;
+  --color-danger: #ff5c7a;
+  --font-xs: 12px;
+  --font-sm: 13px;
+  --font-md: 14px;
+  --font-lg: 16px;
+  --font-xl: 20px;
+  --font-2xl: 28px;
+  --font-3xl: 40px;
+  --radius-xs: 8px;
+  --radius-sm: 12px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 36px;
+  --radius-full: 999px;
+  --shadow-shell: 0 28px 80px rgba(80, 130, 190, 0.18);
+  --shadow-card: 0 14px 34px rgba(37, 60, 90, 0.16);
+  --shadow-floating: 0 18px 42px rgba(40, 80, 130, 0.22);
+  --glass-blur: blur(22px) saturate(140%);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-bg-page: #07111f;
+  --color-bg-surface: rgba(15, 27, 45, 0.68);
+  --color-bg-surface-strong: rgba(18, 31, 52, 0.88);
+  --color-bg-control: rgba(23, 38, 62, 0.72);
+  --color-bg-control-active: rgba(35, 78, 135, 0.76);
+  --color-border-soft: rgba(170, 205, 255, 0.14);
+  --color-border-strong: rgba(95, 165, 255, 0.52);
+  --color-text-primary: #eef6ff;
+  --color-text-secondary: #a7b6ca;
+  --color-text-muted: #687a92;
+  --color-accent: #66aaff;
+  --color-accent-soft: rgba(102, 170, 255, 0.18);
+  --color-success: #35d8a6;
+  --color-warning: #ffd166;
+  --color-danger: #ff6b8b;
+  --shadow-shell: 0 28px 80px rgba(0, 0, 0, 0.42);
+  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.34);
+  --shadow-floating: 0 20px 48px rgba(0, 0, 0, 0.46);
+  --glass-blur: blur(24px) saturate(130%);
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  :root {
+    --color-bg-surface: rgba(255, 255, 255, 0.92);
+    --color-bg-surface-strong: rgba(255, 255, 255, 0.94);
+  }
+
+  [data-theme="dark"] {
+    --color-bg-surface: rgba(15, 27, 45, 0.92);
+    --color-bg-surface-strong: rgba(18, 31, 52, 0.96);
+  }
+}

packages/ui-tokens/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}