Minor style tweaks

package.json

@@ -4,12 +4,13 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "rsw build && tsc && vite build",
+    "build": "rsw build && vite build",
     "dev": "vite",
     "lint": "tsc && eslint . --ext .ts,.tsx",
     "preview": "vite preview",
     "tauri-dev": "concurrently -n app,rsw \"tauri dev\" \"rsw watch\"",
-    "tauri-build": "tauri build"
+    "tauri-build": "npm run build:icon && tauri build",
+    "build:icon": "tauri icon src-tauri/icons/icon.png"
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.1",

src-web/components/Editor/Editor.css

@@ -21,8 +21,8 @@
 }
 
 .cm-editor .placeholder-widget {
-    @apply text-xs text-white bg-blue-400 py-[1px] px-1 mx-[1px] rounded border border-gray-50 cursor-pointer;
-    text-shadow: 0 0 0.2em black;
+    @apply text-xs text-white bg-blue-400 py-[1px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-500;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
 }
 
 .cm-editor .cm-scroller {

src-web/components/Editor/extensions.ts

@@ -44,13 +44,13 @@ export const myHighlightStyle = HighlightStyle.define([
   },
   {
     tag: [t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: 'hsl(var(--color-blue-500))',
+    color: 'hsl(var(--color-blue-600))',
   },
   { tag: [t.variableName], color: '#31c434' },
   { tag: [t.bool], color: '#e864f6' },
-  { tag: [t.attributeName], color: 'hsl(var(--color-violet-500))' },
-  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-500))' },
-  { tag: [t.string], color: 'hsl(var(--color-yellow-500))' },
+  { tag: [t.attributeName], color: 'hsl(var(--color-violet-600))' },
+  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-600))' },
+  { tag: [t.string], color: 'hsl(var(--color-yellow-600))' },
   { tag: [t.keyword, t.meta, t.operator], color: '#45e8a4' },
 ]);
 

src-web/main.css

@@ -30,6 +30,7 @@ html, body, #root {
     :root, [data-theme="light"] {
         /* Colors */
         --color-white: 255 100% 100%;
+        --color-black: 255 0% 0%;
         --color-background: var(--color-white);
 
         --color-blue-50: 217 91% 95%;
@@ -107,7 +108,6 @@ html, body, #root {
     }
 
     [data-theme="dark"] {
-        --color-white: 255 100% 100%;
         --color-background: 217 21% 7%;
 
         --color-blue-900: 217 91% 95%;

tailwind.config.cjs

@@ -17,6 +17,7 @@ module.exports = {
         colors: {
             transparent: 'transparent',
             white: 'hsl(var(--color-white) / <alpha-value>)',
+            black: 'hsl(var(--color-black) / <alpha-value>)',
             background: 'hsl(var(--color-background) / <alpha-value>)',
             gray: color('gray'),
             blue: color('blue'),