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.

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:

• settings-compat-v7/color
• settings-compat-v7/font
• settings-compat-v7/spacing
• settings-compat-v7/box-style
• settings-compat-v7/animation
• settings-compat-v7/layout
• settings-compat-v7/components

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