let css = '';
json.collections[0].modes[0].variables.forEach(variable => {
    const r = variable.value.slice(1, 3);
    const g = variable.value.slice(3, 5);
    const b = variable.value.slice(5, 7);
    css += `--${variable.name}: ${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)};` + '\n';
});

const color = {};
tokens.variables.forEach(v => {
    const name = v.name.split('/').pop();
    let hasSuffix = false;
    for (let suffix of ['default', 'active', 'hover', 'disabled', 'primary', 'secondary', 'tertiary', 'inactive']) {
        if (name.endsWith(suffix)) {
            const realName = name.slice(0, -suffix.length-1);
            colors[realName] = { ...(temp[realName] ?? {}), [suffix]: `rgb(var—(${v.value.name}) / <alpha-value>)` };
            hasSuffix = true;
            break;
        }
    }
    if (!hasSuffix) {
        colors[name] = `rgb(var—(${v.value.name}) / <alpha-value>)`;
    }
});