Infineon Design System Tokens

About The Project

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

Requirements

• Node >= v14 – if you have nvm installed, you can just run nvm use to select the right node version.
• Yarn >= 1.22.10 or npm >= 6.14.13

Usage

Add this repository to your dependencies in package.json, in your terminal:

npm install --save @infineon/design-system-tokens

yarn add @infineon/design-system-tokens

Now 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.scss

Include / 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";

Local Development

Installation

This project itself is developed with yarn.
Install all needed dependencies with:

yarn install

Bundle

Generate a bundle that can be published on npm, adds result in dist/ folder:

yarn bundle