Work around some math expressions lacking calc()

element-hq · Jul 12, 2024 · 68faa9e · 68faa9e
1 parent 923c3c2
commit 68faa9e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/assets/web/css/cpd-common-base.css b/assets/web/css/cpd-common-base.css
@@ -58,24 +58,24 @@
   --cpd-font-body-xs-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
   --cpd-font-body-xs-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
   --cpd-font-body-xs-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
-  --cpd-space-64x: var(--cpd-space-scale) * 64;
-  --cpd-space-48x: var(--cpd-space-scale) * 48;
-  --cpd-space-40x: var(--cpd-space-scale) * 40;
-  --cpd-space-32x: var(--cpd-space-scale) * 32;
-  --cpd-space-28x: var(--cpd-space-scale) * 28;
-  --cpd-space-24x: var(--cpd-space-scale) * 24;
-  --cpd-space-20x: var(--cpd-space-scale) * 20;
-  --cpd-space-15x: var(--cpd-space-scale) * 15;
-  --cpd-space-14x: var(--cpd-space-scale) * 14;
-  --cpd-space-13x: var(--cpd-space-scale) * 13;
-  --cpd-space-9x: var(--cpd-space-scale) * 9;
-  --cpd-space-8x: var(--cpd-space-scale) * 8;
-  --cpd-space-7x: var(--cpd-space-scale) * 7;
-  --cpd-space-5x: var(--cpd-space-scale) * 5;
-  --cpd-space-4x: var(--cpd-space-scale) * 4;
-  --cpd-space-3x: var(--cpd-space-scale) * 3;
-  --cpd-space-2x: var(--cpd-space-scale) * 2;
-  --cpd-space-1-5x: var(--cpd-space-scale) * 1.5;
+  --cpd-space-64x: 256px;
+  --cpd-space-48x: 192px;
+  --cpd-space-40x: 160px;
+  --cpd-space-32x: 128px;
+  --cpd-space-28x: 112px;
+  --cpd-space-24x: 96px;
+  --cpd-space-20x: 80px;
+  --cpd-space-15x: 60px;
+  --cpd-space-14x: 56px;
+  --cpd-space-13x: 52px;
+  --cpd-space-9x: 36px;
+  --cpd-space-8x: 32px;
+  --cpd-space-7x: 28px;
+  --cpd-space-5x: 20px;
+  --cpd-space-4x: 16px;
+  --cpd-space-3x: 12px;
+  --cpd-space-2x: 8px;
+  --cpd-space-1-5x: 6px;
   --cpd-space-1x: var(--cpd-space-scale);
-  --cpd-space-0-5x: var(--cpd-space-scale) * 0.5;
+  --cpd-space-0-5x: 2px;
 }
diff --git a/src/configs/getWebConfig.ts b/src/configs/getWebConfig.ts
@@ -90,7 +90,13 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] {
       isCoreToken.filter(t) === (tier === "base"),
     options: {
       showFileHeader: false,
-      outputReferences: true,
+      // Workaround for https://github.com/tokens-studio/sd-transforms/issues/203.
+      // ts/resolveMath currently has no way to insert calc() around
+      // var(...) * num expressions, so we instead force it to avoid outputting
+      // the var() reference and resolve the expression to a static value.
+      outputReferences: (token) =>
+        typeof token.original.value !== "string" ||
+        !token.original.value.includes("{space.scale} * "),
       basePxFontSize,
       selector: `:root, [class*="cpd-theme-"]`,
     },