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

• Modal components #111 TModal Modal component
• Scrollbar layout #115 TScrollbar Scrollbar Layout
• Button components #125 TButton Button component
• TFlexbox layout #128 TFlexbox Flexbox Layout
• TContainer layout #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

• Styling in components #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.