Docker 扩展的 UI 样式概述

我们的设计系统是一套不断发展的规范，旨在确保 Docker 产品的视觉一致性，并满足 AA 级可访问性标准。我们已向扩展作者开放了其中的一部分，记录了基本样式（颜色、排版）和组件。请参阅： Docker 扩展样式指南。

我们要求进行扩展以在一定程度上匹配更广泛的 Docker 桌面 UI，并保留在未来使其更加严格的权利。

要开始使用您的 UI，请按照以下步骤操作。

第一步：选择您的框架

Docker Desktop的UI是用React和 MUI编写的（具体使用Material UI）。这是唯一官方支持的用于构建扩展的框架，也是我们的init命令自动为您配置的框架。使用它给作者带来了显着的好处：

  • 您可以使用我们的 Material UI 主题自动复制 Docker Desktop 的外观和感觉。
  • 将来，我们将发布专门针对此组合的实用程序和组件（例如自定义 MUI 组件或用于与 Docker 交互的 React hooks）。

阅读我们的 MUI 最佳实践指南，了解将 MUI 与 Docker Desktop 结合使用的面向未来的方法。

您可能更喜欢使用另一个框架，也许是因为您或您的团队更熟悉它，或者因为您有想要重用的现有资产。这是可能的，但强烈建议不要这么做。代表着：

  • 您需要手动复制 Docker Desktop 的外观。这需要付出很大的努力，如果您与我们的主题不够接近，用户会发现您的扩展不和谐，我们可能会要求您在审核过程中进行更改。
  • 您将承担更高的维护负担。每当 Docker Desktop 的主题发生更改（任何版本中都可能发生）时，您都需要手动更改扩展以匹配它。
  • 如果您的扩展是开源的，故意避免通用约定将使社区更难为其做出贡献。

第二步：遵循以下建议

遵循我们的 MUI 最佳实践（如果适用）

请参阅我们的 MUI 最佳实践文章。

仅使用我们调色板中的颜色

除了一些小例外，例如显示您的徽标，您应该只使用我们调色板中的颜色。这些可以在我们的样式指南文档中找到 ，并且很快也将在我们的 MUI 主题中并通过 CSS 变量提供。

在明/暗模式下使用对应颜色

我们选择的颜色是为了使调色板的每个变体中的对应颜色都应具有相同的基本特征。在任何使用red-300浅色模式的地方，也应该使用red-300深色模式。

下一步是什么？