@vtmn/css-design-tokens

@vtmn/css-design-tokens

Decathlon Design System - Vitamin specific CSS styles for design tokens

Install package

After installing npm or yarn, you can install @vtmn/css-design-tokens with this command:

# with npm
npm i -S @vtmn/css-design-tokens

# with yarn
yarn add @vtmn/css-design-tokens

Or you can also install it with a CDN like unpkg.com:

<link rel="stylesheet" href="https://unpkg.com/@vtmn/css-design-tokens" />

Install fonts

Roboto & Roboto Condensed fonts as described in Typography section will not be automatically loaded. Fortunately, there is a few easy ways to get started.

Shown below is a sample link markup used to load from a CDN:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap"
/>

Otherwise, you can install them with typeface:

# with npm
npm i -S typeface-roboto typeface-roboto-condensed

# with yarn
yarn add typeface-roboto typeface-roboto-condensed

Then, you can import them in your entry-point:

import 'typeface-roboto';
import 'typeface-roboto-condensed';

Usage

Once you have installed this package, you just have to import CSS styles!

With a bundler that supports CSS imports in JS files:

import '@vtmn/css-design-tokens/dist/index.css';

Otherwise include it in your HTML file:

<link
  rel="stylesheet"
  href="./node_modules/@vtmn/css-design-tokens/dist/index.css"
/>

Development

To know all the use cases and their associated code, check out the showcase guidelines here.

For example:

<p style="color: var(--vtmn-color_brand-digital)">Hello World!</p>

You can see the different CSS Custom Properties here.

Changelog

If you want to know the different changes between versions of this package, look at the changelog here.

I have an issue, what should I do?

Please file the issue here.

Contributing

See the contributing docs.

License

Apache-2.0 © Decathlon