Allow fetching png images

Temzasse · Sep 8, 2022 · df77b8d · df77b8d
1 parent 4f372c7
commit df77b8d
Show file tree

Hide file tree

Showing 17 changed files with 362 additions and 332 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,42 +10,6 @@
   "author": "Teemu Taskula",
   "license": "ISC",
   "figmage": {
-    "outDir": "tokens",
-    "tokenize": {
-      "tokens": [
-        {
-          "name": "colors",
-          "type": "color"
-        },
-        {
-          "name": "typography",
-          "type": "text"
-        },
-        {
-          "name": "spacing",
-          "type": "width",
-          "nodeId": "22:582"
-        },
-        {
-          "name": "radii",
-          "type": "radius",
-          "nodeId": "22:641"
-        },
-        {
-          "name": "icons",
-          "type": "svg",
-          "nodeId": "1:1887"
-        }
-      ]
-    },
-    "codegen": {
-      "defaults": {
-        "filetype": "ts",
-        "tokenCase": "camel"
-      }
-    }
-  },
-  "figmage2": {
     "outDir": "tokens",
     "tokenize": {
       "tokens": [
@@ -61,11 +25,6 @@
           "name": "shadows",
           "type": "drop-shadow"
         },
-        {
-          "name": "icons",
-          "type": "svg",
-          "nodeId": "102:2"
-        },
         {
           "name": "spacing",
           "type": "width",
@@ -76,15 +35,20 @@
           "type": "height",
           "nodeId": "102:7"
         },
-        {
-          "name": "sizing",
-          "type": "width",
-          "nodeId": "136:188"
-        },
         {
           "name": "radii",
           "type": "radius",
           "nodeId": "102:8"
+        },
+        {
+          "name": "icons",
+          "type": "svg",
+          "nodeId": "102:2"
+        },
+        {
+          "name": "assets",
+          "type": "png",
+          "nodeId": "643:618"
         }
       ]
     },
@@ -93,12 +57,9 @@
         "filetype": "ts",
         "tokenCase": "camel"
       },
-      "icons": {
-        "filetype": "svg",
-        "sprite": {
-          "writeIds": true,
-          "spriteDir": "assets"
-        }
+      "assets": {
+        "filetype": "png",
+        "tokenCase": "kebab"
       }
     }
   }

diff --git a/example/tokens/assets/adaptive-icon-staging.png b/example/tokens/assets/adaptive-icon-staging.png
diff --git a/example/tokens/assets/adaptive-icon-test.png b/example/tokens/assets/adaptive-icon-test.png
diff --git a/example/tokens/assets/adaptive-icon.png b/example/tokens/assets/adaptive-icon.png
diff --git a/example/tokens/assets/icon-staging.png b/example/tokens/assets/icon-staging.png
diff --git a/example/tokens/assets/icon-test.png b/example/tokens/assets/icon-test.png
diff --git a/example/tokens/assets/icon.png b/example/tokens/assets/icon.png
diff --git a/example/tokens/assets/splash.png b/example/tokens/assets/splash.png
diff --git a/example/tokens/colors.ts b/example/tokens/colors.ts
@@ -1,69 +1,69 @@
 /* eslint-disable */
 export const dark = {
-  "muted4": "#3a3a3c",
-  "pressHighlight": "rgba(150, 150, 150, 0.2)",
-  "focusRing": "#009a48",
-  "errorMuted": "#3e1c1d",
-  "error": "#ef4444",
-  "muted3": "#48484a",
-  "elevated": "#333333",
-  "success": "#10b981",
-  "warnText": "#ffc93d",
-  "primaryText": "#1cff87",
-  "warnMuted": "#40351a",
-  "errorText": "#ff7070",
-  "muted2": "#636366",
-  "primary": "#009a48",
-  "primaryMuted": "#24392a",
-  "muted1": "#8e8e93",
-  "muted6": "#1d1d1f",
-  "text": "#ffffff",
-  "surface": "#222222",
-  "backdrop": "rgba(0, 0, 0, 0.5)",
-  "background": "#111111",
-  "info": "#3b82f6",
-  "infoMuted": "#1b2940",
-  "successText": "#1ee8a5",
-  "muted5": "#2c2c2e",
-  "textMuted": "#999999",
+  "border": "rgba(150, 150, 150, 0.3)",
+  "warn": "#fbbf24",
+  "successMuted": "#193328",
   "infoText": "#81aef7",
   "hoverHighlight": "rgba(150, 150, 150, 0.08)",
-  "successMuted": "#193328",
-  "warn": "#fbbf24",
-  "border": "rgba(150, 150, 150, 0.3)"
-};
-export const light = {
-  "muted1": "#8e8e93",
-  "error": "#ef4444",
-  "primaryMuted": "#d6ebdb",
-  "warnText": "#8a6200",
-  "textMuted": "#666666",
-  "muted4": "#d1d1d6",
-  "muted6": "#f2f2f7",
-  "muted3": "#c7c7cc",
-  "text": "#222222",
-  "surface": "#ffffff",
+  "textMuted": "#999999",
+  "muted5": "#2c2c2e",
+  "successText": "#1ee8a5",
+  "infoMuted": "#1b2940",
   "info": "#3b82f6",
-  "elevated": "#ffffff",
-  "success": "#10b981",
-  "muted2": "#aeaeb2",
-  "infoText": "#0a45a6",
-  "infoMuted": "#cfdef7",
-  "successMuted": "#cee8df",
-  "successText": "#06734e",
-  "errorMuted": "#f3d2d3",
-  "background": "#f3f4f6",
-  "primary": "#009a48",
-  "warnMuted": "#f3ead1",
-  "primaryText": "#015227",
+  "background": "#111111",
   "backdrop": "rgba(0, 0, 0, 0.5)",
-  "pressHighlight": "rgba(150, 150, 150, 0.2)",
-  "border": "rgba(150, 150, 150, 0.3)",
-  "errorText": "#8c0606",
+  "surface": "#222222",
+  "text": "#ffffff",
+  "muted6": "#1d1d1f",
+  "muted1": "#8e8e93",
+  "primaryMuted": "#24392a",
+  "primary": "#009a48",
+  "muted2": "#636366",
+  "errorText": "#ff7070",
+  "warnMuted": "#40351a",
+  "primaryText": "#1cff87",
+  "warnText": "#ffc93d",
+  "success": "#10b981",
+  "elevated": "#333333",
+  "muted3": "#48484a",
+  "error": "#ef4444",
+  "errorMuted": "#3e1c1d",
   "focusRing": "#009a48",
-  "warn": "#fbbf24",
+  "pressHighlight": "rgba(150, 150, 150, 0.2)",
+  "muted4": "#3a3a3c"
+};
+export const light = {
+  "muted5": "#e5e5ea",
   "hoverHighlight": "rgba(150, 150, 150, 0.1)",
-  "muted5": "#e5e5ea"
+  "warn": "#fbbf24",
+  "focusRing": "#009a48",
+  "errorText": "#8c0606",
+  "border": "rgba(150, 150, 150, 0.3)",
+  "pressHighlight": "rgba(150, 150, 150, 0.2)",
+  "backdrop": "rgba(0, 0, 0, 0.5)",
+  "primaryText": "#015227",
+  "warnMuted": "#f3ead1",
+  "primary": "#009a48",
+  "background": "#f3f4f6",
+  "errorMuted": "#f3d2d3",
+  "successText": "#06734e",
+  "successMuted": "#cee8df",
+  "infoMuted": "#cfdef7",
+  "infoText": "#0a45a6",
+  "muted2": "#aeaeb2",
+  "success": "#10b981",
+  "elevated": "#ffffff",
+  "info": "#3b82f6",
+  "surface": "#ffffff",
+  "text": "#222222",
+  "muted3": "#c7c7cc",
+  "muted6": "#f2f2f7",
+  "muted4": "#d1d1d6",
+  "textMuted": "#666666",
+  "warnText": "#8a6200",
+  "primaryMuted": "#d6ebdb",
+  "error": "#ef4444",
+  "muted1": "#8e8e93"
 };
 
 export type Token = "backdrop" | "background" | "border" | "elevated" | "error" | "errorMuted" | "errorText" | "focusRing" | "hoverHighlight" | "info" | "infoMuted" | "infoText" | "muted1" | "muted2" | "muted3" | "muted4" | "muted5" | "muted6" | "pressHighlight" | "primary" | "primaryMuted" | "primaryText" | "success" | "successMuted" | "successText" | "surface" | "text" | "textMuted" | "warn" | "warnMuted" | "warnText";
diff --git a/example/tokens/sizing.ts b/example/tokens/sizing.ts
@@ -2,13 +2,10 @@
 export const buttonHeightLarge = 60;
 export const buttonHeightNormal = 44;
 export const buttonHeightSmall = 32;
-export const buttonPaddingHorizontalLarge = 28;
-export const buttonPaddingHorizontalNormal = 24;
-export const buttonPaddingHorizontalSmall = 16;
 export const focusRingOffset = 2;
 export const focusRingSize = 1;
 export const iconSizeLarge = 32;
 export const iconSizeNormal = 24;
 export const iconSizeSmall = 16;
 
-export type Token = "buttonHeightLarge" | "buttonHeightNormal" | "buttonHeightSmall" | "buttonPaddingHorizontalLarge" | "buttonPaddingHorizontalNormal" | "buttonPaddingHorizontalSmall" | "focusRingOffset" | "focusRingSize" | "iconSizeLarge" | "iconSizeNormal" | "iconSizeSmall";
+export type Token = "buttonHeightLarge" | "buttonHeightNormal" | "buttonHeightSmall" | "focusRingOffset" | "focusRingSize" | "iconSizeLarge" | "iconSizeNormal" | "iconSizeSmall";