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.

Links

SUI Breakpoints implementation
SUI Media Query implementation

FAQs

What is @s-ui/theme?

Is @s-ui/theme popular?

Is @s-ui/theme well maintained?

Last updated on 21 Feb 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install