Type theme object using theme contract?

[MaximKondratev]

I have 3 files:

1. contract.css.ts, that calls createGlobalThemeContract and declares the contract:

export const contract = createGlobalThemeContract(
    {
        color: {
            brand: null,
        }
    },
);

2. light-theme.css.ts with an object, containing contract implementation, but without createGlobalTheme. I need to be able to import that object and use color directly sometimes.

export const lightTheme = {
    color: {
        brand: 'red',
    },
};

3. and the file with createGlobalTheme, importing that contract and lightTheme.

The question is how do I type lightTheme object to be something like

type Contract = {
   color: {
       brand: string
   }
}

export const lightTheme: Contract = { ... }

but infering Contract type from contract itself.

Right now we can not use something like typeof contract, as color will be MapLeafNodes<{ brand: null }, CSSVarFunction>. Yes, when I call createGlobalTheme with contract and object, there will be an error if types don't match, but it would be cleaner to define type of that object in place.

[rothsandro]

Looks like the types needed for that are not exported by VE 😞 but as a workaround you can extract the types from the createGlobalTheme function:

type Contract = ReturnType<typeof createGlobalThemeContract>;
type ContractOf<T extends Contract> = Parameters<typeof createGlobalTheme<T>>[2];
type ThemeContract = ContractOf<typeof contract>;

export const contract = createGlobalThemeContract({});

export const lightTheme: ThemeContract = { /* type-safe */ };

For the light theme you can also use the following syntax to keep the actual value:

export const lightTheme = {
 color: {
    brand: "red"
 }
} as const satisfies ThemeContract;

If you use lightTheme.color.brand somewhere you will not just see that's of type string but the actual value like "red" which can be useful sometimes.

[MaximKondratev]

Thank for the workaround, it works. Is there any change we can extend exports to support it? Should I try to fill pr?