add Rgb Tokens to Style Dictionary

index.mjs

import StyleDictionary from "style-dictionary";
//using StyleDictionary Version 4.x.x

// Preprocessor function to add `-rgb` tokens with references
function addRgbTokens(dictionary, options) {
  const tokens = JSON.parse(JSON.stringify(dictionary)); // Clone the original dictionary
  function processTokens(obj, path = []) {
    /**
     *
     * @param {string} hex
     * @returns {{r: number, g: number, b:number}}
     */
    function getRgbFromHex(hex) {
      hex = hex.replace("#", "");
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      return {r, g, b};
    }

    /**
     *
     * @param {number} r
     * @param {number} g
     * @param {number} b
     * @returns {string}
     */
    function rgbValueTemplate(r = 0, g = 0, b = 0) {
      return `${r} ${g} ${b}`;
    }
    const rgbObjDefaults = {attributes: {category: "color"}};
    for (const key in obj) {
      if (
        typeof obj[key] === "object" &&
        obj[key] !== null &&
        "value" in obj[key]
      ) {
        if (typeof obj[key].value === "string") {
          // Check if the value is a reference or a hex color
          if (obj[key].value.startsWith("#")) {
            // Create an RGB reference from the hex value
            const {r, g, b} = getRgbFromHex(obj[key].value);
            obj[`${key}-rgb`] = {
              value: rgbValueTemplate(r, g, b),
              ...rgbObjDefaults,
            };
          } else if (isAReferenceValue(obj[key].value)) {
            // It's a reference to another token
            const refPath = obj[key].value.replace(".value", "").slice(1, -1);
            // .split(".").join("-");
            obj[`${key}-rgb`] = {
              value: `{${refPath}-rgb}`,
              ...rgbObjDefaults,
            };
          }
        }
      } else if (typeof obj[key] === "object" && obj[key] !== null) {
        processTokens(obj[key], path.concat(key)); // Recursively process nested tokens
      }
    }

    function isAReferenceValue(value) {
      return value.startsWith("{") && value.endsWith("}");
    }
  }
  processTokens(tokens);
  return tokens;
}
// Extend Style Dictionary configuration
const sd = new StyleDictionary({
  log: {
    warnings: "warn",
    verbosity: "verbose",
    errors: {
      brokenReferences: "throw",
    },
  },
  tokens: {
    color: {
      blue: {value: "#0d6efd", type: "color"},
      grey: {value: "#6c757d", type: "color"},
      green: {value: "#198754", type: "color"},
      azure: {value: "#0dcaf0", type: "color"},
      orange: {value: "#ffc107", type: "color"},
      red: {value: "#dc3545", type: "color"},
      primary: {value: "{color.blue}", type: "color"},
      secondary: {value: "{color.grey}", type: "color"},
      success: {value: "{color.green}", type: "color"},
      info: {value: "{color.azure}", type: "color"},
      warning: {value: "{color.orange}", type: "color"},
      danger: {value: "{color.red}", type: "color"},
      refered: {
        value: "rgb({color.primary-rgb} / .2)",
        type: "color",
      },
    },
  },
  hooks: {
    preprocessors: {
      addRgbTokens: addRgbTokens,
    },
  },
  preprocessors: ["addRgbTokens"], // Use the preprocessor function here
  platforms: {
    css: {
      // transformGroup: "css",
      buildPath: "build/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables",
          options: {
            outputReferences: true,
            formatting: {
              prefix: "--bs-",
            },
          },
        },
      ],
    },
  },
});
sd.buildAllPlatforms();

variables.css

/**
 * Output
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --bs-red-rgb: 220 53 69;
  --bs-orange-rgb: 255 193 7;
  --bs-azure-rgb: 13 202 240;
  --bs-green-rgb: 25 135 84;
  --bs-grey-rgb: 108 117 125;
  --bs-blue-rgb: 13 110 253;
  --bs-red: #dc3545;
  --bs-orange: #ffc107;
  --bs-azure: #0dcaf0;
  --bs-green: #198754;
  --bs-grey: #6c757d;
  --bs-blue: #0d6efd;
  --bs-danger-rgb: var(--bs-red-rgb);
  --bs-warning-rgb: var(--bs-orange-rgb);
  --bs-info-rgb: var(--bs-azure-rgb);
  --bs-success-rgb: var(--bs-green-rgb);
  --bs-secondary-rgb: var(--bs-grey-rgb);
  --bs-primary-rgb: var(--bs-blue-rgb);
  --bs-danger: var(--bs-red);
  --bs-warning: var(--bs-orange);
  --bs-info: var(--bs-azure);
  --bs-success: var(--bs-green);
  --bs-secondary: var(--bs-grey);
  --bs-primary: var(--bs-blue);
  --bs-refered: rgb(var(--bs-primary-rgb) / .2);
}