Thermal design system

[mittalyashu]

Use Vue components everywhere to build the application from a small button to a diff preview component.

Split the components into a separate package so it can be used across Thermal ecosystem (Application, Website, and Marketing).

Questions

• Should we style the components inline or in separate .sass file?
• How to name component and props?
• Is it the best way to use mixins for spacing, font and border?
• How can we leverage sass variables in Vue components?

PRs

• [x] #111 TModal Modal component
• [x] #115 TScrollbar Scrollbar Layout
• [x] #125 TButton Button component
• [x] #128 TFlexbox Flexbox Layout
• [x] #137 TContainer Container Layout
• [ ] TSwitch Switch component
• [ ] TLink Link component
• [ ] TText Text component
• [ ] TIcon Icon component
• [ ] TInput Input component
• [ ] TRadio Radio component
• [ ] TImage Image component
• [ ] TTag Tag component
• [ ] TDropdown Dropdown component
• [ ] TNotification Notification component
• [ ] TTooltips Tooltips component
• [ ] Default color provider

References

• https://github.com/gitthermal/thermal/issues/38

We are looking for a more modular way to define and use Vue components for the long term, if you have any feedback or suggestion, 🙏🏻 please drop them in the comment section below.

[naclcaleb]

Hey @mittalyashu, I asked you about Thermal a couple days ago on Hashnode, and decided I'd take a look.

I'm not really sure what needs to be done for this issue, but I'm happy to help where I can.

I don't have a ton of time though, because I'm busy working on my own app.

[mittalyashu]

Hello @naclcaleb, Glad to see you here and thanks for checking out this project.

This issue is about splitting the Vue component from the Thermal application and move it to a separate package to create a Thermal Design System.

[naclcaleb]

It looks like next is something called "Toggle slider"?

[mittalyashu]

This is a toggle slider.

Currently, we are using a third-party NPM package, but we want to build our own custom Vue component.