Detail Styling solution for the new system

[andresin87]

Definition of Done

Each client should be able

• Customise its theme
• Apply different versions of a component (props to select size, colours, etc)
• Extend the default version with a new visual aspect (change size or colour on the go)
• Define the theme once in the App and all components to be themed at the same time (instead of importing the style in each component every-time)
• Ability to have mode themes (dark-mode, light-mode, etc)
• All clients must share the same naming convention of tokens
• ...

We agree on the following

• Both PoC use CSS custom properties
• Both solve how a brand can use the theming outside of the components
• Both PoC need to be able to manage component level customisation

PoC 1: (Tailwind)

• https://github.com/Powerplex/vite-storybook-poc

Opinions (we don't know until we test)

• Utility classes: You can clearly see the style intent directly in the HTML tag
• Performance: Bigger HTML, Smaller CSS
• Performance: Less CLS (cumulative layout shift)

Pros

• Dev experience: Tailwind is something you get used to
• Faster to kick-off (implement) and maintenance
• Auto-completion
• Performance: We can optimise the lines of CSS delivered to the user
• No need to think about classNames
• Tailwind comes with a threshold: initial size is bigger but trims out whatever is not used
• Community support - (not the biggest of the market, but bigger than CSS Custom Properties)
• CS doesn't grow
• Better optimised once implemented on the client

Cons

• Steers away from a native solution
• Adds an extra layer
• Involves an external tool we don't own
• Tailwind is young (risk is bigger because not a lot of big players are using it to create their DS)
• More verbose in HTML
• More classes for the base style
• Bigger learning curve
• Some developers have aversion to Tailwind
• Readability concerns
• Mix of styling strategies on the client side
• A bit more config to setup a project

PoC 2 (Native CSS)

• [PoC] Custom Properties - Stage 1 SUI-Components/sui-components#2470
• https://github.com/kikoruiz/poc-design-system

Pros

• Less verbose HTML
• Smaller learning curve (initially)
• Closer to language
• Be able to define our own CSS Custom Properties

Cons

• No auto-completion (could be fixed but not out of the box)
• No auto-completion: Harder to customise component's styles from the outside (need to know the naming of the custom properties)
• Developer experience
• Slower to kick-off (implement) and maintenance
• Needs a classNames definition

[andresin87]

1 - Tailwind

[andresin87]

2 – Native CSS

[kikoruiz]

As a Web team, we have agreed on using Tailwind for the theming/styling solution of Spark DS.