📦 @quec/panel-theme-kit-config 🔴🟠🟡🟢🔵🟣

QUEC Panel Theme Kit Config

QUEC Panel Theme Kit Config - 面板主题状态管理工具库的静态资源库用以兼容其他使用theme库但是不用太多的

@quec/panel-theme-kit的静态资源

✅ 功能列表

1. 存储主题色，图片源等
2. 颜色工具
3. 字体工具

🧩 模块结构

本库主要包含以下模块：

1. 图片
2. 类型
3. 字体

颜色组类型

命名约定规则：

color-[ 用途 bg / text / border ]-[层级或描述 first / second / third ]

以下为会初始化的颜色

初始化的颜色可查看以下链接 👉 初始化的颜色

| 颜色名称 | 颜色描述 | | --------------------------- | -------------- | | colorBg | 最底层背景 | | colorBgSecondary | 第二层背景色 | | colorBgTertiary | 第三层背景色 | | colorBgInverted | 反色背景 | | colorBgInput | 输入框背景颜色 | | colorText | 一级字色 | | colorTextSecondary | 二级字色 | | colorTextTertiary | 三级字色 | | colorTextHint | 提示字色 | | colorTextInverted | 反色字色 | | colorTextDisabled | 不可字色 | | colorTextInputPlaceholder | 输入框提示字色 | | colorDivider | 分割行颜色 | | colorBorder | 边框色 | | colorPrimary | 主题色 | | colorSecondary | 二级主题色 | | colorSuccess | 成功色 | | colorError | 错误色 | | colorWarn | 警告色 | | colorDanger | 危险色 | | colorSafe | 安全色 | | ... | ... |

图片组类型

命名约定规则：

img-[描述 arrow / setting ]

以下为会初始化的图片

初始化的图片可查看以下链接 👉 初始化的图片

| 图片名称 | 图片描述 | | -------------- | -------------------- | | imgArrowLeft | 向左返回上一页的箭头 | | imgArrowCell | cell的向右箭头 | | imgSet | 设置页的图标 | | imgMore | 更多的点点点图标 | | imgAdd | 加号图标 | | imgClose | X 关闭图标 | | imgWrite | 写图标 ✍ | | imgDelete | 垃圾桶删除图标 | | imgNotice | 小铃铛 提醒图标 | | imgEmpty | 通用空图 | | imgMesEmpty | 消息空态图 | | imgError | 通用错误 大图 | | imgErrorNet | 网络错误 大图 | | ... | ... |

🌈 颜色工具方法

方法

• hexToRgb()：hex 转 rgb
• rgbToHex()：rgb 转 hex
• rgbToRgba()：rgb 转 rgba
• mixColors()：混合颜色
• lighten()：将颜色变亮
• darken()：将颜色变暗
• isLight()：判断颜色是否为亮色
• invertColor()：获取颜色的反转色

✒ 字体工具方法

patchTextStyle()

由于不可抗力，IOS系统文字需要比安卓大2个单位，所以本库提供了 patchTextStyle() 方法，用于自动适配，直接使用在APP之前

方法

• getFontWeight()：获取字重
• getFontStyle()：简化字体样式配置

🔨 和其他的kit库一起配合使用

字体类型（定制面板还是建议自己写，然后这里专用于组件库）

为组件库提供的字体类型可查看以下链接 👉 为组件库提供的字体类型

颜色类型

为组件库提供的颜色类型可查看以下链接 👉 为组件库提供的颜色类型

图片类型

为组件库提供的初始化的图片可查看以下链接 👉 为组件库提供的图片类型

会将上面的初始色赋值给对应的kit组件库，可以查看其他库的相关对应表格

🛠 本地调试说明

如需修改本库并本地调试，请参考 👉 本地调试文档