@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/home-contribute-development-setup.json

@@ -0,0 +1,213 @@
+{
+  "meta": {
+    "id": "Home-Contribute-Setup",
+    "title": "Local Development Setup",
+    "description": "Set up nimbus for local development",
+    "order": 1,
+    "repoPath": "packages/nimbus/src/docs/contribute-setup.mdx",
+    "menu": [
+      "Home",
+      "Contribute",
+      "Development Setup"
+    ],
+    "route": "home/contribute/development-setup",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Getting Started",
+        "href": "#getting-started",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Prerequisites",
+        "href": "#prerequisites",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Installation",
+        "href": "#installation",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Development",
+        "href": "#development",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Starting the Development Environment",
+        "href": "#starting-the-development-environment",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Building the Project",
+        "href": "#building-the-project",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Complete Build",
+        "href": "#complete-build",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Targeted Builds",
+        "href": "#targeted-builds",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "Download",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n## Getting Started\n\n### Prerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- **Node.js**: v22.14.0+\n- **PNPM**: v9.12.3+\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/commercetools/nimbus.git\n```\n\n2. Enter the repository directory:\n\n```bash\ncd nimbus\n```\n\n3. Initialize the project:\n\n```bash\npnpm nimbus:init\n```\n\n## Development\n\n### Starting the Development Environment\n\nStart the development environment with the following command:\n\n```bash\npnpm start\n```\n\nThis will start both the documentation app and Storybook in parallel:\n\n- Documentation app: http://localhost:5173/\n- Storybook: http://localhost:6006/\n\nIf you prefer to run just one of the applications:\n\n```bash\n# Start only the documentation app\npnpm start:docs\n\n# Start only Storybook\npnpm start:storybook\n```\n\n### Building the Project\n\n#### Complete Build\n\nBuild all packages and applications:\n\n```bash\npnpm build\n```\n\n#### Targeted Builds\n\nBuild only specific parts of the system:\n\n```bash\n# Build only the packages (not the docs application)\npnpm build:packages\n\n# Build only the documentation application\npnpm build:docs\n\n# Build only the design tokens\npnpm build:tokens\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Getting Started\n\n### Prerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- **Node.js**: v22.14.0+\n- **PNPM**: v9.12.3+\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/commercetools/nimbus.git\n```\n\n2. Enter the repository directory:\n\n```bash\ncd nimbus\n```\n\n3. Initialize the project:\n\n```bash\npnpm nimbus:init\n```\n\n## Development\n\n### Starting the Development Environment\n\nStart the development environment with the following command:\n\n```bash\npnpm start\n```\n\nThis will start both the documentation app and Storybook in parallel:\n\n- Documentation app: http://localhost:5173/\n- Storybook: http://localhost:6006/\n\nIf you prefer to run just one of the applications:\n\n```bash\n# Start only the documentation app\npnpm start:docs\n\n# Start only Storybook\npnpm start:storybook\n```\n\n### Building the Project\n\n#### Complete Build\n\nBuild all packages and applications:\n\n```bash\npnpm build\n```\n\n#### Targeted Builds\n\nBuild only specific parts of the system:\n\n```bash\n# Build only the packages (not the docs application)\npnpm build:packages\n\n# Build only the documentation application\npnpm build:docs\n\n# Build only the design tokens\npnpm build:tokens\n```\n",
+      "toc": [
+        {
+          "value": "Getting Started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Prerequisites",
+          "href": "#prerequisites",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Installation",
+          "href": "#installation",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Development",
+          "href": "#development",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Starting the Development Environment",
+          "href": "#starting-the-development-environment",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Building the Project",
+          "href": "#building-the-project",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Complete Build",
+          "href": "#complete-build",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Targeted Builds",
+          "href": "#targeted-builds",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-contribute-stats.json

@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "id": "NimbusExportStats",
+    "title": "Nimbus Export Stats",
+    "description": "List of exports from the @commercetools/nimbus package",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/nimbus-exports.mdx",
+    "menu": [
+      "Home",
+      "Contribute",
+      "Stats"
+    ],
+    "route": "home/contribute/stats",
+    "tags": [
+      "stats",
+      "exports"
+    ],
+    "toc": [],
+    "icon": "BarChart",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "# Nimbus Exports Stats\n\nThis page provides a list of all exports from the `@commercetools/nimbus` package.\n\n<NimbusExportsList />",
+  "views": {
+    "overview": {
+      "mdx": "# Nimbus Exports Stats\n\nThis page provides a list of all exports from the `@commercetools/nimbus` package.\n\n<NimbusExportsList />",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/home-contribute.json

@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "id": "Home-Contribute-1746704391512",
+    "title": "Contributing",
+    "description": "Contribute to the nimbus development",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/home-contribute.mdx",
+    "menu": [
+      "Home",
+      "Contribute"
+    ],
+    "route": "home/contribute",
+    "tags": [
+      "guide",
+      "contributing",
+      "development"
+    ],
+    "toc": [],
+    "icon": "Computer",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Contributing\n\nContribute to the nimbus development.\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Contributing\n\nContribute to the nimbus development.\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/home-design-tokens-aspect-ratios.json

@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "id": "TokensAspectRatios",
+    "title": "Aspect Ratios",
+    "description": "The list of available aspect ratio tokens",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/tokens/aspect-ratios.mdx",
+    "menu": [
+      "Home",
+      "Design Tokens",
+      "Aspect Ratios"
+    ],
+    "route": "home/design-tokens/aspect-ratios",
+    "tags": [
+      "aspect ratio",
+      "ratios"
+    ],
+    "toc": [],
+    "icon": "ImageAspectRatio",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Aspect Ratios\n\nThe list of available aspect ratio tokens:\n\n<GenericTokenTableDemo category=\"aspectRatios\" demoProperty=\"aspectRatio\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Aspect Ratios\n\nThe list of available aspect ratio tokens:\n\n<GenericTokenTableDemo category=\"aspectRatios\" demoProperty=\"aspectRatio\" />\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/home-design-tokens-borders.json

@@ -0,0 +1,35 @@
+{
+  "meta": {
+    "id": "TokensBorders",
+    "title": "Borders",
+    "description": "The list of available border tokens",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/tokens/borders.mdx",
+    "menu": [
+      "Home",
+      "Design Tokens",
+      "Borders"
+    ],
+    "route": "home/design-tokens/borders",
+    "tags": [
+      "border"
+    ],
+    "toc": [],
+    "icon": "BorderStyle",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Borders\n\nThe list of available border tokens:\n\n<GenericTokenTableDemo category=\"borders\" demoProperty=\"border\" />\n\n> [!IMPORTANT]  \n> The design system uses `box-sizing: border-box` as a default. If you assign an\n> element a `width` of `100px`, the computed `border-width` value will be\n> included in the `100px`, effectively reducing the amount of space available\n> for content.\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Borders\n\nThe list of available border tokens:\n\n<GenericTokenTableDemo category=\"borders\" demoProperty=\"border\" />\n\n> [!IMPORTANT]  \n> The design system uses `box-sizing: border-box` as a default. If you assign an\n> element a `width` of `100px`, the computed `border-width` value will be\n> included in the `100px`, effectively reducing the amount of space available\n> for content.\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/home-design-tokens-colors.json

@@ -0,0 +1,157 @@
+{
+  "meta": {
+    "id": "Colors",
+    "title": "Colors",
+    "description": "available colors",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/tokens/colors.mdx",
+    "menu": [
+      "Home",
+      "Design Tokens",
+      "Colors"
+    ],
+    "route": "home/design-tokens/colors",
+    "tags": [
+      "colors"
+    ],
+    "toc": [
+      {
+        "value": "Scale steps",
+        "href": "#scale-steps",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Semantic Colors",
+        "href": "#semantic-colors",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Brand Colors",
+        "href": "#brand-colors",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "System Colors",
+        "href": "#system-colors",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Blacks & Whites",
+        "href": "#blacks--whites",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Semantic Color Shortcuts",
+        "href": "#semantic-color-shortcuts",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "Palette",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Colors\n\nOur color system is built on [Radix Colors](https://www.radix-ui.com/colors),\nwhich organizes colors into **scales** based on **contrast** levels to ensure\nclarity and **usability** across various contexts. Each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. A full scale for a given color is referred to as a\n**colorPalette** (e.g., colorPalette: \"red\").\n\nThe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended contrast levels. This flexibility ensures that\nour designs remain adaptable while maintaining visual hierarchy. Additionally,\n_the contrast-based approach eliminates the need for a separate \"dark mode\"\ndesign_, as the scales naturally support both light and dark environments\nseamlessly.\n\n## Scale steps\n\nBelow is a list of steps with corresponding use cases for various background,\nborder, and text styles in the design system:\n\n| **Step** | **Use Case** | **WCAG AA Text Pairing** |\n| -------- | ------------------------------------------------------ | ------------------------ |\n| **1**        | App background                                         | Steps 11, 12            |\n| **2**        | Subtle background                                      | Steps 11, 12            |\n| **3**        | UI element background                                  | Steps 11, 12            |\n| **4**        | Hovered UI element background                          | Steps 11, 12            |\n| **5**        | Active / Selected UI element background                | Steps 11, 12            |\n| **6**        | Subtle borders and separators                          | —                        |\n| **7**        | UI element border and focus rings                      | —                        |\n| **8**        | Hovered UI element border                              | —                        |\n| **9**        | Solid backgrounds                                      | contrast step            |\n| **10**       | Hovered solid backgrounds                              | contrast step            |\n| **11**       | Low-contrast text                                      | Steps 1–5               |\n| **12**       | High-contrast text                                     | Steps 1–5               |\n| **contrast** | High-contrast text on solid backgrounds                | Steps 9, 10             |\n\n<br />\n\nBackground steps (1–5) are designed to pair with text steps (11–12) across all\ncolor scales, and the scales are interchangeable — swapping one color scale for\nanother preserves the same contrast relationships. For solid background colors\n(steps 9–10), use the special `contrast` step which provides a black or white\nvalue optimized for readability.\n\nThe Radix color system is designed to produce accessible palettes. Radix uses\n[APCA (Accessible Perceptual Contrast Algorithm)](https://github.com/Myndex/APCA),\na more advanced method for calculating perceived contrast that accounts for\nhuman visual perception more accurately than the traditional WCAG 2.x formula.\n\n> **Note:** Some automated accessibility tools still use the older WCAG 2.x\n> synthetic contrast calculation (4.5:1 ratio), which can produce false\n> positives for certain color combinations that APCA considers accessible. If\n> your tooling flags contrast issues with these pairings, verify the results\n> against an APCA-based checker before making changes.\n\nFor more details on how the scale is designed, see the\n[Radix color scale documentation](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale).\n\n## Semantic Colors\n\nColors with meaning, used to communicate status or state.\n\n<br />\n\n<ColorScales ids=\"primary, neutral, info, positive, warning, critical\" />\n\n## Brand Colors\n\nCustom colors, tailored to the brand.\n\n<br />\n\n<ColorScales ids=\"ctviolet, ctteal, ctyellow\" />\n\n## System Colors\n\nColors available for decoration or reference.\n\n<br />\n\n<ColorScales ids=\"tomato,red,ruby, crimson, pink, plum, purple, violet, iris,indigo,blue,cyan, teal,jade,green,grass,bronze,gold,brown,orange,amber,yellow,lime,mint,sky\" />\n\n## Blacks & Whites\n\nBlack and white color scales do not adapt to the selected color-mode. Means a\nwhite will always be white, a black will always be black.\n\n> [!TIP]\n> Use the `neutral` color scales if you want to refer to a gray-tone that works\n> on the current background color (light-/dark-mode dependent).\n\n<br />\n\n<ColorScales ids=\"blackAlpha, whiteAlpha\" />\n\n<br />\n\n## Semantic Color Shortcuts\n\nIn addition to the color scales above, Nimbus provides a set of shorthand tokens\nfor the most common color use cases. These map to specific steps on the semantic\npalettes and automatically adapt to light and dark mode.\n\nUse these directly in JSX props or recipes without referencing a specific palette\nor step number.\n\n| **Token**            | **Use Case**                      | **Maps to**         |\n| -------------------- | --------------------------------- | ------------------- |\n| `bg`                 | Page / container background       | `#fff` (light) · `neutral.1` (dark) |\n| `fg`                 | Primary text / foreground          | `neutral.12`        |\n| `border`             | Default border color               | `neutral.6`         |\n| `border.muted`       | Subtle border, lower contrast      | `neutral.7`         |\n| `border.subtle`      | Very subtle border / separator     | `neutral.6`         |\n| `border.emphasized`  | Emphasized border, higher contrast | `neutral.8`         |\n| `border.inverted`    | Inverted / strong border           | `neutral.9`         |\n| `border.critical`    | Error / destructive borders        | `critical.8`        |\n| `border.warning`     | Warning borders                    | `warning.8`         |\n| `border.positive`    | Success borders                    | `positive.8`        |\n| `border.info`        | Informational borders              | `info.8`            |\n\n```tsx\n// Usage in JSX props\n<Box bg=\"bg\" color=\"fg\" borderColor=\"border.muted\">\n  content\n</Box>\n\n// Usage in recipes\nbase: {\n  bg: \"bg\",\n  color: \"fg\",\n  borderColor: \"border\",\n}\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Colors\n\nOur color system is built on [Radix Colors](https://www.radix-ui.com/colors),\nwhich organizes colors into **scales** based on **contrast** levels to ensure\nclarity and **usability** across various contexts. Each scale provides a range\nof tones, from subtle backgrounds to high-contrast elements like text and\ninteractive borders. A full scale for a given color is referred to as a\n**colorPalette** (e.g., colorPalette: \"red\").\n\nThe scales are _interchangeable_, meaning a color like red can be swapped with\ngreen without losing the intended contrast levels. This flexibility ensures that\nour designs remain adaptable while maintaining visual hierarchy. Additionally,\n_the contrast-based approach eliminates the need for a separate \"dark mode\"\ndesign_, as the scales naturally support both light and dark environments\nseamlessly.\n\n## Scale steps\n\nBelow is a list of steps with corresponding use cases for various background,\nborder, and text styles in the design system:\n\n| **Step** | **Use Case** | **WCAG AA Text Pairing** |\n| -------- | ------------------------------------------------------ | ------------------------ |\n| **1**        | App background                                         | Steps 11, 12            |\n| **2**        | Subtle background                                      | Steps 11, 12            |\n| **3**        | UI element background                                  | Steps 11, 12            |\n| **4**        | Hovered UI element background                          | Steps 11, 12            |\n| **5**        | Active / Selected UI element background                | Steps 11, 12            |\n| **6**        | Subtle borders and separators                          | —                        |\n| **7**        | UI element border and focus rings                      | —                        |\n| **8**        | Hovered UI element border                              | —                        |\n| **9**        | Solid backgrounds                                      | contrast step            |\n| **10**       | Hovered solid backgrounds                              | contrast step            |\n| **11**       | Low-contrast text                                      | Steps 1–5               |\n| **12**       | High-contrast text                                     | Steps 1–5               |\n| **contrast** | High-contrast text on solid backgrounds                | Steps 9, 10             |\n\n<br />\n\nBackground steps (1–5) are designed to pair with text steps (11–12) across all\ncolor scales, and the scales are interchangeable — swapping one color scale for\nanother preserves the same contrast relationships. For solid background colors\n(steps 9–10), use the special `contrast` step which provides a black or white\nvalue optimized for readability.\n\nThe Radix color system is designed to produce accessible palettes. Radix uses\n[APCA (Accessible Perceptual Contrast Algorithm)](https://github.com/Myndex/APCA),\na more advanced method for calculating perceived contrast that accounts for\nhuman visual perception more accurately than the traditional WCAG 2.x formula.\n\n> **Note:** Some automated accessibility tools still use the older WCAG 2.x\n> synthetic contrast calculation (4.5:1 ratio), which can produce false\n> positives for certain color combinations that APCA considers accessible. If\n> your tooling flags contrast issues with these pairings, verify the results\n> against an APCA-based checker before making changes.\n\nFor more details on how the scale is designed, see the\n[Radix color scale documentation](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale).\n\n## Semantic Colors\n\nColors with meaning, used to communicate status or state.\n\n<br />\n\n<ColorScales ids=\"primary, neutral, info, positive, warning, critical\" />\n\n## Brand Colors\n\nCustom colors, tailored to the brand.\n\n<br />\n\n<ColorScales ids=\"ctviolet, ctteal, ctyellow\" />\n\n## System Colors\n\nColors available for decoration or reference.\n\n<br />\n\n<ColorScales ids=\"tomato,red,ruby, crimson, pink, plum, purple, violet, iris,indigo,blue,cyan, teal,jade,green,grass,bronze,gold,brown,orange,amber,yellow,lime,mint,sky\" />\n\n## Blacks & Whites\n\nBlack and white color scales do not adapt to the selected color-mode. Means a\nwhite will always be white, a black will always be black.\n\n> [!TIP]\n> Use the `neutral` color scales if you want to refer to a gray-tone that works\n> on the current background color (light-/dark-mode dependent).\n\n<br />\n\n<ColorScales ids=\"blackAlpha, whiteAlpha\" />\n\n<br />\n\n## Semantic Color Shortcuts\n\nIn addition to the color scales above, Nimbus provides a set of shorthand tokens\nfor the most common color use cases. These map to specific steps on the semantic\npalettes and automatically adapt to light and dark mode.\n\nUse these directly in JSX props or recipes without referencing a specific palette\nor step number.\n\n| **Token**            | **Use Case**                      | **Maps to**         |\n| -------------------- | --------------------------------- | ------------------- |\n| `bg`                 | Page / container background       | `#fff` (light) · `neutral.1` (dark) |\n| `fg`                 | Primary text / foreground          | `neutral.12`        |\n| `border`             | Default border color               | `neutral.6`         |\n| `border.muted`       | Subtle border, lower contrast      | `neutral.7`         |\n| `border.subtle`      | Very subtle border / separator     | `neutral.6`         |\n| `border.emphasized`  | Emphasized border, higher contrast | `neutral.8`         |\n| `border.inverted`    | Inverted / strong border           | `neutral.9`         |\n| `border.critical`    | Error / destructive borders        | `critical.8`        |\n| `border.warning`     | Warning borders                    | `warning.8`         |\n| `border.positive`    | Success borders                    | `positive.8`        |\n| `border.info`        | Informational borders              | `info.8`            |\n\n```tsx\n// Usage in JSX props\n<Box bg=\"bg\" color=\"fg\" borderColor=\"border.muted\">\n  content\n</Box>\n\n// Usage in recipes\nbase: {\n  bg: \"bg\",\n  color: \"fg\",\n  borderColor: \"border\",\n}\n```\n",
+      "toc": [
+        {
+          "value": "Scale steps",
+          "href": "#scale-steps",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Semantic Colors",
+          "href": "#semantic-colors",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Brand Colors",
+          "href": "#brand-colors",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "System Colors",
+          "href": "#system-colors",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Blacks & Whites",
+          "href": "#blacks--whites",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Semantic Color Shortcuts",
+          "href": "#semantic-color-shortcuts",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-design-tokens-other-animations.json

@@ -0,0 +1,119 @@
+{
+  "meta": {
+    "id": "TokensAnimations",
+    "title": "Animations",
+    "description": "The list of available animation tokens",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/tokens/animations.mdx",
+    "menu": [
+      "Home",
+      "Design Tokens",
+      "Other",
+      "Animations"
+    ],
+    "route": "home/design-tokens/other/animations",
+    "tags": [
+      "animation",
+      "transition"
+    ],
+    "toc": [
+      {
+        "value": "Shorthands",
+        "href": "#shorthands",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Keyframe Animations",
+        "href": "#keyframe-animations",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Durations",
+        "href": "#durations",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Easings",
+        "href": "#easings",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      }
+    ],
+    "icon": "RotateRight",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Animations\n\nThis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\n## Shorthands\n\nThe following list of shorthand tokens can be used as `animation` property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<GenericTokenTableDemo category=\"animations\" demoProperty=\"animation\" />\n\n## Keyframe Animations\n\nCSS keyframe animations define animations as a sequence of steps, each with its\nown set of properties. They allow for more complex, multi-step animations that\ncan be controlled with keyframes and timing functions.\n\n<KeyframeTokenDemo />\n\n## Durations\n\nDurations define **how long** an animation takes to complete one cycle, directly\nimpacting the perception of speed and fluidity.\n\nShort durations create snappy, quick interactions that feel responsive but can\nrisk appearing abrupt. Longer durations allow for smoother, more deliberate\nmotion but can feel sluggish if overused.\n\nFinding the right balance is key—durations should match the context and intent\nof the interaction. They’re measured in seconds or milliseconds and are often\npaired with easings to create harmonious, intentional animations.\n\n<DurationTokenDemo />\n\n## Easings\n\n_Easings_ determine **the rate of change** of an animation over time,\nessentially defining how an animation transitions between its start and end\nstates.\n\nInstead of moving linearly, animations can accelerate, decelerate, or follow\ncomplex curves, making the motion feel more dynamic and natural.\n\nThis is achieved through mathematical easing functions, like linear\ninterpolation or bezier curves, which map progress over time to the visible\nchange in animation properties. It controls the \"rhythm\" of the animation,\nensuring it feels fluid or deliberate depending on the desired effect.\n\n<EasingTokenDemo />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Animations\n\nThis page provides a list of tokens for applying ready made animations\n(shorthands) or creating custom animations or transitions by combining keyframe\nanimations with durations and easings.\n\n## Shorthands\n\nThe following list of shorthand tokens can be used as `animation` property\nvalue, they combine a keyframe animation with duration and easing for a reusable\nanimation definition.\n\n<GenericTokenTableDemo category=\"animations\" demoProperty=\"animation\" />\n\n## Keyframe Animations\n\nCSS keyframe animations define animations as a sequence of steps, each with its\nown set of properties. They allow for more complex, multi-step animations that\ncan be controlled with keyframes and timing functions.\n\n<KeyframeTokenDemo />\n\n## Durations\n\nDurations define **how long** an animation takes to complete one cycle, directly\nimpacting the perception of speed and fluidity.\n\nShort durations create snappy, quick interactions that feel responsive but can\nrisk appearing abrupt. Longer durations allow for smoother, more deliberate\nmotion but can feel sluggish if overused.\n\nFinding the right balance is key—durations should match the context and intent\nof the interaction. They’re measured in seconds or milliseconds and are often\npaired with easings to create harmonious, intentional animations.\n\n<DurationTokenDemo />\n\n## Easings\n\n_Easings_ determine **the rate of change** of an animation over time,\nessentially defining how an animation transitions between its start and end\nstates.\n\nInstead of moving linearly, animations can accelerate, decelerate, or follow\ncomplex curves, making the motion feel more dynamic and natural.\n\nThis is achieved through mathematical easing functions, like linear\ninterpolation or bezier curves, which map progress over time to the visible\nchange in animation properties. It controls the \"rhythm\" of the animation,\nensuring it feels fluid or deliberate depending on the desired effect.\n\n<EasingTokenDemo />\n",
+      "toc": [
+        {
+          "value": "Shorthands",
+          "href": "#shorthands",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyframe Animations",
+          "href": "#keyframe-animations",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Durations",
+          "href": "#durations",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Easings",
+          "href": "#easings",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}