diff --git a/docs/storybook/stories/Color/DataVis/Charts.stories.tsx b/docs/storybook/stories/Color/DataVis/Charts.stories.tsx
index 7c2e4d40e..638204d8d 100644
--- a/docs/storybook/stories/Color/DataVis/Charts.stories.tsx
+++ b/docs/storybook/stories/Color/DataVis/Charts.stories.tsx
@@ -45,7 +45,7 @@ export const HighchartsAccentColors = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Color/Functional/Display.stories.tsx b/docs/storybook/stories/Color/Functional/Display.stories.tsx
index 576ee1209..15e956bc2 100644
--- a/docs/storybook/stories/Color/Functional/Display.stories.tsx
+++ b/docs/storybook/stories/Color/Functional/Display.stories.tsx
@@ -48,7 +48,7 @@ export const Foreground = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -96,7 +96,7 @@ export const Background = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -144,7 +144,7 @@ export const Border = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx b/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx
index 38baa0214..77f7f2e34 100644
--- a/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx
+++ b/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx
@@ -45,7 +45,7 @@ export const Foreground = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -91,7 +91,7 @@ export const Background = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -137,7 +137,7 @@ export const Border = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -183,7 +183,7 @@ export const Shadow = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
index 5e75d782d..9e44f4fbf 100644
--- a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
+++ b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -52,7 +52,7 @@ export const Avatar = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -124,7 +124,7 @@ export const Control = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -177,7 +177,7 @@ export const Counter = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -242,7 +242,7 @@ export const Button = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -288,7 +288,7 @@ export const Focus = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -341,7 +341,7 @@ export const Header = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -394,7 +394,7 @@ export const Menu = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -447,7 +447,7 @@ export const Overlay = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -500,7 +500,7 @@ export const SelectMenu = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -553,7 +553,7 @@ export const SideNav = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -606,7 +606,7 @@ export const TimelineBadge = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -659,7 +659,7 @@ export const UnderlineNav = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -709,7 +709,7 @@ export const Selection = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -762,7 +762,7 @@ export const Tooltip = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx b/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
new file mode 100644
index 000000000..71015ecf3
--- /dev/null
+++ b/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
@@ -0,0 +1,398 @@
+import React from 'react'
+// eslint-disable-next-line import/extensions
+import lightColorTokens from '../../../../../dist/docs/functional/themes/light.json'
+import darkColorTokens from '../../../../../dist/docs/functional/themes/dark.json'
+import lightHCColorTokens from '../../../../../dist/docs/functional/themes/light-high-contrast.json'
+import darkHCColorTokens from '../../../../../dist/docs/functional/themes/dark-high-contrast.json'
+import darkDimmedColorTokens from '../../../../../dist/docs/functional/themes/dark-dimmed.json'
+import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
+import {DataTable, Table, Stack} from '@primer/react/drafts'
+import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
+
+export default {
+  title: 'Color/Transparent',
+  parameters: {
+    controls: {hideNoControlsWarning: true},
+    options: {
+      showPanel: false,
+    },
+    theme: 'dark',
+  },
+}
+
+export const Light = () => {
+  const data = Object.entries(lightColorTokens)
+    .filter(([name, token]) => token.alpha)
+    .map(([name, token]) => {
+      return {
+        id: name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      {/* <Table.Title as="h1" id="pattern">
+        Light transparent colors (avoid using the global theme picker)
+      </Table.Title> */}
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Base color',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
+              return (
+                <Stack direction="horizontal" gap="condensed">
+                  <ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
+                </Stack>
+              )
+            },
+          },
+          {
+            header: 'Alpha',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.alpha}</p>
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.value} copyClipboard />
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
+Light.decorators = [
+  Story => (
+    <div data-color-mode="light" data-light-theme="light" data-dark-theme="light">
+      <Story />
+    </div>
+  ),
+]
+
+export const Dark = () => {
+  const data = Object.entries(darkColorTokens)
+    .filter(([name, token]) => token.alpha)
+    .map(([name, token]) => {
+      return {
+        id: name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      {/* <Table.Title as="h1" id="pattern">
+        Light transparent colors (avoid using the global theme picker)
+      </Table.Title> */}
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Base color',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
+              return (
+                <Stack direction="horizontal" gap="condensed">
+                  <ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
+                </Stack>
+              )
+            },
+          },
+          {
+            header: 'Alpha',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.alpha}</p>
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.value} copyClipboard />
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
+Dark.decorators = [
+  Story => (
+    <div data-color-mode="dark" data-light-theme="dark" data-dark-theme="dark">
+      <Story />
+    </div>
+  ),
+]
+
+export const LightHighContrast = () => {
+  const data = Object.entries(lightHCColorTokens)
+    .filter(([name, token]) => token.alpha)
+    .map(([name, token]) => {
+      return {
+        id: name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      {/* <Table.Title as="h1" id="pattern">
+        Light transparent colors (avoid using the global theme picker)
+      </Table.Title> */}
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Base color',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
+              return (
+                <Stack direction="horizontal" gap="condensed">
+                  <ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
+                </Stack>
+              )
+            },
+          },
+          {
+            header: 'Alpha',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.alpha}</p>
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.value} copyClipboard />
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
+LightHighContrast.decorators = [
+  Story => (
+    <div data-color-mode="light" data-light-theme="light_high_contrast" data-dark-theme="light_high_contrast">
+      <Story />
+    </div>
+  ),
+]
+
+export const DarkHighContrast = () => {
+  const data = Object.entries(darkHCColorTokens)
+    .filter(([name, token]) => token.alpha)
+    .map(([name, token]) => {
+      return {
+        id: name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      {/* <Table.Title as="h1" id="pattern">
+        Light transparent colors (avoid using the global theme picker)
+      </Table.Title> */}
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Base color',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
+              return (
+                <Stack direction="horizontal" gap="condensed">
+                  <ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
+                </Stack>
+              )
+            },
+          },
+          {
+            header: 'Alpha',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.alpha}</p>
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.value} copyClipboard />
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
+DarkHighContrast.decorators = [
+  Story => (
+    <div data-color-mode="dark" data-light-theme="dark_high_contrast" data-dark-theme="dark_high_contrast">
+      <Story />
+    </div>
+  ),
+]
+
+export const DarkDimmed = () => {
+  const data = Object.entries(darkDimmedColorTokens)
+    .filter(([name, token]) => token.alpha)
+    .map(([name, token]) => {
+      return {
+        id: name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Base color',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
+              return (
+                <Stack direction="horizontal" gap="condensed">
+                  <ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
+                </Stack>
+              )
+            },
+          },
+          {
+            header: 'Alpha',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.alpha}</p>
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.value} copyClipboard />
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
+DarkDimmed.decorators = [
+  Story => (
+    <div data-color-mode="dark" data-light-theme="dark_dimmed" data-dark-theme="dark_dimmed">
+      <Story />
+    </div>
+  ),
+]
diff --git a/docs/storybook/stories/Size/Border.stories.tsx b/docs/storybook/stories/Size/Border.stories.tsx
index f6c01334a..d5860b2cf 100644
--- a/docs/storybook/stories/Size/Border.stories.tsx
+++ b/docs/storybook/stories/Size/Border.stories.tsx
@@ -61,7 +61,7 @@ export const BorderSize = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -117,7 +117,7 @@ export const BorderRadius = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -178,7 +178,7 @@ export const Outline = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/Breakpoints.stories.tsx b/docs/storybook/stories/Size/Breakpoints.stories.tsx
index 6d9b7810a..692de62e1 100644
--- a/docs/storybook/stories/Size/Breakpoints.stories.tsx
+++ b/docs/storybook/stories/Size/Breakpoints.stories.tsx
@@ -34,7 +34,7 @@ export const Breakpoints = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/Control.stories.tsx b/docs/storybook/stories/Size/Control.stories.tsx
index e6611deb7..3b3812d30 100644
--- a/docs/storybook/stories/Size/Control.stories.tsx
+++ b/docs/storybook/stories/Size/Control.stories.tsx
@@ -76,7 +76,7 @@ export const XSmall = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -152,7 +152,7 @@ export const Small = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -235,7 +235,7 @@ export const Medium = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -311,7 +311,7 @@ export const Large = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -387,7 +387,7 @@ export const XLarge = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -453,7 +453,7 @@ export const ControlStackRegular = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -516,7 +516,7 @@ export const ControlStackResponsive = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -571,7 +571,7 @@ export const ControlTouchTarget = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
@@ -628,7 +628,7 @@ export const ControlTouchTargetResponsive = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/Overlay.stories.tsx b/docs/storybook/stories/Size/Overlay.stories.tsx
index 34755cee7..859866963 100644
--- a/docs/storybook/stories/Size/Overlay.stories.tsx
+++ b/docs/storybook/stories/Size/Overlay.stories.tsx
@@ -34,7 +34,7 @@ export const Overlay = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/Size.stories.tsx b/docs/storybook/stories/Size/Size.stories.tsx
index af5337140..f174dbf04 100644
--- a/docs/storybook/stories/Size/Size.stories.tsx
+++ b/docs/storybook/stories/Size/Size.stories.tsx
@@ -44,7 +44,7 @@ export const Base = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/Stack.stories.tsx b/docs/storybook/stories/Size/Stack.stories.tsx
index a6e530992..381cffdfd 100644
--- a/docs/storybook/stories/Size/Stack.stories.tsx
+++ b/docs/storybook/stories/Size/Stack.stories.tsx
@@ -49,7 +49,7 @@ export const Stack = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/Size/ViewportRange.stories.tsx b/docs/storybook/stories/Size/ViewportRange.stories.tsx
index f5dfad36a..d01124a8a 100644
--- a/docs/storybook/stories/Size/ViewportRange.stories.tsx
+++ b/docs/storybook/stories/Size/ViewportRange.stories.tsx
@@ -33,7 +33,7 @@ export const Viewport = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <InlineCode value={row.name} copyClipboard />
+              return <InlineCode value={row.name} copyClipboard cssVar />
             },
           },
           {
diff --git a/docs/storybook/stories/StorybookComponents/InlineCode/InlineCode.tsx b/docs/storybook/stories/StorybookComponents/InlineCode/InlineCode.tsx
index 5b2483bd0..b9f67b29c 100644
--- a/docs/storybook/stories/StorybookComponents/InlineCode/InlineCode.tsx
+++ b/docs/storybook/stories/StorybookComponents/InlineCode/InlineCode.tsx
@@ -5,9 +5,10 @@ import './InlineCode.css'
 export type InlineCodeProps = {
   value?: string
   copyClipboard?: boolean
+  cssVar?: boolean
 }
 
-export const InlineCode = ({value, copyClipboard}: InlineCodeProps) => {
+export const InlineCode = ({value, copyClipboard, cssVar}: InlineCodeProps) => {
   const [copied, setCopied] = React.useState(false)
 
   React.useEffect(() => {
@@ -20,7 +21,8 @@ export const InlineCode = ({value, copyClipboard}: InlineCodeProps) => {
 
   return (
     <span className="InlineCode">
-      <code>--{value}</code> {copyClipboard && <ClipboardCopy value={`--${value}`} />}
+      <code>{cssVar ? `--${value}` : value}</code>{' '}
+      {copyClipboard && <ClipboardCopy value={cssVar ? `--${value}` : value} />}
     </span>
   )
 }