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 <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Aug 17, 2021 · 24e53e7 · 24e53e7
1 parent 2eac7d8
commit 24e53e7
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 17 deletions.
diff --git 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
@@ -1,11 +1,12 @@
+/* eslint-disable no-case-declarations */
 /**
  * Copyright IBM Corp. 2018, 2018
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * 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<SharedStyle>}
  */
 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
@@ -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({