@finastra/fds-theme
npm i @finastra/fds-theme

@finastra/fds-theme

The Finastra Design System provided as a theme and Angular components

by Finastra

0.0.32 (see all)License:MITTypeScript:Not Found
npm i @finastra/fds-theme
Readme

The FINASTRA Material 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';

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';
  • 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 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');

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

<my-container class="light-theme"></my-container>

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';

Usage

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 good first issue badge

Downloads/wk

32

GitHub Stars

75

LAST COMMIT

4mos ago

MAINTAINERS

3

CONTRIBUTORS

37

OPEN ISSUES

11

OPEN PRs

4
VersionTagPublished
0.0.32
latest
6d ago
No alternatives found
No tutorials found
Add a tutorial