65 lines
1.2 KiB
TypeScript
65 lines
1.2 KiB
TypeScript
|
|
||
|
|
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;
|