令牌

使用令牌管理应用程序中的设计决策。

概述

设计令牌是一种独立于平台的管理应用程序或网站中设计决策的方式。它是一系列描述任何基本/原子视觉样式的属性集合。每个属性都是一个键值对。

Chakra 中的设计令牌主要受到 W3C 令牌格式的影响。

设计令牌包含以下属性

value: 令牌的值。这可以是任何有效的 CSS 值。
description: 令牌用途的可选描述。

定义令牌

令牌在您的系统配置中定义于 theme 键下。

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        primary: { value: "#0FEE0F" },
        secondary: { value: "#EE0F0F" },
      },
      fonts: {
        body: { value: "system-ui, sans-serif" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

警告

令牌值需要嵌套在一个带有 value 键的对象中。这样做是为了将来允许添加 description 等更多属性。

使用令牌

定义令牌后，我们建议使用 Chakra CLI 为您的令牌生成主题类型定义。

npx @chakra-ui/cli typegen ./src/theme.ts

这将在您的编辑器中为您的令牌提供自动补全功能。

<Box color="primary" fontFamily="body">
  Hello World
</Box>

令牌引用语法

Chakra UI 允许您在诸如 border、padding 和 box-shadow 等 CSS 属性的复合值中引用设计令牌。
这通过令牌引用语法实现：{path.to.token}。

注意

重要的是使用完整的令牌路径；例如，您必须将其引用为 colors.red.300，而不是使用 red.300。

以下是一个将令牌引用语法应用于 border 和 p（padding）属性的示例

<Box
  border="1px solid {colors.red.300}"
  p="{spacing.4} {spacing.6} {spacing.8} {spacing.10}"
  boxShadow="{spacing.4} {spacing.2} {spacing.2} {colors.red.300}"
/>

令牌嵌套

令牌可以嵌套以创建令牌的层级结构。当您想将相关令牌分组时，这会很有用。

信息

使用 DEFAULT 键来定义嵌套令牌的默认值。

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        red: {
          DEFAULT: { value: "#EE0F0F" },
          100: { value: "#EE0F0F" },
        },
      },
    },
  },
})

export default createSystem(defaultConfig, config)

<Box
  // 👇🏻 This will use the `DEFAULT` value
  bg="red"
  color="red.100"
>
  Hello World
</Box>

令牌类型

颜色

颜色具有含义并支持内容的目的，传达信息层级和状态等。它通常定义为字符串值或对其他令牌的引用。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  colors: {
    red: {
      100: { value: "#fff1f0" },
    },
  },
})

export default createSystem({
  theme: { tokens },
})

渐变

渐变令牌代表两种或多种颜色之间的平滑过渡。其值可以定义为字符串或复合值。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  gradients: {
    // string value
    simple: { value: "linear-gradient(to right, red, blue)" },

    // composite value
    primary: {
      value: { type: "linear", placement: "to right", stops: ["red", "blue"] },
    },
  },
})

export default createSystem({
  theme: { tokens },
})

尺寸

尺寸令牌代表元素的宽度和高度。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  sizes: {
    sm: { value: "12px" },
  },
})

export default createSystem({
  theme: { tokens },
})

尺寸令牌通常用于 width、height、minWidth、maxWidth、minHeight、maxHeight 属性。

间距

间距令牌代表元素的 margin 和 padding。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  spacing: {
    gutter: { value: "12px" },
  },
})

export default createSystem({
  theme: { tokens },
})

间距令牌通常用于 margin、padding、gap 和 {top,right,bottom,left} 属性。

字体

字体令牌代表文本元素的字体族。其值定义为字符串或字符串数组。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  fonts: {
    body: { value: "Inter, sans-serif" },
    heading: { value: ["Roboto Mono", "sans-serif"] },
  },
})

export default createSystem({
  theme: { tokens },
})

字体令牌通常用于 font-family 属性。

字号

字号令牌代表文本元素的尺寸。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  fontSizes: {
    sm: { value: "12px" },
  },
})

export default createSystem({
  theme: { tokens },
})

字号令牌通常用于 font-size 属性。

字重

字重令牌代表文本元素的粗细。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  fontWeights: {
    bold: { value: "700" },
  },
})

export default createSystem({
  theme: { tokens },
})

字重令牌通常用于 font-weight 属性。

字间距

字间距令牌代表文本元素中字母之间的间距。其值定义为字符串。

const tokens = defineTokens({
  letterSpacings: {
    wide: { value: "0.1em" },
  },
})

export default createSystem({
  theme: { tokens },
})

字间距令牌通常用于 letter-spacing 属性。

行高

行高令牌代表一行文本的高度。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  lineHeights: {
    normal: { value: "1.5" },
  },
})

export default createSystem({
  theme: { tokens },
})

行高令牌通常用于 line-height 属性。

圆角

圆角令牌代表边框的圆角半径。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  radii: {
    sm: { value: "4px" },
  },
})

export default createSystem({
  theme: { tokens },
})

圆角令牌通常用于 border-radius 属性。

边框

边框是围绕 UI 元素的线条。您可以将它们定义为字符串值或复合值

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  borders: {
    // string value
    subtle: { value: "1px solid red" },
    // string value with reference to color token
    danger: { value: "1px solid {colors.red.400}" },
    // composite value
    accent: { value: { width: "1px", color: "red", style: "solid" } },
  },
})

export default createSystem({
  theme: { tokens },
})

边框令牌通常用于 border、border-top、border-right、border-bottom、border-left、outline 属性。

边框宽度

边框宽度令牌代表边框的宽度。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  borderWidths: {
    thin: { value: "1px" },
    thick: { value: "2px" },
    medium: { value: "1.5px" },
  },
})

export default createSystem({
  theme: { tokens },
})

阴影

阴影令牌代表元素的阴影。其值定义为包含字符串或复合值的单个或多个值。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  shadows: {
    // string value
    subtle: { value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
    // composite value
    accent: {
      value: {
        offsetX: 0,
        offsetY: 4,
        blur: 4,
        spread: 0,
        color: "rgba(0, 0, 0, 0.1)",
      },
    },
    // multiple string values
    realistic: {
      value: [
        "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
        "0 1px 4px 0 rgba(0, 0, 0, 0.1)",
      ],
    },
  },
})

export default createSystem({
  theme: { tokens },
})

阴影令牌通常用于 box-shadow 属性。

缓动

缓动令牌代表动画或过渡的缓动函数。其值定义为字符串或表示三次贝塞尔曲线的值数组。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  easings: {
    // string value
    easeIn: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
    // array value
    easeOut: { value: [0.4, 0, 0.2, 1] },
  },
})

export default createSystem({
  theme: { tokens },
})

缓动令牌通常用于 transition-timing-function 属性。

不透明度

不透明度令牌帮助您设置元素的透明度。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  opacity: {
    50: { value: 0.5 },
  },
})

export default createSystem({
  theme: { tokens },
})

不透明度令牌通常用于 opacity 属性。

Z-索引

此令牌类型表示元素在 Z 轴上的位置深度。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  zIndex: {
    modal: { value: 1000 },
  },
})

export default createSystem({
  theme: { tokens },
})

Z-索引令牌通常用于 z-index 属性。

资源

资源令牌代表一个 URL 或 SVG 字符串。其值定义为字符串或复合值。

type CompositeAsset = { type: "url" | "svg"; value: string }
type Asset = string | CompositeAsset

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  tokens: {
    assets: {
      logo: {
        value: { type: "url", value: "/static/logo.png" },
      },
      checkmark: {
        value: { type: "svg", value: "<svg>...</svg>" },
      },
    },
  },
})

export default createSystem({
  theme: { tokens },
})

资源令牌通常用于 background-image 属性。

持续时间

持续时间令牌表示动画或动画周期完成所需的毫秒时间长度。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  durations: {
    fast: { value: "100ms" },
  },
})

export default createSystem({
  theme: { tokens },
})

持续时间令牌通常用于 transition-duration 和 animation-duration 属性。

动画

动画令牌代表一个关键帧动画。其值定义为字符串值。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  animations: {
    spin: {
      value: "spin 1s linear infinite",
    },
  },
})

export default createSystem({
  theme: { tokens },
})

动画令牌通常用于 animation 属性。

长宽比

长宽比令牌代表元素的纵横比。其值定义为字符串。

theme.ts

import { defineTokens } from "@chakra-ui/react"

const tokens = defineTokens({
  aspectRatios: {
    "1:1": { value: "1 / 1" },
    "16:9": { value: "16 / 9" },
  },
})

export default createSystem({
  theme: { tokens },
})

概述

语义令牌

令牌

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}概述

概述