add overlay offset

docs/storybook/stories/Size/Border.stories.tsx

@@ -76,7 +76,7 @@ export const BorderSize = () => {
             field: 'original',
             rowHeader: true,
             renderCell: row => {
-              return <p>{row.value}</p>
+              return <p>{row.original.value}</p>
             },
           },
         ]}

docs/storybook/stories/Size/Breakpoints.stories.tsx

@@ -51,7 +51,7 @@ export const Breakpoints = () => {
             field: 'original',
             rowHeader: true,
             renderCell: row => {
-              return <p>{row.value}</p>
+              return <p>{row.original.value}</p>
             },
           },
         ]}

docs/storybook/stories/Size/Overlay.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+// eslint-disable-next-line import/extensions
+import sizeTokens from '../../../../tokens-next-private/docs/functional/size/size.json'
+import {DataTable, Table} from '@primer/react/drafts'
+import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
+import {getTokensByName} from '../utilities/getTokensByName'
+
+export default {
+  title: 'Size/Functional/Overlay',
+  parameters: {
+    controls: {hideNoControlsWarning: true},
+  },
+  tags: ['excludeSnapshot'],
+}
+
+export const Overlay = () => {
+  const data = getTokensByName(sizeTokens, 'overlay').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <h1 className="sr-only" id="overlau">
+        Overlay
+      </h1>
+      <DataTable
+        aria-labelledby="overlay"
+        data={data}
+        columns={[
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value}</p>
+            },
+          },
+          {
+            header: 'Source value',
+            field: 'original',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.original.value}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}

docs/storybook/stories/Size/ViewportRange.stories.tsx

@@ -50,7 +50,7 @@ export const Viewport = () => {
             field: 'original',
             rowHeader: true,
             renderCell: row => {
-              return <p>{row.value}</p>
+              return <p>{row.original.value}</p>
             },
           },
         ]}

src/tokens/functional/size/size.json

@@ -787,6 +787,16 @@
           "scopes": ["radius"]
         }
       }
+    },
+    "offset": {
+      "$value": "4",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
     }
   }
 }