Generic theme to add styles to all SUI components

Usage no npm install needed!

<script type="module">
  import advUiSuiTheme from 'https://cdn.skypack.dev/@adv-ui/sui-theme';


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.


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:

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';


If you need to update any of these variables please pull request.