@fiscozen/style

中文文档

0.5.0发布于 2026/09/07ISCCommonJS零依赖近 30 天下载 1.3万

设计系统包提供设计令牌,CSS变量和Vue.js自定义指令

文档目录26 节

特征
安装
设置
基本用途
v 颜色
粗体
小型
Vue 自定义指令
v 颜色
粗体
小型
合并指令
实例
基本打字风格
格式反馈信件
动态颜色变化
验证
无障碍
建筑
移动
关键部件
构建自定义( C)
重生成托肯斯
构建步骤
扩展系统
参考资料

@ fiscozen/ 风格

设计系统包提供设计令牌,CSS变量,和Vue.js自定义指令,以保持所有FiscoZen项目的视觉一致性.

特征

设计托肯斯: 颜色、间距、打字和更多真实的单一来源
CSS 变量: CSS 自定义属性中所有可用的符号
Vue 自定义指令: 字法定型指令(v-color, (中文(简体) ), v-bold, (中文(简体) ), v-small(中文(简体) )
尾风集成: 与 Tailwind CSS 通用类的无缝集成
类型安全: 有验证规则的完整类型脚本支持
构建管道: 自动令牌转换和CSS生成

安装

npm install @fiscozen/style

设置

在您的 Vue 申请中注册指令 :

// main.ts
import { createApp } from 'vue'
import { setupFzStyle } from '@fiscozen/style'
import '@fiscozen/style/output/global.css'
import App from './App.vue'

const app = createApp(App)

// Register FiscoZen custom directives
setupFzStyle(app)

app.mount('#app')

基本用途

v 颜色

对文本元素应用设计系统颜色 :

<template>
  <!-- Default weights (500 for base colors, 200 for semantic) -->
  <p v-color:blue>Blue text</p>
  <h1 v-color:semantic-error>Error heading</h1>
  
  <!-- Explicit weights -->
  <p v-color:blue="300">Light blue text</p>
  <h2 v-color:purple="700">Dark purple heading</h2>
</template>

粗体

对段落应用半粗体字体重:

<template>
  <p v-bold>This text is bold</p>
  <p v-bold="false">This text is normal weight</p>
</template>

小型

对段落应用小的文本大小 :

<template>
  <p v-small>This text is small</p>
  <p v-small="false">This text is normal size</p>
</template>

Vue 自定义指令

v 颜色

对标题和段落元素应用设计系统文本颜色.

支持的元素 :

段次页次<p>(中文(简体) )
标题(<h1>, (中文(简体) ), <h2>, (中文(简体) ), <h3>(中文(简体) )

可用颜色 :

基色 :

blue, (中文(简体) ), purple, (中文(简体) ), orange, (中文(简体) ), pink, (中文(简体) ), yellow, (中文(简体) ), grey, (中文(简体) ), core
重量 : 50, (中文(简体) ), 100, (中文(简体) ), 200, (中文(简体) ), 300, (中文(简体) ), 400, (中文(简体) ), 500 (违约), 600, (中文(简体) ), 700, (中文(简体) ), 800, (中文(简体) ), 900
对于 core数字 : white, (中文(简体) ), black (名称值而不是数字权重)

语义颜色 :

semantic-error, (中文(简体) ), semantic-warning, (中文(简体) ), semantic-success, (中文(简体) ), semantic-info
重量 : 50, (中文(简体) ), 100, (中文(简体) ), 200 (违约), 300

默认重量 :

底色 − 500
语义颜色 − 200
核心颜色 black

实例:

<template>
  <!-- Base colors with default weight -->
  <p v-color:blue>Blue text (weight 500)</p>
  <p v-color:purple>Purple text (weight 500)</p>
  
  <!-- Explicit weights -->
  <p v-color:blue="300">Light blue text</p>
  <p v-color:blue="700">Dark blue text</p>
  
  <!-- Semantic colors -->
  <p v-color:semantic-error>Error message</p>
  <p v-color:semantic-success>Success message</p>
  <h3 v-color:semantic-error="300">Critical error</h3>
  
  <!-- Headings -->
  <h1 v-color:blue="700">Main title</h1>
  <h2 v-color:grey="600">Subtitle</h2>
  
  <!-- Remove color classes -->
  <p v-color:blue="false">Removes all color classes</p>
</template>

粗体

应用半粗体字体重量( N)font-semibold页:1.

支持的元素 :

段次页次<p>(中文(简体) )

实例:

<template>
  <p v-bold>This text is bold</p>
  <p v-bold="false">This text is normal weight</p>
</template>

小型

应用小文本大小( E)text-sm页:1.

支持的元素 :

段次页次<p>(中文(简体) )

实例:

<template>
  <p v-small>This text is small</p>
  <p v-small="false">This text is normal size</p>
</template>

合并指令

在同一要素上,可以结合多个指令:

<template>
  <p v-bold v-small v-color:blue>Bold, small, blue text</p>
  <p v-bold v-color:semantic-error>Bold error message</p>
</template>

实例

基本打字风格

<template>
  <div>
    <h1 v-color:blue>Welcome to FiscoZen</h1>
    <h2 v-color:grey="600">Your Financial Partner</h2>
    
    <p>Standard paragraph text</p>
    <p v-bold>Bold paragraph for emphasis</p>
    <p v-small>Small paragraph for secondary information</p>
    
    <p v-color:semantic-error>Error: Please check your input</p>
    <p v-color:semantic-success>Success: Changes saved!</p>
  </div>
</template>

格式反馈信件

<template>
  <form>
    <div v-if="error">
      <p v-color:semantic-error v-bold>Error: {{ error }}</p>
    </div>
    <div v-if="success">
      <p v-color:semantic-success>Success: {{ success }}</p>
    </div>
  </form>
</template>

动态颜色变化

<script setup>
import { ref } from 'vue'

const status = ref('info')
const colorMap = {
  info: 'semantic-info',
  success: 'semantic-success',
  error: 'semantic-error',
  warning: 'semantic-warning'
}
</script>

<template>
  <p :v-color="colorMap[status]">Status message</p>
</template>

验证

这些指令自动验证它们是否用于所支持的元素类型。无效的使用会日志控制台错误 :

v-color 可用于 <p>, (中文(简体) ), <h1>, (中文(简体) ), <h2>, (中文(简体) ), <h3>
v-bold 只能用于 <p>
v-small 只能用于 <p>

无障碍

所有指令都保持语义HTML结构,不干扰屏幕阅读器:

色彩指令只应用视觉造型,维护文本内容
粗体和小指令保留文字语义
已登录无效的元素使用, 但不会中断功能
所有样式通过 CSS 类应用,保留语义意义

建筑

移动

tokens.json (Design tokens)
    ↓
token-transformer (Figma format → Style Dictionary format)
    ↓
tokens/global.json
    ↓
Style Dictionary (Custom formatters & transformers)
    ↓
    ├── output/global.css (CSS variables)
    └── output/global.json (JSON tokens)
    ↓
tailwind.config.js (Integrates tokens with Tailwind)
    ↓
Utility classes (text-blue-500, gap-4, etc.)

关键部件

1. 设计托肯斯tokens.json(中文(简体) )

设计值的单一真理来源
通过Figma管理托肯斯插件或手动编辑
包含颜色,间距,打字等.

2. 修建管道(build.js(中文(简体) )

管弦乐符号转换
生成 CSS 变量和 JSON 输出
追加 CSS( 类型、组件)

3. 尾风一体化tailwind.config.js(中文(简体) )

将令牌转换成 Tailwind 主题
生成动态使用类的安全列表
提供语义间隔和颜色默认值

4. 指令src/custom-directives/(中文(简体) )

v-color: 对文本应用设计系统颜色
v-bold: 应用半粗体字体重
v-small: 应用小文本大小

构建自定义( C)

重生成托肯斯

如果您修改了符号源文件 :

cd packages/style
npm run build

构建步骤

build:transform: 转换 tokens.json 转到样式词典格式
build-sd: 运行样式词典以生成 CSS 和 JSON
tsc: 编译 TypeScript 指令到 JavaScript

扩展系统

添加新颜色 :

添加颜色到 tokens.json
添加颜色名称到 safe-colors.json (用于安全清单)
运行 npm run build

添加新语义颜色 :

添加语义颜色到 tokens.json 下级 semantic.*
添加语义类型到 safe-semantic-colors.json
运行 npm run build

添加自定义 CSS :

创建 CSS 文件于 src/ (例如, components.css(中文(简体) )
添加文件名到 ADDITIONAL_CSS_FILES 内 build.js
运行 npm run build

参考资料

设计托肯斯数字 : W3C 设计托肯斯社区小组
样式词典数字 : https://amzn.github.io/style-词典/
切换器数字 : https://github.com/tokens-studio/figma-plugin 页面存档备份,存于互联网档案馆

版本与发布记录

@fiscozen/style 共发布 14 个版本，首次发布于 2024/05/08；过去 12 个月发布了 5 个版本。

版本	发布日期	距今
`0.5.0`latest	2026/09/07	2 个月前
`0.4.0`	2026/07/17	3 个月前
`0.3.0`	2026/03/02	8 个月前
`0.2.0`	2026/02/13	9 个月前
`0.1.8-next.0`next	2025/11/26	11 个月前
`0.1.7`	2025/10/08	1.1 年前

其他发布通道：alpha → 0.1.5-alpha.0，next → 0.1.8-next.0。

关于 @fiscozen/style 的常见问题

@fiscozen/style 是什么？

设计系统包提供设计令牌,CSS变量和Vue.js自定义指令

如何安装 @fiscozen/style？

在项目目录运行 npm install @fiscozen/style，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^3.4.1）、vue（^3.4.13）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@fiscozen/style 支持 TypeScript 吗？

该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fiscozen__style 是否存在。

@fiscozen/style 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。

@fiscozen/style 可以商用吗？

@fiscozen/style 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@fiscozen/style 的下载量有多少？

根据 npm 官方下载统计，@fiscozen/style 在 2026/10/15 – 2026/11/13 这 30 天内被下载 12,596 次，日均约 420 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@fiscozen/style 还在维护吗？

最新版本 0.5.0 发布于 2026/09/07（2 个月前）；至今共发布 14 个版本，其中过去 12 个月发布了 5 个；首次发布于 2024/05/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @fiscozen/style

pnpmpnpm add @fiscozen/style
yarnyarn add @fiscozen/style
bunbun add @fiscozen/style

peer 依赖tailwindcss ^3.4.1vue ^3.4.13

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

12,596

约 1.3万次日均 420 次

统计周期 2026/10/15 – 2026/11/13
数据来自 npm 官方下载统计，今天更新

最新版本0.5.0发布于 2 个月前

开源许可ISC宽松许可

包体积332 kB35 个文件 · 解压后

运行依赖0 个另有 2 个 peer 依赖

模块格式CommonJS

TypeScript未声明类型可查找 @types/fiscozen__style

发布版本14 个近 12 个月 5 个

首次发布2024/05/082 年前

元数据更新2026/09/07

每一个软件包背后，
都有分享与创造的人。