docs: add message custom color example + test

apps/docs/src/content/03-components/chat/message/examples/color.tsx

@@ -0,0 +1,18 @@
+import {
+  Content,
+  Message,
+  Text,
+} from "@mittwald/flow-react-components";
+
+<Message color="#ffeedd">
+  <Content>
+    <Text>
+      Lorem ipsum dolor sit amet, consetetur sadipscing
+      elitr, sed diam nonumy eirmod tempor invidunt ut
+      labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores
+      et ea rebum. Stet clita kasd gubergren, no sea
+      takimata sanctus est Lorem ipsum dolor sit amet.
+    </Text>
+  </Content>
+</Message>;

apps/docs/src/content/03-components/chat/message/overview.mdx

@@ -26,6 +26,18 @@ stehen und passende Interaktion ermöglichen.
 
 ---
 
+# Custom Color
+
+Im Default sind `sender` blau und `responder` grau hinterlegt. Wenn eine
+Nachricht gezielt hervorgehoben werden soll, zum Beispiel als System-Nachricht
+oder als interne Notiz, kann der Message eine customColor mitgegeben werden.
+Dabei muss der Entwickler selbst auf einen ausreichenden Kontrast zur Textfarbe
+achten.
+
+<LiveCodeEditor example="color" editorCollapsed />
+
+---
+
 # Kombiniere mit ...
 
 ## Markdown

packages/remote-react-components/src/tests/visual/Message.browser.test.tsx

@@ -73,6 +73,11 @@ test.each(testEnvironments)(
 
           <Button>Button</Button>
         </Message>
+        <Message color="#ffeedd">
+          <Content>
+            <Text>Custom color</Text>
+          </Content>
+        </Message>
       </Flex>,
     );