From 0c1bce0ca03cc85433554c9370f06e84c07ba397 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 26 May 2021 11:12:45 -0500 Subject: [PATCH 1/5] refactor(sketch): rename `syncColorStyle` param --- packages/sketch/src/commands/test/sync-shared-styles.js | 6 +++--- packages/sketch/src/sharedStyles/colors.js | 6 +++--- packages/sketch/src/sharedStyles/themes.js | 2 +- packages/sketch/src/tools/sharedStyles.js | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) 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/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index 3e0d2535d101..e87528ed2022 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/packages/sketch/src/sharedStyles/colors.js @@ -55,7 +55,7 @@ export function syncColorStyles({ document }) { return syncColorStyle({ document, name: formatColorName({ name, grade, formatFor: 'sharedLayerStyle' }), - value: swatches[swatchName][grade], + color: swatches[swatchName][grade], }); }); return result; @@ -66,11 +66,11 @@ export function syncColorStyles({ document }) { ['white', white['0']], ['orange', orange['40']], ['yellow', yellow['30']], - ].map(([name, value]) => { + ].map(([name, color]) => { return syncColorStyle({ document, name: formatColorName({ name, formatFor: 'sharedLayerStyle' }), - value, + color, }); }); 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/sharedStyles.js b/packages/sketch/src/tools/sharedStyles.js index 6f0d92f84273..55b6d0d32adc 100644 --- a/packages/sketch/src/tools/sharedStyles.js +++ b/packages/sketch/src/tools/sharedStyles.js @@ -84,14 +84,14 @@ export function syncSharedStyle({ * @param {string} params.value * @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, }, ], From 7cc3864ff0e26c70ac6d5e8957199d620a1412bf Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 26 May 2021 13:02:27 -0500 Subject: [PATCH 2/5] refactor(colorVariables): return document.swatches (unused) --- packages/sketch/src/tools/colorVariables.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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; } From 367f65b2c495d6e88163bd75001381de729f2bc0 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 26 May 2021 14:19:07 -0500 Subject: [PATCH 3/5] fix(sketch): hide shared color styles sync command --- packages/sketch/src/sharedStyles/colors.js | 83 ++++++++++------------ 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/packages/sketch/src/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index e87528ed2022..4a08cb727555 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/packages/sketch/src/sharedStyles/colors.js @@ -43,38 +43,52 @@ 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} + * @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' }), - color: 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, color]) => { - return syncColorStyle({ + ].map(([name, color]) => + syncColorModel({ document, - name: formatColorName({ name, formatFor: 'sharedLayerStyle' }), + 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 +98,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' }); } From 0fda8b2b598c803f5e7c6f2c7d9c45ab24124303 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 26 May 2021 14:19:25 -0500 Subject: [PATCH 4/5] fix(sketch): hide shared color styles sync command --- packages/sketch/src/commands/colors/index.js | 2 +- packages/sketch/src/commands/colors/sync.js | 10 ++-------- packages/sketch/src/commands/index.js | 6 +----- packages/sketch/src/manifest.json | 11 ++--------- 4 files changed, 6 insertions(+), 23 deletions(-) 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/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" ] }, From 69085822b953a1175340d9d371582c904a3cb2b1 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 6 Jul 2021 10:38:57 -0500 Subject: [PATCH 5/5] docs: update jsdoc comments --- packages/sketch/src/sharedStyles/colors.js | 2 ++ packages/sketch/src/tools/sharedStyles.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/sketch/src/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index 4a08cb727555..5e674f4fa920 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/packages/sketch/src/sharedStyles/colors.js @@ -47,6 +47,8 @@ function formatColorName({ name, grade, formatFor }) { * the result * @param {object} params - syncColors parameters * @param {Document} params.document + * @param {string} params.formatFor - one of 'colorVariable' or + * 'sharedLayerStyle' * @returns {Array} */ export function syncColors({ document, formatFor }) { diff --git a/packages/sketch/src/tools/sharedStyles.js b/packages/sketch/src/tools/sharedStyles.js index 55b6d0d32adc..048502d6b454 100644 --- a/packages/sketch/src/tools/sharedStyles.js +++ b/packages/sketch/src/tools/sharedStyles.js @@ -81,7 +81,7 @@ 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, color }) {