From dc127dad86699b995fa0f78e2d94124d53cc6ecd 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: Mon, 19 Dec 2022 12:01:59 +0000
Subject: [PATCH] Add a snippet with the percentage syntax.

---
 docs/styles/css_units/percentage.md       | 26 +++++++++++++++++++++++
 docs/styles/snippets/percentage_syntax.md |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 docs/styles/snippets/percentage_syntax.md

diff --git a/docs/styles/css_units/percentage.md b/docs/styles/css_units/percentage.md
index 556753e81..70dd51292 100644
--- a/docs/styles/css_units/percentage.md
+++ b/docs/styles/css_units/percentage.md
@@ -1 +1,27 @@
 # Percentage
+
+## Syntax
+
+--8<-- "docs/styles/snippets/percentage_syntax.md"
+
+!!! warning
+
+    Not to be confused with the [fractional](./fractional.md) unit nor with the [scalar](./scalar.md) unit.
+
+## Examples
+
+```css
+Widget {
+    background: red 70%;
+}
+```
+
+```py
+widget.styles.background = "red 70%"
+```
+
+## Used by
+
+ - [`background`](../background.md)
+ - [`color`](../color.md)
+ - [`tint`](../tint.md)
diff --git a/docs/styles/snippets/percentage_syntax.md b/docs/styles/snippets/percentage_syntax.md
new file mode 100644
index 000000000..212b31bc1
--- /dev/null
+++ b/docs/styles/snippets/percentage_syntax.md
@@ -0,0 +1,2 @@
+A percentage is a number followed by the percent sign.
+The number doesn't have to be an integer and values are clamped between 0% and 100%.