jellyfish_designtokens/getBrandFiles.js

Ultimate design tokens from Jelly Fish Design System

//This function reads the name of all folders that are on the first level inside the "BRANDS" folder
//Creates an array of these names called "brandNames"

const fs = require("fs");
const path = require("path");

function getSubfolderNames(rootFolderPath) {
  try {
    const subfolderNames = fs
      .readdirSync(rootFolderPath, { withFileTypes: true })
      .filter((dirent) => dirent.isDirectory())
      .map((dirent) => dirent.name);

    return subfolderNames;
  } catch (error) {
    console.error("Error reading folder:", error);
    return [];
  }
}

const brandsFolderPath = path.join(__dirname, "figma", "BRANDS");
const brandNames = getSubfolderNames(brandsFolderPath);
const themesNames = ["LIGHT", "DARK"];
const baseFileNames = ["System", "Typeset", "Dimensions", "States", "Shapes"]


console.log(brandNames);

//This function determines the configuration of files for each brand/theme

function configBrandFiles(brand, theme) {
  const selector = theme !== "LIGHT"
  ? `html[data-theme="${theme.toLowerCase()}"]`
  : `:root, html[data-theme="${theme.toLowerCase()}"]`;
  return {
    include: ["figma/**/*.+(json)"],
    source: [
      `figma/BRANDS/${brand}/02_THEMES/${theme}/*.json`,
      `figma/BRANDS/${brand}/01_BASE/**/*.json`,
      `figma/BRANDS/${brand}/03_ASSETS/**/*.json`,
    ],
    platforms: {
      scss: {
        transformGroup: "jellyfish/web",
        buildPath: `dist/${brand.toLowerCase()}/`,
        files: [
          {
            filter: (token) =>
              token.filePath.includes(
                `figma/BRANDS/${brand}/02_THEMES/${theme}/`) || token.filePath.includes(`figma/BRANDS/${brand}/01_BASE/`),
            destination: `${theme.toLowerCase()}.css`,
            format: "css/variables",
            options:{
              selector: selector
            }
          }
        ],
        files: [
          {
            filter: (token) =>
              token.filePath.includes(
                `figma/BRANDS/${brand}/03_ASSETS/`),
            destination: `assets.css`,
            format: "css/variables",
            options:{
              selector: ":root"
            }
          }
        ],
        
      }
    },
  };
}




module.exports = {
  brandNames,
  themesNames,
  baseFileNames,
  configBrandFiles,
};