graham.systems
+3
-1
deno.lock
+3
-1
deno.lock
···
41
41
"npm:mini-svg-data-uri@^1.4.4": "1.4.4",
42
42
"npm:motion@^12.23.12": "12.23.12",
43
43
"npm:polished@^4.3.1": "4.3.1",
44
+
"npm:scule@^1.3.0": "1.3.0",
44
45
"npm:shiki@^3.8.1": "3.8.1",
45
46
"npm:xstate@^5.20.2": "5.20.2"
46
47
},
···
1229
1230
"dependencies": [
1230
1231
"npm:@terrazzo/parser@~0.10.2",
1231
1232
"npm:@terrazzo/plugin-css@~0.10.2",
1232
-
"npm:@terrazzo/plugin-js@~0.10.1"
1233
+
"npm:@terrazzo/plugin-js@~0.10.1",
1234
+
"npm:scule@^1.3.0"
1233
1235
]
1234
1236
},
1235
1237
"packages/wc": {
+2
-1
packages/theme/deno.json
+2
-1
packages/theme/deno.json
···
8
8
"imports": {
9
9
"@terrazzo/parser": "npm:@terrazzo/parser@^0.10.2",
10
10
"@terrazzo/plugin-css": "npm:@terrazzo/plugin-css@^0.10.2",
11
-
"@terrazzo/plugin-js": "npm:@terrazzo/plugin-js@^0.10.1"
11
+
"@terrazzo/plugin-js": "npm:@terrazzo/plugin-js@^0.10.1",
12
+
"scule": "npm:scule@^1.3.0"
12
13
},
13
14
"tasks": {
14
15
"build": "deno run --allow-env --allow-read --allow-write ./typescript.ts"
+21
-18
packages/theme/tokens.gen.ts
+21
-18
packages/theme/tokens.gen.ts
···
1
1
import { unsafeCSS } from "lit";
2
-
type TokenName =
3
-
| "color.base"
4
-
| "color.surface"
5
-
| "color.overlay"
6
-
| "color.muted"
7
-
| "color.subtle"
8
-
| "color.text"
9
-
| "color.danger"
10
-
| "color.warning"
11
-
| "color.success"
12
-
| "color.match"
13
-
| "color.bright"
14
-
| "color.link"
15
-
| "color.highlight.low"
16
-
| "color.highlight.med"
17
-
| "color.highlight.high"
18
-
export function token(name: TokenName) {
19
-
return unsafeCSS(`var(--morkdeck-${name.replace(/\./g, "-")})`);
2
+
3
+
type ColorName =
4
+
| "base"
5
+
| "surface"
6
+
| "overlay"
7
+
| "muted"
8
+
| "subtle"
9
+
| "text"
10
+
| "danger"
11
+
| "warning"
12
+
| "success"
13
+
| "match"
14
+
| "bright"
15
+
| "link"
16
+
| "highlight.low"
17
+
| "highlight.med"
18
+
| "highlight.high"
19
+
20
+
21
+
export function color(id: ColorName) {
22
+
return unsafeCSS(`var(--morkdeck-color-${id.replace(/\./g, "-")})`);
20
23
};
+27
-10
packages/theme/typescript.ts
+27
-10
packages/theme/typescript.ts
···
5
5
parse,
6
6
type Plugin,
7
7
} from "@terrazzo/parser";
8
+
import { camelCase, pascalCase } from "scule";
8
9
9
10
function cssVariableFn() {
10
11
return {
11
12
name: "css-variable-fn-typescript",
12
13
build({ tokens, outputFile }) {
13
-
const output: string[] = [];
14
+
const helpers = new Map<string, string[]>();
14
15
15
-
output.push(`import { unsafeCSS } from "lit";`);
16
-
output.push("type TokenName =");
16
+
for (const token of Object.values(tokens)) {
17
+
const tokenStr = ` | "${token.id}"`;
18
+
const tokenIds = helpers.get(token.$type);
17
19
18
-
for (const token of Object.values(tokens)) {
19
-
output.push(` | "${token.$type}.${token.id}"`);
20
+
if (tokenIds) {
21
+
tokenIds.push(tokenStr);
22
+
} else {
23
+
helpers.set(token.$type, [tokenStr]);
24
+
}
20
25
}
21
26
22
-
output.push(`export function token(name: TokenName) {`);
23
-
output.push(
24
-
' return unsafeCSS(`var(--morkdeck-${name.replace(/\\./g, "-")})`);',
25
-
);
26
-
output.push("};");
27
+
const output = [
28
+
'import { unsafeCSS } from "lit";\n',
29
+
];
30
+
31
+
for (const [$type, lines] of helpers.entries()) {
32
+
const functionName = camelCase($type);
33
+
const typeName = pascalCase(`${$type}Name`);
34
+
35
+
output.push(
36
+
`type ${typeName} =`,
37
+
...lines,
38
+
"\n",
39
+
`export function ${functionName}(id: ${typeName}) {`,
40
+
` return unsafeCSS(\`var(--morkdeck-${$type}-\${id.replace(/\\./g, "-")})\`);`,
41
+
"};",
42
+
);
43
+
}
27
44
28
45
outputFile("tokens.gen.ts", output.join("\n"));
29
46