Types for generated variants using template literals for a token values

[kiruushaaa]

I'm trying to put similar hardcoded variants differ only with a name of a semantic token. It does work but I have no idea how to type it correctly.

import { cva } from "~/styled-system/css";
import type { RecipeVariantRecord } from "~/styled-system/types";

const variantObject = ["primary", "secondary"].reduce((variants, name) => {
  variants[name] = {
    bg: `token(colors.${name})`,
    borderColor: `token(colors.${name})`,
    _hoverEnabled: {
      bg: `token(colors.${name}.hover)`,
      borderColor: `token(colors.${name}.hover)`,
    },
    _activeEnabled: { ... },
    _disabled: { ... }
  };
  return variants;
}, {} as RecipeVariantRecord);

export const button = cva({
  base: { ... },
  variants: {
    ...variantObject,
    anotherVariant: { ... }
  }
});

Typing error related to:

Type 'string' is not assignable to type 'SystemStyleObject'.
  Type 'string' is not assignable to type 'CssVarProperties'.ts(2322)
(property) bg: string

I was thinking about pregenerated color pallets but It will bring some logic for className prop since not all the variants are similar. That's why generated variants look more prettier and readable

[astahmer]

as Record<string, SystemStyleObject> instead of RecipeVariantRecord should fix it I think ?

[kiruushaaa]

Yeah, that seems to be working properly. For RecipeVariantProps to cast variants:

const getSimilarVariantsBase = <T extends string>(variantList: T[]) => {
  return variantList.reduce(
    (variants, name) => {
      variants[name] = { ... };

      return variants;
    },
    {} as Record<T, SystemStyleObject>,
  );
};

export const button = cva({
  base: { ... },
  variants: {
    variant: {
      ...getSimilarVariantsBase(["primary", "secondary"] as const),
    }
  }
});