色彩

@ksware/ksw-ux 使用 oklch 颜色模型生成的 css 变量。

组件库色彩使用有两种模式: 公共变量, 项目变量。

公共变量:

公共变量命名格式为 --k-{颜色}-{色阶}, 例如 --k-red-500 表示红色的 500 色阶。

项目变量:

首先需要再加载项目时, 导入项目。

在 main.ts 引入 KswUx 并传入配置。

typescript

...
import KswUx from '@ksware/ksw-ux';


const app = createApp(App);
app.use(KswUx, { styleModule: 'GFAOM' }); // 传入项目名称
...

变量命名格式为 --k-theme-{颜色}-{色阶}, 例如 --k-theme-primary-500 表示主题色的 500 色阶。

调色板

ksw-ux 包含丰富、漂亮的开箱即用调色板，由专业设计师精心制作，适用于各种不同的设计风格。

100

200

300

400

500

600

700

800

900

950

玫瑰色

粉色

紫红色

紫色

紫罗兰色

靛蓝色

蓝色

天蓝色

青蓝色

青色

祖母绿

绿色

酸橙色

黄色

琥珀色

红色

橙色

石色

中性色

锌色

灰色

石板

色彩 ​

公共变量: ​

项目变量: ​

调色板 ​

色彩

公共变量:

项目变量:

调色板