@sit-onyx/figma-utils 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/commands/import-variables.d.ts

@@ -6,6 +6,7 @@ export type ImportVariablesCommandOptions = {
     filename?: string;
     dir?: string;
     modes?: string[];
+    combinesDarkLight?: boolean;
     selector: string;
 };
 export declare const importVariablesCommand: Command;

package/dist/commands/import-variables.js

@@ -10,6 +10,7 @@ export const importVariablesCommand = new Command("import-variables")
     .option("-n, --filename <string>", "Base name / prefix of the generated variables file. Will append the mode name")
     .option("-d, --dir <string>", "Working directory to use. Defaults to current working directory of the script.")
     .option("-m, --modes <strings...>", "Can be used to only export specific Figma modes. If unset, all modes will be exported as a separate file.")
+    .option("-c, --combines-dark-light", "Combines the dark theme data with the light theme data by using the light-dark() CSS function")
     .option("-s, --selector <string>", 'CSS selector to use for the CSS format. You can use {mode} as placeholder for the mode name, so e.g. for the mode named "dark", passing the selector "html.{mode}" will result in "html.dark"', ":root")
     .action(importVariablesCommandAction);
 /**
@@ -17,9 +18,9 @@ export const importVariablesCommand = new Command("import-variables")
  */
 export async function importVariablesCommandAction(options) {
     const generators = {
-        CSS: (data) => generateAsCSS(data, { selector: options.selector }),
-        SCSS: generateAsSCSS,
-        JSON: generateAsJSON,
+        CSS: (data, dataDark) => generateAsCSS(data, { selector: options.selector, dataDarkTheme: dataDark }),
+        SCSS: (data, dataDark) => generateAsSCSS(data, { dataDarkTheme: dataDark }),
+        JSON: (data) => generateAsJSON(data),
     };
     options.format.forEach((format) => {
         if (!(format in generators)) {
@@ -59,8 +60,17 @@ export async function importVariablesCommandAction(options) {
             if (!isModeIncluded)
                 return;
             const baseName = getBaseFileName(data.modeName);
-            const fullPath = path.join(outputDirectory, `${baseName}.${format.toLowerCase()}`);
-            fs.writeFileSync(fullPath, generators[format](data));
+            if (options.combinesDarkLight) {
+                const themeName = baseName.split("-")[0];
+                const fullPath = path.join(outputDirectory, `${themeName}.${format.toLowerCase()}`);
+                // find the matching theme
+                const dataDark = parsedVariables.find((themeData) => themeData.modeName === themeName + "-dark");
+                fs.writeFileSync(fullPath, generators[format](data, dataDark));
+            }
+            else {
+                const fullPath = path.join(outputDirectory, `${baseName}.${format.toLowerCase()}`);
+                fs.writeFileSync(fullPath, generators[format](data));
+            }
         });
     });
     console.log("Done.");

package/dist/types/figma.d.ts

@@ -23,7 +23,7 @@ export type Variable = {
     deletedButReferenced?: boolean;
     valuesByMode: Record<string, VariableValue>;
 };
-export type VariableValue = RGBAValue | ColorsAlias | number;
+export type VariableValue = RGBAValue | ColorsAlias | number | string;
 export type RGBAValue = {
     r: number;
     g: number;

package/dist/variables/generate.d.ts

@@ -7,6 +7,10 @@ export type BaseGenerateOptions = {
      * @default false
      */
     resolveAlias?: boolean;
+    /**
+     * Parsed Figma variables for an additionally dark theme.
+     */
+    dataDarkTheme?: ParsedVariable;
 };
 export type GenerateAsCSSOptions = BaseGenerateOptions & {
     /**
@@ -69,7 +73,10 @@ export declare const generateTimestampComment: (modeName?: string) => string;
  * @example "{your-variable-name}"
  * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
  */
-export declare const isAliasVariable: (variableValue: string) => {
+export declare const isAliasVariable: (variableValue?: string) => {
+    isAlias: boolean;
+    aliasName: string;
+} | {
     isAlias: RegExpExecArray | null;
     aliasName: string;
 };

package/dist/variables/generate.js

@@ -76,6 +76,8 @@ export const generateTimestampComment = (modeName) => {
  * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
  */
 export const isAliasVariable = (variableValue) => {
+    if (!variableValue)
+        return { isAlias: false, aliasName: "" };
     const isAlias = /{.*}/.exec(variableValue);
     const aliasName = variableValue.replace("{", "").replace("}", "");
     return { isAlias, aliasName };
@@ -85,17 +87,37 @@ export const isAliasVariable = (variableValue) => {
  * represents a single line of the file.
  *
  * @param variables Variable data (name + value)
+ * @param variablesDarkTheme Variable data (name +value) for additionally dark theme
  * @param nameFormatter Function to format the variable name
  * @param aliasFormatter Function to format a reference to another variable (e.g. `var(--name)` for CSS)
  * @param options Generator options
  */
 const getCssOrScssVariableContent = (variables, nameFormatter, aliasFormatter, options) => {
+    const variablesDarkTheme = options?.dataDarkTheme?.variables;
     return Object.entries(variables).map(([name, value]) => {
-        const { isAlias, aliasName } = isAliasVariable(value);
-        let variableValue = isAlias ? aliasFormatter(aliasName) : value;
-        if (isAlias && options?.resolveAlias) {
-            variableValue = resolveValue(name, variables);
+        const lightRawValue = value;
+        const darkRawValue = variablesDarkTheme?.[name];
+        const { isAlias: isLightAlias, aliasName: lightAliasName } = isAliasVariable(lightRawValue);
+        const { isAlias: isDarkAlias, aliasName: darkAliasName } = isAliasVariable(darkRawValue ?? lightRawValue);
+        let lightValue = isLightAlias ? aliasFormatter(lightAliasName) : lightRawValue;
+        let darkValue = isDarkAlias ? aliasFormatter(darkAliasName) : (darkRawValue ?? lightRawValue);
+        if (options?.resolveAlias) {
+            if (isLightAlias) {
+                lightValue = resolveValue(name, variables);
+            }
+            if (isDarkAlias) {
+                darkValue = resolveValue(name, variablesDarkTheme ?? {});
+            }
         }
-        return `${nameFormatter(name)}: ${variableValue};`;
+        const formattedName = nameFormatter(name);
+        if (variablesDarkTheme && darkRawValue) {
+            if (lightValue === darkValue) {
+                return `${formattedName}: ${lightValue};`;
+            }
+            else {
+                return `${formattedName}: light-dark(${lightValue}, ${darkValue});`;
+            }
+        }
+        return `${formattedName}: ${lightValue};`;
     });
 };

package/dist/variables/parse.d.ts

@@ -26,7 +26,7 @@ export declare const parseFigmaVariables: (apiResponse: FigmaVariablesApiRespons
  * @param value Figma variable value
  * @param allVariables Object of all variables. Needed for variables that use aliases.
  */
-export declare const resolveFigmaVariableValue: (value: VariableValue, allVariables: Record<string, Variable>, remBase?: ParseFigmaVariablesOptions["remBase"]) => string;
+export declare const resolveFigmaVariableValue: (value: VariableValue, allVariables: Record<string, Variable>, remBase?: ParseFigmaVariablesOptions["remBase"], name?: string) => string;
 /**
  * Converts a RGBA value to a hex color.
  * Transparency will only be added if its not 1, e.g. "#000000" instead of "#000000ff"

package/dist/variables/parse.js

@@ -21,7 +21,7 @@ export const parseFigmaVariables = (apiResponse, options) => {
         // parse variable value for every mode
         Object.values(collection.modes).forEach((mode) => {
             const variableName = normalizeVariableName(variable.name);
-            const variableValue = resolveFigmaVariableValue(variable.valuesByMode?.[mode.modeId], apiResponse.meta.variables, options?.remBase);
+            const variableValue = resolveFigmaVariableValue(variable.valuesByMode?.[mode.modeId], apiResponse.meta.variables, options?.remBase, variableName);
             // add/update parsed variable value
             const existingIndex = parsedData.findIndex((i) => i.modeName === mode.name);
             if (existingIndex !== -1) {
@@ -73,8 +73,10 @@ export const parseFigmaVariables = (apiResponse, options) => {
  * @param value Figma variable value
  * @param allVariables Object of all variables. Needed for variables that use aliases.
  */
-export const resolveFigmaVariableValue = (value, allVariables, remBase = 16) => {
+export const resolveFigmaVariableValue = (value, allVariables, remBase = 16, name) => {
     if (typeof value === "number") {
+        if (name?.includes("font-weight"))
+            return `${value}`;
         // numeric value, parse as rem or pixel value
         // note: value 0 should also be parsed as "0rem" instead of just "0" because otherwise
         // the CSS variable could not be used together with "calc()"
@@ -82,6 +84,9 @@ export const resolveFigmaVariableValue = (value, allVariables, remBase = 16) =>
             return `${value}px`;
         return `${value / remBase}rem`;
     }
+    if (typeof value === "string") {
+        return `"${value}"`;
+    }
     if ("type" in value) {
         // parse value as alias
         if (value.type !== "VARIABLE_ALIAS") {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/figma-utils",
   "description": "Utility functions and CLI for importing data from the Figma API into different formats (e.g. CSS, SCSS etc.)",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "type": "module",
   "bin": {
     "@sit-onyx/figma-utils": "./dist/cli.js"