@plone/components/src/stories/Quanta.colors.mdx

ReactJS components for Plone

import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { quantaColors, quantaGreys, quantaBlues, quantaReds, quantaYellows, quantaGreens, quantaBlueGreens } from './colors';

<Meta title="Styleguide/Quanta Colors" />

# Quanta colors

These are the colors used in Quanta.

They are defined as CSS custom properties and available in the `:root` scope with the `--color-quanta-<color-name>` name.

In non-Tailwind builds, they are available as CSS properties with the `--quanta-<color-name>` name.

&nbsp;&nbsp;

<ColorPalette>
  <ColorItem
    title="Quanta slate"
    subtitle=""
    colors={ quantaColors }
  />
  <ColorItem
    title="Quanta greys"
    subtitle=""
    colors={ quantaGreys }
  />
  <ColorItem
    title="Quanta blues"
    subtitle=""
    colors={ quantaBlues }
  />
  <ColorItem
    title="Quanta reds"
    subtitle=""
    colors={ quantaReds }
  />
  <ColorItem
    title="Quanta yellows"
    subtitle=""
    colors={ quantaYellows }
  />
  <ColorItem
    title="Quanta greens"
    subtitle=""
    colors={ quantaGreens }
  />
  <ColorItem
    title="Quanta blue-greens"
    subtitle=""
    colors={ quantaBlueGreens }
  />
</ColorPalette>