Color primitives/tokens to be used across Volue's products
npm install @volue/design-colors --save
# or
yarn add @volue/design-colors
In JavaScript, design token names are formatted in lower camelCase. Tokens are exported as nested object structure.
const tokens = require('@volue/design-colors');
console.log(tokens.core.blue100); // rgb(0, 133, 159)
console.log(tokens.background.neutral.default);
Use flat
entrypoint to consume flattened tokens:
const tokens = require('@volue/design-colors/flat');
console.log(tokens.colorBlue100);
console.log(tokens.backgroundNeutralSubtle);
In JSON, design token names are formatted in SNAKE_CASE.
const tokens = require('@volue/design-colors/dist/index.json');
console.log(tokens['COLOR_WHITE']); // rgb(255, 255, 255)
Sass variables and map keys are formatted in kebab-case.
// Using variables
@import '~@volue/design-colors/dist/index';
a {
color: $color-accent90;
}
CSS variables/custom properties are formatted in kebab-case.
@import '~@volue/design-colors/dist/index.custom-properties.css';
a {
color: var(--color-accent90);
}