Chakra UI 设计系统 #

Chakra UI 设计系统
├── Colors        颜色系统
├── Typography    排版系统
├── Spacing       间距系统
├── Sizes         尺寸系统
├── Borders       边框系统
├── Shadows       阴影系统
├── Breakpoints   断点系统
└── Z-Index       层级系统

<Box bg="blue.50">blue.50</Box>
<Box bg="blue.100">blue.100</Box>
<Box bg="blue.200">blue.200</Box>
<Box bg="blue.300">blue.300</Box>
<Box bg="blue.400">blue.400</Box>
<Box bg="blue.500">blue.500</Box>
<Box bg="blue.600">blue.600</Box>
<Box bg="blue.700">blue.700</Box>
<Box bg="blue.800">blue.800</Box>
<Box bg="blue.900">blue.900</Box>

<Box color="gray.500">次要文字</Box>
<Text color="red.500">错误信息</Text>
<Text color="green.500">成功信息</Text>
<Badge colorScheme="blue">标签</Badge>

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    brand: {
      50: '#e3f2fd',
      100: '#bbdefb',
      200: '#90caf9',
      300: '#64b5f6',
      400: '#42a5f5',
      500: '#2196f3',
      600: '#1e88e5',
      700: '#1976d2',
      800: '#1565c0',
      900: '#0d47a1',
    },
  },
})

const theme = extendTheme({
  fonts: {
    heading: `'Heading Font', sans-serif`,
    body: `'Body Font', sans-serif`,
    mono: `'Code Font', monospace`,
  },
})

<Text fontSize="xs">超小文字</Text>
<Text fontSize="sm">小号文字</Text>
<Text fontSize="md">中等文字</Text>
<Text fontSize="lg">大号文字</Text>
<Text fontSize="xl">超大文字</Text>
<Heading fontSize="2xl">标题</Heading>

<Text fontWeight="hairline">最细</Text>
<Text fontWeight="thin">细体</Text>
<Text fontWeight="light">轻体</Text>
<Text fontWeight="normal">正常</Text>
<Text fontWeight="medium">中等</Text>
<Text fontWeight="semibold">半粗</Text>
<Text fontWeight="bold">粗体</Text>
<Text fontWeight="extrabold">特粗</Text>
<Text fontWeight="black">最粗</Text>

<Text lineHeight="none">行高 1</Text>
<Text lineHeight="shorter">行高 1.25</Text>
<Text lineHeight="short">行高 1.375</Text>
<Text lineHeight="normal">行高 1.5</Text>
<Text lineHeight="tall">行高 1.625</Text>
<Text lineHeight="taller">行高 2</Text>

<Box p={4}>内边距 16px</Box>
<Box m={2}>外边距 8px</Box>
<Box px={6} py={3}>水平内边距 24px，垂直内边距 12px</Box>
<Box mt={8} mb={4}>上边距 32px，下边距 16px</Box>

<Box w="100%">宽度 100%</Box>
<Box w="50%">宽度 50%</Box>
<Box w="300px">固定宽度 300px</Box>
<Box w="auto">自动宽度</Box>
<Box maxW="container.lg">最大宽度</Box>
<Box minH="100vh">最小高度</Box>

<Container maxW="container.md">
  内容居中，最大宽度 768px
</Container>

<Box borderRadius="sm">小圆角</Box>
<Box borderRadius="md">中等圆角</Box>
<Box borderRadius="lg">大圆角</Box>
<Box borderRadius="full">完全圆形</Box>

<Box borderWidth="1px">细边框</Box>
<Box borderWidth="2px">中等边框</Box>
<Box borderWidth="4px">粗边框</Box>

<Box shadow="sm">小阴影</Box>
<Box shadow="base">基础阴影</Box>
<Box shadow="md">中等阴影</Box>
<Box shadow="lg">大阴影</Box>
<Box shadow="xl">超大阴影</Box>
<Box shadow="2xl">特大阴影</Box>
<Box shadow="inner">内阴影</Box>
<Box shadow="outline">轮廓阴影</Box>

<Box
  width={{
    base: '100%',
    md: '50%',
    lg: '25%'
  }}
>
  响应式宽度
</Box>

<Text
  fontSize={{
    base: 'md',
    md: 'lg',
    lg: 'xl'
  }}
>
  响应式字体大小
</Text>

<Flex
  direction={{
    base: 'column',
    md: 'row'
  }}
>
  响应式布局方向
</Flex>

<Box display={{ base: 'block', md: 'none' }}>
  仅在移动端显示
</Box>

<Box display={{ base: 'none', md: 'block' }}>
  仅在桌面端显示
</Box>

import { useBreakpointValue } from '@chakra-ui/react'

function ResponsiveComponent() {
  const variant = useBreakpointValue({
    base: 'outline',
    md: 'solid',
    lg: 'ghost'
  })
  
  return <Button variant={variant}>响应式按钮</Button>
}

<Box zIndex="modal">模态框层级</Box>
<Box zIndex="tooltip">工具提示层级</Box>

设计令牌体系
├── 颜色 (Colors)
│   ├── 调色板 (50-900)
│   ├── 语义色 (success, error, warning)
│   └── 品牌色 (brand)
│
├── 排版 (Typography)
│   ├── 字体族 (fonts)
│   ├── 字体大小 (fontSizes)
│   ├── 字重 (fontWeights)
│   └── 行高 (lineHeights)
│
├── 间距 (Spacing)
│   ├── 内边距 (padding)
│   └── 外边距 (margin)
│
├── 尺寸 (Sizes)
│   ├── 宽度 (width)
│   ├── 高度 (height)
│   └── 最大/最小尺寸
│
├── 边框 (Borders)
│   ├── 圆角 (borderRadius)
│   └── 边框宽度 (borderWidth)
│
├── 阴影 (Shadows)
│   └── 盒阴影 (boxShadow)
│
└── 断点 (Breakpoints)
    └── 响应式断点