search

codeanitdotcom / codeanitdotcom.github.io

codeanit.com by @codeanit
https://codeanit.com
MIT License
0 stars 1 forks source link

Implement Design System #17

Closed anitsh closed 3 years ago

anitsh commented 4 years ago

Objective: Analyze and implement a design system.

Branch: feat#17-design_system

What is Design System? Link

Problem:

The current theme system does not follow Theme Specification.

Context:

Emotion is used as Style System at the moment. And there isn't any standard design system implemented.

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. https://emotion.sh/docs/introduction

'emotion-theming' package from Emotion is used for theming. Theming is accomplished by placing the ThemeProvider component at the top of the React component tree and wrapping descendants with the withTheme higher-order component.
https://emotion.sh/docs/theming https://emotion.sh/docs/emotion-theming

Design Systems Under Review:

Primer, a GitHub’s design system. https://primer.style Primer React is a React implementation of GitHub's Primer design system with Gatsby implementation example. Principles:

  • Everything is a component.
  • Aim for total style encapsulation; don't rely on inheritance to provide default styles.
  • Build small building blocks with minimal props to keep complexity low.
  • Keep system constrained by only including props needed per component.
  • Favor wrapping or extending components for more complex operations.
  • Maintain design system consistency with utilities as props (for spacing, color, font-size, line-height, widths, and radii).

Rebass: React primitive UI components built with Styled System https://rebassjs.org/getting-started Rebass is another design system that is probably good to use.

ThemeUI is also another design system. https://theme-ui.com https://theme-ui.com/getting-started

Badge also looks useful design system from Priceline. https://priceline.github.io/design-system/Badge

Polaris Shopify's Design System https://polaris.shopify.com

System UI is an open source organization that houses a Theme Specification https://system-ui.com

anitsh commented 3 years ago

Spending some time in analysis and attempting to implementing new design system, I have come to realize that it will takes longer and more time to completely upgrade. And this process needs to be small incremental steps. Hence this task is closed.

Some of the Primer components has been integrated but the complete Theme integration by moving the Theme to the existing platform is not done as the existing implementation style differs significantly. For the further analysis of Primer is done at https://github.com/codeanit/til/issues/198