();
+ for (const attrId of Object.keys(mine ?? {})) {
+ const a = ATTRIBUTES.find((x) => x.id === attrId);
+ if (!a) continue;
+ let key = "";
+ for (const seg of attrSegs(a)) {
+ key += `/${seg}`;
+ keys.add(key);
+ }
+ }
+ return keys;
+ }, [mine]);
const attr = ATTRIBUTES.find((a) => a.id === selected);
const language = attr?.language;
+ const inherited = useMemo(() => (attr ? resolvedAttribute(id, attr.id, customs) : {}), [id, attr, customs]);
const vars = useMemo(
() => ({ ...previewVars(id, mine, customs, language), ...fontWeightVars(weight, boldFontWeight) }) as CSSProperties,
[id, mine, customs, language, weight, boldFontWeight],
);
+ const baseVars = useMemo(
+ () => ({ ...previewVars(id, mine, customs), ...fontWeightVars(weight, boldFontWeight) }) as CSSProperties,
+ [id, mine, customs, weight, boldFontWeight],
+ );
const update = (attrId: string, v: TextAttributesOverride | undefined) => {
const next: Overrides = { ...(overrides ?? {}) };
const forScheme = { ...(next[id] ?? {}) };
@@ -299,6 +1063,7 @@ function ColorSchemePage() {
setOverrides(next);
};
const schemes = listSchemes(customs);
+ const sample = SAMPLES[scopes[0] ?? ""] ?? SAMPLES["Language Defaults"]!;
const schemeName = schemes.find((s) => s.id === id)?.name ?? id;
const options: SelectOption[] = [
{ value: "theme-default", label: "Theme default" },
@@ -436,57 +1201,120 @@ function ColorSchemePage() {
{scheme === "theme-default" && (
{tx`Follows the IDE theme: currently ${schemeName}.`}
)}
-
-
-
- aria-label="Color scheme attributes"
- roots={TREE}
- getKey={(n) => n.key}
- getLabel={(n) => n.label}
- getChildren={(n) => n.children}
- isExpandable={(n) => !!n.children}
- defaultExpanded={["/Language Defaults", "/General", "/General/Code"]}
- multiSelect={false}
- selected={new Set([selected])}
- onSelectionChange={(_s, lead) => lead?.attr && setSelected(lead.attr.id)}
- getColor={(n) => (n.attr && mine?.[n.attr.id] ? "var(--accent)" : undefined)}
- speedSearch
- />
-
- {attr ? (
-
update(attr.id, v)}
- />
- ) : (
-
- )}
-
- {SAMPLE.map((line, i) => (
-
-
{i + 1}
-
- {line.map(([text, attrId], j) => (
- setSelected(attrId) : undefined}
- >
- {text}
-
- ))}
-
+ {landing ? (
+
+ ) : (
+ <>
+
+
+
+ aria-label="Color scheme attributes"
+ roots={roots}
+ getKey={(n) => n.key}
+ getLabel={(n) => n.label}
+ getChildren={(n) => n.children}
+ isExpandable={(n) => !!n.children?.length}
+ expanded={expanded}
+ onExpandedChange={setExpanded}
+ handleRef={treeRef}
+ multiSelect={false}
+ selected={new Set([selected])}
+ onSelectionChange={(_s, lead) => lead?.attr && setSelected(lead.attr.id)}
+ renderNode={(n) => (
+
+ {n.label}
+
+ )}
+ speedSearch
+ />
+
+ {attr ? (
+
+
update(attr.id, v)}
+ />
+
+ ) : (
+
+ )}
- ))}
-
+
+ {sample.code.map((line, i) => (
+
+ {i + 1}
+
+ {line.map(([text, attrId], j) => {
+ const attr = attrId !== undefined ? A(attrId) : undefined;
+ const inPage = attr !== undefined && ids.has(attrId!);
+ return (
+ {
+ if (inPage) reveal(attrId!);
+ else {
+ crossPageReveal = attrId!;
+ selectPage(attrPageId(attr));
+ }
+ }
+ : undefined
+ }
+ >
+ {text}
+
+ );
+ })}
+
+
+ ))}
+
+
+ )}