@viarotel-org/unocss-preset-shades/src/index.ts

🎨 为 Unocss 生成一组逐渐由浅至深的主题色调预设，通过提供基准颜色。

import type { Preset } from 'unocss'
import { generateShades } from './helpers'
import type { ColorOptions, ShadesOptions } from './helpers'

export * from './helpers'

export interface PresetOptions extends ShadesOptions {
  primaryKey?: string
}

export function presetShades(
  colorValue: string = '',
  { primaryKey = 'primary', ...options }: PresetOptions = {},
): Preset {
  const shades = generateShades(colorValue, {
    returnRgb: true,
    ...options,
  })
  // console.log('shades', shades)
  const shadeList = Object.entries(shades)

  return {
    name: 'presetShades',
    preflights: [
      {
        getCSS: () => {
          const vars = shadeList.reduce((style, [key, value]) => {
            if (key === 'DEFAULT') {
              style += `--color-${primaryKey}: ${value};`
            }
            else {
              style += `--color-${primaryKey}-${key}: ${value};`
            }
            return style
          }, '')

          return `
            :root, page {
              ${vars}
            }
          `
        },
      },
    ],
    theme: {
      colors: {
        [primaryKey]: shadeList.reduce(
          (obj: ColorOptions, [key]: [string | number, string]) => {
            if (key === 'DEFAULT') {
              obj[
                key as keyof ColorOptions
              ] = `rgba(var(--color-${primaryKey}), <alpha-value>)`
            }
            else {
              obj[
                key as keyof ColorOptions
              ] = `rgba(var(--color-${primaryKey}-${key}), <alpha-value>)`
            }
            return obj
          },
          <ColorOptions>{},
        ),
      },
    },
  }
}