From 39a37219b16dcfb6a9d5427bac678f9cb66e39b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Tue, 20 Dec 2022 18:48:23 +0000
Subject: [PATCH] Add link color reference.

---
 docs/styles/links/link_color.md | 63 +++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md
index e69de29bb..468ce4182 100644
--- a/docs/styles/links/link_color.md
+++ b/docs/styles/links/link_color.md
@@ -0,0 +1,63 @@
+# Link-color
+
+The `link-color` sets the color of the link text.
+
+!!! note
+
+    `link-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
+
+## Syntax
+
+```sass
+link-color: <COLOR> <PERCENTAGE>;
+```
+
+--8<-- "docs/styles/snippets/color_css_syntax.md"
+
+--8<-- "docs/styles/snippets/percentage_syntax.md"
+
+## Example
+
+The example below shows some links with their color changed.
+It also shows that `link-color` does not affect hyperlinks.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/link_color.py" lines=6}
+    ```
+
+=== "link_color.py"
+
+    ```py hl_lines="8-9 12-13 16-17 20-21"
+    --8<-- "docs/examples/styles/link_color.py"
+    ```
+
+    1. This label has an hyperlink so it won't be affected by the `link-color` rule.
+    2. This label has an "action link" that can be styled with `link-color`.
+    3. This label has an "action link" that can be styled with `link-color`.
+    4. This label has an "action link" that can be styled with `link-color`.
+
+=== "link_color.css"
+
+    ```css hl_lines="2 6 10"
+    --8<-- "docs/examples/styles/link_color.css"
+    ```
+
+    1. This will only affect one of the labels because action links are the only links that this rule affects.
+
+## CSS
+
+```css
+link-color: red 70%;
+link-color: $accent;
+```
+
+## Python
+
+```py
+widget.styles.link_color = "red 70%"
+widget.styles.link_color = "$accent"
+
+# You can also use a `Color` object directly:
+widget.styles.link_color = Color(100, 30, 173)
+```