@progressiveui/themes-core 0.4.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@progressiveui/themes-core",
+  "description": "Themes for un core",
+  "version": "0.4.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wfp/designsystem.git",
+    "directory": "packages/styles"
+  },
+  "bugs": "https://github.com/wfp/designsystem/issues",
+  "keywords": [
+    "colors",
+    "themes",
+    "un",
+    "un core",
+    "components",
+    "react"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "node --stack-size=9900 scripts/runTheme.js",
+    "filter:theme": "node scripts/filterJson.js",
+    "sync:tokens": "node scripts/syncTokens.js",
+    "build:tokens": "yarn sync:tokens && yarn filter:theme && yarn build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "change-case": "^5.2.0",
+    "deepdash": "^5.3.9",
+    "dotenv": "^16.3.1",
+    "lodash": "^4.17.21",
+    "style-dictionary": "^3.9.0",
+    "token-transformer": "^0.0.33"
+  },
+  "gitHead": "a5bec728bba7e239d3d00104c0e24d1b13dd554b"
+}

package/scripts/config.js

@@ -0,0 +1,315 @@
+import StyleDictionary from "style-dictionary";
+import * as changeCase from "change-case";
+
+const { formatHelpers } = StyleDictionary;
+
+const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
+
+export const config = ({
+  source = `tokens/**/*.json`,
+  buildPath = `dist`,
+  themeName = "default",
+} = {}) => {
+  /* CSS Variables */
+  StyleDictionary.registerFormat({
+    name: "css/variables-theme",
+    formatter: function ({ dictionary, file, options }) {
+      const { outputReferences, theme } = options;
+      console.log("dictionary", outputReferences);
+
+      return (
+        fileHeader({ file, commentStyle: "short" }) +
+        `@mixin theme-${theme} () {\n` +
+        dictionary.allTokens
+          .map((token) => {
+            if (typeof token.value === "string") {
+              return `--${token.name}: ${token.value};`;
+            } else if (typeof token.value === "object") {
+              const tokensObject = Object.entries(token.value).map(([k, t]) => {
+                if (k === "fontFamily") {
+                  return `--${`${token.name}__${k}`}: "${t}";`;
+                }
+                return `--${`${token.name}__${k}`}: ${t};`;
+              });
+
+              var addition = "";
+              if (Object.keys(token.value).find((t) => t === "fontFamily")) {
+                addition = `\n--${token.name}: ${token.value.fontWeight} ${token.value.fontSize}/${token.value.lineHeight} "${token.value.fontFamily}", sans-serif;`;
+              }
+
+              if (Object.keys(token.value).find((t) => t === "spread")) {
+                addition = `\n--${token.name}: box-shadow: ${token.value.x}px ${token.value.y}px ${token.value.blur}px ${token.value.spread}px ${token.value.color};`;
+              }
+
+              return tokensObject.join("\n") + addition;
+            }
+          })
+          .join("\n") +
+        "\n}\n"
+      );
+
+      return (
+        fileHeader({ file }) +
+        `@mixin theme-${theme} () {\n` +
+        formattedVariables({
+          format: "css",
+          dictionary,
+          outputReferences,
+        }) +
+        "\n}\n"
+      );
+    },
+  });
+
+  StyleDictionary.registerFormat({
+    name: `scss/variables`,
+    formatter: function ({ dictionary }) {
+      return dictionary.allTokens
+        .map((token) => {
+          if (typeof token.value === "object") {
+            return null;
+          }
+          let value = JSON.stringify(token.value);
+          // the `dictionary` object now has `usesReference()` and
+          // `getReferences()` methods. `usesReference()` will return true if
+          // the value has a reference in it. `getReferences()` will return
+          // an array of references to the whole tokens so that you can access their
+          // names or any other attributes.
+          if (dictionary.usesReference(token.original.value)) {
+            // Note: make sure to use `token.original.value` because
+            // `token.value` is already resolved at this point.
+            const refs = dictionary.getReferences(token.original.value);
+            refs.forEach((ref) => {
+              value = value.replace(ref.value, function () {
+                return `${ref.name}`;
+              });
+            });
+          }
+
+          return `$${token.name}: var(--${token.name}, ${value}) !default;`;
+        })
+        .join(`\n`);
+    },
+  });
+
+  const scssTokenName = (token, options) => {
+    const tokenPath = token.path.filter(function (item, i) {
+      return !(
+        item === "color" ||
+        //(item === 'primary' && i === 1) ||
+        (item === "form" && i === 1)
+      );
+    });
+
+    return changeCase.kebabCase([options.prefix].concat(tokenPath).join(" "));
+  };
+
+  StyleDictionary.registerTransform({
+    type: "name",
+    transitive: true,
+    name: `name/scss`,
+    transformer: (token, options) => scssTokenName(token, options),
+  });
+
+  StyleDictionary.registerTransform({
+    type: "name",
+    transitive: true,
+    name: `name/jsonFlat`,
+    transformer: (token, options) => scssTokenName(token, options),
+  });
+
+  StyleDictionary.registerTransform({
+    type: "name",
+    transitive: true,
+    name: `name/scssDarkName`,
+    transformer: (token, options) =>
+      scssTokenName(token, options).replace("dark-", ""),
+  });
+
+  StyleDictionary.registerTransform({
+    type: `value`,
+    name: `value/fontSizePxToRem`,
+    matcher: (token) => token.type === "dimension",
+    transformer: (token) => token.value / 16 + "em",
+  });
+
+  StyleDictionary.registerTransform({
+    type: `value`,
+    name: `value/spacingPxToRem`,
+    matcher: (token) => token.type === "spacing",
+    transformer: (token) => parseInt(token.value.replace("px", "")) / 16 + "em",
+  });
+
+  StyleDictionary.registerTransform({
+    type: `attribute`,
+    name: `attribute/variablenames`,
+    matcher: (token) => true,
+    transformer: (token, options) => {
+      token.cssName = scssTokenName(token, options);
+      return token;
+    },
+  });
+
+  StyleDictionary.extend({
+    parsers: [
+      {
+        pattern: /\.json$/,
+        parse: ({ contents, filePath }) => {
+          var content = JSON.parse(contents);
+
+          // console.log(content);
+          //return content;
+          if (content.color) {
+            const { color, typography, ...other } = content;
+            let { primary, form, background, dark, ...otherColors } = color;
+            //console.log('color', color);
+            //console.log(JSON.parse(color.background));
+            /*let {
+              primary: primaryDark,
+              form: formDark,
+              //background: backgroundDark,
+              ...otherDarkColors
+            } = dark;
+            return {
+              ...primaryDark,
+              ...formDark,
+              // ...backgroundDark,
+              ...otherDarkColors,
+            };*/
+            return {
+              ...otherColors,
+              //...color.background,
+              ...form,
+              ...typography,
+              ...primary,
+              background: background,
+              ...other,
+              //background: color.background.background,
+            };
+          }
+          return content;
+        },
+      },
+    ],
+    source: [source],
+    platforms: {
+      figma: {
+        buildPath: buildPath + "/json/",
+        transforms: [
+          ///  'attribute/cti',
+          "attribute/color",
+          "attribute/variablenames",
+          "size/rem",
+          "name/jsonFlat",
+        ],
+        files: [
+          {
+            destination: "variables-full.json",
+            format: "json",
+          },
+        ],
+      },
+      scss: {
+        transformGroup: "scss",
+        buildPath: buildPath + "/scss/",
+        transforms: ["name/scss", "value/fontSizePxToRem", "size/rem"],
+        files: [
+          {
+            destination: "tokens.scss",
+            format: "scss/variables",
+            options: {
+              themeable: true,
+            },
+          },
+        ],
+      },
+      scssMapFlat: {
+        transformGroup: "scss",
+        buildPath: buildPath + "/scss/",
+        transforms: ["name/scss", "value/fontSizePxToRem", "size/rem"],
+        files: [
+          {
+            destination: "tokensMapFlat.scss",
+            format: "scss/map-flat",
+            options: {
+              themeable: true,
+            },
+          },
+        ],
+      },
+      scssMapDeep: {
+        transformGroup: "scss",
+        buildPath: buildPath + "/scss/",
+        transforms: ["name/scss", "value/fontSizePxToRem", "size/rem"],
+        files: [
+          {
+            destination: "tokensMapDeep.scss",
+            format: "scss/map-deep",
+            options: {
+              themeable: true,
+            },
+          },
+        ],
+      },
+      scssDefaultTheme: {
+        transformGroup: "css",
+        buildPath: buildPath + "/scss/",
+        transforms: [
+          "name/scss",
+          "value/fontSizePxToRem",
+          "size/rem",
+          "size/px",
+        ],
+        files: [
+          {
+            destination: "default-css-theme.scss",
+            format: "css/variables-theme",
+            options: {
+              outputReferences: true,
+              theme: themeName,
+            },
+          },
+        ],
+      },
+      /*scssDark: {
+        transformGroup: 'css',
+        buildPath: buildPath + '/scss/',
+        transforms: ['name/scssDarkName', 'value/fontSizePxToRem'],
+        files: [
+          {
+            destination: 'dark-css-theme.scss',
+            format: 'css/variables-theme',
+            filter: function (token) {
+              return token.path[1] === 'dark';
+            },
+            options: {
+              outputReferences: true,
+              theme: 'dark',
+            },
+          },
+        ],
+
+        parse: ({ contents, filePath }) => {
+          var content = JSON.parse(contents);
+          return null;
+          // return content;
+          if (content.color) {
+            const { color, typography, ...other } = content;
+            const { primary, form, background, ...otherColors } = color;
+            return {
+              // ...otherColors,
+              //...color.background,
+              //...form,
+              ...typography,
+              ...primary,
+              //background: background,
+              // ...other,
+              //background: color.background.background,
+            };
+          }
+          return content;
+        },
+      },*/
+    },
+  }).buildAllPlatforms();
+};

package/scripts/filterJson.js

@@ -0,0 +1,99 @@
+import { readFileSync, writeFileSync } from "fs";
+
+let json = JSON.parse(readFileSync("./figmaTokenStudio/tokens.json", "utf8"));
+
+export function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
+
+export function mergeDeep(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}
+
+function removeUnusedKeys(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return obj;
+  }
+
+  // List of keys to remove
+  const keysToRemove = [
+    "textDecoration",
+    "textCase",
+    "paragraphSpacing",
+    "paragraphIndent",
+  ];
+
+  // If the object has any of the keys to be removed, delete them
+  for (const key of keysToRemove) {
+    if (key in obj) {
+      delete obj[key];
+    }
+  }
+
+  // Iterate over the object's keys and apply the function recursively
+  for (let key in obj) {
+    obj[key] = removeUnusedKeys(obj[key]);
+  }
+
+  return obj;
+}
+
+if (!String.prototype.endsWith) {
+  Object.defineProperty(String.prototype, "endsWith", {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: function (searchString, position) {
+      position = position || this.length;
+      position = position - searchString.length;
+      var lastIndex = this.lastIndexOf(searchString);
+      return lastIndex !== -1 && lastIndex === position;
+    },
+  });
+}
+
+function addCategoryToLeaves(obj, category) {
+  let newObj = Array.isArray(obj) ? [] : {};
+
+  Object.keys(obj).forEach((key) => {
+    if (key === "value") {
+      newObj["category"] = category;
+    }
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      newObj[key] = addCategoryToLeaves(obj[key], category);
+    } else {
+      newObj[key] = obj[key];
+    }
+  });
+  return newObj;
+}
+
+// TODO: Cleanup duplicate names in tokens
+json = mergeDeep(
+  mergeDeep(
+    addCategoryToLeaves(json.Global, "global"),
+    addCategoryToLeaves(json.System, "system")
+  ),
+  addCategoryToLeaves(json.Component, "component")
+);
+
+json = removeUnusedKeys(json);
+
+writeFileSync(
+  "./tokens/design-tokens.tokens.new.json",
+  JSON.stringify(json, null, 2)
+);

package/scripts/runTheme.js

@@ -0,0 +1,7 @@
+import { config } from "./config.js";
+
+config({
+  source: `tokens/**/*.json`,
+  buildPath: "dist", //`distDark`,
+  //themeName: 'default', //'dark',
+});

package/scripts/syncTokens.js

@@ -0,0 +1,46 @@
+import axios from "axios";
+import fs from "fs";
+import "dotenv/config";
+
+if (!process.env.GIT_ACCESS_TOKEN) {
+  console.error("No GIT_ACCESS_TOKEN found in .env");
+  process.exit(1);
+}
+
+// Azure DevOps details
+const organization = "worldfoodprogramme";
+const project = "Design%20System";
+const repository = "tokens";
+const filePath = "tokens.json";
+const apiVersion = "7.0";
+
+const url = `https://dev.azure.com/${organization}/${project}/_apis/git/repositories/${repository}/items?path=/${filePath}&api-version=${apiVersion}&download=true`;
+
+axios
+  .get(url, {
+    headers: {
+      Authorization: `Basic ${Buffer.from(
+        process.env.GIT_ACCESS_TOKEN
+      ).toString("base64")}`,
+      Accept: "application/text",
+    },
+  })
+  .then((response) => {
+    fs.writeFileSync(
+      "figmaTokenStudio/tokens.json",
+      JSON.stringify(response.data, null, 2)
+    );
+    console.log(
+      "🐝 Tokens downloaded successfully and saved under figmaTokenStudio/tokens.json"
+    );
+  })
+  .catch((error) => {
+    console.log(error.response.status);
+    if (error.response.status === 401) {
+      console.error(
+        "Invalid GIT_ACCESS_TOKEN found in .env file. Correct format is username:private_access_token"
+      );
+    } else {
+      console.error("Error fetching file:", error);
+    }
+  });