Foundation Tokens

Design tokens for Foundation, Sco’s design system.

Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

npm install @samix-ui/foundation-tokens

Usage

Javascript

Accessing all of the available token groups

// Token values only
import {tokens} from '@samix-ui/foundation-tokens';

console.log(tokens.color['color-bg']); // 'rgba(...)'

// Tokens with metadata
import {metadata} from '@samix-ui/foundation-tokens';

console.log(metadata.color['color-bg'].value); // 'rgba(...)'
console.log(metadata.color['color-bg'].description); // 'For use as a background color, in components such as Page and Frame backgrounds.'

CSS

Importing all of the css variables. CSS variables are prefixed with --p to signal that these variables are Foundation variables.

import '@samix-ui/foundation-tokens/css/styles.css';

div {
  background: var(--p-color-bg);
}

JSON

Accessing a specific token group file via the dist folder

const spacing = require('@samix-ui/foundation-tokens/json/spacing.json');

Contributing

Pull requests are welcome. See the contribution guidelines for more information.

Licenses

• Source code is under a custom license based on MIT. The license restricts Foundation usage to applications that integrate or interoperate with Sco software or services, with additional restrictions for external, stand-alone applications.