Currently we are banning the use of style={Button.styles.flat}
and highlight={true}
at the same time:
https://github.com/moaijs/moai/blob/d0f010471aa14fd1b81b6f8c9a9609e8f92ca322/core/src/button/button.tsx#L103-L106
As we can see this is only a "soft" ban, which means we throw a run-time error to prevent the users from using them, without any technical limitation. In fact, previously we avoid this only because we haven't sure what should it look like. Now we have.
To start with this issue, first see that the "style" prop of Button is not a string, but an object. This allows Moai's themes can extend and modify the styles properly. However, it's pretty simple, a ButtonStyle is simply a group of classes to be applied to the button tag under different situations:
https://github.com/moaijs/moai/blob/d0f010471aa14fd1b81b6f8c9a9609e8f92ca322/core/src/button/button.tsx#L11-L16
And there are 2 pre-defined styles: "outset" and "flat":
https://github.com/moaijs/moai/blob/d0f010471aa14fd1b81b6f8c9a9609e8f92ca322/core/src/button/button.tsx#L157-L170
Which come from these 2 CSS Module files:
https://github.com/moaijs/moai/blob/d0f010471aa14fd1b81b6f8c9a9609e8f92ca322/core/src/button/button.tsx#L8-L9
Notice that the "flat" style does not have a class for "highlight" field. Meanwhile, the "outset" style does, which is why outset buttons have highlight style, but flat button does not.
Our job here is to define the "highlight" CSS for the "flat" style, which should be coded inside "flat.module.css", and referenced at Button.styles.flat.highlight (replace the empty string).
The CSS is simple, it should set the button text to our primary color, something like this:
:global(.light) .highlight {
color: var(--highlight-7);
}
:global(.dark) .highlight {
color: var(--highlight-5);
}
To test your work, just run the storybook locally (yarn storybook), and look for the Button story, then set "style" to "flat" and "highlight" to "true". If it shows a blue text, you should PR!