设计令牌允许开发人员创建可维护、可扩展且易于管理的用户界面。
它们在设计师和开发人员之间创建了一种共享语言，使他们能够引用标准化值而不是硬编码特定样式。这样，开发人员无需单独更新组件中的样式，而是可以调整令牌值，然后这些值将全局应用。
在本文中，我将介绍如何利用 Chakra UI 的内置设计令牌来保持所有应用程序的一致性。
什么是设计令牌？
设计令牌是键值对，代表设计系统的视觉属性和用户界面元素，例如颜色、排版、间距等。它们在帮助您创建可扩展、连贯且一致的用户界面方面发挥着关键作用。
它们是设计系统的基础，允许开发人员和设计师高效地在组件和项目中实现一致的样式。通过将视觉属性抽象为令牌，设计令牌在设计和开发团队之间创建了一种共享语言，确保了设计的连贯性。
在 Chakra UI 中，这些令牌分为两大类
- 核心令牌：基本属性，如颜色、字体大小、间距和边框。
- 语义令牌：与主题相关联的高级令牌，可以在深色和浅色模式或其他设计上下文中轻松更新样式。
使用核心令牌实现可扩展性
Chakra UI 的核心设计令牌包括基础属性，如颜色、间距、排版、圆角、边框等，可帮助您快速设置应用程序的外观和感觉。
以下是如何使用其中一些令牌来简化开发流程
- 颜色：Chakra UI 提供了一个广泛的颜色令牌调色板，范围从
.50到.950，例如gray.50、gray.300等。
<Box bg="gray.300" p={4}>
Chakra Box with Core Color Token
</Box>-
间距和尺寸：用于外边距、内边距和其他尺寸属性的令牌可实现一致的布局尺寸。
默认情况下，Chakra 包含一个全面的数字间距刻度，其中值是按比例的。因此，1 个间距单位等于
0.25rem，这在常见浏览器中默认转换为4px。使用 4、8、12 等令牌可确保可预测的布局行为。
<Box padding={4} margin={2}>
Consistent Padding and Margin
</Box>这意味着内边距为 16px，外边距为 8px。
- 排版：Chakra 提供字体大小和字重令牌，因此您的应用程序的文本元素可以保持统一的外观。通过为字体大小指定
lg、md或xl等令牌，可以减少文本样式不一致的可能性。
<Text fontSize="lg" fontWeight="bold">
Styled with Font Tokens
</Text>自定义核心令牌
要开始自定义令牌，您需要使用 Chakra 的 defineConfig 函数扩展 Chakra 主题。此函数允许您使用自己的值覆盖 Chakra 的默认令牌。
让我们看看如何通过创建自定义 theme.ts 文件来开始。Chakra UI 中的设计令牌包含以下属性
- value: 令牌的值。这可以是任何有效的 CSS 值。
- description: 令牌用途的可选描述。
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
theme: {
tokens: {
colors: {
brand: {
50: { value: "#e6f2ff" },
100: { value: "#e6f2ff" },
200: { value: "#bfdeff" },
300: { value: "#99caff" },
// ...
950: { value: "#001a33" },
},
},
},
},
})
export const system = createSystem(defaultConfig, customConfig)现在，您可以在需要的地方使用您的自定义令牌，例如
<Box bg="brand.100">This Box uses a custom token</Box>使用语义令牌进行上下文样式设置
语义令牌允许基于上下文的样式设置，并使您能够根据主题或模式（例如，亮色或暗色模式）更改应用程序的外观。
<Button color="danger">Click me</Button>在大多数情况下，语义令牌的值引用现有令牌。
要引用语义令牌中的值，请使用令牌引用 {} 语法。
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const config = defineConfig({
theme: {
tokens: {
colors: {
red: { value: "#EE0F0F" },
},
},
semanticTokens: {
colors: {
danger: { value: "{colors.red}" },
},
},
},
})
export default createSystem(defaultConfig, config)自定义语义令牌
您可以通过扩展 Chakra 的主题来创建自己的语义令牌。这种灵活性使您能够根据品牌的独特配色方案自定义语义令牌。
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
theme: {
semanticTokens: {
colors: {
"checkbox-border": {
value: { _light: "gray.200", _dark: "gray.800" },
},
},
},
},
})
export const system = createSystem(defaultConfig, customConfig)使用设计令牌促进协作
设计令牌促进了统一的样式方法，这可以极大地改善开发人员和设计师之间的协作。以下是 Chakra UI 中的设计令牌如何提供帮助
-
创建共享视觉语言：设计令牌为开发人员和设计师提供了一套标准值，确保每个人都使用相同的调色板、间距和排版值。
-
高效管理全局设计更改：由于设计令牌是集中管理的，更改令牌值会更新使用该令牌的所有组件。例如，如果您将
primary.500令牌调整为新的色调，则使用此令牌的每个组件都会立即反映此更改。 -
增强可重用性和可维护性：通过 Chakra 的令牌，组件被设计为可重用，从而增强了代码的可扩展性。当您需要在多个组件中调整样式时，只需更新令牌，而无需单独修改每个组件。
结论
无论您是实现标准样式的核心令牌，还是使用语义令牌适应主题更改，Chakra UI 的设计令牌都能使您的界面简洁、高效且更易于维护。
通过使用一组共享值，您不仅可以加快开发工作流程，还可以确保您的设计保持一致。在您的下一个项目中尝试一下，亲身体验设计令牌如何简化您的工作并改善团队协作。