@raminy/css-config/themes/index.ts

Tailwind CSS v4 configuration with predefined themes, semantic color tokens, and SCSS utilities for theme customization and generation.

import styles from "./theme-names.module.scss";
import { Theme } from "./themes.types";

export type CustomTheme<T extends string> = Theme | T;

export const variablePrefix = styles.variablePrefix;
export const tailwindVariablePrefix = styles.tailwindVariablePrefix;

export const defaultTheme = styles.defaultTheme;

const themeNames = JSON.parse(styles.themes.match(/^'(.*)'$/)![1]) as unknown as Record<
  string,
  string
>;

const themeDetails = JSON.parse(styles.themeDetails.match(/^'(.*)'$/)![1]) as unknown as Record<
  string,
  Record<string, { dark: string; light: string; description?: string }>
>;

export const themes = Object.entries(themeNames).map(([name, color]) => ({
  name: name as Theme,
  color,
  details: themeDetails[name],
}));