
import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Documentation/Colors" />

# Colors

<ColorPalette>
  <ColorItem 
    title="theme.color.primary" 
    subtitle="主题色" 
    colors={{ "primary-color": '#1664ff' }} 
  />
  <ColorItem 
    title="theme.color.primary-hover" 
    subtitle="主题色:hover" 
    colors={{ "primary-color-hover": "#69b1ff"  }} 
  />
   <ColorItem 
    title="theme.color.underline" 
    subtitle="链接的下划线" 
    colors={{ "underline-color": "#5d93ff"  }} 
  />
  <ColorItem 
    title="theme.color.success" 
    subtitle="成功色" 
    colors={{ "success-color": '#6ac21d' }} 
  />
  <ColorItem
    title="theme.color.error"
    subtitle="失败色"
    colors={{ "error-color": '#c73131' }}
  />
  <ColorItem
    title="theme.color.warning"
    subtitle="警告色"
    colors={{ "warning-color": '#f98e1b' }}
  />
  <ColorItem
    title="theme.color.warning"
    subtitle="终止"
    colors={{ "abort-color": '#8a8a8a' }}
  />
  <ColorItem
    title="theme.color.warning"
    subtitle="等待运行"
    colors={{ "pending-color": '#ecb934' }}
  />
  <ColorItem
    title="theme.color.background"
    subtitle="背景色"
    colors={{ 
      "background-color": '#f9fafb', 
      "sider-background-color": '#f2f5f7' 
    }}
  />
  <ColorItem
    title="theme.color.font"
    subtitle="字体颜色"
    colors={{
      "text-color": '#1d1d20',
      "text-color-secondary": '#575757',
      "text-color-tertiary": '#8a8a8a',
      "text-disabled-color": 'rgba(0, 0, 0, 0.25)',
    }}
  />
  <ColorItem
    title="theme.color.placeholder"
    subtitle="placeholder 颜色"
    colors={{ "text-placeholder-color": 'rgba(0, 0, 0, 0.25)' }}
  />
  <ColorItem
    title="theme.color.border"
    subtitle="边框色"
    colors={{ "border-color": '#eaeaea' }}
  />
</ColorPalette>