@viarotel-org/unocss-preset-shades/dist/index.mjs

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

import { generateShades } from './helpers.mjs';
export { updateShades } from './helpers.mjs';
import 'color';

function presetShades(colorValue = "", { primaryKey = "primary", ...options } = {}) {
  const shades = generateShades(colorValue, {
    returnRgb: true,
    ...options
  });
  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, [key]) => {
            if (key === "DEFAULT") {
              obj[key] = `rgba(var(--color-${primaryKey}), <alpha-value>)`;
            } else {
              obj[key] = `rgba(var(--color-${primaryKey}-${key}), <alpha-value>)`;
            }
            return obj;
          },
          {}
        )
      }
    }
  };
}

export { generateShades, presetShades };