More colors

src-web/components/Editor/extensions.ts

@@ -46,8 +46,8 @@ export const myHighlightStyle = HighlightStyle.define([
     tag: [t.name, t.tagName, t.angleBracket, t.docString, t.number],
     color: 'hsl(var(--color-blue-600))',
   },
-  { tag: [t.variableName], color: '#31c434' },
+  { tag: [t.variableName], color: 'hsl(var(--color-green-600))' },
-  { tag: [t.bool], color: '#e864f6' },
+  { tag: [t.bool], color: 'hsl(var(--color-pink-600))' },
   { 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))' },

src-web/components/Editor/url/highlight.ts

@@ -2,8 +2,8 @@ import { styleTags, tags as t } from '@lezer/highlight';
 
 export const highlight = styleTags({
   Protocol: t.comment,
-  Port: t.attributeName,
+  // Port: t.attributeName,
-  Host: t.variableName,
+  // Host: t.variableName,
-  Path: t.bool,
+  // Path: t.bool,
-  Query: t.string,
+  // Query: t.string,
 });

src-web/main.css

@@ -33,6 +33,17 @@ html, body, #root {
         --color-black: 255 0% 0%;
         --color-background: var(--color-white);
 
+        --color-green-50: 160 84% 95%;
+        --color-green-100: 160 84% 88%;
+        --color-green-200: 160 84% 76%;
+        --color-green-300: 160 84% 70%;
+        --color-green-400: 160 84% 60%;
+        --color-green-500: 160 84% 50%;
+        --color-green-600: 160 84% 38%;
+        --color-green-700: 160 84% 30%;
+        --color-green-800: 160 84% 20%;
+        --color-green-900:  160 84% 10%;
+
         --color-blue-50: 217 91% 95%;
         --color-blue-100: 217 91% 88%;
         --color-blue-200: 217 91% 76%;
@@ -44,6 +55,17 @@ html, body, #root {
         --color-blue-800: 217 91% 20%;
         --color-blue-900: 217 91% 10%;
 
+        --color-pink-50:  292 84% 95%;
+        --color-pink-100: 292 84% 88%;
+        --color-pink-200: 292 84% 76%;
+        --color-pink-300: 292 84% 70%;
+        --color-pink-400: 292 84% 65%;
+        --color-pink-500: 292 84% 58%;
+        --color-pink-600: 292 84% 43%;
+        --color-pink-700: 292 84% 30%;
+        --color-pink-800: 292 84% 20%;
+        --color-pink-900: 292 84% 10%;
+
         --color-violet-50: 258 90% 95%;
         --color-violet-100: 258 90% 88%;
         --color-violet-200: 258 90% 76%;
@@ -110,6 +132,17 @@ html, body, #root {
     [data-theme="dark"] {
         --color-background: 217 21% 7%;
 
+        --color-green-900: 160 84% 95%;
+        --color-green-800: 160 84% 88%;
+        --color-green-700: 160 84% 76%;
+        --color-green-600: 160 84% 70%;
+        --color-green-500: 160 84% 60%;
+        --color-green-400: 160 84% 50%;
+        --color-green-300: 160 84% 38%;
+        --color-green-200: 160 84% 30%;
+        --color-green-100: 160 84% 20%;
+        --color-green-50:  160 84% 10%;
+
         --color-blue-900: 217 91% 95%;
         --color-blue-800: 217 91% 88%;
         --color-blue-700: 217 91% 76%;
@@ -121,6 +154,17 @@ html, body, #root {
         --color-blue-100: 217 91% 20%;
         --color-blue-50: 217 91% 10%;
 
+        --color-pink-900:  292 84% 95%;
+        --color-pink-800: 292 84% 88%;
+        --color-pink-700: 292 84% 76%;
+        --color-pink-600: 292 84% 70%;
+        --color-pink-500: 292 84% 65%;
+        --color-pink-400: 292 84% 58%;
+        --color-pink-300: 292 84% 43%;
+        --color-pink-200: 292 84% 30%;
+        --color-pink-100: 292 84% 20%;
+        --color-pink-50: 292 84% 10%;
+
         --color-violet-900: 258 90% 95%;
         --color-violet-800: 258 90% 88%;
         --color-violet-700: 258 90% 79%;

tailwind.config.cjs

@@ -21,6 +21,8 @@ module.exports = {
             background: 'hsl(var(--color-background) / <alpha-value>)',
             gray: color('gray'),
             blue: color('blue'),
+            green: color('green'),
+            pink: color('pink'),
             violet: color('violet'),
             red: color('red'),
         }