diff --git a/docs/styles/background.md b/docs/styles/background.md
index 43d43621b..a551953fc 100644
--- a/docs/styles/background.md
+++ b/docs/styles/background.md
@@ -8,7 +8,7 @@ The `background` rule sets the background color of a widget.
 background: <COLOR> [<PERCENTAGE>];
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
 The optional [percentage](./css_units/percentage.md) sets the transparency level and will override any transparency specified directly in the color.
 
diff --git a/docs/styles/border.md b/docs/styles/border.md
index 6203fa210..c6a8d87bc 100644
--- a/docs/styles/border.md
+++ b/docs/styles/border.md
@@ -38,7 +38,7 @@ For example, `heavy white` would display a heavy white line around a widget.
 
 ### Color syntax
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
 ### Multiple edge rules
 
diff --git a/docs/styles/color.md b/docs/styles/color.md
index b7994dc40..eae9a07e6 100644
--- a/docs/styles/color.md
+++ b/docs/styles/color.md
@@ -10,7 +10,7 @@ color: (<COLOR> | auto) [<PERCENTAGE>];
 
 Use `auto` to automatically choose a color with suitable contrast for readability.
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
 The optional [percentage](./css_units/percentage.md) sets the transparency level and will override any transparency specified directly in the color.
 
diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md
index 74762814d..cf60a9d9c 100644
--- a/docs/styles/grid/grid_columns.md
+++ b/docs/styles/grid/grid_columns.md
@@ -16,7 +16,7 @@ If there are more columns in the grid than scalars specified in `grid-columns`,
 
 Scalar units can be mixed.
 
---8<-- "docs/snippets/scalar_syntax.md"
+--8<-- "docs/snippets/type_syntax/scalar.md"
 
 ## Example
 
diff --git a/docs/styles/grid/grid_gutter.md b/docs/styles/grid/grid_gutter.md
index f5dc0c785..ba856ee7b 100644
--- a/docs/styles/grid/grid_gutter.md
+++ b/docs/styles/grid/grid_gutter.md
@@ -19,7 +19,7 @@ grid-gutter: <SCALAR> [<SCALAR>];
 If only one scalar is supplied, it sets the horizontal and vertical gutter.
 If two scalars are supplied, they set the vertical and horizontal gutters, respectively.
 
---8<-- "docs/snippets/scalar_syntax.md"
+--8<-- "docs/snippets/type_syntax/scalar.md"
 
 ## Example
 
diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md
index 81d1c1fae..8296047db 100644
--- a/docs/styles/grid/grid_rows.md
+++ b/docs/styles/grid/grid_rows.md
@@ -16,7 +16,7 @@ If there are more rows in the grid than scalars specified in `grid-rows`, they a
 
 Scalar units can be mixed.
 
---8<-- "docs/snippets/scalar_syntax.md"
+--8<-- "docs/snippets/type_syntax/scalar.md"
 
 ## Example
 
diff --git a/docs/styles/height.md b/docs/styles/height.md
index f3003dd88..5183bcbbf 100644
--- a/docs/styles/height.md
+++ b/docs/styles/height.md
@@ -8,7 +8,7 @@ The `height` rule sets a widget's height. By default, it sets the height of the
 height: <SCALAR>;
 ```
 
---8<-- "docs/snippets/scalar_syntax.md"
+--8<-- "docs/snippets/type_syntax/scalar.md"
 
 ## Examples
 
diff --git a/docs/styles/links/index.md b/docs/styles/links/index.md
index d2cab4887..471e0b29d 100644
--- a/docs/styles/links/index.md
+++ b/docs/styles/links/index.md
@@ -28,9 +28,9 @@ link-hover-background: <COLOR> [<PERCENTAGE>];
 link-hover-style: <TEXT STYLE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/text_style_syntax.md"
+--8<-- "docs/snippets/type_syntax/text_style.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md
index 81e70b446..6c0dd0cc0 100644
--- a/docs/styles/links/link_background.md
+++ b/docs/styles/links/link_background.md
@@ -12,9 +12,9 @@ The `link-background` sets the background color of the link.
 link-background: <COLOR> <PERCENTAGE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/percentage_syntax.md"
+--8<-- "docs/snippets/type_syntax/percentage.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md
index c226281b9..36dbf7b73 100644
--- a/docs/styles/links/link_color.md
+++ b/docs/styles/links/link_color.md
@@ -12,9 +12,9 @@ The `link-color` sets the color of the link text.
 link-color: <COLOR> <PERCENTAGE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/percentage_syntax.md"
+--8<-- "docs/snippets/type_syntax/percentage.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md
index d1d2a5c85..c22a52476 100644
--- a/docs/styles/links/link_hover_background.md
+++ b/docs/styles/links/link_hover_background.md
@@ -12,9 +12,9 @@ The `link-hover-background` sets the background color of the link when the mouse
 link-hover-background: <COLOR> <PERCENTAGE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/percentage_syntax.md"
+--8<-- "docs/snippets/type_syntax/percentage.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_hover_color.md b/docs/styles/links/link_hover_color.md
index df781c78d..e0a1409a3 100644
--- a/docs/styles/links/link_hover_color.md
+++ b/docs/styles/links/link_hover_color.md
@@ -12,9 +12,9 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
 link-hover-color: <COLOR> <PERCENTAGE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/percentage_syntax.md"
+--8<-- "docs/snippets/type_syntax/percentage.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_hover_style.md b/docs/styles/links/link_hover_style.md
index 308a56ad1..b3d92b3fe 100644
--- a/docs/styles/links/link_hover_style.md
+++ b/docs/styles/links/link_hover_style.md
@@ -12,9 +12,9 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
 link-hover-style: <COLOR> <PERCENTAGE>;
 ```
 
---8<-- "docs/snippets/color_css_syntax.md"
+--8<-- "docs/snippets/type_syntax/color.md"
 
---8<-- "docs/snippets/percentage_syntax.md"
+--8<-- "docs/snippets/type_syntax/percentage.md"
 
 ## Example
 
diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md
index 8a79c75c3..c25670055 100644
--- a/docs/styles/links/link_style.md
+++ b/docs/styles/links/link_style.md
@@ -12,7 +12,7 @@ The `link-style` sets the text style for the link text.
 link-style: <TEXT STYLE>;
 ```
 
---8<-- "docs/snippets/text_style_syntax.md"
+--8<-- "docs/snippets/type_syntax/text_style.md"
 
 ## Example