From 6a049482ed7655f87bf99b6252c7c2f8e7cf0f00 Mon Sep 17 00:00:00 2001 From: glmrvn Date: Tue, 3 Mar 2020 10:35:12 +0300 Subject: [PATCH 1/3] Fixed light mode --- code.js | 78 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/code.js b/code.js index f129e34..d598ce4 100644 --- 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) { From 44f030747dc2fe67cb1081bf6132d87d722a8a23 Mon Sep 17 00:00:00 2001 From: glmrvn Date: Tue, 3 Mar 2020 10:51:48 +0300 Subject: [PATCH 2/3] Renamed menu item --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 4b714c5..a87d573 100644 --- 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"} ] } \ No newline at end of file From d1ba78f1c88d846309c4446099b38102b6fc8aea Mon Sep 17 00:00:00 2001 From: glmrvn Date: Tue, 3 Mar 2020 11:19:40 +0300 Subject: [PATCH 3/3] Updated REAMDE.md --- README.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 65e9e8e..9658312 100644 --- 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) image ## 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.