fix(website): update calculations for percentages

.changeset/lemon-clouds-hug.md

@@ -0,0 +1,7 @@
+---
+"@twilio-paste/core": patch
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/theme": patch
+---
+
+[Tokens,Theme] fixed an issue when converting percentages to pixel values as alternatives text descriptions

apps/vs-code-intellisense/package.json

@@ -98,7 +98,7 @@
     "@types/vscode": "^1.68.0",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
-    "@vscode/test-electron": "^2.1.5",
+    "@vscode/test-electron": "^2.4.1",
     "esbuild": "^0.15.18",
     "eslint": "^8.29.0",
     "glob": "^10.0.0",

apps/vs-code-intellisense/src/test/suite/extension.test.ts

@@ -90,7 +90,7 @@ suite("Extension Test Suite", () => {
     test("paste token items by attribute name", () => {
       const borderRadiusToken = myExtension.getAttributeTokens("borderRadius");
 
-      assert.strictEqual(borderRadiusToken.length, 6);
+      assert.strictEqual(borderRadiusToken.length, 12);
 
       const zIndexToken = myExtension.getAttributeTokens("zIndex");
 

apps/vs-code-intellisense/src/test/suite/index.ts

@@ -1,5 +1,5 @@
 import * as path from "path";
-import glob from "glob";
+import { glob } from "glob";
 import Mocha from "mocha";
 
 export function run(): Promise<void> {
@@ -11,13 +11,8 @@ export function run(): Promise<void> {
 
   const testsRoot = path.resolve(__dirname, "..");
 
-  return new Promise((c, e) => {
-    glob("**/**.test.js", { cwd: testsRoot }, (err: any, files: string[]) => {
-      if (err) {
-        return e(err);
-      }
-
-      // Add files to the test suite
+  return new Promise((c, e) =>
+    glob("**/**.test.js", { cwd: testsRoot }).then((files) => {
       files.forEach((f: string) => mocha.addFile(path.resolve(testsRoot, f)));
 
       try {
@@ -33,6 +28,6 @@ export function run(): Promise<void> {
         console.error(err);
         e(err);
       }
-    });
-  });
+    }),
+  );
 }

apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts

@@ -19,6 +19,14 @@ suite("remToPx", () => {
     assert.strictEqual(result, "0.5rem (8px)");
   });
 
+  test("converts 100% to 16px", () => {
+    const value = "100%";
+
+    const result = remToPx(value);
+
+    assert.strictEqual(result, "100% (16px)");
+  });
+
   test("converts 1rem to 16px", () => {
     const value = "1rem";
 

apps/vs-code-intellisense/src/utils/rem-to-px.ts

@@ -3,16 +3,25 @@
  * If the value is not a rem unit, it returns the original value.
  */
 export const remToPx = (value: string): string => {
-  if (!value.includes("rem")) {
+  if (!value.includes("rem") && !value.includes("%")) {
     return value;
   }
 
-  const remValue = Number(value.replace("rem", "").trim());
+  let remValue;
+
+  if (value.includes("%")) {
+    const percentage = Number.parseFloat(value.replace("%", ""));
+    // get decimal value which fixes multiplication issue.
+    remValue = percentage / 100;
+  } else {
+    remValue = Number(value.replace("rem", "").trim());
+  }
+
   if (isNaN(remValue)) {
     return value;
   }
 
   const pxValue = remValue * 16;
 
-  return `${remValue}rem (${pxValue}px)`;
+  return value.includes("%") ? `${value} (${pxValue}px)` : `${remValue}rem (${pxValue}px)`;
 };

packages/paste-design-tokens/utils/remToPx.ts

@@ -5,7 +5,15 @@ type UnitValue = string | number;
 type UnitType = "string" | "number";
 
 export const remToPx = (rem: UnitValue, type: UnitType = "number"): UnitValue => {
-  const remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
+  let remValue;
+
+  if (typeof rem === "string" && rem.includes("%")) {
+    const percentage = Number.parseFloat(rem.replace("%", ""));
+    // get decimal value which fixes multiplication issue.
+    remValue = percentage / 100;
+  } else {
+    remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
+  }
   // We round because decimal px values can cause issues.
   const pxValue = Math.round(remValue * PX_PER_REM);
 

packages/paste-theme/__tests__/remToPx.spec.ts

@@ -5,6 +5,7 @@ describe("remToPx", () => {
     expect(remToPx("1.5rem")).toBe(24);
     expect(remToPx("1.5rem", "number")).toBe(24);
     expect(remToPx("1.5rem", "string")).toBe("24px");
+    expect(remToPx("100%")).toBe(16);
   });
 
   it("handles input numbers", (): void => {

packages/paste-theme/src/utils/remToPx.ts

@@ -5,7 +5,15 @@ type UnitValue = string | number;
 type UnitType = "string" | "number";
 
 export const remToPx = (rem: UnitValue, type: UnitType = "number"): UnitValue => {
-  const remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
+  let remValue;
+
+  if (typeof rem === "string" && rem.includes("%")) {
+    const percentage = Number.parseFloat(rem.replace("%", ""));
+    // get decimal value which fixes multiplication issue.
+    remValue = percentage / 100;
+  } else {
+    remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
+  }
   // We round because decimal px values can cause issues.
   const pxValue = Math.round(remValue * PX_PER_REM);
 

yarn.lock

@@ -18044,15 +18044,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vscode/test-electron@npm:^2.1.5":
-  version: 2.3.0
-  resolution: "@vscode/test-electron@npm:2.3.0"
+"@vscode/test-electron@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "@vscode/test-electron@npm:2.4.1"
   dependencies:
-    http-proxy-agent: ^4.0.1
-    https-proxy-agent: ^5.0.0
+    http-proxy-agent: ^7.0.2
+    https-proxy-agent: ^7.0.5
     jszip: ^3.10.1
-    semver: ^7.3.8
-  checksum: 745679a14ca651a901dff301fae20d0636ce16357dbde511cece726179d27e4fa4c42acf5abcb64c1768f8afe141b2a5884375d1fc35a086d770a19c0260b21b
+    ora: ^7.0.1
+    semver: ^7.6.2
+  checksum: e4dbf2f3c14b2e9347b7c67bf53ef72281c2186f771101a750eaeb6c2981ce5e8047032a81920dc659fcb1dc968b9ebfb5e3b4a130199a4578a62147f3c7cf38
   languageName: node
   linkType: hard
 
@@ -18570,6 +18571,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"agent-base@npm:^7.1.0":
+  version: 7.1.1
+  resolution: "agent-base@npm:7.1.1"
+  dependencies:
+    debug: ^4.3.4
+  checksum: 51c158769c5c051482f9ca2e6e1ec085ac72b5a418a9b31b4e82fe6c0a6699adb94c1c42d246699a587b3335215037091c79e0de512c516f73b6ea844202f037
+  languageName: node
+  linkType: hard
+
 "agentkeepalive@npm:^4.1.3, agentkeepalive@npm:^4.2.1":
   version: 4.3.0
   resolution: "agentkeepalive@npm:4.3.0"
@@ -21137,7 +21147,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.0, chalk@npm:^5.0.1":
+"chalk@npm:^5.0.0, chalk@npm:^5.0.1, chalk@npm:^5.3.0":
   version: 5.3.0
   resolution: "chalk@npm:5.3.0"
   checksum: 623922e077b7d1e9dedaea6f8b9e9352921f8ae3afe739132e0e00c275971bdd331268183b2628cf4ab1727c45ea1f28d7e24ac23ce1db1eb653c414ca8a5a80
@@ -21491,7 +21501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-spinners@npm:^2.6.1":
+"cli-spinners@npm:^2.6.1, cli-spinners@npm:^2.9.0":
   version: 2.9.2
   resolution: "cli-spinners@npm:2.9.2"
   checksum: 1bd588289b28432e4676cb5d40505cfe3e53f2e4e10fbe05c8a710a154d6fe0ce7836844b00d6858f740f2ffe67cdc36e0fce9c7b6a8430e80e6388d5aa4956c
@@ -28756,6 +28766,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"http-proxy-agent@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "http-proxy-agent@npm:7.0.2"
+  dependencies:
+    agent-base: ^7.1.0
+    debug: ^4.3.4
+  checksum: 670858c8f8f3146db5889e1fa117630910101db601fff7d5a8aa637da0abedf68c899f03d3451cac2f83bcc4c3d2dabf339b3aa00ff8080571cceb02c3ce02f3
+  languageName: node
+  linkType: hard
+
 "http-proxy-middleware@npm:^2.0.0":
   version: 2.0.4
   resolution: "http-proxy-middleware@npm:2.0.4"
@@ -28846,6 +28866,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "https-proxy-agent@npm:7.0.5"
+  dependencies:
+    agent-base: ^7.0.2
+    debug: 4
+  checksum: 2e1a28960f13b041a50702ee74f240add8e75146a5c37fc98f1960f0496710f6918b3a9fe1e5aba41e50f58e6df48d107edd9c405c5f0d73ac260dabf2210857
+  languageName: node
+  linkType: hard
+
 "human-id@npm:^1.0.2":
   version: 1.0.2
   resolution: "human-id@npm:1.0.2"
@@ -30194,7 +30224,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"is-unicode-supported@npm:^1.1.0":
+"is-unicode-supported@npm:^1.1.0, is-unicode-supported@npm:^1.3.0":
   version: 1.3.0
   resolution: "is-unicode-supported@npm:1.3.0"
   checksum: 20a1fc161afafaf49243551a5ac33b6c4cf0bbcce369fcd8f2951fbdd000c30698ce320de3ee6830497310a8f41880f8066d440aa3eb0a853e2aa4836dd89abc
@@ -36579,6 +36609,23 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"ora@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "ora@npm:7.0.1"
+  dependencies:
+    chalk: ^5.3.0
+    cli-cursor: ^4.0.0
+    cli-spinners: ^2.9.0
+    is-interactive: ^2.0.0
+    is-unicode-supported: ^1.3.0
+    log-symbols: ^5.1.0
+    stdin-discarder: ^0.1.0
+    string-width: ^6.1.0
+    strip-ansi: ^7.1.0
+  checksum: 0842b8b9a96a8586085cafdc25077c76fed8ade072c52c53e748cf40a214731d2215a4d6081d8fbd6203d2b897e834332bda53eb64afd1a5968da17daf020bff
+  languageName: node
+  linkType: hard
+
 "ordered-read-streams@npm:^1.0.0":
   version: 1.0.1
   resolution: "ordered-read-streams@npm:1.0.1"
@@ -41344,6 +41391,15 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.6.2":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 4110ec5d015c9438f322257b1c51fe30276e5f766a3f64c09edd1d7ea7118ecbc3f379f3b69032bacf13116dc7abc4ad8ce0d7e2bd642e26b0d271b56b61a7d8
+  languageName: node
+  linkType: hard
+
 "send@npm:0.16.2":
   version: 0.16.2
   resolution: "send@npm:0.16.2"
@@ -42673,6 +42729,17 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"string-width@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "string-width@npm:6.1.0"
+  dependencies:
+    eastasianwidth: ^0.2.0
+    emoji-regex: ^10.2.1
+    strip-ansi: ^7.0.1
+  checksum: 8aefb456a230c8d7fe254049b1b2d62603da1a3b6c7fc9f3332f6779583cc1c72653f9b6e4cd0c1c92befee1565d4a0a7542d09ba4ceb6d96af02fbd8425bb03
+  languageName: node
+  linkType: hard
+
 "string.prototype.codepointat@npm:^0.2.1":
   version: 0.2.1
   resolution: "string.prototype.codepointat@npm:0.2.1"
@@ -42800,6 +42867,15 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"strip-ansi@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "strip-ansi@npm:7.1.0"
+  dependencies:
+    ansi-regex: ^6.0.1
+  checksum: 859c73fcf27869c22a4e4d8c6acfe690064659e84bef9458aa6d13719d09ca88dcfd40cbf31fd0be63518ea1a643fe070b4827d353e09533a5b0b9fd4553d64d
+  languageName: node
+  linkType: hard
+
 "strip-bom@npm:^2.0.0":
   version: 2.0.0
   resolution: "strip-bom@npm:2.0.0"
@@ -45417,7 +45493,7 @@ resolve@^2.0.0-next.3:
     "@types/vscode": ^1.68.0
     "@typescript-eslint/eslint-plugin": ^5.46.0
     "@typescript-eslint/parser": ^5.46.0
-    "@vscode/test-electron": ^2.1.5
+    "@vscode/test-electron": ^2.4.1
     base-64: 1.0.0
     esbuild: ^0.15.18
     eslint: ^8.29.0