Skip to main content

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.