@veltra/styles 1.10.0 → 1.12.0
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.
package/dist/theme/helper.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export declare function hexWithAlpha(hex: `#${string}`, alphaPercent: number): s
|
|
|
16
16
|
export declare function mixColorWithAlpha(color: `#${string}`, ratio: number): string;
|
|
17
17
|
/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */
|
|
18
18
|
export declare function hexRgbOnly(hex: string): `#${string}`;
|
|
19
|
-
/** 校验是否为 `#RRGGBB
|
|
19
|
+
/** 校验是否为 hex 颜色（`#RGB` 或 `#RRGGBB`；3 位由 HEXToRGB 归一化，避免预设漏掉 alpha token 推导） */
|
|
20
20
|
export declare function isHexColor(value: string): value is `#${string}`;
|
|
21
21
|
export declare function defineBySize(variable: Record<'small' | 'default' | 'large', number>): Record<'small' | 'default' | 'large', number>;
|
|
22
22
|
/**
|
package/dist/theme/helper.js
CHANGED
|
@@ -56,9 +56,9 @@ function hexRgbOnly(hex) {
|
|
|
56
56
|
if (normalized.length === 8) return `#${normalized.slice(0, 6)}`;
|
|
57
57
|
return hex;
|
|
58
58
|
}
|
|
59
|
-
/** 校验是否为 `#RRGGBB
|
|
59
|
+
/** 校验是否为 hex 颜色（`#RGB` 或 `#RRGGBB`；3 位由 HEXToRGB 归一化，避免预设漏掉 alpha token 推导） */
|
|
60
60
|
function isHexColor(value) {
|
|
61
|
-
return /^#[0-9a-fA-F]{6}$/.test(value);
|
|
61
|
+
return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
|
|
62
62
|
}
|
|
63
63
|
function defineBySize(variable) {
|
|
64
64
|
return variable;
|
package/dist/theme/helper.js.map
CHANGED
|
@@ -1 +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\n/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */\nexport function hexWithAlpha(hex: `#${string}`, alphaPercent: number): string {\n const [r, g, b] = HEXToRGB(hex)\n const alpha = Math.round((alphaPercent / 100) * 1000) / 1000\n return `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\n/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */\nexport function mixColorWithAlpha(color: `#${string}`, ratio: number): string {\n return hexWithAlpha(color, ratio * 100)\n}\n\n/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */\nexport function hexRgbOnly(hex: string): `#${string}` {\n const normalized = hex.replace(/^#/, '')\n if (normalized.length === 8) {\n return `#${normalized.slice(0, 6)}` as `#${string}`\n }\n return hex as `#${string}`\n}\n\n/** 校验是否为 `#RRGGBB
|
|
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\n/** 将 `#RRGGBB` 转为指定不透明度百分比的 `rgba()`（等价于 color-mix N% + transparent） */\nexport function hexWithAlpha(hex: `#${string}`, alphaPercent: number): string {\n const [r, g, b] = HEXToRGB(hex)\n const alpha = Math.round((alphaPercent / 100) * 1000) / 1000\n return `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\n/** 别名：`ratio` 为 0–1 时不透明度（0.08 → 8%） */\nexport function mixColorWithAlpha(color: `#${string}`, ratio: number): string {\n return hexWithAlpha(color, ratio * 100)\n}\n\n/** 剥离 `#RRGGBBAA` 的 alpha 通道，返回 `#RRGGBB` */\nexport function hexRgbOnly(hex: string): `#${string}` {\n const normalized = hex.replace(/^#/, '')\n if (normalized.length === 8) {\n return `#${normalized.slice(0, 6)}` as `#${string}`\n }\n return hex as `#${string}`\n}\n\n/** 校验是否为 hex 颜色（`#RGB` 或 `#RRGGBB`；3 位由 HEXToRGB 归一化，避免预设漏掉 alpha token 推导） */\nexport function isHexColor(value: string): value is `#${string}` {\n return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value)\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;;AAGA,SAAgB,aAAa,KAAmB,cAA8B;CAC5E,MAAM,CAAC,GAAG,GAAG,KAAK,SAAS,GAAG;CAE9B,OAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IADf,KAAK,MAAO,eAAe,MAAO,GAAI,IAAI,IACjB;AACzC;;AAGA,SAAgB,kBAAkB,OAAqB,OAAuB;CAC5E,OAAO,aAAa,OAAO,QAAQ,GAAG;AACxC;;AAGA,SAAgB,WAAW,KAA2B;CACpD,MAAM,aAAa,IAAI,QAAQ,MAAM,EAAE;CACvC,IAAI,WAAW,WAAW,GACxB,OAAO,IAAI,WAAW,MAAM,GAAG,CAAC;CAElC,OAAO;AACT;;AAGA,SAAgB,WAAW,OAAsC;CAC/D,OAAO,uCAAuC,KAAK,KAAK;AAC1D;AAEA,SAAgB,aACd,UAC+C;CAC/C,OAAO;AACT;;;;;AAMA,SAAgB,OAAO,MAAsB;CAC3C,OAAO,WAAW,KAAK;AACzB"}
|
package/package.json
CHANGED
|
@@ -52,6 +52,8 @@ describe('UITheme', () => {
|
|
|
52
52
|
expect(decls.some((d) => d.startsWith('--u-color-primary-a-8:'))).toBe(true)
|
|
53
53
|
expect(decls.some((d) => d.startsWith('--u-border-color-a-52:'))).toBe(true)
|
|
54
54
|
expect(decls.some((d) => d.startsWith('--u-text-color-second-a-28:'))).toBe(true)
|
|
55
|
+
// 3 位 hex（如预设里的 white: '#fff'）同样要推导 alpha token，缺失会导致引用它的整条声明失效
|
|
56
|
+
expect(decls.some((d) => d.startsWith('--u-text-color-white-a-86:'))).toBe(true)
|
|
55
57
|
})
|
|
56
58
|
|
|
57
59
|
it('renderComponentMixTokens emits batch-edit and kbd vars', () => {
|
package/src/theme/helper.ts
CHANGED
|
@@ -64,9 +64,9 @@ export function hexRgbOnly(hex: string): `#${string}` {
|
|
|
64
64
|
return hex as `#${string}`
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
/** 校验是否为 `#RRGGBB
|
|
67
|
+
/** 校验是否为 hex 颜色（`#RGB` 或 `#RRGGBB`；3 位由 HEXToRGB 归一化，避免预设漏掉 alpha token 推导） */
|
|
68
68
|
export function isHexColor(value: string): value is `#${string}` {
|
|
69
|
-
return /^#[0-9a-fA-F]{6}$/.test(value)
|
|
69
|
+
return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value)
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
export function defineBySize(
|