Fix salt-ds/value/px

jpmorganchase · Nov 29, 2024 · 711b569 · 711b569
1 parent 6c9845e
commit 711b569
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 28 deletions.
diff --git a/packages/theme/README.md b/packages/theme/README.md
@@ -1,20 +1 @@
 This is a regular package
-
----
-
-## Tokens
-
-1. Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)" from [PR#51](https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/51)
-1. Select Collection and Mode on plugin UI
-   1. Add "Additional Root Key (Optional)"
-      - Colors library: 'color'
-      - Palette library: 'palette'
-1. Copy output to corresponding `*.tokens.json` file
-1. Modify color tokens
-   1. remove `categorical.` from , e.g. replace `"{color.categorical` to `"{color`
-   1. added `background.` to a few background color raw tokens
-
-TODOs
-
-- [ ] Custom value tranformer for `foundation/alpha-next.css` tokens, to achieve `rgba` syntax from `packages/theme/css/foundations/alpha-next.css`? Or this may not be needed given we generate these values
-- [ ] Better `alpha` foundation color generation, maybe use custom opacity modifier instead
diff --git a/packages/theme/css/foundations/curve-next.css b/packages/theme/css/foundations/curve-next.css
@@ -1,29 +1,34 @@
+/**
+ * Generated by `scripts/build-json.mjs`
+ * Do not edit directly, this file was auto-generated.
+ */
+
 .salt-density-high {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 1px;
   --salt-curve-100: 2px;
   --salt-curve-150: 3px;
   --salt-curve-999: 999px;
 }
 
 .salt-density-medium {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 2px;
   --salt-curve-100: 4px;
   --salt-curve-150: 6px;
   --salt-curve-999: 999px;
 }
 
 .salt-density-low {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 3px;
   --salt-curve-100: 6px;
   --salt-curve-150: 9px;
   --salt-curve-999: 999px;
 }
 
 .salt-density-touch {
-  --salt-curve-0: 0;
+  --salt-curve-0: 0px;
   --salt-curve-50: 4px;
   --salt-curve-100: 8px;
   --salt-curve-150: 12px;

diff --git a/packages/theme/scripts/gen-css-json.mjs b/packages/theme/scripts/gen-css-json.mjs
@@ -38,7 +38,7 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
         transforms: [
           "attribute/cti",
           "salt-ds/name/kebab", // Custom transform, see below
-          "salt-ds/value/px",
+          "salt-ds/value/px", // add px for $modes, not working for some reason
           "color/rgb",
           // "name/kebab", // https://github.com/amzn/style-dictionary/blob/0fcf229f78e334a5c6bec55725fe92a8de97590c/lib/common/transforms.js#L320-L325
           // "dimension/pixelToRem",
@@ -67,6 +67,7 @@ function getStyleDictionaryConfig({ modes, densities, accents }) {
         files: [
           foundationColorsNextFile,
           foundationAlphaNextFile,
+          getFoundationCurveNextFile({ densities }),
           ...getPaletteNextFiles({ modes, densities, accents }),
         ],
       },

diff --git a/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs b/packages/theme/scripts/sd-utils/files/theme-next-tokens.mjs
@@ -216,7 +216,7 @@ export const getCharacteristicsNextFiles = () =>
         // );
         return (
           // next
-          token.filePath.includes("characteristics/theme-next.tokens") &&
+          token.filePath.includes("characteristics/") &&
           //
           token.attributes.category === characteristicFamily &&
           !token.path.includes("figma-only")

diff --git a/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs b/packages/theme/scripts/sd-utils/format/css-multi-modes.mjs
@@ -100,8 +100,11 @@ export const cssMultiModes = async ({
     })
       .split("\n")
       .sort((a, b) => {
-        // Sort by names before ":"
-        return a.split(":")[0].localeCompare(b.split(":")[0]);
+        // Sort by names before ":", use Collator to sort by number values
+        return new Intl.Collator("en", { numeric: true }).compare(
+          a.split(":")[0],
+          b.split(":")[0],
+        );
       })
       .join("\n");
 

diff --git a/packages/theme/scripts/sd-utils/transform/value-modes.mjs b/packages/theme/scripts/sd-utils/transform/value-modes.mjs
@@ -40,10 +40,12 @@ export const saltValuePx = {
   transform: (token, _, options) => {
     // this is a "hack"..? for those getting value from "salt-ds/css/multi-modes"
     // value should be transformed on $modes as well
+    // console.log("salt-ds/value/px transform", JSON.stringify(token));
+
     if (token.$modes) {
       for (const mode of Object.keys(token.$modes)) {
         const modeValue = token.$modes[mode];
-        if (isNumber(modeValue, options)) {
+        if (typeof modeValue === "number") {
           token.$modes[mode] = `${modeValue}px`;
         }
       }