The FINASTRA Theme is a SCSS implementation of the FINASTRA Design System. It features FINASTRA's branding of foundations (color, typography, spacing, elevation).

Quick start 🤔

You can get started in 2 simple steps:

Install the dependency

npm install @finastra/fds-theme

Use the theme in your app's main stylesheet to get the custom properties initialized, including Sass mixins for color, spacing, elevation and typography.

@use '@finastra/fds-theme/all-themes';

Theming 🖌️

FDS theme supports both light and dark theme.

SASS

If you are coding in SASS you have 3 different ways to load the theme of your preference

• By loading only custom properties

@use '@finastra/fds-theme/light';
//or
@use '@finastra/fds-theme/dark';
//or
@use '@finastra/fds-theme/all-themes';

• By using mixins directly inside your container

@use '@finastra/fds-theme' as fds;

  .my-container {
    @include fds.use-light-theme();
    //or
    @include fds.use-dark-theme();
    //or
    @include fds.use-all-themes();
  }

• Or by simply putting your class name in the @use rule

@use '@finastra/fds-theme/light' with ($class: 'light-theme');
//or
@use '@finastra/fds-theme/dark' with ($class: 'dark-theme');
//or
@use '@finastra/fds-theme/all-themes' with ($class: 'my-container');

Note that you should use the same class name in your html

<div class="light-theme"></div>

Using a pre-built theme

You can use FDS theme without Sass by using a pre-built theme

@import '@finastra/fds-theme/prebuilt/light';
/* or */
@import '@finastra/fds-theme/prebuilt/dark';
/* or */
@import '@finastra/fds-theme/prebuilt/all-themes';

Usage

• Color
• Elevation
• Spacing
• Typography

Want to help? 🤗❤️

Want to file a bug, contribute some code, or improve documentation? Excellent!

If it's your first time contributing, use the tag