import { Meta, ColorPalette, ColorItem, Source } from '@storybook/addon-docs';
import tailwindPreset from '@vtmn/css-tailwind-preset';

<Meta title="Guidelines / Colors" />

# Colors

> Our colors convey our brand personality and values but also help users navigate through the interface. The right combination of colors can influence how they feel, think, and behave.

For more details, see our <a class="vtmn-link vtmn-link--icon-along" href="https://www.decathlon.design/726f8c765/p/85c5a1-colors/b/06f55e" target="_blank" rel="noopener noreferrer">Colors' guideline</a>.

## Using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

If you don't know CSS Custom Properties, you can see basic usage documentation [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Basic_usage). All our CSS Custom Properties for colors are listed at "Swatches" column just below:

<ColorPalette>
  {Object.keys(tailwindPreset.theme.colors).map((key) => {
    if (typeof tailwindPreset.theme.colors[key] === 'string') {
      return (
        <ColorItem title={key} colors={[tailwindPreset.theme.colors[key]]} />
      );
    }
  })}
</ColorPalette>

## Using [Tailwind CSS](https://tailwindcss.com) utility classes

You can use colors with Tailwind CSS utility classes for [Background Color](https://tailwindcss.com/docs/background-color) & [Text Color](https://tailwindcss.com/docs/text-color) for example.
But you can also use them for borders, gradients, etc. Go to [Tailwind CSS documentation](https://tailwindcss.com/docs) & quick search for anything!

All our Tailwind CSS colors names are just above next to their representation.
