@maggioli-design-system/design-tokens/dist/src/lib/color.mjs

This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.

import { BackgroundColor, Color, Theme, } from "@/leonardo/index.js";
import chalk from "chalk";
import DEFAULTS from "../config/default-color.json" with { type: "json" };
import { deepMerge } from "./utils.mjs";
function getBackgroundColor(formula = "wcag3") {
    return new BackgroundColor({
        colorKeys: ["#000000"],
        colorspace: DEFAULTS.colorspace,
        name: "backgroud",
        ratios: DEFAULTS.ratios[formula].tone,
        smooth: DEFAULTS.smooth,
    });
}
export function formatColortoTokens(contrastColors, colorName, colorValue, seed, colorMode) {
    const palette = {};
    contrastColors.forEach((element) => {
        if (element.name === colorName) {
            const paletteSource = element.values;
            paletteSource.toReversed().forEach((element, index) => {
                let codeIndex = 0;
                codeIndex = index + 1;
                const colorCode = codeIndex;
                palette[colorCode] = { value: element.value };
                if (paletteSource.length === index + 1) {
                    palette.color = { value: colorValue };
                    if (seed !== undefined && colorMode !== undefined) {
                        palette.color = { value: seed[colorMode] };
                    }
                }
            });
        }
    });
    return palette;
}
export function createColor(colorItem, config) {
    const formula = (colorItem.formula ?? config.formula);
    return new Color({
        colorKeys: [colorItem.color],
        colorspace: colorItem.colorspace !== undefined
            ? colorItem.colorspace
            : config.colorspace,
        name: colorItem.name,
        ratios: colorItem.ratios !== undefined
            ? config.ratios[formula][colorItem.ratios]
            : config.ratios[formula].default,
        smooth: colorItem.smooth ?? config.smooth,
    });
}
/**
 * Create color tokens from co
 * @param magmaConfig
 * @returns
 */
export function createColorTokens(magmaConfig) {
    const config = deepMerge(DEFAULTS, magmaConfig);
    const palette = {
        wcag2: [],
        wcag3: [],
    };
    config.colors.forEach((element) => {
        palette[element.formula ?? config.formula].push(createColor(element, config));
    });
    const backgroundColor = getBackgroundColor();
    const backgroundColorWcag2 = getBackgroundColor("wcag2");
    // it doesnt matter backgroundColor color in this case because the lightness is 100 or 0
    // so the background color is basically #ffffff for light theme and #000000 for dark theme
    // create four theme, light and dark for each contrast type wcag
    const themeLight = new Theme({
        colors: palette.wcag3,
        backgroundColor,
        lightness: 100,
        formula: "wcag3",
    });
    const themeDark = new Theme({
        colors: palette.wcag3,
        backgroundColor,
        lightness: 0,
        formula: "wcag3",
    });
    const themeToneLight = new Theme({
        colors: palette.wcag2,
        backgroundColor: backgroundColorWcag2,
        lightness: 100,
    });
    const themeToneDark = new Theme({
        colors: palette.wcag2,
        backgroundColor: backgroundColorWcag2,
        lightness: 0,
    });
    const theme = {
        wcag2: {
            light: themeToneLight,
            dark: themeToneDark,
        },
        wcag3: {
            light: themeLight,
            dark: themeDark,
        },
    };
    console.info("Formatting color palette to JSON Design Tokens format");
    const tokens = {
        color: {},
    };
    const exportGroups = {};
    config.colors.forEach((element) => {
        const groupIndex = 0;
        const nameIndex = 1;
        const group = element.name.split(".")[groupIndex];
        const name = element.name.split(".")[nameIndex];
        if (!element.disabled) {
            if (!Object.hasOwn(tokens.color, group)) {
                console.info(`Creating ${chalk.magenta("group")} ${group}`);
                tokens.color[group] = {};
            }
            if (!Object.hasOwn(tokens.color[group], name)) {
                console.info(`Creating ${chalk.blue("color")} ${name}`);
                tokens.color[group][name] = {
                    light: formatColortoTokens(theme[element.formula ?? config.formula].light.contrastColors.slice(1), `${group}.${name}`, element.color, element.seed, "light"),
                    dark: formatColortoTokens(theme[element.formula ?? config.formula].dark.contrastColors.slice(1), `${group}.${name}`, element.color, element.seed, "dark"),
                };
            }
            if (element.export !== undefined) {
                element.export.forEach((exportElement) => {
                    if (exportGroups[exportElement] === undefined) {
                        exportGroups[exportElement] = { color: {} };
                    }
                    if (exportGroups[exportElement].color[group] === undefined) {
                        exportGroups[exportElement].color[group] = {};
                    }
                    exportGroups[exportElement].color[group][name] = {
                        light: tokens.color[group][name].light,
                        dark: tokens.color[group][name].dark,
                    };
                });
            }
        }
    });
    return { tokens, exportGroups };
}