chore: test new variable update logic

plugins/figma/manifest.json

@@ -8,5 +8,11 @@
   "enableProposedApi": false,
   "editorType": ["figma"],
   "documentAccess": "dynamic-page",
-  "networkAccess": { "allowedDomains": ["https://api.github.com"] }
+  "networkAccess": {
+    "allowedDomains": [
+      "https://api.github.com",
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com"
+    ]
+  }
 }

plugins/figma/package.json

@@ -1,7 +1,7 @@
 {
   "name": "figma-plugin",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "run-s watch",

plugins/figma/src/plugin/figma/themes.ts

@@ -3,21 +3,28 @@ import { getDummyTheme } from '../../common/dummyTheme';
 import type { StoreThemes } from '../../common/store';
 
 export const getThemes = async () => {
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const collections = (
+    await figma.variables.getLocalVariableCollectionsAsync()
+  ).filter((collection) => {
+    return collection.name === 'Color scheme' || collection.name === 'Theme';
+  });
+  console.log({ collections });
   const modeColModes = collections.find(
-    (collection) => collection.name === 'Mode',
+    (collection) => collection.name === 'Color scheme',
   )?.modes;
   const themeModes = collections.find(
     (collection) => collection.name === 'Theme',
   )?.modes;
   const modeColId = collections.find(
-    (collection) => collection.name === 'Mode',
+    (collection) => collection.name === 'Color scheme',
   )?.id;
 
   const variables = await figma.variables.getLocalVariablesAsync('COLOR');
 
   const themes: StoreThemes = [];
 
+  console.log({ collections, variables, modeColModes, themeModes, modeColId });
+
   if (themeModes) {
     for (const themeMode of themeModes) {
       themes.push({
@@ -29,6 +36,8 @@ export const getThemes = async () => {
     }
   }
 
+  console.log('first variable', variables[0]);
+
   for (const variable of variables) {
     if (variable.variableCollectionId === modeColId) {
       const nameSplitArr = variable.name.split('/');
@@ -37,6 +46,8 @@ export const getThemes = async () => {
       const ThemeType = nameSplitArr[1] as string;
       const ThemeIndex = nameSplitArr[2] as string;
 
+      /* console.log({ themeName, ThemeType, ThemeIndex }); */
+
       if (themeName !== 'global' && modeColModes) {
         for (const mode of modeColModes) {
           const modeName = mode.name.toLocaleLowerCase() as
@@ -59,5 +70,7 @@ export const getThemes = async () => {
     }
   }
 
+  console.log({ themes });
+
   return themes;
 };

plugins/figma/src/plugin/figma/updateVariables.ts

@@ -1,34 +1,30 @@
 import { hexToRgb, rgbToHex } from '@digdir/designsystemet/color';
 
-import type { ColorIndex, StoreThemes } from '../../common/store';
+import type { ColorIndex, StoreTheme } from '../../common/store';
 import type { FigmaModeName, ThemeColors } from '../../common/types';
 
 const updateColors = (
-  themes: StoreThemes,
+  theme: StoreTheme,
   variable: Variable,
   lightModeId: string,
   darkModeId: string,
   modeCollection: VariableCollection,
-  themeCollection: VariableCollection,
-  variables: Variable[],
 ) => {
   const themeName = variable.name.split('/')[0] as FigmaModeName;
   const themeType = variable.name.split('/')[1] as ThemeColors;
   const themeIndex = variable.name.split('/')[2] as ColorIndex;
+
   if (
     variable.variableCollectionId === modeCollection.id &&
     !variable.name.startsWith('global')
   ) {
     const oldLightHex = rgbToHex(variable.valuesByMode[lightModeId] as RGB);
-    const newLightHex = themes.find((theme) => theme.themeId === themeName)
-      ?.colors[themeType].light[themeIndex];
-
+    const newLightHex = theme.colors[themeType].light[themeIndex];
     const oldDarkHex = rgbToHex(variable.valuesByMode[darkModeId] as RGB);
-    const newDarkHex = themes.find((theme) => theme.themeId === themeName)
-      ?.colors[themeType].dark[themeIndex];
+    const newDarkHex = theme.colors[themeType].dark[themeIndex];
+
     if (newLightHex && oldLightHex !== newLightHex) {
       const lightRGB = hexToRgb(newLightHex, '1');
-
       if (lightRGB) {
         variable.setValueForMode(lightModeId, lightRGB);
       }
@@ -40,49 +36,43 @@ const updateColors = (
       }
     }
   }
-
-  // if (variable.name.startsWith(themeName + '/')) {
-  //   const varr = variables.find((variable) =>
-  //     variable.name.startsWith('color/' + themeType + '/' + themeIndex),
-  //   );
-
-  //   const themeId = themeCollection.modes.find(
-  //     (mode) => mode.name === themeName,
-  //   );
-  //   if (varr && themeId) {
-  //     varr.setValueForMode(themeId.modeId, { r: 0, g: 0, b: 0 });
-
-  //     const alias = figma.variables.createVariableAlias(variable);
-  //     if (alias) {
-  //       varr.setValueForMode(themeId.modeId, alias);
-  //     }
-  //   }
-  // }
 };
 
-export const updateVariables = async (themes: StoreThemes) => {
+export const updateVariables = async (theme: StoreTheme) => {
+  console.log({ theme });
   const collections = await figma.variables.getLocalVariableCollectionsAsync();
-  const modeCollection = collections.find((col) => col.name === 'Mode');
+  const modeCollection = collections.find((col) => col.name === 'Color scheme');
   const themeCollection = collections.find((col) => col.name === 'Theme');
 
-  console.log('themes', themes);
+  console.log('theme', theme);
+  console.log({ modeCollection, themeCollection });
+
+  const vars = figma.variables.getVariableCollectionById(theme.themeId);
+  console.log({ vars });
 
   if (modeCollection && themeCollection) {
-    const lightModeId: string = modeCollection.modes[0].modeId;
-    const darkModeId: string = modeCollection.modes[1].modeId;
+    let lightModeId = '';
+    let darkModeId = '';
+
+    for (const mode of modeCollection.modes) {
+      if (mode.name === 'Light') {
+        lightModeId = mode.modeId;
+      } else if (mode.name === 'Dark') {
+        darkModeId = mode.modeId;
+      }
+    }
     const variables = await figma.variables.getLocalVariablesAsync('COLOR');
 
+    const filteredVariables = variables.filter((variable) => {
+      const themeName = variable.name.split('/')[0] as FigmaModeName;
+      return themeName === theme.themeModeId;
+    });
+
+    console.log({ filteredVariables });
+
     try {
-      for (const variable of variables) {
-        updateColors(
-          themes,
-          variable,
-          lightModeId,
-          darkModeId,
-          modeCollection,
-          themeCollection,
-          variables,
-        );
+      for (const variable of filteredVariables) {
+        updateColors(theme, variable, lightModeId, darkModeId, modeCollection);
       }
       figma.ui.postMessage({ type: 'updateVariables' });
     } catch (error) {

plugins/figma/src/plugin/plugin.ts

@@ -1,5 +1,5 @@
 import { Messages } from '@common/types';
-import type { ColorTheme, StoreThemes } from '../common/store';
+import type { ColorTheme, StoreTheme } from '../common/store';
 
 import { getVariables } from './figma/getVariables';
 import { getThemes } from './figma/themes';
@@ -9,7 +9,7 @@ figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
 
 figma.ui.onmessage = (msg: {
   type: Messages;
-  themes?: StoreThemes;
+  theme?: StoreTheme;
   themeId?: string;
   renameTheme?: {
     newName: string;
@@ -28,7 +28,11 @@ figma.ui.onmessage = (msg: {
   void (async () => {
     switch (msg.type) {
       case Messages.UpdateVariables: {
-        if (msg.themes) await updateVariables(msg.themes);
+        console.log({ msg });
+        if (msg.theme) {
+          console.log('updating variables with themes', msg.theme);
+          await updateVariables(msg.theme);
+        }
         break;
       }