uni-starter/uno.config.ts

import type { Preset } from 'unocss'

import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import {
  defineConfig,
  presetIcons,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
import { presetApplet, presetRemRpx } from 'unocss-applet'

import iconList from './src/utils/icons'

function createColorsPalette(name: string) {
  return {
    50: `hsl(var(--${name}-50))`,
    100: `hsl(var(--${name}-100))`,
    200: `hsl(var(--${name}-200))`,
    300: `hsl(var(--${name}-300))`,
    400: `hsl(var(--${name}-400))`,
    500: `hsl(var(--${name}-500))`,
    600: `hsl(var(--${name}-600))`,
    700: `hsl(var(--${name}-700))`,
    // 800: `hsl(var(--${name}-800))`,
    // 900: `hsl(var(--${name}-900))`,
    // 950: `hsl(var(--${name}-950))`,
    // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
    active: `hsl(var(--${name}-700))`,
    // 浅色背景，适用于输入框或表单区域的背景。
    'background-light': `hsl(var(--${name}-200))`,
    // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
    'background-lighter': `hsl(var(--${name}-100))`,
    // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
    'background-lightest': `hsl(var(--${name}-50))`,
    // 适用于普通边框，可能用于按钮或卡片的边框。
    border: `hsl(var(--${name}-400))`,
    // 浅色边框，适用于输入框或卡片的边框。
    'border-light': `hsl(var(--${name}-300))`,
    foreground: `hsl(var(--${name}-foreground))`,
    // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
    hover: `hsl(var(--${name}-600))`,
    // 主色文本
    text: `hsl(var(--${name}-500))`,
    // 主色文本激活态
    'text-active': `hsl(var(--${name}-700))`,
    // 主色文本悬浮态
    'text-hover': `hsl(var(--${name}-600))`,
  }
}

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet() as Preset, presetRemRpx({ mode: 'rem2rpx' }) as Preset)
} else {
  presets.push(
    // 非小程序用官方预设
    presetWind4(),
    presetRemRpx({ mode: 'rpx2rem' }) as Preset
  )
}

export default defineConfig({
  presets: [
    ...presets,
    presetIcons({
      scale: 1.2,
      extraProperties: {
        display: 'inline-block',
      },
      // cdn: 'https://esm.sh/'
      collections: {
        custom: FileSystemIconLoader('./src/static/icons/'),
        ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  rules: [
    [/^m-h-(.+)$/, ([, d]) => ({ 'margin-left': `${d}`, 'margin-right': `${d}` })],
    [/^m-v-(.+)$/, ([, d]) => ({ 'margin-top': `${d}`, 'margin-bottom': `${d}` })],
    [/^p-h-(.+)$/, ([, d]) => ({ 'padding-left': `${d}`, 'padding-right': `${d}` })],
    [/^p-v-(.+)$/, ([, d]) => ({ 'padding-top': `${d}`, 'padding-bottom': `${d}` })],
    [/^max-w-(\s+)$/, ([, d]) => ({ 'max-width': `${d}` })],
    [/^min-w-(\s+)$/, ([, d]) => ({ 'min-width': `${d}` })],
    [/^max-h-[(\s+)]$/, ([, d]) => ({ 'max-height': `${d}` })],
    [/^min-h-[(\s+)]$/, ([, d]) => ({ 'min-height': `${d}` })],
    [/^wh-(.+)$/, ([, d]) => ({ width: `${d}`, height: `${d}` })],
  ],
  safelist: iconList,
  shortcuts: {
    'wh-full': 'w-full h-full',
    'mp-0': 'm-0 p-0',
    'ma-x': 'mt-0 mb-0 ml-auto mr-auto',
    'inline-flex-center': 'inline-flex justify-center items-center',
    'flex-center': 'flex justify-center items-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    // 文本溢出显示省略号
    'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis',
    // 文本溢出换行
    'text-break': 'whitespace-normal break-all break-words',
  },
  theme: {
    borderRadius: {
      sm: 'calc(var(--radius) - 4px)',
      md: 'calc(var(--radius) - 2px)',
      lg: 'var(--radius)',
      xl: 'calc(var(--radius) + 4px)',
    },
    breakpoints: {
      xs: '480px',
      sm: '768px',
      md: '992px',
      lg: '1200px',
      xl: '1920px',
    },
    colors: {
      primary: {
        ...createColorsPalette('primary'),
        DEFAULT: 'hsl(var(--primary))',
      },
      success: {
        ...createColorsPalette('success'),
        DEFAULT: 'hsl(var(--success))',
      },
      warning: {
        ...createColorsPalette('warning'),
        DEFAULT: 'hsl(var(--warning))',
      },
      danger: {
        ...createColorsPalette('danger'),
        DEFAULT: 'hsl(var(--danger))',
      },
      info: {
        DEFAULT: 'hsl(var(--info))',
      },
      placeholder: {
        DEFAULT: 'hsl(var(--placeholder))',
      },
      overlay: {
        DEFAULT: 'hsl(var(--overlay))',
      },
      border: {
        DEFAULT: 'hsl(var(--border))',
      },
      error: 'var(--error)',
      up: 'var(--up)',
      down: 'var(--down)',
      '1': 'var(--text-color-1)',
      '2': 'var(--text-color-2)',
      '3': 'var(--text-color-3)',
      '4': 'var(--bg-color-4)',
    },
  },
})