Scales

Scales 可将 tokens、semanticTokens 与 CSS 属性关联，使得 CSS 属性能够映射到相应的 Token 类型，进而允许 CSS 属性能够使用相应类型的 Tokens 作为值。

自定义 Scales

Scales 可在您的主题配置 theme.scales 部分定义：


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    colors: {
      blue: {
        500: '#006fee',
      },
      gray: '#fafafa',
    },
    sizes: {
      10: '40px',
    },
    spaces: {
      5: '20px',
    },
  },
  semanticTokens: {
    colors: {
      primary: '#06b6d4',
    },
  },
  scales: {
    color: 'colors',
    backgroundColor: 'colors',
    borderColor: 'colors',
    width: 'sizes',
    padding: 'spaces',
  },
})

Scale 的 key 为 CSSProperty 类型， value 为 TokenCategory 类型。

💡

此处 Alias 无需再关联 CSS 属性。

通过上述定义之后，在 sx 属性、 defineRecipe 和 defineSlotRecipe 等方法使用中，color、borderColor 和 backgroundColor 可直接引用 Colors 类型的 Tokens， width 引用 Sizes 类型的 Tokens， padding 引用 Spaces 类型的 Tokens。


import { Box } from '@nex-ui/react'
 
export default function App() {
  return (
    <Box
      sx={{
        color: 'gray',
        backgroundColor: 'primary',
        border: '1px solid',
        borderColor: 'blue.500',
        width: '10',
        padding: '5',
      }}
    >
      Box
    </Box>
  )
}

TypeScript

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


declare module '@nex-ui/react' {
  interface ScalesOverrides {
    color: 'colors'
    backgroundColor: 'colors'
    borderColor: 'colors'
    width: 'sizes'
    padding: 'spaces'
  }
}

默认可用的 Scales

CSS Property	Token Category
color	colors
borderColor	colors
backgroundColor	colors
borderBottomColor	colors
borderTopColor	colors
borderLeftColor	colors
borderRightColor	colors
fill	colors
stroke	colors
width	sizes
minWidth	sizes
maxWidth	sizes
height	sizes
minHeight	sizes
maxHeight	sizes
fontWeight	fontWeights
lineHeight	lineHeights
fontFamily	fontFamilies
fontSize	fontSizes
padding	spaces
paddingTop	spaces
paddingBottom	spaces
paddingLeft	spaces
paddingRight	spaces
marginRight	spaces
marginTop	spaces
marginLeft	spaces
marginBottom	spaces
margin	spaces
top	spaces
left	spaces
right	spaces
bottom	spaces
gap	spaces
rowGap	spaces
columnGap	spaces
gridGap	spaces
gridColumnGap	spaces
gridRowGap	spaces
borderRadius	radii
borderTopRightRadius	radii
borderTopLeftRadius	radii
borderBottomRightRadius	radii
borderBottomLeftRadius	radii
borderTopWidth	borderWidths
borderBottomWidth	borderWidths
borderLeftWidth	borderWidths
borderRightWidth	borderWidths
borderWidth	borderWidths
border	borders
borderTop	borders
borderBottom	borders
borderRight	borders
borderLeft	borders
boxShadow	shadows
transition	transitions
zIndex	zIndexes