import {
  Canvas,
  Meta,
  Story,
  ColorPalette,
  ColorItem,
} from '@storybook/addon-docs/blocks';

<Meta title="Documentation/Style/Colors" />

# <img src="./BmsIcon.png" /> Colors

The BMS UI color system is based around a primary color that is defined by the product, the other colors are agnostic and should not change.
The tone of a color is characterized by a percentage of its transparency which gives it its name.
For example, the primary color is always Main-100 its next tone will be at 75% which will give a lighter color that will be named Main-75.

We keep "System" colors, these colors are reserved to give information that comes from the product, they should only be used to accentuate information:

- System / Green: Validation information
- System / Orange: Warning information
- System / Red: Danger or problem information

## Colors

<ColorPalette>
  <ColorItem
    title="Main"
    subtitle=""
    colors={{
      'main-140': '#3F91D9',
      'main-100': '#69A9E1',
      'main-75': '#8EBEE8',
      'main-50': '#B2D2EE',
      'main-25': '#D7E7F5',
      'main-10': '#EDF4F9',
    }}
  />
  <ColorItem
    title="Main analog"
    subtitle=""
    colors={{
    'main-analog-140': '#5153AC',
    'main-analog-100': '#696CE0',
    'main-analog-75': '#8E90E7',
    'main-analog-50': '#B2B4EE',
    'main-analog-25': '#D7D8F5',
    'main-analog-10': '#EDEEF9',
    }}
  />
  <ColorItem
    title="Grey"
    subtitle=""
    colors={{
      'grey-140': '#333333',
      'grey-100': '#526476',
      'grey-75': '#7C8A97',
      'grey-50': '#A7B0B9',
      'grey-25': '#D1D6DA',
      'grey-10': '#EBEDEF',
    }}
  />
  <ColorItem
    title="Green"
    subtitle="System"
    colors={{
      'green-140': '#27731B',
      'green-100': '#57B47D',
      'green-75': '#80C69D',
      'green-50': '#A9D8BC',
      'green-25': '#D3EADC',
      'green-10': '#EFF9EE',
    }}
  />
  <ColorItem
    title="Orange"
    subtitle="System"
    colors={{
      'orange-140': '#90550b',
      'orange-100': '#F08E13',
      'orange-75': '#F3A94D',
      'orange-50': '#F6C587',
      'orange-25': '#F9E0C2',
      'orange-10': '#FBF1E5',
    }}
  />
  <ColorItem
    title="Red"
    subtitle="System"
    colors={{
      'red-140': '#7C1212',
      'red-100': '#DC474C',
      'red-75': '#E47478',
      'red-50': '#ECA1A4',
      'red-25': '#F4CFD0',
      'red-10': '#F9EAEB',
    }}
  />
  <ColorItem
    title="White"
    subtitle=""
    colors={{
      'white': '#FCFCFC',

    }}

/>

 <ColorItem
    title="Background"
    subtitle=""
    colors={{
      'background': '#F6F6F8',

    }}

/>

</ColorPalette>
