@exsto / ds
ydynamix设计系统：React组件和设计令牌。
安装
npm install @exsto/ds
React 19是一个对等依赖。
使用
import { Button, Card, CardContent } from '@exsto/ds';
import '@exsto/ds/styles.css';
export const Example = () => (
<Card>
<CardContent>
<Button>Save</Button>
</CardContent>
</Card>
);
这就是整个过程。 你不需要顺风。 styles.css 船只
预编译：它携带设计令牌以及组件中的每个实用程序
自己使用。
如果你使用顺风
styles.css 是编译后的输出，所以它只包含组件的实用程序
自己使用。写 bg-card 或者 text-muted-foreground 在你的 自己的
标记，也导入令牌层，并让您的Tailwind构建生成
词汇:
@import "@exsto/ds/styles.css";
@import "tailwindcss";
@import "@exsto/ds/theme.css";
顺序很重要，而且 styles.css 必须是第一位的。 这是一个编译过的
顺风建造，所以它的公用设施和你的在同一个级联层，在
同样的特殊性，后面的规则胜出。在顺风进入后导入它
其无条件的 .hidden 打败你的 .md:table-cell：响应式列
消失，宽度缩小。库CSS先于应用CSS，就像任何CSS依赖项一样。
不需要其他任何东西。 theme.css 还将您的构建指向组件。
已发布代码，因此您的构建也会发出它们的类，每个响应式变体
在自己的基地之后。这就是保持设计系统类(如
侧边栏的 hidden md:block 工作时，您自己的标记使用 hidden :
一个构建决定了双方的顺序。早期的版本需要一个
@source 在应用程序中得到这个，这个行可以被删除。
theme.css 是故意反编译的。它携带着代币 .dark 范围,
品牌层(Inter； text-2xs)及 @theme 测绘顺风需要
把它们变成公用事业。不要把这个块复制到你的应用中，否则它会漂移
从设计系统。
没有它，一些令牌实用程序仍然可以工作，因为我们的组件碰巧使用
他们，但覆盖率是偶然的：大约一半 bg-* 几乎每一个
border-* 不在。
黑暗的模式
把 dark 在任何祖先身上。令牌的作用域是按类重新定义的，而不是按媒体
查询，因此子树可以在浅色页面中显示为深色。
<div className="dark">
<Button>Dark</Button>
</div>
入口点
| 进口 | 它是什么？ |
|---|---|
@exsto/ds | 反应组件 |
@exsto/ds/styles.css | 预编译的标记和组件样式 |
@exsto/ds/theme.css | 未编译代币，品牌层和顺风 @theme 映射 |
状态
发布候选版本(0.0.1-rc.N）. API还不稳定；处理次要版本
直到 0.1.0.
0.0.1-rc.5 删除了 @exsto/ds/elements 入口点( <edx-*> 网络
组件)以及Angular的支持。设计系统仅支持React。呆在
0.0.1-rc.4 如果你依赖于元素。
执照
apache - 2.0。看到 许可证.