update gap and margin

Author: coliff

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

@@ -13,7 +13,7 @@ import { getData } from '@libs/data'
 
 ## Overview
 
-Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
+Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `0` to `3rem` (`.gap-0` through `.gap-9`). Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
 
 <Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
   <div class="d-flex gap-3 p-3 bd-pattern-diagonal rounded-3">
@@ -51,9 +51,13 @@ Where *size* is one of:
 - `0` - for classes that eliminate the `gap` by setting it to `0`
 - `1` - (by default) for classes that set the `gap` to `$spacer * .25`
 - `2` - (by default) for classes that set the `gap` to `$spacer * .5`
-- `3` - (by default) for classes that set the `gap` to `$spacer`
-- `4` - (by default) for classes that set the `gap` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `gap` to `$spacer * 3`
+- `3` - (by default) for classes that set the `gap` to `$spacer * .75`
+- `4` - (by default) for classes that set the `gap` to `$spacer`
+- `5` - (by default) for classes that set the `gap` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `gap` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `gap` to `$spacer * 2`
+- `8` - (by default) for classes that set the `gap` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `gap` to `$spacer * 3`
 
 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
 
@@ -154,23 +158,23 @@ All gap utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-5</code></li>
+    <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-9</code></li>
   )
 })}
 </ul>
 
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-5</code></li>
+    <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-9</code></li>
   )
 })}
 </ul>
 
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-5</code></li>
+    <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-9</code></li>
   )
 })}
 </ul>

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

@@ -17,7 +17,7 @@ import { getData } from '@libs/data'
 
 ## Overview
 
-Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.p-3` and `.p-5` to control the padding on all sides of an element:
+Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from `0` to `3rem` (`.p-0` through `.p-9`). Use utilities like `.p-3` and `.p-5` to control the padding on all sides of an element:
 
 <Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
   <div class="p-3 bg-primary bd-pattern-diagonal-inner fg-contrast-accent rounded-3">
@@ -48,22 +48,26 @@ Where *property* is:
 
 Where *sides* is one of:
 
-- `t` - for classes that set `padding-top`
-- `b` - for classes that set `padding-bottom`
-- `s` - (start) for classes that set `padding-left` in LTR, `padding-right` in RTL
-- `e` - (end) for classes that set `padding-right` in LTR, `padding-left` in RTL
-- `x` - for classes that set both `*-left` and `*-right`
-- `y` - for classes that set both `*-top` and `*-bottom`
+- `t` - for classes that set `padding-block-start`
+- `b` - for classes that set `padding-block-end`
+- `s` - (start) for classes that set `padding-inline-start`
+- `e` - (end) for classes that set `padding-inline-end`
+- `x` - for classes that set `padding-inline`
+- `y` - for classes that set `padding-block`
 - blank - for classes that set a `padding` on all 4 sides of the element
 
 Where *size* is one of:
 
 - `0` - for classes that eliminate the `padding` by setting it to `0`
 - `1` - (by default) for classes that set the `padding` to `$spacer * .25`
 - `2` - (by default) for classes that set the `padding` to `$spacer * .5`
-- `3` - (by default) for classes that set the `padding` to `$spacer`
-- `4` - (by default) for classes that set the `padding` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `padding` to `$spacer * 3`
+- `3` - (by default) for classes that set the `padding` to `$spacer * .75`
+- `4` - (by default) for classes that set the `padding` to `$spacer`
+- `5` - (by default) for classes that set the `padding` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `padding` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `padding` to `$spacer * 2`
+- `8` - (by default) for classes that set the `padding` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `padding` to `$spacer * 3`
 
 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
 
@@ -151,7 +155,7 @@ All padding utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-5</code></li>
+    <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-9</code></li>
   )
 })}
 </ul>
@@ -171,37 +175,37 @@ Padding utilities are declared in our utilities API in `scss/_utilities.scss`. [
 ),
 "padding-x": (
   responsive: true,
-  property: padding-right padding-left,
+  property: padding-inline,
   class: px,
   values: $spacers
 ),
 "padding-y": (
   responsive: true,
-  property: padding-top padding-bottom,
+  property: padding-block,
   class: py,
   values: $spacers
 ),
 "padding-top": (
   responsive: true,
-  property: padding-top,
+  property: padding-block-start,
   class: pt,
   values: $spacers
 ),
 "padding-end": (
   responsive: true,
-  property: padding-right,
+  property: padding-inline-end,
   class: pe,
   values: $spacers
 ),
 "padding-bottom": (
   responsive: true,
-  property: padding-bottom,
+  property: padding-block-end,
   class: pb,
   values: $spacers
 ),
 "padding-start": (
   responsive: true,
-  property: padding-left,
+  property: padding-inline-start,
   class: ps,
   values: $spacers
 ),