npm - @techui/colors - Versions diffs - 1.0.1 → 1.0.3 - Mend

@techui/colors 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.cn.md DELETED Viewed

@@ -1,283 +0,0 @@
-# @techui/colors
-**[English](README.md)** | **[中文](README.cn.md)**
-> Color tables for js and less versions developed by ayin.
-**@techui/colors** 曾用名为 **ayin-color**，是一个颜色库工具，旨在帮助开发者摆脱记忆 `#FF0000`、`RGB(255,0,0)` 等繁琐颜色值的困扰，使用更接近自然语言的方式来定义和调用颜色。
-## ✨ 特性
-- 🎨 **自然语言式命名** - 使用直观的颜色名称，如 `rel5`（红色）、`bll5`（蓝色）
-- 📦 **双版本支持** - 提供 V1 和 V2 两个版本，V2 拥有更丰富的颜色数量
-- 🔧 **多平台兼容** - 同时支持 JavaScript 和 Less/CSS 版本
-- 🌈 **科学配色** - 基于 HSL 色彩模型，通过色相、饱和度、明暗度生成完整色谱
-- 🎯 **开箱即用** - 预设数百种颜色值，快速开发无需查表
-## 🚀 快速开始
-### JavaScript 使用方式
-在项目入口文件（如 `main.js`）中引入：
-```javascript
-import { AyinColor } from "@techui/colors"
-Vue.use(AyinColor)
-```
-使用示例：
-```javascript
-// AyinColor V1 - 使用基础色
-let color = $c.rel5  // 红色
-let blue = $c.bll5   // 蓝色
-let gray = $c.gyd4   // 灰色
-// AyinColor 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
-// AyinColor V1
-.text {
-  color: @rel5;
-  background-color: @bll5;
-  border: 1px solid @gyd4;
-}
-// AyinColor 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 版本
-- ✅ 日常项目开发
-- ✅ 快速原型设计
-- ✅ 需要易于记忆和掌控的配色方案
-- ✅ 一般 Web 应用和管理后台
-V1 版本颜色数量适中，易于掌握，能够满足绝大多数项目的配色需求。
-### 使用 V2 版本
-- ✅ 数据可视化项目
-- ✅ 大屏展示系统
-- ✅ 需要精细色阶控制
-- ✅ 专业设计项目
-V2 版本提供更细腻的颜色变化，适合对配色有更高要求的场景。
-## 🔨 开发工具
-### 颜色转换工具
-项目提供了颜色转换工具，可以将普通颜色值转换为 AyinColor 格式。
-支持输入格式：
-- 颜色名称：`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` - 入口文件
-## 🎯 设计原理
-AyinColor 基于 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
-## 🙏 致谢
-- 基于 [chroma.js](https://gka.github.io/chroma.js/) 开发
-- 感谢所有使用和支持 @techui/colors 的开发者
----
-**提示**：首次使用建议先查看[视频教程](https://www.bilibili.com/video/BV1kG411h7Px/)，了解颜色命名规则和使用技巧。