@tfk-samf/figma-to-dtcg - npm Package Compare versions

Comparing version 0.3.6 to 0.3.8

dist/index.d.ts

@@ -33,3 +33,3 @@ import { RGB, LocalVariable, GetLocalVariablesResponse } from '@figma/rest-api-spec';
 export type Options = {
-    verbosity?: "silent" | "verbose";
+    verbosity?: 'silent' | 'verbose';
 };
@@ -51,14 +51,12 @@ export type DesignTokenType = 'color' | 'number' | 'fontFamily' | 'boolean';
 export type Node = Exclude<Tree, Token>;
-export type GenericCollection = 'border' | 'spacing' | 'typography' | 'icon';
-export type OrganisationCollection = 'color_palette' | 'theme';
-export type TokenType = GenericCollection & OrganisationCollection;
-export type Organization = 'atb' | 'fram' | 'innlandet' | 'nfk' | 'svipper';
-export type Mode = 'light' | 'dark';
-export type Theme = `${Organization}_${Mode}` | Organization;
-export type Tokens = {
-    [orgCol in OrganisationCollection]?: {
-        [theme in Theme]?: Tree;
+export type Tokens<Themes extends string, Variants extends string, SharedCollections extends string, InvariantCollections extends string, VariantCollections extends string> = {
+    [sc in SharedCollections]?: Tree;
+} & {
+    [ic in InvariantCollections]?: {
+        [theme in Themes]?: Tree;
     };
 } & {
-    [genCol in GenericCollection]?: Tree;
+    [vc in VariantCollections]?: {
+        [theme in `${Themes}_${Variants}`]?: Tree;
+    };
 };
@@ -69,8 +67,31 @@ /**
  *
+ * **Typing of the returned Tokens object using generics**
+ *
+ * 1. Themes = keys of the available themes
+ *
+ * Example: type Themes = "normal" | "halloween" | "easter"
+ *
+ * 2. Variants = keys of variants for each theme
+ *
+ * Example: type Variants = "light" | "dark"
+ *
+ * 3. SharedCollections = Keys of collections that do not change across themes
+ *
+ * example: "border" | "spacing"
+ *
+ * 4. InvariantCollections = Keys of collections that do not change according to variant of a theme,
+ * but change across themes
+ *
+ * Example: "color_palette"
+ *
+ * 5. VariantCollections = Keys of collections that change according to theme variant
+ *
+ * Example: "themes"
+ *
  * @param props
  * @returns `{ tokens }` Design Tokens in W3C spec
  */
-declare function useFigmaToDTCG(props: RestAPIProps | PluginAPIProps, options?: Options): Promise<{
-    tokens: Tokens;
+declare function useFigmaToDTCG<Themes extends string = any, Variants extends string = any, SharedCollections extends string = any, InvariantCollections extends string = any, VariantCollections extends string = any>(props: RestAPIProps | PluginAPIProps, options?: Options): Promise<{
+    tokens: Tokens<Themes, Variants, SharedCollections, InvariantCollections, VariantCollections>;
 }>;
 export { useFigmaToDTCG };

dist/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const figmaDesignTokenTypeMap = {
@@ -8,3 +9,3 @@ COLOR: 'color',
 let globalOptions = {};
-const isVerbose = () => globalOptions.verbosity === "verbose";
+const isVerbose = () => globalOptions.verbosity === 'verbose';
 let getVariableById;
@@ -151,3 +152,3 @@ /**
     variables: for (const variableId of variableIds) {
-        const { name, resolvedType, valuesByMode, remote } = (await getVariableById(variableId));
+        const { name, resolvedType, valuesByMode, remote, } = (await getVariableById(variableId));
         if (remote) {
@@ -157,3 +158,3 @@ if (isVerbose()) {
             }
-            continue variables;
+            continue;
         }
@@ -188,6 +189,29 @@ for (const mode of modeKeys) {
  *
+ * **Typing of the returned Tokens object using generics**
+ *
+ * 1. Themes = keys of the available themes
+ *
+ * Example: type Themes = "normal" | "halloween" | "easter"
+ *
+ * 2. Variants = keys of variants for each theme
+ *
+ * Example: type Variants = "light" | "dark"
+ *
+ * 3. SharedCollections = Keys of collections that do not change across themes
+ *
+ * example: "border" | "spacing"
+ *
+ * 4. InvariantCollections = Keys of collections that do not change according to variant of a theme,
+ * but change across themes
+ *
+ * Example: "color_palette"
+ *
+ * 5. VariantCollections = Keys of collections that change according to theme variant
+ *
+ * Example: "themes"
+ *
  * @param props
  * @returns `{ tokens }` Design Tokens in W3C spec
  */
-async function useFigmaToDTCG(props, options = { verbosity: "silent" }) {
+async function useFigmaToDTCG(props, options = { verbosity: 'silent' }) {
     globalOptions = options;
@@ -194,0 +218,0 @@ const isRestApiEnv = (p) => p.api === 'rest';

package.json

 {
   "name": "@tfk-samf/figma-to-dtcg",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Parse Figma Variables Plugin API and REST API into design tokens.",
@@ -35,3 +35,3 @@ "files": [
   },
-  "gitHead": "efc46e323a5deca19acbcb131235f2062b50a583"
+  "gitHead": "b50bedaad4e5b8e6c10c2a3550ed8491f832ed06"
 }

No alert changes

Improved metrics

Total package byte prevSize

16639

increased by9.91%

Lines of code

332

increased by15.68%

No dependency changes