import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Grundelemente/Farben" />

# Colors

Im Folgenden werden die benutzten Farbwerte aufgelistet, welche in folgende
Kategorien aufgeteilt werden:

- Primäre Farbpaletten
- Systemfarbpaletten
- Erweiternde Farben oder Farbpaletten

## Primäre Farbpaletten

<ColorPalette>
  <ColorItem
    subtitle="Blau"
    colors={{
      'dark-blue': '#00468c',
      'dark-blue-active': '#12386c',
      'dark-blue-20': '#336ba3',
      'dark-blue-30': '#4c7daf',
      'dark-blue-50': '#7fa2c4',
      'dark-blue-80': '#ccdae8',
      'dark-blue-97': '#f8f9fb',
    }}
  />
  <ColorItem
    subtitle="Grau"
    colors={{
      'grey': '#bec5c9',
      'grey-30': '#d1d6d9',
      'grey-50': '#dee2e4',
      'grey-80': '#f2f3f4',
    }}
  />
  <ColorItem
    subtitle="Schwarz"
    colors={{
      'black': '#000',
      'black-30': '#4c4c4c',
      'black-50': '#808080',
      'black-80': '#ccc',
    }}
  />
</ColorPalette>

## Systemfarbpaletten

<ColorPalette>
  <ColorItem
    subtitle="Hellorange"
    colors={{
      'light-orange': '#f7bb3d',
      'light-orange-30': '#fad076',
      'light-orange-50': '#fbdd9d',
      'light-orange-80': '#fdf1d8',
    }}
  />
  <ColorItem
    subtitle="Orange"
    colors={{
      'orange': '#cd5038',
      'orange-30': '#dc8574',
      'orange-50': '#e5a79b',
      'orange-80': '#f5dcd7',
      'orange-97': '#fdfaf9',
    }}
  />
  <ColorItem
    subtitle="Grün"
    colors={{
      'green': '#0c683a',
      'green-30': '#549575',
      'green-50': '#85b39c',
      'green-80': '#cee1d8',
      'green-97': '#f8faf9',
    }}
  />
</ColorPalette>

## Erweiterne Farben oder Farbpaletten

<ColorPalette>
  <ColorItem
    subtitle="Türkis"
    colors={{
      'turquoise': '#00818b',
      'turquoise-30': '#4ca7ae',
      'turquoise-50': '#7fc0c5',
      'turquoise-80': '#cce6e8',
    }}
  />
  <ColorItem
    subtitle="Diverse"
    colors={{
      'light-orange-d40': '#947125',
      'light-orange-d40-50': '#c9b892',
      'light-orange-d40-97': '#fcfbf8',
      'red': '#bf1722',
      'red-30': '#d25c64',
      'black-07': '#121212',
    }}
  />
  <ColorItem
    subtitle="ESH"
    colors={{
      'red-esh': '#ff4d4d',
      'orange-esh': '#f87a34',
    }}
  />
</ColorPalette>
