Sampension Design Tokens

This is design tokens for the Sampension digital design system.

Usage

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

# using npm
npm install @manyone/sampension-tokens

Docs

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

Importing styles

/* SCSS */

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

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

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

/* CSS */

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

// JS

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

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

// JSON

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

Theme tokens

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

/* example */
@import "@manyone/sampension-tokens/scss/shared-extends.scss";
@import "@manyone/sampension-tokens/scss/theme-dotcom-extend.scss";


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

/* or */

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