SUI Components Theme
This repository contains:
- Generic variables to initialize default values and component styles.
- A set of placeholders ready to style your component (buttons, tabs, forms, grid system...).
- Functions and mixins helpers.
Usage
Import sui-theme into your sui-component including the path in index.scss:
@import '../node_modules/@schibstedspain/sui-theme/lib/index';
If you want to customize your components, create your own theme and add it to your component just before the sui-theme import.
@import '../custom-settings';
@import '~@schibstedspain/sui-theme/lib/index';
Upgrade from theme-basic@7
Compatibility variables are still available to import manually.
Import only what you need, in inheritance order
For instance:
@import '../custom-settings';
@import '~@schibstedspain/sui-theme/lib/settings-compat-v7/color';
@import '~@schibstedspain/sui-theme/lib/settings-compat-v7/spacing';
@import '~@schibstedspain/sui-theme/lib/index';
Find below de compat varible groups available:
- settings-compat-v7/color
- settings-compat-v7/font
- settings-compat-v7/spacing
- settings-compat-v7/box-style
- settings-compat-v7/animation
- settings-compat-v7/layout
- settings-compat-v7/components
Also, if you need it all for older components, you can do
@import '~@schibstedspain/sui-theme/lib/settings-compat-v7/index';
@import '~@schibstedspain/sui-theme/lib/index';
Update
If you need to update any of these variables please pull request.