fix(sketch): fetch default icon layer styles from IDL Sketch library

packages/sketch/src/commands/icons/shared.js

@@ -7,8 +7,8 @@
 
 /* global MSSVGImporter, NSString, NSUTF8StringEncoding */
 
-import { Artboard, Rectangle, Shape } from 'sketch/dom';
-import { syncColorStyles } from '../../sharedStyles/colors';
+import sketch from 'sketch';
+import { Artboard, Library, Rectangle, Shape } from 'sketch/dom';
 import { groupByKey } from '../../tools/grouping';
 import { syncSymbol } from '../../tools/symbols';
 
@@ -57,23 +57,66 @@ function removeDeprecatedSymbolArtboards({ icons, sizes, symbolsPage }) {
   });
 }
 
+/**
+ * Fetch the IDL Sketch Library if it is installed
+ * @param {object} params - fetchIDLSketchLibrary parameters
+ * @param {object} params.IDL_SKETCH_LIBRARY_METADATA - IDL Sketch file metadata
+ * @returns {Library}
+ */
+function fetchIDLSketchLibrary({ IDL_SKETCH_LIBRARY_METADATA }) {
+  const {
+    id: idlSketchLibraryId,
+    name: idlSketchLibraryName,
+  } = IDL_SKETCH_LIBRARY_METADATA;
+
+  const installedLibraries = Library.getLibraries().filter(
+    ({ id, name }) => id === idlSketchLibraryId && name === idlSketchLibraryName
+  );
+
+  if (!installedLibraries.length) {
+    sketch.UI.message(
+      'Please install the IDL V2 Sketch library before trying again'
+    );
+    throw new Error(
+      'Please install the IDL V2 Sketch library before trying again'
+    );
+  }
+
+  return installedLibraries[0];
+}
+
 /**
  * Sync Carbon icon symbols into current Sketch Document
  * @param {object} params - syncIconSymbols parameters
  * @param {Document} params.document - current document
+ * @param {object} params.IDL_SKETCH_LIBRARY_METADATA - IDL Sketch file metadata
  * @param {Array<SymbolMaster>} params.symbols
  * @param {Page} params.symbolsPage - the symbols page as identified by Sketch
  * @param {Array<number>} params.sizes - array of icon sizes
  */
 export function syncIconSymbols({
   document,
+  IDL_SKETCH_LIBRARY_METADATA,
   symbols,
   symbolsPage,
   sizes = [32, 24, 20, 16],
 }) {
-  const sharedStyles = syncColorStyles({ document });
-  const [sharedStyle] = sharedStyles.filter(
-    ({ name }) => name === 'color / black'
+  const idlSketchLibrary = fetchIDLSketchLibrary({
+    IDL_SKETCH_LIBRARY_METADATA,
+  });
+
+  // import shared color styles from IDL Sketch library
+  idlSketchLibrary
+    .getImportableLayerStyleReferencesForDocument(document)
+    .forEach((layerStyle) => {
+      if (layerStyle.name.startsWith('color')) {
+        layerStyle.import();
+      }
+    });
+
+  // set default icon color shared style
+  const sharedStyle = [...document.sharedLayerStyles].find((sharedLayerStyle) =>
+    sharedLayerStyle?.name.endsWith('black')
   );
 
   if (!sharedStyle) {

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

@@ -10,13 +10,19 @@ import { command } from '../command';
 import { syncIconSymbols } from './shared';
 import { findOrCreateSymbolPage } from '../../tools/page';
 
+const IDL_SKETCH_LIBRARY_METADATA = {
+  id: '9E0A7EC6-C3F3-4DE6-BA36-3F90C4853BA5',
+  name: 'IBM Design Language v2',
+};
+
 export function syncSmallIcons() {
   command('commands/icons/syncSmallIcons', () => {
     const document = Document.getSelectedDocument();
     const symbolsPage = findOrCreateSymbolPage(document);
     const symbols = document.getSymbols();
     syncIconSymbols({
       document,
+      IDL_SKETCH_LIBRARY_METADATA,
       symbols: Array.from(symbols),
       symbolsPage,
       sizes: [16, 20],
@@ -31,6 +37,7 @@ export function syncLargeIcons() {
     const symbols = document.getSymbols();
     syncIconSymbols({
       document,
+      IDL_SKETCH_LIBRARY_METADATA,
       symbols: Array.from(symbols),
       symbolsPage,
       sizes: [24, 32],