@ eos- ui/ 纸箱

Eos后面的设计符号(颜色、间隔、半径、阴影、类型、大小、运动、分层)作为CSS自定义属性、打出值和 defineTheme(),它从品牌颜色中构建一个主题,并检查每一个许诺的对比对.

npm install @eos-ui/tokens

import { defineTheme } from "@eos-ui/tokens";

const theme = defineTheme({ name: "clinic", brand: "#8a2be2", accent: "#2e7d32", radius: "round" });
theme.issues; // contrast pairs that fail (empty when sound)
theme.css(); // the theme as CSS custom properties, for the server
const remove = theme.apply(document.documentElement); // or set them in the browser; remove() takes them off

/* the default tokens as a stylesheet: the light theme, with prefers-contrast: more handled */
@import "@eos-ui/tokens/tokens.css";

/* the same, and prefers-color-scheme: dark too */
@import "@eos-ui/tokens/tokens.auto.css";

使用 tokens.auto.css 只有在您的页面地面也遵循了这个方案时:它使得每个组件在黑暗的操作系统下都变得黑暗,所以后面的硬码白页看起来会破损. tokens.css 保持轻.

theme.dtcg(); // the same tokens as W3C Design Tokens JSON

所有变量都是前缀 --e- (单位:千美元)--e-primary, (中文(简体) ), --e-space-4) (中文(简体) ). 文档麻省理工学院有执照.

投入

defineTheme() 取下方输入并发出每个符号。 任何令牌也可以在 tokens胜过一切衍生物 颜色输入需要十六进制(3、4、6或8位数字), rgb(), (中文(简体) ), color-mix(in srgb, ...), (中文(简体) ), black 或者说 white; 阿尔法被丢弃,无法读取的颜色被忽略并列在 warnings。 。 。 . name 标记主题( e)data-e-theme),以及 strict 扔出一个对比失败, 而不是在其中列出 issues。 。 。 .

derivedFrom, (中文(简体) ), constants 财务报告和审定财务报表 inputTokens 说明哪些输入驱动每个符号,哪些符号是固定的. themeInputs 列出来自 ThemeInput,用于文档和工具.

键层

一个符号被命名 <family>-<role>[-<step>]数字 : space-4, (中文(简体) ), gap-tight, (中文(简体) ), stroke-edge, (中文(简体) ), shadow-float, (中文(简体) ), depth-thin, (中文(简体) ), z-modal, (中文(简体) ), text-sm大小是它测量的东西,然后是尺寸和步骤: control-height, (中文(简体) ), icon-size-md, (中文(简体) ), panel-width-sm颜色是其作用,然后是其状态或步骤: primary, (中文(简体) ), primary-hover, (中文(简体) ), danger-soft, (中文(简体) ), surface-tint。步骤运行 sm, (中文(简体) ), md, (中文(简体) ), lg, (中文(简体) ), xl和组件 size 读取它自己名字的标志.

• 语义相间. gap-tight, (中文(简体) ), gap-snug, (中文(简体) ), gap-base, (中文(简体) ), gap-loose, (中文(简体) ), gap-section, (中文(简体) ), pad-chip, (中文(简体) ), pad-control, (中文(简体) ), pad-control-sm, (中文(简体) ), pad-cell, (中文(简体) ), pad-card, (中文(简体) ), pad-panel, (中文(简体) ), gutter-min 财务报告和审定财务报表 gutter 名称 space-N 缩放。 每一个都是指 space-N这样 spaceScale 财务报告和审定财务报表 density 通过它们到达每个组件. 捐款 拥有何时使用的表格.
• 类型. text-* 尺寸, control-height, (中文(简体) ), chip-height 和图标,检查 和相机框在雷姆. tap 保持44px的状态. leading-none, (中文(简体) ), -tight, (中文(简体) ), -snug, (中文(简体) ), -normal,以及 leading-helper 财务报告和审定财务报表 leading-chip (a) 20px线用于 text-sm 财务报告和审定财务报表 text-xs在4px网格上,是行高; tracking-label (上层标签)和 tracking-tight (播放类型和大数字)字母间隔. 每个记录的样式都是 font 快捷键 : font: var(--e-type-kicker) (单位:千美元)type-h1 改为 type-h6, (中文(简体) ), type-deck, (中文(简体) ), type-body, (中文(简体) ), type-small, (中文(简体) ), type-helper, (中文(简体) ), type-button, (中文(简体) ), type-kicker, (中文(简体) ), type-meta, (中文(简体) ), type-count, (中文(简体) ), type-numeral, (中文(简体) ), type-numeral-l) (中文(简体) ).
• 平板与互动. depth, (中文(简体) ), depth-thin 财务报告和审定财务报表 depth-bold 是升起的边缘的厚度 depth 组); slab-ink (与 border-strong)是中性的颜色. shadow-sink 是在静静的控制器内被切开的板子. shadow-ring-hover 财务报告和审定财务报表 shadow-ring-press 是徘徊的发线环 和新闻状态,绘制在 stroke-edge,与 wash-hover, (中文(简体) ), wash-press (一个相对相配的悬浮对)和 transition-state。 。 。 . stroke-underline-offset 是每个下划线文本中的空白.
• 尺寸. icon-size-sm 改为 icon-size-xl 框为 EIcon size sm 改为 xl,以及 avatar-size-sm 改为 avatar-size-lg 联合国 EAvatar。 。 。 . panel-width-sm, (中文(简体) ), -md 财务报告和审定财务报表 -lg (28,32,36rem)是对话框,抽屉,弹出器和土司的宽度; container-width-sm, (中文(简体) ), -md 财务报告和审定财务报表 -lg (40、60、80雷姆) EContainer· ; term-width 标签栏 EDescriptionList· ; list-max-height 选项列表的高度 ; shell-width 财务报告和审定财务报表 shell-rail 这是 EAppShell 柱子及其侧线; radius-round 是圆相.
• 行动. duration-fade 坐在中间 duration-tap 财务报告和审定财务报表 duration-move· ; easing-enter 财务报告和审定财务报表 easing-exit 是用来进出的 所有三个持续时间都在 prefers-reduced-motion。 。 。 .
• 层层. z-raised, (中文(简体) ), z-sticky 财务报告和审定财务报表 z-focus a. 命令一个组件内的部件; z-header 将粘贴的应用程序头放在上面; z-modal, (中文(简体) ), z-popover, (中文(简体) ), z-toast, (中文(简体) ), z-tooltip 财务报告和审定财务报表 z-skip 位于页面上方.
• 颜色. info, (中文(简体) ), info-soft, (中文(简体) ), link, (中文(简体) ), focus-field 财务报告和审定财务报表 slab-ink 是其他颜色的别名, 保留了这个主题可以将它们分开 . primary-soft 是您所在的平面品牌( 一个选中的标签, 当前导航项) . success 是它自己的颜色,所以是一个品牌 accent 永远不要让成功再次成为现实.
• 间距尺度. space-5, (中文(简体) ), space-10 财务报告和审定财务报表 space-16 是没有组件使用的、为你自己的布局而保留的大小步骤.

检查、警告和解释

theme.issues 列出每个失败的已承诺的对比对 。 双人包括: ink, (中文(简体) ), muted 财务报告和审定财务报表 primary 在徘徊的、按住的和选定的填充物上, muted 在选择的亮点 和悬浮环对面表面. color-mix() 对已知的标志进行评价 transparent 躺在对地上 无法评估的一对( 未知的符号, 另一个颜色空间) 不被默默跳过: 它被命名于 theme.warnings,其中还列出了被忽略或调整的投入(一个不是正数的比额表,a controlHeight 根据紧凑的自来水目标,a dark 无 scheme: "auto",在 tokens并用 console.warn 外部生产. theme.explain("primary") 说出一个迹象是什么决定的,哪个投入驱使它,以及你给谁的.

跟着访客

scheme: "auto" 财务报告和审定财务报表 contrast: "auto" 选择进入。 地基地标保持光线,标准主题. 每个变体都与其它主题一样产生(因此它经过对比检查并列在 issues),只有不同的符号在内部被放出 @media (prefers-color-scheme: dark), (中文(简体) ), @media (prefers-contrast: more) 和两个一起. color-scheme 实值 light 在根部和根部 dark 在黑暗媒体查询中. theme.alternates 列出他们. theme.apply() 评估查询本身,并在更改时重新油漆,直到其返回的函数被调用. themeVariant(theme, { dark, more }) 以物配主 color-scheme 使用这些设置的访客会看到一个设定标志本身的渲染器,以及 darkVariant(input) 给输入的阴暗变体.

defineTheme({ brand: "#8a2be2", scheme: "auto", contrast: "auto", dark: { surface: "#0e1117" } });

理由background, (中文(简体) ), surface, (中文(简体) ), foreground)从未被带入暗变体: give dark 那些它需要的东西.

每个主题的 CSS 也带有两个固定的覆盖. 下 prefers-reduced-motion: reduce, (中文(简体) ), duration-tap, (中文(简体) ), duration-fade 财务报告和审定财务报表 duration-move 为0.01毫米(!important所以他们击败了内含的标志 apply() 页:1 循环加载器必须关闭自己,因为0.01ms的循环会闪烁. 打印时,页面会使用屏幕显示的主题的光调色板(每个符号都会被放回深色或高相位变体),其中 ink,边框和地块黑白相间,所以一个组件不需要自己的打印颜色. apply() 在页上打印,并带有自己的主题调色板.

设计工具

theme.dtcg() 返回主题为 W3C 设计托肯斯 JSON,按类别分类color, (中文(简体) ), spacing, (中文(简体) ), layout, (中文(简体) ), radius, (中文(简体) ), shadow, (中文(简体) ), fontSize, (中文(简体) ), tracking, (中文(简体) ), leading, (中文(简体) ), size, (中文(简体) ), stroke, (中文(简体) ), depth, (中文(简体) ), duration, (中文(简体) ), easing, (中文(简体) ), zIndex, (中文(简体) ), weight, (中文(简体) ), type, (中文(简体) ), font) (中文(简体) ). 默认主题也作为 @eos-ui/tokens/tokens.dtcg.json,准备导入 Tokens Studio for Figma 或提供样式词典.

• 引用另一个符号的符号变成别名: "focus-ring": { "$value": "{color.ink}" }。 。 。 .
• 颜色、尺寸、持续时间、立方位宽放、z-索引和字体堆放 $type。一个没有 DTCG 类型的值,例如堆叠的阴影或 color-mix(),保留其 CSS 字符串,没有 $type。 。 。 .
• 每个符号的用法是它的 $description。 。 。 .