createTheme() - Type Error: Index signature for type 'string' is missing

[LunatiqueCoder]

Describe the issue

Hello, I tried the example from Theming Components docs, but I faced a minor TypeScript issue. Not sure if I'm doing something wrong.

❌ Type Error:

✅ A pontential workaround would be to cast Record<string, unknown:

Expected behavior

I'd expect no type errors when following instructions from the docs.

Steps to reproduce

1. Create expo project
2. Follow setup instructions
3. Copy this code:

import { css } from 'react-strict-dom';

export const DARK_MODE = '@media (prefers-color-scheme: dark)';

const TOKENS = {
  primaryText: {
    default: 'black',
    [DARK_MODE]: 'white',
  },
  secondaryText: {
    default: '#333',
    [DARK_MODE]: '#ccc',
  },
  accent: {
    default: 'blue',
    [DARK_MODE]: 'lightblue',
  },
  background: {
    default: 'white',
    [DARK_MODE]: 'black',
  },
  lineColor: {
    default: 'gray',
    [DARK_MODE]: 'lightgray',
  },
};

export const DEFAULT_THEME = css.defineVars(TOKENS);

const BRAND_THEME = {
  primaryText: { default: 'purple', [DARK_MODE]: 'lightpurple' },
  secondaryText: { default: 'pink', [DARK_MODE]: 'hotpink' },
  accent: 'red',
  background: { default: '#555', [DARK_MODE]: 'black' },
  lineColor: 'red',
};

export const branding = css.createTheme(DEFAULT_THEME, BRAND_THEME);

4. Use it in root _layout.tsx from expo-router:

import { Slot } from 'expo-router';
import { html } from 'react-strict-dom';

import { branding } from '@/src/theme/constants';
import '@/src/theme/stylex.css';

export default function Layout() {
  return (
    <html.div style={[branding]}>
      <Slot />
    </html.div>
  );
}

Test case

https://github.com/LunatiqueCoder/expo-strict-dom-example

Additional comments

No response

[nmn]

I have seen this type error. I will try to fix this issue soon.