defineVars not playing nicely with variable types

[prests]

Describe the issue

Full transparency I'm not sure if this is a stylex bug or vite-plugin-stylex but lets start here and go from there!

I'm new to stylex and I'm trying to use stylex to create a token system using stylex's variables, but I'm running into issues utilizing stylex's variable types within defineVars. I'm being told the the default values for my variables are not defined

Expected behavior

I'd expect default for my variables to be defined.

Steps to reproduce

Example:

Types File

// types.ts
import type { DARK } from '../constants/themes';
import type { types } from '@stylexjs/stylex';

type Color = ReturnType<typeof types.color<string>>;

interface ColorThemeToken {
  default: Color;
  [DARK]: Color;
}
interface ThemeTokens {
  color_action_background_primary: ColorThemeToken;
  color_action_background_primary_hover: ColorThemeToken;

  color_action_text_primary: ColorThemeToken;
}

export type { ThemeTokens };

variables file

// variables.stylex.ts
import * as stylex from '@stylexjs/stylex';

import type { ThemeTokens } from '../types/themes';

/**
 * @HACK - StyleX Does not support importing other const currently. They need to be defined statically
 *
 * Open RFC to support this behavior: https://github.com/facebook/stylex/discussions/502
 */
const DARK = '@media (prefers-color-scheme: dark)' as const;

export const themeTokens = stylex.defineVars<ThemeTokens>({
  color_action_background_primary: { default: stylex.types.color('black'), [DARK]: stylex.types.color('white') },
  color_action_background_primary_hover: { default: stylex.types.color('grey'), [DARK]: stylex.types.color('white') },
  color_action_text_primary: { default: stylex.types.color('white'), [DARK]: stylex.types.color('black') },
});

component

// component.tsx
const styles = stylex.create({
  base: {
    color: themeTokens.color_action_text_primary,
  }
})

Test case

I tried using the Next + Stylex playground on the docs page but honestly wasn't seeing any of my variables being applied. I'm not a Next user so apologies if I just missed something simple.

https://stackblitz.com/edit/stylex-next-g5wmio?file=app%2Fpage.tsx

If anyone can point out what I'm doing wrong to even setup a basic variable here I will update it to show the full issue I'm having.

Additional comments

No response

[nmn]

There is a small mistake. The stylex.types.color() function should be outside the entire object of possible values:

See: https://stackblitz.com/edit/sb1-tu4v6l?file=src%2Fvariables.stylex.ts

export const themeTokens = stylex.defineVars<ThemeTokens>({
  color_action_background_primary: stylex.types.color({
    default: 'black',
    [DARK]: 'white',
  }),
  color_action_background_primary_hover: stylex.types.color({
    default: 'grey' as string,
    [DARK]: 'white' as string,
  }),
  color_action_text_primary: stylex.types.color({
    default: 'white' as string,
    [DARK]: 'black' as string,
  }),
});

This is to ensure that all values for a variable have the same type.