From 87f3a92a0050efbba9d61763723542fd4701a81c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 28 Jul 2026 21:13:40 +0200 Subject: [PATCH 1/3] Docs: use ScssDocs shortcode for Sass utilities API sections --- scss/_utilities.scss | 26 +++++++++++++++-- .../content/docs/utilities/align-content.mdx | 15 +--------- .../content/docs/utilities/align-items.mdx | 14 +--------- .../src/content/docs/utilities/align-self.mdx | 15 +--------- site/src/content/docs/utilities/divide.mdx | 24 +--------------- .../content/docs/utilities/font-family.mdx | 8 +----- .../src/content/docs/utilities/font-style.mdx | 8 +----- site/src/content/docs/utilities/grid.mdx | 28 +------------------ .../docs/utilities/justify-content.mdx | 15 +--------- .../content/docs/utilities/justify-items.mdx | 13 +-------- .../content/docs/utilities/place-items.mdx | 13 +-------- .../content/docs/utilities/pointer-events.mdx | 8 +----- site/src/content/docs/utilities/space.mdx | 19 +------------ .../content/docs/utilities/text-alignment.mdx | 13 +-------- .../content/docs/utilities/user-select.mdx | 7 +---- 15 files changed, 37 insertions(+), 189 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 548b9d378921..78f6c1bf6779 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -391,6 +391,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 +405,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 +417,7 @@ $utilities: map.merge( stretch: stretch, ) ), + // scss-docs-end utils-justify-items "justify-self": ( responsive: true, property: justify-self, @@ -422,6 +427,7 @@ $utilities: map.merge( center: center, ) ), + // scss-docs-start utils-align-items "align-items": ( responsive: true, property: align-items, @@ -433,6 +439,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 +453,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 +467,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,6 +479,8 @@ $utilities: map.merge( stretch: stretch, ) ), + // scss-docs-end utils-place-items + // scss-docs-start utils-grid "grid-column-counts": ( responsive: true, // property: --columns, @@ -495,6 +509,7 @@ $utilities: map.merge( class: grid-auto-flow, values: row column dense ), + // scss-docs-end utils-grid "order": ( responsive: true, property: order, @@ -509,7 +524,6 @@ $utilities: map.merge( last: 6, ), ), - // scss-docs-end utils-flex // Margin utilities // scss-docs-start utils-spacing // scss-docs-start utils-margin @@ -687,11 +701,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 +727,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 +738,7 @@ $utilities: map.merge( center: center, ) ), + // scss-docs-end utils-text-align "text-decoration": ( property: text-decoration, values: none underline line-through @@ -896,17 +914,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/divide.mdx b/site/src/content/docs/utilities/divide.mdx index 540fb8a49429..628c9297e5e4 100644 --- a/site/src/content/docs/utilities/divide.mdx +++ b/site/src/content/docs/utilities/divide.mdx @@ -75,27 +75,5 @@ 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 -), -``` + From 45d2d6fae0cf0208a557f0b17889ad6291b4fb3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 28 Jul 2026 21:28:07 +0200 Subject: [PATCH 2/3] Some fixes --- scss/_utilities.scss | 4 ---- site/src/content/docs/utilities/aspect-ratio.mdx | 10 +++++++++- site/src/content/docs/utilities/divide.mdx | 1 - 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 78f6c1bf6779..89f46d09e067 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -483,7 +483,6 @@ $utilities: map.merge( // scss-docs-start utils-grid "grid-column-counts": ( responsive: true, - // property: --columns, property: grid-template-columns, class: grid-cols, values: ( @@ -525,7 +524,6 @@ $utilities: map.merge( ), ), // Margin utilities - // scss-docs-start utils-spacing // scss-docs-start utils-margin "margin": ( responsive: true, @@ -636,7 +634,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, @@ -764,7 +761,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: ( 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 628c9297e5e4..f86098973f35 100644 --- a/site/src/content/docs/utilities/divide.mdx +++ b/site/src/content/docs/utilities/divide.mdx @@ -76,4 +76,3 @@ 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]]) -``` From 720de3ced94878bc248244382e9030cacead0994 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 28 Jul 2026 21:30:12 +0200 Subject: [PATCH 3/3] Some fixes --- scss/_utilities.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 89f46d09e067..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