uno.config.ts

/**
 * @file UnoCSS config
 * @see https://unocss.dev/guide/config-file
 */

import presetWind from "@unocss/preset-wind";
import transformDirectives from "@unocss/transformer-directives";
import {Colord, extend} from "colord";
import mixPlugin from "colord/plugins/mix";
import {defineConfig} from "unocss";

// Extend Colord
extend([mixPlugin]);

/**
 * Primary color
 */
const primary = new Colord("#51c5db");

/**
 * Secondary color
 */
const secondary = new Colord("#f69876");

/**
 * Generate tones of a color
 * @param color Color to generate tones for
 * @returns Tones
 */
const generateTones = (color: Colord) =>
  Object.fromEntries(
    [
      ...color.tints(22).reverse(),
      ...color.shades(22).slice(1),
    ]
      .map((tone, index) => [25 * index, tone.toHex()])
      .filter((_, index) => index === 1 || index % 2 === 0)
      .slice(1, -1),
  );

export default defineConfig({
  presets: [
    presetWind({
      dark: "class",
    }),
  ],
  transformers: [transformDirectives()],
  theme: {
    colors: {
      primary: generateTones(primary),
      secondary: generateTones(secondary),
    },
  },
});