fx-admin（伏羲氏）

color 颜色混合与色阶生成 ​

颜色混合工具，用于运行时动态计算主题色阶（light-1~9 / dark-2），复刻 SCSS color.mix() 算法。

API ​

ts
/**
 * 混合两个颜色
 * @param mixColor - 混入色（hex 格式，如 #ffffff）
 * @param baseColor - 基色（hex 格式，如 #409eff）
 * @param weight - 混入色权重（0~1，0 = 纯基色，1 = 纯混入色）
 * @returns 混合后的 hex 色值（#RRGGBB）
 */
function mixColors(
  mixColor: string,
  baseColor: string,
  weight: number
): string

/**
 * 生成主色的完整色阶（light-1~9 / dark-2）
 * @param baseColor - 基色（hex 格式）
 * @returns 色阶 map：{ 'light-1': '#xxx', ..., 'light-9': '#xxx', 'dark-2': '#xxx' }
 */
function generateColorScales(baseColor: string): Record<string, string>

使用场景 ​

用于偏好设置中切换主色后，动态计算并应用派生色阶（按钮 hover/active、边框、禁用态等）。

语义色（success / warning / danger / info / error）不参与运行时主题计算，使用 @fx/styles 编译时生成的固定色阶，与主流组件库行为一致。

算法说明 ​

  • mixColors: 将两个 hex 色值按权重混合，四舍五入后返回
  • generateColorScales:
    • light-1~9: 基色混入 10%~90% 白色
    • dark-2: 基色混入 20% 黑色

算法复刻 SCSS color.mix() + roundColor()，确保运行时色阶与编译时一致。

示例 ​

色阶生成演示
#409eff
light-1 : #53a8ff
light-2 : #66b1ff
light-3 : #79bbff
light-4 : #8cc5ff
light-5 : #a0cfff
light-6 : #b3d8ff
light-7 : #c6e2ff
light-8 : #d9ecff
light-9 : #ecf5ff
dark-2  : #337ecc

切换基色，自动生成 10 个派生色阶（light-1~9 渐浅，dark-2 加深）