rayine-ui/src/runtime/utils/colors.ts

import type { Config as TwConfig } from "tailwindcss";
import defaultColors from "tailwindcss/colors.js";

const colorsToRegex = (colors: string[]): string => colors.join("|");

type ColorConfig = Exclude<NonNullable<TwConfig["theme"]>["colors"], Function>;

export const setColors = (theme: TwConfig["theme"]) => {
  const globalColors: ColorConfig = {
    ...(theme?.colors || defaultColors),
    ...theme?.extend?.colors,
  };

  // @ts-ignore
  globalColors.primary = theme.extend.colors.primary = {
    50: "rgb(var(--color-primary-50) / <alpha-value>)",
    100: "rgb(var(--color-primary-100) / <alpha-value>)",
    200: "rgb(var(--color-primary-200) / <alpha-value>)",
    300: "rgb(var(--color-primary-300) / <alpha-value>)",
    400: "rgb(var(--color-primary-400) / <alpha-value>)",
    500: "rgb(var(--color-primary-500) / <alpha-value>)",
    600: "rgb(var(--color-primary-600) / <alpha-value>)",
    700: "rgb(var(--color-primary-700) / <alpha-value>)",
    800: "rgb(var(--color-primary-800) / <alpha-value>)",
    900: "rgb(var(--color-primary-900) / <alpha-value>)",
    950: "rgb(var(--color-primary-950) / <alpha-value>)",
    DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)",
  };

  if (globalColors.gray) {
    // @ts-ignore
    globalColors.cool = theme.extend.colors.cool = defaultColors.gray;
  }

  // @ts-ignore
  globalColors.gray = theme.extend.colors.gray = {
    50: "rgb(var(--color-gray-50) / <alpha-value>)",
    100: "rgb(var(--color-gray-100) / <alpha-value>)",
    200: "rgb(var(--color-gray-200) / <alpha-value>)",
    300: "rgb(var(--color-gray-300) / <alpha-value>)",
    400: "rgb(var(--color-gray-400) / <alpha-value>)",
    500: "rgb(var(--color-gray-500) / <alpha-value>)",
    600: "rgb(var(--color-gray-600) / <alpha-value>)",
    700: "rgb(var(--color-gray-700) / <alpha-value>)",
    800: "rgb(var(--color-gray-800) / <alpha-value>)",
    900: "rgb(var(--color-gray-900) / <alpha-value>)",
    950: "rgb(var(--color-gray-950) / <alpha-value>)",
  };

  return Object.entries(globalColors)
    .filter(([, value]) => typeof value === "object")
    .map(([key]) => key);
};

const safelistForComponent: Record<
  string,
  (colors: string) => TwConfig["safelist"]
> = {
  button: (colorsToRegex) => [
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-50$`),
      variants: ["hover", "disabled"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-100$`),
      variants: ["hover"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-400$`),
      variants: ["dark", "dark:disabled"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-500$`),
      variants: ["disabled", "dark:hover", "dark:active"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-600$`),
      variants: ["hover"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-700$`),
      variants: ["active"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-900$`),
      variants: ["dark:hover"],
    },
    {
      pattern: RegExp(`^bg-(${colorsToRegex})-950$`),
      variants: ["dark", "dark:hover", "dark:disabled"],
    },
    {
      pattern: RegExp(`^text-(${colorsToRegex})-400$`),
      variants: ["dark", "dark:hover", "dark:disabled"],
    },
    {
      pattern: RegExp(`^text-(${colorsToRegex})-500$`),
      variants: ["dark:hover", "disabled"],
    },
    {
      pattern: RegExp(`^text-(${colorsToRegex})-600$`),
      variants: ["hover"],
    },
    {
      pattern: RegExp(`^outline-(${colorsToRegex})-400$`),
      variants: ["dark:focus-visible"],
    },
    {
      pattern: RegExp(`^outline-(${colorsToRegex})-500$`),
      variants: ["focus-visible"],
    },
    {
      pattern: RegExp(`^ring-(${colorsToRegex})-300$`),
      variants: ["focus", "dark:focus"],
    },
    {
      pattern: RegExp(`^ring-(${colorsToRegex})-400$`),
      variants: ["dark:focus-visible"],
    },
    {
      pattern: RegExp(`^ring-(${colorsToRegex})-500$`),
      variants: ["focus-visible"],
    },
  ],
};

export const generateSafelist = (colors: string[], globalColors: string[]) => {
  const safelist = Object.keys(safelistForComponent).flatMap((component) =>
    safelistForComponent[component](colorsToRegex(colors))
  );

  return [
    ...safelist
  ]
};