Merge pull request #12 from glmrvn/Dev

Dev
glmrvn · Mar 3, 2020 · dfa1d43 · dfa1d43
2 parents 35a42a5 + d1ba78f
commit dfa1d43
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,23 @@
 # Appearance. Figma plugin. 
 
-The plugin generates a dark/light theme from your selection.
-Works with team library or local file color styles.
+This plugin generates a dark/light mode from your selection.
+The plugin works with external library styles and local styles.
 [Link to the Figma plugin page](https://www.figma.com/c/plugin/760927481606931799/Appearance)
 
 <img width="640" alt="image" src="https://i.imgur.com/6U35R8K.gif">
 
 ## How it works:
-1. Use [day] and [night] in your style names.
-2. Select "Get styles" at the plugin menu.
-3. Select the frame or instance. Then choose: "Dark Mode" or "Light Mode".
+1. Use [day] and [night] in your style names. Example: Style name[day]/ Style name[night].
+2. Apply your color styles.
+3. Select any object, then choose Appearance → Dark mode or Appearance → Light mode.
+
+## How it works with external library styles:
+1. Open external library file and use [day] and [night] in color style names. Example: Style name[day]/ Style name[night].
+2. Publish changes.
+3. Select Appearance → Save styles for saving external color styles to the plugin.
+4. Open any file linked to the library. 
+5. Apply color styles.
+6. Select any object then choose Appearance → Dark mode or Appearance → Light mode”
 
 ## Styles name examples:
 You can use [day] / [night] at any place of your style name.

diff --git a/code.js b/code.js
@@ -57,7 +57,7 @@ if (figma.command == 'dark') {
             }
 
             var allStyles = [...localStyles, ...importStyles]
-            console.log(allStyles)
+            // console.log(allStyles)
 
             //Creating style couples
             for (let paintStyle of allStyles) {
@@ -137,51 +137,69 @@ if (figma.command == 'dark') {
 // SELECTED LIGHT MODE
 if (figma.command == 'light') {
     async function getPaints() {
-        var allColors = await figma.clientStorage.getAsync('allColors')
-        if (allColors.length == 0) {
-            figma.closePlugin("Please add colors from library")
-        }
+        var publicStyles = await figma.clientStorage.getAsync('allColors');
+        var localStyles = figma.getLocalPaintStyles();
 
+        var importStyles = []
         var days = {}
         var daysLocal = {}
         var nights = {}
         var nightsLocal = {}
-        for (let paintStyle of allColors) {
-            const {name, id} = await figma.importStyleByKeyAsync(paintStyle).then((i) => ({name: i.name, id: i.id}));
-            if (name.includes(night)) {
-                const key = name.replace(night, '');
-                nights[key] = id;
-                nightsLocal[key] = id.slice(0,43);
-            } else if (name.includes(day)) {
-                const key = name.replace(day, '');
-                days[key] = id;
-                daysLocal[key] = id.slice(0,43);
+
+        if (publicStyles.length == 0 && localStyles.length == 0) {
+            figma.closePlugin('😶 This document does not have color styles');
+
+        } else {
+
+            //Importing public styles
+            for (let styleKey of publicStyles) {
+                try {
+                    var singleImportedStyle = await figma.importStyleByKeyAsync(styleKey);
+                    importStyles.push(singleImportedStyle);
+                } catch(error) {}
             }
-        }
 
-        Object.entries(days).forEach(([name, id]) => {
-            // object[id] = nights[name];
-            object[nights[name]] = id;
-        });
+            var allStyles = [...localStyles, ...importStyles]
+            // console.log(allStyles)
 
-        Object.entries(daysLocal).forEach(([name, id]) => {
-            objectLocal[nightsLocal[name]] = id;
-        });
+            //Creating style couples
+            for (let paintStyle of allStyles) {
+                const name = paintStyle.name
+                const id = paintStyle.id
+                if (name.includes(night)) {
+                    const key = name.replace(night, '');
+                    nights[key] = id;
+                    nightsLocal[key] = id.slice(0,43);
+                } else if (name.includes(day)) {
+                    const key = name.replace(day, '');
+                    days[key] = id;
+                    daysLocal[key] = id.slice(0,43);
+                }
+            }
+
+            Object.entries(days).forEach(([name, id]) => {
+                // object[id] = nights[name];
+                object[nights[name]] = id;
+            });
 
+            Object.entries(daysLocal).forEach(([name, id]) => {
+                objectLocal[nightsLocal[name]] = id;
+            });
+        }
     }
 
 // Changing colors
     function findSelectedFrames() {
-        let allSelection = [];
         if (figma.currentPage.selection.length == 0) {
-            figma.closePlugin("🤔 No object selected.")
-
-        } else if (!["FRAME", "COMPONENT", "INSTANCE"].includes(figma.currentPage.selection[0].type)) {
-            figma.closePlugin("👆🤓 Select frame or instance")
+            figma.closePlugin("🤔 No object selected. Please select any object");
 
         } else {
-            allSelection = figma.currentPage.selection[0].findAll();
-            allSelection.unshift(figma.currentPage.selection[0])
+            try {
+                var allSelection = figma.currentPage.selection[0].findAll();
+            } catch(error) {
+                var allSelection = [];
+            }
+            allSelection.unshift(figma.currentPage.selection[0]);
         }
 
         for (let frame of allSelection) {

diff --git a/manifest.json b/manifest.json
@@ -7,6 +7,6 @@
     {"name": "Dark mode", "command": "dark"},
     {"name": "Light mode", "command": "light"},
     {"separator": true},
-    {"name": "Get styles", "command": "get_colors"}
+    {"name": "Save styles", "command": "get_colors"}
   ]
 }