SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

customization ideas

Browse Source
This commit is contained in:
Seth Trowbridge 2024-04-28 22:21:18 -04:00
parent 6b02c9a052
commit 44f06b07b8
7 changed files with 53 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
deno.json
View File

@ -3,14 +3,9 @@
"react": "https://esm.sh/preact@10.18.1/compat",
"react/": "https://esm.sh/preact@10.18.1/compat/"
},
"tasks": {"go": "deno run -A styles.tsx"},
"tasks": {"go": "deno run -A styler.tsx"},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "https://esm.sh/preact@10.18.1",
"lib": [
"deno.window",
"dom",
"dom.asynciterable"
]
"lib": ["deno.window","dom","dom.asynciterable"]
}
}

8
deno.lock
View File

@ -1,8 +0,0 @@
{
"version": "3",
"remote": {
"https://esm.sh/preact@10.18.1/jsx-runtime": "019f849249d70baa9aefb684a8f1fbc350a893beae719a60b6c80adf3463b073",
"https://esm.sh/stable/preact@10.18.1/denonext/jsx-runtime.js": "be3f1ff4c3c03b08ed19d69428e35bf3d90360a8e081a2e60075ddfd38fd86df",
"https://esm.sh/stable/preact@10.18.1/denonext/preact.mjs": "b2ad171554b90f2be0f30b1318f63d0df90420b2bdb727fddd97193daa177f84"
}
}

3
gale-custom.tsx Normal file
View File

@ -0,0 +1,3 @@
import {config} from "./gale.tsx";
export default config({other:"lol"});

46
gale.tsx Normal file
View File

@ -0,0 +1,46 @@
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({});

44
scratch.html
View File

@ -1,44 +0,0 @@
<script>
const typeface = {
sans: "sans serif",
serif: "Times New Roman"
};
const sizes = {
"1": "1rem",
"2": "3rem"
};
const colors = {
red: "#ff2200",
blue: "#0022ff"
};
const context = [];
const CSS = {
get Face()
{
context.push("font-family");
return new Proxy(typeface, {get(target, prop){
console.log(target, prop);
context.push(target[prop]);
}})
}
};
const output = CSS.Face.sans;
console.log(output);
</script>
<style>
@media(min-width:768px)
{
.large{ font-size: 3rem; }
}
</style>
<div class="md-font-large large">
hey
</div>

5
styler.tsx
View File

@ -1,4 +1,3 @@
import * as Gusto from "./styles.tsx";
Gusto.colors["me"] = "#ffaa00";
import Gale from "./gale-custom.tsx";
Gale.MD(Gale.Face.other);

65
styles.tsx
View File

@ -1,65 +0,0 @@
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;