@s-ui/theme NPM

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

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

Media queries and breakpoints

Rules & Definitions

Breakpoints must be exactly xxs, xs, s, m, l, xl, xxl
For new implementations, the only allowed media query is media-breakpoint-up
media-breakpoint-down, media-breakpoint-only and media-breakpoint-between are deprecated and only kept for legacy reasons.

Reason

We want to create all our components mobile first

Legacy components

Keep in mind that refactoring legacy components in order to make it rules compliant would suppose a breaking change, so a new major must be released.

@s-ui/theme v8.127.0