@seed-design/figma 0.0.2

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@seed-design/figma",
+  "version": "0.0.2",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/figma"
+  },
+  "author": "Asher <asher@daangn.com>",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    }
+  },
+  "main": "./lib/index.cjs",
+  "sideEffects": false,
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@create-figma-plugin/utilities": "^3.0.2",
+    "@seed-design/css": "0.0.10",
+    "change-case": "^5.2.0",
+    "ts-pattern": "^5.2.0"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "^1.108.0",
+    "@seed-design/figma-extractor": "^0.0.3",
+    "typescript": "^5.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/color.ts

@@ -0,0 +1,78 @@
+import type { NormalizedFrameNode, NormalizedTextNode } from "./normalizer/types";
+import { getColorVariableName } from "./variable";
+
+export function createBackgroundProps(
+  node: Pick<NormalizedFrameNode, "fills" | "boundVariables">,
+): Partial<Record<"background", string | undefined>> {
+  const fills = node.fills;
+  if (fills.length === 0) {
+    return {};
+  }
+
+  const fill = fills[0];
+  if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
+    return {};
+  }
+
+  if (node.boundVariables?.fills?.length === 1) {
+    return {
+      background: getColorVariableName(node.boundVariables.fills[0]!.id),
+    };
+  }
+
+  const color = fill.color;
+  return {
+    background: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${fill.opacity})`,
+  };
+}
+
+export function createColorProps(
+  node: Pick<NormalizedTextNode, "fills" | "boundVariables">,
+): Partial<Record<"color", string | undefined>> {
+  const fills = node.fills;
+  if (fills.length === 0) {
+    return {};
+  }
+
+  const fill = fills[0];
+  if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
+    return {};
+  }
+  if (node.boundVariables?.fills?.length === 1) {
+    return {
+      color: getColorVariableName(node.boundVariables.fills[0]!.id),
+    };
+  }
+
+  const color = fill.color;
+  return {
+    color: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${fill.opacity})`,
+  };
+}
+
+export function createBorderProps(
+  node: Pick<NormalizedFrameNode, "strokeWeight" | "strokes" | "boundVariables">,
+): Partial<Record<"borderWidth" | "borderColor", string | number | undefined>> {
+  const strokes = node.strokes;
+  if (strokes === undefined || strokes.length === 0) {
+    return {};
+  }
+
+  const stroke = strokes[0];
+  if (!stroke || ("visible" in stroke && !stroke.visible) || stroke.type !== "SOLID") {
+    return {};
+  }
+
+  if (node.boundVariables?.strokes?.length === 1) {
+    return {
+      borderWidth: node.strokeWeight as number,
+      borderColor: getColorVariableName(node.boundVariables.strokes[0]!.id),
+    };
+  }
+
+  const color = stroke.color;
+  return {
+    borderWidth: node.strokeWeight as number,
+    borderColor: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${stroke.opacity})`,
+  };
+}