From 24e53e718da1e42d13be485ee08c6b6059809b72 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 17 Aug 2021 14:33:03 -0500 Subject: [PATCH] feat(sketch): update plugin to emit hover color palette (#9387) * feat(sketch): update shared layer styles to include hover palette * fix(sharedStyles): fix lint error * feat(sketch): update sync color variables to use hover palette * chore: remove logs and unused ui messages * fix(sketch): add/sort hover colors for generated color page * chore: remove code used for testing Co-authored-by: Andrea N. Cardona Co-authored-by: Andrea N. Cardona --- .../sketch/src/commands/colors/generate.js | 55 +++++++++-- packages/sketch/src/sharedStyles/colors.js | 93 +++++++++++++++++-- packages/sketch/src/tools/colorVariables.js | 11 ++- 3 files changed, 142 insertions(+), 17 deletions(-) diff --git a/packages/sketch/src/commands/colors/generate.js b/packages/sketch/src/commands/colors/generate.js index ce8760753427..f0bf0b0f2086 100644 --- a/packages/sketch/src/commands/colors/generate.js +++ b/packages/sketch/src/commands/colors/generate.js @@ -20,11 +20,27 @@ export function generate() { const document = Document.getSelectedDocument(); const page = selectPage(findOrCreatePage(document, 'color')); const sharedStyles = syncColorStyles({ document }); - const { black, white, colors, support } = groupByKey( - sharedStyles, - (sharedStyle) => { - const { name } = sharedStyle; - const [_category, swatch] = name.split(' / '); + const { + black, + white, + colors, + support, + blackHover, + whiteHover, + hoverColors, + } = groupByKey(sharedStyles, (sharedStyle) => { + const { name } = sharedStyle; + const [_root, _category, swatch] = name.split(' / '); + if (swatch.includes('hover')) { + switch (swatch) { + case 'black hover': + return 'blackHover'; + case 'white hover': + return 'whiteHover'; + default: + return 'hoverColors'; + } + } else { switch (swatch) { case 'black': return 'black'; @@ -37,13 +53,18 @@ export function generate() { return 'colors'; } } - ); + }); let X_OFFSET = 0; let Y_OFFSET = 0; const swatches = groupByKey(colors, (sharedStyle) => { - const [_category, swatch] = sharedStyle.name.split('/'); + const [_root, _category, swatch] = sharedStyle.name.split('/'); + return swatch; + }); + + const hoverSwatches = groupByKey(hoverColors, (sharedStyle) => { + const [_root, _category, swatch] = sharedStyle.name.split('/'); return swatch; }); @@ -70,6 +91,26 @@ export function generate() { createArtboardFromSharedStyle(sharedStyle, page, X_OFFSET, Y_OFFSET); X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN; } + + X_OFFSET = 0; + Y_OFFSET = Y_OFFSET + ARTBOARD_HEIGHT + ARTBOARD_MARGIN; + + createArtboardFromSharedStyle(whiteHover[0], page, X_OFFSET, Y_OFFSET); + X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN; + createArtboardFromSharedStyle(blackHover[0], page, X_OFFSET, Y_OFFSET); + + X_OFFSET = 0; + Y_OFFSET = Y_OFFSET + ARTBOARD_HEIGHT + ARTBOARD_MARGIN; + + for (const swatch of Object.keys(hoverSwatches).sort(sortBySwatchName)) { + for (const sharedStyle of hoverSwatches[swatch].sort(sortBySwatchGrade)) { + createArtboardFromSharedStyle(sharedStyle, page, X_OFFSET, Y_OFFSET); + X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN; + } + + X_OFFSET = 0; + Y_OFFSET = Y_OFFSET + ARTBOARD_HEIGHT + ARTBOARD_MARGIN; + } }); } diff --git a/packages/sketch/src/sharedStyles/colors.js b/packages/sketch/src/sharedStyles/colors.js index 3e0d2535d101..4bc43b202954 100644 --- a/packages/sketch/src/sharedStyles/colors.js +++ b/packages/sketch/src/sharedStyles/colors.js @@ -1,3 +1,4 @@ +/* eslint-disable no-case-declarations */ /** * Copyright IBM Corp. 2018, 2018 * @@ -5,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ -import { colors } from '@carbon/colors'; +import { colors, unstable_hoverColors } from '@carbon/colors'; import { formatTokenName } from '@carbon/themes'; import { syncColorStyle } from '../tools/sharedStyles'; import { syncColorVariable } from '../tools/colorVariables'; @@ -14,6 +15,13 @@ import { syncColorVariable } from '../tools/colorVariables'; // that we need to render const { black, white, orange, yellow, ...swatches } = colors; +// We separate out certain colors that are not a part of the primary swatches +// that we need to render +const { blackHover, whiteHover, ...hoverSwatches } = unstable_hoverColors; + +const coreFolderName = 'core'; +const hoverFolderName = 'hover'; + /** * Format name for shared layer styles or color variables * Shared styles names will need to have the `color` namespace @@ -27,12 +35,17 @@ const { black, white, orange, yellow, ...swatches } = colors; */ function formatColorName({ name, grade, formatFor }) { const formattedName = name.split('-').join(' '); + const folderName = name.includes('hover') ? hoverFolderName : coreFolderName; switch (formatFor) { case 'sharedLayerStyle': - return ['color', formattedName, grade].filter(Boolean).join(' / '); + return ['color', folderName, formattedName, grade] + .filter(Boolean) + .join(' / '); case 'colorVariable': return [ - grade ? `${formattedName}/${formattedName}` : formattedName, + grade + ? `${folderName}/${formattedName}/${formattedName}` + : `${folderName}/${formattedName}`, grade, ] .filter(Boolean) @@ -49,7 +62,7 @@ function formatColorName({ name, grade, formatFor }) { * @returns {Array} */ export function syncColorStyles({ document }) { - const sharedStyles = Object.keys(swatches).flatMap((swatchName) => { + const sharedCoreStyles = Object.keys(swatches).flatMap((swatchName) => { const name = formatTokenName(swatchName); const result = Object.keys(swatches[swatchName]).map((grade) => { return syncColorStyle({ @@ -61,6 +74,22 @@ export function syncColorStyles({ document }) { return result; }); + const sharedHoverStyles = Object.keys(hoverSwatches).flatMap((swatchName) => { + const name = formatTokenName(swatchName); + const result = Object.keys(hoverSwatches[swatchName]).map((grade) => { + return syncColorStyle({ + document, + name: formatColorName({ + name, + grade, + formatFor: 'sharedLayerStyle', + }), + value: hoverSwatches[swatchName][grade], + }); + }); + return result; + }); + const singleColors = [ ['black', black['100']], ['white', white['0']], @@ -74,7 +103,22 @@ export function syncColorStyles({ document }) { }); }); - return sharedStyles.concat(singleColors); + const singleHoverColors = [ + ['black hover', blackHover], + ['white hover', whiteHover], + ].map(([name, value]) => { + return syncColorStyle({ + document, + name: formatColorName({ name, formatFor: 'sharedLayerStyle' }), + value, + }); + }); + + return sharedCoreStyles.concat( + singleColors, + singleHoverColors, + sharedHoverStyles + ); } /** @@ -104,10 +148,45 @@ export function syncColorVariables({ document }) { ].map(([name, color]) => { return syncColorVariable({ document, - name: formatColorName({ name, formatFor: 'colorVariable' }), + name: formatColorName({ + name, + formatFor: 'colorVariable', + }), + color, + }); + }); + + const hoverColorVariables = Object.keys(hoverSwatches).flatMap( + (swatchName) => { + const name = formatTokenName(swatchName); + const result = Object.keys(hoverSwatches[swatchName]).map((grade) => { + return syncColorVariable({ + document, + name: formatColorName({ name, grade, formatFor: 'colorVariable' }), + color: hoverSwatches[swatchName][grade], + }); + }); + return result; + } + ); + + const hoverSingleColors = [ + ['black hover', blackHover], + ['white hover', whiteHover], + ].map(([name, color]) => { + return syncColorVariable({ + document, + name: formatColorName({ + name, + formatFor: 'colorVariable', + }), color, }); }); - return colorVariables.concat(singleColors); + return colorVariables.concat( + singleColors, + hoverColorVariables, + hoverSingleColors + ); } diff --git a/packages/sketch/src/tools/colorVariables.js b/packages/sketch/src/tools/colorVariables.js index 584ab55e919c..759b56550633 100644 --- a/packages/sketch/src/tools/colorVariables.js +++ b/packages/sketch/src/tools/colorVariables.js @@ -20,9 +20,14 @@ import { Swatch } from 'sketch/dom'; export function syncColorVariable({ document, name, color }) { // check existing color variables const documentColorVariables = document.swatches; - const colorVariable = documentColorVariables.find( - (swatch) => swatch.name === name - ); + const colorVariable = documentColorVariables.find((swatch) => { + //todo clean this up yuck + const rootSwatchName = swatch.name.split('/')[ + swatch.name.split('/').length - 1 + ]; + const rootName = name.split('/')[name.split('/').length - 1]; + return rootSwatchName === rootName; + }); // generate new Swatch const generatedSwatch = Swatch.from({