React

[branlok]

Small contribution to button component for better UI/UX and development [#1879].

Goals:

• To improve the button design system for better UI/UX and branding with Kitsu.

Changes proposed in this pull request:

• Button Component API now provides 4 variants + configurables(color, padding)
• Added Outline variant - act as secondary button
• Added Borderless variant - act as tertiary button
• Added Screen variant - button for distracting backgrounds.
• Reintegrated primary variant
• Removed Inverted
• Additional description, configurable, defaults, and examples to Storybook

File notes

• /Button/index.tsx - logic for api and useLayoutEffect for patching button local css var()
• /Button/styles.module.css - logic for style changes button behaviour
• /themes/light.css + /dark.css - added more a list of colors

/cc @NuckChorris @Reinachan

[branlok]

with the latest commit e27d41d

• Added a react custom hook with mutation observer to detect theme changes.*
• fixed default colour set to green for primary button
• fixed borderless text colour match what is provided in alternativeColors.

*This hook can be reused for components that just needs to bind current theme to more complicated styling configuration. One can write out all possible styling into global css space, but i think encapsulate the logic within the component makes things more maintainable. While css space should use sparingly with base colours and/or default values.

[Reinachan]

I feel like you're overcomplicating things a bit when it comes to colouring which ends up giving the button too much responsibility. The button shouldn't be aware of what theme it's being displayed in. That responsibility should be on the colour variables we set at the root. I also feel like your approach to changing colours isn't particularly clean either. I'd suggest you try to use classes for alternative colours like you're doing with other things already.

[branlok]

I feel like you're overcomplicating things a bit when it comes to colouring which ends up giving the button too much responsibility. The button shouldn't be aware of what theme it's being displayed in. That responsibility should be on the colour variables we set at the root. I also feel like your approach to changing colours isn't particularly clean either. I'd suggest you try to use classes for alternative colours like you're doing with other things already.

Thank you honestly, I definitely overcomplicated it 😅 😅 . Without going too far why, I basically made some mistake and misunderstood something with postcss that left me producing some unsatisfactory code which went against DRY principles. So, I went for an alternative to encapsulate the logic in the component which felt reasonable coming from someone whom used a lot of css-in-js.

But anyways, upon backtracking of my stumbles, I did solved my misunderstanding - and I've converted most of the JS code to module.css