diff --git a/packages/sketch/src/commands/icons/shared.js b/packages/sketch/src/commands/icons/shared.js index b71951b9a855..0f1e5473bdad 100644 --- a/packages/sketch/src/commands/icons/shared.js +++ b/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} params.symbols * @param {Page} params.symbolsPage - the symbols page as identified by Sketch * @param {Array} 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) { diff --git a/packages/sketch/src/commands/icons/sync.js b/packages/sketch/src/commands/icons/sync.js index ea3d9c43e58d..3f4f08b9e007 100644 --- a/packages/sketch/src/commands/icons/sync.js +++ b/packages/sketch/src/commands/icons/sync.js @@ -10,6 +10,11 @@ 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(); @@ -17,6 +22,7 @@ export function syncSmallIcons() { 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],