Render tokens pages in main nav using standard markdown renderer

polaris.shopify.com/content/tokens/border.mdx

@@ -0,0 +1,19 @@
+---
+title: Border
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="border" />
+
+<TokenList>
+  {tokens.border
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="border"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/breakpoints.mdx

@@ -0,0 +1,68 @@
+---
+title: Breakpoints
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="breakpoints" />
+
+<TokenList>
+  {tokens.breakpoints
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="breakpoints"
+        token={token}
+      />
+    ))}
+</TokenList>
+
+<p id="usage" role="heading" aria-level="2">Usage in Media Queries</p>
+
+### Sass variables
+
+A transform takes the above values and generates Sass variables (which can be
+used in media conditions) for each breakpoint in \`up\`, \`down\`, and \`only\` directions.
+While we currently support \`down\` media conditions, we encourage developers to
+adopt a mobile first strategy and use \`up\` wherever possible.
+
+Example of generated output for \`breakpoints-md\`:
+```scss
+@media #{$p-breakpoints-md-up} {/*...*/}
+@media #{$p-breakpoints-md-down} {/*...*/}
+@media #{$p-breakpoints-md-only} {/*...*/}
+```
+
+To use these Sass variables you will need to import the \`media-queries.scss\`
+file from \`@shopify/polaris-tokens\` in your project:
+
+```scss
+@import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
+```
+
+### Media query variables
+
+A collection of all Sass variables for applying responsive styles at a given breakpoint alias.
+
+```scss
+$p-breakpoints-xs-up: '(min-width: 0em)';
+$p-breakpoints-xs-down: '(max-width: -0.0025em)';
+$p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)';
+
+$p-breakpoints-sm-up: '(min-width: 30.625em)';
+$p-breakpoints-sm-down: '(max-width: 30.6225em)';
+$p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)';
+
+$p-breakpoints-md-up: '(min-width: 48em)';
+$p-breakpoints-md-down: '(max-width: 47.9975em)';
+$p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)';
+
+$p-breakpoints-lg-up: '(min-width: 65em)';
+$p-breakpoints-lg-down: '(max-width: 64.9975em)';
+$p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)';
+
+$p-breakpoints-xl-up: '(min-width: 90em)';
+$p-breakpoints-xl-down: '(max-width: 89.9975em)';
+$p-breakpoints-xl-only: '(min-width: 90em)';
+```

polaris.shopify.com/content/tokens/color.mdx

@@ -0,0 +1,19 @@
+---
+title: Color
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="color" />
+
+<TokenList>
+  {tokens.color
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="color"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/font.mdx

@@ -0,0 +1,19 @@
+---
+title: Font
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="font" />
+
+<TokenList>
+  {tokens.font
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="font"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/height.mdx

@@ -0,0 +1,19 @@
+---
+title: Height
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="height" />
+
+<TokenList>
+  {tokens.height
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="height"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/motion.mdx

@@ -0,0 +1,31 @@
+---
+title: Motion
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="motion" />
+
+<TokenList>
+  {tokens.motion
+    .sort((token) =>
+      token.name.includes('ease') || token.name.includes('linear')
+        ? -1
+        : 1,
+    )
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="motion"
+        token={token}
+      />
+    ))}
+</TokenList>
+
+<style>
+  {tokens.motion
+    .filter(({name}) => name.includes('keyframes'))
+    .map(({name, value}) => `@keyframes ${name} ${value}`)
+    .join('\n')}
+</style>

polaris.shopify.com/content/tokens/shadow.mdx

@@ -0,0 +1,19 @@
+---
+title: Shadow
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="shadow" />
+
+<TokenList>
+  {tokens.shadow
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="shadow"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/space.mdx

@@ -0,0 +1,19 @@
+---
+title: Space
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="space" />
+
+<TokenList>
+  {tokens.space
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="space"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/text.mdx

@@ -0,0 +1,19 @@
+---
+title: Text
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="text" />
+
+<TokenList>
+  {tokens.text
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="text"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/width.mdx

@@ -0,0 +1,19 @@
+---
+title: Width
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="width" />
+
+<TokenList>
+  {tokens.width
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="width"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/content/tokens/z-index.mdx

@@ -0,0 +1,19 @@
+---
+title: Z-Index
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="z-index" />
+
+<TokenList>
+  {tokens['zIndex']
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="z-index"
+        token={token}
+      />
+    ))}
+</TokenList>

polaris.shopify.com/package.json

@@ -40,6 +40,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "lodash.get": "^4.4.2",
     "lodash.throttle": "^4.1.1",
+    "lodash.mapvalues": "^4.6.0",
     "nanoid": "^4.0.2",
     "next": "^13.0.6",
     "next-mdx-remote": "^4.4.1",
@@ -67,6 +68,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.mapvalues": "^4.6.9",
     "@types/marked": "^4.0.3",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.0",

polaris.shopify.com/pages/[...slug].tsx

@@ -6,6 +6,8 @@ import type {
 import Link from 'next/link';
 import fs from 'fs';
 import globby from 'globby';
+import {metaThemeDefault as tokenGroups} from '@shopify/polaris-tokens';
+import mapValues from 'lodash.mapvalues';
 
 import {serializeMdx} from '../src/components/Markdown/serialize';
 import Markdown from '../src/components/Markdown';
@@ -98,7 +100,7 @@ const CatchAllTemplate = ({
     <Page
       editPageLinkPath={editPageLinkPath}
       isContentPage={isContentPage}
-      showTOC={showTOC || isContentPage}
+      showTOC={showTOC}
       collapsibleTOC={collapsibleTOC}
     >
       <PageMeta title={title} description={seoDescription} noIndex={noIndex} />
@@ -310,6 +312,25 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
         end();
       },
     ],
+    [
+      // token pages need token info
+      () => !pathIsDirectory && params.slug[0] === 'tokens',
+      async (end) => {
+        // Flatten each group to an array of objects
+        const tokenGroupObjects = mapValues(tokenGroups, (tokens) =>
+          Object.entries(tokens)
+            .map(([name, value]) => ({name, ...value}))
+            // Some tokens have custom sorting for display
+            .sort((token) =>
+              token.name.includes('ease') || token.name.includes('linear')
+                ? -1
+                : 1,
+            ),
+        );
+        scope.tokens = tokenGroupObjects;
+        end();
+      },
+    ],
     // index pages need to know the files in their folder
     [
       () => pathIsDirectory,
@@ -330,12 +351,14 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
       ? mdx.frontmatter.seoDescription
       : (data.firstParagraph as string) ?? null;
 
+  const isContentPage = !pathIsDirectory;
+
   const props: Props = {
     mdx,
     seoDescription,
     editPageLinkPath,
-    isContentPage: !pathIsDirectory,
-    showTOC: mdx.frontmatter.showTOC || false,
+    isContentPage,
+    showTOC: mdx.frontmatter.showTOC ?? isContentPage,
     collapsibleTOC: mdx.frontmatter.collapsibleTOC || false,
   };
 
@@ -344,7 +367,6 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
 
 const catchAllTemplateExcludeList = [
   '/icons',
-  '/tokens',
   '/sandbox',
   '/tools/stylelint-polaris/rules',
 ];