@stackpath/cosmos-design-tokens v1.1.0

@stackpath/cosmos-design-tokens

This package contains the JSON design tokens file that we use as the source of truth for StackPath's Cosmos design system.

The tokens are currently available to import directly as JSON or as CSS Variables (see below)

Usage

Import JSON directly

const cosmosDesignTokens = require('@stackpath/cosmos-design-tokens');

console.log('JSON', cosmosDesignTokens.COSMOS_TOKENS)

Import CSS Variables

The CSS file defines variables on the :root for generally-applicable values and values that should be available for use in the default light theme. The .cosmos-dark selector is also defined with all variables overriden to use the on-dark token values for our dark theme.

We use this file in Cosmos Web Components by importing it at the top of our existing CSS (which is possible by using postcss-import under the hood in our build step).

@import '@stackpath/cosmos-web-components';

This project's package.json also uses the style attribute to point to the CSS Variables file so that importing the package without explicitly using the full path to cosmos-variables.css will still work if your tooling looks at the attribute.