@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/home-style-props-sizing.json

@@ -0,0 +1,244 @@
+{
+  "meta": {
+    "id": "Style Props-Sizing",
+    "title": "Sizing",
+    "description": "JSX style props for sizing an element",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/sizing.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Sizing"
+    ],
+    "route": "home/style-props/sizing",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Width",
+        "href": "#width",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Fractional width",
+        "href": "#fractional-width",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Viewport width",
+        "href": "#viewport-width",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Max width",
+        "href": "#max-width",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Min width",
+        "href": "#min-width",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Height",
+        "href": "#height",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Fractional height",
+        "href": "#fractional-height",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Relative heights",
+        "href": "#relative-heights",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Max height",
+        "href": "#max-height",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Min height",
+        "href": "#min-height",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Sizing\n\nJSX style props for sizing an element\n\n## Width\n\nUse the `width` or `w` property to set the width of an element.\n\n```jsx\n// hardcoded values\n<Box width=\"64px\" />\n<Box w=\"4rem\" />\n\n// token values\n<Box width=\"5\" />\n<Box w=\"5\" />\n```\n\n### Fractional width\n\nUse can set fractional widths using the `width` or `w` property.\n\nValues can be within the following ranges:\n\n- Thirds: `1/3` to `2/3`\n- Fourths: `1/4` to `3/4`\n- Fifths: `1/5` to `4/5`\n- Sixths: `1/6` to `5/6`\n- Twelfths: `1/12` to `11/12`\n\n```jsx\n// half width\n<Flex>\n  <Box width=\"1/2\" />\n  <Box width=\"1/2\" />\n</Flex>\n\n// thirds\n<Flex>\n  <Box width=\"1/3\" />\n  <Box width=\"2/3\" />\n</Flex>\n\n// fourths\n<Flex>\n  <Box width=\"1/4\" />\n  <Box width=\"3/4\" />\n</Flex>\n\n// fifths\n<Flex>\n  <Box width=\"1/5\" />\n  <Box width=\"4/5\" />\n</Flex>\n\n// sixths\n<Flex>\n  <Box width=\"1/6\" />\n  <Box width=\"5/6\" />\n</Flex>\n\n// twelfths\n<Flex>\n  <Box width=\"3/12\" />\n  <Box width=\"9/12\" />\n</Flex>\n```\n\n### Viewport width\n\nUse the modern viewport width values `dvw`, `svw`, `lvw`.\n\n> [!NOTE]  \n> `dvw` maps to `100dvw`, `svw` maps to `100svw`, `lvw` maps to `100lvw`.\n\n```jsx\n<Box width=\"dvw\" />\n<Box w=\"dvw\" /> // shorthand\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `w`, `width` | `width`      | `sizes`        |\n\n## Max width\n\nUse the `maxWidth` or `maxW` property to set the maximum width of an element.\n\n```jsx\n// hardcoded values\n<Box maxWidth=\"640px\" />\n<Box maxW=\"4rem\" /> // shorthand\n\n// token values\n<Box maxWidth=\"xl\" />\n<Box maxW=\"2xl\" /> // shorthand\n```\n\n| Prop               | CSS Property | Token Category |\n| ------------------ | ------------ | -------------- |\n| `maxW`, `maxWidth` | `max-width`  | `sizes`        |\n\n## Min width\n\nUse the `minWidth` or `minW` property to set the minimum width of an element.\n\n```jsx\n// hardcoded values\n<Box minWidth=\"64px\" />\n<Box minW=\"4rem\" /> // shorthand\n\n// token values\n<Box minWidth=\"8\" />\n<Box minW=\"10\" /> // shorthand\n```\n\n| Prop               | CSS Property | Token Category |\n| ------------------ | ------------ | -------------- |\n| `w`, `width`       | `width`      | `sizing`       |\n| `maxW`, `maxWidth` | `max-width`  | `sizing`       |\n| `minW`, `minWidth` | `min-width`  | `sizing`       |\n\n## Height\n\nUse the `height` or `h` property to set the height of an element.\n\n```jsx\n// hardcoded values\n<Box height=\"40px\" />\n<Box h=\"0.4rem\" /> // shorthand\n\n// token values\n<Box height=\"5\" />\n<Box h=\"5\" /> // shorthand\n```\n\n### Fractional height\n\nUse can set fractional heights using the `height` or `h` property.\n\nValues can be within the following ranges:\n\n- Thirds: `1/3` to `2/3`\n- Fourths: `1/4` to `3/4`\n- Fifths: `1/5` to `4/5`\n- Sixths: `1/6` to `5/6`\n\n```jsx\n<Box height=\"1/2\" />\n<Box h=\"1/2\" /> // shorthand\n```\n\n### Relative heights\n\nUse the modern relative height values `dvh`, `svh`, `lvh`.\n\n> [!NOTE]  \n> `dvh` maps to `100dvh`, `svh` maps to `100svh`, `lvh` maps to `100lvh`.\n\n```jsx\n<Box height=\"dvh\" />\n<Box h=\"dvh\" /> // shorthand\n```\n\n## Max height\n\nUse the `maxHeight` or `maxH` property to set the maximum height of an element.\n\n```jsx\n// hardcoded values\n<Box maxHeight=\"40px\" />\n<Box maxH=\"0.4rem\" /> // shorthand\n\n// token values\n<Box maxHeight=\"8\" />\n<Box maxH=\"10\" /> // shorthand\n```\n\n## Min height\n\nUse the `minHeight` or `minH` property to set the minimum height of an element.\n\n```jsx\n// hardcoded values\n<Box minHeight=\"40px\" />\n<Box minH=\"0.4rem\" /> // shorthand\n\n// token values\n<Box minHeight=\"8\" />\n<Box minH=\"10\" /> // shorthand\n```\n\n| Prop                | CSS Property | Token Category |\n| ------------------- | ------------ | -------------- |\n| `h`, `height`       | `height`     | `sizes`        |\n| `maxH`, `maxHeight` | `max-height` | `sizes`        |\n| `minH`, `minHeight` | `min-height` | `sizes`        |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Sizing\n\nJSX style props for sizing an element\n\n## Width\n\nUse the `width` or `w` property to set the width of an element.\n\n```jsx\n// hardcoded values\n<Box width=\"64px\" />\n<Box w=\"4rem\" />\n\n// token values\n<Box width=\"5\" />\n<Box w=\"5\" />\n```\n\n### Fractional width\n\nUse can set fractional widths using the `width` or `w` property.\n\nValues can be within the following ranges:\n\n- Thirds: `1/3` to `2/3`\n- Fourths: `1/4` to `3/4`\n- Fifths: `1/5` to `4/5`\n- Sixths: `1/6` to `5/6`\n- Twelfths: `1/12` to `11/12`\n\n```jsx\n// half width\n<Flex>\n  <Box width=\"1/2\" />\n  <Box width=\"1/2\" />\n</Flex>\n\n// thirds\n<Flex>\n  <Box width=\"1/3\" />\n  <Box width=\"2/3\" />\n</Flex>\n\n// fourths\n<Flex>\n  <Box width=\"1/4\" />\n  <Box width=\"3/4\" />\n</Flex>\n\n// fifths\n<Flex>\n  <Box width=\"1/5\" />\n  <Box width=\"4/5\" />\n</Flex>\n\n// sixths\n<Flex>\n  <Box width=\"1/6\" />\n  <Box width=\"5/6\" />\n</Flex>\n\n// twelfths\n<Flex>\n  <Box width=\"3/12\" />\n  <Box width=\"9/12\" />\n</Flex>\n```\n\n### Viewport width\n\nUse the modern viewport width values `dvw`, `svw`, `lvw`.\n\n> [!NOTE]  \n> `dvw` maps to `100dvw`, `svw` maps to `100svw`, `lvw` maps to `100lvw`.\n\n```jsx\n<Box width=\"dvw\" />\n<Box w=\"dvw\" /> // shorthand\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `w`, `width` | `width`      | `sizes`        |\n\n## Max width\n\nUse the `maxWidth` or `maxW` property to set the maximum width of an element.\n\n```jsx\n// hardcoded values\n<Box maxWidth=\"640px\" />\n<Box maxW=\"4rem\" /> // shorthand\n\n// token values\n<Box maxWidth=\"xl\" />\n<Box maxW=\"2xl\" /> // shorthand\n```\n\n| Prop               | CSS Property | Token Category |\n| ------------------ | ------------ | -------------- |\n| `maxW`, `maxWidth` | `max-width`  | `sizes`        |\n\n## Min width\n\nUse the `minWidth` or `minW` property to set the minimum width of an element.\n\n```jsx\n// hardcoded values\n<Box minWidth=\"64px\" />\n<Box minW=\"4rem\" /> // shorthand\n\n// token values\n<Box minWidth=\"8\" />\n<Box minW=\"10\" /> // shorthand\n```\n\n| Prop               | CSS Property | Token Category |\n| ------------------ | ------------ | -------------- |\n| `w`, `width`       | `width`      | `sizing`       |\n| `maxW`, `maxWidth` | `max-width`  | `sizing`       |\n| `minW`, `minWidth` | `min-width`  | `sizing`       |\n\n## Height\n\nUse the `height` or `h` property to set the height of an element.\n\n```jsx\n// hardcoded values\n<Box height=\"40px\" />\n<Box h=\"0.4rem\" /> // shorthand\n\n// token values\n<Box height=\"5\" />\n<Box h=\"5\" /> // shorthand\n```\n\n### Fractional height\n\nUse can set fractional heights using the `height` or `h` property.\n\nValues can be within the following ranges:\n\n- Thirds: `1/3` to `2/3`\n- Fourths: `1/4` to `3/4`\n- Fifths: `1/5` to `4/5`\n- Sixths: `1/6` to `5/6`\n\n```jsx\n<Box height=\"1/2\" />\n<Box h=\"1/2\" /> // shorthand\n```\n\n### Relative heights\n\nUse the modern relative height values `dvh`, `svh`, `lvh`.\n\n> [!NOTE]  \n> `dvh` maps to `100dvh`, `svh` maps to `100svh`, `lvh` maps to `100lvh`.\n\n```jsx\n<Box height=\"dvh\" />\n<Box h=\"dvh\" /> // shorthand\n```\n\n## Max height\n\nUse the `maxHeight` or `maxH` property to set the maximum height of an element.\n\n```jsx\n// hardcoded values\n<Box maxHeight=\"40px\" />\n<Box maxH=\"0.4rem\" /> // shorthand\n\n// token values\n<Box maxHeight=\"8\" />\n<Box maxH=\"10\" /> // shorthand\n```\n\n## Min height\n\nUse the `minHeight` or `minH` property to set the minimum height of an element.\n\n```jsx\n// hardcoded values\n<Box minHeight=\"40px\" />\n<Box minH=\"0.4rem\" /> // shorthand\n\n// token values\n<Box minHeight=\"8\" />\n<Box minH=\"10\" /> // shorthand\n```\n\n| Prop                | CSS Property | Token Category |\n| ------------------- | ------------ | -------------- |\n| `h`, `height`       | `height`     | `sizes`        |\n| `maxH`, `maxHeight` | `max-height` | `sizes`        |\n| `minH`, `minHeight` | `min-height` | `sizes`        |\n",
+      "toc": [
+        {
+          "value": "Width",
+          "href": "#width",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Fractional width",
+          "href": "#fractional-width",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Viewport width",
+          "href": "#viewport-width",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Max width",
+          "href": "#max-width",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Min width",
+          "href": "#min-width",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Height",
+          "href": "#height",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Fractional height",
+          "href": "#fractional-height",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Relative heights",
+          "href": "#relative-heights",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Max height",
+          "href": "#max-height",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Min height",
+          "href": "#min-height",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-style-props-spacing.json

@@ -0,0 +1,228 @@
+{
+  "meta": {
+    "id": "Style Props-Spacing",
+    "title": "Spacing",
+    "description": "JSX style props for controlling the padding and margin of an element.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/spacing.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Spacing"
+    ],
+    "route": "home/style-props/spacing",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Padding",
+        "href": "#padding",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "All sides",
+        "href": "#all-sides",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Specific side",
+        "href": "#specific-side",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Horizontal and Vertical padding",
+        "href": "#horizontal-and-vertical-padding",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Margin",
+        "href": "#margin",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "All sides",
+        "href": "#all-sides-1",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Specific side",
+        "href": "#specific-side-1",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Horizontal and Vertical margin",
+        "href": "#horizontal-and-vertical-margin",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Spacing Between",
+        "href": "#spacing-between",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Spacing\n\nJSX style props for controlling the padding and margin of an element.\n\n## Padding\n\n### All sides\n\nUse the `padding` prop to apply padding on all sides of an element\n\n```jsx\n// raw value\n<Box padding=\"40px\" />\n<Box p=\"40px\" /> // shorthand\n\n// token value\n<Box padding=\"4\" />\n<Box p=\"4\" /> // shorthand\n```\n\n| Prop          | CSS Property | Token Category |\n| ------------- | ------------ | -------------- |\n| `p`,`padding` | `padding`    | `spacing`      |\n\n### Specific side\n\nUse the `padding{Left,Right,Top,Bottom}` to apply padding on one side of an\nelement\n\n```jsx\n<Box paddingLeft=\"3\" />\n<Box pl=\"3\" /> // shorthand\n\n<Box paddingTop=\"3\" />\n<Box pt=\"3\" /> // shorthand\n```\n\nUse the `padding{Start,End}` props to apply padding on the logical axis of an\nelement based on the text direction.\n\n```jsx\n<div className={css({ paddingStart: '8' })} />\n<div className={css({ ps: '8' })} /> // shorthand\n\n<div className={css({ paddingEnd: '8' })} />\n<div className={css({ pe: '8' })} /> // shorthand\n```\n\n| Prop                  | CSS Property           | Token Category |\n| --------------------- | ---------------------- | -------------- |\n| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |\n| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |\n| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |\n| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |\n| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |\n| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |\n\n### Horizontal and Vertical padding\n\nUse the `padding{X,Y}` props to apply padding on the horizontal and vertical\naxis of an element\n\n```jsx\n<Box paddingX=\"8\" />\n<Box px=\"8\" /> // shorthand\n\n<Box paddingY=\"8\" />\n<Box py=\"8\" /> // shorthand\n```\n\n| Prop                  | CSS Property           | Token Category |\n| --------------------- | ---------------------- | -------------- |\n| `p`,`padding`         | `padding`              | `spacing`      |\n| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |\n| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |\n| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |\n| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |\n| `px`, `paddingX`      | `padding-inline`       | `spacing`      |\n| `py`, `paddingY`      | `padding-block`        | `spacing`      |\n| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |\n| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |\n\n## Margin\n\n### All sides\n\nUse the `margin` prop to apply margin on all sides of an element\n\n```jsx\n<Box margin=\"5\" />\n<Box m=\"5\" /> // shorthand\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `m`,`margin` | `margin`     | `spacing`      |\n\n### Specific side\n\nUse the `margin{Left,Right,Top,Bottom}` to apply margin on one side of an\nelement\n\n```jsx\n<Box marginLeft=\"3\" />\n<Box ml=\"3\" /> // shorthand\n\n<Box marginTop=\"3\" />\n<Box mt=\"3\" /> // shorthand\n```\n\nUse the `margin{Start,End}` properties to apply margin on the logical axis of an\nelement based on the text direction.\n\n```jsx\n<Box marginStart=\"8\" />\n<Box ms=\"8\" /> // shorthand\n\n<Box marginEnd=\"8\" />\n<Box me=\"8\" /> // shorthand\n```\n\n| Prop                 | CSS Property          | Token Category |\n| -------------------- | --------------------- | -------------- |\n| `ml`, `marginLeft`   | `margin-left`         | `spacing`      |\n| `mr`, `marginRight`  | `margin-right`        | `spacing`      |\n| `mt`, `marginTop`    | `margin-top`          | `spacing`      |\n| `mb`, `marginBottom` | `margin-bottom`       | `spacing`      |\n| `ms`, `marginStart`  | `margin-inline-start` | `spacing`      |\n| `me`, `marginEnd`    | `margin-inline-end`   | `spacing`      |\n\n### Horizontal and Vertical margin\n\nUse the `margin{X,Y}` properties to apply margin on the horizontal and vertical\naxis of an element\n\n```jsx\n<Box marginX=\"8\" />\n<Box mx=\"8\" /> // shorthand\n\n<Box marginY=\"8\" />\n<Box my=\"8\" /> // shorthand\n```\n\n| Prop            | CSS Property  | Token Category |\n| --------------- | ------------- | -------------- |\n| `mx`, `marginX` | `margin-left` | `spacing`      |\n| `my`, `marginY` | `margin-top`  | `spacing`      |\n\n## Spacing Between\n\nUse the `space{X,Y}` props to apply spacing between elements. This approach uses\nthe owl selector `> * + *` to apply the spacing between the elements using\n`margin*` properties.\n\n:::info\n\nIt's recommended to use the `space` prop over the `gap` prop for spacing when\nyou need negative spacing.\n\n:::\n\n```jsx\n<Box display=\"flex\" spaceX=\"8\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n\n<Box display=\"flex\" spaceY=\"8\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop     | CSS Property          | Token Category |\n| -------- | --------------------- | -------------- |\n| `spaceX` | `margin-inline-start` | `spacing`      |\n| `spaceY` | `margin-block-start`  | `spacing`      |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Spacing\n\nJSX style props for controlling the padding and margin of an element.\n\n## Padding\n\n### All sides\n\nUse the `padding` prop to apply padding on all sides of an element\n\n```jsx\n// raw value\n<Box padding=\"40px\" />\n<Box p=\"40px\" /> // shorthand\n\n// token value\n<Box padding=\"4\" />\n<Box p=\"4\" /> // shorthand\n```\n\n| Prop          | CSS Property | Token Category |\n| ------------- | ------------ | -------------- |\n| `p`,`padding` | `padding`    | `spacing`      |\n\n### Specific side\n\nUse the `padding{Left,Right,Top,Bottom}` to apply padding on one side of an\nelement\n\n```jsx\n<Box paddingLeft=\"3\" />\n<Box pl=\"3\" /> // shorthand\n\n<Box paddingTop=\"3\" />\n<Box pt=\"3\" /> // shorthand\n```\n\nUse the `padding{Start,End}` props to apply padding on the logical axis of an\nelement based on the text direction.\n\n```jsx\n<div className={css({ paddingStart: '8' })} />\n<div className={css({ ps: '8' })} /> // shorthand\n\n<div className={css({ paddingEnd: '8' })} />\n<div className={css({ pe: '8' })} /> // shorthand\n```\n\n| Prop                  | CSS Property           | Token Category |\n| --------------------- | ---------------------- | -------------- |\n| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |\n| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |\n| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |\n| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |\n| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |\n| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |\n\n### Horizontal and Vertical padding\n\nUse the `padding{X,Y}` props to apply padding on the horizontal and vertical\naxis of an element\n\n```jsx\n<Box paddingX=\"8\" />\n<Box px=\"8\" /> // shorthand\n\n<Box paddingY=\"8\" />\n<Box py=\"8\" /> // shorthand\n```\n\n| Prop                  | CSS Property           | Token Category |\n| --------------------- | ---------------------- | -------------- |\n| `p`,`padding`         | `padding`              | `spacing`      |\n| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |\n| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |\n| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |\n| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |\n| `px`, `paddingX`      | `padding-inline`       | `spacing`      |\n| `py`, `paddingY`      | `padding-block`        | `spacing`      |\n| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |\n| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |\n\n## Margin\n\n### All sides\n\nUse the `margin` prop to apply margin on all sides of an element\n\n```jsx\n<Box margin=\"5\" />\n<Box m=\"5\" /> // shorthand\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `m`,`margin` | `margin`     | `spacing`      |\n\n### Specific side\n\nUse the `margin{Left,Right,Top,Bottom}` to apply margin on one side of an\nelement\n\n```jsx\n<Box marginLeft=\"3\" />\n<Box ml=\"3\" /> // shorthand\n\n<Box marginTop=\"3\" />\n<Box mt=\"3\" /> // shorthand\n```\n\nUse the `margin{Start,End}` properties to apply margin on the logical axis of an\nelement based on the text direction.\n\n```jsx\n<Box marginStart=\"8\" />\n<Box ms=\"8\" /> // shorthand\n\n<Box marginEnd=\"8\" />\n<Box me=\"8\" /> // shorthand\n```\n\n| Prop                 | CSS Property          | Token Category |\n| -------------------- | --------------------- | -------------- |\n| `ml`, `marginLeft`   | `margin-left`         | `spacing`      |\n| `mr`, `marginRight`  | `margin-right`        | `spacing`      |\n| `mt`, `marginTop`    | `margin-top`          | `spacing`      |\n| `mb`, `marginBottom` | `margin-bottom`       | `spacing`      |\n| `ms`, `marginStart`  | `margin-inline-start` | `spacing`      |\n| `me`, `marginEnd`    | `margin-inline-end`   | `spacing`      |\n\n### Horizontal and Vertical margin\n\nUse the `margin{X,Y}` properties to apply margin on the horizontal and vertical\naxis of an element\n\n```jsx\n<Box marginX=\"8\" />\n<Box mx=\"8\" /> // shorthand\n\n<Box marginY=\"8\" />\n<Box my=\"8\" /> // shorthand\n```\n\n| Prop            | CSS Property  | Token Category |\n| --------------- | ------------- | -------------- |\n| `mx`, `marginX` | `margin-left` | `spacing`      |\n| `my`, `marginY` | `margin-top`  | `spacing`      |\n\n## Spacing Between\n\nUse the `space{X,Y}` props to apply spacing between elements. This approach uses\nthe owl selector `> * + *` to apply the spacing between the elements using\n`margin*` properties.\n\n:::info\n\nIt's recommended to use the `space` prop over the `gap` prop for spacing when\nyou need negative spacing.\n\n:::\n\n```jsx\n<Box display=\"flex\" spaceX=\"8\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n\n<Box display=\"flex\" spaceY=\"8\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop     | CSS Property          | Token Category |\n| -------- | --------------------- | -------------- |\n| `spaceX` | `margin-inline-start` | `spacing`      |\n| `spaceY` | `margin-block-start`  | `spacing`      |\n",
+      "toc": [
+        {
+          "value": "Padding",
+          "href": "#padding",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "All sides",
+          "href": "#all-sides",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Specific side",
+          "href": "#specific-side",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Horizontal and Vertical padding",
+          "href": "#horizontal-and-vertical-padding",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Margin",
+          "href": "#margin",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "All sides",
+          "href": "#all-sides-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Specific side",
+          "href": "#specific-side-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Horizontal and Vertical margin",
+          "href": "#horizontal-and-vertical-margin",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Spacing Between",
+          "href": "#spacing-between",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-style-props-svg.json

@@ -0,0 +1,96 @@
+{
+  "meta": {
+    "id": "Style Props-SVG",
+    "title": "SVG",
+    "description": "JSX style props for SVG elements.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/svg.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "SVG"
+    ],
+    "route": "home/style-props/svg",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Fill",
+        "href": "#fill",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Stroke",
+        "href": "#stroke",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Stroke Width",
+        "href": "#stroke-width",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# SVG\n\nJSX style props for SVG elements.\n\n## Fill\n\nUse the `fill` prop to set the fill color of an SVG element.\n\n```jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| `fill` | `fill`       | `colors`       |\n\n## Stroke\n\nUse the `stroke` prop to set the stroke color of an SVG element.\n\n```jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `stroke` | `stroke`     | `colors`       |\n\n## Stroke Width\n\nUse the `strokeWidth` prop to set the stroke width of an SVG element.\n\n```jsx\n<chakra.svg strokeWidth=\"1px\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `strokeWidth` | `stroke-width` | `borderWidths` |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# SVG\n\nJSX style props for SVG elements.\n\n## Fill\n\nUse the `fill` prop to set the fill color of an SVG element.\n\n```jsx\n<chakra.svg fill=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| `fill` | `fill`       | `colors`       |\n\n## Stroke\n\nUse the `stroke` prop to set the stroke color of an SVG element.\n\n```jsx\n<chakra.svg stroke=\"blue.500\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `stroke` | `stroke`     | `colors`       |\n\n## Stroke Width\n\nUse the `strokeWidth` prop to set the stroke width of an SVG element.\n\n```jsx\n<chakra.svg strokeWidth=\"1px\">\n  <path d=\"...\" />\n</chakra.svg>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `strokeWidth` | `stroke-width` | `borderWidths` |\n",
+      "toc": [
+        {
+          "value": "Fill",
+          "href": "#fill",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Stroke",
+          "href": "#stroke",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Stroke Width",
+          "href": "#stroke-width",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}