From a1954b9c409142f5b278cd537dfcae3d1ab7663c Mon Sep 17 00:00:00 2001 From: emyarod Date: Mon, 30 Mar 2020 11:50:53 -0500 Subject: [PATCH 1/5] feat(sketch): create shared styles for icon stroke --- .../sketch/src/commands/colors/generate.js | 2 +- packages/sketch/src/commands/colors/sync.js | 2 +- packages/sketch/src/commands/icons/shared.js | 4 ++-- .../sketch/src/commands/themes/generate.js | 2 +- packages/sketch/src/commands/themes/sync.js | 2 +- packages/sketch/src/sharedStyles/colors.js | 21 ++++++++++++------- packages/sketch/src/sharedStyles/themes.js | 5 +++-- packages/sketch/src/tools/sharedStyles.js | 21 +++++++++++-------- 8 files changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/sketch/src/commands/colors/generate.js b/packages/sketch/src/commands/colors/generate.js index cdc3611a870d..94aa8206032f 100644 --- a/packages/sketch/src/commands/colors/generate.js +++ b/packages/sketch/src/commands/colors/generate.js @@ -19,7 +19,7 @@ export function generate() { command('commands/colors/generate', () => { const document = Document.getSelectedDocument(); const page = selectPage(findOrCreatePage(document, 'color')); - const sharedStyles = syncColorStyles(document); + const sharedStyles = syncColorStyles(document, 'fill'); const { black, white, colors, support } = groupByKey( sharedStyles, sharedStyle => { diff --git a/packages/sketch/src/commands/colors/sync.js b/packages/sketch/src/commands/colors/sync.js index 29bfcff4d794..ee2e82578047 100644 --- a/packages/sketch/src/commands/colors/sync.js +++ b/packages/sketch/src/commands/colors/sync.js @@ -11,6 +11,6 @@ import { syncColorStyles } from '../../sharedStyles/colors'; export function sync() { command('commands/colors/sync', () => { - syncColorStyles(Document.getSelectedDocument()); + syncColorStyles(Document.getSelectedDocument(), 'fill'); }); } diff --git a/packages/sketch/src/commands/icons/shared.js b/packages/sketch/src/commands/icons/shared.js index 03c8a1ff8935..5d5c7140f74c 100644 --- a/packages/sketch/src/commands/icons/shared.js +++ b/packages/sketch/src/commands/icons/shared.js @@ -21,9 +21,9 @@ export function syncIconSymbols( sharedLayerStyles, sizes = [32, 24, 20, 16] ) { - const sharedStyles = syncColorStyles(document); + const sharedStyles = syncColorStyles(document, 'fill'); const [sharedStyle] = sharedStyles.filter( - ({ name }) => name === 'color / black' + ({ name }) => name === 'color / fill / black' ); if (!sharedStyle) { diff --git a/packages/sketch/src/commands/themes/generate.js b/packages/sketch/src/commands/themes/generate.js index ee260f17b21d..1ca3ec48444e 100644 --- a/packages/sketch/src/commands/themes/generate.js +++ b/packages/sketch/src/commands/themes/generate.js @@ -21,7 +21,7 @@ export function generate() { command('commands/themes/generate', () => { const document = Document.getSelectedDocument(); const page = selectPage(findOrCreatePage(document, 'themes')); - const sharedStyles = syncThemeColorStyles(document); + const sharedStyles = syncThemeColorStyles(document, 'fill'); const tokens = groupByKey(sharedStyles, sharedStyle => { const [_namespace, _category, _group, token] = sharedStyle.name.split( diff --git a/packages/sketch/src/commands/themes/sync.js b/packages/sketch/src/commands/themes/sync.js index 2314f035b16d..4868bc5756e4 100644 --- a/packages/sketch/src/commands/themes/sync.js +++ b/packages/sketch/src/commands/themes/sync.js @@ -12,6 +12,6 @@ import { syncThemeColorStyles } from '../../sharedStyles/themes'; export function sync() { command('commands/themes/sync', () => { const document = Document.getSelectedDocument(); - syncThemeColorStyles(document); + syncThemeColorStyles(document, 'fill'); }); } diff --git a/packages/sketch/src/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index e3e7285abe9a..54b2926ddbf5 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/packages/sketch/src/sharedStyles/colors.js @@ -18,14 +18,15 @@ const { black, white, orange, yellow, ...swatches } = colors; * @param {Document} document * @returns {Array} */ -export function syncColorStyles(document) { +export function syncColorStyles(document, type) { const sharedStyles = Object.keys(swatches).flatMap(swatchName => { const name = formatTokenName(swatchName); const result = Object.keys(swatches[swatchName]).map(grade => { return syncColorStyle( document, - formatSharedStyleName(name, grade), - swatches[swatchName][grade] + formatSharedStyleName(name, type, grade), + swatches[swatchName][grade], + type ); }); return result; @@ -37,7 +38,12 @@ export function syncColorStyles(document) { ['orange', orange['40']], ['yellow', yellow['30']], ].map(([name, value]) => { - return syncColorStyle(document, formatSharedStyleName(name), value); + return syncColorStyle( + document, + formatSharedStyleName(name, type), + value, + type + ); }); return sharedStyles.concat(singleColors); @@ -45,13 +51,14 @@ export function syncColorStyles(document) { /** * Our shared style name will need to have the `color` namespace alongside a - * name for the swatch and an optional grade. + * name for the swatch, the style type, and an optional grade. * @param {string} name + * @param {string} type * @param {string?} grade * @returns {string} */ -function formatSharedStyleName(name, grade) { - return ['color', name.split('-').join(' '), grade] +function formatSharedStyleName(name, type, grade) { + return ['color', type, name.split('-').join(' '), grade] .filter(Boolean) .join(' / '); } diff --git a/packages/sketch/src/sharedStyles/themes.js b/packages/sketch/src/sharedStyles/themes.js index bfdd6015d291..a329bb713093 100644 --- a/packages/sketch/src/sharedStyles/themes.js +++ b/packages/sketch/src/sharedStyles/themes.js @@ -21,9 +21,10 @@ const { colors } = tokens; /** * Sync theme color shared styles to the given document and return the result * @param {Document} document + * @param {string} styleType * @returns {Array} */ -export function syncThemeColorStyles(document) { +export function syncThemeColorStyles(document, styleType) { const themes = { 'White theme': white, 'Gray 10 theme': g10, @@ -43,7 +44,7 @@ export function syncThemeColorStyles(document) { const name = `theme / ${theme.toLowerCase()} / ${type} tokens / ${formatTokenName( token )}`; - return syncColorStyle(document, name, themes[theme][token]); + return syncColorStyle(document, name, themes[theme][token], styleType); }); }); diff --git a/packages/sketch/src/tools/sharedStyles.js b/packages/sketch/src/tools/sharedStyles.js index cd90baa2bc10..4b510abefe8d 100644 --- a/packages/sketch/src/tools/sharedStyles.js +++ b/packages/sketch/src/tools/sharedStyles.js @@ -61,15 +61,18 @@ export function syncSharedStyle( * @param {Document} document * @param {string} name * @param {string} value + * @param {string} type * @returns {SharedStyle} */ -export function syncColorStyle(document, name, value) { - return syncSharedStyle(document, name, { - fills: [ - { - color: value, - fillType: Style.FillType.Color, - }, - ], - }); +export function syncColorStyle(document, name, value, type) { + if (type === 'fill') { + return syncSharedStyle(document, name, { + fills: [ + { + color: value, + fillType: Style.FillType.Color, + }, + ], + }); + } } From 90d71b28c17255bc086520c28e65f5f5fe2ad6a2 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 10:20:03 -0500 Subject: [PATCH 2/5] fix(generate): destructure swatch name correctly --- packages/sketch/src/commands/colors/generate.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/sketch/src/commands/colors/generate.js b/packages/sketch/src/commands/colors/generate.js index 94aa8206032f..a896f4be2557 100644 --- a/packages/sketch/src/commands/colors/generate.js +++ b/packages/sketch/src/commands/colors/generate.js @@ -20,11 +20,12 @@ export function generate() { const document = Document.getSelectedDocument(); const page = selectPage(findOrCreatePage(document, 'color')); const sharedStyles = syncColorStyles(document, 'fill'); + console.log(sharedStyles); const { black, white, colors, support } = groupByKey( sharedStyles, sharedStyle => { const { name } = sharedStyle; - const [_category, swatch] = name.split(' / '); + const [_category, _type, swatch] = name.split(' / '); switch (swatch) { case 'black': return 'black'; @@ -43,7 +44,7 @@ export function generate() { let Y_OFFSET = 0; const swatches = groupByKey(colors, sharedStyle => { - const [_category, swatch] = sharedStyle.name.split('/'); + const [_category, _type, swatch] = sharedStyle.name.split('/'); return swatch; }); From 0e35e947c34cdd0ea7a104e2aaf989eef89304f2 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 10:20:21 -0500 Subject: [PATCH 3/5] test(sketch): update tests with shared style type --- .../src/commands/test/sync-shared-styles.js | 6 ++--- .../src/commands/test/sync-symbol-id.js | 23 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/sketch/src/commands/test/sync-shared-styles.js b/packages/sketch/src/commands/test/sync-shared-styles.js index 925f241a4bc0..2de746804f13 100644 --- a/packages/sketch/src/commands/test/sync-shared-styles.js +++ b/packages/sketch/src/commands/test/sync-shared-styles.js @@ -42,13 +42,13 @@ export function testSyncSharedStyles() { /** * Testing shared layer styles */ - const sharedStyle = syncColorStyle(document, 'black', '#000000'); + const sharedStyle = syncColorStyle(document, 'black', '#000000', 'fill'); if (document.sharedLayerStyles.length !== 1) { throw new Error('Expected sync command to generate a shared layer style'); } - syncColorStyle(document, 'black', '#000000'); + syncColorStyle(document, 'black', '#000000', 'fill'); if (document.sharedLayerStyles.length !== 1) { throw new Error( @@ -118,7 +118,7 @@ export function testSyncSharedStyles() { throw new Error('The layer is not in sync with the shared style'); } - syncColorStyle(document, 'black', '#dedede'); + syncColorStyle(document, 'black', '#dedede', 'fill'); if (getLayerFillColor() !== '#dededeff') { throw new Error('The layer did not update to the new shared style'); diff --git a/packages/sketch/src/commands/test/sync-symbol-id.js b/packages/sketch/src/commands/test/sync-symbol-id.js index 34a7be4c6704..5ae53c3956ce 100644 --- a/packages/sketch/src/commands/test/sync-symbol-id.js +++ b/packages/sketch/src/commands/test/sync-symbol-id.js @@ -26,14 +26,19 @@ export function testSyncSymbolId() { command('commands/test/sync-symbol-id', () => { const document = Document.getSelectedDocument(); - syncSymbol(document, 'test-symbol', { - layers: [ - new ShapePath({ - name: 'Inner', - shapeType: ShapePath.ShapeType.Oval, - frame: new Rectangle(0, 0, 16, 16), - }), - ], - }); + syncSymbol( + document.getSymbols(), + document.sharedLayerStyles, + 'test-symbol', + { + layers: [ + new ShapePath({ + name: 'Inner', + shapeType: ShapePath.ShapeType.Oval, + frame: new Rectangle(0, 0, 16, 16), + }), + ], + } + ); }); } From 525fae4219d2a6efdeec8faa66afd7f08fac8e8d Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 1 Apr 2020 10:20:30 -0500 Subject: [PATCH 4/5] feat(sharedStyles): add support for border style type --- packages/sketch/src/tools/sharedStyles.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/sketch/src/tools/sharedStyles.js b/packages/sketch/src/tools/sharedStyles.js index 4b510abefe8d..9c0b48915a84 100644 --- a/packages/sketch/src/tools/sharedStyles.js +++ b/packages/sketch/src/tools/sharedStyles.js @@ -75,4 +75,14 @@ export function syncColorStyle(document, name, value, type) { ], }); } + if (type === 'border') { + return syncSharedStyle(document, name, { + borders: [ + { + color: value, + fillType: Style.FillType.Color, + }, + ], + }); + } } From 1971cae1912c8d4e2f340843ded28d5b18e48b9f Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 2 Apr 2020 14:46:54 -0500 Subject: [PATCH 5/5] chore: remove console.log --- packages/sketch/src/commands/colors/generate.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sketch/src/commands/colors/generate.js b/packages/sketch/src/commands/colors/generate.js index a896f4be2557..a05a84757b3b 100644 --- a/packages/sketch/src/commands/colors/generate.js +++ b/packages/sketch/src/commands/colors/generate.js @@ -20,7 +20,6 @@ export function generate() { const document = Document.getSelectedDocument(); const page = selectPage(findOrCreatePage(document, 'color')); const sharedStyles = syncColorStyles(document, 'fill'); - console.log(sharedStyles); const { black, white, colors, support } = groupByKey( sharedStyles, sharedStyle => {