What is the correct setup for sketch palette?

[cjcheshire]

I've included an example. I have the files created with the init build, everything else works (removed my js outputs). I don't think the filter is working, but if someone has an example of sketch much appreciated :)

  "source": [
    "properties/**/*.json"
  ],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [
        {
          "destination": "_tokens.scss",
          "format": "scss/variables"
        }
      ]
    },
    "sketch": {
      "transforms": ["color/sketch"],
      "buildPath": "build/sketch/",
      "files": [
        {
          "destination": "tokens.sketchpalette",
          "format": "sketch/palette/v2"
        }
      ],
      "filter": {
        "attributes": {
          "category": "color",
          "type": "base"
        }
      }
    }
  }
}

[dbanksdesign]

Try adding "attribute/cti" as the first transform in the sketch platform. Also, could you show what your token file(s) look like? The "attribute/cti" adds an "attributes" object on each token and sets "category", "type", "item" based on the object path. Let me know if this makes sense!

[cjcheshire]

base.json looks like this:

{
  "color": {
    "frenchRose": {
      "_0": {
        "value": "#ef426f"
      },
      "_60k": {
        "value": "#5f1a2c"
      },
      "_40k": {
        "value": "#8f2742"
      },
      "_20k": {
        "value": "#bf3458"
      },
      "_80": {
        "value": "#f3688c"
      },
      "_60": {
        "value": "#f68ea9"
      },
      "_40": {
        "value": "#f9b4c6"
      },
      "_20": {
        "value": "#fcdae3"
      }
    },
    "burningOrange": {
      "_0": {
        "value": "#fd7037"
      },
      "_60k": {
        "value": "#652c16"
      },
      "_40k": {
        "value": "#974321"
      },
      "_20k": {
        "value": "#ca592c"
      },
      "_80": {
        "value": "#fd8d5f"
      },
      "_60": {
        "value": "#fea987"
      },
      "_40": {
        "value": "#fec6af"
      },
      "_20": {
        "value": "#ffe2d7"
      },
      "_08": {
        "value": "#fff4ef"
      }
    },
    "cornflowerBlue": {
      "_0": {
        "value": "#6376ec"
      },
      "_60k": {
        "value": "#272f5e"
      },
      "_40k": {
        "value": "#3b468d"
      },
      "_20k": {
        "value": "#4f5ebc"
      },
      "_80": {
        "value": "#8291f0"
      },
      "_60": {
        "value": "#a1adf4"
      },
      "_40": {
        "value": "#c1c8f7"
      },
      "_20": {
        "value": "#e0e4fb"
      }
    },
    "pacificBlue": {
      "_0": {
        "value": "#0095c8"
      },
      "_60k": {
        "value": "#003b50"
      },
      "_40k": {
        "value": "#005978"
      },
      "_20k": {
        "value": "#0077a0"
      },
      "_80": {
        "value": "#33abd3"
      },
      "_60": {
        "value": "#66c0de"
      },
      "_40": {
        "value": "#99d5e9"
      },
      "_20": {
        "value": "#cceaf4"
      },
      "12": {
        "value": "#e1f3f9"
      },
      "_07": {
        "value": "#edf7fb"
      },
      "_04": {
        "value": "#f5fbfd"
      }
    },
    "cerulean": {
      "_0": {
        "value": "#00b5e2"
      },
      "_60k": {
        "value": "#00485a"
      },
      "_40k": {
        "value": "#006c87"
      },
      "_20k": {
        "value": "#0090b4"
      },
      "_80": {
        "value": "#33c4e8"
      },
      "_60": {
        "value": "#66d3ee"
      },
      "_40": {
        "value": "#99e1f3"
      },
      "_20": {
        "value": "#ccf0f9"
      }
    },
    "caribbeanGreen": {
      "_0": {
        "value": "#00c7b1"
      },
      "_60k": {
        "value": "#004f46"
      },
      "_40k": {
        "value": "#00776a"
      },
      "_20k": {
        "value": "#009f8d"
      },
      "_80": {
        "value": "#33d3c1"
      },
      "_60": {
        "value": "#66ded1"
      },
      "_40": {
        "value": "#99e9e0"
      },
      "_20": {
        "value": "#ccf4f0"
      }
    },
    "electricLime": {
      "_0": {
        "value": "#d0df00"
      },
      "_60k": {
        "value": "#535900"
      },
      "_40k": {
        "value": "#7c8500"
      },
      "_20k": {
        "value": "#a6b200"
      },
      "_80": {
        "value": "#d9e533"
      },
      "_60": {
        "value": "#e3ec66"
      },
      "_40": {
        "value": "#ecf299"
      },
      "_20": {
        "value": "#f6f9cc"
      }
    },
    "broom": {
      "_0": {
        "value": "#ffe324"
      },
      "_60k": {
        "value": "#665a0e"
      },
      "_40k": {
        "value": "#998815"
      },
      "_20k": {
        "value": "#ccb51c"
      },
      "_80": {
        "value": "#ffe950"
      },
      "_60": {
        "value": "#ffee7c"
      },
      "_40": {
        "value": "#fff4a7"
      },
      "_20": {
        "value": "#fff9d3"
      }
    },
    "purple heart": {
      "_0": {
        "value": "#753bbd"
      },
      "_60k": {
        "value": "#2e174b"
      },
      "_40k": {
        "value": "#462371"
      },
      "_20k": {
        "value": "#5d2f97"
      },
      "_80": {
        "value": "#9163cb"
      },
      "_60": {
        "value": "#ad8ad8"
      },
      "_40": {
        "value": "#c8b1e5"
      },
      "_20": {
        "value": "#e4d8f2"
      }
    },
    "jagger": {
      "_0": {
        "value": "#3c1053"
      },
      "_60k": {
        "value": "#180621"
      },
      "_40k": {
        "value": "#240931"
      },
      "_20k": {
        "value": "#300c42"
      },
      "_80": {
        "value": "#634075"
      },
      "_60": {
        "value": "#8a7098"
      },
      "_40": {
        "value": "#b19fba"
      },
      "_20": {
        "value": "#d8cfdd"
      }
    },
    "midnightBlue": {
      "_0": {
        "value": "#002e5d"
      },
      "_60k": {
        "value": "#001225"
      },
      "_40k": {
        "value": "#001b37"
      },
      "_20k": {
        "value": "#00244a"
      },
      "_80": {
        "value": "#33587d"
      },
      "_60": {
        "value": "#66829e"
      },
      "_40": {
        "value": "#99abbe"
      },
      "_20": {
        "value": "#ccd5df"
      }
    },
    "blueStone": {
      "$color-blue-stone": {
        "value": "#005a70"
      },
      "$color-blue-stone-60k": {
        "value": "#00242c"
      },
      "$color-blue-stone-40k": {
        "value": "#003643"
      },
      "$color-blue-stone-20k": {
        "value": "#004859"
      },
      "$color-blue-stone-80": {
        "value": "#5c95a4"
      },
      "$color-blue-stone-60": {
        "value": "#669ca9"
      },
      "$color-blue-stone-40": {
        "value": "#99bdc6"
      },
      "$color-blue-stone-20": {
        "value": "#ccdee2"
      }
    },
    "fiord": {
      "_0": {
        "value": "#43526f"
      },
      "_60k": {
        "value": "#1a202c"
      },
      "35k": {
        "value": "#2b3547"
      },
      "_20k": {
        "value": "#354158"
      },
      "_89": {
        "value": "#58657f"
      },
      "_60": {
        "value": "#8e97a9"
      },
      "_40": {
        "value": "#b4bac5"
      },
      "_20": {
        "value": "#d9dce2"
      }
    },
    "k": {
      "_87": {
        "value": "#222222"
      },
      "70": {
        "value": "#4c4c4c"
      },
      "_60": {
        "value": "#666666"
      },
      "_40": {
        "value": "#999999"
      },
      "_25": {
        "value": "#bfbfbf"
      },
      "_16": {
        "value": "#d6d6d6"
      },
      "_07": {
        "value": "#ededed"
      },
      "_04": {
        "value": "#f5f5f5"
      },
      "_0": {
        "value": "#ffffff"
      }
    },
    "white": {
      "value": "{color.k._0.value}"
    },
    "form-text": {
      "value": "{color.k._87.value}",
      "comment": "Possibly unused - deprecate?"
    },
    "error-text": {
      "value": "{color.frenchRose._0.value}",
      "comment": "Possibly unused - deprecate?"
    },
    "error-border": {
      "value": "{color.frenchRose._0.value}",
      "comment": "Possibly unused - deprecate?"
    },
    "base": {
      "gray": {
        "light": {
          "value": "#CCCCCC"
        },
        "medium": {
          "value": "#999999"
        },
        "dark": {
          "value": "#111111"
        }
      },
      "red": {
        "value": "#FF0000"
      },
      "green": {
        "value": "#00FF00"
      }
    }
  }
}

I've added all the underscores being paranoid that was an issue.

Output from adding the attribute/cti:

⚠️  build/sketch/tokens.sketchpalette
While building tokens.sketchpalette, token collisions were found; output may be unexpected.
    Output name _0 was generated by:
        color.frenchRose._0   [object Object]
        color.burningOrange._0   [object Object]
        color.cornflowerBlue._0   [object Object]
        color.pacificBlue._0   [object Object]
        color.cerulean._0   [object Object]
        color.caribbeanGreen._0   [object Object]
        color.electricLime._0   [object Object]
        color.broom._0   [object Object]
        color.purple heart._0   [object Object]
        color.jagger._0   [object Object]
        color.midnightBlue._0   [object Object]
        color.fiord._0   [object Object]
        color.k._0   [object Object]
    Output name _60k was generated by:
        color.frenchRose._60k   [object Object]
        color.burningOrange._60k   [object Object]
        color.cornflowerBlue._60k   [object Object]
        color.pacificBlue._60k   [object Object]
        color.cerulean._60k   [object Object]
        color.caribbeanGreen._60k   [object Object]
        color.electricLime._60k   [object Object]
        color.broom._60k   [object Object]
        color.purple heart._60k   [object Object]
        color.jagger._60k   [object Object]
        color.midnightBlue._60k   [object Object]
        color.fiord._60k   [object Object]
    Output name _40k was generated by:
        color.frenchRose._40k   [object Object]
        color.burningOrange._40k   [object Object]
        color.cornflowerBlue._40k   [object Object]
        color.pacificBlue._40k   [object Object]
        color.cerulean._40k   [object Object]
        color.caribbeanGreen._40k   [object Object]
        color.electricLime._40k   [object Object]
        color.broom._40k   [object Object]
        color.purple heart._40k   [object Object]
        color.jagger._40k   [object Object]
        color.midnightBlue._40k   [object Object]
    Output name _20k was generated by:
        color.frenchRose._20k   [object Object]
        color.burningOrange._20k   [object Object]
        color.cornflowerBlue._20k   [object Object]
        color.pacificBlue._20k   [object Object]
        color.cerulean._20k   [object Object]
        color.caribbeanGreen._20k   [object Object]
        color.electricLime._20k   [object Object]
        color.broom._20k   [object Object]
        color.purple heart._20k   [object Object]
        color.jagger._20k   [object Object]
        color.midnightBlue._20k   [object Object]
        color.fiord._20k   [object Object]
    Output name _80 was generated by:
        color.frenchRose._80   [object Object]
        color.burningOrange._80   [object Object]
        color.cornflowerBlue._80   [object Object]
        color.pacificBlue._80   [object Object]
        color.cerulean._80   [object Object]
        color.caribbeanGreen._80   [object Object]
        color.electricLime._80   [object Object]
        color.broom._80   [object Object]
        color.purple heart._80   [object Object]
        color.jagger._80   [object Object]
        color.midnightBlue._80   [object Object]
    Output name _60 was generated by:
        color.frenchRose._60   [object Object]
        color.burningOrange._60   [object Object]
        color.cornflowerBlue._60   [object Object]
        color.pacificBlue._60   [object Object]
        color.cerulean._60   [object Object]
        color.caribbeanGreen._60   [object Object]
        color.electricLime._60   [object Object]
        color.broom._60   [object Object]
        color.purple heart._60   [object Object]
        color.jagger._60   [object Object]
        color.midnightBlue._60   [object Object]
        color.fiord._60   [object Object]
        color.k._60   [object Object]
    Output name _40 was generated by:
        color.frenchRose._40   [object Object]
        color.burningOrange._40   [object Object]
        color.cornflowerBlue._40   [object Object]
        color.pacificBlue._40   [object Object]
        color.cerulean._40   [object Object]
        color.caribbeanGreen._40   [object Object]
        color.electricLime._40   [object Object]
        color.broom._40   [object Object]
        color.purple heart._40   [object Object]
        color.jagger._40   [object Object]
        color.midnightBlue._40   [object Object]
        color.fiord._40   [object Object]
        color.k._40   [object Object]
    Output name _20 was generated by:
        color.frenchRose._20   [object Object]
        color.burningOrange._20   [object Object]
        color.cornflowerBlue._20   [object Object]
        color.pacificBlue._20   [object Object]
        color.cerulean._20   [object Object]
        color.caribbeanGreen._20   [object Object]
        color.electricLime._20   [object Object]
        color.broom._20   [object Object]
        color.purple heart._20   [object Object]
        color.jagger._20   [object Object]
        color.midnightBlue._20   [object Object]
        color.fiord._20   [object Object]
    Output name _07 was generated by:
        color.pacificBlue._07   [object Object]
        color.k._07   [object Object]
    Output name _04 was generated by:
        color.pacificBlue._04   [object Object]
        color.k._04   [object Object]
    Output name medium was generated by:
        color.base.gray.medium   [object Object]
        size.font.medium   1
    Output name base was generated by:
        color.font.base   [object Object]
        size.font.base   1
This many-to-one issue is usually caused by some combination of:
    * conflicting or similar paths/names in property definitions
    * platform transforms/transformGroups affecting names, especially when removing specificity
    * overly inclusive file filters

[cjcheshire]

Okay weird, tested this morning and it does generate the palette however there are all of those warnings?

[cjcheshire]

Okay, fixed it. It was my names: The winning config:

"sketch": {
      "transforms": ["name/cti/camel","attribute/cti", "color/sketch"],
      "buildPath": "build/sketch/",
      "files": [
        {
          "destination": "tokens.sketchpalette",
          "format": "sketch/palette/v2",
          "filter": {
            "attributes": {
              "category": "color"
            }
          }
        }
      ]
    }

Hopefully will help peeps in future and thanks for you help @dbanksdesign :)

[dbanksdesign]

Awesome! Yea a bit about those warnings. When Style Dictionary tries to build a file it will check for name collisions in the format, name collisions could happen because maybe a name transform is causing names to be duplicated. In your case it was because you didn't have any name transform applied (my bad, I forgot that), and by default each token's name is its' key in the object. So having multiple keys of _40k even though they were at different parts of the object caused them to override each other when outputting a flat array like in a sketch palette. Although not much harm would have come, but just the names of the sketch colors would not be intelligible.

Here is the PR that added those warnings: #273