Code

1import * as React from "react";
2import { codeToHtml } from "shiki";
3import { CodeTabsClient, WalkthroughClient, type Region } from "./code-client";
4import "./code.css";
5 
6/** A light TextMate theme keyed to the moco palette. Keywords take the one accent. */
7const LIGHT = {
8  name: "moco-plate",
9  type: "light",
10  colors: {
11    "editor.background": "#fcfbf9",
12    "editor.foreground": "#242424",
13  },
14  settings: [
15    { settings: { foreground: "#242424", background: "#fcfbf9" } },
16    {
17      scope: ["comment", "punctuation.definition.comment"],
18      settings: { foreground: "#8a8477", fontStyle: "italic" },
19    },
20    {
21      scope: ["string", "string.quoted", "constant.other.symbol", "meta.embedded.line"],
22      settings: { foreground: "#3f6d33" },
23    },
24    {
25      scope: ["keyword", "storage", "storage.type", "keyword.control", "keyword.operator.new"],
26      settings: { foreground: "#5b770c" },
27    },
28    { scope: ["constant.numeric", "constant.language"], settings: { foreground: "#7a4b9c" } },
29    {
30      scope: ["entity.name.function", "support.function", "meta.function-call.generic"],
31      settings: { foreground: "#1a1a1a" },
32    },
33    {
34      scope: ["variable", "meta.definition.variable", "support.type"],
35      settings: { foreground: "#242424" },
36    },
37    { scope: ["punctuation", "meta.brace"], settings: { foreground: "#8a8477" } },
38  ],
39} as const;
40 
41/** Dark twin: warm near-black ground (the dark token palette), lime takes keyword duty. */
42const DARK = {
43  name: "moco-plate-dark",
44  type: "dark",
45  colors: {
46    "editor.background": "#121110",
47    "editor.foreground": "#dedcd7",
48  },
49  settings: [
50    { settings: { foreground: "#dedcd7", background: "#121110" } },
51    {
52      scope: ["comment", "punctuation.definition.comment"],
53      settings: { foreground: "#8a8477", fontStyle: "italic" },
54    },
55    {
56      scope: ["string", "string.quoted", "constant.other.symbol", "meta.embedded.line"],
57      settings: { foreground: "#a9c98a" },
58    },
59    {
60      scope: ["keyword", "storage", "storage.type", "keyword.control", "keyword.operator.new"],
61      settings: { foreground: "#c6f24e" },
62    },
63    { scope: ["constant.numeric", "constant.language"], settings: { foreground: "#c9a1ec" } },
64    {
65      scope: ["entity.name.function", "support.function", "meta.function-call.generic"],
66      settings: { foreground: "#f2f0ec" },
67    },
68    {
69      scope: ["variable", "meta.definition.variable", "support.type"],
70      settings: { foreground: "#dedcd7" },
71// … truncated