# Color

Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben.

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.

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

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

---

# Best Practices

- Setze die Color-Component sparsam und nur in Ausnahmefällen ein.
- Sorge für ausreichenden Kontrast der eingefärbten Schrift zum Hintergrund.
- Hebe nur kurze Abschnitte von ein bis drei Wörtern hervor. So betonst du die
  Aussage in [Texten](/04-components/content/text) oder
  [Headings](/04-components/content/heading) gezielt.

---

# 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) oder
[Headings](/04-components/content/heading) 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. Ein häufiger
Einsatzort ist 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) 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) 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>
```

## AccentBox

Ein häufiges Einsatzgebiet der Color-Component ist die Hervorhebung von
[Headings](/04-components/content/heading) in
[AccentBoxen](/04-components/structure/accent-box) 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>
```

---

# Properties

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