Documentation consistency improvements (#2352)

This pull request makes small but important improvements to the
documentation of several utility classes by ensuring all CSS property
examples consistently include trailing semicolons. Additionally, it
fixes the syntax in various mask utility examples to use the correct
parentheses for calculations. These changes help clarify the generated
CSS and improve accuracy for users referencing the docs.

**Documentation consistency improvements:**

* Added trailing semicolons to all CSS property examples in the
`ApiTable` rows for `box-decoration-break`, `box-sizing`,
`filter-invert`, `line-height`, and `text-indent` utility docs to match
standard CSS syntax.

**Mask utility syntax corrections:**

* Updated all mask utility examples in `mask-image.mdx` to use correct
parentheses in `calc(var(--spacing) * <number>)` expressions, replacing
incorrect `calc(var(--spacing * <number>))` usage. This change affects
linear, radial, and conic mask gradient examples for all directions.

Author: eason-woong

src/docs/box-decoration-break.mdx

@@ -9,8 +9,8 @@ export const description =
 
 <ApiTable
   rows={[
-    ["box-decoration-clone", "box-decoration-break: clone"],
-    ["box-decoration-slice", "box-decoration-break: slice"],
+    ["box-decoration-clone", "box-decoration-break: clone;"],
+    ["box-decoration-slice", "box-decoration-break: slice;"],
   ]}
 />
 

src/docs/box-sizing.mdx

@@ -9,8 +9,8 @@ export const description = "Utilities for controlling how the browser should cal
 
 <ApiTable
   rows={[
-    ["box-border", "box-sizing: border-box"],
-    ["box-content", "box-sizing: content-box"],
+    ["box-border", "box-sizing: border-box;"],
+    ["box-content", "box-sizing: content-box;"],
   ]}
 />
 

src/docs/filter-invert.mdx

@@ -10,7 +10,7 @@ export const description = "Utilities for applying invert filters to an element.
   rows={[
     ["invert", "filter: invert(100%);"],
     ["invert-<number>", "filter: invert(<number>%);"],
-    ["invert-(<custom-property>)", "filter: invert(var(<custom-property>))"],
+    ["invert-(<custom-property>)", "filter: invert(var(<custom-property>));"],
     ["invert-[<value>]", "filter: invert(<value>);"],
   ]}
 />

src/docs/line-height.mdx

@@ -12,7 +12,7 @@ export const description = "Utilities for controlling the leading, or line heigh
     ["text-<size>/(<custom-property>)", "font-size: <size>;\nline-height: var(<custom-property>);"],
     ["text-<size>/[<value>]", "font-size: <size>;\nline-height: <value>;"],
     ["leading-none", "line-height: 1;"],
-    ["leading-<number>", "line-height: calc(var(--spacing) * <number>)"],
+    ["leading-<number>", "line-height: calc(var(--spacing) * <number>);"],
     ["leading-(<custom-property>)", "line-height: var(<custom-property>);"],
     ["leading-[<value>]", "line-height: <value>;"],
   ]}

src/docs/mask-image.mdx

@@ -52,7 +52,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-linear-from-<number>",
-      "mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-linear-to));",
     ],
     [
       "mask-linear-from-<percentage>",
@@ -72,7 +72,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-linear-to-<number>",
-      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing * <number>)));",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-linear-to-<percentage>",
@@ -92,7 +92,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-t-from-<number>",
-      "mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to));",
+      "mask-image: linear-gradient(to top, black calc(var(--spacing) * <number>), transparent var(--tw-mask-top-to));",
     ],
     [
       "mask-t-from-<percentage>",
@@ -109,7 +109,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ["mask-t-from-[<value>]", "mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to));"],
     [
       "mask-t-to-<number>",
-      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>));",
+      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-t-to-<percentage>",
@@ -126,7 +126,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ["mask-t-to-[<value>]", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>);"],
     [
       "mask-r-from-<number>",
-      "mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to));",
+      "mask-image: linear-gradient(to right, black calc(var(--spacing) * <number>), transparent var(--tw-mask-right-to));",
     ],
     [
       "mask-r-from-<percentage>",
@@ -146,7 +146,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-r-to-<number>",
-      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>));",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-r-to-<percentage>",
@@ -166,7 +166,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-b-from-<number>",
-      "mask-image: linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to));",
+      "mask-image: linear-gradient(to bottom, black calc(var(--spacing) * <number>), transparent var(--tw-mask-bottom-to));",
     ],
     [
       "mask-b-from-<percentage>",
@@ -186,7 +186,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-b-to-<number>",
-      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>));",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-b-to-<percentage>",
@@ -206,7 +206,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-l-from-<number>",
-      "mask-image: linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to));",
+      "mask-image: linear-gradient(to left, black calc(var(--spacing) * <number>), transparent var(--tw-mask-left-to));",
     ],
     [
       "mask-l-from-<percentage>",
@@ -226,7 +226,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-l-to-<number>",
-      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>));",
+      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-l-to-<percentage>",
@@ -247,7 +247,7 @@ export const description = "Utilities for controlling an element's mask image.";
     [
       "mask-y-from-<number>",
       dedent`
-        mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to));
+        mask-image: linear-gradient(to top, black calc(var(--spacing) * <number>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing) * <number>), transparent var(--tw-mask-bottom-to));
         mask-composite: intersect;`,
     ],
     [
@@ -277,7 +277,7 @@ export const description = "Utilities for controlling an element's mask image.";
     [
       "mask-y-to-<number>",
       dedent`
-        mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>));
+        mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>));
         mask-composite: intersect;`,
     ],
     [
@@ -307,7 +307,7 @@ export const description = "Utilities for controlling an element's mask image.";
     [
       "mask-x-from-<number>",
       dedent`
-        mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to));
+        mask-image: linear-gradient(to right, black calc(var(--spacing) * <number>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing) * <number>), transparent var(--tw-mask-left-to));
         mask-composite: intersect;`,
     ],
     [
@@ -337,7 +337,7 @@ export const description = "Utilities for controlling an element's mask image.";
     [
       "mask-x-to-<number>",
       dedent`
-        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>)), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>));
+        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <number>)), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>));
         mask-composite: intersect;`,
     ],
     [
@@ -369,7 +369,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ["mask-radial-[<size>_<size>]", "--tw-mask-radial-size: <size> <size>;"],
     [
       "mask-radial-from-<number>",
-      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-radial-to));",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-radial-to));",
     ],
     [
       "mask-radial-from-<percentage>",
@@ -389,7 +389,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-radial-to-<number>",
-      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing * <number>)));",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-radial-to-<percentage>",
@@ -417,7 +417,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ["mask-radial-at-top", "--tw-mask-radial-position: top;"],
     ["mask-radial-at-top-right", "--tw-mask-radial-position: top right;"],
     ["mask-radial-at-left", "--tw-mask-radial-position: left;"],
-    ["mask-radial-at-center", "--tw-mask-radial-position:center;"],
+    ["mask-radial-at-center", "--tw-mask-radial-position: center;"],
     ["mask-radial-at-right", "--tw-mask-radial-position: right;"],
     ["mask-radial-at-bottom-left", "--tw-mask-radial-position: bottom left;"],
     ["mask-radial-at-bottom", "--tw-mask-radial-position: bottom;"],
@@ -432,7 +432,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-conic-from-<number>",
-      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-conic-to));",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-conic-to));",
     ],
     [
       "mask-conic-from-<percentage>",
@@ -452,7 +452,7 @@ export const description = "Utilities for controlling an element's mask image.";
     ],
     [
       "mask-conic-to-<number>",
-      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing * <number>));",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * <number>));",
     ],
     [
       "mask-conic-to-<percentage>",

src/docs/text-indent.mdx

@@ -8,8 +8,8 @@ export const description = "Utilities for controlling the amount of empty space
 
 <ApiTable
   rows={[
-    ["indent-<number>", "text-indent: calc(var(--spacing) * <number>)"],
-    ["-indent-<number>", "text-indent: calc(var(--spacing) * -<number>)"],
+    ["indent-<number>", "text-indent: calc(var(--spacing) * <number>);"],
+    ["-indent-<number>", "text-indent: calc(var(--spacing) * -<number>);"],
     ["indent-px", "text-indent: 1px;"],
     ["-indent-px", "text-indent: -1px;"],
     ["indent-(<custom-property>)", "text-indent: var(<custom-property>);"],