refactor: consume @tiny-ui/tokens from react package and docs app

Remove duplicated style sources (fonts, themes, normalise) from the
react package in favour of the new tokens package. Update build script,
dependencies, lint-staged config, and add DEVELOPMENT.md.

Author: wangdicoder

DEVELOPMENT.md

@@ -0,0 +1,44 @@
+# Development Workflow
+
+## Local Development
+
+```bash
+pnpm dev          # Start the Vite docs site
+pnpm build        # Build all packages (via turborepo)
+pnpm test         # Run tests across all packages
+pnpm lint         # Lint all packages
+pnpm lint:style   # Lint SCSS files
+```
+
+A **pre-commit hook** (husky) runs `lint-staged`, which auto-fixes SCSS via stylelint.
+
+## Build Pipeline
+
+Turborepo handles the dependency graph via `"dependsOn": ["^build"]`:
+
+```
+@tiny-ui/tokens   →   @tiny-ui/react   →   @tiny-ui/docs
+```
+
+Each package's build step:
+
+| Package | Build Steps |
+|---------|-------------|
+| **@tiny-ui/tokens** | `node scripts/build.js` — sass compiles `scss/base.scss` into `css/base.css` |
+| **@tiny-ui/react** | `tsdown` (TS to JS) → `build-styles.js` (copies base.css from tokens, compiles 78 component SCSS files) → `inject-style-imports.js` (adds CSS imports into JS entry files) |
+| **@tiny-ui/docs** | `vite build` |
+
+## CI (GitHub Actions)
+
+Three workflows triggered on push/PR to `master`:
+
+1. **CI** (`ci.yml`) — install → lint → build → test with coverage
+2. **Release** (`release.yml`) — uses `changesets/action` to either create a "Version Packages" PR or publish to npm. The docs package is excluded from publishing.
+3. **Deploy Site** (`deploy-site.yml`) — builds docs with `--base /tiny-ui/`, deploys to GitHub Pages with SPA routing support.
+
+## Release Flow
+
+1. Add a changeset: `pnpm changeset`
+2. Merge to `master`
+3. The Release workflow creates a version PR (bumps versions, updates changelogs)
+4. Merging that PR triggers publish to npm and site deploy

apps/docs/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@tiny-ui/react": "workspace:*",
+    "@tiny-ui/tokens": "workspace:*",
     "@mdx-js/react": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -44,7 +44,7 @@
     "typescript-eslint": "^8.0.0"
   },
   "lint-staged": {
-    "packages/react/src/**/*.scss": [
+    "packages/{react/src,tokens/scss}/**/*.scss": [
       "stylelint --fix"
     ]
   },

packages/react/package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
+    "@tiny-ui/tokens": "workspace:*",
     "classnames": "^2.3.1",
     "react-transition-group": "^4.4.2",
     "tslib": "^2.3.1"

packages/react/scripts/build-styles.js

@@ -8,6 +8,7 @@ const ROOT = path.resolve(__dirname, '..');
 const COMPONENTS = path.join(ROOT, 'src');
 const ES_DIR = path.join(ROOT, 'es');
 const LIB_DIR = path.join(ROOT, 'lib');
+const NODE_MODULES = path.join(ROOT, 'node_modules');
 
 function mkdirp(dir) {
   fs.mkdirSync(dir, { recursive: true });
@@ -18,19 +19,15 @@ async function processWithPostcss(css) {
   return result.css;
 }
 
-// 1. Base CSS: components/style/base.scss → es/style/base.css + lib/style/base.css
-async function buildBaseCss() {
-  const result = sass.compile(path.join(COMPONENTS, 'style/base.scss'), {
-    loadPaths: [COMPONENTS],
-  });
-  const css = await processWithPostcss(result.css);
-
+// 1. Base CSS: copy pre-built base.css from @tiny-ui/tokens
+function copyBaseCss() {
+  const src = require.resolve('@tiny-ui/tokens/css/base.css');
   for (const dir of [ES_DIR, LIB_DIR]) {
     const outDir = path.join(dir, 'style');
     mkdirp(outDir);
-    fs.writeFileSync(path.join(outDir, 'base.css'), css);
+    fs.copyFileSync(src, path.join(outDir, 'base.css'));
   }
-  console.log('  es/style/base.css + lib/style/base.css');
+  console.log('  es/style/base.css + lib/style/base.css (copied from @tiny-ui/tokens)');
 }
 
 // 2. Per-component CSS: compile each component's _index.scss partial
@@ -50,13 +47,13 @@ async function buildComponentCss() {
     if (fs.existsSync(partialPath)) {
       // Sass partial: compile via @use
       const result = sass.compileString("@use 'index';", {
-        loadPaths: [styleDir, COMPONENTS],
+        loadPaths: [styleDir, COMPONENTS, NODE_MODULES],
       });
       css = await processWithPostcss(result.css);
     } else if (fs.existsSync(directPath)) {
       // Direct scss file (e.g. tabs)
       const result = sass.compile(directPath, {
-        loadPaths: [COMPONENTS],
+        loadPaths: [COMPONENTS, NODE_MODULES],
       });
       css = await processWithPostcss(result.css);
     } else {
@@ -115,7 +112,8 @@ function copyDirRecursive(src, dest) {
 
 async function main() {
   console.log('Building styles...\n');
-  await Promise.all([buildBaseCss(), buildComponentCss()]);
+  copyBaseCss();
+  await buildComponentCss();
   copyScss();
   console.log('\nStyles done.');
 }

packages/react/src/style/_animation.scss

@@ -1,31 +1 @@
-@keyframes ty-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ty-rotate-reverse {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes ty-processing {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-
-  100% {
-    transform: scale(2.8);
-    opacity: 0;
-  }
-}
+@forward '@tiny-ui/tokens/scss/animation';