As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal to create a coherent and optimal user journey across all internal and external Infineon digital touchpoints.
This repository contains our design Tokens - so called Atoms.
These tokens are transformed into scss and are available at NPM @infineon/design-system-tokens
- Node >= v14 – if you have nvm installed, you can just run
nvm useto select the right node version. - Yarn >=
1.22.10or npm >=6.14.13
Add this repository to your dependencies in package.json, in your terminal:
npm install --save @infineon/design-system-tokensyarn add @infineon/design-system-tokensNow you can import the assets you need to consume. This currently includes:
├── fonts
│ └── source-sans-3
│ ├── SourceSans3-It.ttf.woff
│ ├── SourceSans3-It.ttf.woff2
│ ├── SourceSans3-Regular.ttf.woff
│ ├── SourceSans3-Regular.ttf.woff2
│ ├── SourceSans3-Semibold.ttf.woff
│ └── SourceSans3-Semibold.ttf.woff2
├── _fonts.scss
└── _tokens.scssInclude / import fonts.scss to get the correct font definitions. You'll additionally have to copy the fonts assets (fonts/) themselves to your publicly available root folder (often times it's called static/ or public/).
An import could, depending on your local setup, for example look like this:
SCSS:
@import "./node_modules/@infineon/design-system-tokens/dist/fonts.scss";To use the current Design Tokens in SASS import them in your project (in your entry point for SASS, commonly something like src/index.scss):
SCSS:
@import "./node_modules/@infineon/design-system-tokens/dist/tokens.scss";This project itself is developed with yarn.
Install all needed dependencies with:
yarn installGenerate a bundle that can be published on npm, adds result in dist/ folder:
yarn bundle