@techui/colors 1.0.1 → 1.0.3

package/UPDATE.md

@@ -0,0 +1,55 @@
+# @techui/colors Update Log | 更新日志
+
+[English](#english) | [中文](#中文)
+
+---
+
+## English
+
+### v1.0.3 (2026-04-16)
+
+- Added `$c.resolve` — resolves preset color names, `@`-prefixed names, and raw Hex/RGB values
+- Added `$c.valid` — validates whether a color name or value is recognized
+- Added `$c.expr` — expression syntax with pipe-based color transforms (e.g. `@bll5|.3`, `@bll5|lighten(2)`)
+- Added `$c.genColors` — generates a semantic color scale from a base color or array
+- Added `$c.genColorObj` — converts a color scale array into a semantic object (`weak/base/strong`) with optional opacity variants
+
+### v1.0.2 (2025-11-09)
+
+- Added preview.html, which allows filtering, querying, and matching operations on the current color table.
+
+### v1.0.1 (2025-11-08)
+
+- Internal file update, expand.less renamed to extended.less
+- Minor iteration of index.js
+
+### v1.0.0 (2025-10-15 Removed)
+
+- First release
+- Renamed from ayin-color to @techui/colors
+
+---
+
+## 中文
+
+### v1.0.3 (2026-04-16)
+
+- 新增 `$c.resolve` — 解析预定义颜色名、`@` 前缀写法及原始 Hex/RGB 值
+- 新增 `$c.valid` — 校验颜色名或颜色值是否有效
+- 新增 `$c.expr` — 表达式语法，支持管道式颜色变换（如 `@bll5|.3`、`@bll5|lighten(2)`）
+- 新增 `$c.genColors` — 根据基础色或颜色数组生成语义色阶
+- 新增 `$c.genColorObj` — 将色阶数组转换为 `weak/base/strong` 语义对象，支持附加透明度变体
+
+### v1.0.2 (2025-11-9)
+
+- 新增preview.html可以对当前颜色表进行筛选查询以及匹配操作
+
+### v1.0.1 (2025-11-8)
+
+- 内部文件更新，expand.less更名为extended.less
+- index.js进行轻微迭代
+
+### v1.0.0 (2025-10-15 已移除)
+
+- 首次发布
+- 从ayin-color更名为@techui/colors

package/index.js

@@ -1,181 +1,228 @@
-import chroma from "@techui/libs/chroma";
-import json from "./all.json";
-/*
-code by ayin86cn@gmail.com 
-chsname:["红","红橙","橙","橙黄","黄","黄草","草绿","草绿-绿","绿","绿-水绿","水绿","水绿-青","青","青蓝","蓝","蓝靛","靛","靛紫","紫","紫粉","粉","粉-洋红","洋红","洋红-红","灰"],
-engname:["red","red-orange","orange","orange-yellow","yellow","yellow-chartreuse","chartreuse","chartreuse-green","green","green-aquamarine","aquamarine","aquamarine-cyan","cyan","cyan-blue","blue","blue-indigo","indigo","indigo-purple","purple","purple-pink","pink","pink-violetred","violetred","violetred-red","gray"],
-colors:["re","ro","or","oy","ye","yc","ch","cg","gr","ga","aq","ac","cy","cb","bl","bi","in","ip","pu","pp","pi","pv","vi","vr","gy"],
-*/
-//chroma.hsl(hue, saturation, lightness)
-//chroma.hsv(hue, saturation, value)
-//chroma.lab(Lightness, a, b)
-//chroma.lch(Lightness, chroma, hue)
-//chroma.hcl(hue, chroma, lightness)
-//chroma.cmyk(cy, magenta, ye, black)
-//chroma.gl(re, gr, bl, [alpha])
-let illegal="Illegal color !"
-const coFuncs={
-  fade:(color,num)=>{
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).alpha(num).hex();
-    }else{
-      console.warn(illegal,color,num)
-    }
-  },
-  //hue色相,saturation饱和度,lightness明暗
-  hslh:(color,num)=>{//hue色相调整
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).set('hsl.h', num).hex(); 
-    }else{
-      console.warn(illegal,color,num)
-    }
-  },
-  hsls:(color,num)=>{//saturation饱和度
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).set('hsl.s', num).hex(); 
-    }else{
-      console.warn(illegal,color,num)
-    }
-  },
-  hsll:(color,num)=>{//lightness明暗
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).set('hsl.l', num).hex(); 
-    }else{
-      console.warn(illegal,color,num)
-    }
-  },
-  darken:(color,num)=>{ 
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).darken(num).hex(); 
-    }else{
-      console.warn(illegal,color,num)
-    }
-  }, 
-  lighten:(color,num)=>{
-    let a=json[color]?json[color]:color
-    if(chroma.valid(a)){
-      return chroma(a).brighten(num).hex(); 
-    }else{
-      console.warn(illegal,color,num)
-    }
-  },
-  scale:(arry,num=7,mode="lch")=>{//mode=lch,hsl,lab,lrgb
-    const newArray=[];
-    arry.forEach((item,index)=>{
-      if(chroma.valid(item)){
-        newArray.push(item)
-      }else if(chroma.valid(json[item])){
-        newArray.push(json[item])
-      }else{
-        console.warn("The color set contains illegal color ",arry,index)
-      }
-    })
-    if(newArray.length>0){
-      return chroma.scale(newArray).mode(mode).colors(num)
-    }else{
-      console.error("The color set initialization failed ",arry)
-    }
-  },
-  genColors(coIpt, count = 7, diff = 50, satReduce=true) {//,DkSatReduce=true
-    if (!coIpt) throw new Error('The color parameter cannot be empty !');
-    count = Math.max(2, count);
-    
-    if (typeof coIpt === 'string') {// 处理单个颜色
-      if (!chroma.valid(coIpt)) throw new Error(`Invalid Color: ${coIpt}`);
-      const color = chroma(coIpt);
-      // 获取Lab色彩空间中的L通道值
-      const labL = color.get('lab.l');
-      // const colorL = color.brighten(diff);
-      // const colorD = color.darken(diff);
-      const lchColor = chroma(color).lch();
-      const lchC = lchColor[1];
-      let colorL = color.set('lab.l', Math.min(100, labL + diff));
-      let colorD = color.set('lab.l', Math.max(0, labL - diff));
-      
-      if(satReduce){
-        colorL=colorL.set('lch.c', lchC * 0.2)
-        colorD=colorD.set('lch.c', lchC * 0.1)
-      }
-      const scaleC=this.scale([colorL,color,colorD], count);
-      return scaleC
-    } 
-    // 处理颜色数组
-    else if (Array.isArray(coIpt)) {
-      const validColors = coIpt.filter(c => chroma.valid(c));
-      if (validColors.length === 0) throw new Error('No valid color value');
-      return this.scale(coIpt, count);
-    }
-    throw new Error('Color parameter must be a string or array');
-  },
-  genColorObj(
-    colors, //颜色值，浅色主题必须由浅入深，深色主题由深入浅
-    opacities,
-    names = ['weakest', 'weaker', 'weak', 'base', 'strong', 'stronger', 'strongest'], 
-  ){
-    if (!colors || !Array.isArray(colors) || colors.length < names.length) {
-      throw new Error(`The colors array must contain at least${names.length}`);
-    }
-    const result = {};
-    names.forEach((name, index) => {
-      result[name] = colors[index];
-    });
-    if (opacities) {
-      names.forEach((name, colorIndex) => {
-        opacities.forEach(opacity => {
-          const opacitySuffix = `op${Math.floor(opacity * 10)}`;
-          const propertyName = `${name}_${opacitySuffix}`;
-          result[propertyName] = $c.fade(colors[colorIndex], opacity);
-        });
-      });
-    }
-    return result;
-  },
-  sort(colors) {
-    return colors.sort((a, b) => chroma(b).luminance() - chroma(a).luminance());
-  },
-  viewColor(arr){
-    console.info("viewColor",arr);
-    arr.forEach(co => {
-      console.info('%c ■■■■■■■■','color:'+co)
-    });
-  },
-  analysis(co) {
-    const color = chroma(co);
-    // 获取颜色亮度 (0是黑色，1是白色)
-    const luminance = color.luminance();
-    // 判断颜色是深色还是浅色 (通常0.5作为分界线)
-    const isDark = luminance < 0.5;
-    // 计算深浅程度 (0表示最深，1表示最浅)
-    const colorDepth = isDark ? (0.5 - luminance) * 2 : (luminance - 0.5) * 2;
-    // 生成中间深浅度的颜色
-    let middleColor;
-    if (isDark) {
-      // 如果是深色，向浅色方向调整
-      middleColor = color.luminance(0.5 - colorDepth / 4);
-    } else {
-      // 如果是浅色，向深色方向调整
-      middleColor = color.luminance(0.5 + colorDepth / 4);
-    }
-    
-    return {
-      originalColor: color.hex(),
-      isDark: isDark,
-      luminance: luminance,
-      colorDepth: colorDepth,
-      middleColor: middleColor.hex()
-    };
-  }
-}
-const $c = Object.assign(coFuncs, json);
-
-export default (Vue)=>{
-  window.$c=$c
-  window.$chroma=chroma
-};
+import chroma from "@techui/libs/chroma";
+import json from "./all.json";
+/*
+code by ayin86cn@gmail.com 
+chsname:["红","红橙","橙","橙黄","黄","黄草","草绿","草绿-绿","绿","绿-水绿","水绿","水绿-青","青","青蓝","蓝","蓝靛","靛","靛紫","紫","紫粉","粉","粉-洋红","洋红","洋红-红","灰"],
+engname:["red","red-orange","orange","orange-yellow","yellow","yellow-chartreuse","chartreuse","chartreuse-green","green","green-aquamarine","aquamarine","aquamarine-cyan","cyan","cyan-blue","blue","blue-indigo","indigo","indigo-purple","purple","purple-pink","pink","pink-violetred","violetred","violetred-red","gray"],
+colors:["re","ro","or","oy","ye","yc","ch","cg","gr","ga","aq","ac","cy","cb","bl","bi","in","ip","pu","pp","pi","pv","vi","vr","gy"],
+*/
+// chroma.hsl(hue, saturation, lightness)
+// chroma.hsv(hue, saturation, value)
+// chroma.lab(Lightness, a, b)
+// chroma.lch(Lightness, chroma, hue)
+// chroma.hcl(hue, chroma, lightness)
+// chroma.cmyk(cy, magenta, ye, black)
+// chroma.gl(re, gr, bl, [alpha])
+const illegal = "Illegal color !";
+const transformFns = ["fade", "lighten", "darken", "hslh", "hsls", "hsll"];
+
+const stripColorPrefix = (color) => {
+  if (typeof color !== "string") return color;
+  const trimmed = color.trim();
+  return trimmed.startsWith("@") ? trimmed.slice(1) : trimmed;
+};
+
+const resolveColor = (color) => {
+  if (typeof color !== "string") return color;
+  const name = stripColorPrefix(color);
+  return json[name] || name;
+};
+
+const isValidColor = (color) => chroma.valid(resolveColor(color));
+
+const warnInvalidColor = (...args) => {
+  console.warn(illegal, ...args);
+};
+
+const normalizeNumber = (value) => {
+  const num = Number(String(value).trim());
+  return Number.isFinite(num) ? num : null;
+};
+
+const parseTransform = (rawTransform) => {
+  if (!rawTransform) return null;
+
+  const text = rawTransform.trim();
+  const defaultValue = normalizeNumber(text);
+  if (defaultValue !== null) {
+    return { name: "fade", value: defaultValue };
+  }
+
+  const matched = text.match(/^([a-zA-Z]\w*)\((.*)\)$/);
+  if (!matched) return null;
+
+  const name = matched[1];
+  const value = normalizeNumber(matched[2]);
+  if (!transformFns.includes(name) || value === null) return null;
+
+  return { name, value };
+};
+
+const splitExpression = (expression) => {
+  const pipeIndex = expression.indexOf("|");
+  if (pipeIndex < 0) {
+    return [expression.trim(), ""];
+  }
+
+  return [expression.slice(0, pipeIndex).trim(), expression.slice(pipeIndex + 1).trim()];
+};
+
+const coFuncs = {
+  resolve: resolveColor,
+  valid: isValidColor,
+  expr: (expression) => {
+    if (typeof expression !== "string") return expression;
+
+    const [rawColor, rawTransform] = splitExpression(expression);
+    const color = resolveColor(rawColor);
+    const transform = parseTransform(rawTransform);
+
+    if (!transform) return color;
+    return coFuncs[transform.name](color, transform.value);
+  },
+  fade: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).alpha(num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  // hue色相,saturation饱和度,lightness明暗
+  hslh: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).set("hsl.h", num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  hsls: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).set("hsl.s", num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  hsll: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).set("hsl.l", num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  darken: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).darken(num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  lighten: (color, num) => {
+    const resolved = resolveColor(color);
+    if (chroma.valid(resolved)) {
+      return chroma(resolved).brighten(num).hex();
+    }
+    warnInvalidColor(color, num);
+  },
+  scale: (arry, num = 7, mode = "lch") => {
+    const newArray = [];
+    arry.forEach((item, index) => {
+      const color = resolveColor(item);
+      if (chroma.valid(color)) {
+        newArray.push(color);
+      } else {
+        console.warn("The color set contains illegal color ", arry, index);
+      }
+    });
+    if (newArray.length > 0) {
+      return chroma.scale(newArray).mode(mode).colors(num);
+    }
+    console.error("The color set initialization failed ", arry);
+  },
+  genColors(coIpt, count = 7, diff = 50, satReduce = true) {
+    if (!coIpt) throw new Error("The color parameter cannot be empty !");
+    count = Math.max(2, count);
+
+    if (typeof coIpt === "string") {
+      const resolvedColor = resolveColor(coIpt);
+      if (!chroma.valid(resolvedColor)) throw new Error(`Invalid Color: ${coIpt}`);
+      const color = chroma(resolvedColor);
+      const labL = color.get("lab.l");
+      const lchColor = chroma(color).lch();
+      const lchC = lchColor[1];
+      let colorL = color.set("lab.l", Math.min(100, labL + diff));
+      let colorD = color.set("lab.l", Math.max(0, labL - diff));
+
+      if (satReduce) {
+        colorL = colorL.set("lch.c", lchC * 0.2);
+        colorD = colorD.set("lch.c", lchC * 0.1);
+      }
+      return coFuncs.scale([colorL, color, colorD], count);
+    }
+
+    if (Array.isArray(coIpt)) {
+      const validColors = coIpt.map(resolveColor).filter((color) => chroma.valid(color));
+      if (validColors.length === 0) throw new Error("No valid color value");
+      return coFuncs.scale(coIpt, count);
+    }
+    throw new Error("Color parameter must be a string or array");
+  },
+  genColorObj(
+    colors,
+    opacities,
+    names = ["weakest", "weaker", "weak", "base", "strong", "stronger", "strongest"]
+  ) {
+    if (!colors || !Array.isArray(colors) || colors.length < names.length) {
+      throw new Error(`The colors array must contain at least${names.length}`);
+    }
+    const result = {};
+    names.forEach((name, index) => {
+      result[name] = colors[index];
+    });
+    if (opacities) {
+      names.forEach((name, colorIndex) => {
+        opacities.forEach((opacity) => {
+          const opacitySuffix = `op${Math.floor(opacity * 10)}`;
+          const propertyName = `${name}_${opacitySuffix}`;
+          result[propertyName] = coFuncs.fade(colors[colorIndex], opacity);
+        });
+      });
+    }
+    return result;
+  },
+  sort(colors) {
+    return [...colors].sort((a, b) => chroma(resolveColor(b)).luminance() - chroma(resolveColor(a)).luminance());
+  },
+  viewColor(arr) {
+    console.info("viewColor", arr);
+    arr.forEach((co) => {
+      console.info("%c ■■■■■■■■", "color:" + co);
+    });
+  },
+  analysis(co) {
+    const color = chroma(resolveColor(co));
+    const luminance = color.luminance();
+    const isDark = luminance < 0.5;
+    const colorDepth = isDark ? (0.5 - luminance) * 2 : (luminance - 0.5) * 2;
+    let middleColor;
+    if (isDark) {
+      middleColor = color.luminance(0.5 - colorDepth / 4);
+    } else {
+      middleColor = color.luminance(0.5 + colorDepth / 4);
+    }
+
+    return {
+      originalColor: color.hex(),
+      isDark,
+      luminance,
+      colorDepth,
+      middleColor: middleColor.hex(),
+    };
+  },
+};
+const $c = Object.assign(coFuncs, json);
+
+export default (Vue) => {
+  window.$c = $c;
+  window.$chroma = chroma;
+};
 export { $c, chroma as $chroma };
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techui/colors",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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": "*"