diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 548b9d378921..67cd3af852a6 100644
--- a/scss/_utilities.scss
+++ b/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: (
diff --git a/site/src/content/docs/utilities/align-content.mdx b/site/src/content/docs/utilities/align-content.mdx
index e3ffc8ba0e1c..7922f2cdb90c 100644
--- a/site/src/content/docs/utilities/align-content.mdx
+++ b/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,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx
index 60d748b2c428..3d55f56c95cc 100644
--- a/site/src/content/docs/utilities/align-items.mdx
+++ b/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,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/align-self.mdx b/site/src/content/docs/utilities/align-self.mdx
index dd96135449f7..df805b9d2f62 100644
--- a/site/src/content/docs/utilities/align-self.mdx
+++ b/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,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx
index 6f88bbca7e07..44f49acb8e84 100644
--- a/site/src/content/docs/utilities/aspect-ratio.mdx
+++ b/site/src/content/docs/utilities/aspect-ratio.mdx
@@ -65,8 +65,16 @@ Then apply that class to your markup:
```
-## 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.
+
+### 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]])
+
+
diff --git a/site/src/content/docs/utilities/divide.mdx b/site/src/content/docs/utilities/divide.mdx
index 540fb8a49429..f86098973f35 100644
--- a/site/src/content/docs/utilities/divide.mdx
+++ b/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
-```
+
diff --git a/site/src/content/docs/utilities/font-family.mdx b/site/src/content/docs/utilities/font-family.mdx
index 8a28d830f7f9..fc26b323d436 100644
--- a/site/src/content/docs/utilities/font-family.mdx
+++ b/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))
-),
-```
+
diff --git a/site/src/content/docs/utilities/font-style.mdx b/site/src/content/docs/utilities/font-style.mdx
index 44be699ed895..12af45e651c3 100644
--- a/site/src/content/docs/utilities/font-style.mdx
+++ b/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
-),
-```
+
diff --git a/site/src/content/docs/utilities/grid.mdx b/site/src/content/docs/utilities/grid.mdx
index 4e520af3fc80..23cc61d89141 100644
--- a/site/src/content/docs/utilities/grid.mdx
+++ b/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
-),
-```
+
diff --git a/site/src/content/docs/utilities/justify-content.mdx b/site/src/content/docs/utilities/justify-content.mdx
index b600b49fa497..457a68343d08 100644
--- a/site/src/content/docs/utilities/justify-content.mdx
+++ b/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,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx
index 700f2670656f..25c2dce88093 100644
--- a/site/src/content/docs/utilities/justify-items.mdx
+++ b/site/src/content/docs/utilities/justify-items.mdx
@@ -70,15 +70,4 @@ Responsive variations also exist for `justify-items`.
Justify 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
-"justify-items": (
- responsive: true,
- property: justify-items,
- values: (
- start: start,
- end: end,
- center: center,
- stretch: stretch,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx
index eb7384094400..af6c6b41e80e 100644
--- a/site/src/content/docs/utilities/place-items.mdx
+++ b/site/src/content/docs/utilities/place-items.mdx
@@ -70,15 +70,4 @@ Responsive variations also exist for `place-items`.
Place 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
-"place-items": (
- responsive: true,
- property: place-items,
- values: (
- start: start,
- end: end,
- center: center,
- stretch: stretch,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/pointer-events.mdx b/site/src/content/docs/utilities/pointer-events.mdx
index d1936d7444e5..e901d99d9a9b 100644
--- a/site/src/content/docs/utilities/pointer-events.mdx
+++ b/site/src/content/docs/utilities/pointer-events.mdx
@@ -49,10 +49,4 @@ If possible, the simpler solution is:
Pointer events 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
-"pointer-events": (
- property: pointer-events,
- class: pe,
- values: none auto,
-),
-```
+
diff --git a/site/src/content/docs/utilities/space.mdx b/site/src/content/docs/utilities/space.mdx
index 9ad3c66a6e2a..d7013797762a 100644
--- a/site/src/content/docs/utilities/space.mdx
+++ b/site/src/content/docs/utilities/space.mdx
@@ -99,21 +99,4 @@ Space utilities apply `margin-inline-end` or `margin-block-end` to every direct
Space 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-space
-"space-x": (
- responsive: true,
- property: margin-inline-end,
- class: space-x,
- child-selector: "> :not(:last-child)",
- values: $spacers
-),
-"space-y": (
- responsive: true,
- property: margin-block-end,
- class: space-y,
- child-selector: "> :not(:last-child)",
- values: $spacers
-),
-// scss-docs-end utils-space
-```
+
diff --git a/site/src/content/docs/utilities/text-alignment.mdx b/site/src/content/docs/utilities/text-alignment.mdx
index 3eda643078c3..065e81900122 100644
--- a/site/src/content/docs/utilities/text-alignment.mdx
+++ b/site/src/content/docs/utilities/text-alignment.mdx
@@ -49,15 +49,4 @@ Responsive variations also exist for `text-align`.
Text alignment 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
-"text-align": (
- responsive: true,
- property: text-align,
- class: text,
- values: (
- start: start,
- end: end,
- center: center,
- )
-),
-```
+
diff --git a/site/src/content/docs/utilities/user-select.mdx b/site/src/content/docs/utilities/user-select.mdx
index 381a8dfeda2b..57e6cc3d30d6 100644
--- a/site/src/content/docs/utilities/user-select.mdx
+++ b/site/src/content/docs/utilities/user-select.mdx
@@ -33,9 +33,4 @@ Change the way in which the content is selected when the user interacts with it
User select 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
-"user-select": (
- property: user-select,
- values: all auto none
-),
-```
+