@veltra/styles 1.2.12 → 1.2.14

package/dist/theme/helper.d.ts

@@ -0,0 +1,22 @@
+import { RGBColor } from "./type.js";
+
+//#region src/theme/helper.d.ts
+/** 实现十六进制颜色转RGB颜色，包括透明度 */
+declare function HEXToRGB(color: string): RGBColor;
+/**
+ * 混合两个颜色，并返回混合结果的十六进制表示。
+ * @param color1 - 第一个颜色，格式为`#RRGGBB`。
+ * @param color2 - 第二个颜色，格式为`#RRGGBB`。
+ * @param ratio - 颜色混合的比例，取值范围为0到1。
+ * @returns 混合结果的十六进制表示。
+ */
+declare function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string;
+declare function defineBySize(variable: Record<'small' | 'default' | 'large', number>): Record<'small' | 'default' | 'large', number>;
+/**
+ * 引用全局主题 CSS 变量（`--u-*` 命名空间）
+ * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`
+ */
+declare function cssVar(prop: string): string;
+//#endregion
+export { HEXToRGB, cssVar, defineBySize, mixColor };
+//# sourceMappingURL=helper.d.ts.map

package/dist/theme/helper.js

@@ -44,7 +44,14 @@ function mixColor(color1, color2, ratio) {
 function defineBySize(variable) {
 	return variable;
 }
+/**
+* 引用全局主题 CSS 变量（`--u-*` 命名空间）
+* @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`
+*/
+function cssVar(prop) {
+	return `var(--u-${prop})`;
+}
 //#endregion
-export { defineBySize, mixColor };
+export { HEXToRGB, cssVar, defineBySize, mixColor };
 
 //# sourceMappingURL=helper.js.map

package/dist/theme/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n  // 移除可能存在的 '#' 前缀\n  let hex = color.replace(/^#/, '')\n  let [r, g, b] = [0, 0, 0]\n\n  if (hex.length === 3) {\n    const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n    hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n  }\n\n  r = parseInt(hex.slice(0, 2), 16)\n  g = parseInt(hex.slice(2, 4), 16)\n  b = parseInt(hex.slice(4, 6), 16)\n\n  return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n  if (ratio > 1) throw new Error('ratio的值在0-1之间')\n  const color1RGB = HEXToRGB(color1)\n  const color2RGB = HEXToRGB(color2)\n\n  const color1Ratio = 1 - ratio\n\n  return (\n    '#' +\n    color1RGB\n      .map((n, i) => {\n        const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n        return hex.length === 1 ? '0' + hex : hex\n      })\n      .join('')\n  )\n}\n\nexport function defineBySize(\n  variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n  return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n  return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE;CAChC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;CAAC;CAExB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;EAAG;EAClD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;CACzC;CAEA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAEhC,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;;;;;;;;AASA,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,eAAe;CAC9C,MAAM,YAAY,SAAS,MAAM;CACjC,MAAM,YAAY,SAAS,MAAM;CAEjC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,KAAK,CAAC,CAAC,SAAS,EAAE;EAC3E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;CACxC,CAAC,CAAC,CACD,KAAK,EAAE;AAEd;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT"}
+{"version":3,"file":"helper.js","names":[],"sources":["../../src/theme/helper.ts"],"sourcesContent":["import type { RGBColor } from './type'\n\n/** 实现十六进制颜色转RGB颜色，包括透明度 */\nexport function HEXToRGB(color: string): RGBColor {\n  // 移除可能存在的 '#' 前缀\n  let hex = color.replace(/^#/, '')\n  let [r, g, b] = [0, 0, 0]\n\n  if (hex.length === 3) {\n    const [r10, g10, b10] = [hex[0]!, hex[1]!, hex[2]!]\n    hex = `${r10}${r10}${g10}${g10}${b10}${b10}`\n  }\n\n  r = parseInt(hex.slice(0, 2), 16)\n  g = parseInt(hex.slice(2, 4), 16)\n  b = parseInt(hex.slice(4, 6), 16)\n\n  return [r, g, b]\n}\n\n/**\n * 混合两个颜色，并返回混合结果的十六进制表示。\n * @param color1 - 第一个颜色，格式为`#RRGGBB`。\n * @param color2 - 第二个颜色，格式为`#RRGGBB`。\n * @param ratio - 颜色混合的比例，取值范围为0到1。\n * @returns 混合结果的十六进制表示。\n */\nexport function mixColor(color1: `#${string}`, color2: `#${string}`, ratio: number): string {\n  if (ratio > 1) throw new Error('ratio的值在0-1之间')\n  const color1RGB = HEXToRGB(color1)\n  const color2RGB = HEXToRGB(color2)\n\n  const color1Ratio = 1 - ratio\n\n  return (\n    '#' +\n    color1RGB\n      .map((n, i) => {\n        const hex = Math.floor(color1Ratio * n + color2RGB[i]! * ratio).toString(16)\n        return hex.length === 1 ? '0' + hex : hex\n      })\n      .join('')\n  )\n}\n\nexport function defineBySize(\n  variable: Record<'small' | 'default' | 'large', number>\n): Record<'small' | 'default' | 'large', number> {\n  return variable\n}\n\n/**\n * 引用全局主题 CSS 变量（`--u-*` 命名空间）\n * @param prop - 与 Theme 结构对应的连字符路径，如 `text-color-title`、`bg-color-hover`\n */\nexport function cssVar(prop: string): string {\n  return `var(--u-${prop})`\n}\n"],"mappings":";;AAGA,SAAgB,SAAS,OAAyB;CAEhD,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE;CAChC,IAAI,CAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;CAAC;CAExB,IAAI,IAAI,WAAW,GAAG;EACpB,MAAM,CAAC,KAAK,KAAK,OAAO;GAAC,IAAI;GAAK,IAAI;GAAK,IAAI;EAAG;EAClD,MAAM,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;CACzC;CAEA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAChC,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAEhC,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;;;;;;;;AASA,SAAgB,SAAS,QAAsB,QAAsB,OAAuB;CAC1F,IAAI,QAAQ,GAAG,MAAM,IAAI,MAAM,eAAe;CAC9C,MAAM,YAAY,SAAS,MAAM;CACjC,MAAM,YAAY,SAAS,MAAM;CAEjC,MAAM,cAAc,IAAI;CAExB,OACE,MACA,UACG,KAAK,GAAG,MAAM;EACb,MAAM,MAAM,KAAK,MAAM,cAAc,IAAI,UAAU,KAAM,KAAK,CAAC,CAAC,SAAS,EAAE;EAC3E,OAAO,IAAI,WAAW,IAAI,MAAM,MAAM;CACxC,CAAC,CAAC,CACD,KAAK,EAAE;AAEd;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT;;;;;AAMA,SAAgB,OAAO,MAAsB;CAC3C,OAAO,WAAW,KAAK;AACzB"}

package/dist/theme/index.d.ts

@@ -6,4 +6,5 @@ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
 import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
 import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
 import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
-export { type RGBColor, type Theme, UITheme, currentTheme, darkTheme, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, setTheme, shadcnDarkTheme, shadcnLightTheme };
+import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
+export { HEXToRGB, type RGBColor, type Theme, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme };

package/dist/theme/index.js

@@ -1,3 +1,4 @@
+import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./presets/light.js";
 import { darkTheme } from "./presets/dark.js";
@@ -5,4 +6,4 @@ import { heroDarkTheme, heroLightTheme } from "./presets/hero.js";
 import { shadcnDarkTheme, shadcnLightTheme } from "./presets/shadcn.js";
 import { glassDarkTheme, glassLightTheme } from "./presets/glass.js";
 import { currentTheme, loadTheme, setTheme } from "./load-theme.js";
-export { UITheme, currentTheme, darkTheme, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, setTheme, shadcnDarkTheme, shadcnLightTheme };
+export { HEXToRGB, UITheme, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "files": [
     "dist",
     "src"
@@ -34,13 +34,10 @@
       "default": "./dist/*"
     }
   },
-  "scripts": {
-    "build": "vp pack"
-  },
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
-    "@veltra/compositions": "1.2.12",
-    "@veltra/utils": "1.2.12",
+    "@veltra/compositions": "1.2.14",
+    "@veltra/utils": "1.2.14",
     "vue": ">=3.5.39"
   }
 }

package/src/theme/index.ts

@@ -5,3 +5,5 @@ export * from './ui-theme'
 export * from './presets'
 
 export * from './load-theme'
+
+export * from './helper'