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

const CSS = {
    mq:"",
    get MD()
    {
        console.log("media query start")
        return (...args:string[])=>
        {
            console.log("md stop")
        }
        
    },
    get Face()
    {
        /*
        const context = "font-family"
        return new Proxy(typeface, {get(target, prop){
            return context + ": " + target[prop]
        }});
        */
       return Mapper("font-family", {...typeface, ...userFonts});
    },
    Pad:Mapper("padding", sizes)
};

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("md start")
    return (...args:string[])=>
    {
        CSS.mq = "med";
        //args.forEach(arg=>arg);
        CSS.mq = "";
        console.log("md stop")
    }
    
}


CSS.Pad.large;

CSS.MD(CSS.Pad.large, CSS.Face.sans);

CSS.Face.serif;