Tokens

Design Tokens 用于管理应用程序的设计决策。它是一组属性的集合，用于描述任何基本的 / 原子级的视觉风格。

自定义 Tokens

Tokens 可在您的主题配置 theme.tokens 部分定义：


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    colors: {
      black: '#000',
      sky: {
        50: '#E6F1FE',
        100: '#CCE3FD',
        200: '#99C7FB',
        300: '#66AAF9',
        400: '#338EF7',
        500: '#006FEE',
        600: '#005BC4',
        700: '#004493',
        800: '#002E62',
        900: '#14204a',
      },
    },
    spaces: { 16: '64px', 17: '68px', 18: '72px' },
  },
})

Token 是与一个直观易读的名称相关联的信息，一般表现为 name/value 对的形式，除了 Colors 类型的 Tokens，其还支持上述的对象格式。

💡

建议您在 tokens 中定义一些客观的，与业务场景及品牌理念均无关联的 Tokens。

TypeScript

之后，如果您正在使用 TypeScript，可通过 Module Augmentation 扩展自定义的 Tokens。


declare module '@nex-ui/react' {
  interface TokensOverrides {
    colors:
      | 'black'
      | 'sky.50'
      | 'sky.100'
      | 'sky.200'
      | 'sky.300'
      | 'sky.400'
      | 'sky.500'
      | 'sky.600'
      | 'sky.700'
      | 'sky.800'
      | 'sky.900'
    spaces: '16' | '17' | '18'
  }
}

使用 Tokens

在定义过后，您可以通过 sx 属性、 defineRecipe 或者 defineSlotRecipe 使用自定义的 Tokens。


import { Box } from '@nex-ui/react'
 
export default function App() {
  return (
    <Box
      sx={{
        backgroundColor: 'sky.500',
        padding: '16',
      }}
    >
      Box
    </Box>
  )
}

💡

Nex UI 已关联 backgroundColor 和 colors、padding 和 spaces 之间的映射关系，因此可以直接使用。如果将 backgroundCOlor: 'sky.500' 改为 outlineColor: 'sky.500'，则无法正常工作。在 Scales 了解更多信息。

Tokens 类型

Colors

Colors 类型的 Tokens 代表元素在视觉上呈现的颜色。其值类型为 string | object。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    colors: {
      red: {
        100: '#fff1f0',
      },
    },
  },
})

默认可用于 color、borderColor、backgroundColor、borderBottomColor、borderTopColor、borderLeftColor、borderRightColor、fill、stroke、outlineColor 属性。

Sizes

Sizes 类型的 Tokens 代表元素的高度和宽度。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    sizes: {
      sm: '12px',
    },
  },
})

默认可用于 width、minWidth、maxWidth、height、minHeight、maxHeight 属性。

Spaces

Spaces 类型的 Tokens 代表元素之间的间距。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    spaces: {
      1: '4px',
    },
  },
})

默认可用于 padding、paddingTop、paddingBottom、paddingLeft、paddingRight、marginRight、marginTop、marginLeft、marginBottom、margin、marginBlock、marginBlockStart、marginBlockEnd、marginInline、marginInlineStart、marginInlineEnd、paddingBlock、paddingBlockStart、paddingBlockEnd、paddingInline、paddingInlineStart、paddingInlineEnd、top、left、right、bottom、gap、rowGap、columnGap、gridGap、gridColumnGap、gridRowGap、outlineOffset、inset、insetBlock、insetBlockStart、insetBlockEnd、insetInline、insetInlineStart、insetInlineEnd 属性。

FontSizes

FontSizes 类型的 Tokens 代表文本元素的字体大小。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    fontSizes: {
      sm: '14px',
    },
  },
})

默认可用于 fontSize 属性。

FontFamilies

FontFamilies 类型的 Tokens 代表文本元素的字体。其值类型为 string 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    fontFamilies: {
      sans: "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
    },
  },
})

默认可用于 fontFamily 属性。

FontWeights

FontWeights 类型的 Tokens 代表文本元素的字体粗细程度。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    fontWeights: {
      thin: 200,
    },
  },
})

默认可用于 fontWeight 属性。

LineHeights

LineHeights 类型的 Tokens 代表多行元素的空间量，如多行文本的间距。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    lineHeights: {
      base: 1.5,
    },
  },
})

默认可用于 lineHeight 属性。

Borders

Borders 类型的 Tokens 代表元素的边框。其值类型为 string 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    borders: {
      sm: '1px solid',
    },
  },
})

默认可用于 border、borderTop、borderBottom、borderRight、borderLeft、outline 属性。

BorderWidths

BorderWidths 类型的 Tokens 代表元素的边框宽度。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    borderWidths: {
      sm: '1px',
    },
  },
})

默认可用于 borderTopWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderWidth 属性。

Radii

Radii 类型的 Tokens 代表元素的外边框圆角。其值类型为 string | number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    radii: {
      sm: '6px',
    },
  },
})

默认可用于 borderRadius、borderTopRightRadius、borderTopLeftRadius、borderBottomRightRadius、borderBottomLeftRadius 属性。

Shadows

Shadows 类型的 Tokens 代表元素的阴影效果。其值类型为 string 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    shadows: {
      sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
    },
  },
})

默认可用于 boxShadow 属性。

Transitions

Transitions 类型的 Tokens 代表元素在不同状态之间切换时不同的过渡效果。其值类型为 string 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    transitions: {
      all: 'all 0.2s',
    },
  },
})

默认可用于 transition 属性。

Z-Indices

Z-Indices 类型的 Tokens 代表元素及其后代元素的 Z 轴顺序。其值类型为 number 。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    zIndices: {
      min: 0,
    },
  },
})

默认可用于 zIndex 属性。