docs: Update utilities (#1727)

website/pages/docs/utilities/_meta.json

@@ -4,6 +4,9 @@
   "display": "Display",
   "divide": "Divide",
   "effects": "Effects",
+  "flex-and-grid": "Flex and Grid",
+  "helpers": "Helpers",
+  "interactivity": "Interactivity",
   "layout": "Layout",
   "sizing": "Sizing",
   "typography": "Typography"

website/pages/docs/utilities/flex-and-grid.md

@@ -0,0 +1,62 @@
+---
+title: Flex and Grid
+description: Panda provides a set of utilities and style properties for flexible box layout (Flex) and grid layout (Grid). These utilities are designed to make it easy to create responsive and dynamic layouts in your application.
+---
+
+# Flex and Grid
+
+Panda provides a set of utilities and style properties for flexible box layout (Flex) and grid layout (Grid). These utilities are designed to make it easy to create responsive and dynamic layouts in your application.
+
+## Flex
+
+Flex utilities are designed to control the layout and behavior of flex containers and items.
+
+### Flex Basis
+
+The `flexBasis` utility sets the initial main size of a flex item, distributing the available space along the main axis. It supports `spacing` tokens and fractional literal values like “1/2”, “2/3", etc.
+
+```jsx
+<div className={css({ basis: '1/2' })} />
+```
+
+### Flex
+
+The `flex` utility defines the flexibility of a flex container or item.
+Supported values:
+
+| Value     |            |
+| --------- | ---------- |
+| `1`       | `1 1 0%`   |
+| `auto`    | `1 1 auto` |
+| `initial` | `0 1 auto` |
+| `none`    | `none`     |
+
+### Flex Direction
+
+The `flexDirection` utility sets the direction of the main axis in a flex container. It's shorthand is `flexDir`.
+
+```jsx
+<div className={css({ flexDir: 'column' })} />
+```
+
+## Grid
+
+Grid utilities offer control over various grid layout properties, providing a powerful system for creating layouts with rows and columns.
+
+### Grid Template Columns
+
+The `gridTemplateColumns` utility defines the columns of a grid container.
+It accepts numerical values from `1` to `12` where each value maps to `repeat(<value>, minmax(0, 1fr))`
+
+```jsx
+<div className={css({ gridTemplateColumns: '3' })} />
+```
+
+### Grid Template Rows
+
+The `gridTemplateRows` utility defines the columns of a grid container.
+It accepts numerical values from `1` to `12` where each value maps to `repeat(<value>, minmax(0, 1fr))`
+
+```jsx
+<div className={css({ gridTemplateRows: '3' })} />
+```

website/pages/docs/utilities/helpers.md

@@ -0,0 +1,24 @@
+---
+title: Helpers
+description: Panda CSS offers utility classes to enhance accessibility and aid in debugging.
+---
+
+# Helpers
+
+Panda CSS offers utility classes to enhance accessibility and aid in debugging.
+
+## Screen Reader-Only Content
+
+The srOnly utility class hides content visually while keeping it accessible to screen readers. It is particularly useful when you want to provide information to screen readers without displaying it on the screen.
+
+```jsx
+<div className={css({ srOnly: true })}>Accessible only to screen readers</div>
+```
+
+## Debug
+
+The debug utility class applies styles to aid in debugging by adding outlines to elements. This can be helpful during development to visually inspect the layout and structure of your components.
+
+```jsx
+<div className={css({ debug: true })}>Debugging outline applied</div>
+```

website/pages/docs/utilities/interactivity.md

@@ -0,0 +1,113 @@
+---
+title: Interactivity
+description: Panda CSS provides a variety of utility classes to enhance interactivity and user experience on your web applications.
+---
+
+# Interactivity
+
+Panda CSS provides a variety of utility classes to enhance interactivity and user experience on your web applications. These utilities cover aspects such as accent color, caret color, scrolling behavior, scrollbar customization, scroll margins and paddings, scroll snapping, touch actions, and user selection.
+
+## Accent Color
+
+The `accentColor` utility class sets the accent color of an element. It supports `colors` tokens.
+
+```jsx
+<div className={css({ accentColor: 'blue.500' })}>Accent color applied</div>
+```
+
+## Caret Color
+
+The `caretColor` utility class sets the color of the text cursor (caret) in an input or textarea. It supports `colors` tokens.
+
+```jsx
+<input className={css({ caretColor: 'red.400' })} />
+```
+
+## Scrollbar
+
+The `scrollbar` utility allows customization of scrollbar appearance. It supports `visible` and `hidden` values which respectively show or hide the scrollbar.
+
+```jsx
+<div className={css({ scrollbar: 'hidden' })}>Scrollbar hidden</div>
+```
+
+## Scroll Margin
+
+Scroll margin utilities set margins around scroll containers.
+
+```jsx
+<div className={css({ scrollMarginX: '2' })}>
+  Scrollbar Container with Inline padding
+</div>
+```
+
+| Prop                                  | CSS Property                 | Token Category |
+| ------------------------------------- | ---------------------------- | -------------- |
+| `scrollMarginX` ,`scrollMarginInline` | `scroll-margin-inline`       | `spacing`      |
+| `scrollMarginInlineStart`             | `scroll-margin-inline-start` | `spacing`      |
+| `scrollMarginInlineEnd`               | `scroll-margin-inline-end`   | `spacing`      |
+| `scrollMarginY` , `scrollMarginBlock` | `scroll-margin-block`        | `spacing`      |
+| `scrollMarginBlockStart`              | `scroll-margin-block-start`  | `spacing`      |
+| `scrollMarginBlockEnd`                | `scroll-margin-block-end`    | `spacing`      |
+| `scrollMarginLeft`                    | `scroll-margin-left`         | `spacing`      |
+| `scrollMarginRight`                   | `scroll-margin-right`        | `spacing`      |
+| `scrollMarginTop`                     | `scroll-margin-top`          | `spacing`      |
+| `scrollMarginBottom`                  | `scroll-margin-bottom`       | `spacing`      |
+
+## Scroll Padding
+
+Scroll padding utilities set padding inside scroll containers.
+
+```jsx
+<div className={css({ scrollPaddingY: '2' })}>
+  Scrollbar Container with block padding
+</div>
+```
+
+| Prop                                     | CSS Property                  | Token Category |
+| ---------------------------------------- | ----------------------------- | -------------- |
+| `scrollPaddingX` , `scrollPaddingInline` | `scroll-padding-inline`       | `spacing`      |
+| `scrollPaddingInlineStart`               | `scroll-padding-inline-start` | `spacing`      |
+| `scrollPaddingInlineEnd`                 | `scroll-padding-inline-end`   | `spacing`      |
+| `scrollPaddingY` , `scrollPaddingBlock`  | `scroll-padding-block`        | `spacing`      |
+| `scrollPaddingBlockStart`                | `scroll-padding-block-start`  | `spacing`      |
+| `scrollPaddingBlockEnd`                  | `scroll-padding-block-end`    | `spacing`      |
+| `scrollPaddingLeft`                      | `scroll-padding-left`         | `spacing`      |
+| `scrollPaddingRight`                     | `scroll-padding-right`        | `spacing`      |
+| `scrollPaddingTop`                       | `scroll-padding-top`          | `spacing`      |
+| `scrollPaddingBottom`                    | `scroll-padding-bottom`       | `spacing`      |
+
+## Scroll Snapping
+
+Scroll snapping utilities provide control over the scroll snap behavior.
+
+### Scroll Snap Margin
+
+| Prop                     | CSS Property           | Token Category |
+| ------------------------ | ---------------------- | -------------- |
+| `scrollSnapMargin`       | `scroll-margin`        | `spacing`      |
+| `scrollSnapMarginTop`    | `scroll-margin-top`    | `spacing`      |
+| `scrollSnapMarginBottom` | `scroll-margin-bottom` | `spacing`      |
+| `scrollSnapMarginLeft`   | `scroll-margin-left`   | `spacing`      |
+| `scrollSnapMarginRight`  | `scroll-margin-right`  | `spacing`      |
+
+### Scroll Snap Strictness
+
+It's values can be `mandatory` or `proximity` values, and maps to `var(--scroll-snap-strictness)`.
+
+```jsx
+<div className={css({ scrollSnapStrictness: 'proximity' })}>
+  Scroll container with proximity scroll snap
+</div>
+```
+
+### Scroll Snap Type
+
+Supported values
+
+| Value  |                                      |
+| ------ | ------------------------------------ |
+| `none` | `none`                               |
+| `x`    | `x var(--scroll-snap-strictness)`    |
+| `y`    | `y var(--scroll-snap-strictness)`    |
+| `both` | `both var(--scroll-snap-strictness)` |

website/pages/docs/utilities/layout.md

@@ -55,7 +55,9 @@ Use the `inset{Start|End}` utilities to set the position of an element based on
 <div className={css({ position: 'absolute', insetStart: '0' })} />
 ```
 
-| Prop         | CSS Property         | Token Category |
-| ------------ | -------------------- | -------------- |
-| `insetStart` | `inset-inline-start` | `spacing`      |
-| `insetEnd`   | `inset-inline-end`   | `spacing`      |
+| Prop                                      | CSS Property         | Token Category |
+| ----------------------------------------- | -------------------- | -------------- |
+| `start`, `insetStart`, `insetInlineStart` | `inset-inline-start` | `spacing`      |
+| `end` , `insetEnd`, `insetInlineEnd`      | `inset-inline-end`   | `spacing`      |
+| `insetX`, `insetInline`                   | `inset-inline`       | `spacing`      |
+| `insetY`, `insetBlock`                    | `inset-inline`       | `spacing`      |

website/pages/docs/utilities/typography.md

@@ -13,13 +13,17 @@ Panda provides the following utilities or style properties for styling text.
 <div className={css({ fontFamily: 'mono' })} />
 ```
 
-| Prop            | CSS Property     | Token Category  |
-| --------------- | ---------------- | --------------- |
-| `fontFamily`    | `font-family`    | `fonts`         |
-| `fontSize`      | `font-size`      | `fontSizes`     |
-| `fontWeight`    | `font-weight`    | `fontWeights`   |
-| `letterSpacing` | `letter-spacing` | `letterSpacing` |
-| `lineHeight`    | `line-height`    | `lineHeights`   |
+| Prop                  | CSS Property            | Token Category   |
+| --------------------- | ----------------------- | ---------------- |
+| `fontFamily`          | `font-family`           | `fonts`          |
+| `fontSize`            | `font-size`             | `fontSizes`      |
+| `fontWeight`          | `font-weight`           | `fontWeights`    |
+| `letterSpacing`       | `letter-spacing`        | `letterSpacings` |
+| `lineHeight`          | `line-height`           | `lineHeights`    |
+| `textDecorationColor` | `text-decoration-color` | `colors`         |
+| `textEmphasisColor`   | `text-emphasis-color`   | `colors`         |
+| `textIndent`          | `text-indent`           | `spacing`        |
+| `textShadow`          | `text-shadow`           | `shadows`        |
 
 ## Line Clamp (Truncation)