const typeface = {
    sans: "sans serif",
    serif: "Times New Roman"
};
const sizes = {
    small: "1rem",
    large: "3rem"
};
const colors = {
    red: "#ff2200",
    blue: "#0022ff"
};


function Mapper<T extends Record<string, string>>(property:string, lut:T)
{
    return new Proxy(lut, {get(target, prop){
        console.log("read", prop);
        return property + ": " + lut[prop as string]
    }});
}
function Query()
{
    console.log("query start")
    return (...args:string[])=>
    {
        console.log("query stop")
    }
}

export function config<T>(obj:T)
{
    const CSS = {
        mq:"",
        get MD()
        {
           return Query();
        },
        Face: Mapper("font-family", {...typeface, ...obj}),
        Pad:Mapper("padding", sizes)
    };
    return CSS;
}

export default config({});