/sui-theme

Basic theme containing a set of generic variables to initialize default values.

Primary LanguageSCSS

SUI Components Theme

⚠️ This repo has been moved to https://github.com/SUI-Components/sui/tree/master/packages/sui-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

Install sui-theme in your project:

npm install @s-ui/theme --save

Import sui-theme into your sui-component including the path in index.scss:

@import '~@s-ui/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 '~@s-ui/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 '~@s-ui/theme/lib/settings-compat-v7/color';
@import '~@s-ui/theme/lib/settings-compat-v7/spacing';
@import '~@s-ui/theme/lib/index';

Find below de compat varible groups available:

Also, if you need it all for older components, you can do

@import '~@s-ui/theme/lib/settings-compat-v7/index';
@import '~@s-ui/theme/lib/index';

Update

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