@sckyzo / cosmos-theme
Cosmos设计代币，仅CSS：一个顺风4 @theme 积木，四个主题，十二个重音，六个
字体，以及文本大小，密度和角半径设置。是什么？ @sckyzo/cosmos-react 和
@sckyzo/cosmos-charts 的样式，并且它在任何框架中都可以自己工作。
| 进口 | 目的 |
|---|---|
@sckyzo/cosmos-theme/tailwind | 顺风4 @theme 块（调色板，字体，阴影，品牌颜色） dark: 和 rtl: 变体，焦点实用程序 |
@sckyzo/cosmos-theme/vars | CSS自定义属性（bg，文本，边框，重音），主题和重音 |
@sckyzo/cosmos-theme/fonts | @fontsource 字体导入（Outfit + JetBrains Mono） |
@sckyzo/cosmos-theme/fonts/<name> | 一个字体变量 data-font： inter， plex， montserrat， open-sans |
安装
npm install @sckyzo/cosmos-theme
三个Cosmos包共享一个版本号：安装每个包的相同版本。
使用
使用Tailwind 4（推荐用于React应用程序）
进口订单事项： tailwindcss 首先是Cosmos代币，然后是var。
/* src/index.css */
@import 'tailwindcss';
@import '@sckyzo/cosmos-theme/tailwind';
@import '@sckyzo/cosmos-theme/vars';
@import '@sckyzo/cosmos-theme/fonts';
与 @sckyzo/cosmos-react，还要加上 @source 行，所以顺风扫描组件：看到 开始.
没有顺风（如Docusaurus）
@import '@sckyzo/cosmos-theme/fonts';
@import '@sckyzo/cosmos-theme/vars';
/* Then reference vars: var(--color-brand-500), var(--color-bg-base), etc. */
设置外观
主题是上一堂课 <html>;重音，字体，文字大小，密度和角
半径是 data-accent， data-font， data-text-size， data-density 和 data-radius 属性,
阅读方向为母语 dir.
<html class="sand" data-accent="teal"></html>
文档
许可证
麻省理工学院,看到 许可证.