@ brandsync/ wc (英语)
Brandsync的设计系统组件作为框架不可知的Web组件——真实自成一体
自定义元素通过React, Angular, Blazor, 或平面 HTML 消耗的方式相同. 与
斯坦西尔,完全从 brandsync-tokens CSS 自定义属性.
见 CONVENTIONS.md 用于定制表面的每个组件如下(CSS自定义属性,
阴影部件、插槽)和 docs/blazor-interop/ 一个工作过的布拉佐尔/穆德布拉佐尔消费的例子.
开始
npm install
npm run build # compiles all components, generates React/Angular wrapper packages
npm test # runs the component test suite
npm run storybook # interactive component catalog at http://localhost:6006
类型
brandsync-tokens 指定机器人( R)--bs-typography-font-family-*每一个组件的阴影
样式继承 font-family 从文档根-但 装入实际的机器人字体文件
消费应用的工作,在全局范围内已经使用的同一公约 eg-brandsync (a) 谷歌字体
<link>,或 next/font/google 在 Next.js 应用程序中。 这个图书馆的船型 不是字体文件.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap">
这些是Google字体实际服务的静态机器人重量(100/300/400/500/700/900).
--bs-font-weight-semibold 600, 而静态样式表没有600, 所以半粗体文本是
由500或700合成而来. 装入可变字体( E)next/font/google 与机器人,或
@fontsource-variable/roboto当半粗体必须是真正的600. 如果机器人没上膛,
组件仍然有效——文本只是回到了浏览器默认的 sans-serif.
使用量
<script type="module" src="https://unpkg.com/@brandsync/wc"></script>
<bs-button variant="primary">Book room</bs-button>
或者来自 node_modules,每个组件:
import '@brandsync/wc/dist/components/bs-button.js';
反应和Angular 获得自动生成的包装包(@stencil/react-output-target 编号 :
@stencil/angular-output-target)来自同一来源——见: stencil.config.ts。 。 。 .
设计符号——需要,而不是可选
每个组件的阴影DOM CSS是完全针对 --bs-* 自定义属性
(单位:千美元)--bs-input-bg-default, (中文(简体) ), --bs-composer-button-size, (中文(简体) ), --bs-spacing-150(中文(简体) ). 这个软件包是
不在任何地方注入这些变量 - 仅此而已 消耗量 他们。 如果耗用软件没有
定义它们,每 var(--bs-something) (这些宣言中没有一个有退步)
其CSS-无效计算值回落: border: none, (中文(简体) ), background: transparent, (中文(简体) ),
width编号 :height编号 :padding编号 :gap: 0,浏览器默认 font-size。该部分仍然用于
dOM - 它只是静静地崩溃( 没有可见的边框/框, 按钮缩到一无所有, 文本)
字段推到自己的行上),没有控制台出错或例外指向缺失
符号,这使得它成为了混淆的第一个调试错误.
修补: 加载此套件的符号样式表( 从 brandsync-tokens曾经,
在全球,在消费应用中 -- 在此之前 任意 bs-* 元素使 :
/* e.g. src/styles.css / global.css / angular.json "styles" array */
@import '@brandsync/wc/dist/brandsync-wc/brandsync-wc.css';
<!-- plain HTML/CDN consumption -->
<link rel="stylesheet" href="https://unpkg.com/@brandsync/wc/dist/brandsync-wc/brandsync-wc.css">
这同样适用于 HTML/CDN 路径、 npm+bundler 路径和 React/Angular 包装器
软件包——没有自动输入。 如果一个消费的应用已经有自己的不同名称
设计标志(如:. --surface-base 改为 --bs-color-surface-base),该应用级符号
文件确实 没有 即使数值在概念上相符,也满足了这一要求 -- -- 阴影DOM
CSS 只解决 --bs-*- 前缀名称, 所以上面的销售商样式表必须加载
随便.
已知无害的噪音:销售商 brandsync-wc.css 目前含有少数畸形
上游的象征性声明 brandsync-tokens 导出步骤(例如).
--bs-5-brand-colors-jade-brand-700: {Brand Colors.teal.700};),一些工具(例如:.
Angular的CSS预算/林特阶)警告. 这些在供应商的依赖中存在,而不是
由这个软件包引入,并且不要影响这个库实际使用的任何符号.
浏览器支持、 RTL 和强制颜色
- 浏览器 : 常绿衣/外衣,Firefox和Safari(后两个主要版本). 构成部分
依赖阴影 DOM、 自定义元素和
ElementInternals(形式联系). 只有铬是 今天在中情局执行; Firefox/Safari 预计将工作,但尚未得到核查 自动套房. - RTL: (英语) 布局使用 CSS 逻辑属性。 例外:
bs-slider财务报告和审定财务报表bs-progress-linear保持物理几何(由值驱动),并居中覆盖使用left: 50%+ 键translateX。 。 。 . - 视窗高对比度( E)
forced-colors: 按钮、复选框、开关、收音机、输入、菜单、卡片和 对话有明确的规则;其他组成部分没有审计. - 安全部门改革: 未核实。 Stencil可以水合,但SSR集成(Next.js, Angular Universal)是没有的 测试或记录至今.