Design system following Google's Material Design 3 specs

[olivierpascal]

Hello,

I am using StyleX to create a design system following Google's Material Design 3 specs. It is fully themable, supports dark mode and has type-safe APIs, styles and themes.

https://github.com/sixui/sixui

No documentation website yet, but the README.md is full of screenshots and storybook is deployed on https://www.sixui.com.

It is not bulletproof yet and although it is already used in some projects in production, please consider it as a non-stable library.

Example with AssistChip component (demo on storybook, Google specs):

[nmn]

Looking at the implementation it looks like you've created some kind of custom wrapper function around stylex.props called sxf which is then using strings instead styles directly.

It is preferable for you to define and apply styles in the same file as that gets more optimised. The fewer abstractions you create the better.

I also some code that looked like this:

styles={[theme.elevationStyles, ...asArray(innerStyles?.elevation)]}

Again, I'm not sure what the asArray function is doing, but just so you know stylex.props can handle arbitrarily nested arrays and you don't need to flatten them out. So there should be no need to spread or wrap in an array.

[olivierpascal]

I agree that the fewer abstractions the better for stylex. Using stylex to create a design system works, has several advantages but is not always straightforward in my opinion and require sometimes to deviate from the recommended way of doing things.

The reason why I use a strings based sxf wrapper is because I combine multiple sources to style a component:

1. the main theme (ie. to style a Button)
2. zero or more theme variants (ie. to style a FilledButton)
3. an optional styles prop (ie. to customize the look & feel of the FilledButton for a specific use)

Also, style names are type-safe which is convenient and future-proof for users who want to write their own styles.

Finally, sxf wrapper may add data attributes that can be used to style hovered, focused and pressed visual states of the element and its children.

So when I use <div {...sxf('label')} />, it can be roughly equivalent to <div {...stylex.props(mainTheme.label, variantTheme.label, stylesFromProps.label)} data-focused data-hovered />.

Does it make more sense to you?

[nmn]

It makes sense, and as far as StyleX usage, it's valid, but I do think it's more complex than it should be.

I feel like you should have a single global theme with variables you use in all your components, and have a Label component with it's styles defined within.

Then, a user should be able to pass in style prop to override styles. The style prop should optionally accept a function so you can pass the hovered, focuses etc. states.

All of this would make your implementation much simpler IMO.

That said, I'm obviously missing lots of context and the complexity might make sense for your use-case.

[cgatian]

The style prop should optionally accept a function so you can pass the hovered, focuses, etc. states.

@nmn asking a lot here, but do you mind providing a small example?

[cgatian]

Perhaps something like this? I still would like to understand what you're thinking for function-based overriding.

Button.tsx

type Variant = 'default' | 'outline' | 'destructive' | 'ghost';
type ButtonProps = {
    variant?: Variant;
    styles?: stylex.StyleXStyles;
    override?: Partial<Record<Variant, stylex.StyleXStyles>>;
} & ComponentProps<'button'>;

export function Button({ variant, styles, override, ...props }: CustomButtonProps) {
    return (
        <button
          {...stylex.props(
            btnStyles.default,
            variant && btnStyles[variant],
            variant && override && override[variant],
            styles
          )}
          {...props}
        />
      );
}

CustomButton.tsx

type CustomButtonProps = ComponentProps<typeof Button>;

const customStyles = stylex.create({
      destructive: {
        backgroundColor: 'cornflowerblue'
      },
  });

export function CustomButton({ ...props }: CustomButtonProps) {
  return  <Button {...props} override={{
    destructive: customStyles.destructive
  }} />;
}

[nmn]

This is one valid way to do this, but for a design system component, the style prop can optionally be a function:

type BtnState = {hovered: boolean, pressed: boolean, focused: boolean};
type ButtonProps = {
    variant?: Variant;
    styles?: StyleXStyles | (btnState: BtnState) => StyleXStyles;
} & ComponentProps<'button'>;

export function Button({ variant, styles, override, ...props }: CustomButtonProps) {
    return (
        <button
          {...stylex.props(
            btnStyles.default,
            variant && btnStyles[variant],
            typeof styles === 'function'
              ? styles({hovered, pressed, focused})
              : styles
          )}
          {...props}
        />
      );
}

And then you can use it like so:

<Button styles={({hovered, pressed, focused}) => [
  styles.base,
  hovered && styles.hoveredStyles,
  pressed && styles.pressedStyles,
  focused && styles.pressedStyles
]} />

[cgatian]

Wow, thank you for taking the time out of your day to lend a hand. Pattern makes sense.