@danske/sapphire-css

This is the implementation of Sapphire design system as css style rules.

List of Styles

To view the list of available classes you can npm run storybook from this folder.

Use a style/class

npm i @danske/sapphire-css

After this you can import css and start using it.

import '@danske/sapphire-css/button/button.module.css';

const MyApp = () => {
  return (
    <button class="sapphire-button sapphire-button--primary">
      Primary button
    </button>
  );
};

You will find more example in storybook documentation

Themes

Each theme is available in .css and .js format. Both of them import the corresponding css files for that theme. The default export of the .js format is the theme's css class. It also exports tokens object.

Themes can be imported from @danske/sapphire-css/themes/ path:

In css:

@import '~@danske/sapphire-css/themes/default.css';

In js/ts:

import defaultThemeClass, { tokens } from '@danske/sapphire-css/themes/default';