blvdmitry
commented
1 month ago Hi, since Reshaped comes with a design library – there are more limitations compared to completely headless libraries, unless you start building custom variants with the source code.
In terms of what's available, there are 6 colors and 4 variants, so that's 24 styles combined + they all depend on the design tokens. If you just need a black button for both light and dark mode – you're probably looking for "media faded" button. If black if your brand color, you can create a theme with these colors and use a primary button which will be black then.
https://reshaped.so/storybook/index.html?path=/story/components-button--variant
Icon sizes are also matching the design implementation and are aligned with typography and sizes of icons across all components, e.g. icon size in the buttons are the same as icon size in the form fields. Icon sizes also grow with the button, so large buttons have a large icon size too, same as the form fields
I just want to confirm that to ensure I am not missing something here.
I am trying to implement the button component but it seems the colors available are limited to 6 tokens ("media" | "neutral" | "critical" | "positive" | "primary" | "inherit")
So if I want a black button, for example and this black color is not one of this 6 tokens, what should be the approach here? Do I have to use custom class to achieve that?
The same question goes to the Icon size inside of this button