epsitec / theme-standard Goto Github PK

This is a standard for theming of components. Developers and especially publishers of components should use it to unify their theming API across all components.

Currently a number of UI libraries are using different approaches. Some of them are very opinionated and bad by design, others just don't have the desired flexibility.

We can differentiate 3 approaches:

1. Traditional CSS class names.
2. Generated CSS class names.
3. Inline Styles.

In order to allow component authors to use any of this approaches, we need to define a Theme Interface.

• Spec
• React Examples.

A Component author needs to differentiate System Styles from Theme Styles. More styles in a Theme means more flexibility for the user. System styles should be used for parts of components which can not or should not be customizable.

A Theme should define:

1. Font
2. Colors
3. Images
4. Text direction
5. Shadows
6. Rounded Corners
7. Animations
8. Margins
9. Paddings

When components logic uses some Theme property to modify it's behaviour, it should be a Theme Option.

This is an early stage proposal. Feel free to create issues and discribe use cases. Also feel free to make the wording better.