# Color

Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben, um sie sichtbar vom übrigen Designsystem abzuheben.

## Overview

# Playground

  Nutze die Color-Component mit Bedacht

    Die Color-Component hebt den umschlossenen Bereich deutlich vom übrigen
    Designsystem ab und sollte daher nur in Ausnahmefällen eingesetzt werden.

Um ein Element einzufärben, wird es mit `<Color />` umschlossen. Die gewünschte
Farbe wird über die `color`-Property vergeben.

```tsx
import {
  Color,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  <strong>
    Veröffentliche{" "}
    <Color color="violet">eigene Features</Color> im mStudio
  </strong>
</Text>
```

---

# Color

Je nach Anwendungsfall stehen Colors aus den Bereichen **Brand**, **Status**
oder **Custom** zur Verfügung. Je nach Hintergrund muss auf ein ausreichendes
Kontrastverhältnis geachtet werden. Außerdem sollten Farben nicht allein eine
Bedeutung übertragen.

## Brand Colors

Brand Colors eignen sich, um einzelne Passagen in
[Texten](/04-components/content/text/overview) oder
[Headings](/04-components/content/heading/overview) hervorzuheben. Das ist vor
allem bei werblichen Hinweisen hilfreich.

```tsx
import { Color } from "@mittwald/flow-react-components";

<>
  <Color color="blue">blue</Color>
  <Color color="violet">violet</Color>
  <Color color="lilac">lilac</Color>
  <Color color="teal">teal</Color>
</>
```

## Status Colors

Status Colors unterstützen die visuelle Einordnung eines Zustands. Häufige
Einsatzorte sind [Icons](/04-components/content/icon/overview) für Indikatoren
auf dem Dashboard oder die Darstellung negativer Beträge.

```tsx
import { Color } from "@mittwald/flow-react-components";

<>
  <Color color="danger">danger</Color>
  <Color color="warning">warning</Color>
  <Color color="info">info</Color>
  <Color color="success">success</Color>
  <Color color="unavialable">unavialable</Color>
</>
```

## Custom Colors

Für beliebige Colors unterstützt die `color`-Property die Angabe eines
HEX-Werts.

```tsx
import { Color } from "@mittwald/flow-react-components";

<Color color="#00c513">custom</Color>
```

---

# Kombiniere mit ...

## Text

Teile eines [Textes](/04-components/content/text/overview) lassen sich mithilfe
der Color-Component einfärben.

```tsx
import {
  Color,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  <strong>
    Veröffentliche{" "}
    <Color color="violet">eigene Features</Color> im mStudio
  </strong>
</Text>
```

## Heading

Mit der Color-Component lassen sich in
[Headings](/04-components/content/heading/overview) gezielt wichtige Wörter
farblich hervorheben.

```tsx
import {
  Color,
  Heading,
} from "@mittwald/flow-react-components";

<Heading>
  <Color color="violet">mStudio Extension</Color> selber
  entwickeln
</Heading>
```

## Icon

Mit der Color-Component lassen sich gezielt einzelne
[Icons](/04-components/content/icon/overview) farblich hervorheben.

```tsx
import {
  Color,
  Icon,
} from "@mittwald/flow-react-components";
import {
  IconArrowDown,
  IconArrowUp,
} from "@tabler/icons-react";

<>
  <Color color="success">
    <Icon>
      <IconArrowUp />
    </Icon>
  </Color>
  <Color color="danger">
    <Icon>
      <IconArrowDown />
    </Icon>
  </Color>
</>
```

## AccentBox

Ein häufiges Einsatzgebiet der Color-Component ist die Hervorhebung von
[Headings](/04-components/content/heading/overview) in
[AccentBoxen](/04-components/structure/accent-box/overview) mit Werbeinhalten.
Dabei ist besonders wichtig, dass die eingefärbte Schrift einen ausreichenden
Kontrast zum Hintergrund aufweist.

```tsx
import {
  AccentBox,
  Color,
  Flex,
  Heading,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<AccentBox backgroundColor="gradient">
  <Flex align="center" wrap="wrap" gap="m">
    <Flex direction="column" grow>
      <Heading size="l">
        <Color color="violet">mStudio Extension</Color>{" "}
        selber entwickeln
      </Heading>
      <Text>
        <strong>
          <Color>
            Veröffentliche{" "}
            <Color color="violet">eigene Features</Color> im
            mStudio
          </Color>
        </strong>
      </Text>
    </Flex>
    <Link target="_blank" href="#" color="dark">
      Contributor Landingpage
    </Link>
  </Flex>
</AccentBox>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `FlowWithCustomColor` | `"blue"` | The color of the element. |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung der Color-Component darauf, dass ...

- sie sparsam und nur in Ausnahmefällen eingesetzt wird.
- die eingefärbte Schrift stets einen ausreichenden Kontrast zum Hintergrund
  aufweist.
- nur kurze Abschnitte (1-3 Wörter) in
  [Texten](/04-components/content/text/overview) oder
  [Headings](/04-components/content/heading/overview) hervorgehoben werden. Die
  markierten Wörter sollten den Inhalt bzw. die Aussage gezielt betonen.

## Verwendung

Verwende die Color-Component, um ...

- besondere Wörter in [Heading](/04-components/content/heading/overview)
  innerhalb von
  Werbe-[AccentBoxen](/04-components/structure/accent-box/overview) farblich
  hervorzuheben.
- einzelne Begriffe in Headings oder
  [Texten](/04-components/content/text/overview) auf Landing-Pages gezielt zu
  betonen.
- [Icons](/04-components/content/icon/overview) für Trendindikatoren auf
  Dashboards einzufärben.