stylex.defineVars

コードベース内のどこでも、stylex.create呼び出し内でインポートして使用できるグローバルCSSカスタムプロパティ（変数）を作成します。

function defineVars<Styles extends {[key: string]: Value}>(
  styles: Styles,
): Vars<{[key in keyof Styles]: string}>;

使用例:

.stylex.js（または.stylex.ts）ファイルで、名前付きのエクスポートとして変数を定義する必要があります。

vars.stylex.js

import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  accent: 'blue',
  background: 'white',
  line: 'gray',
  textPrimary: 'black',
  textSecondary: '#333',
});

その後、任意のstylex.create呼び出しでこれらの変数をインポートして使用できます。

import * as stylex from '@stylexjs/stylex';
import { colors } from './vars.stylex.js';

const styles = stylex.create({
  container: {
    color: colors.textPrimary,
    backgroundColor: colors.background,
  },
});