Demant Design Tokens

This is design tokens for the Demant digital design system.

Usage

Add the design tokens and its peer dependencies to your project:

# using npm
npm install @manyone/demant-tokens

Docs

To read the documentation, please visit Demant Digital Design System Documentation (Storybook).

Importing styles

// SCSS

// import sass variables and a sass map named $tokens-shared
@import "@manyone/demant-tokens/scss/shared-map.scss";

// import extend named %tokens-shared
@import "@manyone/demant-tokens/scss/shared-extend.scss";

// import sass variables
@import "@manyone/demant-tokens/scss/shared.scss";

// CSS

// import css variables on :root
@import "@manyone/demant-tokens/css/shared.css";

// JS

// import all variables as tokensShared
import * as tokensShared from "@manyone/demant-tokens/js/shared.js";

// import a single variable
import { CoreColorBlue500 } from "@manyone/demant-tokens/js/shared.js";

// JSON

// import all variables as an object
import sharedTokens from "@manyone/demant-tokens/json/shared.json";

Theme tokens

To use a theme import both the shared tokens and theme tokens:

// example
@import "@manyone/demant-tokens/scss/shared-extends.scss";
@import "@manyone/demant-tokens/scss/theme-oticon-extend.scss";


:root {
  @extend %tokens-shared;
  @extend %tokens-theme-oticon;
}

// or

:root {
  @extend %tokens-shared;
}
.theme-oticon {
  @extend %tokens-theme-oticon;
}