From f9c89d846a35affcbc3e847a16f0396ebe2c835f Mon Sep 17 00:00:00 2001
From: Alan B Smith <a.bax.smith@gmail.com>
Date: Thu, 19 Oct 2023 10:51:06 -0600
Subject: [PATCH] docs: Fix computed value bug in docs

---
 .../stories/system/examples/FontFamily.tsx                   | 2 +-
 .../canvas-tokens-docs/stories/system/examples/Shape.tsx     | 5 ++++-
 .../canvas-tokens-docs/stories/system/examples/Space.tsx     | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/canvas-tokens-docs/stories/system/examples/FontFamily.tsx b/packages/canvas-tokens-docs/stories/system/examples/FontFamily.tsx
index 253e63f..3dba2db 100644
--- a/packages/canvas-tokens-docs/stories/system/examples/FontFamily.tsx
+++ b/packages/canvas-tokens-docs/stories/system/examples/FontFamily.tsx
@@ -12,7 +12,7 @@ const fontFamilyTokens: FontFamilyToken[] = Object.values(system.fontFamily).map
 
   return {
     label: varName,
-    value: value,
+    value: value.replace(/"/g, ''),
   };
 });
 
diff --git a/packages/canvas-tokens-docs/stories/system/examples/Shape.tsx b/packages/canvas-tokens-docs/stories/system/examples/Shape.tsx
index 8191a25..7882d74 100644
--- a/packages/canvas-tokens-docs/stories/system/examples/Shape.tsx
+++ b/packages/canvas-tokens-docs/stories/system/examples/Shape.tsx
@@ -11,8 +11,10 @@ interface ShapeToken {
 }
 
 function multiplyCalcValues(value: string) {
+  // Matches numbers such as .25, 0.25, or 25
+  const numberRegExp = new RegExp(/(0*\.)?\d+/g);
   // Find the numbers in the string value
-  const matches = value.match(/(0.)?\d+/g);
+  const matches = value.match(numberRegExp);
   if (matches) {
     // Multiply the matched values
     return matches.reduce((acc, current) => acc * Number(current), 1);
@@ -24,6 +26,7 @@ function multiplyCalcValues(value: string) {
 const shapeTokens: ShapeToken[] = Object.values(system.shape).map(varName => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(varName);
   const computedValue = multiplyCalcValues(value);
+
   return {
     label: varName,
     value: value,
diff --git a/packages/canvas-tokens-docs/stories/system/examples/Space.tsx b/packages/canvas-tokens-docs/stories/system/examples/Space.tsx
index de55b39..0f36939 100644
--- a/packages/canvas-tokens-docs/stories/system/examples/Space.tsx
+++ b/packages/canvas-tokens-docs/stories/system/examples/Space.tsx
@@ -11,8 +11,10 @@ interface SpaceToken {
 }
 
 function multiplyCalcValues(value: string) {
+  // Matches numbers such as .25, 0.25, or 25
+  const numberRegExp = new RegExp(/(0*\.)?\d+/g);
   // Find the numbers in the string value
-  const matches = value.match(/(0.)?\d+/g);
+  const matches = value.match(numberRegExp);
   if (matches) {
     // Multiply the matched values
     return matches.reduce((acc, current) => acc * Number(current), 1);