From 8a59f92d031963e23ecc84b75feecf43eb4dd146 Mon Sep 17 00:00:00 2001 From: "netop://ウィビ" Date: Fri, 24 Apr 2026 11:33:25 -0700 Subject: Initial commit: @eol/graphiql v0.3 Svelte 5 GraphiQL alternative for JSR. Covers: - HTTP fetcher with injectable fetch; SSE/WS stubs - Session store with tabs, auto-titling, persistence, rename - Operation detection via graphql parse(); Toolbar picker - CodeMirror 6 editor via cm6-graphql with theme prop - Light theme preset (hand-rolled EditorView.theme) - Doc explorer with breadcrumb nav and type guards - History panel with 100-entry cap, favorite pinning - Deno tests for operations, storage, and history eviction --- source/library/themes/light.ts | 75 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 source/library/themes/light.ts (limited to 'source/library/themes/light.ts') diff --git a/source/library/themes/light.ts b/source/library/themes/light.ts new file mode 100644 index 0000000..daaede2 --- /dev/null +++ b/source/library/themes/light.ts @@ -0,0 +1,75 @@ + + + +/*** IMPORT ------------------------------------------- ***/ + +import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"; +import { EditorView } from "@codemirror/view"; +import { tags as t } from "@lezer/highlight"; + +/*** EXPORT ------------------------------------------- ***/ + +const BG = "#fafafa"; +const BORDER = "#e0e0e0"; +const FG = "#24292e"; +const GUTTER_BG = "#f3f3f3"; +const GUTTER_FG = "#9ca3af"; +const SELECTION = "#b3d4fc"; + +const base = EditorView.theme({ + "&": { + backgroundColor: BG, + color: FG + }, + "&.cm-focused": { + outline: "none" + }, + ".cm-activeLine": { + backgroundColor: "#f0f0f0" + }, + ".cm-activeLineGutter": { + backgroundColor: "transparent", + color: FG + }, + ".cm-content": { + caretColor: "#1f6feb" + }, + ".cm-cursor, .cm-dropCursor": { + borderLeftColor: "#1f6feb" + }, + ".cm-gutters": { + backgroundColor: GUTTER_BG, + border: "none", + borderRight: `1px solid ${BORDER}`, + color: GUTTER_FG + }, + ".cm-matchingBracket": { + backgroundColor: "#dbeafe", + outline: "1px solid #93c5fd" + }, + ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { + backgroundColor: SELECTION + } +}, { dark: false }); + +const highlight = HighlightStyle.define([ + { color: "#d73a49", tag: t.keyword }, + { color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] }, + { color: "#6f42c1", tag: [t.propertyName] }, + { color: "#032f62", tag: [t.string, t.special(t.string)] }, + { color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] }, + { color: "#6a737d", fontStyle: "italic", tag: t.comment }, + { color: "#22863a", tag: [t.typeName, t.className] }, + { color: "#e36209", tag: [t.variableName, t.labelName] }, + { color: "#d73a49", tag: [t.operator, t.operatorKeyword] }, + { color: "#6a737d", tag: [t.meta, t.documentMeta] }, + { color: "#22863a", tag: [t.tagName] }, + { color: "#6f42c1", tag: [t.attributeName] }, + { color: "#e36209", tag: [t.heading] }, + { color: "#032f62", tag: [t.link] }, + { fontWeight: "bold", tag: [t.strong] }, + { fontStyle: "italic", tag: [t.emphasis] }, + { tag: t.strikethrough, textDecoration: "line-through" } +]); + +export const lightTheme = [base, syntaxHighlighting(highlight)]; -- cgit v1.2.3