feat: add @tiny-ui/tokens package for design tokens and foundational styles

Extracts design tokens, themes, fonts, animations, mixins, and normalise
styles into a standalone package that can be consumed independently.

Author: wangdicoder

packages/tokens/css/base.css

@@ -0,0 +1,29 @@
+{
+  "name": "@tiny-ui/tokens",
+  "version": "1.0.4",
+  "description": "Design tokens, themes, and foundational styles for Tiny UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wangdicoder/tiny-ui.git",
+    "directory": "packages/tokens"
+  },
+  "main": "css/base.css",
+  "exports": {
+    ".": "./css/base.css",
+    "./css/*": "./css/*",
+    "./scss/*": "./scss/*"
+  },
+  "sideEffects": ["**/*.css"],
+  "files": ["css", "scss"],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "clean": "rimraf css"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.9"
+  }
+}

packages/tokens/package.json

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const sass = require('sass');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+
+const ROOT = path.resolve(__dirname, '..');
+const SCSS_DIR = path.join(ROOT, 'scss');
+const CSS_DIR = path.join(ROOT, 'css');
+
+async function build() {
+  console.log('Building tokens...\n');
+
+  // Compile scss/base.scss → css/base.css
+  const result = sass.compile(path.join(SCSS_DIR, 'base.scss'), {
+    loadPaths: [SCSS_DIR],
+  });
+
+  const processed = await postcss([autoprefixer]).process(result.css, { from: undefined });
+
+  fs.mkdirSync(CSS_DIR, { recursive: true });
+  fs.writeFileSync(path.join(CSS_DIR, 'base.css'), processed.css);
+
+  console.log('  css/base.css');
+  console.log('\nTokens done.');
+}
+
+build().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

packages/tokens/scripts/build.js

@@ -0,0 +1,31 @@
+@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;
+  }
+}