@flipdish/ui-tokens
Flipdish设计系统——品牌颜色,类型尺度,间距和阴影——的设计代号被作为单一的Tailwind CSS v4被运出 @theme 样式表,两者 网络 (台风)和 原生反应 (单位:千美元)原生窗口 v5)消耗.
内部设计体系,公开发布. 这些符号编码了Flipdish的品牌. 它们在公共npm注册,这样它们就可以通过Flipdish微前端和app共享,而不是作为通用的代号集.
Flipdish设计系统的一部分:
| 软件包 | 目的 |
|---|---|
@flipdish/ui-tokens | 设计符 (本套件) |
@flipdish/ui-icons | 图标集 |
@flipdish/ui-library | 构成部分 |
@flipdish/ui-connected | API 连接组件 |
安装
pnpm add @flipdish/ui-tokens
没有运行时间的依赖性,也没有同行的依赖性——包船一个CSS文件.
使用量
Web and React Industrial 导入相同的文件 。 这个 @theme block 充斥 Tailwind 设计系统 带有符号词汇,所以语义学的功能如 bg-primary, (中文(简体) ), text-secondary,以及 border-primary 通过 CSS 自定义属性解决.
网络 (Tailwind v4)
@import 您 Tailwind 条目样式表中的 CSS :
@import "@flipdish/ui-tokens/css" layer(theme); /* tokens + [data-theme="dark"] */
原生反应( NativeWind v5)
添加相同的导入到 global.css 原生Wind编译. 本地窗口 v5's react-native-css 读取 Tailwind v4 @theme 块直接,所以没有JS主题对象或 tailwind.config.js 需要预设。 见 反应原生安装指南 全文 global.css 形状和 lightningcss 针它需要.
/* global.css, alongside the other imports from the installation guide */
@import "@flipdish/ui-tokens/css" layer(theme);
Flipdish品牌坡道的作者在 六进制 因此,无论是尾风和 react-native-css 完全一样.
语义符号
托肯分层:主题变量 原始人 (raw 彩色坡道,天平)和 a 语义 制图(--color-bg-*, (中文(简体) ), --color-fg-*, (中文(简体) ), --color-text-*, (中文(简体) ), --color-border-*, (中文(简体) ), --color-focus-ring之后的 无标题 UI v8 词汇表, 因此无标题的 UI 组件会从框中渲染出 .
总是消耗 语义 层 —— 保持主题意识的是:
// ✓ Correct — semantic token, theme-aware
<div className="bg-primary text-secondary border-primary" />
// ✗ Wrong — primitive token, breaks theme switching
<div className="bg-neutral-50 text-neutral-900" />
// ✗ Wrong — raw CSS variable reference
<div style={{ background: "var(--color-bg-primary)" }} />
同样的后缀意味着每个财产的不同事物: bg-primary 是页面背景,而 text-primary 是近黑体文字.
主题切换
光是默认值. 在网络上,暗模式通过一个 [data-theme="dark"] 在挂载节点(或任何祖先)上的属性——不需要 JavaScript 运行时间主题切换代码 :
<!-- Light (default) -->
<div id="app">…</div>
<!-- Dark -->
<div id="app" data-theme="dark">…</div>
在原生反应上,没有级联的DOM属性,所以 [data-theme="dark"] block 不应用,语义符号在两个设备方案中都保留其光值。 本地风云 dark: 变体仍然遵循设备颜色方案.
更改日志
见 变动情况 为释放历史.
捐款
这个包裹住在 flipdish-design-system 单相机 贡献者文件——如何改变一种象征、原始/语义结构,以及建筑时间的检查——与那里的来源共存.