Docs: use <ScssDocs> shortcode for all "Sass utilities API" sections (#42766)

Author: julien-deramond

scss/_utilities.scss

@@ -36,7 +36,6 @@ $utilities: map.merge(
       values: var(--ratio),
     ),
     "aspect-ratio": (
-      // property: aspect-ratio,
       property: --ratio,
       class: ratio,
       values: $aspect-ratios
@@ -391,6 +390,8 @@ $utilities: map.merge(
       class: flex,
       values: wrap nowrap wrap-reverse
     ),
+    // scss-docs-end utils-flex
+    // scss-docs-start utils-justify-content
     "justify-content": (
       responsive: true,
       property: justify-content,
@@ -403,6 +404,8 @@ $utilities: map.merge(
         evenly: space-evenly,
       )
     ),
+    // scss-docs-end utils-justify-content
+    // scss-docs-start utils-justify-items
     "justify-items": (
       responsive: true,
       property: justify-items,
@@ -413,6 +416,7 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    // scss-docs-end utils-justify-items
     "justify-self": (
       responsive: true,
       property: justify-self,
@@ -422,6 +426,7 @@ $utilities: map.merge(
         center: center,
       )
     ),
+    // scss-docs-start utils-align-items
     "align-items": (
       responsive: true,
       property: align-items,
@@ -433,6 +438,8 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    // scss-docs-end utils-align-items
+    // scss-docs-start utils-align-content
     "align-content": (
       responsive: true,
       property: align-content,
@@ -445,6 +452,8 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    // scss-docs-end utils-align-content
+    // scss-docs-start utils-align-self
     "align-self": (
       responsive: true,
       property: align-self,
@@ -457,6 +466,8 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    // scss-docs-end utils-align-self
+    // scss-docs-start utils-place-items
     "place-items": (
       responsive: true,
       property: place-items,
@@ -467,9 +478,10 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    // scss-docs-end utils-place-items
+    // scss-docs-start utils-grid
     "grid-column-counts": (
       responsive: true,
-      // property: --columns,
       property: grid-template-columns,
       class: grid-cols,
       values: (
@@ -495,6 +507,7 @@ $utilities: map.merge(
       class: grid-auto-flow,
       values: row column dense
     ),
+    // scss-docs-end utils-grid
     "order": (
       responsive: true,
       property: order,
@@ -509,9 +522,7 @@ $utilities: map.merge(
         last: 6,
       ),
     ),
-    // scss-docs-end utils-flex
     // Margin utilities
-    // scss-docs-start utils-spacing
     // scss-docs-start utils-margin
     "margin": (
       responsive: true,
@@ -622,7 +633,6 @@ $utilities: map.merge(
       values: $spacers
     ),
     // scss-docs-end utils-gap
-    // scss-docs-end utils-spacing
     // scss-docs-start utils-space
     "space-x": (
       responsive: true,
@@ -687,11 +697,13 @@ $utilities: map.merge(
       values: $font-sizes
     ),
     // scss-docs-end utils-font-size
+    // scss-docs-start utils-font-style
     "font-style": (
       property: font-style,
       class: fst,
       values: italic normal
     ),
+    // scss-docs-end utils-font-style
     // scss-docs-start utils-font-weight
     "font-weight": (
       property: font-weight,
@@ -711,6 +723,7 @@ $utilities: map.merge(
       )
     ),
     // scss-docs-end utils-line-height
+    // scss-docs-start utils-text-align
     "text-align": (
       responsive: true,
       property: text-align,
@@ -721,6 +734,7 @@ $utilities: map.merge(
         center: center,
       )
     ),
+    // scss-docs-end utils-text-align
     "text-decoration": (
       property: text-decoration,
       values: none underline line-through
@@ -746,7 +760,6 @@ $utilities: map.merge(
       values: (break: break-word),
     ),
     // scss-docs-end utils-text-break
-    // scss-docs-end utils-text
     // scss-docs-start utils-color
     "fg": (
       property: (
@@ -896,17 +909,19 @@ $utilities: map.merge(
       class: bg,
       values: (gradient: var(--gradient))
     ),
-    // scss-docs-start utils-interaction
+    // scss-docs-start utils-user-select
     "user-select": (
       property: user-select,
       values: all auto text none
     ),
+    // scss-docs-end utils-user-select
+    // scss-docs-start utils-pointer-events
     "pointer-events": (
       property: pointer-events,
       class: pe,
       values: none auto,
     ),
-    // scss-docs-end utils-interaction
+    // scss-docs-end utils-pointer-events
     // scss-docs-start utils-border-radius
     "border-radius": (
       property: (

site/src/content/docs/utilities/align-content.mdx

@@ -198,17 +198,4 @@ Responsive variations also exist for `align-content`.
 
 Align content utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"align-content": (
-  responsive: true,
-  property: align-content,
-  values: (
-    start: flex-start,
-    end: flex-end,
-    center: center,
-    between: space-between,
-    around: space-around,
-    stretch: stretch,
-  )
-),
-```
+<ScssDocs name="utils-align-content" file="scss/_utilities.scss" />

site/src/content/docs/utilities/align-items.mdx

@@ -75,16 +75,4 @@ Responsive variations also exist for `align-items`.
 
 Align items utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"align-items": (
-  responsive: true,
-  property: align-items,
-  values: (
-    start: flex-start,
-    end: flex-end,
-    center: center,
-    baseline: baseline,
-    stretch: stretch,
-  )
-),
-```
+<ScssDocs name="utils-align-items" file="scss/_utilities.scss" />

site/src/content/docs/utilities/align-self.mdx

@@ -75,17 +75,4 @@ Responsive variations also exist for `align-self`.
 
 Align self utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"align-self": (
-  responsive: true,
-  property: align-self,
-  values: (
-    auto: auto,
-    start: flex-start,
-    end: flex-end,
-    center: center,
-    baseline: baseline,
-    stretch: stretch,
-  )
-),
-```
+<ScssDocs name="utils-align-self" file="scss/_utilities.scss" />

site/src/content/docs/utilities/aspect-ratio.mdx

@@ -65,8 +65,16 @@ Then apply that class to your markup:
 </div>
 ```
 
-## Sass map
+## CSS
+
+### Sass map
 
 Within `_config.scss`, you can change the aspect ratios you want to use. Here’s our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
 
 <ScssDocs name="aspect-ratios" file="scss/_config.scss" />
+
+### Sass utilities API
+
+Aspect ratio utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+<ScssDocs name="utils-aspect-ratio" file="scss/_utilities.scss" />

site/src/content/docs/utilities/divide.mdx

@@ -75,27 +75,4 @@ Divider color comes from the inheriting `--bs-border-color` design token, so set
 
 Divide utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-// scss-docs-start utils-divide
-"divide-x": (
-  responsive: true,
-  property: border-inline-start,
-  class: divide-x,
-  child-selector: "> :not(:first-child)",
-  values: (
-    null: var(--border-width) var(--border-style) var(--border-color),
-    0: 0,
-  )
-),
-"divide-y": (
-  responsive: true,
-  property: border-block-start,
-  class: divide-y,
-  child-selector: "> :not(:first-child)",
-  values: (
-    null: var(--border-width) var(--border-style) var(--border-color),
-    0: 0,
-  )
-),
-// scss-docs-end utils-divide
-```
+<ScssDocs name="utils-divide" file="scss/_utilities.scss" />

site/src/content/docs/utilities/font-family.mdx

@@ -26,10 +26,4 @@ Change a selection to our body font stack with `.font-body`, which defaults to s
 
 Font family utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"font-family": (
-  property: font-family,
-  class: font,
-  values: (monospace: var(--#{$prefix}font-monospace))
-),
-```
+<ScssDocs name="utils-font-family" file="scss/_utilities.scss" />

site/src/content/docs/utilities/font-style.mdx

@@ -21,10 +21,4 @@ Quickly change the `font-style` of text with these utilities. `font-style` utili
 
 Font style utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"font-style": (
-  property: font-style,
-  class: fst,
-  values: italic normal
-),
-```
+<ScssDocs name="utils-font-style" file="scss/_utilities.scss" />

site/src/content/docs/utilities/grid.mdx

@@ -207,30 +207,4 @@ All grid utilities are responsive and include all breakpoints.
 
 Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"grid-column-counts": (
-  responsive: true,
-  property: --#{$prefix}columns,
-  class: grid-cols,
-  values: (
-    3,
-    4,
-    6,
-    subgrid: subgrid
-  )
-),
-"grid-columns": (
-  responsive: true,
-  property: grid-column,
-  class: grid-cols,
-  values: (
-    fill: #{"1 / -1"},
-  )
-),
-"grid-auto-flow": (
-  responsive: true,
-  property: grid-auto-flow,
-  class: grid-auto-flow,
-  values: row column dense
-),
-```
+<ScssDocs name="utils-grid" file="scss/_utilities.scss" />

site/src/content/docs/utilities/justify-content.mdx

@@ -82,17 +82,4 @@ Responsive variations also exist for `justify-content`.
 
 Justify content utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"justify-content": (
-  responsive: true,
-  property: justify-content,
-  values: (
-    start: flex-start,
-    end: flex-end,
-    center: center,
-    between: space-between,
-    around: space-around,
-    evenly: space-evenly,
-  )
-),
-```
+<ScssDocs name="utils-justify-content" file="scss/_utilities.scss" />