Add some tests and improve modularity.

src/api/services/colors/build-colors-pair.spec.ts

@@ -0,0 +1,25 @@
+import { createFigmaPaint } from '~utils/figma/create-figma-paint.ts';
+import { describe, expect, test, vi } from 'vitest';
+
+import { buildColorsPair } from './build-colors-pair.ts';
+
+vi.stubGlobal('figma', {
+  root: {
+    documentProfile: 'SRGB',
+  },
+});
+
+describe('buildColorsPair', () => {
+  test('should return a valid color pair with given fg and bg', () => {
+    const fg = createFigmaPaint({ b: 0, g: 0, r: 0 });
+    const bg = createFigmaPaint({ b: 1, g: 1, r: 1 });
+    const result = buildColorsPair('sample-id', fg, bg);
+
+    expect(result).toEqual({
+      apca: expect.any(Number),
+      bg,
+      fg,
+      id: 'sample-id',
+    });
+  });
+});

src/api/services/colors/get-node-fill.ts → src/api/services/colors/get-computed-node-fill.ts

@@ -1,17 +1,17 @@
 import { blendFills } from '~api/services/figma/blend/blend-fills.ts';
 import { isLayerHasTransparency } from '~api/services/figma/visibility/is-layer-has-transparency.ts';
 import { type FigmaNode, type FigmaPaint } from '~types/figma.ts';
-import { getActualNodeFill } from '~utils/figma/get-actual-node-fill.ts';
+import { getFirstVisibleNodeFill } from '~utils/figma/get-first-visible-node-fill.ts';
 
-export const getNodeFill = (node: FigmaNode): FigmaPaint | null => {
+export const getComputedNodeFill = (node: FigmaNode): FigmaPaint | null => {
   const isFgHasTransparency = isLayerHasTransparency(node);
 
   let fgFill;
 
   if (isFgHasTransparency) {
     fgFill = blendFills(node.fills);
   } else {
-    fgFill = getActualNodeFill(node.fills);
+    fgFill = getFirstVisibleNodeFill(node.fills);
   }
 
   return fgFill;

src/api/services/colors/handle-opaque-layer.ts

@@ -1,17 +1,17 @@
 import { buildColorsPair } from '~api/services/colors/build-colors-pair.ts';
-import { getNodeFill } from '~api/services/colors/get-node-fill.ts';
+import { getComputedNodeFill } from '~api/services/colors/get-computed-node-fill.ts';
 import { type ColorPair } from '~api/types.ts';
 import { type FigmaNode } from '~types/figma.ts';
-import { getActualNodeFill } from '~utils/figma/get-actual-node-fill.ts';
+import { getFirstVisibleNodeFill } from '~utils/figma/get-first-visible-node-fill.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
 export const handleOpaqueLayer = (
   selectedNode: FigmaNode,
   firstIntersectingNode: FigmaNode
 ): ColorPair | null => {
-  const bgFill = getActualNodeFill(firstIntersectingNode.fills);
+  const bgFill = getFirstVisibleNodeFill(firstIntersectingNode.fills);
 
-  const fgFill = getNodeFill(selectedNode);
+  const fgFill = getComputedNodeFill(selectedNode);
 
   if (notEmpty(fgFill) && notEmpty(bgFill))
     return buildColorsPair(selectedNode.id, fgFill, bgFill);

src/api/services/colors/handle-transparent-layer.ts

@@ -1,5 +1,5 @@
 import { buildColorsPair } from '~api/services/colors/build-colors-pair.ts';
-import { getNodeFill } from '~api/services/colors/get-node-fill.ts';
+import { getComputedNodeFill } from '~api/services/colors/get-computed-node-fill.ts';
 import { blendLayersColors } from '~api/services/figma/blend/blend-layers-colors.ts';
 import { type ColorPair } from '~api/types.ts';
 import { type FigmaNode } from '~types/figma.ts';
@@ -11,7 +11,7 @@ export const handleTransparentLayer = (
 ): ColorPair | null => {
   const blendedBgColor = blendLayersColors(intersectingNodes);
 
-  const fgFill = getNodeFill(selectedNode);
+  const fgFill = getComputedNodeFill(selectedNode);
 
   if (notEmpty(fgFill) && notEmpty(blendedBgColor))
     buildColorsPair(selectedNode.id, fgFill, blendedBgColor);

src/api/services/figma/visibility/is-layer-has-transparency.ts

@@ -1,11 +1,11 @@
 import { nodeHasFills } from '~api/services/figma/nodes/node-has-fills.ts';
 import { type FigmaNode } from '~types/figma.ts';
-import { getActualNodeFill } from '~utils/figma/get-actual-node-fill.ts';
+import { getFirstVisibleNodeFill } from '~utils/figma/get-first-visible-node-fill.ts';
 
 export const isLayerHasTransparency = (node: FigmaNode): boolean => {
   const ifTheLayerItself = node.opacity !== 1;
   const ifNoFills = !nodeHasFills(node);
-  const ifActualFill = getActualNodeFill(node.fills)?.opacity !== 1;
+  const ifActualFill = getFirstVisibleNodeFill(node.fills)?.opacity !== 1;
 
   return ifTheLayerItself || ifNoFills || ifActualFill;
 };

src/api/services/payload/build-pair-selection-payload.ts

@@ -5,7 +5,7 @@ import { sortNodesByLayers } from '~api/services/figma/nodes/sort-nodes-by-layer
 import { isLayerHasTransparency } from '~api/services/figma/visibility/is-layer-has-transparency.ts';
 import { buildEmptyPayload } from '~api/services/payload/build-empty-payload.ts';
 import { type SelectionChangeMessage } from '~types/messages.ts';
-import { getActualNodeFill } from '~utils/figma/get-actual-node-fill.ts';
+import { getFirstVisibleNodeFill } from '~utils/figma/get-first-visible-node-fill.ts';
 import { type HasLength } from '~utils/has-length.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
@@ -27,10 +27,10 @@ export const buildPairSelectionPayload = (
   if (isFgHasTransparency) {
     fgFill = blendLayersColors([fg]);
   } else {
-    fgFill = getActualNodeFill(fg.fills);
+    fgFill = getFirstVisibleNodeFill(fg.fills);
   }
 
-  const bgFill = getActualNodeFill(bg.fills);
+  const bgFill = getFirstVisibleNodeFill(bg.fills);
 
   if (!notEmpty(fgFill) || !notEmpty(bgFill)) return buildEmptyPayload();
 

src/utils/figma/get-actual-node-fill.ts → src/utils/figma/get-first-visible-node-fill.ts

@@ -1,7 +1,9 @@
 import { type FigmaPaint } from '~types/figma.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
-export const getActualNodeFill = (fills: FigmaPaint[]): FigmaPaint | null => {
+export const getFirstVisibleNodeFill = (
+  fills: FigmaPaint[]
+): FigmaPaint | null => {
   const fill = Array.from(fills)
     .reverse()
     .find((fill) => fill.visible);