Scania Digital Design System - Typography package

This package contains both SCSS and CSS files available

• SCSS available for import
• CSS classes to apply typography properties based on tokens
• CSS variables for font-family

How to install with npm

1> npm i @s-ds/typography

How to use

See all available tokens in digitaldesign.scania.com

1// style.scss
2// you need to have sass compiler in your application
3@import '~node_modules/@s-ds/typography/dist/scss/mixins';
4@import '~node_modules/@s-ds/typography/dist/scss/tokens';
5
6// use SDDS mixin type-style(token-name) to add specific token properties
7.my-headline {
8    @include type-style('headline-01');
9}
10
11// Result for code above:
12.my-headline {
13  font-family: "Scania Sans Headline", Arial, Helvetica, sans-serif;
14  font-weight: bold;
15  font-size: 10rem;
16  line-height: 10rem;
17  letter-spacing: 0em;
18}
19
20// OR
21// use in HTML as a class
22//.sdds-{token-name}
23<p class="sdds-headline-01">
24  This is a headline
25</p>