fix(sketch): hide shared color styles sync command

packages/sketch/src/commands/colors/index.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { sync, syncColorVars } from './sync';
+export { syncColorVars } from './sync';
 export { generate } from './generate';

packages/sketch/src/commands/colors/sync.js

@@ -7,16 +7,10 @@
 
 import { Document } from 'sketch/dom';
 import { command } from '../command';
-import { syncColorStyles, syncColorVariables } from '../../sharedStyles/colors';
-
-export function sync() {
-  command('commands/colors/sync', () => {
-    syncColorStyles({ document: Document.getSelectedDocument() });
-  });
-}
+import { syncColorVariables } from '../../sharedStyles/colors';
 
 export function syncColorVars() {
-  command('commands/colors/syncvars', () => {
+  command('commands/colors/syncColorVars', () => {
     syncColorVariables({ document: Document.getSelectedDocument() });
   });
 }

packages/sketch/src/commands/index.js

@@ -12,11 +12,7 @@ import 'regenerator-runtime/runtime';
 // triggered by having separate entrypoints. Most notably we would encounter
 // parse errors because the bundlers were being generated incorrectly during
 // incremental rebuilds.
-export {
-  sync as syncColors,
-  syncColorVars,
-  generate as generateColors,
-} from './colors';
+export { syncColorVars, generate as generateColors } from './colors';
 export { generate as generateIcons } from './icons';
 export { syncSmallIcons, syncLargeIcons } from './icons';
 export { sync as syncThemes, generate as generateThemes } from './themes';

packages/sketch/src/commands/test/sync-shared-styles.js

@@ -45,14 +45,14 @@ export function testSyncSharedStyles() {
     const sharedStyle = syncColorStyle({
       document,
       name: 'black',
-      value: '#000000',
+      color: '#000000',
     });
 
     if (document.sharedLayerStyles.length !== 1) {
       throw new Error('Expected sync command to generate a shared layer style');
     }
 
-    syncColorStyle({ document, name: 'black', value: '#000000' });
+    syncColorStyle({ document, name: 'black', color: '#000000' });
 
     if (document.sharedLayerStyles.length !== 1) {
       throw new Error(
@@ -122,7 +122,7 @@ export function testSyncSharedStyles() {
       throw new Error('The layer is not in sync with the shared style');
     }
 
-    syncColorStyle({ document, name: 'black', value: '#dedede' });
+    syncColorStyle({ document, name: 'black', color: '#dedede' });
 
     if (getLayerFillColor() !== '#dededeff') {
       throw new Error('The layer did not update to the new shared style');

packages/sketch/src/manifest.json

@@ -4,15 +4,9 @@
   "bundleVersion": 1,
   "name": "Carbon Elements 🎨",
   "commands": [
-    {
-      "name": "Sync shared layer styles",
-      "identifier": "carbon.elements.colors.sync",
-      "script": "commands/index.js",
-      "handler": "syncColors"
-    },
     {
       "name": "Sync color variables",
-      "identifier": "carbon.elements.colors.syncvars",
+      "identifier": "carbon.elements.colors.syncColorVars",
       "script": "commands/index.js",
       "handler": "syncColorVars"
     },
@@ -82,8 +76,7 @@
       {
         "title": "Colors",
         "items": [
-          "carbon.elements.colors.sync",
-          "carbon.elements.colors.syncvars",
+          "carbon.elements.colors.syncColorVars",
           "carbon.elements.colors.generate"
         ]
       },

packages/sketch/src/sharedStyles/colors.js

@@ -43,38 +43,54 @@ function formatColorName({ name, grade, formatFor }) {
 }
 
 /**
- * Sync color shared styles to the given document and return the result
- * @param {object} params - syncColorStyles parameters
+ * Sync color shared styles OR color variables to the given document and return
+ * the result
+ * @param {object} params - syncColors parameters
  * @param {Document} params.document
- * @returns {Array<SharedStyle>}
+ * @param {string} params.formatFor - one of 'colorVariable' or
+ * 'sharedLayerStyle'
+ * @returns {Array<SharedStyle|Swatch>}
  */
-export function syncColorStyles({ document }) {
-  const sharedStyles = Object.keys(swatches).flatMap((swatchName) => {
-    const name = formatTokenName(swatchName);
-    const result = Object.keys(swatches[swatchName]).map((grade) => {
-      return syncColorStyle({
-        document,
-        name: formatColorName({ name, grade, formatFor: 'sharedLayerStyle' }),
-        value: swatches[swatchName][grade],
-      });
-    });
-    return result;
-  });
+export function syncColors({ document, formatFor }) {
+  // determine sync function based on `formatFor`
+  const syncColorModel = {
+    sharedLayerStyle: syncColorStyle,
+    colorVariable: syncColorVariable,
+  }[formatFor];
+
+  const colorModels = Object.entries(swatches).flatMap(
+    ([swatchName, gradesObj]) =>
+      Object.entries(gradesObj).map(([grade, color]) => {
+        const tokenName = formatTokenName(swatchName);
+        const name = formatColorName({ name: tokenName, grade, formatFor });
+        return syncColorModel({ document, name, color });
+      })
+  );
 
   const singleColors = [
     ['black', black['100']],
     ['white', white['0']],
     ['orange', orange['40']],
     ['yellow', yellow['30']],
-  ].map(([name, value]) => {
-    return syncColorStyle({
+  ].map(([name, color]) =>
+    syncColorModel({
       document,
-      name: formatColorName({ name, formatFor: 'sharedLayerStyle' }),
-      value,
-    });
-  });
+      name: formatColorName({ name, formatFor }),
+      color,
+    })
+  );
 
-  return sharedStyles.concat(singleColors);
+  return colorModels.concat(singleColors);
+}
+
+/**
+ * Sync color shared styles to the given document and return the result
+ * @param {object} params - syncColorStyles parameters
+ * @param {Document} params.document
+ * @returns {Array<SharedStyle>}
+ */
+export function syncColorStyles({ document }) {
+  return syncColors({ document, formatFor: 'sharedLayerStyle' });
 }
 
 /**
@@ -84,30 +100,5 @@ export function syncColorStyles({ document }) {
  * @returns {Array<Swatch>}
  */
 export function syncColorVariables({ document }) {
-  const colorVariables = Object.keys(swatches).flatMap((swatchName) => {
-    const name = formatTokenName(swatchName);
-    const result = Object.keys(swatches[swatchName]).map((grade) => {
-      return syncColorVariable({
-        document,
-        name: formatColorName({ name, grade, formatFor: 'colorVariable' }),
-        color: swatches[swatchName][grade],
-      });
-    });
-    return result;
-  });
-
-  const singleColors = [
-    ['black', black['100']],
-    ['white', white['0']],
-    ['orange', orange['40']],
-    ['yellow', yellow['30']],
-  ].map(([name, color]) => {
-    return syncColorVariable({
-      document,
-      name: formatColorName({ name, formatFor: 'colorVariable' }),
-      color,
-    });
-  });
-
-  return colorVariables.concat(singleColors);
+  return syncColors({ document, formatFor: 'colorVariable' });
 }

packages/sketch/src/sharedStyles/themes.js

@@ -46,7 +46,7 @@ export function syncThemeColorStyles(document) {
         return syncColorStyle({
           document,
           name,
-          value: themes[theme][token],
+          color: themes[theme][token],
         });
       });
   });

packages/sketch/src/tools/colorVariables.js

@@ -15,7 +15,7 @@ import { Swatch } from 'sketch/dom';
  * @param {Document} params.document
  * @param {string} params.name - color name
  * @param {string} params.color - color hex
- * @returns {void}
+ * @returns {Array<Swatch>}
  */
 export function syncColorVariable({ document, name, color }) {
   // check existing color variables
@@ -64,4 +64,6 @@ export function syncColorVariable({ document, name, color }) {
       .sharedSwatches();
     swatchContainer.updateReferencesToSwatch(colorVariable.sketchObject);
   }
+
+  return document.swatches;
 }

packages/sketch/src/tools/sharedStyles.js

@@ -81,17 +81,17 @@ export function syncSharedStyle({
  * @param {object} params - syncColorStyle parameters
  * @param {Document} params.document
  * @param {string} params.name
- * @param {string} params.value
+ * @param {string} params.color
  * @returns {SharedStyle}
  */
-export function syncColorStyle({ document, name, value }) {
+export function syncColorStyle({ document, name, color }) {
   return syncSharedStyle({
     document,
     name,
     style: {
       fills: [
         {
-          color: value,
+          color,
           fillType: Style.FillType.Color,
         },
       ],