feat: introduce auto detection

tonik · Mar 18, 2023 · 62ee294 · 62ee294
1 parent 3e4d3b8
commit 62ee294
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 0 deletions.
diff --git a/packages/status/code.js b/packages/status/code.js
@@ -9,6 +9,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 const init = () => __awaiter(this, void 0, void 0, function* () {
     figma.showUI(__uiFiles__.main, { width: 240, height: 332 });
+    const selection = figma.currentPage.selection[0];
+    const { backgrounds } = figma.currentPage;
+    const canvasBackground = rgbToHsl(backgrounds[0].type === 'SOLID' && backgrounds[0].color);
+    const appearance = canvasBackground.l > 40 ? 'light' : 'dark';
+    if (isSection(selection) || isFrame(selection)) {
+        const { color } = selection.fills[0];
+        const status = Object.keys(statusInfo).find((status) => {
+            return (statusInfo[status].colorSchemes.light.color.r === color.r &&
+                statusInfo[status].colorSchemes.light.color.g === color.g &&
+                statusInfo[status].colorSchemes.light.color.b === color.b);
+        });
+        figma.ui.postMessage({ status, appearance });
+    }
 });
 const months = [
     'January',
@@ -96,6 +109,34 @@ const statusInfo = {
         icon: '✅',
     },
 };
+const rgbToHsl = ({ r, g, b }) => {
+    const cmin = Math.min(r, g, b);
+    const cmax = Math.max(r, g, b);
+    const delta = cmax - cmin;
+    let h = 0;
+    let s = 0;
+    let l = 0;
+    if (delta === 0)
+        h = 0;
+    else if (cmax === r)
+        h = ((g - b) / delta) % 6;
+    else if (cmax === g)
+        h = (b - r) / delta + 2;
+    else
+        h = (r - g) / delta + 4;
+    h = Math.round(h * 60);
+    if (h < 0)
+        h += 360;
+    l = (cmax + cmin) / 2;
+    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = Number((s * 100).toFixed(1));
+    l = Number((l * 100).toFixed(1));
+    return {
+        h,
+        s,
+        l,
+    };
+};
 const isSection = (node) => {
     return node.type === 'SECTION';
 };

diff --git a/packages/status/code.ts b/packages/status/code.ts
@@ -15,6 +15,24 @@ type ChangeStatusPayload = {
 
 const init = async () => {
   figma.showUI(__uiFiles__.main, { width: 240, height: 332 })
+
+  const selection = figma.currentPage.selection[0]
+  const { backgrounds } = figma.currentPage
+  const canvasBackground = rgbToHsl(backgrounds[0].type === 'SOLID' && backgrounds[0].color)
+  const appearance = canvasBackground.l > 40 ? 'light' : 'dark'
+
+  if (isSection(selection) || isFrame(selection)) {
+    const { color } = selection.fills[0]
+    const status = Object.keys(statusInfo).find((status) => {
+      return (
+        statusInfo[status].colorSchemes.light.color.r === color.r &&
+        statusInfo[status].colorSchemes.light.color.g === color.g &&
+        statusInfo[status].colorSchemes.light.color.b === color.b
+      )
+    })
+
+    figma.ui.postMessage({ status, appearance })
+  }
 }
 
 type MessageProps =
@@ -122,6 +140,34 @@ const statusInfo: {
   },
 }
 
+const rgbToHsl = ({ r, g, b }: RGB) => {
+  const cmin = Math.min(r, g, b)
+  const cmax = Math.max(r, g, b)
+  const delta = cmax - cmin
+  let h = 0
+  let s = 0
+  let l = 0
+
+  if (delta === 0) h = 0
+  else if (cmax === r) h = ((g - b) / delta) % 6
+  else if (cmax === g) h = (b - r) / delta + 2
+  else h = (r - g) / delta + 4
+
+  h = Math.round(h * 60)
+
+  if (h < 0) h += 360
+  l = (cmax + cmin) / 2
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+  s = Number((s * 100).toFixed(1))
+  l = Number((l * 100).toFixed(1))
+
+  return {
+    h,
+    s,
+    l,
+  }
+}
+
 const isSection = (node: SceneNode): node is SectionNode => {
   return node.type === 'SECTION'
 }

diff --git a/packages/status/ui.html b/packages/status/ui.html
@@ -189,6 +189,19 @@
   const appearanceInputs = document.querySelectorAll('input[name="appearance"]')
   const archiveBtn = document.getElementById('archive')
 
+  onmessage = (event) => {
+    const { status, appearance } = event.data.pluginMessage
+    const input = document.querySelector(`input[value="${status}"]`)
+    if (input) {
+      input.checked = true
+    }
+
+    const appearanceInput = document.querySelector(`input[value="${appearance}"]`)
+    if (appearanceInput) {
+      appearanceInput.checked = true
+    }
+  }
+
   typeInputs.forEach((elem) => {
     elem.addEventListener('change', () => {
       parent.postMessage(