docs: update README with theme editor and improved structure

- Feature the visual Theme Editor with 20+ presets
- Add quick-links bar (Documentation, Theme Editor, Theming Guide)
- Add @tiny-design/icons to packages table
- Fix docs site URL to GitHub Pages
- Fix SCSS import path to @tiny-design/react
- Add Contributing section with dev commands

Author: wangdicoder

README.md

@@ -1,11 +1,11 @@
 <p align="center">
-  <a href="https://tiny-design.dev">
+  <a href="https://wangdicoder.github.io/tiny-design/">
     <img width="200" src="https://github.com/wangdicoder/tiny-design/blob/master/apps/docs/src/assets/logo/logo.svg">
   </a>
 </p>
 
 <h1 align="center">Tiny Design</h1>
-<p align="center">A friendly UI component set for React</p>
+<p align="center">A friendly, themeable UI component library for React</p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@tiny-design/react">
@@ -25,53 +25,30 @@
   </a>
 </p>
 
----
-
-## Features
-
-- 80+ high-quality React components
-- Written in **TypeScript** with complete type definitions
-- Entirely built with function components and **React Hooks**
-- **Dark mode** support with system preference detection
-- **i18n** built-in — English and Chinese out of the box
-- Follows [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) accessibility standards
-- Customisable themes via design tokens and SCSS variables
-- Supports tree-shaking for minimal bundle size
-
-## Packages
+<p align="center">
+  <a href="https://wangdicoder.github.io/tiny-design/"><strong>Documentation</strong></a> &nbsp;&bull;&nbsp;
+  <a href="https://wangdicoder.github.io/tiny-design/theme/theme-editor"><strong>Theme Editor</strong></a> &nbsp;&bull;&nbsp;
+  <a href="https://wangdicoder.github.io/tiny-design/guide/customise-theme"><strong>Theming Guide</strong></a>
+</p>
 
-| Package | Description |
-| ------- | ----------- |
-| [@tiny-design/react](./packages/react) | Core component library |
-| [@tiny-design/tokens](./packages/tokens) | Design tokens and foundational styles |
+---
 
-## Component Categories
+## Highlights
 
-| Category | Components | Examples |
-| -------- | :--------: | -------- |
-| Foundation | 5 | Button, Icon, Image, Link, Typography |
-| Layout | 7 | Grid, Flex, Space, Split, Divider, Aspect Ratio |
-| Navigation | 7 | Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial |
-| Data Display | 19 | Card, Carousel, Collapse, Tag, Tooltip, Tree, Table |
-| Form | 22 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider |
-| Feedback | 13 | Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton |
-| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard |
+- **80+ components** — buttons, forms, data display, navigation, feedback, and more
+- **Visual Theme Editor** — 20+ built-in presets inspired by popular design systems; customise colours, typography, and spacing in real time without writing code
+- **Dark mode** — built-in light/dark themes with system preference detection and a `useTheme` hook
+- **TypeScript** — written in strict TypeScript with complete type definitions
+- **Accessible** — follows [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standards with keyboard navigation support
+- **Lightweight** — tree-shakeable ESM/CJS builds; styles auto-import alongside components
+- **i18n** — English and Chinese built in
 
-## Install
+## Quick Start
 
 ```bash
-# npm
-npm install @tiny-design/react
-
-# yarn
-yarn add @tiny-design/react
-
-# pnpm
 pnpm add @tiny-design/react
 ```
 
-## Quick Start
-
 ```jsx
 import { Button, Switch } from '@tiny-design/react';
 
@@ -83,36 +60,76 @@ const App = () => (
 );
 ```
 
-Styles are automatically imported alongside each component — no separate CSS import needed. Modern bundlers (webpack, Vite, Rollup) will tree-shake unused components and their styles.
+No separate CSS import needed — styles are bundled with each component and tree-shaken by modern bundlers.
 
 ## Theming
 
+### Visual Theme Editor
+
+The built-in [Theme Editor](https://wangdicoder.github.io/tiny-design/theme/theme-editor) lets you pick from 20+ preset themes or fine-tune individual tokens — colours, typography, border radius, spacing — and see changes live on real components. Export as CSS or SCSS when you're done.
+
 ### Dark mode
 
 ```jsx
-import { ConfigProvider } from '@tiny-design/react';
+import { useTheme } from '@tiny-design/react';
 
-<ConfigProvider theme="dark">
-  <App />
-</ConfigProvider>
+function ThemeToggle() {
+  const { resolvedTheme, toggle } = useTheme();
+  return <button onClick={toggle}>{resolvedTheme}</button>;
+}
 ```
 
-### Custom themes
+Or set it declaratively:
 
-Override SCSS variables to customise colours, borders, fonts, and more:
+```html
+<html data-tiny-theme="dark">
+```
+
+### CSS custom properties
+
+Every visual token is a `--ty-*` CSS custom property. Override any of them:
+
+```css
+:root {
+  --ty-color-primary: #3b82f6;
+  --ty-color-bg: #fafafa;
+  --ty-border-radius: 8px;
+}
+```
+
+### SCSS variables
+
+For compile-time control, override `!default` SCSS variables before importing:
 
 ```scss
-@use '@tiny-design/tokens/scss/variables' with (
-  $primary-color: #007bff
-);
-@use '@tiny-design/tokens/scss/base';
+$primary-color: #3b82f6;
+$border-radius: 8px;
+@use "@tiny-design/react/es/style/index" as *;
 ```
 
-See the [Theme Customisation Guide](https://tiny-design.dev/guide/customise-theme) for details.
+See the [Theming Guide](https://wangdicoder.github.io/tiny-design/guide/customise-theme) for the full list of tokens and variables.
 
-## Internationalization
+## Packages
+
+| Package | Description |
+| ------- | ----------- |
+| [@tiny-design/react](./packages/react) | Core component library |
+| [@tiny-design/tokens](./packages/tokens) | Design tokens and foundational styles |
+| [@tiny-design/icons](./packages/icons) | SVG icon components |
+
+## Components
+
+| Category | Count | Examples |
+| -------- | :---: | -------- |
+| Foundation | 5 | Button, Icon, Image, Link, Typography |
+| Layout | 7 | Grid, Flex, Space, Split, Divider, Aspect Ratio |
+| Navigation | 7 | Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial |
+| Data Display | 19 | Card, Carousel, Collapse, Tag, Tooltip, Tree, Table |
+| Form | 22 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider |
+| Feedback | 13 | Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton |
+| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard |
 
-Built-in locale support for English and Chinese. Set locale via `ConfigProvider` or `IntlProvider`:
+## Internationalization
 
 ```jsx
 import { ConfigProvider, zh_CN } from '@tiny-design/react';
@@ -129,17 +146,19 @@ import { ConfigProvider, zh_CN } from '@tiny-design/react';
 
 ## Browser Support
 
-Supports all modern browsers. IE is **not** supported.
-
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari |
 | --- | --- | --- | --- |
 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
-## Links
+## Contributing
 
-- [Documentation](https://tiny-design.dev)
-- [Changelog](https://github.com/wangdicoder/tiny-design/blob/master/CHANGELOG.md)
-- [Issues](https://github.com/wangdicoder/tiny-design/issues)
+```bash
+pnpm install        # install dependencies
+pnpm dev            # start docs dev server
+pnpm build          # build all packages
+pnpm test           # run tests
+pnpm lint           # lint code
+```
 
 ## License