diff --git a/packages/theme/README.md b/packages/theme/README.md index ce1832e1a6..6a335aa3a1 100644 --- 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 index d424b9610c..1633b08ec5 100644 --- a/packages/theme/css/foundations/curve-next.css +++ b/packages/theme/css/foundations/curve-next.css @@ -1,5 +1,10 @@ +/** + * 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; @@ -7,7 +12,7 @@ } .salt-density-medium { - --salt-curve-0: 0; + --salt-curve-0: 0px; --salt-curve-50: 2px; --salt-curve-100: 4px; --salt-curve-150: 6px; @@ -15,7 +20,7 @@ } .salt-density-low { - --salt-curve-0: 0; + --salt-curve-0: 0px; --salt-curve-50: 3px; --salt-curve-100: 6px; --salt-curve-150: 9px; @@ -23,7 +28,7 @@ } .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 index 113f0c41d7..8b566b3214 100644 --- 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 index 3093f69d24..cb8f0a21d6 100644 --- 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 index 557493e107..62e29ad41e 100644 --- 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 index e359ba7628..0f2580a1c5 100644 --- 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`; } }