From aaf95f565f6263f80470578e2bbe5a5e73ba1e5b Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 2 Mar 2023 17:56:53 -0800
Subject: [PATCH] More colors

---
 src-web/components/Editor/extensions.ts    |  4 +-
 src-web/components/Editor/url/highlight.ts |  8 ++--
 src-web/main.css                           | 44 ++++++++++++++++++++++
 tailwind.config.cjs                        |  2 +
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src-web/components/Editor/extensions.ts b/src-web/components/Editor/extensions.ts
index 6ba9e65b..85dc6418 100644
--- a/src-web/components/Editor/extensions.ts
+++ b/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.bool], color: '#e864f6' },
+  { tag: [t.variableName], color: 'hsl(var(--color-green-600))' },
+  { 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))' },
diff --git a/src-web/components/Editor/url/highlight.ts b/src-web/components/Editor/url/highlight.ts
index bedbf058..03fcd72c 100644
--- a/src-web/components/Editor/url/highlight.ts
+++ b/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,
-  Host: t.variableName,
-  Path: t.bool,
-  Query: t.string,
+  // Port: t.attributeName,
+  // Host: t.variableName,
+  // Path: t.bool,
+  // Query: t.string,
 });
diff --git a/src-web/main.css b/src-web/main.css
index a68b0c24..117be274 100644
--- a/src-web/main.css
+++ b/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%;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6f80f0c4..c7fd17d3 100644
--- a/tailwind.config.cjs
+++ b/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'),
         }