@ atlasauth/ 设计
Atlas设计系统:关于Atlas如何登录的一个结构化说明 表面外观,由主机页面和每个Atlas SDK组件共享.
npm install @atlasauth/design
你很少直接需要这个包.. @atlasauth/react, (中文(简体) ), @atlasauth/vue, (中文(简体) ),
@atlasauth/svelte, (中文(简体) ), @atlasauth/angular 财务报告和审定财务报表 @atlasauth/embed 用它来应用
您的仪表板设计和 appearance.preset 编号 : appearance.design 你通过
在代码。 需要类型、预设列表或编译器本身时使用
(例如,用同样的标注为主题) --atlas-* 变量).
import { resolveDesign, compileDesignCss, designDataAttributes, PRESET_IDS } from '@atlasauth/design';
const design = resolveDesign({ preset: 'midnight', palette: { primary: '#7c3aed' } });
const css = compileDesignCss(design, { scope: '.my-auth' });
const attrs = designDataAttributes(design); // { 'data-atlas-card': 'solid', ... }
- 只有设置,没有CSS. 每个字段都有一个封闭的enum,一个有边号,一个
#RRGGBB颜色或目录编号。 无效的输入被拒绝(或,在SDKs, )——它永远无法到达样式表. - 预设 :
minimal, (中文(简体) ),atlas, (中文(简体) ),glass, (中文(简体) ),midnight, (中文(简体) ),editorial, (中文(简体) ),terminal, (中文(简体) ),sunrise, (中文(简体) ),forest, (中文(简体) ),grape, (中文(简体) ),slate, (中文(简体) ),split-photo, (中文(简体) ),bold。 。 。 . - 变量 :
DESIGN_CSS_VARIABLES列表中--atlas-*自定义属性 编译器发出其类型和描述. - 字体 :
FONT_CATALOG是编程字体列表。 Web 字体自发托管 by Atlas;访客浏览器从不接触第三方字体主机. - 对比度 :
contrastRatio, (中文(简体) ),readableOn, (中文(简体) ),readableInk财务报告和审定财务报表designWarnings(WCAG AA检查解决的设计).
二入门. @atlasauth/design 包括zod计划
和仪表板验证器validateDesign, (中文(简体) ), applyDesignPatch) (中文(简体) ).
@atlasauth/design/runtime 是无 zod 子集 渲染器需要的预设,
resolveDesign编号 :layerDesign,编译器、数据属性、字体、对比
和 SDK 组成帮助者——有接受的手写输入守护器
这正是计划所接受的 在捆绑大小很重要的地方使用它.
运行时间依赖 : zod (仅限完整条目). 工作于浏览器,节点,德诺,邦和边缘跑道.
麻省理工学院有执照.