Mostly finish theme, fix prism theme

adamkiss · Dec 8, 2024 · 59e2940 · 59e2940
1 parent 38920c8
commit 59e2940
Show file tree

Hide file tree

Showing 7 changed files with 489 additions and 107 deletions.
diff --git a/alpine-prism/alpine-prism.js b/alpine-prism/alpine-prism.js
@@ -5,14 +5,8 @@ import "prism-code-editor/prism/languages/javascript"
 import "prism-code-editor/prism/languages/liquid"
 
 document.addEventListener("alpine:init", initEvent => {
-    // Setup prism
-    // setupMarkupTemplating(Prism)
-    // setupLiquid(Prism)
-	// setupJavascript(languages)
 
-	// console.log(languages)
-
-    // Setup magic
+	// Setup magic
 	Alpine.magic('prism', (el, {Alpine}) => {
 		return function({language = 'plain', testString = 'tsv'} = {}) {
 			return {
@@ -22,7 +16,7 @@ document.addEventListener("alpine:init", initEvent => {
 				init() {
 					this.$nextTick(_ => {
 						this.editor = basicEditor(this.$el, {
-							language, theme: 'prism',
+							language, theme: 'night-owl',
 							value: this.value,
 							onUpdate: code => this.value = code
 						})
@@ -33,5 +27,5 @@ document.addEventListener("alpine:init", initEvent => {
 				}
 			}
 		}
-    });
+	});
 });
diff --git a/alpine-prism/dist/alpine-prism.js b/alpine-prism/dist/alpine-prism.js
diff --git a/alpine-prism/package.json b/alpine-prism/package.json
@@ -5,8 +5,8 @@
   "main": "alpine-prism.js",
   "type": "module",
   "scripts": {
-    "start": "esbuild --bundle alpine-prism.js --outfile=dist/alpine-prism.js --target=es2020,safari11 --sourcemap --watch",
-    "build": "esbuild --bundle alpine-prism.js --outfile=dist/alpine-prism.js --target=es2020,safari11 --minify"
+    "start": "sh prism-patch.sh && esbuild --bundle alpine-prism.js --outfile=dist/alpine-prism.js --target=es2020,safari11 --sourcemap --watch",
+    "build": "sh prism-patch.sh && esbuild --bundle alpine-prism.js --outfile=dist/alpine-prism.js --target=es2020,safari11 --minify"
   },
   "keywords": [
     "alpine",

diff --git a/alpine-prism/prism-patch.sh b/alpine-prism/prism-patch.sh
@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+
+echo "const nightOwl = \`$(cat ./prism-theme.css)\`;
+export {
+  nightOwl as default
+};" > ./node_modules/prism-code-editor/dist/night-owl.js
diff --git a/alpine-prism/prism-theme.css b/alpine-prism/prism-theme.css
@@ -0,0 +1,281 @@
+.prism-code-editor {
+	/* color: hsl(var(--foreground)); */
+	caret-color: hsl(var(--theme));
+	font-family: "Iosevka AK2", "SF Mono", monospace;
+
+	--editor__bg: transparent;
+
+	--widget__border: transparent;
+	--widget__bg: #edeae8;
+	--widget__color: #444;
+	--widget__color-active: #000;
+	--widget__color-options: #666;
+	--widget__bg-input: #f5f2f0;
+	--widget__bg-hover: #b8b8b84f;
+	--widget__bg-active: #c2dff2;
+	--widget__focus-ring: #0077f0;
+	--search__bg-find: #ea5c0054;
+	--widget__bg-error: #f2dede;
+	--widget__error-ring: #be1100;
+
+	--editor__bg-highlight: #fffc;
+	--editor__bg-selection-match: #b6d5fc80;
+	--editor__line-number: #9d897b;
+	--editor__bg-scrollbar: 24, 7%, 35%;
+	--editor__bg-fold: #00f;
+	--bg-guide-indent: #4b413a33;
+	color-scheme: auto;
+}
+
+.search-matches .match {
+	--search__bg-find: #c7ada9;
+}
+
+.active-line::before {
+	background: var(--editor__bg-highlight);
+}
+.active-line {
+	--editor__line-number: #4d3a2e;
+}
+
+.guide-indents .active {
+	--bg-guide-indent: #38322f66;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #708090;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: var(--token-selector);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: 700;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.bracket-level-0,
+.token.bracket-level-3,
+.token.bracket-level-6,
+.token.bracket-level-9 {
+	color: #0431fa;
+}
+
+.token.bracket-level-1,
+.token.bracket-level-4,
+.token.bracket-level-7,
+.token.bracket-level-10 {
+	color: #319331;
+}
+
+.token.bracket-level-2,
+.token.bracket-level-5,
+.token.bracket-level-8,
+.token.bracket-level-11 {
+	color: #7b3814;
+}
+
+.token.bracket-error {
+	color: #ff1212cc;
+}
+
+.active-bracket {
+	box-shadow:
+		inset 0 0 0 1px #b9b9b9,
+		inset 0 0 0 9in #0064001a;
+}
+
+.active-tagname {
+	background: #57575740;
+}
+
+/** dark-mode */
+@media screen and (prefers-color-scheme: dark) {
+	.prism-code-editor {
+		--editor__bg-highlight: #fff2;
+	}
+
+	.match-highlight {
+		--editor__bg-highlight: #282828
+	}
+
+	.pce-matches .match {
+		--search__bg-find: #515c6a
+	}
+
+	.active-line {
+		--editor__line-number: white;
+	}
+
+	.guide-indents .active {
+		--bg-guide-indent: #eee6
+	}
+
+	[class*=language-],
+	.token.punctuation,
+	.token.attr-equals {
+		color: #ccc
+	}
+
+	.token.comment,
+	.token.block-comment,
+	.token.prolog,
+	.token.doctype,
+	.token.cdata {
+		color: #999
+	}
+
+	.token.tag,
+	.token.attr-name,
+	.token.namespace,
+	.token.deleted {
+		color: #e2777a
+	}
+
+	.token.function-name {
+		color: #6196cc
+	}
+
+	.token.boolean,
+	.token.number,
+	.token.function {
+		color: #f08d49
+	}
+
+	.token.property,
+	.token.class-name,
+	.token.constant,
+	.token.symbol {
+		color: #f8c555
+	}
+
+	.token.selector,
+	.token.important,
+	.token.atrule,
+	.token.keyword,
+	.token.builtin {
+		color: #cc99cd
+	}
+
+	.token.string,
+	.token.char,
+	.token.attr-value,
+	.token.regex,
+	.language-regex,
+	.token.variable {
+		color: #7ec699
+	}
+
+	.token.operator,
+	.token.entity,
+	.token.url {
+		color: #67cdcc
+	}
+
+	.token.important,
+	.token.bold {
+		font-weight: 700
+	}
+
+	.token.italic {
+		font-style: italic
+	}
+
+	.token.inserted {
+		color: green
+	}
+
+	.token.bracket-level-0,
+	.token.bracket-level-3,
+	.token.bracket-level-6,
+	.token.bracket-level-9 {
+		color: gold
+	}
+
+	.token.bracket-level-1,
+	.token.bracket-level-4,
+	.token.bracket-level-7,
+	.token.bracket-level-10 {
+		color: orchid
+	}
+
+	.token.bracket-level-2,
+	.token.bracket-level-5,
+	.token.bracket-level-8,
+	.token.bracket-level-11 {
+		color: #179fff
+	}
+
+	.token.bracket-error {
+		color: #ff1212cc
+	}
+
+	.token.markup-bracket {
+		color: inherit
+	}
+
+	.active-bracket {
+		box-shadow: inset 0 0 0 1px #888, inset 0 0 0 9in #0064001a
+	}
+
+	.active-tagname,
+	.word-matches span {
+		background: #575757b8
+	}
+}