How should the code layout be for multiple variants?

[selcukgiray]

// Button variant styles
export const buttonVariant = {
  // Solid variant
  solid: stylex.create({
    primary: {
      backgroundColor: 'red',
    },
    secondary: {
      backgroundColor: 'purple',
    },
  }),

  // Outline variant
  outline: stylex.create({
    primary: {
      border: '1px solid blue',
    },
    secondary: {},
  }),

  // Light variant
  light: stylex.create({
    primary: {},
    secondary: {},
  }),
};

export const Button = ({
  children,
  variant = 'solid',
  color = 'primary',
}: buttonProps) => {
  return (
    <button
      {...stylex.props(buttonBaseStyle.base, buttonVariant[variant][color])}
    >
      {children}
    </button>
  );

};

Is this the right way to use it? Does it make sense to call a nested create function like this? Is there a better way to use it?

[nmn]

Does it make sense to call a nested create function like this?

No. This is not allowed. Create multiple top-level variables instead named buttonVariant, buttonColor etc.

[selcukgiray]

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

const styles = stylex.create({
  violet: {
    backgroundColor: {
      default: 'blueviolet',
      ':hover': 'darkviolet',
    },
    color: 'white',
  },
  gray: {
    backgroundColor: {
      default: 'gainsboro',
      ':hover': 'lightgray',
    },
  },
  // ... more variants here ...
});

It's easy to manage colors in this way, but when outline, light, etc. options come into play, I found it a bit complicated to manage the situation. Do you have a chance to give a very short sample code for this situation?

[nmn]

I don't understand your question. What becomes complicated?

[selcukgiray]

Complexity arises when I want to use variants (solid, outline, light) and colors (danger, success). I created variables as you said, but I couldn't find a way how to use these two together.

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

export const buttonVariants = stylex.create({
  solid: {},

  outline: {},

  light: {},
});

export const buttonColors = stylex.create({
  danger: {},

  success: {},
});

The following usage is incorrect, but maybe it makes my point better.

export const buttonVariants = stylex.create({
  solid: {
    danger: {
      backgroundColor: 'Red',
    },

    success: {
      backgroundColor: 'green',
    },
  },

  outline: {
    success: {
      border: '1px solid green',
    },
  },

  light: {},
});

use in the component

export const Button = ({
  children,
  variant = 'solid',
  color = 'primary',
}: buttonProps) => {
  return <button className={buttonVariants[variant][color]}>{children}</button>;
};

This is exactly what I want to do, I hope I have made myself clear. How can I use stylex correctly for such a structure? I apologize for taking your time, thank you.

[nmn]

The simplest option is to lean on style composition:

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

const buttonVariants = stylex.create({
  solid: {
    borderWidth: 0,
    borderStyle: 'none',
    borderColor: null,
  },
  outline: {
    borderWidth: 1,
    borderStyle: 'solid',
    backgroundColor: 'transparent',
  },
  light: {...},
});

const buttonColors = stylex.create({
  danger: {
    backgroundColor: 'red',
    borderColor: 'red',
  },
  success: {
    backgroundColor: 'green',
    borderColor: 'green',
  },
});

export const Button = ({
  children,
  variant = 'solid',
  color = 'primary',
}: buttonProps) => {
  return <button {...stylex.props(
    buttonColors[color],
    buttonVariants[variant],
  )}>
    {children}
  </button>;
};

The last style applied wins, so the variant will remove the background of ouline accordingly.

The second option is to simply flatten your list of variants:

const buttonVariants = stylex.create({
  solid_danger: {
    backgroundColor: 'Red',
  },
  solid_success: {
    backgroundColor: 'green',
  },
  outline_success: {
    border: '1px solid green',
  },
  ...
});
export const Button = ({
  children,
  variant = 'solid',
  color = 'primary',
}: buttonProps) => {
  return <button className={buttonVariants[`${variant}_${color}`]}>{children}</button>;
};

Finally, the third option is to using CSS variables using the theming APIs. I don't think that should be necessary in this case though.

[selcukgiray]

Thank you very much!