@commercetools/nimbus-mcp 0.1.0 → 2.11.0

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

@@ -0,0 +1,536 @@
+{
+  "meta": {
+    "id": "Style Props-Typography",
+    "title": "Typography",
+    "description": "JSX style props for styling text",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/style-props-typography.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Typography"
+    ],
+    "route": "home/style-props/typography",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Font Family",
+        "href": "#font-family",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Font Size",
+        "href": "#font-size",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Styles",
+        "href": "#text-styles",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Font Style",
+        "href": "#font-style",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Font Weight",
+        "href": "#font-weight",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Font Variant Numeric",
+        "href": "#font-variant-numeric",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Letter Spacing",
+        "href": "#letter-spacing",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Truncation",
+        "href": "#truncation",
+        "depth": 2,
+        "numbering": [
+          1,
+          8
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Line Clamp",
+        "href": "#line-clamp",
+        "depth": 2,
+        "numbering": [
+          1,
+          9
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Line Height",
+        "href": "#line-height",
+        "depth": 2,
+        "numbering": [
+          1,
+          10
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Align",
+        "href": "#text-align",
+        "depth": 2,
+        "numbering": [
+          1,
+          11
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Color",
+        "href": "#text-color",
+        "depth": 2,
+        "numbering": [
+          1,
+          12
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Decoration",
+        "href": "#text-decoration",
+        "depth": 2,
+        "numbering": [
+          1,
+          13
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Decoration Color",
+        "href": "#text-decoration-color",
+        "depth": 2,
+        "numbering": [
+          1,
+          14
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Decoration Style",
+        "href": "#text-decoration-style",
+        "depth": 2,
+        "numbering": [
+          1,
+          15
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Decoration Thickness",
+        "href": "#text-decoration-thickness",
+        "depth": 2,
+        "numbering": [
+          1,
+          16
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Underline Offset",
+        "href": "#text-underline-offset",
+        "depth": 2,
+        "numbering": [
+          1,
+          17
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Transform",
+        "href": "#text-transform",
+        "depth": 2,
+        "numbering": [
+          1,
+          18
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Overflow",
+        "href": "#text-overflow",
+        "depth": 2,
+        "numbering": [
+          1,
+          19
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Shadow",
+        "href": "#text-shadow",
+        "depth": 2,
+        "numbering": [
+          1,
+          20
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Text Indent",
+        "href": "#text-indent",
+        "depth": 2,
+        "numbering": [
+          1,
+          21
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Vertical Align",
+        "href": "#vertical-align",
+        "depth": 2,
+        "numbering": [
+          1,
+          22
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "White Space",
+        "href": "#white-space",
+        "depth": 2,
+        "numbering": [
+          1,
+          23
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Word Break",
+        "href": "#word-break",
+        "depth": 2,
+        "numbering": [
+          1,
+          24
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Hyphens",
+        "href": "#hyphens",
+        "depth": 2,
+        "numbering": [
+          1,
+          25
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Typography\n\nJSX style props for styling text\n\n## Font Family\n\nUse the `fontFamily` prop to set the font family of a text element.\n\n```jsx\n<Text fontFamily=\"mono\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `fontFamily` | `font-family` | `fonts`        |\n\n## Font Size\n\nUse the `fontSize` prop to set the font size of a text element.\n\n```jsx\n// hardcoded values\n<Text fontSize=\"12px\">Hello World</Text>\n<Text fontSize=\"10rem\">Hello World</Text>\n\n// token values\n<Text fontSize=\"xs\">Hello World</Text>\n<Text fontSize=\"4xl\">Hello World</Text>\n<Text fontSize=\"5xl\">Hello World</Text>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `fontSize` | `font-size`  | `fonts`        |\n\n## Text Styles\n\nUse the `textStyle` prop to apply both a font size, line height, and letter\nspacing composition at once.\n\n```jsx\n<Text textStyle=\"xs\">Hello World</Text>\n<Text textStyle=\"sm\">Hello World</Text>\n<Text textStyle=\"md\">Hello World</Text>\n<Text textStyle=\"lg\">Hello World</Text>\n<Text textStyle=\"xl\">Hello World</Text>\n<Text textStyle=\"2xl\">Hello World</Text>\n<Text textStyle=\"3xl\">Hello World</Text>\n<Text textStyle=\"4xl\">Hello World</Text>\n<Text textStyle=\"5xl\">Hello World</Text>\n```\n\n| Prop        | Config             |\n| ----------- | ------------------ |\n| `textStyle` | `theme.textStyles` |\n\n## Font Style\n\nUse the `fontStyle` prop to set the font style of a text element.\n\n```jsx\n<Text fontStyle=\"italic\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `fontStyle` | `font-style` | none           |\n\n## Font Weight\n\nUse the `fontWeight` prop to set the font weight of a text element.\n\n```jsx\n// hardcoded values\n<Text fontWeight=\"600\">Hello World</Text>\n\n// token values\n<Text fontWeight=\"semibold\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `fontWeight` | `font-weight` | `fontWeights`  |\n\n## Font Variant Numeric\n\nUse the `fontVariantNumeric` prop to set the font variant numeric of a text\nelement.\n\n```jsx\n<Text fontVariantNumeric=\"lining-nums\">Hello World</Text>\n```\n\n| Prop                 | CSS Property           | Token Category |\n| -------------------- | ---------------------- | -------------- |\n| `fontVariantNumeric` | `font-variant-numeric` | none           |\n\n## Letter Spacing\n\nUse the `letterSpacing` prop to set the letter spacing of a text element.\n\n```jsx\n// hardcoded values\n<Text letterSpacing=\"0.1rem\">Hello World</Text>\n\n// token values\n<Text letterSpacing=\"tight\">Hello World</Text>\n<Text letterSpacing=\"wide\">Hello World</Text>\n<Text letterSpacing=\"wider\">Hello World</Text>\n<Text letterSpacing=\"widest\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category   |\n| --------------- | ---------------- | ---------------- |\n| `letterSpacing` | `letter-spacing` | `letterSpacings` |\n\n## Truncation\n\nUse the `truncate` prop to truncate text.\n\n```jsx\n<Text truncate>Lorem ipsum dolor sit amet...</Text>\n```\n\n| Prop       | CSS Property    | Token Category |\n| ---------- | --------------- | -------------- |\n| `truncate` | `text-overflow` | none           |\n\n## Line Clamp\n\nUse the `lineClamp` prop to truncate multi-line text. Set `lineClamp` to `none`\nto disable truncation.\n\n```jsx\n<Text lineClamp=\"2\">Lorem ipsum dolor sit amet...</Text>\n\n// revert truncation\n<Text lineClamp=\"none\">Lorem ipsum dolor sit amet...</Text>\n```\n\n| Prop        | CSS Property        | Token Category |\n| ----------- | ------------------- | -------------- |\n| `lineClamp` | `webkit-line-clamp` | none           |\n\n## Line Height\n\nUse the `lineHeight` prop to set the line height of a text element.\n\n```jsx\n// hardcoded values\n<Text lineHeight=\"1.5\">Hello World</Text>\n\n// token values\n<Text lineHeight=\"tall\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `lineHeight` | `line-height` | `lineHeights`  |\n\n## Text Align\n\nUse the `textAlign` prop to set the text alignment of a text element.\n\n```jsx\n<Text textAlign=\"left\">Hello World</Text>\n<Text textAlign=\"center\">Hello World</Text>\n<Text textAlign=\"right\">Hello World</Text>\n<Text textAlign=\"justify\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `textAlign` | `text-align` | none           |\n\n## Text Color\n\nUse the `color` prop to set the color of a text element.\n\n```jsx\n<Text color=\"red\">Hello World</Text>\n```\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `color` | `color`      | `colors`       |\n\n## Text Decoration\n\nUse the `textDecoration` or `textDecor` prop to set the text decoration of a\ntext element.\n\n```jsx\n<Text textDecoration=\"underline\">Hello World</Text>\n```\n\n| Prop                          | CSS Property      | Token Category |\n| ----------------------------- | ----------------- | -------------- |\n| `textDecor`, `textDecoration` | `text-decoration` | none           |\n\n## Text Decoration Color\n\nUse the `textDecorationColor` prop to set the text decoration color of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationColor=\"red\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textDecorationColor` | `text-decoration-color` | `colors`       |\n\n## Text Decoration Style\n\nUse the `textDecorationStyle` prop to set the text decoration style of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationStyle=\"dashed\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textDecorationStyle` | `text-decoration-style` | none           |\n\n## Text Decoration Thickness\n\nUse the `textDecorationThickness` prop to set the text decoration thickness of a\ntext element.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationThickness=\"1px\">\n  Hello World\n</Text>\n```\n\n| Prop                      | CSS Property                | Token Category |\n| ------------------------- | --------------------------- | -------------- |\n| `textDecorationThickness` | `text-decoration-thickness` | none           |\n\n## Text Underline Offset\n\nUse the `textUnderlineOffset` prop to set the text underline offset of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textUnderlineOffset=\"1px\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textUnderlineOffset` | `text-underline-offset` | none           |\n\n## Text Transform\n\nUse the `textTransform` prop to set the text transform of a text element.\n\n```jsx\n<Text textTransform=\"uppercase\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `textTransform` | `text-transform` | none           |\n\n## Text Overflow\n\nUse the `textOverflow` prop to set the text overflow of a text element.\n\n```jsx\n<Text textOverflow=\"ellipsis\">Hello World</Text>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `textOverflow` | `text-overflow` | none           |\n\n## Text Shadow\n\nUse the `textShadow` prop to set the text shadow of a text element.\n\n```jsx\n<Text textShadow=\"0 0 1px red\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `textShadow` | `text-shadow` | `shadows`      |\n\n## Text Indent\n\nUse the `textIndent` prop to set the text indent of a text element.\n\n```jsx\n// hardcoded values\n<Text textIndent=\"1rem\">Hello World</Text>\n\n// token values\n<Text textIndent=\"3\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `textIndent` | `text-indent` | `spacing`      |\n\n## Vertical Align\n\nUse the `verticalAlign` prop to set the vertical alignment of a text element.\n\n```jsx\n<Text verticalAlign=\"top\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `verticalAlign` | `vertical-align` | none           |\n\n## White Space\n\nUse the `whiteSpace` prop to set the white space of a text element.\n\n```jsx\n<Text whiteSpace=\"nowrap\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `whiteSpace` | `white-space` | none           |\n\n## Word Break\n\nUse the `wordBreak` prop to set whether line breaks appear wherever the text\nwould otherwise overflow its content box.\n\n```jsx\n<Text wordBreak=\"break-all\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `wordBreak` | `word-break` | none           |\n\n## Hyphens\n\nUse the `hyphens` prop to set whether hyphens are used in the text.\n\n```jsx\n<Text hyphens=\"auto\">Hello World</Text>\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `hyphens` | `hyphens`    | none           |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Typography\n\nJSX style props for styling text\n\n## Font Family\n\nUse the `fontFamily` prop to set the font family of a text element.\n\n```jsx\n<Text fontFamily=\"mono\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `fontFamily` | `font-family` | `fonts`        |\n\n## Font Size\n\nUse the `fontSize` prop to set the font size of a text element.\n\n```jsx\n// hardcoded values\n<Text fontSize=\"12px\">Hello World</Text>\n<Text fontSize=\"10rem\">Hello World</Text>\n\n// token values\n<Text fontSize=\"xs\">Hello World</Text>\n<Text fontSize=\"4xl\">Hello World</Text>\n<Text fontSize=\"5xl\">Hello World</Text>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `fontSize` | `font-size`  | `fonts`        |\n\n## Text Styles\n\nUse the `textStyle` prop to apply both a font size, line height, and letter\nspacing composition at once.\n\n```jsx\n<Text textStyle=\"xs\">Hello World</Text>\n<Text textStyle=\"sm\">Hello World</Text>\n<Text textStyle=\"md\">Hello World</Text>\n<Text textStyle=\"lg\">Hello World</Text>\n<Text textStyle=\"xl\">Hello World</Text>\n<Text textStyle=\"2xl\">Hello World</Text>\n<Text textStyle=\"3xl\">Hello World</Text>\n<Text textStyle=\"4xl\">Hello World</Text>\n<Text textStyle=\"5xl\">Hello World</Text>\n```\n\n| Prop        | Config             |\n| ----------- | ------------------ |\n| `textStyle` | `theme.textStyles` |\n\n## Font Style\n\nUse the `fontStyle` prop to set the font style of a text element.\n\n```jsx\n<Text fontStyle=\"italic\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `fontStyle` | `font-style` | none           |\n\n## Font Weight\n\nUse the `fontWeight` prop to set the font weight of a text element.\n\n```jsx\n// hardcoded values\n<Text fontWeight=\"600\">Hello World</Text>\n\n// token values\n<Text fontWeight=\"semibold\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `fontWeight` | `font-weight` | `fontWeights`  |\n\n## Font Variant Numeric\n\nUse the `fontVariantNumeric` prop to set the font variant numeric of a text\nelement.\n\n```jsx\n<Text fontVariantNumeric=\"lining-nums\">Hello World</Text>\n```\n\n| Prop                 | CSS Property           | Token Category |\n| -------------------- | ---------------------- | -------------- |\n| `fontVariantNumeric` | `font-variant-numeric` | none           |\n\n## Letter Spacing\n\nUse the `letterSpacing` prop to set the letter spacing of a text element.\n\n```jsx\n// hardcoded values\n<Text letterSpacing=\"0.1rem\">Hello World</Text>\n\n// token values\n<Text letterSpacing=\"tight\">Hello World</Text>\n<Text letterSpacing=\"wide\">Hello World</Text>\n<Text letterSpacing=\"wider\">Hello World</Text>\n<Text letterSpacing=\"widest\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category   |\n| --------------- | ---------------- | ---------------- |\n| `letterSpacing` | `letter-spacing` | `letterSpacings` |\n\n## Truncation\n\nUse the `truncate` prop to truncate text.\n\n```jsx\n<Text truncate>Lorem ipsum dolor sit amet...</Text>\n```\n\n| Prop       | CSS Property    | Token Category |\n| ---------- | --------------- | -------------- |\n| `truncate` | `text-overflow` | none           |\n\n## Line Clamp\n\nUse the `lineClamp` prop to truncate multi-line text. Set `lineClamp` to `none`\nto disable truncation.\n\n```jsx\n<Text lineClamp=\"2\">Lorem ipsum dolor sit amet...</Text>\n\n// revert truncation\n<Text lineClamp=\"none\">Lorem ipsum dolor sit amet...</Text>\n```\n\n| Prop        | CSS Property        | Token Category |\n| ----------- | ------------------- | -------------- |\n| `lineClamp` | `webkit-line-clamp` | none           |\n\n## Line Height\n\nUse the `lineHeight` prop to set the line height of a text element.\n\n```jsx\n// hardcoded values\n<Text lineHeight=\"1.5\">Hello World</Text>\n\n// token values\n<Text lineHeight=\"tall\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `lineHeight` | `line-height` | `lineHeights`  |\n\n## Text Align\n\nUse the `textAlign` prop to set the text alignment of a text element.\n\n```jsx\n<Text textAlign=\"left\">Hello World</Text>\n<Text textAlign=\"center\">Hello World</Text>\n<Text textAlign=\"right\">Hello World</Text>\n<Text textAlign=\"justify\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `textAlign` | `text-align` | none           |\n\n## Text Color\n\nUse the `color` prop to set the color of a text element.\n\n```jsx\n<Text color=\"red\">Hello World</Text>\n```\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `color` | `color`      | `colors`       |\n\n## Text Decoration\n\nUse the `textDecoration` or `textDecor` prop to set the text decoration of a\ntext element.\n\n```jsx\n<Text textDecoration=\"underline\">Hello World</Text>\n```\n\n| Prop                          | CSS Property      | Token Category |\n| ----------------------------- | ----------------- | -------------- |\n| `textDecor`, `textDecoration` | `text-decoration` | none           |\n\n## Text Decoration Color\n\nUse the `textDecorationColor` prop to set the text decoration color of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationColor=\"red\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textDecorationColor` | `text-decoration-color` | `colors`       |\n\n## Text Decoration Style\n\nUse the `textDecorationStyle` prop to set the text decoration style of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationStyle=\"dashed\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textDecorationStyle` | `text-decoration-style` | none           |\n\n## Text Decoration Thickness\n\nUse the `textDecorationThickness` prop to set the text decoration thickness of a\ntext element.\n\n```jsx\n<Text textDecoration=\"underline\" textDecorationThickness=\"1px\">\n  Hello World\n</Text>\n```\n\n| Prop                      | CSS Property                | Token Category |\n| ------------------------- | --------------------------- | -------------- |\n| `textDecorationThickness` | `text-decoration-thickness` | none           |\n\n## Text Underline Offset\n\nUse the `textUnderlineOffset` prop to set the text underline offset of a text\nelement.\n\n```jsx\n<Text textDecoration=\"underline\" textUnderlineOffset=\"1px\">\n  Hello World\n</Text>\n```\n\n| Prop                  | CSS Property            | Token Category |\n| --------------------- | ----------------------- | -------------- |\n| `textUnderlineOffset` | `text-underline-offset` | none           |\n\n## Text Transform\n\nUse the `textTransform` prop to set the text transform of a text element.\n\n```jsx\n<Text textTransform=\"uppercase\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `textTransform` | `text-transform` | none           |\n\n## Text Overflow\n\nUse the `textOverflow` prop to set the text overflow of a text element.\n\n```jsx\n<Text textOverflow=\"ellipsis\">Hello World</Text>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `textOverflow` | `text-overflow` | none           |\n\n## Text Shadow\n\nUse the `textShadow` prop to set the text shadow of a text element.\n\n```jsx\n<Text textShadow=\"0 0 1px red\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `textShadow` | `text-shadow` | `shadows`      |\n\n## Text Indent\n\nUse the `textIndent` prop to set the text indent of a text element.\n\n```jsx\n// hardcoded values\n<Text textIndent=\"1rem\">Hello World</Text>\n\n// token values\n<Text textIndent=\"3\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `textIndent` | `text-indent` | `spacing`      |\n\n## Vertical Align\n\nUse the `verticalAlign` prop to set the vertical alignment of a text element.\n\n```jsx\n<Text verticalAlign=\"top\">Hello World</Text>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `verticalAlign` | `vertical-align` | none           |\n\n## White Space\n\nUse the `whiteSpace` prop to set the white space of a text element.\n\n```jsx\n<Text whiteSpace=\"nowrap\">Hello World</Text>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `whiteSpace` | `white-space` | none           |\n\n## Word Break\n\nUse the `wordBreak` prop to set whether line breaks appear wherever the text\nwould otherwise overflow its content box.\n\n```jsx\n<Text wordBreak=\"break-all\">Hello World</Text>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `wordBreak` | `word-break` | none           |\n\n## Hyphens\n\nUse the `hyphens` prop to set whether hyphens are used in the text.\n\n```jsx\n<Text hyphens=\"auto\">Hello World</Text>\n```\n\n| Prop      | CSS Property | Token Category |\n| --------- | ------------ | -------------- |\n| `hyphens` | `hyphens`    | none           |\n",
+      "toc": [
+        {
+          "value": "Font Family",
+          "href": "#font-family",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Font Size",
+          "href": "#font-size",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Styles",
+          "href": "#text-styles",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Font Style",
+          "href": "#font-style",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Font Weight",
+          "href": "#font-weight",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Font Variant Numeric",
+          "href": "#font-variant-numeric",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Letter Spacing",
+          "href": "#letter-spacing",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Truncation",
+          "href": "#truncation",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Line Clamp",
+          "href": "#line-clamp",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Line Height",
+          "href": "#line-height",
+          "depth": 2,
+          "numbering": [
+            1,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Align",
+          "href": "#text-align",
+          "depth": 2,
+          "numbering": [
+            1,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Color",
+          "href": "#text-color",
+          "depth": 2,
+          "numbering": [
+            1,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Decoration",
+          "href": "#text-decoration",
+          "depth": 2,
+          "numbering": [
+            1,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Decoration Color",
+          "href": "#text-decoration-color",
+          "depth": 2,
+          "numbering": [
+            1,
+            14
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Decoration Style",
+          "href": "#text-decoration-style",
+          "depth": 2,
+          "numbering": [
+            1,
+            15
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Decoration Thickness",
+          "href": "#text-decoration-thickness",
+          "depth": 2,
+          "numbering": [
+            1,
+            16
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Underline Offset",
+          "href": "#text-underline-offset",
+          "depth": 2,
+          "numbering": [
+            1,
+            17
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Transform",
+          "href": "#text-transform",
+          "depth": 2,
+          "numbering": [
+            1,
+            18
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Overflow",
+          "href": "#text-overflow",
+          "depth": 2,
+          "numbering": [
+            1,
+            19
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Shadow",
+          "href": "#text-shadow",
+          "depth": 2,
+          "numbering": [
+            1,
+            20
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text Indent",
+          "href": "#text-indent",
+          "depth": 2,
+          "numbering": [
+            1,
+            21
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Vertical Align",
+          "href": "#vertical-align",
+          "depth": 2,
+          "numbering": [
+            1,
+            22
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "White Space",
+          "href": "#white-space",
+          "depth": 2,
+          "numbering": [
+            1,
+            23
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Word Break",
+          "href": "#word-break",
+          "depth": 2,
+          "numbering": [
+            1,
+            24
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Hyphens",
+          "href": "#hyphens",
+          "depth": 2,
+          "numbering": [
+            1,
+            25
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "meta": {
+    "id": "Home-Style Props",
+    "title": "Style Props",
+    "description": "JSX style props for applying CSS rules",
+    "order": 5,
+    "repoPath": "packages/nimbus/src/docs/style-props.mdx",
+    "menu": [
+      "Home",
+      "Style Props"
+    ],
+    "route": "home/style-props",
+    "tags": [
+      "document"
+    ],
+    "toc": [],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Style Props\n\nJSX style props for applying CSS rules\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Style Props\n\nJSX style props for applying CSS rules\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/home.json

@@ -0,0 +1,32 @@
+{
+  "meta": {
+    "id": "Home",
+    "title": "Home",
+    "description": "Start here if you're new.",
+    "order": 1,
+    "repoPath": "packages/nimbus/src/docs/home.mdx",
+    "menu": [
+      "Home"
+    ],
+    "route": "home",
+    "tags": [
+      "forms"
+    ],
+    "toc": [],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n<Frontpage />",
+  "views": {
+    "overview": {
+      "mdx": "\n<Frontpage />",
+      "toc": []
+    }
+  }
+}