Theme should be able to selectively overwrite vars based on which is defined or not

[olivierpascal]

Is your feature request related to a problem? Please describe.

I would like to have an option to make stylex.createTheme() to selectively overwrite vars, instead of overwriting all vars from the base var group.

Here is my usecase:

A themeable Button, themed by a global theme, which could be selectively overridden by a variant theme (ie. Rounded Button, Filled Button, Outlined Button, Elevated Button, ...), which could be selectively overridden by a theme provided in props (ie. Blue Rounded Button).

Today it is not possible to do so, because each theme embed all base vars, so I cannot just create a variant with a different text color.

Also, it is not possible to just copy all the base var group because it depends of the global/variant theme used.

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

const vars = {
  background: 'transparent',
  size: '40px',
  borderRadius: 'none',
  // ...a lot of other properties
};

export const styleXVars = stylex.defineVars(vars);
export const globalTheme = stylex.createTheme(styleXVars, vars);

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

import { styleXVars, globalTheme } from './tokens.stylex';

// Variant: make a Rounded Button
const roundedTheme = stylex.createTheme(styleXVars, {
  borderRadius: '10px',
});

const styles = stylex.styles({
  container: {
    backgroundColor: styleXVars.background,
    // ...
  },
});

export const RoundedButton = ({ overridenTheme = undefined }) => {
  const globalTheme = useComponentTheme('Button'); // returns globalTheme
  const variantTheme = useComponentTheme('RoundedButton'); // returns roundedTheme

  return <div {...stylex.props({ globalTheme, variantTheme, userTheme, styles.container })}>...</div>
};

// Possible usage: make a blue rounded button
// const blueRoundedTheme = stylex.createTheme(styleXVars, { background: 'blue' });
// <RoundedButton overridenTheme={blueRoundedTheme} />

You may say that it does not comply with the stylex philosophy or, or that my usage is incorrect, but i would love to hear from you about this usecase. Thanks.

[nmn]

This is already fixed on main and will be in the next release.

[olivierpascal]

Just to be sure that we are on the same page @nmn, I am not talking about the typing limitation that requires all group var to be overwritten in a theme (#188), but rather the way that the vars are overwritten (the entire var group is always overwritten even if only one var is set in theme).

[nmn]

Thanks for the clarification. When multiple themes for the same varGroup are applied on the same element, the last applied theme wins. This is a core design decision. This is because varGroups and themes don't generate atomic CSS rules. (We don't want to set 20-30 classNames to set a theme)

What you're trying to achieve can be done by using stylex.create instead of stylex.createTheme

---

Now let me help with your code.

1. You don't need globalTheme, since defineVars is the default value

2. You can use stylex.create to override a few variables at a time.

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

import { styleXVars, globalTheme } from './tokens.stylex';

const styles = stylex.create({
  roundedTheme: {
    [styleXVars.borderRadius]: '10px',
  },
  container: {
    backgroundColor: styleXVars.background,
    // ...
  },
});

export const RoundedButton = ({ overridenTheme = undefined }) => {
  const variantTheme = useComponentTheme('RoundedButton'); // returns roundedTheme

  return <div {...stylex.props({ globalTheme, styles.roundedTheme, variantTheme, styles.container })}>...</div>
};

[olivierpascal]

When multiple themes for the same varGroup are applied on the same element, the last applied theme wins. This is a core design decision. This is because varGroups and themes don't generate atomic CSS rules. (We don't want to set 20-30 classNames to set a theme)

I understand, but what I mean is that if a varGroup has 30 vars, and I create a themeA overwriting all 30 vars, then another themeB overwriting only 1 var, and applying it with stylex.props({ themeA, themeB }), would it be possible to compile to:

// pseudocode
{
  ...varGroup,
  ...themeA,
  ...themeB,
}

instead of

{
  ...varGroup,
  ...themeB,
}

The last theme still win because vars are overriden, but non-overriden vars from themeA are still presents.
I don't think it requires atomic CSS rules, please correct me if I'm wrong

[olivierpascal]

Also, as you are "changing the types to allow overriding a subset of variables in the next release" (#188 (comment)), I think it's quite counter intuitive that the compiled code does not match with this statement when multiple themes are applied.

[nmn]

stylex.props(themeA, themeB),

In your example, you need to define themeB with stylex.create instead of stylex.createTheme. Then you can apply both. Themes are designed to be exclusive.

We will look into better documentation, but the createTheme function exists solely for better performance. stylex.create can already be used to override variables, but it generates atomic classes, i.e a separate class for each variable set.

createTheme creates a single className that sets all the variables within. Therefore, we can't merge multiple "themes" deterministically.

But we can merges 1 Theme and many stylex.create "themes" together.