diff --git a/packages/sketch/src/commands/colors/index.js b/packages/sketch/src/commands/colors/index.js index 25314275a4ef..d8f4afaac21c 100644 --- a/packages/sketch/src/commands/colors/index.js +++ b/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'; diff --git a/packages/sketch/src/commands/colors/sync.js b/packages/sketch/src/commands/colors/sync.js index 0c88c6f46721..7f0d8d529969 100644 --- a/packages/sketch/src/commands/colors/sync.js +++ b/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() }); }); } diff --git a/packages/sketch/src/commands/index.js b/packages/sketch/src/commands/index.js index ddf03a22a1fd..9bda59b2de56 100644 --- a/packages/sketch/src/commands/index.js +++ b/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'; diff --git a/packages/sketch/src/commands/test/sync-shared-styles.js b/packages/sketch/src/commands/test/sync-shared-styles.js index 8c0f115060ff..29ee8c928e6d 100644 --- a/packages/sketch/src/commands/test/sync-shared-styles.js +++ b/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'); diff --git a/packages/sketch/src/manifest.json b/packages/sketch/src/manifest.json index c4b722fdaef3..4ac61617eff1 100644 --- a/packages/sketch/src/manifest.json +++ b/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" ] }, diff --git a/packages/sketch/src/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index 3e0d2535d101..5e674f4fa920 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/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} + * @param {string} params.formatFor - one of 'colorVariable' or + * 'sharedLayerStyle' + * @returns {Array} */ -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} + */ +export function syncColorStyles({ document }) { + return syncColors({ document, formatFor: 'sharedLayerStyle' }); } /** @@ -84,30 +100,5 @@ export function syncColorStyles({ document }) { * @returns {Array} */ 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' }); } diff --git a/packages/sketch/src/sharedStyles/themes.js b/packages/sketch/src/sharedStyles/themes.js index 909080254937..53d5d59d29a1 100644 --- a/packages/sketch/src/sharedStyles/themes.js +++ b/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], }); }); }); diff --git a/packages/sketch/src/tools/colorVariables.js b/packages/sketch/src/tools/colorVariables.js index 584ab55e919c..21156e6e2a96 100644 --- a/packages/sketch/src/tools/colorVariables.js +++ b/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} */ 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; } diff --git a/packages/sketch/src/tools/sharedStyles.js b/packages/sketch/src/tools/sharedStyles.js index 6f0d92f84273..048502d6b454 100644 --- a/packages/sketch/src/tools/sharedStyles.js +++ b/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, }, ],