Add Color Variables to sketch-file-format (model version 130)

[jpedroso]

Summary

Color Variables introduce two new structures to the document data file format and add one optional property to MSColor instances.

An overview of the implementation be found in Notion, and the corresponding branch is at Sketch-hq/Sketch #28967

Colors

MSColor instances now include an optional property swatchID of type String, that links to the objectID of a MSSwatch instance.

Shared Swatches

Shared swatches are saved in a MSSharedObjectContainer subclass named MSSwatchContainer. The objects property contains an array of MSSwatch instances.

MSSwatch instances are subclasses of MSSharedObject where the value property is an instance of MSColor.

{
…
  "sharedSwatches": {
    "_class": "swatchContainer",
    "objects": [
      {
        "_class": "swatch",
        "do_objectID": "6450AB9F-65F7-483A-80E9-1BE8A7727562",
        "name": "Ruby",
        "value": {
          "_class": "color",
          "alpha": 1,
          "blue": 0.1254901960784314,
          "green": 0.1254901960784314,
          "red": 0.8784313725490196
        }
      },
    ]
  }
…
}

Foreign Swatches

{
…
  "foreignSwatches": [
    {
      "_class": "MSImmutableForeignSwatch",
      "do_objectID": "F059ECC4-ADA8-4E67-81C6-0DC05F4235AB",
      "libraryID": "4531B31C-EC9F-4CBA-831B-BE972592957C",
      "sourceLibraryName": "#29388-library",
      "symbolPrivate": false,
      "remoteSwatchID": "7C0DBB6D-C198-40A6-AE58-DC4463302C72",
      "localSwatch": {
        "_class": "swatch",
        "do_objectID": "92C941E4-5913-4D34-90C8-988CA6E65C9D",
        "name": "Green",
        "value": {
          "_class": "color",
          "alpha": 1,
          "blue": 0.1999174529568891,
          "green": 0.8024230072463768,
          "red": 0.1069846376086679
        }
      }
    }
  ],
…
}

[jedrichards]

@jpedroso Great write up thanks! Just for the avoidance of any doubt ... the sharedSwatches and foreignSwatches properties both sit on the document data? So next to layerStyles, foreignLayerStyles and friends here, right?

[jpedroso]

Yes, that’s correct.