@digigov/cli-theme-colors 1.0.0-rc.21

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,11 @@
+{
+  "../../tooling/cli-theme-colors": "../../tooling/cli-theme-colors:8ym4c0GEJGHHNRG7ngMe8eVYStPlxBLLTPcy+vS0qmQ=:",
+  "/@adobe/leonardo-contrast-colors@1.0.0-alpha.13": "Missing shrinkwrap entry!",
+  "/fs-extra@11.2.0": "Missing shrinkwrap entry!",
+  "/glob@7.1.6": "Missing shrinkwrap entry!",
+  "/polished@4.3.1": "Missing shrinkwrap entry!",
+  "/postcss-js@4.0.0(postcss@8.4.4)": "Missing shrinkwrap entry!",
+  "/postcss-load-config@3.1.4(postcss@8.4.4)(ts-node@10.9.2(@types/node@18.19.0)(typescript@5.6.2))": "Missing shrinkwrap entry!",
+  "/postcss@8.4.4": "Missing shrinkwrap entry!",
+  "/publint@0.1.8": "Missing shrinkwrap entry!"
+}

package/index.js

@@ -0,0 +1,64 @@
+const { resolveProject, DigigovCommand } = require("@digigov/cli/lib");
+const fs = require("fs");
+const path = require("path");
+const generateThemeColors = require("./leo-colors.js");
+const postcss = require("postcss");
+const postcssJs = require("postcss-js");
+
+module.exports = class CreateTailwindTheme extends DigigovCommand {
+  static description = "generate CSS colors";
+  static id = "generate-colors";
+  dirname = __dirname;
+  static examples = [`$ digigov generate-colors`];
+  static strict = true;
+
+  static args = [
+    {
+      name: "theme",
+      description:
+        "Generate colors for only the specified theme. Otherwise, colors of all defined themes are generated.",
+    },
+  ];
+
+  static load() {
+    return CreateTailwindTheme;
+  }
+
+  async run() {
+    const { args } = this.parse(CreateTailwindTheme);
+    try {
+      const project = resolveProject();
+      const brandConfigPath = path.join(project.root, "brandConfig.json");
+
+      if (!fs.existsSync(brandConfigPath))
+        return console.log("No `brandConfig.json` found");
+
+      const colorsFilePath = path.join(project.root, "colors.css");
+      if (fs.existsSync(colorsFilePath))
+        return console.log("`colors.css` already exists");
+
+      const brandConfig = JSON.parse(fs.readFileSync(brandConfigPath, "utf8"));
+      const defaultThemeName = brandConfig.defaultTheme;
+
+      const colorsObject = generateThemeColors(brandConfig, args.theme);
+      const cssObject = Object.keys(colorsObject).reduce(
+        (acc, currentThemeName) => {
+          const rootSelector =
+            defaultThemeName === currentThemeName
+              ? ":root"
+              : `:root.${currentThemeName}, .${currentThemeName}`;
+          acc[rootSelector] = colorsObject[currentThemeName];
+          return acc;
+        },
+        {},
+      );
+      const css = await postcss()
+        .process(cssObject, { from: null, parser: postcssJs })
+        .then((res) => res.css);
+
+      fs.writeFileSync(colorsFilePath, css);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+};

package/leo-colors.js

@@ -0,0 +1,247 @@
+const {
+  Theme,
+  Color,
+  BackgroundColor,
+} = require("@adobe/leonardo-contrast-colors");
+const polished = require("polished");
+
+module.exports = function generateColors(config, specifiedTheme) {
+  if (specifiedTheme)
+    return {
+      [specifiedTheme]: createThemeColorsObject(config, specifiedTheme),
+    };
+
+  const allThemes = Object.keys(config.themes).filter(
+    (themeName) => themeName !== "default",
+  );
+  return allThemes.reduce((acc, themeName) => {
+    const themeColors = createThemeColorsObject(config, themeName);
+    acc[themeName] = themeColors;
+    return acc;
+  }, {});
+};
+
+function createThemeColorsObject(config, specifiedTheme) {
+  console.log(`generating colors for ${specifiedTheme} theme`);
+  const lightness = config.themes[specifiedTheme]._config.lightness;
+  const fgColor = config.themes[specifiedTheme]._config.fgColor;
+
+  const { colors: dynamicColors, backgroundColorObject } = createColors(
+    config.colors.dynamic,
+    config.contrastRatios,
+    config.backgroundColor,
+    config.backgroundContrastRatios,
+  );
+  const theme = new Theme({
+    colors: dynamicColors,
+    backgroundColor: backgroundColorObject,
+    lightness,
+    fgColor,
+    contrast: 1,
+  });
+  const { colors: staticColors } = createColors(
+    config.colors.static,
+    null,
+    null,
+    null,
+  );
+  const staticTheme = new Theme({
+    colors: staticColors,
+    backgroundColor: backgroundColorObject,
+    lightness: 100,
+    fgColor,
+    contrast: 1,
+  });
+  staticTheme.contrastColors.shift(1);
+  const colors = theme.contrastColors.concat(
+    staticTheme.contrastColors.map((sColor) => {
+      sColor.values[0].value = config.colors.static[sColor.name][0];
+      return sColor;
+    }),
+  );
+  const brandColorObjects = createBrandColors(config.brandColors);
+  const brandTheme = new Theme({
+    colors: brandColorObjects,
+    backgroundColor: backgroundColorObject,
+    lightness: 100,
+    fgColor,
+    contrast: 1,
+  });
+  const brandColorNames = Object.keys(config.brandColors);
+  brandTheme.contrastColors.shift(1);
+  const brandColors = brandTheme.contrastColors.map((color, index) => {
+    color.values = [
+      {
+        name: brandColorNames[index],
+        value: config.brandColors[brandColorNames[index]],
+      },
+      color.values[0],
+      {
+        ...color.values[1],
+        value: config.brandColors[brandColorNames[index]],
+      },
+      color.values[2],
+    ];
+    return color;
+  });
+
+  const themeNames = Object.keys(config.themes).filter(
+    (name) => name !== "default",
+  );
+
+  const themesConfig = Object.keys(config.themes).reduce(
+    (newThemesConfig, themeName) => {
+      if (themeNames.includes(themeName)) {
+        newThemesConfig[themeName] = {
+          ...config.themes.default,
+          ...config.themes[themeName],
+        };
+        delete newThemesConfig[themeName]._config;
+      }
+      return newThemesConfig;
+    },
+    {},
+  );
+
+  const activeSemanticColors = getSemanticColors(
+    themesConfig[specifiedTheme],
+    colors,
+  );
+
+  let jsonTheme = colors
+    .filter((color) => color.name !== undefined)
+    .concat(brandColors)
+    .concat(activeSemanticColors)
+    .reduce((acc, cur) => {
+      const { name: groupName, values } = cur;
+      const group = groupName.trim().toLowerCase().replace(/\s+/g, "-");
+      acc[group] = {};
+      if (values) {
+        values.forEach((colorVal) => {
+          const { name, value } = colorVal;
+          let colorNum = name.match(/\d+/g) ? name.match(/\d+/g)[0] : name;
+          if (group === colorNum) {
+            colorNum = "default";
+          }
+          acc[group][colorNum] = value;
+          return;
+        });
+        return acc;
+      }
+      return acc;
+    }, {});
+
+  return extractColorVars(jsonTheme);
+}
+
+function createColors(
+  colorConfig,
+  contrastRatios,
+  backgroundColor,
+  backgroundContrastRatios,
+) {
+  let backgroundColorObject;
+  const colors = Object.keys(colorConfig).map((key) => {
+    if (key === backgroundColor) {
+      backgroundColorObject = new BackgroundColor({
+        name: key,
+        colorKeys: colorConfig[key],
+        ratios: backgroundContrastRatios,
+        colorspace: "CAM02",
+        smooth: true,
+      });
+      return backgroundColorObject;
+    } else {
+      if (typeof colorConfig[key] === "string") {
+        colorConfig[key] = [colorConfig[key]];
+      }
+      if (!contrastRatios) {
+        contrastRatios = [polished.getContrast("#fff", colorConfig[key][0])];
+      }
+
+      return new Color({
+        name: key,
+        colorKeys: colorConfig[key],
+        ratios: contrastRatios,
+        colorspace: "CAM02",
+        smooth: true,
+      });
+    }
+  });
+  return { colors, backgroundColorObject };
+}
+
+function getColorByNameAndNumber(valueName, valueNumber, colors) {
+  let color = colors
+    .find((color) => color.name === valueName)
+    .values.find((color) => color.name === valueName + valueNumber);
+  return color;
+}
+function getSemanticColorShades(semanticColor, states, colors) {
+  let values = [];
+
+  Object.keys(states).forEach((key) => {
+    values.push({
+      name: key,
+      contrast: getColorByNameAndNumber(states[key][0], states[key][1], colors)
+        .contrast,
+      value: getColorByNameAndNumber(states[key][0], states[key][1], colors)
+        .value,
+    });
+  });
+  return {
+    name: semanticColor,
+    values: values,
+  };
+}
+
+function getSemanticColors(values, paletteColors) {
+  return Object.keys(values).map((key) => {
+    return getSemanticColorShades(key, values[key], paletteColors);
+  });
+}
+
+function createBrandColors(brandColorConfig) {
+  return Object.keys(brandColorConfig).map((colorKey) => {
+    const colorValue = brandColorConfig[colorKey];
+    return new Color({
+      name: colorKey,
+      colorKeys: [colorValue],
+      ratios: [
+        polished.getContrast("#fff", colorValue) -
+          polished.getContrast("#fff", colorValue) * 0.25,
+        polished.getContrast("#fff", colorValue),
+        polished.getContrast("#fff", colorValue) +
+          polished.getContrast("#fff", colorValue) * 0.25,
+      ],
+      colorspace: "CAM02",
+      smooth: true,
+    });
+  });
+}
+
+function extractColorVars(colorObj, colorGroup = "") {
+  return Object.keys(colorObj).reduce((vars, colorKey) => {
+    const value = colorObj[colorKey];
+    const colorName =
+      colorKey == "default"
+        ? `--color${colorGroup}`
+        : `--color${colorGroup}-${colorKey}`;
+    const newVars =
+      typeof value === "string"
+        ? {
+            [colorName]: value,
+            [`${colorName}-rgb`]: hexToRGB(value),
+          }
+        : extractColorVars(value, `-${colorKey}`);
+    return { ...vars, ...newVars };
+  }, {});
+}
+
+function hexToRGB(hex) {
+  const r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
+
+  return r + ", " + g + ", " + b;
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@digigov/cli-theme-colors",
+  "version": "1.0.0-rc.21",
+  "description": "CLI for generating CSS colors",
+  "main": "./index.js",
+  "author": "GRNET Devs <devs@lists.grnet.gr>",
+  "license": "BSD-2-Clause",
+  "private": false,
+  "dependencies": {
+    "fs-extra": "11.2.0",
+    "glob": "7.1.6",
+    "postcss": "8.4.4",
+    "postcss-js": "4.0.0",
+    "postcss-load-config": "3.1.4",
+    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
+    "polished": "4.3.1"
+  },
+  "devDependencies": {
+    "publint": "0.1.8"
+  },
+  "peerDependencies": {
+    "@digigov/cli": "1.1.1-rc.21"
+  },
+  "scripts": {
+    "publint": "publint"
+  }
+}