@samix-ui/foundation-tokens v7.5.2
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.
10 months ago