项目状态

Cosmos 是一个遗留项目，现在已被弃用。建议使用 Quantum Design System 替代。

感谢您的理解。

---

Cosmos

专为 Auth0 产品设计的系统。

什么是设计系统？

"一组定义产品总体设计的共享和集成的原则和模式。" —— Karri Saarinen @ Airbnb

Cosmos 的目标是帮助 Auth0 的设计师和开发者更快更好地交付工作。它为团队提供了一种共同的语言，并鼓励直接采用符合设计指南的组件来减少工作量。

我们正在构建路线图和初始组件库，以估算 v1 发布日期。我们正处于与选定团队的活跃开发和测试阶段，因此组件 API 可能会频繁变更。但您现在就可以试用 alpha 版！您的反馈将帮助我们塑造 Cosmos。

查看文档：https://auth0-cosmos.now.sh/

---

快捷链接：

• 开始使用
• 如何使用 Cosmos
• 组件概览
• 游乐场
• 沙箱 - 故事书
• 贡献指南

---

安装

请确保已安装 Yarn。

要在 React 应用程序中添加 Cosmos，运行：

$ yarn add @auth0/cosmos

如果您偏好 npm，可以运行以下命令：

$ npm install --save @auth0/cosmos

仅此而已，无需其他配置更改！

---

在应用中使用 Cosmos 组件

1. Cosmos 提供了 CssBaseline 组件，用于设置一些基本样式（字体等）。它还修复了浏览器和设备之间的某些不一致问题，同时对常见 HTML 元素提供了略微更为主观的重置。在应用程序顶部导入并渲染 CssBaseline 组件一次。

import { CssBaseline } from '@auth0/cosmos';

const App = () => {
  return (
    <>
      <CssBaseline />
      {/* 您的应用程序其余部分 */}
    </>
  )
};

2. 将它们与您的 React 组件一起包含和渲染：

import { Button } from '@auth0/cosmos'

const Actions = () => (
  <div>
    <h1>你好世界！</h1>
    <Button size="default" appearance="cta" onClick>
      Cosmos 文档
    </Button>
  </div>
)

要了解有关组件及其提供的属性的更多信息，请查阅 Cosmos 文档。从侧边栏选择一个组件，找到示例和配置选项。

---

贡献

还有很多内容需要编写，我们在文档中维护：贡献指南

---

提交反馈

可以在我们的 GitHub 页面 或 Slack（内部）上创建问题或功能请求。您可以使用 游乐场 测试和分享代码，报告错误并寻求反馈。

致谢

感谢 Chromatic 提供的视觉测试平台，帮助我们审查 UI 变化并捕捉视觉回归。

感谢 BrowserStack 提供的基础设施，使我们能够在真实浏览器中进行测试。

感谢 Circle CI 提供持续集成所需的基础设施。