diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..16314b6 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,2 @@ +# Required on all code changes +* @thibmaek diff --git a/.travis.yml b/.travis.yml index bfac19a..0bcd61b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,15 +1,15 @@ matrix: include: - # Javascript checks - - language: node_js - node_js: - - "8" - script: - - npm run lint - - npm test - - # Shell checks - - language: shell - sudo: false - script: - - shellcheck sketchtool.sh hubble.sh + - language: node_js + node_js: + - '8' + script: + - npm run lint + - npm test + - language: shell + sudo: false + script: + - shellcheck sketchtool.sh hubble.sh +notifications: + slack: + secure: jCXaJgotbSFaJ4ID5XMdFIrmJoSOSyB1QE+WD3iW+qE67kEqBkreFGdeeP5gK9AEPMO/HkIdpQqpY3fp6JRpJEK/y54+zburrUaJFH3FHvOzgb3LPek1MAi7JsP1C9JXqG9LDt5f/EvE8LZln8eEA3ryL9gSLQ38AwRGw97qmmNd2jHmiPL3ELHd7Z67zIHGLyt44kbrQtjNgrN0bIgz1jTvY3Yulm3a7dzTn4xwK3ImLEYtmBJLqqoLprvlEY9ld7hPmQ6oy+GJgSqjrQl9iIwcygZzJtZVWko9Kjx9w4Y4q89Qv8X32GlGnf7WJef+/Dui2EaPrv/aNd5bbSAX7xrsiA+9n3um5CI1G3iiB/Rz9meoXYs4h6cPGqn6IoO7LHdzyyLATSlOLCZHSN+om7tNPgKAA6h3YyJsHLDxeJi8X0n+MnxpzD218XY+zpc6E39tiKYJ87bVYBCEDaUdHU/rDRqgh/pKcNJLrEa5erYbHtZw0BmfaUg+QkI3bv/BOEhvDybUdtIvF0bo9Nb9wD1TWTA4av/DcTvehFCOZCce/pTjFqGCKztwGNkX+PGp/R0of2Xod1RbYbANG/QnJo8Vm4kAAkFEuKxDhvpIPMlrXU/egkEXWTHploe9KnzUvZ0pGSlXhTURsg//3Kw2RarYBj+TYJqCNTKzgJn9z1U= diff --git a/README.md b/README.md index 5f4f734..c53f222 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,29 @@ Advised is to add a npm run task for this: } ``` +# Development + +## Building the binary + +hubble-scripts has to option to compile down to a binary that can be used on 64-bit macOS systems. This functionality is provided so it can be used in other native applications or systems where the Node.js runtime is not available. +Since Node provides no option to build a binary and relies on the runtime itself, we are using `zeit/pkg` to do this for us. The only downside is that the binary is large in size. + +> Important!: before building, make sure you bump the version in package.json if required since it will compile down with the binary and the --version flag on the binary uses this file to return version output. + +```console +# Verify that your version is correct first +$ grep "version" package.json +> "version": "3.0.0", + +# Build the application down to a binary in the bin folder +$ npm run build +> pkg cli.js -t node8-macos-x64 --output ./bin/hubble-cli + +# Verify it's ok +$ bin/hubble-cli --version +> 3.0.0 +``` + # Testing This project uses [jest](https://jestjs.io/) to run tests. You can trigger the tests with `npm test`. diff --git a/__mocks__/sample_dump.json b/__mocks__/sample_dump.json index e94bba9..35e03ea 100644 --- a/__mocks__/sample_dump.json +++ b/__mocks__/sample_dump.json @@ -31,6 +31,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -81,6 +83,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -121,6 +125,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -163,6 +169,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": true, "style": { "_class": "style", "do_objectID": "3FFD7942-2861-4D05-A5F9-1C0CA468B28D", @@ -224,6 +232,34 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "3FFD7942-2861-4D05-A5F9-1C0CA468B28D", + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0, + "green": 0, + "red": 0 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 0 + }, "edited": true, "isClosed": true, "pointRadiusBehaviour": 1, @@ -333,6 +369,34 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "3FFD7942-2861-4D05-A5F9-1C0CA468B28D", + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0, + "green": 0, + "red": 0 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 0 + }, "edited": true, "isClosed": true, "pointRadiusBehaviour": 1, @@ -442,6 +506,34 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "3FFD7942-2861-4D05-A5F9-1C0CA468B28D", + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0, + "green": 0, + "red": 0 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 0 + }, "edited": true, "isClosed": true, "pointRadiusBehaviour": 1, @@ -509,8 +601,6 @@ ] } ], - "clippingMaskMode": 0, - "hasClippingMask": true, "windingRule": 0 } ] @@ -573,6 +663,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -615,12 +707,14 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "sharedStyleID": "FEF84709-9700-4E73-88BF-4953F0A3D36F", "style": { "_class": "style", "do_objectID": "891CED1B-5C83-4CEF-9835-C3A1DEB80269", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "FEF84709-9700-4E73-88BF-4953F0A3D36F", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -740,6 +834,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -782,12 +878,14 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "sharedStyleID": "D52C375A-E594-4F72-BE07-AA91CD1772DA", "style": { "_class": "style", "do_objectID": "D741458A-786A-4F9F-9363-1C655AAF56E8", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "D52C375A-E594-4F72-BE07-AA91CD1772DA", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -907,6 +1005,8 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "endMarkerType": 0, @@ -947,12 +1047,14 @@ "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "sharedStyleID": "AE67B98F-F8FC-4899-BCE1-A1766049BD9C", "style": { "_class": "style", "do_objectID": "F70C8639-63E4-4A73-8A57-132D087CF23D", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "AE67B98F-F8FC-4899-BCE1-A1766049BD9C", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -1079,6 +1181,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "5CFE40CE-98BC-4D6B-BEE3-CD6D67441C52", @@ -1090,9 +1194,9 @@ "hasClickThrough": false, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "EA9EFCA8-685A-42E9-AD2C-E72C00705C93", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "51261A8F-5341-498B-BAB4-DD37CA352157", @@ -1103,7 +1207,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "B8632C09-CDB9-4457-9495-C29A8345D268", "constrainProportions": false, "height": 24, "width": 24, @@ -1127,6 +1230,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "AAD466E9-A3CB-4162-993C-B0F4EC4B7211", @@ -1169,93 +1274,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "9DA854A1-C4AD-495B-A7EB-ED34698B993A", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "FE1AADEB-2230-44EF-A75E-18F3B4762FCD", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "E9D142C8-E8CB-458D-A2B7-835295C7832D", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -1341,6 +1406,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "D59BE9D1-08FC-4ECA-9426-8FE55011760A", @@ -1352,9 +1419,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "D834881A-C61F-47E4-B86C-31D0F1E910A3", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "91770B41-9E6F-448F-86FF-D4D23F5080A5", @@ -1365,7 +1432,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "B471D63B-586B-469A-B980-F2D8BFF5582E", "constrainProportions": false, "height": 24, "width": 24, @@ -1389,6 +1455,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "2BB2B3FB-4711-4620-8E0C-F22CDE5ACE93", @@ -1431,93 +1499,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "64CDDBBC-32C4-444D-BE8F-8AFD5A5A15EB", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "05B8A00E-3E7E-482A-AA34-5BFAFED9F551", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "700DD826-1990-4EFB-91D0-EA0F6707394F", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -1603,6 +1631,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "65D1D08E-3143-492E-8302-E53FF4F871AB", @@ -1614,9 +1644,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "9B08202B-2868-45A8-B0FF-E459FBC2C1E4", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "4E3E81CF-266A-4DEE-8C32-CA24EF29A480", @@ -1627,7 +1657,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "0AD7A8DA-7B21-4E11-9F35-4CC292C1E00C", "constrainProportions": false, "height": 24, "width": 24, @@ -1651,6 +1680,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "0B6D5F38-21F8-475A-A778-158627478EAC", @@ -1693,93 +1724,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "E39AB53A-5457-468C-951B-F937F1276712", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "FB73ADBC-CC89-458A-A9B9-5EBB20B9E9A6", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "733D430A-7EF4-40F9-AE73-771A01AB9A46", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -1872,6 +1863,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "A8D37FB1-E62A-42C2-BEA3-FDCB5BC44363", @@ -1883,9 +1876,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "F3ACA72D-8222-45E4-B421-92638B1CF4D4", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "55F8985F-5DFD-4981-8766-DABA854426A5", @@ -1896,7 +1889,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "94AB4428-E090-4E5F-B963-147421D6059C", "constrainProportions": false, "height": 24, "width": 24, @@ -1920,6 +1912,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "AAEE98F0-DA64-4FBD-8A10-281291E31F82", @@ -1962,93 +1956,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "E2FB5AC0-C799-4579-8D59-622A1177766B", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "3F140830-6629-4F58-A44E-D5818274FD88", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "51FCC517-84D0-4C6E-82FA-CFDCDA0AA231", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -2134,6 +2088,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "3B14F83A-33B5-498B-B519-F1994CAD6AF0", @@ -2145,9 +2101,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "365FB80B-E106-4104-922B-DD991D347172", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "781A7436-4760-4652-8094-567048A87F65", @@ -2158,7 +2114,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "81F16D0E-E90F-48F0-88E2-4A9826076FD9", "constrainProportions": false, "height": 24, "width": 24, @@ -2182,6 +2137,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "A04D8766-EAD6-4D07-AE82-D995D20950DF", @@ -2224,93 +2181,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "A8271947-2200-4F81-9E7C-FC655ADE5654", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "60FCFB99-EA62-4AFF-AA2E-B5F7279054DA", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "BE4B72C9-A6F6-44D4-A4C8-40FAD773456D", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -2396,6 +2313,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "8006722E-80CF-416E-B627-6E40FFD19774", @@ -2407,9 +2326,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "1D0438F9-9017-407A-B923-81D4F1E08E8C", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "E984864E-F860-4B79-9EE4-64F1E250FAB6", @@ -2420,7 +2339,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "E65F51AD-9B1D-4159-BBA6-8AB5A1A557AD", "constrainProportions": false, "height": 24, "width": 24, @@ -2444,6 +2362,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "03B89339-5D65-4277-9802-93813ACF6434", @@ -2486,93 +2406,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "5BE8420D-6F0F-4CAA-9AC1-D39A5786DDE0", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "FD3EC2C3-60CE-4231-B9B3-2E4A166FBF57", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "14764319-7B60-4B50-926A-950BECECA2DC", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -2658,6 +2538,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "90B2BF3F-4EA8-4B61-B64C-57B44E51B32D", @@ -2669,9 +2551,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "E13DBFCE-7E81-4DCD-B88D-CC718A4A9604", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "BC842AE1-D6E0-419F-A191-5783B3EB0A6D", @@ -2682,7 +2564,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "2EDB1ADA-45CE-40FC-B916-BCAAC6C178EF", "constrainProportions": false, "height": 24, "width": 24, @@ -2706,6 +2587,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "5CB0966F-E533-4210-ADB8-F0AE6BF2BF71", @@ -2748,93 +2631,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "E7836C68-45E6-4E6D-9FFA-41D3B5512EEB", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "F73D71F2-E99D-4CA0-A50C-4518FCB9CD79", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "3849DED2-C6A0-4E89-AB87-7B84F8C03F2E", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -2920,6 +2763,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "EECFDE5C-89F0-46F0-9FCD-D6325739C273", @@ -2931,9 +2776,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "14816683-15FB-49DF-87BB-AD1B9CC9B687", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "9978B0EB-921C-4D90-98B1-BB7E6DC0D6BD", @@ -2944,7 +2789,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "C000071B-6EBA-4217-B128-336644289520", "constrainProportions": false, "height": 24, "width": 24, @@ -2968,6 +2812,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "495D52E3-053F-448B-BB69-467192DBE20D", @@ -3010,93 +2856,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "18D56040-D88E-4AD5-B0C3-13096077EC65", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "E1914134-1089-407B-8669-78824ED12CE2", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "460C81DB-7AB5-47C2-9C47-4F9E37C92323", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -3182,6 +2988,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "29A0EE17-39AE-4C71-A964-EB761CDEACB3", @@ -3193,9 +3001,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "0692E17E-8588-4120-B1B9-D8BBC80EF95A", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "C6D5E015-FAE5-471B-953E-BFC1C5A31C37", @@ -3206,7 +3014,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "0EF4106B-57A7-403D-BCF5-2D0F89E2D699", "constrainProportions": false, "height": 24, "width": 24, @@ -3230,6 +3037,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "51298C18-FC55-4415-BEC0-11D30FD521DF", @@ -3272,93 +3081,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "163D97E9-2A41-4E71-AD1C-4ACF8FAE7F99", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "854712AC-5190-4F2E-8C8D-3606E2D47DBE", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "510DD914-CCEF-493F-8C53-6C324D08CFDB", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -3444,6 +3213,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "9073454D-6F27-48F6-B5B8-48B2ACE0350B", @@ -3455,9 +3226,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "A6F41060-DE2D-486D-A4A4-D3C968B6B2ED", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "4256E00C-6FB1-439C-9702-C572EBAF0733", @@ -3468,7 +3239,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "DA5E74AC-9EFB-49AD-991D-0CABCF26E185", "constrainProportions": false, "height": 24, "width": 24, @@ -3492,6 +3262,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "B5D155F6-03F7-49A5-851C-B244266AFE0F", @@ -3534,93 +3306,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "C5CB8528-5D57-463E-8ECA-5F250316141F", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "050A97EA-F4C8-4820-BED0-8E0AE72D3EFF", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "83811F1A-44D8-4325-BD4D-D7353D72D007", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -3693,7 +3425,7 @@ "constrainProportions": false, "height": 24, "width": 24, - "x": 1175, + "x": 1098, "y": 407 }, "isFixedToViewport": false, @@ -3713,6 +3445,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "12A977A3-10B0-44E4-994C-D860A438FEA4", @@ -3721,12 +3455,12 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": true, + "hasClickThrough": false, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "A63E9CE6-1240-4DA3-87A8-354A7F2D5529", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "75F0C030-C9BA-4DB4-90FD-5B0A2A33BDDD", @@ -3737,7 +3471,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "C79C1A36-6C33-4792-B4C6-8D31C3C0786C", "constrainProportions": false, "height": 24, "width": 24, @@ -3761,6 +3494,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "3B823A74-D90E-4FEE-9CE3-D8BA0A7CC55B", @@ -3803,93 +3538,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "A8A79744-617B-4F60-968A-3B193F9F0866", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "11E368B6-9329-476B-845B-7FA0509B265D", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "EA5F9300-0B22-439A-86A0-B100AA96B6C0", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -3942,7 +3637,7 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "0059EBB3-0C83-4D2C-AC26-845113B5F1CB", - "changeIdentifier": 1542 + "changeIdentifier": 1569 }, { "_class": "symbolMaster", @@ -3982,6 +3677,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "EF7B7578-7ECB-4E66-8BE8-31CB6706E4C7", @@ -3993,9 +3690,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "006F77EE-04BC-4208-A7C4-B83EA6CF8093", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "5B032ED2-FED9-49D4-89B8-F36609FDBF2E", @@ -4006,7 +3703,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "62419FC0-DDB6-4F2F-9099-2E0C7C6006E0", "constrainProportions": false, "height": 24, "width": 24, @@ -4030,6 +3726,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "31AD4963-511F-4A63-AEDF-FEB71B4F66D5", @@ -4072,93 +3770,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "FAA5F742-6244-4693-9D06-C59A2D156020", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "73BF1037-9818-4B2C-BC7B-9FB64A32C962", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "957B8731-A65A-4091-8C5E-F24BBFBB18A0", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -4244,6 +3902,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "E80A4FBA-A116-46D0-B4DE-402C89D5EDA0", @@ -4255,9 +3915,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "259DCF0D-90E9-41DF-B6B4-FB14DBFA8C21", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "AFB1D987-BF06-4C8C-830A-23D19ED5F8AA", @@ -4268,7 +3928,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "1133C856-3E3F-4E45-A6C6-825B3824ED2A", "constrainProportions": false, "height": 24, "width": 24, @@ -4292,6 +3951,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "D0859D2F-6BCC-4DEB-B82E-5FB2642EA234", @@ -4334,93 +3995,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "6C8A577C-CC8F-4F62-80C9-4063F3958138", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "7E831791-D497-44A4-B4D6-B37657DEE1C9", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "2AF45597-ED57-4D66-BF12-CF9A35124E5E", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -4506,6 +4127,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "4749B9B1-5183-4A0C-BD59-A11BD5BF9841", @@ -4517,9 +4140,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "11757A5C-8403-4523-9F9E-287931290082", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "309D0FC1-CBBA-49F6-B4D3-B0CAD9D76BD5", @@ -4530,7 +4153,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "512516B0-33C1-457F-97F8-5488A92F8A0A", "constrainProportions": false, "height": 24, "width": 24, @@ -4554,6 +4176,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "193AAE10-29E8-40BD-8A23-287660CE126D", @@ -4596,93 +4220,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "383243AD-F901-41F1-9F81-A6DEF5A3632C", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "EB6C91F5-7619-4CC7-AD61-704D6E4495C9", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "814A5EF5-E17B-4F17-A34E-9BD82BE00D13", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -4768,6 +4352,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "F28E63E1-67E1-431D-9261-7E126422034E", @@ -4779,9 +4365,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "BB8F4AF2-1945-48C4-BA28-5089880429B8", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "2AB22704-751B-4C2A-96F3-DF8B7E8A08BE", @@ -4792,7 +4378,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "1E407B64-876C-4A89-85AE-052117C763D0", "constrainProportions": false, "height": 24, "width": 24, @@ -4816,6 +4401,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "8BC17585-8719-4A6C-A794-D89196F148AB", @@ -4858,93 +4445,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "85237DB1-E640-444D-9D2B-ADE4E2284125", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "42B1C595-63D7-425A-9CDB-D16A9759180B", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "3930566C-0B43-45B1-8499-B1E277F09489", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -5030,6 +4577,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "6EF4EEC6-179B-4B29-9217-D1D177BE3211", @@ -5041,9 +4590,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "517EC265-174D-476F-A1FA-8DDBEF357069", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "0C2332DB-60A6-4291-A8BD-F53E563BB6DE", @@ -5054,7 +4603,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "89C34C9C-F58E-445C-BA75-6CC355AC4395", "constrainProportions": false, "height": 24, "width": 24, @@ -5078,6 +4626,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "3591F473-A31C-479C-88BC-FD75AA953FBA", @@ -5120,93 +4670,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "F78EB828-03CC-43BD-AC38-2C705639C9C2", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "2F8E7271-94F2-48C8-A46D-54C25EB2D747", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "94CA351A-7925-42FE-BDDC-9A226DFACFD9", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -5292,6 +4802,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "AD42143E-460B-4343-90F2-A94858A4CF54", @@ -5303,9 +4815,9 @@ "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", + "_class": "rectangle", "do_objectID": "D6E3D5CA-12AC-4DBC-BF05-D9743A1FCB11", - "booleanOperation": 0, + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", "do_objectID": "E389A6AF-C50D-4934-B672-B50135B7FC94", @@ -5316,7 +4828,6 @@ }, "frame": { "_class": "rect", - "do_objectID": "DC022E61-F119-4326-9773-FB80976FEEE4", "constrainProportions": false, "height": 24, "width": 24, @@ -5340,6 +4851,8 @@ "kModelPropertiesKey": {} } }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", "do_objectID": "83B7AA76-74CA-4771-B2B9-CB33A68436E8", @@ -5382,93 +4895,53 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "CD757700-4906-476D-AE43-CFFF5F005B43", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "49A38AFE-C908-40D8-889C-363553897766", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "B8765DBF-7F17-4AC5-B181-FC57182986FD", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { @@ -5542,35 +5015,2007 @@ "isFlippedVertical": false, "isLocked": false, "isVisible": true, - "layerListExpandedType": 2, - "name": "primitives/color/secondary/200", + "layerListExpandedType": 2, + "name": "primitives/color/secondary/200", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "userInfo": { + "com.animaapp.stc-sketch-plugin": { + "kModelPropertiesKey": {} + } + }, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "93DC1231-3B2F-4EC9-BEA0-AC3FE7E7321D", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "3C27BB86-CE8B-421B-99DB-10F7E774AAC6", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "226836B5-9F18-4F54-A212-F908D31F63AC", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 24, + "width": 24, + "x": 0, + "y": 0 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 1, + "name": "gray-dark", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "userInfo": { + "com.animaapp.stc-sketch-plugin": { + "kModelPropertiesKey": {} + } + }, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "9A6DD3EE-3FB3-4CB9-9674-DDFF3014B138", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.8156862745098039, + "green": 0.8784313725490196, + "red": 0.8313725490196079 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "B2A8B70C-D5C9-4AC5-9576-DE8553BFC5AC", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "49EE950F-76D8-4D89-8205-4394CFF1C49F", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "layout": { + "_class": "layoutGrid", + "do_objectID": "0A2CB072-9939-47C7-A012-3DE94B2DD0C8", + "isEnabled": false, + "columnWidth": 1, + "drawHorizontal": true, + "drawHorizontalLines": false, + "drawVertical": false, + "gutterHeight": 8, + "gutterWidth": 86.18181818181819, + "guttersOutside": false, + "horizontalOffset": 0, + "numberOfColumns": 12, + "rowHeightMultiplication": 1, + "totalWidth": 960 + }, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "CE5B3FC4-D8BC-4AB1-AC82-AE4E797BDEBA", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInInstance": false, + "symbolID": "330A5B18-6324-43DD-A4C6-3A96BF94CCEF", + "changeIdentifier": 2050 + }, + { + "_class": "symbolMaster", + "do_objectID": "44089DEB-F137-4D77-AC67-385A284A8716", + "booleanOperation": 0, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "7463A6CD-6A66-47EA-867E-CDBB12A33DD2", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "6C91177C-9EBE-406A-A014-1728D77F263C", + "constrainProportions": false, + "height": 24, + "width": 24, + "x": 1131, + "y": 746 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 2, + "name": "primitives/color/secondary/100", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "userInfo": { + "com.animaapp.stc-sketch-plugin": { + "kModelPropertiesKey": {} + } + }, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "8F1DADF7-BEE2-4E1B-8672-D388842FEBAC", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": true, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "E5B82D25-512F-42EF-ADFC-5A03B29D7FCC", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "17C5FAB9-EE48-49E6-A6CE-AE3C3640980E", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 24, + "width": 24, + "x": 0, + "y": 0 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 1, + "name": "gray-dark", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "userInfo": { + "com.animaapp.stc-sketch-plugin": { + "kModelPropertiesKey": {} + } + }, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "9EAE6C6C-B36D-4C3A-9FAE-1606FA83F56E", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.9058823529411765, + "green": 0.9372549019607843, + "red": 0.9137254901960784 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "CB4659BF-64A4-4833-9E94-1FB2FCA12868", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "E7111D7D-7A61-4575-8A0E-305598298AFE", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "layout": { + "_class": "layoutGrid", + "do_objectID": "C810C421-88A9-4089-9082-9E0F290D085D", + "isEnabled": false, + "columnWidth": 1, + "drawHorizontal": true, + "drawHorizontalLines": false, + "drawVertical": false, + "gutterHeight": 8, + "gutterWidth": 86.18181818181819, + "guttersOutside": false, + "horizontalOffset": 0, + "numberOfColumns": 12, + "rowHeightMultiplication": 1, + "totalWidth": 960 + }, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "9DE62D73-AD6A-4271-9CD0-2C1D64ABD94E", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInInstance": false, + "symbolID": "2B825069-6958-4BD3-942C-422F429A4FD4", + "changeIdentifier": 2136 + }, + { + "_class": "artboard", + "do_objectID": "0DAFE776-EE80-4B21-B0A1-1184FFC8C9FE", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 1180, + "y": 407 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/gradient/linear", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": true, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "25944FEF-F127-42B0-A02A-F457D16B7B47", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 0, + "y": 0 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 1, + "gradient": { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 0, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3450980392156862, + "green": 0.5686274509803921, + "red": 0.3333333333333334 + }, + "position": 0.5038507579143953 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.49999999999999989, 3.0616169978683836e-17}" + }, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "F9C9C2C5-925B-41CC-B221-A681D3B0467B", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "E3E1E0B6-26FE-4390-98B5-D7C5F2B63287", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "BF1839CB-2E18-4BEB-AD4C-B20B0114788F", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 1180, + "y": 488 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/gradient/radial", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "B53C39F9-A608-4AC9-B37F-79F196241DAD", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "FDE90C50-C91D-41B2-9B9A-5A4246ED0EE6", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "24A44529-F887-4E2B-AD62-8CF8DE378A6E", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "7487F607-C720-42B0-BDA8-EF8EF8266E87", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 0, + "y": 0 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "9FEC3341-CD55-4C7E-A95D-7905CE9E0589", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 1, + "gradient": { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 1, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.5, -0.27263153394819584}" + }, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "E546E174-486B-4F9D-A3C7-B2DDE8C3C49B", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "70025BC0-DC04-49CF-A575-147B99AB9E20", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "869D6FB4-42EC-4DFF-80E5-B6D1085302B7", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "83CB7245-64A8-4D1D-A91D-7BED3E8E536F", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "CF6BAB56-FC97-48FD-A269-0064F83C76A5", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "C44A5538-6606-46C3-9362-C675E3A7B92B", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 1180, + "y": 569 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/gradient/angular", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "804A7260-A853-4AA9-9FB9-89D6BF51A644", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "45A2BCD3-E9A7-48E8-9A25-7862BCE83CC5", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "918164E3-544D-4F05-AE16-CA911DED02EB", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "C943BA4E-5D13-4E5B-BAB0-36895B9FD0EB", + "constrainProportions": false, + "height": 62, + "width": 131, + "x": 0, + "y": 0 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "D0339510-D7AB-4587-90C9-0820A0C372EB", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 1, + "gradient": { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 2, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0.4336458341191861 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.5, -0.27263153394819584}" + }, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "BC0199B1-60D3-44F3-9C78-E3B0B9BD718D", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "06DD1E0B-4B8C-4F3B-B525-A124F8A37006", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "60ABF9ED-D4B7-4FC8-9F4A-897503ABA544", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "C88996D5-D133-4F93-B701-1BD926488842", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 44, + "width": 102, + "x": 1328, + "y": 407 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/drop-shadow/simple", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "670FB00E-A217-4D3E-88F2-4CC6A2514AD4", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 25, + "width": 80, + "x": 11, + "y": 9 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "borders": [ + { + "_class": "border", + "isEnabled": false, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.592, + "green": 0.592, + "red": 0.592 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "shadows": [ + { + "_class": "shadow", + "isEnabled": true, + "blurRadius": 4, + "color": { + "_class": "color", + "alpha": 0.5, + "blue": 0, + "green": 0, + "red": 0 + }, + "contextSettings": { + "_class": "graphicsContextSettings", + "blendMode": 0, + "opacity": 1 + }, + "offsetX": 0, + "offsetY": 2, + "spread": 0 + } + ], + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "78EED8DF-E23A-40C7-B916-FB8D70BDDDD1", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "7E81A180-3479-4A40-98CC-2D9063CED95C", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "1D86753E-D7EF-4390-9BCF-0E849416D56A", + "constrainProportions": false, + "height": 44, + "width": 102, + "x": 1453, + "y": 407 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/border/inside", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "64099790-0EA8-4F25-A3E5-20BB07E11AE5", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": true, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "2243D0A2-FC45-481B-AE97-D870899002D9", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "BF39C3F9-1983-4788-AA26-CEAF9C3BF800", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "BA9C9CBF-9684-47CC-8D9D-6A2EEDDB342E", + "constrainProportions": false, + "height": 25, + "width": 80, + "x": 11, + "y": 9 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "563A5CA8-061B-4AA4-8A7F-BE0C824053D5", + "borders": [ + { + "_class": "border", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5868647411616161, + "green": 0.5868647411616161, + "red": 1 + }, + "fillType": 0, + "position": 1, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 3, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 3, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 3, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 3, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 3, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "78C82A3E-B795-4CC7-BEF0-D73AEAA16E84", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "B9F65356-2BA0-4A3E-8880-CF67735EBA14", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "9FC20463-C034-4BF1-ADC5-AA42F172AAA3", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "E17C144B-6CC5-42A1-93BC-40CFC5BF78AD", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "FA315F21-0860-453B-AF84-E458DECD4F06", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "20EE71B0-A0FE-4E11-AAC9-FB7FE2FA62D4", + "constrainProportions": false, + "height": 44, + "width": 102, + "x": 1453, + "y": 515 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/border/outside", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "E5D05675-ACAA-4125-97C1-3F4D76E0CC84", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "63A471F5-D77A-44A7-8541-A7ABDE2E2189", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "8D0FC993-95F4-4B2C-99B5-65A1C901E190", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "B4C2D7CB-EA17-47B7-936E-792373065DCF", + "constrainProportions": false, + "height": 25, + "width": 80, + "x": 11, + "y": 9 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "39C6E122-7F1C-433E-973D-B35B070376C1", + "borders": [ + { + "_class": "border", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5868647411616161, + "green": 0.5868647411616161, + "red": 1 + }, + "fillType": 0, + "position": 2, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 12.5, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "0A316CBD-B3AD-406D-B887-7A44EBC40F91", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "AFD1E873-35FB-4581-9D82-D507C877B2A7", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "DE0831E4-BA14-4BC2-A739-1458E198FA50", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "6AE4CFC3-4143-4B35-9361-84A6619528A9", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "E8075A1D-963F-42CE-AF1F-B3E2AD8B7DAA", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "6D8FE2FD-7883-4DC3-9256-FCB1052A182E", + "constrainProportions": false, + "height": 44, + "width": 102, + "x": 1453, + "y": 568 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/border/gradient-with-corners", + "nameIsFixed": true, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": true, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "2E9102E8-856F-487F-8949-062F0DB432C8", + "endMarkerType": 0, + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "hasClickThrough": false, + "layers": [ + { + "_class": "rectangle", + "do_objectID": "5D7549DB-8ACD-4EF5-A293-78332C3794D4", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "do_objectID": "E68611C1-DAF5-4290-AD31-20823B3980F5", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "do_objectID": "97DA891D-DC08-44BA-871B-9B2805A07E34", + "constrainProportions": false, + "height": 25, + "width": 80, + "x": 11, + "y": 9 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, + "resizingConstraint": 63, + "resizingType": 0, + "rotation": 0, + "shouldBreakMaskChain": false, + "clippingMaskMode": 0, + "hasClippingMask": false, + "style": { + "_class": "style", + "do_objectID": "1414490A-A027-4F35-BF2D-EB21672D3174", + "borders": [ + { + "_class": "border", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5868647411616161, + "green": 0.5868647411616161, + "red": 1 + }, + "fillType": 1, + "gradient": { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 0, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3450980392156862, + "green": 0.5686274509803921, + "red": 0.3333333333333334 + }, + "position": 0.5038507579143953 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.49999999999999989, 3.0616169978683836e-17}" + }, + "position": 2, + "thickness": 1 + } + ], + "endMarkerType": 0, + "fills": [ + { + "_class": "fill", + "isEnabled": true, + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.847, + "green": 0.847, + "red": 0.847 + }, + "fillType": 0, + "noiseIndex": 0, + "noiseIntensity": 0, + "patternFillType": 1, + "patternTileScale": 1 + } + ], + "miterLimit": 10, + "startMarkerType": 0, + "windingRule": 1 + }, + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ + { + "_class": "curvePoint", + "cornerRadius": 8, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 12.5, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" + } + ], + "fixedRadius": 12.5, + "hasConvertedToNewRoundCorners": true + } + ], + "backgroundColor": { + "_class": "color", + "do_objectID": "CD8E5EA8-48E5-49B9-9782-D6BDD27DB07F", + "alpha": 1, + "blue": 1, + "green": 1, + "red": 1 + }, + "hasBackgroundColor": false, + "horizontalRulerData": { + "_class": "rulerData", + "do_objectID": "6A46C894-98DF-48C4-A6AA-BC14478C7C63", + "base": 0, + "guides": [] + }, + "includeBackgroundColorInExport": true, + "includeInCloudUpload": true, + "isFlowHome": false, + "resizesContent": false, + "verticalRulerData": { + "_class": "rulerData", + "do_objectID": "4343539D-F59C-4B47-8F52-39234580610C", + "base": 0, + "guides": [] + } + }, + { + "_class": "artboard", + "do_objectID": "F32C4D04-3727-4622-98D0-1F5ABB8AFA89", + "booleanOperation": -1, + "exportOptions": { + "_class": "exportOptions", + "exportFormats": [], + "includedLayerIds": [], + "layerOptions": 0, + "shouldTrim": false + }, + "frame": { + "_class": "rect", + "constrainProportions": false, + "height": 44, + "width": 102, + "x": 1453, + "y": 460 + }, + "isFixedToViewport": false, + "isFlippedHorizontal": false, + "isFlippedVertical": false, + "isLocked": false, + "isVisible": true, + "layerListExpandedType": 0, + "name": "primitives/border/center", "nameIsFixed": true, "resizingConstraint": 63, "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, - "userInfo": { - "com.animaapp.stc-sketch-plugin": { - "kModelPropertiesKey": {} - } - }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", - "do_objectID": "93DC1231-3B2F-4EC9-BEA0-AC3FE7E7321D", "endMarkerType": 0, "miterLimit": 10, "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, + "hasClickThrough": true, "layers": [ { - "_class": "shapeGroup", - "do_objectID": "3C27BB86-CE8B-421B-99DB-10F7E774AAC6", - "booleanOperation": 0, + "_class": "rectangle", + "do_objectID": "C5CBF4F5-CB32-40E1-BBA0-7B41385D7344", + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", - "do_objectID": "226836B5-9F18-4F54-A212-F908D31F63AC", "exportFormats": [], "includedLayerIds": [], "layerOptions": 0, @@ -5578,46 +7023,41 @@ }, "frame": { "_class": "rect", - "do_objectID": "530539A7-C2F6-456F-9EF5-63CD086F7D25", "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 + "height": 25, + "width": 80, + "x": 11, + "y": 9 }, "isFixedToViewport": false, "isFlippedHorizontal": false, "isFlippedVertical": false, "isLocked": false, "isVisible": true, - "layerListExpandedType": 1, - "name": "gray-dark", - "nameIsFixed": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, "resizingConstraint": 63, "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, - "userInfo": { - "com.animaapp.stc-sketch-plugin": { - "kModelPropertiesKey": {} - } - }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", - "do_objectID": "9A6DD3EE-3FB3-4CB9-9674-DDFF3014B138", "borders": [ { "_class": "border", - "isEnabled": false, + "isEnabled": true, "color": { "_class": "color", "alpha": 1, - "blue": 0.592, - "green": 0.592, - "red": 0.592 + "blue": 0.5868647411616161, + "green": 0.5868647411616161, + "red": 1 }, "fillType": 0, - "position": 1, + "position": 0, "thickness": 1 } ], @@ -5629,9 +7069,9 @@ "color": { "_class": "color", "alpha": 1, - "blue": 0.8156862745098039, - "green": 0.8784313725490196, - "red": 0.8313725490196079 + "blue": 0.847, + "green": 0.847, + "red": 0.847 }, "fillType": 0, "noiseIndex": 0, @@ -5644,98 +7084,57 @@ "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "F9E00DB1-171E-44CB-B25C-3835534F0754", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "DE13B667-8475-4661-A438-676F12A8594E", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "E0D56431-6751-4809-A113-8C08545A6BEF", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { "_class": "color", - "do_objectID": "B2A8B70C-D5C9-4AC5-9576-DE8553BFC5AC", "alpha": 1, "blue": 1, "green": 1, @@ -5744,47 +7143,26 @@ "hasBackgroundColor": false, "horizontalRulerData": { "_class": "rulerData", - "do_objectID": "49EE950F-76D8-4D89-8205-4394CFF1C49F", "base": 0, "guides": [] }, "includeBackgroundColorInExport": true, "includeInCloudUpload": true, "isFlowHome": false, - "layout": { - "_class": "layoutGrid", - "do_objectID": "0A2CB072-9939-47C7-A012-3DE94B2DD0C8", - "isEnabled": false, - "columnWidth": 1, - "drawHorizontal": true, - "drawHorizontalLines": false, - "drawVertical": false, - "gutterHeight": 8, - "gutterWidth": 86.18181818181819, - "guttersOutside": false, - "horizontalOffset": 0, - "numberOfColumns": 12, - "rowHeightMultiplication": 1, - "totalWidth": 960 - }, "resizesContent": false, "verticalRulerData": { "_class": "rulerData", - "do_objectID": "CE5B3FC4-D8BC-4AB1-AC82-AE4E797BDEBA", "base": 0, "guides": [] - }, - "includeBackgroundColorInInstance": false, - "symbolID": "330A5B18-6324-43DD-A4C6-3A96BF94CCEF", - "changeIdentifier": 2050 + } }, { - "_class": "symbolMaster", - "do_objectID": "44089DEB-F137-4D77-AC67-385A284A8716", - "booleanOperation": 0, + "_class": "artboard", + "do_objectID": "3CA8B6DB-E34A-4F1C-B420-798F9BF702D1", + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", - "do_objectID": "7463A6CD-6A66-47EA-867E-CDBB12A33DD2", + "do_objectID": "E3E871C4-6E83-4DCC-9C34-66A86AD6EC06", "exportFormats": [], "includedLayerIds": [], "layerOptions": 0, @@ -5792,47 +7170,44 @@ }, "frame": { "_class": "rect", - "do_objectID": "6C91177C-9EBE-406A-A014-1728D77F263C", + "do_objectID": "807DB016-0231-40B4-BEE9-3EDC8D679236", "constrainProportions": false, - "height": 24, - "width": 24, - "x": 1131, - "y": 746 + "height": 44, + "width": 102, + "x": 1328, + "y": 457 }, "isFixedToViewport": false, "isFlippedHorizontal": false, "isFlippedVertical": false, "isLocked": false, "isVisible": true, - "layerListExpandedType": 2, - "name": "primitives/color/secondary/100", + "layerListExpandedType": 0, + "name": "primitives/inner-shadow/simple", "nameIsFixed": true, "resizingConstraint": 63, "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": true, - "userInfo": { - "com.animaapp.stc-sketch-plugin": { - "kModelPropertiesKey": {} - } - }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", - "do_objectID": "8F1DADF7-BEE2-4E1B-8672-D388842FEBAC", + "do_objectID": "7FFF98D8-F73C-42CE-8337-7D92FF8E94B2", "endMarkerType": 0, "miterLimit": 10, "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": true, + "hasClickThrough": false, "layers": [ { - "_class": "shapeGroup", - "do_objectID": "E5B82D25-512F-42EF-ADFC-5A03B29D7FCC", - "booleanOperation": 0, + "_class": "rectangle", + "do_objectID": "990C8531-1C2C-40CC-A9B6-4988D4DC21D4", + "booleanOperation": -1, "exportOptions": { "_class": "exportOptions", - "do_objectID": "17C5FAB9-EE48-49E6-A6CE-AE3C3640980E", + "do_objectID": "FB30D3CA-908E-43B6-98C6-C7C53AADB1C1", "exportFormats": [], "includedLayerIds": [], "layerOptions": 0, @@ -5840,33 +7215,30 @@ }, "frame": { "_class": "rect", - "do_objectID": "0C349D76-0C59-4AFA-A36F-A722182411B3", + "do_objectID": "8444A7CD-CA8D-4B78-A0C0-8B14B1E53A16", "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 + "height": 25, + "width": 80, + "x": 11, + "y": 9 }, "isFixedToViewport": false, "isFlippedHorizontal": false, "isFlippedVertical": false, "isLocked": false, "isVisible": true, - "layerListExpandedType": 1, - "name": "gray-dark", - "nameIsFixed": true, + "layerListExpandedType": 0, + "name": "Rectangle", + "nameIsFixed": false, "resizingConstraint": 63, "resizingType": 0, "rotation": 0, "shouldBreakMaskChain": false, - "userInfo": { - "com.animaapp.stc-sketch-plugin": { - "kModelPropertiesKey": {} - } - }, + "clippingMaskMode": 0, + "hasClippingMask": false, "style": { "_class": "style", - "do_objectID": "9EAE6C6C-B36D-4C3A-9FAE-1606FA83F56E", + "do_objectID": "AF76E8AA-7164-4EA2-8E38-41BFFE2A8D7A", "borders": [ { "_class": "border", @@ -5891,9 +7263,9 @@ "color": { "_class": "color", "alpha": 1, - "blue": 0.9058823529411765, - "green": 0.9372549019607843, - "red": 0.9137254901960784 + "blue": 0.847, + "green": 0.847, + "red": 0.847 }, "fillType": 0, "noiseIndex": 0, @@ -5902,102 +7274,84 @@ "patternTileScale": 1 } ], + "innerShadows": [ + { + "_class": "innerShadow", + "isEnabled": true, + "blurRadius": 3, + "color": { + "_class": "color", + "alpha": 0.5, + "blue": 0, + "green": 0, + "red": 0 + }, + "contextSettings": { + "_class": "graphicsContextSettings", + "blendMode": 0, + "opacity": 1 + }, + "offsetX": 0, + "offsetY": 1, + "spread": 0 + } + ], "miterLimit": 10, "startMarkerType": 0, "windingRule": 1 }, - "hasClickThrough": false, - "layers": [ + "edited": false, + "isClosed": true, + "pointRadiusBehaviour": 1, + "points": [ { - "_class": "rectangle", - "do_objectID": "2754F4E4-FE3B-45D4-B7D5-2F8613F9B942", - "booleanOperation": -1, - "exportOptions": { - "_class": "exportOptions", - "do_objectID": "37E46B38-8C65-43B4-8BA3-AA9F8AC4B160", - "exportFormats": [], - "includedLayerIds": [], - "layerOptions": 0, - "shouldTrim": false - }, - "frame": { - "_class": "rect", - "do_objectID": "7A027543-98C0-497B-A7E7-F09206707FD4", - "constrainProportions": false, - "height": 24, - "width": 24, - "x": 0, - "y": 0 - }, - "isFixedToViewport": false, - "isFlippedHorizontal": false, - "isFlippedVertical": false, - "isLocked": false, - "isVisible": true, - "layerListExpandedType": 0, - "name": "Path", - "nameIsFixed": false, - "resizingConstraint": 63, - "resizingType": 0, - "rotation": 0, - "shouldBreakMaskChain": false, - "edited": false, - "isClosed": true, - "pointRadiusBehaviour": 1, - "points": [ - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 0}", - "curveMode": 1, - "curveTo": "{0, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 0}", - "curveMode": 1, - "curveTo": "{1, 0}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 0}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{1, 1}", - "curveMode": 1, - "curveTo": "{1, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{1, 1}" - }, - { - "_class": "curvePoint", - "cornerRadius": 0, - "curveFrom": "{0, 1}", - "curveMode": 1, - "curveTo": "{0, 1}", - "hasCurveFrom": false, - "hasCurveTo": false, - "point": "{0, 1}" - } - ], - "fixedRadius": 0, - "hasConvertedToNewRoundCorners": true + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 0}", + "curveMode": 1, + "curveTo": "{0, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 0}", + "curveMode": 1, + "curveTo": "{1, 0}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 0}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{1, 1}", + "curveMode": 1, + "curveTo": "{1, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{1, 1}" + }, + { + "_class": "curvePoint", + "cornerRadius": 0, + "curveFrom": "{0, 1}", + "curveMode": 1, + "curveTo": "{0, 1}", + "hasCurveFrom": false, + "hasCurveTo": false, + "point": "{0, 1}" } ], - "clippingMaskMode": 0, - "hasClippingMask": false, - "windingRule": 1 + "fixedRadius": 0, + "hasConvertedToNewRoundCorners": true } ], "backgroundColor": { "_class": "color", - "do_objectID": "CB4659BF-64A4-4833-9E94-1FB2FCA12868", + "do_objectID": "0F6CC1D8-4843-4571-BB29-4FB7F9641251", "alpha": 1, "blue": 1, "green": 1, @@ -6006,39 +7360,20 @@ "hasBackgroundColor": false, "horizontalRulerData": { "_class": "rulerData", - "do_objectID": "E7111D7D-7A61-4575-8A0E-305598298AFE", + "do_objectID": "87FD0ACF-4E64-4D87-B552-F0005F9C0E12", "base": 0, "guides": [] }, "includeBackgroundColorInExport": true, "includeInCloudUpload": true, "isFlowHome": false, - "layout": { - "_class": "layoutGrid", - "do_objectID": "C810C421-88A9-4089-9082-9E0F290D085D", - "isEnabled": false, - "columnWidth": 1, - "drawHorizontal": true, - "drawHorizontalLines": false, - "drawVertical": false, - "gutterHeight": 8, - "gutterWidth": 86.18181818181819, - "guttersOutside": false, - "horizontalOffset": 0, - "numberOfColumns": 12, - "rowHeightMultiplication": 1, - "totalWidth": 960 - }, "resizesContent": false, "verticalRulerData": { "_class": "rulerData", - "do_objectID": "9DE62D73-AD6A-4271-9CD0-2C1D64ABD94E", + "do_objectID": "B2C7F811-6288-4D1E-93A0-DB0B878BCCDA", "base": 0, "guides": [] - }, - "includeBackgroundColorInInstance": false, - "symbolID": "2B825069-6958-4BD3-942C-422F429A4FD4", - "changeIdentifier": 2136 + } } ], "horizontalRulerData": { @@ -6089,7 +7424,50 @@ "red": 0 } ], - "gradients": [], + "gradients": [ + { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 0, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3450980392156862, + "green": 0.5686274509803921, + "red": 0.3333333333333334 + }, + "position": 0.5038507579143953 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.49999999999999989, 3.0616169978683836e-17}" + } + ], "imageCollection": { "_class": "imageCollection", "images": {} @@ -6120,7 +7498,6 @@ "_class": "style", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "AE67B98F-F8FC-4899-BCE1-A1766049BD9C", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -6157,7 +7534,6 @@ "_class": "style", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "D52C375A-E594-4F72-BE07-AA91CD1772DA", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -6194,7 +7570,6 @@ "_class": "style", "endMarkerType": 0, "miterLimit": 10, - "sharedObjectID": "FEF84709-9700-4E73-88BF-4953F0A3D36F", "startMarkerType": 0, "textStyle": { "_class": "textStyle", @@ -6231,19 +7606,25 @@ "_ref_class": "MSImmutablePage", "_ref": "pages/3887CAEA-110F-415F-8010-F3C825F27590" } - ] + ], + "userInfo": { + "hubble-sketch-plugin": { + "hubble-project-id": "\"hubble-project\"" + } + } }, "user": { "document": { - "pageListHeight": 110 + "pageListHeight": 110, + "pageListCollapsed": 0 }, "3887CAEA-110F-415F-8010-F3C825F27590": { - "scrollOrigin": "{-2134, -766}", - "zoomValue": 2.324475039884205 + "scrollOrigin": "{-3804, -1091}", + "zoomValue": 2.869504109150927 } }, "meta": { - "commit": "a9a8e0cffcaebe58914746cb1ab8f707ba873565", + "commit": "b1e0d1c5db157d3a481169aac84f04adc67d2e21", "pagesAndArtboards": { "3887CAEA-110F-415F-8010-F3C825F27590": { "name": "primitives", @@ -6254,6 +7635,9 @@ "46F335CE-30A0-4925-B587-F5BA1D324C5E": { "name": "primitives/color/secondary/700" }, + "C88996D5-D133-4F93-B701-1BD926488842": { + "name": "primitives/drop-shadow/simple" + }, "F8DD5F4F-423D-4845-9BD5-9F4FFB9AF86D": { "name": "icons/level2/code-check" }, @@ -6266,9 +7650,18 @@ "674B5B2C-E545-493B-B3AD-2B6495E87E53": { "name": "primitives/color/secondary/600" }, + "F9C9C2C5-925B-41CC-B221-A681D3B0467B": { + "name": "primitives/gradient/radial" + }, + "E17C144B-6CC5-42A1-93BC-40CFC5BF78AD": { + "name": "primitives/border/outside" + }, "C43D3A12-E181-4E63-B45A-4B6EF1BAE7EE": { "name": "primitives/color/secondary/900" }, + "6AE4CFC3-4143-4B35-9361-84A6619528A9": { + "name": "primitives/border/gradient-with-corners" + }, "767651C1-DEEB-4D60-A295-685C9CB0A977": { "name": "primitives/color/secondary/500" }, @@ -6284,9 +7677,18 @@ "36107A8A-014B-4AF9-AFC4-A372903B5155": { "name": "primitives/color/red" }, + "0DAFE776-EE80-4B21-B0A1-1184FFC8C9FE": { + "name": "primitives/gradient/linear" + }, "80E137BB-C2C2-48E5-8DD3-05FD005FDC6A": { "name": "primitives/color/secondary/300" }, + "F32C4D04-3727-4622-98D0-1F5ABB8AFA89": { + "name": "primitives/border/center" + }, + "3CA8B6DB-E34A-4F1C-B420-798F9BF702D1": { + "name": "primitives/inner-shadow/simple" + }, "B108EDF7-3A0F-4115-A60F-840047FBB34C": { "name": "primitives/color/primary/800" }, @@ -6308,9 +7710,15 @@ "236882BC-6296-4136-8E62-D9C375F1C8A6": { "name": "primitives/color/primary/100" }, + "83CB7245-64A8-4D1D-A91D-7BED3E8E536F": { + "name": "primitives/gradient/angular" + }, "E1B2AFC3-91FE-41D7-AB56-BCC34278AAA9": { "name": "primitives/color/primary/700" }, + "78EED8DF-E23A-40C7-B916-FB8D70BDDDD1": { + "name": "primitives/border/inside" + }, "BB725F66-962D-4674-8835-19A19EA41CA1": { "name": "primitives/color/secondary/800" }, @@ -6320,7 +7728,7 @@ } } }, - "version": 105, + "version": 112, "fonts": [ "FiraSans-Regular" ], @@ -6329,18 +7737,18 @@ "autosaved": 0, "variant": "NONAPPSTORE", "created": { - "commit": "a9a8e0cffcaebe58914746cb1ab8f707ba873565", - "appVersion": "51.3", - "build": 57544, + "commit": "b1e0d1c5db157d3a481169aac84f04adc67d2e21", + "appVersion": "52.6", + "build": 67491, "app": "com.bohemiancoding.sketch3", "compatibilityVersion": 99, - "version": 105, + "version": 112, "variant": "NONAPPSTORE" }, "saveHistory": [ - "NONAPPSTORE.57544" + "NONAPPSTORE.67491" ], - "appVersion": "51.3", - "build": 57544 + "appVersion": "52.6", + "build": 67491 } } \ No newline at end of file diff --git a/__mocks__/sample_output.json b/__mocks__/sample_output.json index fb27334..eee9abd 100644 --- a/__mocks__/sample_output.json +++ b/__mocks__/sample_output.json @@ -1,19 +1,30 @@ { "textStyles": [ { - "id": "Heading 1", + "token": "text-style", + "id": "heading1", "weight": null, "size": 48, "family": "FiraSans-Regular", "borderBottom": null, "color": { + "token": "color", "name": "ultramarine", "red": 16, "green": 6, "blue": 159, "alpha": 1, - "rgb": "16, 6, 159", - "rgba": "16, 6, 159, 1", + "rgb": [ + 16, + 6, + 159 + ], + "rgba": [ + 16, + 6, + 159, + 1 + ], "hex": "10069f", "hsl": [ 244, @@ -24,19 +35,30 @@ "kerning": null }, { - "id": "Heading 2", + "token": "text-style", + "id": "heading2", "weight": null, "size": 36, "family": "FiraSans-Regular", "borderBottom": null, "color": { + "token": "color", "name": "ultramarine", "red": 16, "green": 6, "blue": 159, "alpha": 1, - "rgb": "16, 6, 159", - "rgba": "16, 6, 159, 1", + "rgb": [ + 16, + 6, + 159 + ], + "rgba": [ + 16, + 6, + 159, + 1 + ], "hex": "10069f", "hsl": [ 244, @@ -47,19 +69,30 @@ "kerning": null }, { - "id": "Paragraph", + "token": "text-style", + "id": "paragraph", "weight": null, "size": 18, "family": "FiraSans-Regular", "borderBottom": null, "color": { + "token": "color", "name": "black", "red": 0, "green": 0, "blue": 0, "alpha": 1, - "rgb": "0, 0, 0", - "rgba": "0, 0, 0, 1", + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 1 + ], "hex": "000000", "hsl": [ 0, @@ -72,6 +105,7 @@ ], "colors": [ { + "token": "color", "id": "primary900", "variant": 900, "name": "seagull", @@ -79,8 +113,17 @@ "green": 194, "blue": 230, "alpha": 1, - "rgb": "95, 194, 230", - "rgba": "95, 194, 230, 1", + "rgb": [ + 95, + 194, + 230 + ], + "rgba": [ + 95, + 194, + 230, + 1 + ], "hex": "5fc2e6", "hsl": [ 196, @@ -89,6 +132,7 @@ ] }, { + "token": "color", "id": "primary800", "variant": 800, "name": "viking", @@ -96,8 +140,17 @@ "green": 193, "blue": 209, "alpha": 1, - "rgb": "94, 193, 209", - "rgba": "94, 193, 209, 1", + "rgb": [ + 94, + 193, + 209 + ], + "rgba": [ + 94, + 193, + 209, + 1 + ], "hex": "5ec1d1", "hsl": [ 188, @@ -106,6 +159,7 @@ ] }, { + "token": "color", "id": "primary700", "variant": 700, "name": "viking", @@ -113,8 +167,17 @@ "green": 200, "blue": 214, "alpha": 1, - "rgb": "119, 200, 214", - "rgba": "119, 200, 214, 1", + "rgb": [ + 119, + 200, + 214 + ], + "rgba": [ + 119, + 200, + 214, + 1 + ], "hex": "77c8d6", "hsl": [ 189, @@ -123,6 +186,7 @@ ] }, { + "token": "color", "id": "primary600", "variant": 600, "name": "halfBaked", @@ -130,8 +194,17 @@ "green": 207, "blue": 219, "alpha": 1, - "rgb": "141, 207, 219", - "rgba": "141, 207, 219, 1", + "rgb": [ + 141, + 207, + 219 + ], + "rgba": [ + 141, + 207, + 219, + 1 + ], "hex": "8dcfdb", "hsl": [ 189, @@ -140,6 +213,7 @@ ] }, { + "token": "color", "id": "primary500", "variant": 500, "name": "powderBlue", @@ -147,8 +221,17 @@ "green": 214, "blue": 224, "alpha": 1, - "rgb": "160, 214, 224", - "rgba": "160, 214, 224, 1", + "rgb": [ + 160, + 214, + 224 + ], + "rgba": [ + 160, + 214, + 224, + 1 + ], "hex": "a0d6e0", "hsl": [ 189, @@ -157,6 +240,7 @@ ] }, { + "token": "color", "id": "primary400", "variant": 400, "name": "powderBlue", @@ -164,8 +248,17 @@ "green": 221, "blue": 230, "alpha": 1, - "rgb": "179, 221, 230", - "rgba": "179, 221, 230, 1", + "rgb": [ + 179, + 221, + 230 + ], + "rgba": [ + 179, + 221, + 230, + 1 + ], "hex": "b3dde6", "hsl": [ 191, @@ -174,6 +267,7 @@ ] }, { + "token": "color", "id": "primary300", "variant": 300, "name": "pattensBlue", @@ -181,8 +275,17 @@ "green": 235, "blue": 240, "alpha": 1, - "rgb": "212, 235, 240", - "rgba": "212, 235, 240, 1", + "rgb": [ + 212, + 235, + 240 + ], + "rgba": [ + 212, + 235, + 240, + 1 + ], "hex": "d4ebf0", "hsl": [ 191, @@ -191,6 +294,7 @@ ] }, { + "token": "color", "id": "primary200", "variant": 200, "name": "solitude", @@ -198,8 +302,17 @@ "green": 243, "blue": 250, "alpha": 1, - "rgb": "229, 243, 250", - "rgba": "229, 243, 250, 1", + "rgb": [ + 229, + 243, + 250 + ], + "rgba": [ + 229, + 243, + 250, + 1 + ], "hex": "e5f3fa", "hsl": [ 200, @@ -208,6 +321,7 @@ ] }, { + "token": "color", "id": "primary100", "variant": 100, "name": "aliceBlue", @@ -215,8 +329,17 @@ "green": 249, "blue": 253, "alpha": 1, - "rgb": "242, 249, 253", - "rgba": "242, 249, 253, 1", + "rgb": [ + 242, + 249, + 253 + ], + "rgba": [ + 242, + 249, + 253, + 1 + ], "hex": "f2f9fd", "hsl": [ 202, @@ -225,6 +348,7 @@ ] }, { + "token": "color", "id": "secondary900", "variant": 900, "name": "salem", @@ -232,8 +356,17 @@ "green": 125, "blue": 62, "alpha": 1, - "rgb": "34, 125, 62", - "rgba": "34, 125, 62, 1", + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], "hex": "227d3e", "hsl": [ 138, @@ -242,6 +375,7 @@ ] }, { + "token": "color", "id": "red", "variant": null, "name": "carnation", @@ -249,8 +383,17 @@ "green": 94, "blue": 94, "alpha": 1, - "rgb": "245, 94, 94", - "rgba": "245, 94, 94, 1", + "rgb": [ + 245, + 94, + 94 + ], + "rgba": [ + 245, + 94, + 94, + 1 + ], "hex": "f55e5e", "hsl": [ 0, @@ -259,6 +402,7 @@ ] }, { + "token": "color", "id": "secondary800", "variant": 800, "name": "seaGreen", @@ -266,8 +410,17 @@ "green": 135, "blue": 74, "alpha": 1, - "rgb": "62, 135, 74", - "rgba": "62, 135, 74, 1", + "rgb": [ + 62, + 135, + 74 + ], + "rgba": [ + 62, + 135, + 74, + 1 + ], "hex": "3e874a", "hsl": [ 130, @@ -276,6 +429,7 @@ ] }, { + "token": "color", "id": "secondary700", "variant": 700, "name": "hippieGreen", @@ -283,8 +437,17 @@ "green": 145, "blue": 88, "alpha": 1, - "rgb": "85, 145, 88", - "rgba": "85, 145, 88, 1", + "rgb": [ + 85, + 145, + 88 + ], + "rgba": [ + 85, + 145, + 88, + 1 + ], "hex": "559158", "hsl": [ 123, @@ -293,6 +456,7 @@ ] }, { + "token": "color", "id": "secondary600", "variant": 600, "name": "aquaForest", @@ -300,8 +464,17 @@ "green": 157, "blue": 106, "alpha": 1, - "rgb": "107, 157, 106", - "rgba": "107, 157, 106, 1", + "rgb": [ + 107, + 157, + 106 + ], + "rgba": [ + 107, + 157, + 106, + 1 + ], "hex": "6b9d6a", "hsl": [ 119, @@ -310,6 +483,7 @@ ] }, { + "token": "color", "id": "secondary500", "variant": 500, "name": "amulet", @@ -317,8 +491,17 @@ "green": 169, "blue": 124, "alpha": 1, - "rgb": "129, 169, 124", - "rgba": "129, 169, 124, 1", + "rgb": [ + 129, + 169, + 124 + ], + "rgba": [ + 129, + 169, + 124, + 1 + ], "hex": "81a97c", "hsl": [ 113, @@ -327,6 +510,7 @@ ] }, { + "token": "color", "id": "secondary400", "variant": 400, "name": "norway", @@ -334,8 +518,17 @@ "green": 182, "blue": 144, "alpha": 1, - "rgb": "151, 182, 144", - "rgba": "151, 182, 144, 1", + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], "hex": "97b690", "hsl": [ 109, @@ -344,6 +537,7 @@ ] }, { + "token": "color", "id": "secondary300", "variant": 300, "name": "paleLeaf", @@ -351,8 +545,17 @@ "green": 210, "blue": 186, "alpha": 1, - "rgb": "192, 210, 186", - "rgba": "192, 210, 186, 1", + "rgb": [ + 192, + 210, + 186 + ], + "rgba": [ + 192, + 210, + 186, + 1 + ], "hex": "c0d2ba", "hsl": [ 105, @@ -361,6 +564,7 @@ ] }, { + "token": "color", "id": "secondary200", "variant": 200, "name": "tasman", @@ -368,8 +572,17 @@ "green": 224, "blue": 208, "alpha": 1, - "rgb": "212, 224, 208", - "rgba": "212, 224, 208, 1", + "rgb": [ + 212, + 224, + 208 + ], + "rgba": [ + 212, + 224, + 208, + 1 + ], "hex": "d4e0d0", "hsl": [ 105, @@ -378,6 +591,7 @@ ] }, { + "token": "color", "id": "secondary100", "variant": 100, "name": "grayNurse", @@ -385,8 +599,17 @@ "green": 239, "blue": 231, "alpha": 1, - "rgb": "233, 239, 231", - "rgba": "233, 239, 231, 1", + "rgb": [ + 233, + 239, + 231 + ], + "rgba": [ + 233, + 239, + 231, + 1 + ], "hex": "e9efe7", "hsl": [ 105, @@ -395,8 +618,520 @@ ] } ], + "gradients": [ + { + "token": "gradient", + "type": "LINEAR", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.4999999999999999, + 3.0616169978683836e-17 + ], + "stops": [ + { + "position": 0, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 0.5038507579143953, + "color": { + "token": "color", + "name": "hippieGreen", + "red": 85, + "green": 145, + "blue": 88, + "alpha": 1, + "rgb": [ + 85, + 145, + 88 + ], + "rgba": [ + 85, + 145, + 88, + 1 + ], + "hex": "559158", + "hsl": [ + 123, + 26, + 45 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + }, + { + "token": "gradient", + "type": "RADIAL", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.5, + -0.27263153394819584 + ], + "stops": [ + { + "position": 0, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + }, + { + "token": "gradient", + "type": "ANGULAR", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.5, + -0.27263153394819584 + ], + "stops": [ + { + "position": 0.4336458341191861, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + } + ], + "shadows": [ + { + "token": "shadow", + "blur": 3, + "x": 0, + "y": 1, + "spread": 0, + "type": "inner-shadow", + "color": { + "token": "color", + "name": "black", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 0.5, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 0.5 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + } + }, + { + "token": "shadow", + "blur": 4, + "x": 0, + "y": 2, + "spread": 0, + "type": "drop-shadow", + "color": { + "token": "color", + "name": "black", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 0.5, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 0.5 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + } + } + ], + "borders": [ + { + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "INSIDE", + "radius": 3 + }, + { + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "OUTSIDE", + "radius": 12.5 + }, + { + "token": "border", + "gradient": { + "token": "gradient", + "type": "LINEAR", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.4999999999999999, + 3.0616169978683836e-17 + ], + "stops": [ + { + "position": 0, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 0.5038507579143953, + "color": { + "token": "color", + "name": "hippieGreen", + "red": 85, + "green": 145, + "blue": 88, + "alpha": 1, + "rgb": [ + 85, + 145, + 88 + ], + "rgba": [ + 85, + 145, + 88, + 1 + ], + "hex": "559158", + "hsl": [ + 123, + 26, + 45 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + }, + "width": 1, + "type": "OUTSIDE", + "radius": [ + 8, + 12.5, + 12.5, + 12.5 + ] + }, + { + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "CENTER", + "radius": 0 + } + ], "fonts": [ "FiraSans-Regular" ], - "sketchVersion": "51.3" + "sketchVersion": "52.6" } \ No newline at end of file diff --git a/__mocks__/sample_sketchfile.sketch b/__mocks__/sample_sketchfile.sketch index 3164052..18e322a 100644 Binary files a/__mocks__/sample_sketchfile.sketch and b/__mocks__/sample_sketchfile.sketch differ diff --git a/bin/hubble-cli b/bin/hubble-cli index 1523970..010648a 100755 Binary files a/bin/hubble-cli and b/bin/hubble-cli differ diff --git a/cli.js b/cli.js index 9e6d64c..6e5cd40 100644 --- a/cli.js +++ b/cli.js @@ -9,7 +9,8 @@ const cli = meow(` Options --outputDir=, -o The directory where parsed files will be placed after a run. Defaults to current working directory --dump, -d Dump all Sketch JSON files into 1 logdump.json - --useColorArtboards Use artboards named "primitives/color/" to export colors instead of using the document colors + --useColorArtboards Use artboard formatting to export colors instead of using the document colors + --useGradientArtboards Use artboard formatting to export gradients instead of using the document gradients Examples $ hubble-cli "__mocks/sample_sketchfile.sketch" @@ -29,6 +30,10 @@ const cli = meow(` type: 'boolean', default: false, }, + useGradientArtboards: { + type: 'boolean', + default: false, + }, version: { type: "boolean", alias: 'v', diff --git a/index.js b/index.js index b5b6b8e..4b5c9fc 100644 --- a/index.js +++ b/index.js @@ -2,9 +2,12 @@ const fs = require('fs'); const sketch2json = require('sketch2json'); const pkg = require('./package.json'); -const { getPageArrays, getColorsFromArtboard } = require('./lib/sketch'); +const { + getPageArrays, getColorsFromArtboard, getGradientsFromArtboard, getShadowsFromArtboard, + getBordersFromArtboard +} = require('./lib/sketch'); +const mappers = require('./lib/mappers'); const { prettyJSON } = require('./lib/utils'); -const { mapTextStyles, mapColors } = require('./lib/mappers'); module.exports = (args, flags) => { if (flags.version) return pkg.version; @@ -18,20 +21,25 @@ module.exports = (args, flags) => { try { const response = await sketch2json(data); - let colorLayers; - - const primitivesPage = getPageArrays(response).find(i => i.name === 'primitives'); - if (primitivesPage && flags.useColorArtboards) { - console.log("[hubble-scripts] 💎 Using color artboards instead of document colors") - colorLayers = getColorsFromArtboard(primitivesPage.layers); - } else { - colorLayers = response.document.assets.colors; + + const primitivesPage = getPageArrays(response).find(i => i.name.toLowerCase() === 'primitives'); + if (!primitivesPage) { + throw new Error(`No primitives page found.`) } + const colorLayers = flags.useColorArtboards + ? getColorsFromArtboard(primitivesPage.layers) + : response.document.assets.colors; + const gradientLayers = flags.useGradientArtboards + ? getGradientsFromArtboard(primitivesPage.layers) + : response.document.assets.gradients; const mapping = { - textStyles: mapTextStyles(response.document.layerTextStyles), - colors: mapColors(colorLayers), + textStyles: mappers.mapTextStyles(response.document.layerTextStyles), + colors: mappers.mapColors(colorLayers), + gradients: mappers.mapGradients(gradientLayers), + shadows: mappers.mapShadows(getShadowsFromArtboard(primitivesPage.layers)), + borders: mappers.mapBorders(getBordersFromArtboard(primitivesPage.layers)), fonts: response.meta.fonts, sketchVersion: response.meta.appVersion, }; @@ -40,18 +48,10 @@ module.exports = (args, flags) => { fs.mkdirSync(flags.outputDir); } - await fs.writeFile( - `${flags.outputDir}/hubble-data.json`, - prettyJSON(mapping), - err => err && console.error(err), - ); + await fs.writeFile(`${flags.outputDir}/hubble-data.json`, prettyJSON(mapping)); if (flags.dump) { - await fs.writeFile( - `${flags.outputDir}/logdump.json`, - prettyJSON(response), - err => err && console.error(err), - ); + await fs.writeFile(`${flags.outputDir}/logdump.json`, prettyJSON(response)); } return response; diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..b014104 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + testPathIgnorePatterns: ['/__fixtures__/'] +} diff --git a/lib/__tests__/__snapshots__/mapper.test.js.snap b/lib/__tests__/__snapshots__/mapper.test.js.snap deleted file mode 100644 index 289843d..0000000 --- a/lib/__tests__/__snapshots__/mapper.test.js.snap +++ /dev/null @@ -1,143 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`[mapper.js] test suite -> #formatColor: given RGB NSColor, should transform it to a nicely parsed object 1`] = ` -Object { - "alpha": 1, - "blue": 159, - "green": 6, - "hex": "10069f", - "hsl": Array [ - 244, - 93, - 32, - ], - "name": "ultramarine", - "red": 16, - "rgb": "16, 6, 159", - "rgba": "16, 6, 159, 1", -} -`; - -exports[`[mapper.js] test suite -> #mapColors: given the document colors, should transform all colors nicely 1`] = ` -Array [ - Object { - "alpha": 1, - "blue": 80, - "green": 0, - "hex": "e50050", - "hsl": Array [ - 339, - 100, - 45, - ], - "name": "amaranth", - "red": 229, - "rgb": "229, 0, 80", - "rgba": "229, 0, 80, 1", - }, - Object { - "alpha": 1, - "blue": 78, - "green": 190, - "hex": "2cbe4e", - "hsl": Array [ - 134, - 62, - 46, - ], - "name": "apple", - "red": 44, - "rgb": "44, 190, 78", - "rgba": "44, 190, 78, 1", - }, - Object { - "alpha": 1, - "blue": 0, - "green": 0, - "hex": "000000", - "hsl": Array [ - 0, - 0, - 0, - ], - "name": "black", - "red": 0, - "rgb": "0, 0, 0", - "rgba": "0, 0, 0, 1", - }, -] -`; - -exports[`[mapper.js] test suite -> #mapTextStyles: given the text styles, should transform them nicely 1`] = ` -Array [ - Object { - "borderBottom": null, - "color": Object { - "alpha": 1, - "blue": 159, - "green": 6, - "hex": "10069f", - "hsl": Array [ - 244, - 93, - 32, - ], - "name": "ultramarine", - "red": 16, - "rgb": "16, 6, 159", - "rgba": "16, 6, 159, 1", - }, - "family": "FiraSans-Regular", - "id": "Heading 1", - "kerning": null, - "size": 48, - "weight": null, - }, - Object { - "borderBottom": null, - "color": Object { - "alpha": 1, - "blue": 159, - "green": 6, - "hex": "10069f", - "hsl": Array [ - 244, - 93, - 32, - ], - "name": "ultramarine", - "red": 16, - "rgb": "16, 6, 159", - "rgba": "16, 6, 159, 1", - }, - "family": "FiraSans-Regular", - "id": "Heading 2", - "kerning": null, - "size": 36, - "weight": null, - }, - Object { - "borderBottom": null, - "color": Object { - "alpha": 1, - "blue": 0, - "green": 0, - "hex": "000000", - "hsl": Array [ - 0, - 0, - 0, - ], - "name": "black", - "red": 0, - "rgb": "0, 0, 0", - "rgba": "0, 0, 0, 1", - }, - "family": "FiraSans-Regular", - "id": "Paragraph", - "kerning": null, - "size": 18, - "weight": null, - }, -] -`; diff --git a/lib/__tests__/mapper.test.js b/lib/__tests__/mapper.test.js deleted file mode 100644 index 2f54f73..0000000 --- a/lib/__tests__/mapper.test.js +++ /dev/null @@ -1,29 +0,0 @@ -const { mapColors, mapTextStyles, formatColor } = require('../mappers'); -const sampleOutput = require('../../__mocks__/sample_dump.json'); - -const [ULTRAMARINE, ...COLORS] = sampleOutput.document.assets.colors; -const TEXT_STYLES = sampleOutput.document.layerTextStyles; - -describe('[mapper.js] test suite', () => { - describe('-> #formatColor:', () => { - it('given RGB NSColor, should transform it to a nicely parsed object', () => { - expect(formatColor(ULTRAMARINE)).toMatchSnapshot(); - }); - }); - describe('-> #mapColors:', () => { - it('given the document colors, should transform all colors nicely', () => { - expect(mapColors(COLORS)).toMatchSnapshot(); - }); - }); - describe('-> #mapTextStyles:', () => { - it('given the text styles, should transform them nicely', () => { - const parsed = mapTextStyles(TEXT_STYLES); - expect(parsed).toMatchSnapshot(); - - const [heading1, heading2, paragraph] = parsed; - expect(heading1.id).toBe('Heading 1'); - expect(heading2.id).toBe('Heading 2'); - expect(paragraph.id).toBe('Paragraph'); - }); - }); -}); diff --git a/lib/__tests__/sketch.test.js b/lib/__tests__/sketch.test.js index 3e7cf63..bf85a62 100644 --- a/lib/__tests__/sketch.test.js +++ b/lib/__tests__/sketch.test.js @@ -5,6 +5,7 @@ describe('[sketch.js] test suite', () => { describe('-> #getColorId', () => { const validColorArtboard = { path: 'primitives/color/primaryColor', + pathMixedCasing: 'PrimiTives/colOr/primaryColor', expectedId: 'primaryColor', }; const validColorArtboardWithVariant = { @@ -23,6 +24,12 @@ describe('[sketch.js] test suite', () => { expect(res).toMatchObject({ id: validColorArtboard.expectedId }); }); + it('also gets the id when casing is mixed', () => { + const res = getColorId(validColorArtboard.pathMixedCasing); + expect(res).not.toHaveProperty('variant'); + expect(res).toMatchObject({ id: validColorArtboard.expectedId }); + }); + it('gets the color id from a valid color artboard, with a variant', () => { const res = getColorId(validColorArtboardWithVariant.path); expect(res).toHaveProperty('variant'); @@ -54,10 +61,6 @@ describe('[sketch.js] test suite', () => { const res = getColorsFromArtboard(primitivesPage.layers); expect(res).toBeInstanceOf(Array); expect(Array.isArray(res)).toBe(true); - // res.forEach(color => { - // expect(Object.keys(color)) - // .toEqual(['id', '_class', 'alpha', 'blue', 'green', 'red']) - // }) }); }); }); diff --git a/lib/__tests__/utils.test.js b/lib/__tests__/utils.test.js index f9e611d..d451ed4 100644 --- a/lib/__tests__/utils.test.js +++ b/lib/__tests__/utils.test.js @@ -1,4 +1,4 @@ -const { convertNSColorToRGB } = require('../utils'); +const { convertNSColorToRGB, uniqueArray } = require('../utils'); describe('[utils.js] test suite', () => { describe('-> #convertNSColorToRGB', () => { @@ -9,4 +9,11 @@ describe('[utils.js] test suite', () => { expect(Number.isInteger(convertNSColorToRGB(NSColorChannel))).toBe(true); }); }); + + describe(`-> unique`, () => { + it(`should return an array without duplicate values`, () => { + const arrayWithDupes = [1, 2, 1, `a`, `b`, String(`a`)]; + expect(uniqueArray(arrayWithDupes)).toEqual([1, 2, `a`, `b`]); + }); + }); }); diff --git a/lib/mappers.js b/lib/mappers.js deleted file mode 100644 index 8632e48..0000000 --- a/lib/mappers.js +++ /dev/null @@ -1,45 +0,0 @@ -const colorConvert = require('color-convert'); -const colorNamer = require('color-namer'); -const camelcase = require('camelcase'); - -const { convertNSColorToRGB } = require('./utils'); - -const formatColor = ({ red, green, blue, alpha, _class, id, variant }) => { - const R = convertNSColorToRGB(red); - const G = convertNSColorToRGB(green); - const B = convertNSColorToRGB(blue); - - return { - ...(_class === 'artboardColor'? { id, variant: variant || null } : {}), - name: camelcase(colorNamer(`rgb(${R}, ${G}, ${B})`).ntc[0].name), - red: R, - green: G, - blue: B, - alpha, - rgb: `${R}, ${G}, ${B}`, - rgba: `${R}, ${G}, ${B}, ${alpha}`, - hex: colorConvert.rgb.hex(R, G, B, alpha).toLowerCase(), - hsl: colorConvert.rgb.hsl(R, G, B), - }; -}; - -module.exports = { - formatColor, - - mapColors: colors => colors.map(formatColor), - - mapTextStyles: textStyles => textStyles.objects.map((stl) => { - const attrs = stl.value.textStyle.encodedAttributes; - - return { - id: stl.name, - weight: null, - size: attrs.MSAttributedStringFontAttribute.attributes.size, - family: attrs.MSAttributedStringFontAttribute.attributes.name, - borderBottom: attrs.underlineStyle || null, - color: formatColor(attrs.MSAttributedStringColorAttribute), - kerning: attrs.kerning || null, - }; - }), - -}; diff --git a/lib/mappers/__tests__/__fixtures__/mapper.js b/lib/mappers/__tests__/__fixtures__/mapper.js new file mode 100644 index 0000000..637da40 --- /dev/null +++ b/lib/mappers/__tests__/__fixtures__/mapper.js @@ -0,0 +1,18 @@ +const sampleOutput = require('../../../../__mocks__/sample_dump.json'); +const { + getPageArrays, getGradientsFromArtboard, getColorsFromArtboard, getShadowsFromArtboard, + getBordersFromArtboard, +} = require('../../../sketch'); + +const PRIMITIVES_PAGE = getPageArrays(sampleOutput).find(i => i.name === 'primitives') + +exports.PRIMITIVES_PAGE = PRIMITIVES_PAGE; + +exports.DOCUMENT_COLORS = sampleOutput.document.assets.colors; +exports.DOCUMENT_GRADIENTS = sampleOutput.document.assets.gradients; +exports.TEXT_STYLES = sampleOutput.document.layerTextStyles; + +exports.ARTBOARD_GRADIENTS = getGradientsFromArtboard(PRIMITIVES_PAGE.layers); +exports.ARTBOARD_SHADOWS = getShadowsFromArtboard(PRIMITIVES_PAGE.layers); +exports.ARTBOARD_COLORS = getColorsFromArtboard(PRIMITIVES_PAGE.layers); +exports.ARTBOARD_BORDERS = getBordersFromArtboard(PRIMITIVES_PAGE.layers); diff --git a/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap b/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap new file mode 100644 index 0000000..1cd947a --- /dev/null +++ b/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap @@ -0,0 +1,1392 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[mapper.js] test suite -> #formatColor: given RGB NSColor, should transform it to a nicely parsed object 1`] = ` +Object { + "alpha": 1, + "blue": 159, + "green": 6, + "hex": "10069f", + "hsl": Array [ + 244, + 93, + 32, + ], + "name": "ultramarine", + "red": 16, + "rgb": Array [ + 16, + 6, + 159, + ], + "rgba": Array [ + 16, + 6, + 159, + 1, + ], + "token": "color", +} +`; + +exports[`[mapper.js] test suite -> #mapBorders: given artboard borders, should transform them nicely 1`] = ` +Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 150, + "green": 150, + "hex": "ff9696", + "hsl": Array [ + 0, + 100, + 79, + ], + "name": "geraldine", + "red": 255, + "rgb": Array [ + 255, + 150, + 150, + ], + "rgba": Array [ + 255, + 150, + 150, + 1, + ], + "token": "color", + }, + "id": "inside", + "radius": 3, + "token": "border", + "type": "INSIDE", + "width": 1, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 150, + "green": 150, + "hex": "ff9696", + "hsl": Array [ + 0, + 100, + 79, + ], + "name": "geraldine", + "red": 255, + "rgb": Array [ + 255, + 150, + 150, + ], + "rgba": Array [ + 255, + 150, + 150, + 1, + ], + "token": "color", + }, + "id": "outside", + "radius": 12.5, + "token": "border", + "type": "OUTSIDE", + "width": 1, + }, + Object { + "gradient": Object { + "from": Array [ + 0.5, + 1, + ], + "stops": Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + }, + "position": 0, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 88, + "green": 145, + "hex": "559158", + "hsl": Array [ + 123, + 26, + 45, + ], + "name": "hippieGreen", + "red": 85, + "rgb": Array [ + 85, + 145, + 88, + ], + "rgba": Array [ + 85, + 145, + 88, + 1, + ], + "token": "color", + }, + "position": 0.5038507579143953, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + }, + "position": 1, + }, + ], + "to": Array [ + 0.4999999999999999, + 3.0616169978683836e-17, + ], + "token": "gradient", + "type": "LINEAR", + }, + "id": "gradientWithCorners", + "radius": Array [ + 8, + 12.5, + 12.5, + 12.5, + ], + "token": "border", + "type": "OUTSIDE", + "width": 1, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 150, + "green": 150, + "hex": "ff9696", + "hsl": Array [ + 0, + 100, + 79, + ], + "name": "geraldine", + "red": 255, + "rgb": Array [ + 255, + 150, + 150, + ], + "rgba": Array [ + 255, + 150, + 150, + 1, + ], + "token": "color", + }, + "id": "center", + "radius": 0, + "token": "border", + "type": "CENTER", + "width": 1, + }, +] +`; + +exports[`[mapper.js] test suite -> #mapColors: given artboard colors, should transform all colors nicely 1`] = ` +Array [ + Object { + "alpha": 1, + "blue": 230, + "green": 194, + "hex": "5fc2e6", + "hsl": Array [ + 196, + 73, + 64, + ], + "id": "primary900", + "name": "seagull", + "red": 95, + "rgb": Array [ + 95, + 194, + 230, + ], + "rgba": Array [ + 95, + 194, + 230, + 1, + ], + "token": "color", + "variant": 900, + }, + Object { + "alpha": 1, + "blue": 209, + "green": 193, + "hex": "5ec1d1", + "hsl": Array [ + 188, + 56, + 59, + ], + "id": "primary800", + "name": "viking", + "red": 94, + "rgb": Array [ + 94, + 193, + 209, + ], + "rgba": Array [ + 94, + 193, + 209, + 1, + ], + "token": "color", + "variant": 800, + }, + Object { + "alpha": 1, + "blue": 214, + "green": 200, + "hex": "77c8d6", + "hsl": Array [ + 189, + 54, + 65, + ], + "id": "primary700", + "name": "viking", + "red": 119, + "rgb": Array [ + 119, + 200, + 214, + ], + "rgba": Array [ + 119, + 200, + 214, + 1, + ], + "token": "color", + "variant": 700, + }, + Object { + "alpha": 1, + "blue": 219, + "green": 207, + "hex": "8dcfdb", + "hsl": Array [ + 189, + 52, + 71, + ], + "id": "primary600", + "name": "halfBaked", + "red": 141, + "rgb": Array [ + 141, + 207, + 219, + ], + "rgba": Array [ + 141, + 207, + 219, + 1, + ], + "token": "color", + "variant": 600, + }, + Object { + "alpha": 1, + "blue": 224, + "green": 214, + "hex": "a0d6e0", + "hsl": Array [ + 189, + 51, + 75, + ], + "id": "primary500", + "name": "powderBlue", + "red": 160, + "rgb": Array [ + 160, + 214, + 224, + ], + "rgba": Array [ + 160, + 214, + 224, + 1, + ], + "token": "color", + "variant": 500, + }, + Object { + "alpha": 1, + "blue": 230, + "green": 221, + "hex": "b3dde6", + "hsl": Array [ + 191, + 50, + 80, + ], + "id": "primary400", + "name": "powderBlue", + "red": 179, + "rgb": Array [ + 179, + 221, + 230, + ], + "rgba": Array [ + 179, + 221, + 230, + 1, + ], + "token": "color", + "variant": 400, + }, + Object { + "alpha": 1, + "blue": 240, + "green": 235, + "hex": "d4ebf0", + "hsl": Array [ + 191, + 48, + 89, + ], + "id": "primary300", + "name": "pattensBlue", + "red": 212, + "rgb": Array [ + 212, + 235, + 240, + ], + "rgba": Array [ + 212, + 235, + 240, + 1, + ], + "token": "color", + "variant": 300, + }, + Object { + "alpha": 1, + "blue": 250, + "green": 243, + "hex": "e5f3fa", + "hsl": Array [ + 200, + 68, + 94, + ], + "id": "primary200", + "name": "solitude", + "red": 229, + "rgb": Array [ + 229, + 243, + 250, + ], + "rgba": Array [ + 229, + 243, + 250, + 1, + ], + "token": "color", + "variant": 200, + }, + Object { + "alpha": 1, + "blue": 253, + "green": 249, + "hex": "f2f9fd", + "hsl": Array [ + 202, + 73, + 97, + ], + "id": "primary100", + "name": "aliceBlue", + "red": 242, + "rgb": Array [ + 242, + 249, + 253, + ], + "rgba": Array [ + 242, + 249, + 253, + 1, + ], + "token": "color", + "variant": 100, + }, + Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "id": "secondary900", + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + "variant": 900, + }, + Object { + "alpha": 1, + "blue": 94, + "green": 94, + "hex": "f55e5e", + "hsl": Array [ + 0, + 88, + 66, + ], + "id": "red", + "name": "carnation", + "red": 245, + "rgb": Array [ + 245, + 94, + 94, + ], + "rgba": Array [ + 245, + 94, + 94, + 1, + ], + "token": "color", + "variant": null, + }, + Object { + "alpha": 1, + "blue": 74, + "green": 135, + "hex": "3e874a", + "hsl": Array [ + 130, + 37, + 39, + ], + "id": "secondary800", + "name": "seaGreen", + "red": 62, + "rgb": Array [ + 62, + 135, + 74, + ], + "rgba": Array [ + 62, + 135, + 74, + 1, + ], + "token": "color", + "variant": 800, + }, + Object { + "alpha": 1, + "blue": 88, + "green": 145, + "hex": "559158", + "hsl": Array [ + 123, + 26, + 45, + ], + "id": "secondary700", + "name": "hippieGreen", + "red": 85, + "rgb": Array [ + 85, + 145, + 88, + ], + "rgba": Array [ + 85, + 145, + 88, + 1, + ], + "token": "color", + "variant": 700, + }, + Object { + "alpha": 1, + "blue": 106, + "green": 157, + "hex": "6b9d6a", + "hsl": Array [ + 119, + 21, + 52, + ], + "id": "secondary600", + "name": "aquaForest", + "red": 107, + "rgb": Array [ + 107, + 157, + 106, + ], + "rgba": Array [ + 107, + 157, + 106, + 1, + ], + "token": "color", + "variant": 600, + }, + Object { + "alpha": 1, + "blue": 124, + "green": 169, + "hex": "81a97c", + "hsl": Array [ + 113, + 21, + 57, + ], + "id": "secondary500", + "name": "amulet", + "red": 129, + "rgb": Array [ + 129, + 169, + 124, + ], + "rgba": Array [ + 129, + 169, + 124, + 1, + ], + "token": "color", + "variant": 500, + }, + Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "id": "secondary400", + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + "variant": 400, + }, + Object { + "alpha": 1, + "blue": 186, + "green": 210, + "hex": "c0d2ba", + "hsl": Array [ + 105, + 21, + 78, + ], + "id": "secondary300", + "name": "paleLeaf", + "red": 192, + "rgb": Array [ + 192, + 210, + 186, + ], + "rgba": Array [ + 192, + 210, + 186, + 1, + ], + "token": "color", + "variant": 300, + }, + Object { + "alpha": 1, + "blue": 208, + "green": 224, + "hex": "d4e0d0", + "hsl": Array [ + 105, + 21, + 85, + ], + "id": "secondary200", + "name": "tasman", + "red": 212, + "rgb": Array [ + 212, + 224, + 208, + ], + "rgba": Array [ + 212, + 224, + 208, + 1, + ], + "token": "color", + "variant": 200, + }, + Object { + "alpha": 1, + "blue": 231, + "green": 239, + "hex": "e9efe7", + "hsl": Array [ + 105, + 20, + 92, + ], + "id": "secondary100", + "name": "grayNurse", + "red": 233, + "rgb": Array [ + 233, + 239, + 231, + ], + "rgba": Array [ + 233, + 239, + 231, + 1, + ], + "token": "color", + "variant": 100, + }, +] +`; + +exports[`[mapper.js] test suite -> #mapColors: given the document colors, should transform all colors nicely 1`] = ` +Array [ + Object { + "alpha": 1, + "blue": 159, + "green": 6, + "hex": "10069f", + "hsl": Array [ + 244, + 93, + 32, + ], + "name": "ultramarine", + "red": 16, + "rgb": Array [ + 16, + 6, + 159, + ], + "rgba": Array [ + 16, + 6, + 159, + 1, + ], + "token": "color", + }, + Object { + "alpha": 1, + "blue": 80, + "green": 0, + "hex": "e50050", + "hsl": Array [ + 339, + 100, + 45, + ], + "name": "amaranth", + "red": 229, + "rgb": Array [ + 229, + 0, + 80, + ], + "rgba": Array [ + 229, + 0, + 80, + 1, + ], + "token": "color", + }, + Object { + "alpha": 1, + "blue": 78, + "green": 190, + "hex": "2cbe4e", + "hsl": Array [ + 134, + 62, + 46, + ], + "name": "apple", + "red": 44, + "rgb": Array [ + 44, + 190, + 78, + ], + "rgba": Array [ + 44, + 190, + 78, + 1, + ], + "token": "color", + }, + Object { + "alpha": 1, + "blue": 0, + "green": 0, + "hex": "000000", + "hsl": Array [ + 0, + 0, + 0, + ], + "name": "black", + "red": 0, + "rgb": Array [ + 0, + 0, + 0, + ], + "rgba": Array [ + 0, + 0, + 0, + 1, + ], + "token": "color", + }, +] +`; + +exports[`[mapper.js] test suite -> #mapGradients: given artboard gradients, should transform them nicely 1`] = ` +Array [ + Object { + "from": Array [ + 0.5, + 1, + ], + "id": "linear", + "stops": Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + }, + "position": 0, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 88, + "green": 145, + "hex": "559158", + "hsl": Array [ + 123, + 26, + 45, + ], + "name": "hippieGreen", + "red": 85, + "rgb": Array [ + 85, + 145, + 88, + ], + "rgba": Array [ + 85, + 145, + 88, + 1, + ], + "token": "color", + }, + "position": 0.5038507579143953, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + }, + "position": 1, + }, + ], + "to": Array [ + 0.4999999999999999, + 3.0616169978683836e-17, + ], + "token": "gradient", + "type": "LINEAR", + }, + Object { + "from": Array [ + 0.5, + 1, + ], + "id": "radial", + "stops": Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + }, + "position": 0, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + }, + "position": 1, + }, + ], + "to": Array [ + 0.5, + -0.27263153394819584, + ], + "token": "gradient", + "type": "RADIAL", + }, + Object { + "from": Array [ + 0.5, + 1, + ], + "id": "angular", + "stops": Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + }, + "position": 0.4336458341191861, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + }, + "position": 1, + }, + ], + "to": Array [ + 0.5, + -0.27263153394819584, + ], + "token": "gradient", + "type": "ANGULAR", + }, +] +`; + +exports[`[mapper.js] test suite -> #mapGradients: given docuement gradients, should transform them nicely 1`] = ` +Array [ + Object { + "from": Array [ + 0.5, + 1, + ], + "stops": Array [ + Object { + "color": Object { + "alpha": 1, + "blue": 144, + "green": 182, + "hex": "97b690", + "hsl": Array [ + 109, + 21, + 64, + ], + "name": "norway", + "red": 151, + "rgb": Array [ + 151, + 182, + 144, + ], + "rgba": Array [ + 151, + 182, + 144, + 1, + ], + "token": "color", + }, + "position": 0, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 88, + "green": 145, + "hex": "559158", + "hsl": Array [ + 123, + 26, + 45, + ], + "name": "hippieGreen", + "red": 85, + "rgb": Array [ + 85, + 145, + 88, + ], + "rgba": Array [ + 85, + 145, + 88, + 1, + ], + "token": "color", + }, + "position": 0.5038507579143953, + }, + Object { + "color": Object { + "alpha": 1, + "blue": 62, + "green": 125, + "hex": "227d3e", + "hsl": Array [ + 138, + 57, + 31, + ], + "name": "salem", + "red": 34, + "rgb": Array [ + 34, + 125, + 62, + ], + "rgba": Array [ + 34, + 125, + 62, + 1, + ], + "token": "color", + }, + "position": 1, + }, + ], + "to": Array [ + 0.4999999999999999, + 3.0616169978683836e-17, + ], + "token": "gradient", + "type": "LINEAR", + }, +] +`; + +exports[`[mapper.js] test suite -> #mapShadows: given artboard gradients, should transform them nicely 1`] = ` +Array [ + Object { + "blur": 3, + "color": Object { + "alpha": 0.5, + "blue": 0, + "green": 0, + "hex": "000000", + "hsl": Array [ + 0, + 0, + 0, + ], + "name": "black", + "red": 0, + "rgb": Array [ + 0, + 0, + 0, + ], + "rgba": Array [ + 0, + 0, + 0, + 0.5, + ], + "token": "color", + }, + "id": "simple", + "spread": 0, + "token": "shadow", + "type": "inner-shadow", + "x": 0, + "y": 1, + }, + Object { + "blur": 4, + "color": Object { + "alpha": 0.5, + "blue": 0, + "green": 0, + "hex": "000000", + "hsl": Array [ + 0, + 0, + 0, + ], + "name": "black", + "red": 0, + "rgb": Array [ + 0, + 0, + 0, + ], + "rgba": Array [ + 0, + 0, + 0, + 0.5, + ], + "token": "color", + }, + "id": "simple", + "spread": 0, + "token": "shadow", + "type": "drop-shadow", + "x": 0, + "y": 2, + }, +] +`; + +exports[`[mapper.js] test suite -> #mapTextStyles: given the text styles, should transform them nicely 1`] = ` +Array [ + Object { + "borderBottom": null, + "color": Object { + "alpha": 1, + "blue": 159, + "green": 6, + "hex": "10069f", + "hsl": Array [ + 244, + 93, + 32, + ], + "name": "ultramarine", + "red": 16, + "rgb": Array [ + 16, + 6, + 159, + ], + "rgba": Array [ + 16, + 6, + 159, + 1, + ], + "token": "color", + }, + "family": "FiraSans-Regular", + "id": "heading1", + "kerning": null, + "size": 48, + "token": "text-style", + "weight": null, + }, + Object { + "borderBottom": null, + "color": Object { + "alpha": 1, + "blue": 159, + "green": 6, + "hex": "10069f", + "hsl": Array [ + 244, + 93, + 32, + ], + "name": "ultramarine", + "red": 16, + "rgb": Array [ + 16, + 6, + 159, + ], + "rgba": Array [ + 16, + 6, + 159, + 1, + ], + "token": "color", + }, + "family": "FiraSans-Regular", + "id": "heading2", + "kerning": null, + "size": 36, + "token": "text-style", + "weight": null, + }, + Object { + "borderBottom": null, + "color": Object { + "alpha": 1, + "blue": 0, + "green": 0, + "hex": "000000", + "hsl": Array [ + 0, + 0, + 0, + ], + "name": "black", + "red": 0, + "rgb": Array [ + 0, + 0, + 0, + ], + "rgba": Array [ + 0, + 0, + 0, + 1, + ], + "token": "color", + }, + "family": "FiraSans-Regular", + "id": "paragraph", + "kerning": null, + "size": 18, + "token": "text-style", + "weight": null, + }, +] +`; diff --git a/lib/mappers/__tests__/mapper.test.js b/lib/mappers/__tests__/mapper.test.js new file mode 100644 index 0000000..e85bdfd --- /dev/null +++ b/lib/mappers/__tests__/mapper.test.js @@ -0,0 +1,59 @@ +const FIXTURES = require('./__fixtures__/mapper'); + +const mapper = require('..'); +const formatColor = require('../color'); + +describe('[mapper.js] test suite', () => { + describe('-> #formatColor:', () => { + it('given RGB NSColor, should transform it to a nicely parsed object', () => { + const [ULTRAMARINE] = FIXTURES.DOCUMENT_COLORS; + expect(formatColor(ULTRAMARINE)).toMatchSnapshot(); + }); + }); + + describe('-> #mapColors:', () => { + it('given the document colors, should transform all colors nicely', () => { + expect(mapper.mapColors(FIXTURES.DOCUMENT_COLORS)).toMatchSnapshot(); + }); + + it('given artboard colors, should transform all colors nicely', () => { + expect(mapper.mapColors(FIXTURES.ARTBOARD_COLORS)).toMatchSnapshot(); + }); + }); + + describe('-> #mapTextStyles:', () => { + it('given the text styles, should transform them nicely', () => { + const parsed = mapper.mapTextStyles(FIXTURES.TEXT_STYLES); + expect(parsed).toMatchSnapshot(); + + const [heading1, heading2, paragraph] = parsed; + expect(heading1.id).toBe('heading1'); + expect(heading2.id).toBe('heading2'); + expect(paragraph.id).toBe('paragraph'); + }); + }); + + describe('-> #mapGradients:', () => { + it('given artboard gradients, should transform them nicely', () => { + expect(mapper.mapGradients(FIXTURES.ARTBOARD_GRADIENTS)).toMatchSnapshot(); + }); + + it('given docuement gradients, should transform them nicely', () => { + expect(mapper.mapGradients(FIXTURES.DOCUMENT_GRADIENTS)).toMatchSnapshot(); + }); + }); + + describe('-> #mapShadows:', () => { + it('given artboard gradients, should transform them nicely', () => { + const parsed = mapper.mapShadows(FIXTURES.ARTBOARD_SHADOWS); + expect(parsed).toMatchSnapshot(); + }); + }); + + describe('-> #mapBorders:', () => { + it('given artboard borders, should transform them nicely', () => { + const parsed = mapper.mapBorders(FIXTURES.ARTBOARD_BORDERS); + expect(parsed).toMatchSnapshot(); + }); + }); +}); diff --git a/lib/mappers/border.js b/lib/mappers/border.js new file mode 100644 index 0000000..bc37f77 --- /dev/null +++ b/lib/mappers/border.js @@ -0,0 +1,27 @@ +const camelcase = require('camelcase'); + +const formatColor = require('./color'); +const mapGradient = require('./gradient'); +const { uniqueArray, tokenize } = require('../utils'); + +const BORDER_TYPES = ['CENTER', 'INSIDE', 'OUTSIDE'] + +const borderRadius = (border) => { + const corners = border.points.map(corner => corner.cornerRadius); + const hasDiffCorners = uniqueArray(corners).length > 1; + + return hasDiffCorners ? corners : border.fixedRadius; +} + +module.exports = (border) => ( + { + id: camelcase(border.id), + token: tokenize('border'), + ...(border.fillType === 0 + ? { color: formatColor(border.color) } + : { gradient: mapGradient(border.gradient) } + ), + width: border.thickness, + type: BORDER_TYPES[border.position], + radius: borderRadius(border), +}) diff --git a/lib/mappers/color.js b/lib/mappers/color.js new file mode 100644 index 0000000..c8b2d87 --- /dev/null +++ b/lib/mappers/color.js @@ -0,0 +1,25 @@ +const colorConvert = require('color-convert'); +const colorNamer = require('color-namer'); +const camelcase = require('camelcase'); + +const { convertNSColorToRGB, tokenize } = require('../utils'); + +module.exports = ({ red, green, blue, alpha, _class, id, variant }) => { + const R = convertNSColorToRGB(red); + const G = convertNSColorToRGB(green); + const B = convertNSColorToRGB(blue); + + return { + token: tokenize('color'), + ...(_class === 'artboardColor' ? { id: camelcase(id), variant: variant || null } : {}), + name: camelcase(colorNamer(`rgb(${R}, ${G}, ${B})`).ntc[0].name), + red: R, + green: G, + blue: B, + alpha, + rgb: [R, G, B], + rgba: [R, G, B, alpha], + hex: colorConvert.rgb.hex(R, G, B, alpha).toLowerCase(), + hsl: colorConvert.rgb.hsl(R, G, B), + }; +}; diff --git a/lib/mappers/gradient.js b/lib/mappers/gradient.js new file mode 100644 index 0000000..4dda23b --- /dev/null +++ b/lib/mappers/gradient.js @@ -0,0 +1,24 @@ +/* eslint-disable no-underscore-dangle */ +const camelcase = require('camelcase'); + +const formatColor = require('./color'); +const { tokenize } = require('../utils'); + +const GRADIENT_TYPES = ['LINEAR', 'RADIAL', 'ANGULAR'] + +const formatCoordinates = (coords) => { + const coordinates = coords.match(/[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?/g); + return coordinates ? coordinates.map(parseFloat) : []; +} + +module.exports = (gradient) => ({ + ...(gradient._class === 'artboardGradient' ? { id: camelcase(gradient.id) || null } : {}), + token: tokenize('gradient'), + type: GRADIENT_TYPES[gradient.gradientType], + from: formatCoordinates(gradient.from), + to: formatCoordinates(gradient.to), + stops: gradient.stops.map(g => ({ + position: g.position, + color: formatColor(g.color), + })), +}); diff --git a/lib/mappers/index.js b/lib/mappers/index.js new file mode 100644 index 0000000..81540f6 --- /dev/null +++ b/lib/mappers/index.js @@ -0,0 +1,13 @@ +const mapTextStyle = require('./textstyle'); +const mapColor = require('./color'); +const mapGradient = require('./gradient'); +const mapShadow = require('./shadow'); +const mapBorder = require('./border'); + +module.exports = { + mapColors: colors => colors.map(mapColor), + mapTextStyles: textStyles => textStyles.objects.map(mapTextStyle), + mapGradients: gradients => gradients.map(mapGradient), + mapShadows: shadows => shadows.map(mapShadow), + mapBorders: borders => borders.map(mapBorder), +}; diff --git a/lib/mappers/shadow.js b/lib/mappers/shadow.js new file mode 100644 index 0000000..22d7f84 --- /dev/null +++ b/lib/mappers/shadow.js @@ -0,0 +1,15 @@ +const camelcase = require('camelcase'); + +const formatColor = require('./color'); +const { tokenize } = require('../utils'); + +module.exports = (shadow) => ({ + id: camelcase(shadow.id), + token: tokenize('shadow'), + blur: shadow.blurRadius, + x: shadow.offsetX, + y: shadow.offsetY, + spread: shadow.spread, + type: shadow.type, + color: formatColor(shadow.color), +}) diff --git a/lib/mappers/textstyle.js b/lib/mappers/textstyle.js new file mode 100644 index 0000000..a5ed33e --- /dev/null +++ b/lib/mappers/textstyle.js @@ -0,0 +1,19 @@ +const camelcase = require('camelcase'); + +const formatColor = require('./color'); +const { tokenize } = require('../utils'); + +module.exports = style => { + const attrs = style.value.textStyle.encodedAttributes; + + return { + token: tokenize('textStyle'), + id: camelcase(style.name), + weight: null, + size: attrs.MSAttributedStringFontAttribute.attributes.size, + family: attrs.MSAttributedStringFontAttribute.attributes.name, + borderBottom: attrs.underlineStyle || null, + color: formatColor(attrs.MSAttributedStringColorAttribute), + kerning: attrs.kerning || null, + }; +} diff --git a/lib/sketch.js b/lib/sketch.js index 6f20280..8bbafc2 100644 --- a/lib/sketch.js +++ b/lib/sketch.js @@ -6,7 +6,7 @@ * @return {string} */ const getColorId = (artboardName) => { - if (!artboardName.startsWith('primitives/color/')) { + if (!artboardName.toLowerCase().startsWith('primitives/color/')) { throw new Error(` Tried to find color id for ${artboardName} but it was not the correct format. When using color artboards, the artboard name needs to be of format: primitives/color/ @@ -16,7 +16,7 @@ const getColorId = (artboardName) => { `); } - const id = artboardName.replace('primitives/color/', ''); + const id = artboardName.replace(/primitives\/color\//ig, ''); const hasVariant = RegExp(/[0-9]+$/).test(id); return { @@ -43,7 +43,7 @@ exports.getPageArrays = (response) => Object.values(response.pages) * @param {Array} layers layers from sketch2json output */ exports.getColorsFromArtboard = (layers) => layers - .filter(layer => layer.name.startsWith('primitives/color/')) + .filter(layer => layer.name.toLowerCase().startsWith('primitives/color/')) .map(layer => { const [colorArtboard] = layer.layers.map(color => { const [colorLayer] = color.style.fills.filter(fill => fill.hasOwnProperty('color')); @@ -56,3 +56,65 @@ exports.getColorsFromArtboard = (layers) => layers _class: 'artboardColor', }; }); + +/** + * Get a gradient from artboards named 'primitives/gradient/' + * @param {Array} layers layers from sketch2json output + */ +exports.getGradientsFromArtboard = (layers) => layers + .filter(layer => layer.name.toLowerCase().startsWith('primitives/gradient/')) + .map(layer => { + const [gradientArtboard] = layer.layers.map(gradient => { + const [gradientLayer] = gradient.style.fills.filter(fill => fill.hasOwnProperty('gradient')); + return gradientLayer; + }); + + return { + ...gradientArtboard.gradient, + id: layer.name.replace(/primitives\/gradient\//ig, ''), + _class: 'artboardGradient', + }; + }); + +const getShadowType = (layers, type) => layers +.filter(layer => layer.name.toLowerCase().startsWith(`primitives/${type}/`)) +.map(layer => { + const [shadowArtboard] = layer.layers.map(shadow => { + const [shadowLayer] = type === 'drop-shadow' + ? shadow.style.shadows + : shadow.style.innerShadows; + return shadowLayer; + }); + + return { + ...shadowArtboard, + id: type === 'drop-shadow' + ? layer.name.replace(/primitives\/drop-shadow\//ig, '') + : layer.name.replace(/primitives\/inner-shadow\//ig, ''), + _class: 'artboardShadow', + type, + }; +}); + +exports.getShadowsFromArtboard = (layers) => { + const inners = getShadowType(layers, 'inner-shadow'); + const drops = getShadowType(layers, 'drop-shadow'); + return [...inners, ...drops]; +} + +exports.getBordersFromArtboard = (layers) => layers +.filter(layer => layer.name.toLowerCase().startsWith('primitives/border/')) +.map(layer => { + const [borderArtboard] = layer.layers.map(border => { + const [borderLayer] = border.style.borders; + return { + id: layer.name.replace(/primitives\/border\//ig, ''), + _class: 'artboardBorder', + fixedRadius: border.fixedRadius, + points: border.points, + ...borderLayer, + } + }); + + return borderArtboard; +}); diff --git a/lib/utils.js b/lib/utils.js index d838f0a..b5e6812 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,7 +1,24 @@ module.exports = { + /** + * Format JSON to human readable output + */ prettyJSON: json => JSON.stringify(json, null, 2), + /** + * Convert an iOS/macOS NSCOlor to an RGB value (0-255) + */ convertNSColorToRGB: color => Number((color * 255).toFixed()), + /** + * Get only the unique results in an Array (shallow) + */ + uniqueArray: arr => [...new Set(arr)], + + /** + * Formats design tokens to standardised Hubble token names. + * These tokens are kebab-cased + */ + tokenize: token => token.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(), + }; diff --git a/package-lock.json b/package-lock.json index 8e07961..f1dae27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hubble-scripts", - "version": "2.0.0", + "version": "3.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1043ae6..3d88c4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hubble-scripts", - "version": "2.0.0", + "version": "3.0.0", "engines": { "node": ">=8.0" }, @@ -10,12 +10,14 @@ }, "scripts": { "start": "node cli.js", + "start:document": "npm start -- --dump", + "start:artboards": "npm start -- --dump --useColorArtboards --useGradientArtboards", "clean": "rm hubble-data.json && rm -rf sketchtool-export node_modules && npm install", "export": "./sketchtool.sh", "lint": "itp-react-scripts lint", "lint:fix": "npm run lint -- --fix", "lint:shell": "which shellcheck > /dev/null && shellcheck *.sh", - "generate:mocks": "npm start ./__mocks__/sample_sketchfile.sketch -- --dump --useColorArtboards && mv hubble-data.json ./__mocks__/sample_output.json && mv logdump.json ./__mocks__/sample_dump.json", + "generate:mocks": "npm run start:artboards ./__mocks__/sample_sketchfile.sketch && mv hubble-data.json ./__mocks__/sample_output.json && mv logdump.json ./__mocks__/sample_dump.json", "test": "jest", "test:watch": "jest --watch", "test:update": "npm run test -- --updateSnapshot",