stylex.defineVars

Creates global CSS Custom Properties (Variables) that can be imported and used within stylex.create calls anywhere within a codebase.

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

Example use:

You must define your variables as named exports in a .stylex.js (or .stylex.ts) file.

vars.stylex.js

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

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

You can then import and use these variables in any stylex.create call.

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

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