Package detail

@s-ui/theme

SUI-Components28.9kMIT8.134.0

Generic theme to add styles to all SUI components

theme, styles, css, scss

readme

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.

Links

changelog

CHANGELOG

8.134.0 (2025-05-05)

Features

  • use native functions to lighten and darken colors (55b220c)
  • use white and black variables from theme (e7c082c)

8.133.0 (2025-02-24)

Features

8.132.0 (2025-02-04)

Bug Fixes

Features

  • necessary for proper light-dark switch make sense (6d03021)

8.131.0 (2025-01-28)

Bug Fixes

  • revert color-schema rule (597e2c3)

8.130.0 (2025-01-25)

Features

  • prepare the a11y light dark mode (ac536e3)

8.129.0 (2025-01-07)

8.128.0 (2025-01-07)

Features

8.127.0 (2024-05-06)

Bug Fixes

8.126.0 (2023-02-21)

Features

  • packages/sui-theme: add mixin to hide scrollbars when required (218c16d)

8.125.0 (2022-11-22)

Features

  • packages/sui-theme: add new molecule select and autosuggest tokens to theme (72a630a)

8.124.0 (2022-09-29)

Bug Fixes

  • packages/sui-theme: remove not required rimraf dependency (d648db5)

8.123.0 (2022-09-05)

Features

  • packages/sui-theme: add new classes folder (016d381)
  • packages/sui-theme: add spacing utils (5568faa)
  • packages/sui-theme: create in same file spacing classes (0f3bd24)
  • packages/sui-theme: update classes tree directory (f8de229)

8.122.0 (2022-02-08)

Bug Fixes

  • packages/sui-theme: set proper emmet naming to border radius (7aa54b1)

Features

  • packages/sui-theme: add new variables to dropdown basic and user (a19c94c)

8.121.0 (2022-01-31)

Features

  • packages/sui-theme: Add new box shadow size variable (a26c335)

8.120.0 (2022-01-24)

8.119.0 (2022-01-18)

Features

  • packages/sui-theme: add new link font weight variable (fcb4e3f)
  • packages/sui-theme: add new variable (a22335a)

8.118.0 (2022-01-11)

Bug Fixes

  • packages/sui-theme: fix variable declaration order (d7ab7a9)

8.117.0 (2022-01-10)

Features

  • packages/sui-theme: allow to overwrite the card article description color (3f95a1c)

8.116.0 (2021-12-02)

8.115.0 (2021-12-02)

Features

  • packages/sui-theme: add new variable: border input focus (f695ef2)

8.114.0 (2021-11-26)

Features

  • packages/sui-theme: Avoid using copyfiles dependency for copying files (5079245)

8.113.0 (2021-11-11)

Bug Fixes

  • packages/sui-theme: add deleted styles again to s-ui theme in order to fix breaking change in o (05d7d98)

8.112.0 (2021-11-10)

Features

  • packages/sui-theme: Scss changes for the atom input (eae13ef)

8.111.0 (2021-11-08)

Features

  • packages/sui-theme: Add default values for thumbnail basic (683d079)
  • packages/sui-theme: Add default! to avoid being overwritten (b7fdb82)

8.110.0 (2021-10-29)

Bug Fixes

8.109.0 (2021-10-28)

Bug Fixes

8.108.0 (2021-10-28)

Bug Fixes

  • packages/sui-theme: icon sizes depends on its own token (92f92fd)
  • packages/sui-theme: lint (3e66860)
  • packages/sui-theme: misspelling (c640394)

Features

  • packages/sui-theme: Sets the default gitd system syze base. Start using it. Fixes the addition (b67ffa9)

8.107.0 (2021-10-27)

Features

  • packages/sui-theme: add mixins to be used instead of extends (4dda7da)

8.106.0 (2021-10-15)

Features

  • packages/sui-theme: add new bdrs circular (a98881d)
  • packages/sui-theme: Add new l and xl input sizes (66a0e02)

8.105.0 (2021-09-23)

Features

  • packages/sui-theme: make url final slash optional (81edf12)

8.104.0 (2021-07-06)

Features

  • packages/sui-theme: add color for tiktok social brand (56eca1b)

8.103.0 (2021-06-22)

Bug Fixes

  • packages/sui-theme: Fix lint errors (60a1316)

Features

  • packages/sui-theme: Migrate to avoid using slash as division on SASS (7bf3399)

8.102.0 (2021-05-28)

Bug Fixes

  • packages/sui-theme: use as described in docu (8e7b2d7)

Features

  • packages/sui-theme: remove clean (8771c04)

8.101.0 (2021-05-28)

Bug Fixes

  • packages/sui-theme: lib script copy path (e066e24)

8.100.0 (2021-05-27)

Bug Fixes

  • packages/sui-theme: Force new release of theme (f1cd9b9)
  • packages/sui-theme: Release correctly sui-theme (b363f7b)

8.99.0 (2021-05-27)

Features

  • packages/sui-theme: ad gap variables (ba878f3)

8.98.0 (2021-04-20)

Features

  • packages/sui-theme: moved the sui-theme repo here (654b877)
  • packages/sui-theme: update latest changes (877866f)