@techui/colors 1.0.1 → 1.0.2

package/README.md

@@ -1,46 +1,60 @@
+
 # @techui/colors
 
-**[English](README.md)** | **[中文](README.cn.md)**
+**[English](#english)** | **[中文](#中文)**
+
+---
+
+## English
 
 > Color tables for JavaScript and Less, developed by ayin.
 
 **@techui/colors** (formerly **ayin-color**) is a color library tool designed to help developers avoid memorizing tedious color values like `#FF0000` or `RGB(255,0,0)`, using a more natural language-like approach to define and call colors.
 
-## ✨ Features
+### ✨ Features
 
 - 🎨 **Natural Language Naming** - Use intuitive color names like `rel5` (red), `bll5` (blue)
 - 📦 **Dual Version Support** - Provides V1 and V2 versions, with V2 offering richer color variations
 - 🔧 **Multi-Platform Compatible** - Supports both JavaScript and Less/CSS versions
 - 🌈 **Scientific Color Scheme** - Based on HSL color model, generating complete color spectrum through hue, saturation, and lightness
-- 🎯 **Ready to Use** - Hundreds of preset color values for rapid development without lookup tables
+- 🎯 **Ready to Use** - Hundreds of preset color values for rapid development
+- 📄 **Built-in Preview File** - Quickly view and copy the colors you need from preview.html for a quick start. After getting started, you can quickly call up colors using natural language without looking up tables.
 
-## 🚀 Quick Start
+### 🚀 Quick Start
 
-### JavaScript Usage
+#### JavaScript Usage
 
 Import in your project entry file (e.g., `main.js`):
 
 ```javascript
-import { AyinColor } from "@techui/colors"
-Vue.use(AyinColor)
+import tuiColors from "@techui/colors"
+Vue.use(tuiColors)
+//At this point, you can use $c and $chroma anywhere in your project.
+```
+
+Or use import to bring in components or pages, such as:
+
+```javascript
+import { $c, $chroma } from “@techui/colors”
+const color = $c.rel5
 ```
 
 Usage examples:
 
 ```javascript
-// AyinColor V1 - Using base colors
+// TechUI/Colors V1 - Using base colors
 let color = $c.rel5  // Red
 let blue = $c.bll5   // Blue
 let gray = $c.gyd4   // Gray
 
-// AyinColor V2 - Using extended colors
+// TechUI/Colors V2 - Using extended colors
 let color2 = $c.reA10   // Red (with finer gradations)
 let blue2 = $c.blA03    // Blue
 ```
 
-### CSS/Less Usage
+#### CSS/Less Usage
 
-#### Vue 2 (vue.config.js)
+##### Vue 2 (vue.config.js)
 
 First install dependencies: `less`, `less-loader`, `style-resources-loader`
 
@@ -60,7 +74,7 @@ module.exports = {
 }
 ```
 
-#### Vue 3 + Vite (vite.config.js)
+##### Vue 3 + Vite (vite.config.js)
 
 First install dependencies: `less`, `less-loader`
 
@@ -86,14 +100,14 @@ export default defineConfig({
 Use in style files:
 
 ```less
-// AyinColor V1
+// TechUI/Colors V1
 .text {
   color: @rel5;
   background-color: @bll5;
   border: 1px solid @gyd4;
 }
 
-// AyinColor V2
+// TechUI/Colors V2
 .text-v2 {
   color: @reA10;
   background-color: @blA03;
@@ -101,45 +115,45 @@ Use in style files:
 }
 ```
 
-## 🎨 Color Naming Convention
+### 🎨 Color Naming Convention
 
-### V1 Naming Rules
+#### V1 Naming Rules
 
 Color names consist of **base color** + **saturation** + **lightness**.
 
 **25 Base Colors** (15° hue intervals):
 
-- `re` - red
-- `or` - orange
-- `ye` - yellow
-- `ch` - chartreuse
-- `gr` - green
-- `aq` - aquamarine
-- `cy` - cyan
-- `bl` - blue
-- `in` - indigo
-- `pu` - purple
-- `pi` - pink
-- `vi` - violetred
-- `gy` - gray
-- And intermediate colors: `ro`, `oy`, `yc`, `cg`, `ga`, `ac`, `cb`, `bi`, `ip`, `pp`, `pv`, `vr`
+  - `re` - red
+  - `or` - orange
+  - `ye` - yellow
+  - `ch` - chartreuse
+  - `gr` - green
+  - `aq` - aquamarine
+  - `cy` - cyan
+  - `bl` - blue
+  - `in` - indigo
+  - `pu` - purple
+  - `pi` - pink
+  - `vi` - violetred
+  - `gy` - gray
+  - And intermediate colors: `ro`, `oy`, `yc`, `cg`, `ga`, `ac`, `cb`, `bi`, `ip`, `pp`, `pv`, `vr`
 
 **4 Saturation Levels**:
 
-- `l` - light
-- `m` - middle
-- `r` - roast
-- `d` - dark
+  - `l` - light
+  - `m` - middle
+  - `r` - roast
+  - `d` - dark
 
 **9 Lightness Levels**: `1` (lightest) to `9` (darkest)
 
 **Examples**:
 
-- `rel5` - Red, light saturation, level 5 lightness
-- `bld1` - Blue, dark saturation, level 1 lightness (light blue with deep saturation)
-- `rel9` - Red, light saturation, level 9 lightness (deep red)
+  - `rel5` - Red, light saturation, level 5 lightness
+  - `bld1` - Blue, dark saturation, level 1 lightness (light blue with deep saturation)
+  - `rel9` - Red, light saturation, level 9 lightness (deep red)
 
-### V2 Naming Rules
+#### V2 Naming Rules
 
 V2 provides finer color gradations.
 
@@ -149,12 +163,12 @@ V2 provides finer color gradations.
 
 **Examples**:
 
-- `reA10` - Red, A saturation, level 10 lightness
-- `blE05` - Blue, E saturation, level 5 lightness
+  - `reA10` - Red, A saturation, level 10 lightness
+  - `blE05` - Blue, E saturation, level 5 lightness
 
-## 🔧 Advanced Features
+### 🔧 Advanced Features
 
-### JavaScript Color Processing Functions
+#### JavaScript Color Processing Functions
 
 Color processing functions based on chroma.js:
 
@@ -180,7 +194,7 @@ let gradient = $c.scale(['rel5', 'bll5', 'yel5'], 10, 'lch')
 // Parameters: color array (minimum 2), number of colors needed, blending mode (lch/hsl/lab/lrgb, default lch)
 ```
 
-### Less Color Processing Functions
+#### Less Color Processing Functions
 
 ```less
 .element {
@@ -204,76 +218,368 @@ let gradient = $c.scale(['rel5', 'bll5', 'yel5'], 10, 'lch')
 
 For more Less color functions, refer to the [Less official documentation](http://lesscss.org/functions/#color-operations).
 
-## 📖 Version Selection Guide
+### 📖 Version Selection Guide
 
-### Use V1 Version
+#### Use V1 Version
 
-- ✅ Daily project development
-- ✅ Rapid prototyping
-- ✅ Need for easy-to-remember and controllable color schemes
-- ✅ General web applications and admin dashboards
+  - ✅ Daily project development
+  - ✅ Rapid prototyping
+  - ✅ Need for easy-to-remember and controllable color schemes
+  - ✅ General web applications and admin dashboards
 
 V1 has a moderate number of colors, easy to master, and meets the color needs of most projects.
 
-### Use V2 Version
+#### Use V2 Version
 
-- ✅ Data visualization projects
-- ✅ Large screen display systems
-- ✅ Need for fine color gradation control
-- ✅ Professional design projects
+  - ✅ Data visualization projects
+  - ✅ Large screen display systems
+  - ✅ Need for fine color gradation control
+  - ✅ Professional design projects
 
 V2 provides finer color variations, suitable for scenarios with higher color requirements.
 
-## 🔨 Development Tools
+### 🔨 Development Tools
 
-### Color Conversion Tool
+#### Color Conversion Tool
 
-The project provides a color conversion tool that converts regular color values to AyinColor format.
+The project provides a color conversion tool that converts regular color values to TechUI/Colors format.
 
 Supported input formats:
 
-- Color names: `red`
-- Hexadecimal: `#FF0000`
-- RGB/RGBA: `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)`
+  - Color names: `red`
+  - Hexadecimal: `#FF0000`
+  - RGB/RGBA: `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)`
 
 The tool returns the best match in both V1 and V2 versions. A smaller distance parameter indicates closer proximity to the original color.
 
 The tool is located in the `aYinColor-V2 source` directory.
 
-## 📂 Included Files
+### 📂 Included Files
 
-- `ayin-color.less` - V1 CSS version
-- `ayin-color-expand.less` - V2 CSS version
-- `ayin-color.js` - JavaScript version
-- `ayin-color.json` - Static color values JSON file
-- `index.js` - Entry file
+  - `ayin-color.less` - V1 CSS version
+  - `ayin-color-expand.less` - V2 CSS version
+  - `ayin-color.js` - JavaScript version
+  - `ayin-color.json` - Static color values JSON file
+  - `index.js` - Entry file
+  - `preview.html` - Offline color table preview, query, and matching tool
 
-## 🎯 Design Philosophy
+### 🎯 Design Philosophy
 
-AyinColor is designed based on the HSL color model:
+TechUI/Colors is designed based on the HSL color model:
 
-1. **Hue**: Starting from pure red `#FF0000`, generates a base color every 15°, totaling 24 base colors + 1 gray
-2. **Saturation**: V1 provides 4 levels, V2 provides 6 levels
-3. **Lightness**: V1 provides 9 levels, V2 provides 19 levels
+1.  **Hue**: Starting from pure red `#FF0000`, generates a base color every 15°, totaling 24 base colors + 1 gray
+2.  **Saturation**: V1 provides 4 levels, V2 provides 6 levels
+3.  **Lightness**: V1 provides 9 levels, V2 provides 19 levels
 
 This design makes color usage more intuitive and systematic.
 
-## 📚 Related Links
+### 📚 Related Links
+
+  - 🏠 [Official Website](https://techui.net/)
+  - 📦 [npm Package](https://www.npmjs.com/package/@techui/colors)
+  - 💻 [GitHub Repository](https://github.com/aYin86cn/ayin-color)
+  - 🎥 [Bilibili Video Tutorial](https://space.bilibili.com/302402751)
+  - 🎨 [Color Table Preview](https://ayin86.com/)
+
+### 👨‍💻 Author
+
+**Ayin**
+
+  - Email: [ayin86cn@gmail.com](mailto:ayin86cn@gmail.com)
+  - WeChat: jay1986cn
+
+### 🙏 Acknowledgments
+
+  - Built with [chroma.js](https://gka.github.io/chroma.js/)
+  - Thanks to all developers who use and support @techui/colors
+
+-----
+
+## 中文
+
+> ayin 开发的 js 和 less 版本的颜色表。
+
+**@techui/colors** 曾用名为 **ayin-color**，是一个颜色库工具，旨在帮助开发者摆脱记忆 `#FF0000`、`RGB(255,0,0)` 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。
+
+### ✨ 特性
+
+  - 🎨 **自然语言式命名** - 使用直观的颜色名称，如 `rel5`（红色）、`bll5`（蓝色）
+  - 📦 **双版本支持** - 提供 V1 和 V2 两个版本，V2 拥有更丰富的颜色数量
+  - 🔧 **多平台兼容** - 同时支持 JavaScript 和 Less/CSS 版本
+  - 🌈 **科学配色** - 基于 HSL 色彩模型，通过色相、饱和度、明暗度生成完整色谱
+  - 🎯 **开箱即用** - 预设数百种颜色值，快速开发
+  - 📄 **内置预览文件** - 根据preview.html快速查看复制所需颜色，进行快速入门，入门后即可通过自然语义快速调用颜色无需查表。
+
+### 🚀 快速开始
+
+#### JavaScript 使用方式
+
+在项目入口文件（如 `main.js`）中引入：
+
+```javascript
+import tuiColors from "@techui/colors"
+Vue.use(tuiColors)
+//此时你可以在项目中任意位置使用$c,$chroma
+```
+
+或者在组件或者页面中使用import引入使用，如：
+
+```javascript
+import { $c, $chroma } from "@techui/colors"
+const color=$c.rel5
+```
+
+使用示例：
+
+```javascript
+// TechUI/Colors V1 - 使用基础色
+let color = $c.rel5  // 红色
+let blue = $c.bll5   // 蓝色
+let gray = $c.gyd4   // 灰色
+
+// TechUI/Colors V2 - 使用扩展色
+let color2 = $c.reA10   // 红色（更细腻的色阶）
+let blue2 = $c.blA03    // 蓝色
+```
+
+#### CSS/Less 使用方式
+
+##### Vue 2 (vue.config.js)
+
+需要先安装依赖：`less`、`less-loader`、`style-resources-loader`
+
+```javascript
+const path = require('path')
+
+module.exports = {
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'less',
+      patterns: [
+        path.resolve(__dirname, "./node_modules/@techui/colors/base.less"),
+        path.resolve(__dirname, "./node_modules/@techui/colors/extended.less")
+      ]
+    }
+  }
+}
+```
+
+##### Vue 3 + Vite (vite.config.js)
+
+需要先安装依赖：`less`、`less-loader`
+
+```javascript
+import { defineConfig } from 'vite'
+import path from 'path'
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        additionalData: `
+          @import "${path.resolve(__dirname, './node_modules/@techui/colors/base.less')}";
+          @import "${path.resolve(__dirname, './node_modules/@techui/colors/extended.less')}";
+        `
+      }
+    }
+  }
+})
+```
+
+在样式文件中使用：
+
+```less
+// TechUI/Colors V1
+.text {
+  color: @rel5;
+  background-color: @bll5;
+  border: 1px solid @gyd4;
+}
+
+// TechUI/Colors V2
+.text-v2 {
+  color: @reA10;
+  background-color: @blA03;
+  border: 1px solid @gyE05;
+}
+```
+
+### 🎨 颜色命名规则
+
+#### V1 版本命名规则
+
+颜色命名由 **基础色** + **饱和度** + **明暗度** 组成。
+
+**25 种基础色**（色相间隔 15°）：
+
+  - `re` - 红色 (red)
+  - `or` - 橙色 (orange)
+  - `ye` - 黄色 (yellow)
+  - `ch` - 草绿 (chartreuse)
+  - `gr` - 绿色 (green)
+  - `aq` - 水绿 (aquamarine)
+  - `cy` - 青色 (cyan)
+  - `bl` - 蓝色 (blue)
+  - `in` - 靛色 (indigo)
+  - `pu` - 紫色 (purple)
+  - `pi` - 粉色 (pink)
+  - `vi` - 罗兰红 (violetred)
+  - `gy` - 灰色 (gray)
+  - 以及中间色：`ro`、`oy`、`yc`、`cg`、`ga`、`ac`、`cb`、`bi`、`ip`、`pp`、`pv`、`vr`
+
+**4 种饱和度**：
+
+  - `l` - light（淡）
+  - `m` - middle（中）
+  - `r` - rost（烤）
+  - `d` - dark（深）
+
+**9 级明暗度**：`1`（最淡）到 `9`（最深）
+
+**示例**：
+
+  - `rel5` - 红色，light 饱和度，5 级明暗
+  - `bld1` - 蓝色，dark 饱和度，1 级明暗（淡蓝深饱和）
+  - `rel9` - 红色，light 饱和度，9 级明暗（深红）
+
+#### V2 版本命名规则
+
+V2 版本提供更细腻的色阶变化。
+
+**饱和度**：`A`、`B`、`C`、`D`、`E`、`F` 六种
+
+**明暗度**：`01` 到 `19` 共 19 级
+
+**示例**：
+
+  - `reA10` - 红色，A 饱和度，10 级明暗
+  - `blE05` - 蓝色，E 饱和度，5 级明暗
+
+### 🔧 进阶功能
+
+#### JavaScript 颜色处理函数
+
+基于 chroma.js 封装的颜色处理函数：
+
+```javascript
+// 透明度
+let color = $c.fade('bll5', 0.5)  // 50% 透明度
+
+// 色相调整
+let hue = $c.hslh('rel5', 30)  // 色相偏移 30°
+
+// 饱和度调整
+let sat = $c.hsls('rel5', 0.8)
+
+// 明暗调整
+let light = $c.hsll('rel5', 0.6)
+
+// 加深/减淡
+let darker = $c.darken('bll5', 0.2)
+let lighter = $c.lighten('bll5', 0.2)
+
+// 颜色渐变（生成多个颜色之间的过渡色）
+let gradient = $c.scale(['rel5', 'bll5', 'yel5'], 10, 'lch')
+// 参数：颜色数组（最少2个）、需要的颜色数量、混合模式（lch/hsl/lab/lrgb，默认 lch）
+```
+
+#### Less 颜色处理函数
+
+```less
+.element {
+  // 透明度
+  color: fade(@bll5, 50%);
+
+  // 明暗调整
+  background: lighten(@rel5, 20%);
+  border-color: darken(@bll5, 10%);
+
+  // 饱和度调整
+  box-shadow: 0 0 10px saturate(@rel5, 20%);
+
+  // 色相旋转
+  outline-color: spin(@rel5, 30);
+
+  // 颜色混合
+  background: mix(@rel5, @bll5, 50%);
+}
+```
+
+更多 Less 颜色函数请参考 [Less 官方文档](http://lesscss.org/functions/#color-operations)。
+
+### 📖 版本选择建议
+
+#### 使用 V1 版本
 
-- 🏠 [Official Website](https://techui.net/)
-- 📦 [npm Package](https://www.npmjs.com/package/@techui/colors)
-- 💻 [GitHub Repository](https://github.com/aYin86cn/ayin-color)
-- 🎥 [Bilibili Video Tutorial](https://space.bilibili.com/302402751)
-- 🎨 [Color Table Preview](https://ayin86.com/)
+  - ✅ 日常项目开发
+  - ✅ 快速原型设计
+  - ✅ 需要易于记忆和掌控的配色方案
+  - ✅ 一般 Web 应用和管理后台
 
-## 👨‍💻 Author
+V1 版本颜色数量适中，易于掌握，能够满足绝大多数项目的配色需求。
+
+#### 使用 V2 版本
+
+  - ✅ 数据可视化项目
+  - ✅ 大屏展示系统
+  - ✅ 需要精细色阶控制
+  - ✅ 专业设计项目
+
+V2 版本提供更细腻的颜色变化，适合对配色有更高要求的场景。
+
+### 🔨 开发工具
+
+#### 颜色转换工具
+
+项目提供了颜色转换工具，可以将普通颜色值转换为 TechUI/Colors 格式。
+
+支持输入格式：
+
+  - 颜色名称：`red`
+  - 十六进制：`#FF0000`
+  - RGB/RGBA：`rgb(255, 0, 0)`、`rgba(255, 0, 0, 0.5)`
+
+工具会返回 V1 和 V2 版本中的最佳匹配结果。距离参数越小表示与原始颜色越接近。
+
+工具位于 `aYinColor-V2 source` 目录中。
+
+### 📂 包含文件
+
+  - `ayin-color.less` - V1 CSS 版本
+  - `ayin-color-expand.less` - V2 CSS 版本
+  - `ayin-color.js` - JavaScript 版本
+  - `ayin-color.json` - 静态颜色值 JSON 文件
+  - `index.js` - 入口文件
+  - `preview.html` - 离线版颜色表预览查询匹配工具
+
+### 🎯 设计原理
+
+TechUI/Colors 基于 HSL 色彩模型设计：
+
+1.  **色相 (Hue)**：从纯红色 `#FF0000` 开始，每隔 15° 生成一个基础色，共 24 个基础色 + 1 个灰色
+2.  **饱和度 (Saturation)**：V1 提供 4 级，V2 提供 6 级
+3.  **明度 (Lightness)**：V1 提供 9 级，V2 提供 19 级
+
+这种设计使得颜色调用更加直观和系统化。
+
+### 📚 相关链接
+
+  - 🏠 [官方网站](https://techui.net)
+  - 📦 [npm 包](https://www.npmjs.com/package/@techui/colors)
+  - 💻 [GitHub 仓库](https://github.com/aYin86cn/ayin-color)
+  - 🎥 [Bilibili 视频教程](https://space.bilibili.com/302402751)
+  - 🎨 [颜色表预览](https://techui.net/)
+
+### 👨‍💻 作者
 
 **Ayin**
 
-- Email: <ayin86cn@gmail.com>
-- WeChat: jay1986cn
+  - Email: [ayin86cn@gmail.com](mailto:ayin86cn@gmail.com)
+  - WeChat: jay1986cn
+
+### 🙏 致谢
 
-## 🙏 Acknowledgments
+  - 基于 [chroma.js](https://gka.github.io/chroma.js/) 开发
+  - 感谢所有使用和支持 @techui/colors 的开发者
 
-- Built with [chroma.js](https://gka.github.io/chroma.js/)
-- Thanks to all developers who use and support @techui/colors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techui/colors",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Color tables for js and less versions developed by ayin.",
   "license": "MIT",
   "author": "aYin <ayin86cn@gmail.com> <wechat:jay1986cn>",
@@ -25,9 +25,6 @@
     "chroma",
     "chroma.js"
   ],
-  "dependencies": {
-    "@techui/lessmixins": "^1.0.0"
-  },
   "devDependencies":{
     "less": "*",
     "less-loader": "*"