@dloizides/ 设计指针
框架不可知性 设计脚本源 用于 dloizides.com 组合——跨高架 统一字 (任务#78). 每个应用程序一个打入的符号集,种子 每个应用程序当前中的字节换字节 数值,在 三个表格来自一个来源。 。 。 .
#1规则——保留行为取出,不是重新设计. 每一个预设的镜像 应用程序 已存在的外观。 采用此软件包更改 无 视觉 运行时间测试证实 RN 输出深等同应用程序当前
DEFAULT_THEME_CONFIG和AML CSS复制ui.css是因为:root逐字记录.
只值—— 无组件。 (共享反应组件位于 @dloizides/ui-layout, (中文(简体) ),
ui-forms, (中文(简体) ), ui-feedback, (中文(简体) ), ui-icons, (中文(简体) ), ui-tables. ) (中文(简体) )
四个输出表
一个 DesignTokens 每个应用程序的对象输入四个纯发射器:
| 表单 | 发送器 | 消费者堆栈 | 产出 |
|---|---|---|---|
| (a) CSS定制属性 | toCssVars(tokens, names, opts?) | Stack-A 香草-JS(AML控制台) | (单位:千美元) :root { --…: …; } 字符串( + 可选的暗模式块) |
| (b) RN-web主题对象 | toRnTheme(tokens) | RN-web (erevna, katalogos) (英语) | (单位:千美元) TenantThemeConfig- 相容对象 |
| (c) 预设尾风 | toTailwindPreset(tokens) | DOM 反应( 同步主题 Studio) | { theme: { extend: { colors, borderRadius, boxShadow, fontFamily } } } |
| (d) 共享UI工具包主题 | toUiTheme(tokens, mode?) | 网上的RN网络 @dloizides/ui-* 工具包(伊克诺斯语、克菲语) | (单位:千美元) UiTheme 页:1 ui-feedback是因为 UiProvider |
import {
AML_TOKENS, EREVNA_TOKENS, KATALOGOS_TOKENS, PRESETS,
toCssVars, toRnTheme, toTailwindPreset, toUiTheme,
AML_CSS_VAR_NAMES, DEFAULT_CSS_VAR_NAMES,
} from '@dloizides/design-tokens';
// (a) AML console — reproduces wwwroot/shared/ui.css :root exactly
const css = toCssVars(AML_TOKENS, AML_CSS_VAR_NAMES);
// (b) RN-web — drop in as the tenant-theme fallback (deep-equals the current default)
const rnDefault = toRnTheme(EREVNA_TOKENS);
// (c) DOM-React ThemeStudio — spread into tailwind.config.presets
const tw = toTailwindPreset(KATALOGOS_TOKENS);
// (d) Shared UI kit — hand straight to <UiProvider theme={…}>
const uiTheme = toUiTheme(MY_TOKENS);
toUiTheme 是LOSSLES 载体
toUiTheme 之所以存在,是因为应用程序的天真投影是手写的——
value => ({ '100': v, '500': v, '700': v }) —— 缩放到一个值, 无声
放弃更深的品牌步骤和每个状态背景 一个供货商这样喂养
无法复制它创建的调色板, 也就是停止共享组件
(单位:千美元)StatCard, (中文(简体) ), ThemedTextInput, (中文(简体) ), Field从在消费的应用软件中渲染出品牌.
每个符牌都落在一个可地址的槽里, 所以一个应用程序可以将整个调色板放回 现场提供者,而不是保留静态平行副本:
| 脚本 | 槽 |
|---|---|
primary 编号 : secondary 编号 : accent | palette.primary 编号 : .secondary 编号 : .accent 时间 UI_MAIN_STEP |
onBrand | palette.onBrand |
light.surfaceMuted (或 dark.*单位 mode(中文(简体) ) | palette.surfaceMuted |
semantic.success . | semantic.success 时间 UI_MAIN_STEP |
semantic.successBg . | semantic.success 时间 UI_TINT_STEP |
这个 UiTheme 形状被宣告 结构 软件包中( 如 RnThemeConfig 声明
TenantThemeConfig),所以零依赖性/零对等保证持有:符号源
从不依赖它提供的装备.
每个应用程序预设
每个预设都来自该应用当前真实的源头:
| 预设 | 种子从 | 页:1 |
|---|---|---|
EREVNA_TOKENS | erevna-web/src/theme/presets/default.ts + 键 theme/utils/palette.ts | 小学 #005f73中学 #94d2bd重音 #008d5c; 完整的光+暗模式 |
KATALOGOS_TOKENS | katalogos-web/src/theme/presets/default.ts | 目前 不变 以列芙娜为首;彼此分离,以便彼此分歧 |
AML_TOKENS | PROOViD/AMLService/.../wwwroot/shared/ui.css :root | 品牌 #4f46e5; 暗的app- shell + 轻工作空间 + 判决调色板 + radi/shadows/fonts |
INTERVIEWPREP_TOKENS | InterviewPrep/sites/portal/theme.css (暗处) :root + 键 [data-theme='light'](中文(简体) ) | 发射 toCssVars(INTERVIEWPREP_TOKENS, INTERVIEWPREP_CSS_VAR_NAMES, { lightSelector: ":root[data-theme='light']" }) (1.12.0);每个模式 brandFill编号 :dangerFill/... 携带站点颜色 |
RN 预设携带 没有 typography编号 :radii编号 :shadows编号 :extensions ——RN主题没有
用于今天的集成代号,所以它们被省略(无出-零变化). 反洗钱
预设搭载了更丰富的超集(暗相的应用壳,墨水尺度,判决调色板,光线,阴影,
字体),输入其 extensions 组合.
FINREG 模块颜色FINREG_MODULE_COLORS页:1
FINREG是一种多单元产品(支付/会计/客户关系管理)。 临时 EDA 数据 标志绑定
每个模块的颜色——三个轨道 为: 三个模块——颜色读作模块
身份而不是一个应用的品牌 primary因此,这些标志坐 旁边 页:1
每个应用程序预设, 不在其中 :
| 模块 | base (填补) | 红色 | onWhite (A文本/icon) (中文(简体) ) | 红色 |
|---|---|---|---|---|
| 付款(氰) | #4FD8F0 | 1.69:1 | #0C7D91 | 4.82:1 ✓ |
| 会计(货币) | #E85FBF | 3.08:1 ✗ | #D11E9B | 4.81:1 * * |
| CRM( 紫外线) | #7B8FF7 | 2.95:1 ✗ | #4763F4 | 4.82:1 ✓ |
这个 base 斧头是一个 决定 设计输入(标志),转写为逐字记录. 他们很轻
填充 – 没有清除 WCAG AA 4.5: 1 白文本层 – 所以任何画出模块颜色的东西
作为 文字或白色上的图标 用途 onWhite黑暗的同一个人 这个 onWhite
得出了数值(最浅的阴影仍然清晰出AA, 略微超过
两个半个都由 finregModules.test.ts 比率,因此
aA下面的漂移失败了 消费者读了信物
不复宣说正文no-raw-color-literal) (中文(简体) ).
运动符号( A)DEFAULT_MOTION页:1
每个传送门都统一运动,所以——与颜色不同——有一个发送的默认
每个预设一个以上. DEFAULT_MOTION 携带 durations (数量)和 easings数字 :
| 会期 | 分钟 | 缓解 | 控制点 | 密码 |
|---|---|---|---|---|
instant | 0 个 | standard | [0.2,0,0,1] | cubic-bezier(0.2,0,0,1) |
fast | 140国 | decelerate | [0,0,0,1] | cubic-bezier(0,0,0,1) |
base | 200个 | accelerate | [0.3,0,1,1] | cubic-bezier(0.3,0,1,1) |
slow | 三百块 |
instant (0)是减动倒塌目标. 每一次放松都带 两者 网络 css
cubic-bezier(...) 字符串和 bezier [x1,y1,x2,y2] 控制点,所以 @dloizides/ui-motion
能够构建匹配的 RN Easing.bezier(...) 和网络+同一曲线上的本地动画. motion 实值
选项字段 DesignTokens (一个预设的Maybe 覆盖它),所以现有的预设/emiters是
字节相同.
符号形状( 与 TenantThemeConfig(中文(简体) )
这个 核心项目 故意镜像字段 @dloizides/tenant-theme-web是因为 TenantThemeConfig
(单位:千美元)primary, (中文(简体) ), secondary, (中文(简体) ), accent, (中文(简体) ), semantic, (中文(简体) ), light, (中文(简体) ), dark, (中文(简体) ), typography, (中文(简体) ), branding这样
租户主题在预设的顶端 —— 租户blob 和预设的演讲
相同的字段名称。 字段核心无法表达( 暗的应用软件壳、 墨水尺度、 制裁)
判决三合一) extensions 组并记录为 堆叠 A 超级集, (中文(简体) ),
不属于 TenantThemeConfig 合同.
3个加法(1.2.0)是核心而不是扩展,因为任何应用软件都需要它们 状态徽章或已填入的品牌按钮——不是一叠:
| 外地 | 为什么它需要自己的空档 |
|---|---|
light.surfaceMuted 编号 : dark.surfaceMuted | 内置表面(表头行、芯片、井) 退缩· ; surface 财务报告和审定财务报表 surfaceElevated 两个电梯。 也没有替代品. |
onBrand | 展望一个 primary 填满 对比合伙人 primary所以它就坐在旁边 而不是模式区 默认为白色; a 苍白 初等要设. |
semantic.successBg 编号 : warningBg 编号 : errorBg 编号 : infoBg | 一种地位是人为对比而挑选的,不能从其基础中产生,因此不能计算,必须携带. |
所有可选的, 和每个发射器发射它们 仅限 当一个预设宣布它们的时候, 预设是 前 1.2.0 生产字节相同的输出.
横店命名合同(# 78b)
不同的堆栈使用不同的CSS可变名称来换取同一种符号. toCssVars 使用一个
名称映射 (单位:千美元)CssVarNames表示哪个 CSS 可变每个符号字段为; 映射出字段
改为 undefined 被跳过。 两艘地图船:
DEFAULT_CSS_VAR_NAMES克巴克(克巴克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克--primary, (中文(简体) ),--background, (中文(简体) ),--radius,(......), 有个暗地里的街区 为新鲜的消费者接受这些.AML_CSS_VAR_NAMES——AML控制台存在ui.css名字,所以没有什么变化.
AML 名称映射表( 核心 ) ui.css 变量)
| 脚本字段 | AML CSS var (英语) | 说明 |
|---|---|---|
primary | --brand | |
secondary, (中文(简体) ), accent | (晕倒) | AML为单品牌; ui.css 从来没有读过 |
semantic.success/warning/error | (通过) --ok编号 :--warn编号 :--bad(中文(简体) ) | 排放量 verdict 扩展 |
semantic.info | (晕倒) | 无 AML 变量 |
light.background | --bg | |
light.surface | --surface | |
light.surfaceElevated | (通过) --surface-2(中文(简体) ) | 从 workspace.surfaceAlt |
light.text | (通过) --ink(中文(简体) ) | 从 ink.base |
light.textSecondary | (通过) --ink-soft(中文(简体) ) | 从 ink.soft |
light.border | --line | |
light.divider | (晕倒) | AML 重用 --line |
dark.* | (晕倒) | AML 没有光/暗切换;它的暗壳是 shell 扩展 :root |
radii.{xs,sm,md,lg,pill} | --r-xs, (中文(简体) ), --r-sm, (中文(简体) ), --r, (中文(简体) ), --r-lg, (中文(简体) ), --r-pill | |
shadows.{sm,md,pop} | --sh-1, (中文(简体) ), --sh-2, (中文(简体) ), --sh-pop | |
typography.fontFamily 编号 : monoFamily | --font 编号 : --mono | |
extensions.shell.* | --shell, (中文(简体) ), --shell-2, (中文(简体) ), --shell-line, (中文(简体) ), --on-shell, (中文(简体) ), --on-shell-dim | |
extensions.brand.* | --brand-press, (中文(简体) ), --brand-soft, (中文(简体) ), --brand-ring | |
extensions.ink.* | --ink, (中文(简体) ), --ink-soft, (中文(简体) ), --ink-faint, (中文(简体) ), --ink-2 | |
extensions.workspace.* | --surface-2, (中文(简体) ), --line-strong | |
extensions.verdict.* | --ok*, (中文(简体) ), --warn*, (中文(简体) ), --bad* (基准/软/链接) |
公开的命名决定(在更广泛通过之前需要人类呼吁)
保守地解决了这些 以保证零变化, 但人类应该确认 拟长期语义:
- 反洗钱
secondary编号 :accent——AML拥有单一品牌. 预设的镜像--brand都这样 核心形状是完整的,但是ui.css两者皆无。 如果AML获得真正的二级 品牌,设置在这里. - 反洗钱
dark=应用壳. AML有一个暗壳 在一个光的工作空间, 没有 (单位:千美元) 轻/暗 模式切换预设种子dark从外壳中取出,使外形完整 aML 名称地图省略dark*故不发出阴道shell扩展:root) (中文(简体) ). 如果引入了真实的AML 暗模式,则需要重新审视. semantic.info- AML没有info颜色; 镜像--brand。在依赖之前确认info在 AML 中.- 核
radii编号 :shadows。 。 。 . RN应用程序今天没有集中半径/阴影符号,所以RN 预设省略。 如果RN稍后采用半径/阴影尺度,则决定是否应当共享 AML 的值或定义自己的值.
采用(单独的任务——本套装舰只价值)
这个软件包是 没有 修改任何消耗性应用。 收养情况另行跟踪:
- AML: 替换手写
:root内ui.css与toCssVars(AML_TOKENS, AML_CSS_VAR_NAMES)输出. - erevna/katalogos:进口
toRnTheme(EREVNA_TOKENS)作为defaultThemeConfig倒计时. - 主题Studio: 传播
toTailwindPreset(...)输入tailwind.config是因为presets。 。 。 .
脚本
npm run build (tsup → CJS+ESM+d.ts), (中文(简体) ), npm test (比例,100%), npm run lint, (中文(简体) ),
npm run typecheck。通过 ./publish.ps1 patch|minor|major。 。 。 .