import { createTV } from "tailwind-variants";

/**
 * The design-system type scale lives in `app.css` as `--text-heading-*`,
 * `--text-paragraph-*` and `--text-monospace-*`, so its utilities read
 * `text-heading-3`, `text-paragraph-small`, `text-monospace-regular`, and so on.
 *
 * tailwind-merge can't tell those apart from `text-<colour>` utilities on its own,
 * so it treats them as colours and quietly drops the size as soon as a colour
 * follows — which, in a `tv()` definition whose variants set text colours, is
 * always. Registering them as font sizes is what keeps both the size and the
 * colour, and it leaves Tailwind's own `text-sm`/`text-lg` merging intact.
 *
 * Use this `tv` rather than importing it straight from `tailwind-variants`.
 */
const fontSizes = [
	"heading-0",
	"heading-1",
	"heading-2",
	"heading-3",
	"heading-4",
	"paragraph-large",
	"paragraph-regular",
	"paragraph-small",
	"paragraph-mini",
	"monospace-large",
	"monospace-regular",
	"monospace-small"
];

export const tv = createTV({
	twMergeConfig: {
		classGroups: {
			"font-size": [{ text: fontSizes }]
		}
	}
});

export type { VariantProps } from "tailwind-variants";