From 69a143442ce669ca49649c083e914fdf40fe920c 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: Fri, 6 Jan 2023 14:50:31 +0000
Subject: [PATCH] Inline css type values in their reference.

[skip ci]
---
 docs/css_types/_template.md             | 33 ++++++++++++++++++++-
 docs/css_types/border.md                | 20 ++++++++++++-
 docs/css_types/color.md                 | 10 ++++++-
 docs/css_types/horizontal.md            |  8 ++++-
 docs/css_types/integer.md               |  2 +-
 docs/css_types/name.md                  |  5 +++-
 docs/css_types/number.md                |  2 +-
 docs/css_types/overflow.md              |  8 ++++-
 docs/css_types/percentage.md            |  2 +-
 docs/css_types/scalar.md                |  9 +++++-
 docs/css_types/text_align.md            | 15 +++++++++-
 docs/css_types/text_style.md            | 11 ++++++-
 docs/css_types/vertical.md              |  8 ++++-
 docs/snippets/type_syntax/_template.md  | 39 -------------------------
 docs/snippets/type_syntax/border.md     | 19 ------------
 docs/snippets/type_syntax/color.md      |  9 ------
 docs/snippets/type_syntax/horizontal.md |  7 -----
 docs/snippets/type_syntax/integer.md    |  1 -
 docs/snippets/type_syntax/name.md       |  4 ---
 docs/snippets/type_syntax/number.md     |  1 -
 docs/snippets/type_syntax/overflow.md   |  7 -----
 docs/snippets/type_syntax/percentage.md |  1 -
 docs/snippets/type_syntax/scalar.md     |  8 -----
 docs/snippets/type_syntax/text_align.md | 14 ---------
 docs/snippets/type_syntax/text_style.md | 10 -------
 docs/snippets/type_syntax/vertical.md   |  7 -----
 26 files changed, 120 insertions(+), 140 deletions(-)
 delete mode 100644 docs/snippets/type_syntax/_template.md
 delete mode 100644 docs/snippets/type_syntax/border.md
 delete mode 100644 docs/snippets/type_syntax/color.md
 delete mode 100644 docs/snippets/type_syntax/horizontal.md
 delete mode 100644 docs/snippets/type_syntax/integer.md
 delete mode 100644 docs/snippets/type_syntax/name.md
 delete mode 100644 docs/snippets/type_syntax/number.md
 delete mode 100644 docs/snippets/type_syntax/overflow.md
 delete mode 100644 docs/snippets/type_syntax/percentage.md
 delete mode 100644 docs/snippets/type_syntax/scalar.md
 delete mode 100644 docs/snippets/type_syntax/text_align.md
 delete mode 100644 docs/snippets/type_syntax/text_style.md
 delete mode 100644 docs/snippets/type_syntax/vertical.md

diff --git a/docs/css_types/_template.md b/docs/css_types/_template.md
index c9fe058d4..fbb79dcb6 100644
--- a/docs/css_types/_template.md
+++ b/docs/css_types/_template.md
@@ -6,10 +6,41 @@
 
 ## Syntax
 
+
 <!--
---8<-- "docs/snippets/type_syntax/type_name.md"
+For a simple type like <integer>:
+
+Describe the type in a short paragraph with an absolute link to the type page.
+E.g., “The [`<my-type>`](/css_types/my_type) type is such and such with sprinkles on top.”
 -->
 
+<!--
+For a type with many different values like <color>:
+
+Introduce the type with a link to [`<my-type>`](/css_types/my_type).
+Then, a bullet list with the variants accepted:
+
+ - you can create this type with X Y Z;
+ - you can also do A B C; and
+ - also use D E F.
+-->
+
+<!--
+For a type that accepts specific options like <border>:
+
+Add a sentence and a table. Consider ordering values in alphabetical order if there is no other obvious ordering. See below:
+
+The [`<my-type>`](/css_types/my_type) type can take any of the following values:
+
+| Value         | Description                                   |
+|---------------|-----------------------------------------------|
+| `abc`         | Describe here.                                |
+| `other val`   | Describe this one also.                       |
+| `value three` | Please use full stops.                        |
+| `zyx`         | Describe the value without assuming any rule. |
+-->
+
+
 ## Examples
 
 ### CSS
diff --git a/docs/css_types/border.md b/docs/css_types/border.md
index eb37d685c..447a74069 100644
--- a/docs/css_types/border.md
+++ b/docs/css_types/border.md
@@ -4,7 +4,25 @@ The `<border>` CSS type represents a border style.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/border.md"
+The [`<border>`](/css_types/border) type can take any of the following values:
+
+| Border type | Description                                              |
+|-------------|----------------------------------------------------------|
+| `ascii`   | A border with plus, hyphen, and vertical bar characters. |
+| `blank`   | A blank border (reserves space for a border).            |
+| `dashed`  | Dashed line border.                                      |
+| `double`  | Double lined border.                                     |
+| `heavy`   | Heavy border.                                            |
+| `hidden`  | Alias for "none".                                        |
+| `hkey`    | Horizontal key-line border.                              |
+| `inner`   | Thick solid border.                                      |
+| `none`    | Disabled border.                                         |
+| `outer`   | Solid border with additional space around content.       |
+| `round`   | Rounded corners.                                         |
+| `solid`   | Solid border.                                            |
+| `tall`    | Solid border with additional space top and bottom.       |
+| `vkey`    | Vertical key-line border.                                |
+| `wide`    | Solid border with additional space left and right.       |
 
 ## Border command
 
diff --git a/docs/css_types/color.md b/docs/css_types/color.md
index db3e82b96..0d6852356 100644
--- a/docs/css_types/color.md
+++ b/docs/css_types/color.md
@@ -8,7 +8,15 @@ The `<color>` CSS type represents a color.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/color.md"
+The legal values for a [`<color>`](/css_types/color) depend on the [class `Color`][textual.color.Color] and include:
+
+ - a recognised [named color](../../api/color#textual.color--named-colors) (e.g., `red`);
+ - a hexadecimal number representing the RGB values of the color (e.g., `#F35573`);
+ - a color description in the RGB system (e.g., `rgb(23,78,200)`);
+ - a color description in the HSL system (e.g., `hsl(290,70%,80%)`); and
+
+For more details about the exact formats accepted, see [the class method `Color.parse`][textual.color.Color.parse].
+[Textual's default themes](../../guide/design#theme-reference) also provide many CSS variables with colors.
 
 ## Examples
 
diff --git a/docs/css_types/horizontal.md b/docs/css_types/horizontal.md
index 2aef91b47..f5df8d04a 100644
--- a/docs/css_types/horizontal.md
+++ b/docs/css_types/horizontal.md
@@ -4,7 +4,13 @@ The `<horizontal>` CSS type represents a position along the horizontal axis.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/horizontal.md"
+The [`<horizontal>`](/css_types/horizontal) type can take any of the following values:
+
+| Value            | Description                                  |
+| ---------------- | -------------------------------------------- |
+| `center`         | Aligns in the center of the horizontal axis. |
+| `left` (default) | Aligns on the left of the horizontal axis.   |
+| `right`          | Aligns on the right of the horizontal axis.  |
 
 ## Examples
 
diff --git a/docs/css_types/integer.md b/docs/css_types/integer.md
index cde2faa1a..6823d97fb 100644
--- a/docs/css_types/integer.md
+++ b/docs/css_types/integer.md
@@ -4,7 +4,7 @@ The `<integer>` CSS type represents an integer number.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/integer.md"
+An [`<integer>`](/css_types/integer) is any valid integer number like `-10` or `42`.
 
 !!! note
 
diff --git a/docs/css_types/name.md b/docs/css_types/name.md
index 00998e2c0..ef2faa625 100644
--- a/docs/css_types/name.md
+++ b/docs/css_types/name.md
@@ -4,7 +4,10 @@ The `<name>` type represents a sequence of characters that identifies something.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/name.md"
+A [`<name>`](/css_types/name) is any non-empty sequence of characters:
+
+ - starting with a letter `a-z`, `A-Z`, or underscore `_`; and
+ - followed by zero or more letters `a-zA-Z`, digits `0-9`, underscores `_`, and hiphens `-`.
 
 ## Examples
 
diff --git a/docs/css_types/number.md b/docs/css_types/number.md
index 0e1cc3e8f..a3b50660c 100644
--- a/docs/css_types/number.md
+++ b/docs/css_types/number.md
@@ -4,7 +4,7 @@ The `<number>` CSS type represents a real number, which can be an integer or a n
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/number.md"
+A [`<number>`](/css_types/number) is an [`<integer>`](/css_types/integer), optionally followed by the decimal point `.` and a decimal part composed of one or more digits.
 
 ## Examples
 
diff --git a/docs/css_types/overflow.md b/docs/css_types/overflow.md
index c5fe6010e..b4f89aa2f 100644
--- a/docs/css_types/overflow.md
+++ b/docs/css_types/overflow.md
@@ -4,7 +4,13 @@ The `<overflow>` CSS type represents overflow modes.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/overflow.md"
+The [`<overflow>`](/css_types/overflow) type can take any of the following values:
+
+| Value    | Description                            |
+|----------|----------------------------------------|
+| `auto`   | Determine overflow mode automatically. |
+| `hidden` | Don't overflow.                        |
+| `scroll` | Allow overflowing.                     |
 
 ## Examples
 
diff --git a/docs/css_types/percentage.md b/docs/css_types/percentage.md
index c7196bd94..6252cae97 100644
--- a/docs/css_types/percentage.md
+++ b/docs/css_types/percentage.md
@@ -9,7 +9,7 @@ It is often used to represent values that are relative to the parent's values.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/percentage.md"
+A [`<percentage>`](/css_types/percentage) is a [`<number>`](/css_types/number) followed by the percent sign `%` (without spaces).
 Some rules may clamp the values between `0%` and `100%`.
 
 ## Examples
diff --git a/docs/css_types/scalar.md b/docs/css_types/scalar.md
index 7e37e7fca..e909c2f05 100644
--- a/docs/css_types/scalar.md
+++ b/docs/css_types/scalar.md
@@ -10,7 +10,14 @@ It is used to represent lengths, for example in the [`width`](../styles/width.md
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/scalar.md"
+A [`<scalar>`](/css_types/scalar) can be any of the following:
+
+ - a fixed number of cells (e.g., `10`);
+ - a fractional proportion relative to the sizes of the other widgets (e.g., `1fr`);
+ - a percentage relative to the container widget (e.g., `50%`);
+ - a percentage relative to the container width/height (e.g., `25w`/`75h`);
+ - a percentage relative to the viewport width/height (e.g., `25vw`/`75vh`); or
+ - the special value `auto` to compute the optimal size to fit without scrolling.
 
 A complete reference table and detailed explanations follow.
 You can [skip to the examples](#examples).
diff --git a/docs/css_types/text_align.md b/docs/css_types/text_align.md
index c9fc59785..8a18b51c7 100644
--- a/docs/css_types/text_align.md
+++ b/docs/css_types/text_align.md
@@ -8,7 +8,20 @@ The `<text-align>` CSS type represents alignments that can be applied to text.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/text_align.md"
+A [`<text-align>`](/css_types/text_align) can be any of the following values:
+
+| Value     | Alignment type                       |
+|-----------|--------------------------------------|
+| `center`  | Center alignment.                    |
+| `end`     | Alias for `right`.                   |
+| `justify` | Text is justified inside the widget. |
+| `left`    | Left alignment.                      |
+| `right`   | Right alignment.                     |
+| `start`   | Alias for `left`.                    |
+
+!!! tip
+
+    The meanings of `start` and `end` will likely change when RTL languages become supported by Textual.
 
 ## Examples
 
diff --git a/docs/css_types/text_style.md b/docs/css_types/text_style.md
index 5f128b004..1dd36ce10 100644
--- a/docs/css_types/text_style.md
+++ b/docs/css_types/text_style.md
@@ -8,7 +8,16 @@ The `<text-style>` CSS type represents styles that can be applied to text.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/text_style.md"
+A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combination of the following values:
+
+| Value       | Description                                                     |
+|-------------|-----------------------------------------------------------------|
+| `bold`      | **Bold text.**                                                  |
+| `italic`    | _Italic text._                                                  |
+| `none`      | Plain text with no styling.                                     |
+| `reverse`   | Reverse video text (foreground and background colors reversed). |
+| `strike`    | <s>Strikethrough text.</s>                                      |
+| `underline` | <u>Underline text.</u>                                          |
 
 ## Examples
 
diff --git a/docs/css_types/vertical.md b/docs/css_types/vertical.md
index f301e1fe1..5d95e093f 100644
--- a/docs/css_types/vertical.md
+++ b/docs/css_types/vertical.md
@@ -4,7 +4,13 @@ The `<vertical>` CSS type represents a position along the vertical axis.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/vertical.md"
+The [`<vertical>`](/css_types/vertical) type can take any of the following values:
+
+| Value           | Description                                |
+| --------------- | ------------------------------------------ |
+| `bottom`        | Aligns at the bottom of the vertical axis. |
+| `middle`        | Aligns in the middle of the vertical axis. |
+| `top` (default) | Aligns at the top of the vertical axis.    |
 
 ## Examples
 
diff --git a/docs/snippets/type_syntax/_template.md b/docs/snippets/type_syntax/_template.md
deleted file mode 100644
index 77697f721..000000000
--- a/docs/snippets/type_syntax/_template.md
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-This is the template file for a syntax snippet of a Textual CSS type.
-The comments below illustrate some common patterns.
--->
-
-<!--
-For a simple type like <integer>:
-
-Describe the type in a short paragraph with an absolute link to the type page.
-E.g., “The [`<my-type>`](/css_types/my_type) type is such and such with sprinkles on top.”
--->
-
-<!--
-For a type with many different values like <color>:
-
-Introduce the type with a link to [`<my-type>`](/css_types/my_type).
-Then, a bullet list with the variants accepted:
-
- - you can create this type with X Y Z;
- - you can also do A B C; and
- - also use D E F.
-
-Consider ending with a link to the code/API that serves as ground truth for what values are accepted.
--->
-
-<!--
-For a type that accepts specific options like <border>:
-
-Add a sentence and a table. Consider ordering values in alphabetical order if there is no other obvious ordering. See below:
-
-The [`<my-type>`](/css_types/my_type) type can take any of the following values:
-
-| Value         | Description                                   |
-|---------------|-----------------------------------------------|
-| `abc`         | Describe here.                                |
-| `other val`   | Describe this one also.                       |
-| `value three` | Please use full stops.                        |
-| `zyx`         | Describe the value without assuming any rule. |
--->
diff --git a/docs/snippets/type_syntax/border.md b/docs/snippets/type_syntax/border.md
deleted file mode 100644
index 519507bdd..000000000
--- a/docs/snippets/type_syntax/border.md
+++ /dev/null
@@ -1,19 +0,0 @@
-The [`<border>`](/css_types/border) type can take any of the following values:
-
-| Border type | Description                                              |
-|-------------|----------------------------------------------------------|
-| `ascii`   | A border with plus, hyphen, and vertical bar characters. |
-| `blank`   | A blank border (reserves space for a border).            |
-| `dashed`  | Dashed line border.                                      |
-| `double`  | Double lined border.                                     |
-| `heavy`   | Heavy border.                                            |
-| `hidden`  | Alias for "none".                                        |
-| `hkey`    | Horizontal key-line border.                              |
-| `inner`   | Thick solid border.                                      |
-| `none`    | Disabled border.                                         |
-| `outer`   | Solid border with additional space around content.       |
-| `round`   | Rounded corners.                                         |
-| `solid`   | Solid border.                                            |
-| `tall`    | Solid border with additional space top and bottom.       |
-| `vkey`    | Vertical key-line border.                                |
-| `wide`    | Solid border with additional space left and right.       |
diff --git a/docs/snippets/type_syntax/color.md b/docs/snippets/type_syntax/color.md
deleted file mode 100644
index 7b87daac3..000000000
--- a/docs/snippets/type_syntax/color.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The legal values for a [`<color>`](/css_types/color) depend on the [class `Color`][textual.color.Color] and include:
-
- - a recognised [named color](../../api/color#textual.color--named-colors) (e.g., `red`);
- - a hexadecimal number representing the RGB values of the color (e.g., `#F35573`);
- - a color description in the RGB system (e.g., `rgb(23,78,200)`);
- - a color description in the HSL system (e.g., `hsl(290,70%,80%)`); and
-
-For more details about the exact formats accepted, see [the class method `Color.parse`][textual.color.Color.parse].
-[Textual's default themes](../../guide/design#theme-reference) also provide many CSS variables with colors.
diff --git a/docs/snippets/type_syntax/horizontal.md b/docs/snippets/type_syntax/horizontal.md
deleted file mode 100644
index 4d80d23ee..000000000
--- a/docs/snippets/type_syntax/horizontal.md
+++ /dev/null
@@ -1,7 +0,0 @@
-The [`<horizontal>`](/css_types/horizontal) type can take any of the following values:
-
-| Value            | Description                                  |
-| ---------------- | -------------------------------------------- |
-| `center`         | Aligns in the center of the horizontal axis. |
-| `left` (default) | Aligns on the left of the horizontal axis.   |
-| `right`          | Aligns on the right of the horizontal axis.  |
diff --git a/docs/snippets/type_syntax/integer.md b/docs/snippets/type_syntax/integer.md
deleted file mode 100644
index 111b84b80..000000000
--- a/docs/snippets/type_syntax/integer.md
+++ /dev/null
@@ -1 +0,0 @@
-An [`<integer>`](/css_types/integer) is any valid integer number like `-10` or `42`.
diff --git a/docs/snippets/type_syntax/name.md b/docs/snippets/type_syntax/name.md
deleted file mode 100644
index b36abbb4e..000000000
--- a/docs/snippets/type_syntax/name.md
+++ /dev/null
@@ -1,4 +0,0 @@
-A [`<name>`](/css_types/name) is any non-empty sequence of characters:
-
- - starting with a letter `a-z`, `A-Z`, or underscore `_`; and
- - followed by zero or more letters `a-zA-Z`, digits `0-9`, underscores `_`, and hiphens `-`.
diff --git a/docs/snippets/type_syntax/number.md b/docs/snippets/type_syntax/number.md
deleted file mode 100644
index aaf0aac07..000000000
--- a/docs/snippets/type_syntax/number.md
+++ /dev/null
@@ -1 +0,0 @@
-A [`<number>`](/css_types/number) is an [`<integer>`](/css_types/integer), optionally followed by the decimal point `.` and a decimal part composed of one or more digits.
diff --git a/docs/snippets/type_syntax/overflow.md b/docs/snippets/type_syntax/overflow.md
deleted file mode 100644
index 25307f510..000000000
--- a/docs/snippets/type_syntax/overflow.md
+++ /dev/null
@@ -1,7 +0,0 @@
-The [`<overflow>`](/css_types/overflow) type can take any of the following values:
-
-| Value    | Description                            |
-|----------|----------------------------------------|
-| `auto`   | Determine overflow mode automatically. |
-| `hidden` | Don't overflow.                        |
-| `scroll` | Allow overflowing.                     |
diff --git a/docs/snippets/type_syntax/percentage.md b/docs/snippets/type_syntax/percentage.md
deleted file mode 100644
index a131f0c2c..000000000
--- a/docs/snippets/type_syntax/percentage.md
+++ /dev/null
@@ -1 +0,0 @@
-A [`<percentage>`](/css_types/percentage) is a [`<number>`](/css_types/number) followed by the percent sign `%` (without spaces).
diff --git a/docs/snippets/type_syntax/scalar.md b/docs/snippets/type_syntax/scalar.md
deleted file mode 100644
index f29e9f4b2..000000000
--- a/docs/snippets/type_syntax/scalar.md
+++ /dev/null
@@ -1,8 +0,0 @@
-A [`<scalar>`](/css_types/scalar) can be any of the following:
-
- - a fixed number of cells (e.g., `10`);
- - a fractional proportion relative to the sizes of the other widgets (e.g., `1fr`);
- - a percentage relative to the container widget (e.g., `50%`);
- - a percentage relative to the container width/height (e.g., `25w`/`75h`);
- - a percentage relative to the viewport width/height (e.g., `25vw`/`75vh`); or
- - the special value `auto` to compute the optimal size to fit without scrolling.
diff --git a/docs/snippets/type_syntax/text_align.md b/docs/snippets/type_syntax/text_align.md
deleted file mode 100644
index 6720422e5..000000000
--- a/docs/snippets/type_syntax/text_align.md
+++ /dev/null
@@ -1,14 +0,0 @@
-A [`<text-align>`](/css_types/text_align) can be any of the following values:
-
-| Value     | Alignment type                       |
-|-----------|--------------------------------------|
-| `center`  | Center alignment.                    |
-| `end`     | Alias for `right`.                   |
-| `justify` | Text is justified inside the widget. |
-| `left`    | Left alignment.                      |
-| `right`   | Right alignment.                     |
-| `start`   | Alias for `left`.                    |
-
-!!! tip
-
-    The meanings of `start` and `end` will likely change when RTL languages become supported by Textual.
diff --git a/docs/snippets/type_syntax/text_style.md b/docs/snippets/type_syntax/text_style.md
deleted file mode 100644
index f95b25b9b..000000000
--- a/docs/snippets/type_syntax/text_style.md
+++ /dev/null
@@ -1,10 +0,0 @@
-A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combination of the following values:
-
-| Value       | Description                                                     |
-|-------------|-----------------------------------------------------------------|
-| `bold`      | **Bold text.**                                                  |
-| `italic`    | _Italic text._                                                  |
-| `none`      | Plain text with no styling.                                     |
-| `reverse`   | Reverse video text (foreground and background colors reversed). |
-| `strike`    | <s>Strikethrough text.</s>                                      |
-| `underline` | <u>Underline text.</u>                                          |
diff --git a/docs/snippets/type_syntax/vertical.md b/docs/snippets/type_syntax/vertical.md
deleted file mode 100644
index 34e7acceb..000000000
--- a/docs/snippets/type_syntax/vertical.md
+++ /dev/null
@@ -1,7 +0,0 @@
-The [`<vertical>`](/css_types/vertical) type can take any of the following values:
-
-| Value           | Description                                |
-| --------------- | ------------------------------------------ |
-| `bottom`        | Aligns at the bottom of the vertical axis. |
-| `middle`        | Aligns in the middle of the vertical axis. |
-| `top` (default) | Aligns at the top of the vertical axis.    |