From 00d5eacc795d6b67ef1850a4168f789e01b95b7e Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Sun, 7 Aug 2022 10:19:10 +0200
Subject: [PATCH] use hsl values and reduce number of CSS variables (#2637)

---
 .../src/editor/style/auto-insertion.css       |  2 +-
 .../src/editor/style/codemirror.css           | 54 ++++++-------
 .../graphiql-react/src/editor/style/fold.css  |  6 +-
 .../graphiql-react/src/editor/style/hint.css  | 16 ++--
 .../graphiql-react/src/editor/style/info.css  | 10 +--
 .../graphiql-react/src/editor/style/lint.css  | 26 +++---
 .../src/explorer/components/argument.css      |  8 +-
 .../src/explorer/components/default-value.css |  2 +-
 .../components/deprecation-reason.css         |  6 +-
 .../src/explorer/components/directive.css     |  2 +-
 .../src/explorer/components/doc-explorer.css  | 12 +--
 .../src/explorer/components/field-link.css    |  4 +-
 .../components/schema-documentation.css       |  2 +-
 .../src/explorer/components/search.css        | 30 +++----
 .../components/type-documentation.css         |  2 +-
 .../src/explorer/components/type-link.css     |  4 +-
 packages/graphiql-react/src/history/style.css | 20 ++---
 packages/graphiql-react/src/style/root.css    | 80 ++++++-------------
 .../graphiql-react/src/toolbar/button.css     |  2 +-
 .../graphiql-react/src/toolbar/execute.css    |  6 +-
 .../graphiql-react/src/ui/button-group.css    |  9 ++-
 packages/graphiql-react/src/ui/button.css     | 16 ++--
 packages/graphiql-react/src/ui/dialog.css     |  6 +-
 packages/graphiql-react/src/ui/markdown.css   | 20 ++---
 packages/graphiql-react/src/ui/menu.css       |  4 +-
 packages/graphiql-react/src/ui/spinner.css    |  2 +-
 packages/graphiql-react/src/ui/tabs.css       |  6 +-
 packages/graphiql/src/style.css               | 40 +++++-----
 28 files changed, 186 insertions(+), 211 deletions(-)

diff --git a/packages/graphiql-react/src/editor/style/auto-insertion.css b/packages/graphiql-react/src/editor/style/auto-insertion.css
index 2761c843afd..9ce2ddb9757 100644
--- a/packages/graphiql-react/src/editor/style/auto-insertion.css
+++ b/packages/graphiql-react/src/editor/style/auto-insertion.css
@@ -13,6 +13,6 @@
 
   15%,
   85% {
-    background-color: var(--color-orche-background);
+    background-color: hsla(var(--color-orche), 0.07);
   }
 }
diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css
index 836322b63cb..5e37b0261af 100644
--- a/packages/graphiql-react/src/editor/style/codemirror.css
+++ b/packages/graphiql-react/src/editor/style/codemirror.css
@@ -16,7 +16,7 @@
 .CodeMirror,
 .CodeMirror-gutters {
   background: none;
-  background-color: var(--editor-background, var(--color-neutral-0));
+  background-color: var(--editor-background, hsl(var(--color-base)));
 }
 
 /* No padding around line number */
@@ -35,94 +35,94 @@
 
 .cm-s-graphiql {
   /* Default to punctuation */
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
 
   /* OperationType, `fragment`, `on` */
   & .cm-keyword {
-    color: var(--color-pink);
+    color: hsl(var(--color-pink));
   }
   /* Name (OperationDefinition), FragmentName */
   & .cm-def {
-    color: var(--color-teal);
+    color: hsl(var(--color-teal));
   }
   /* Punctuator (except `$` and `@`) */
   & .cm-punctuation {
-    color: var(--color-neutral-60);
+    color: hsla(var(--color-neutral), 0.6);
   }
   /* Variable */
   & .cm-variable {
-    color: var(--color-purple);
+    color: hsl(var(--color-purple));
   }
   /* NamedType */
   & .cm-atom {
-    color: var(--color-teal);
+    color: hsl(var(--color-teal));
   }
   /* IntValue, FloatValue */
   & .cm-number {
-    color: var(--color-green);
+    color: hsl(var(--color-green));
   }
   /* StringValue */
   & .cm-string {
-    color: var(--color-orche);
+    color: hsl(var(--color-orche));
   }
   /* BooleanValue */
   & .cm-builtin {
-    color: var(--color-green);
+    color: hsl(var(--color-green));
   }
   /* EnumValue */
   & .cm-string-2 {
-    color: var(--color-purple);
+    color: hsl(var(--color-purple));
   }
   /* Name (ObjectField, Argument) */
   & .cm-attribute {
-    color: var(--color-blue);
+    color: hsl(var(--color-blue));
   }
   /* Name (Directive) */
   & .cm-meta {
-    color: var(--color-teal);
+    color: hsl(var(--color-teal));
   }
   /* Name (Alias, Field without Alias) */
   & .cm-property {
-    color: var(--color-blue);
+    color: hsl(var(--color-blue));
   }
   /* Name (Field with Alias) */
   & .cm-qualifier {
-    color: var(--color-purple);
+    color: hsl(var(--color-purple));
   }
   /* Comment */
   & .cm-comment {
-    color: var(--color-neutral-40);
+    color: hsla(var(--color-neutral), 0.4);
   }
   /* Whitespace */
   & .cm-ws {
-    color: var(--color-neutral-40);
+    color: hsla(var(--color-neutral), 0.4);
   }
   /* Invalid characters */
   & .cm-invalidchar {
-    color: var(--color-red);
+    color: hsl(var(--color-red));
   }
 
   /* Cursor */
   & .CodeMirror-cursor {
-    border-left: 2px solid var(--color-neutral-60);
+    border-left: 2px solid hsla(var(--color-neutral), 0.6);
   }
 
   /* Color for line numbers and fold-gutters */
   & .CodeMirror-linenumber {
-    color: var(--color-neutral-40);
+    color: hsla(var(--color-neutral), 0.4);
   }
 }
 
 /* Matching bracket colors */
 div.CodeMirror span.CodeMirror-matchingbracket,
 div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: var(--color-neutral-40);
+  color: hsla(var(--color-neutral), 0.4);
 }
 
 /* Selected text blocks */
 .CodeMirror-selected,
 .CodeMirror-focused .CodeMirror-selected {
-  background: var(--color-neutral-15);
+  background: hsla(var(--color-neutral), 0.15);
 }
 
 /* Position the search dialog */
@@ -137,12 +137,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   z-index: 6;
 }
 .CodeMirror-dialog-top {
-  border-bottom: 1px solid var(--color-neutral-15);
+  border-bottom: 1px solid hsla(var(--color-neutral), 0.15);
   padding-bottom: var(--px-12);
   top: 0;
 }
 .CodeMirror-dialog-bottom {
-  border-top: 1px solid var(--color-neutral-15);
+  border-top: 1px solid hsla(var(--color-neutral), 0.15);
   bottom: 0;
   padding-top: var(--px-12);
 }
@@ -154,17 +154,17 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 
 /* Style the input field for searching */
 .CodeMirror-dialog input {
-  border: 1px solid var(--color-neutral-15);
+  border: 1px solid hsla(var(--color-neutral), 0.15);
   border-radius: var(--border-radius-4);
   padding: var(--px-4);
 }
 .CodeMirror-dialog input:focus {
-  outline: var(--color-pink) solid 2px;
+  outline: hsl(var(--color-pink)) solid 2px;
 }
 
 /* Set the highlight color for search results */
 .cm-searching {
-  background-color: var(--color-orche-background);
+  background-color: hsla(var(--color-orche), 0.07);
   /**
    * When cycling through search results, CodeMirror overlays the current 
    * selection with another element that has the .CodeMirror-selected class
diff --git a/packages/graphiql-react/src/editor/style/fold.css b/packages/graphiql-react/src/editor/style/fold.css
index b959729925e..6dfbae43669 100644
--- a/packages/graphiql-react/src/editor/style/fold.css
+++ b/packages/graphiql-react/src/editor/style/fold.css
@@ -5,9 +5,9 @@
 }
 
 .CodeMirror-foldmarker {
-  background-color: var(--color-blue);
+  background-color: hsl(var(--color-blue));
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-0);
+  color: hsl(var(--color-base));
   font-family: inherit;
   margin: 0 var(--px-4);
   padding: 0 var(--px-8);
@@ -16,7 +16,7 @@
 
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
-  color: var(--color-neutral-40);
+  color: hsla(var(--color-neutral), 0.4);
 
   &::after {
     margin: 0 var(--px-2);
diff --git a/packages/graphiql-react/src/editor/style/hint.css b/packages/graphiql-react/src/editor/style/hint.css
index b8426ad79a4..6017d5d0766 100644
--- a/packages/graphiql-react/src/editor/style/hint.css
+++ b/packages/graphiql-react/src/editor/style/hint.css
@@ -2,7 +2,7 @@
 
 /* Popup styles */
 .CodeMirror-hints {
-  background: var(--color-neutral-0);
+  background: hsl(var(--color-base));
   border: none;
   border-radius: var(--border-radius-8);
   box-shadow: var(--box-shadow);
@@ -18,7 +18,7 @@
 /* Autocomplete items */
 .CodeMirror-hint {
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   grid-column: 1 / 2;
   margin: var(--px-4);
   /* Override element style added by codemirror */
@@ -29,13 +29,13 @@
   }
 }
 li.CodeMirror-hint-active {
-  background: var(--color-pink-background);
-  color: var(--color-pink);
+  background: hsla(var(--color-pink), 0.1);
+  color: hsl(var(--color-pink));
 }
 
 /* Sidebar with additional information */
 .CodeMirror-hint-information {
-  border-left: 1px solid var(--color-neutral-15);
+  border-left: 1px solid hsla(var(--color-neutral), 0.15);
   grid-column: 2 / 3;
   grid-row: 1 / 99999;
   /* Same as the popup as a whole minus padding */
@@ -52,9 +52,9 @@ li.CodeMirror-hint-active {
   font-weight: var(--font-weight-medium);
 }
 .CodeMirror-hint-information-type-name-pill {
-  border: 1px solid var(--color-neutral-40);
+  border: 1px solid hsla(var(--color-neutral), 0.4);
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   margin-left: var(--px-6);
   padding: var(--px-4);
 }
@@ -67,6 +67,6 @@ li.CodeMirror-hint-active {
   }
 }
 .CodeMirror-hint-information-description {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   margin-top: var(--px-12);
 }
diff --git a/packages/graphiql-react/src/editor/style/info.css b/packages/graphiql-react/src/editor/style/info.css
index 2adfcee5e47..6c7fc1f75f1 100644
--- a/packages/graphiql-react/src/editor/style/info.css
+++ b/packages/graphiql-react/src/editor/style/info.css
@@ -1,9 +1,9 @@
 /* Popup styles */
 .CodeMirror-info {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   border-radius: var(--border-radius-8);
   box-shadow: var(--box-shadow);
-  color: var(--color-neutral-100);
+  color: hsla(var(--color-neutral), 1);
   max-height: 300px;
   max-width: 400px;
   opacity: 0;
@@ -42,16 +42,16 @@
 
   /* Type names */
   & .type-name-pill {
-    border: 1px solid var(--color-neutral-40);
+    border: 1px solid hsla(var(--color-neutral), 0.4);
     border-radius: var(--border-radius-4);
-    color: var(--color-neutral-60);
+    color: hsla(var(--color-neutral), 0.6);
     margin-left: var(--px-6);
     padding: var(--px-4);
   }
 
   /* Descriptions */
   & .info-description {
-    color: var(--color-neutral-60);
+    color: hsla(var(--color-neutral), 0.6);
     margin-top: var(--px-12);
     overflow: hidden;
   }
diff --git a/packages/graphiql-react/src/editor/style/lint.css b/packages/graphiql-react/src/editor/style/lint.css
index a3fccd927f7..652470cd6ea 100644
--- a/packages/graphiql-react/src/editor/style/lint.css
+++ b/packages/graphiql-react/src/editor/style/lint.css
@@ -12,67 +12,67 @@
   background-position: 0 95%;
 }
 .cm-s-graphiql .CodeMirror-lint-mark-error {
-  color: var(--color-red);
+  color: hsl(var(--color-red));
 }
 .CodeMirror-lint-mark-error {
   background-image: linear-gradient(
       45deg,
       transparent 65%,
-      var(--color-red) 80%,
+      hsl(var(--color-red)) 80%,
       transparent 90%
     ),
     linear-gradient(
       135deg,
       transparent 5%,
-      var(--color-red) 15%,
+      hsl(var(--color-red)) 15%,
       transparent 25%
     ),
     linear-gradient(
       135deg,
       transparent 45%,
-      var(--color-red) 55%,
+      hsl(var(--color-red)) 55%,
       transparent 65%
     ),
     linear-gradient(
       45deg,
       transparent 25%,
-      var(--color-red) 35%,
+      hsl(var(--color-red)) 35%,
       transparent 50%
     );
 }
 .cm-s-graphiql .CodeMirror-lint-mark-warning {
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
 }
 .CodeMirror-lint-mark-warning {
   background-image: linear-gradient(
       45deg,
       transparent 65%,
-      var(--color-orche) 80%,
+      hsl(var(--color-orche)) 80%,
       transparent 90%
     ),
     linear-gradient(
       135deg,
       transparent 5%,
-      var(--color-orche) 15%,
+      hsl(var(--color-orche)) 15%,
       transparent 25%
     ),
     linear-gradient(
       135deg,
       transparent 45%,
-      var(--color-orche) 55%,
+      hsl(var(--color-orche)) 55%,
       transparent 65%
     ),
     linear-gradient(
       45deg,
       transparent 25%,
-      var(--color-orche) 35%,
+      hsl(var(--color-orche)) 35%,
       transparent 50%
     );
 }
 
 /* Popup styles */
 .CodeMirror-lint-tooltip {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   border: none;
   border-radius: var(--border-radius-8);
   box-shadow: var(--box-shadow);
@@ -88,8 +88,8 @@
   padding: 0;
 }
 .CodeMirror-lint-message-error {
-  color: var(--color-red);
+  color: hsl(var(--color-red));
 }
 .CodeMirror-lint-message-warning {
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
 }
diff --git a/packages/graphiql-react/src/explorer/components/argument.css b/packages/graphiql-react/src/explorer/components/argument.css
index 9602251ea43..e0dc9a3cc66 100644
--- a/packages/graphiql-react/src/explorer/components/argument.css
+++ b/packages/graphiql-react/src/explorer/components/argument.css
@@ -5,14 +5,14 @@
 }
 
 .graphiql-doc-explorer-argument-name {
-  color: var(--color-purple);
+  color: hsl(var(--color-purple));
 }
 
 .graphiql-doc-explorer-argument-deprecation {
-  background-color: var(--color-orche-background);
-  border: 1px solid var(--color-orche);
+  background-color: hsla(var(--color-orche), 0.07);
+  border: 1px solid hsl(var(--color-orche));
   border-radius: var(--border-radius-4);
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
   padding: var(--px-8);
 }
 
diff --git a/packages/graphiql-react/src/explorer/components/default-value.css b/packages/graphiql-react/src/explorer/components/default-value.css
index dd45b3fb8a2..f8e34cf2a17 100644
--- a/packages/graphiql-react/src/explorer/components/default-value.css
+++ b/packages/graphiql-react/src/explorer/components/default-value.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-default-value {
-  color: var(--color-green);
+  color: hsl(var(--color-green));
 }
diff --git a/packages/graphiql-react/src/explorer/components/deprecation-reason.css b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
index 9c863766a01..677c403cd9c 100644
--- a/packages/graphiql-react/src/explorer/components/deprecation-reason.css
+++ b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
@@ -1,8 +1,8 @@
 .graphiql-doc-explorer-deprecation {
-  background-color: var(--color-orche-background);
-  border: 1px solid var(--color-orche);
+  background-color: hsla(var(--color-orche), 0.07);
+  border: 1px solid hsl(var(--color-orche));
   border-radius: var(--px-4);
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
   padding: var(--px-8);
 }
 
diff --git a/packages/graphiql-react/src/explorer/components/directive.css b/packages/graphiql-react/src/explorer/components/directive.css
index 90ccdf8109d..5b5e5521cfb 100644
--- a/packages/graphiql-react/src/explorer/components/directive.css
+++ b/packages/graphiql-react/src/explorer/components/directive.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-directive {
-  color: var(--color-purple);
+  color: hsl(var(--color-purple));
 }
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css
index dcf8830aee0..a4e87ba279e 100644
--- a/packages/graphiql-react/src/explorer/components/doc-explorer.css
+++ b/packages/graphiql-react/src/explorer/components/doc-explorer.css
@@ -39,7 +39,7 @@
 /* The back-button in the doc explorer */
 a.graphiql-doc-explorer-back {
   align-items: center;
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: flex;
   text-decoration: none;
 
@@ -48,7 +48,7 @@ a.graphiql-doc-explorer-back {
   }
 
   &:focus {
-    outline: var(--color-neutral-60) auto 1px;
+    outline: hsla(var(--color-neutral), 0.6) auto 1px;
 
     & + .graphiql-doc-explorer-title {
       /* Don't hide the header when focussing the back link */
@@ -78,15 +78,15 @@ a.graphiql-doc-explorer-back {
 
 /* The contents of the currently active page in the doc explorer */
 .graphiql-doc-explorer-content > * {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   margin-top: var(--px-20);
 }
 
 /* Error message */
 .graphiql-doc-explorer-error {
-  background-color: var(--color-red-background);
-  border: 1px solid var(--color-red);
+  background-color: hsla(var(--color-red), 0.15);
+  border: 1px solid hsl(var(--color-red));
   border-radius: var(--border-radius-8);
-  color: var(--color-red);
+  color: hsl(var(--color-red));
   padding: var(--px-8) var(--px-12);
 }
diff --git a/packages/graphiql-react/src/explorer/components/field-link.css b/packages/graphiql-react/src/explorer/components/field-link.css
index 59e38813733..c32763bcf22 100644
--- a/packages/graphiql-react/src/explorer/components/field-link.css
+++ b/packages/graphiql-react/src/explorer/components/field-link.css
@@ -1,5 +1,5 @@
 a.graphiql-doc-explorer-field-name {
-  color: var(--color-blue);
+  color: hsl(var(--color-blue));
   text-decoration: none;
 
   &:hover {
@@ -7,6 +7,6 @@ a.graphiql-doc-explorer-field-name {
   }
 
   &:focus {
-    outline: var(--color-blue) auto 1px;
+    outline: hsl(var(--color-blue)) auto 1px;
   }
 }
diff --git a/packages/graphiql-react/src/explorer/components/schema-documentation.css b/packages/graphiql-react/src/explorer/components/schema-documentation.css
index b7b06d5e4ab..a80fb212bcc 100644
--- a/packages/graphiql-react/src/explorer/components/schema-documentation.css
+++ b/packages/graphiql-react/src/explorer/components/schema-documentation.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-root-type {
-  color: var(--color-blue);
+  color: hsl(var(--color-blue));
 }
diff --git a/packages/graphiql-react/src/explorer/components/search.css b/packages/graphiql-react/src/explorer/components/search.css
index 8858c5f923e..ae10b2fc894 100644
--- a/packages/graphiql-react/src/explorer/components/search.css
+++ b/packages/graphiql-react/src/explorer/components/search.css
@@ -1,15 +1,15 @@
 @import url('@reach/combobox/styles.css');
 
 [data-reach-combobox] {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
 
   &:not([data-state='idle']) {
     border-radius: var(--border-radius-4);
     box-shadow: var(--box-shadow);
-    color: var(--color-neutral-100);
+    color: hsla(var(--color-neutral), 1);
 
     & .graphiql-doc-explorer-search-input {
-      background: var(--color-neutral-0);
+      background: hsl(var(--color-base));
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -18,7 +18,7 @@
 
 .graphiql-doc-explorer-search-input {
   align-items: center;
-  background-color: var(--color-neutral-7);
+  background-color: hsla(var(--color-neutral), 0.07);
   border-radius: var(--border-radius-4);
   display: flex;
   padding: var(--px-8) var(--px-12);
@@ -36,11 +36,11 @@
 }
 
 [data-reach-combobox-popover] {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   border: none;
   border-bottom-left-radius: var(--border-radius-4);
   border-bottom-right-radius: var(--border-radius-4);
-  border-top: 1px solid var(--color-neutral-15);
+  border-top: 1px solid hsla(var(--color-neutral), 0.15);
   max-height: 400px;
   overflow-y: auto;
 
@@ -58,22 +58,22 @@
 
 [data-reach-combobox-option] {
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   overflow-x: hidden;
   padding: var(--px-8) var(--px-12);
   text-overflow: ellipsis;
   white-space: nowrap;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-7);
+    background-color: hsla(var(--color-neutral), 0.07);
   }
 
   &:hover {
-    background-color: var(--color-neutral-10);
+    background-color: hsla(var(--color-neutral), 0.1);
   }
 
   &[data-highlighted]:hover {
-    background-color: var(--color-neutral-15);
+    background-color: hsla(var(--color-neutral), 0.15);
   }
 
   & + & {
@@ -82,19 +82,19 @@
 }
 
 .graphiql-doc-explorer-search-type {
-  color: var(--color-blue);
+  color: hsl(var(--color-blue));
 }
 
 .graphiql-doc-explorer-search-field {
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
 }
 
 .graphiql-doc-explorer-search-argument {
-  color: var(--color-purple);
+  color: hsl(var(--color-purple));
 }
 
 .graphiql-doc-explorer-search-divider {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   font-size: var(--font-size-hint);
   font-weight: var(--font-weight-medium);
   margin-top: var(--px-8);
@@ -102,6 +102,6 @@
 }
 
 .graphiql-doc-explorer-search-empty {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   padding: var(--px-8) var(--px-12);
 }
diff --git a/packages/graphiql-react/src/explorer/components/type-documentation.css b/packages/graphiql-react/src/explorer/components/type-documentation.css
index 4da4394ea0e..7f900f4e3aa 100644
--- a/packages/graphiql-react/src/explorer/components/type-documentation.css
+++ b/packages/graphiql-react/src/explorer/components/type-documentation.css
@@ -7,5 +7,5 @@
 }
 
 .graphiql-doc-explorer-enum-value {
-  color: var(--color-blue);
+  color: hsl(var(--color-blue));
 }
diff --git a/packages/graphiql-react/src/explorer/components/type-link.css b/packages/graphiql-react/src/explorer/components/type-link.css
index f90371214b3..e534bb57003 100644
--- a/packages/graphiql-react/src/explorer/components/type-link.css
+++ b/packages/graphiql-react/src/explorer/components/type-link.css
@@ -1,5 +1,5 @@
 a.graphiql-doc-explorer-type-name {
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
   text-decoration: none;
 
   &:hover {
@@ -7,6 +7,6 @@ a.graphiql-doc-explorer-type-name {
   }
 
   &:focus {
-    outline: var(--color-orche) auto 1px;
+    outline: hsl(var(--color-orche)) auto 1px;
   }
 }
diff --git a/packages/graphiql-react/src/history/style.css b/packages/graphiql-react/src/history/style.css
index ac0ebe2c1c6..cc43f3657b5 100644
--- a/packages/graphiql-react/src/history/style.css
+++ b/packages/graphiql-react/src/history/style.css
@@ -10,15 +10,15 @@
 
 .graphiql-history-item {
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: flex;
   font-size: var(--font-size-inline-code);
   font-family: var(--font-family-mono);
   height: 34px;
 
   &:hover {
-    color: var(--color-neutral-100);
-    background-color: var(--color-neutral-7);
+    color: hsla(var(--color-neutral), 1);
+    background-color: hsla(var(--color-neutral), 0.07);
   }
 
   &:not(:first-child) {
@@ -26,7 +26,7 @@
   }
 
   &.editable {
-    background-color: var(--color-pink-background);
+    background-color: hsla(var(--color-pink), 0.1);
 
     & > input {
       background: transparent;
@@ -38,20 +38,20 @@
       width: 100%;
 
       &::placeholder {
-        color: var(--color-neutral-60);
+        color: hsla(var(--color-neutral), 0.6);
       }
     }
 
     & > button {
-      color: var(--color-pink);
+      color: hsl(var(--color-pink));
       padding: 0 var(--px-10);
 
       &:active {
-        background-color: var(--color-pink-background-dark);
+        background-color: hsla(var(--color-pink), 0.15);
       }
 
       &:focus {
-        outline: var(--color-pink) auto 1px;
+        outline: hsl(var(--color-pink)) auto 1px;
       }
 
       & > svg {
@@ -71,12 +71,12 @@ button.graphiql-history-item-label {
 
 button.graphiql-history-item-action {
   align-items: center;
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: flex;
   padding: var(--px-8) var(--px-6);
 
   &:hover {
-    color: var(--color-neutral-100);
+    color: hsla(var(--color-neutral), 1);
   }
 
   & > svg {
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index 56ba7adf5d0..c406b4b2b1f 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -3,29 +3,15 @@
 .CodeMirror-lint-tooltip,
 reach-portal {
   /* Colors */
-  --color-pink: #d60690;
-  --color-purple: #6e6acf;
-  --color-blue: #007eea;
-  --color-orche: #d37f00;
-  --color-red: #f85b30;
-  --color-green: #2bab7c;
-  --color-teal: #009fb8;
-  --color-neutral-100: #3b4b68;
-  --color-neutral-60: #8993a4;
-  --color-neutral-40: #b1b7c3;
-  --color-neutral-15: #e2e4e8;
-  --color-neutral-10: #ebedf0;
-  --color-neutral-7: #f1f2f4;
-  --color-neutral-0: #ffffff;
-
-  --color-pink-background: rgb(214, 6, 144, 0.1);
-  --color-pink-background-dark: rgb(214, 6, 144, 0.15);
-  --color-pink-dark: #ab0573;
-  --color-orche-background: rgba(211, 127, 0, 0.07);
-  --color-orche-background-dark: rgba(211, 127, 0, 0.12);
-  --color-red-background: rgba(248, 91, 48, 0.12);
-  --color-green-background: rgba(43, 171, 124, 0.12);
-  --color-neutral-background: rgba(59, 75, 104, 0.1);
+  --color-pink: 320, 95%, 43%;
+  --color-purple: 242, 51%, 61%;
+  --color-blue: 208, 100%, 46%;
+  --color-orche: 36, 100%, 41%;
+  --color-red: 13, 93%, 58%;
+  --color-green: 158, 60%, 42%;
+  --color-teal: 188, 100%, 36%;
+  --color-neutral: 219, 28%, 32%;
+  --color-base: 219, 28%, 100%;
 
   /* Font */
   --font-family: 'Roboto', sans-serif;
@@ -73,19 +59,12 @@ reach-portal {
   body:not(.graphiql-light) .CodeMirror-info,
   body:not(.graphiql-light) .CodeMirror-lint-tooltip,
   body:not(.graphiql-light) reach-portal {
-    --color-pink: #ff5895;
-    --color-purple: #918cff;
-    --color-blue: #6fbcff;
-    --color-orche: #ffcc99;
-    --color-neutral-100: #b7c2d7;
-    --color-neutral-60: #5a687f;
-    --color-neutral-40: #465877;
-    --color-neutral-15: #2d384c;
-    --color-neutral-10: #26303f;
-    --color-neutral-7: #293242;
-    --color-neutral-0: #222b39;
-
-    --color-pink-dark: #ff357f;
+    --color-pink: 338, 100%, 67%;
+    --color-purple: 243, 100%, 77%;
+    --color-blue: 208, 100%, 72%;
+    --color-orche: 30, 100%, 80%;
+    --color-neutral: 219, 29%, 78%;
+    --color-base: 219, 29%, 18%;
   }
 }
 
@@ -93,19 +72,12 @@ body.graphiql-dark .graphiql-container,
 body.graphiql-dark .CodeMirror-info,
 body.graphiql-dark .CodeMirror-lint-tooltip,
 body.graphiql-dark reach-portal {
-  --color-pink: #ff5895;
-  --color-purple: #918cff;
-  --color-blue: #6fbcff;
-  --color-orche: #ffcc99;
-  --color-neutral-100: #b7c2d7;
-  --color-neutral-60: #5a687f;
-  --color-neutral-40: #465877;
-  --color-neutral-15: #2d384c;
-  --color-neutral-10: #26303f;
-  --color-neutral-7: #293242;
-  --color-neutral-0: #222b39;
-
-  --color-pink-dark: #ff357f;
+  --color-pink: 338, 100%, 67%;
+  --color-purple: 243, 100%, 77%;
+  --color-blue: 208, 100%, 72%;
+  --color-orche: 30, 100%, 80%;
+  --color-neutral: 219, 29%, 78%;
+  --color-base: 219, 29%, 18%;
 }
 
 .graphiql-container,
@@ -114,7 +86,7 @@ body.graphiql-dark reach-portal {
 reach-portal {
   &,
   &:is(button) {
-    color: var(--color-neutral-100);
+    color: hsla(var(--color-neutral), 1);
     font-family: var(--font-family);
     font-size: var(--font-size-body);
     font-weight: var(----font-weight-regular);
@@ -122,20 +94,20 @@ reach-portal {
   }
 
   & input {
-    color: var(--color-neutral-100);
+    color: hsla(var(--color-neutral), 1);
     font-family: var(--font-family);
     font-size: var(--font-size-caption);
 
     &::placeholder {
-      color: var(--color-neutral-60);
+      color: hsla(var(--color-neutral), 0.6);
     }
   }
 
   & a {
-    color: var(--color-pink);
+    color: hsl(var(--color-pink));
 
     &:focus {
-      outline: var(--color-pink) auto 1px;
+      outline: hsl(var(--color-pink)) auto 1px;
     }
   }
 }
diff --git a/packages/graphiql-react/src/toolbar/button.css b/packages/graphiql-react/src/toolbar/button.css
index 83baae4c3c7..a4d2d89c23b 100644
--- a/packages/graphiql-react/src/toolbar/button.css
+++ b/packages/graphiql-react/src/toolbar/button.css
@@ -4,7 +4,7 @@ button.graphiql-toolbar-button {
   width: var(--toolbar-width);
 
   &.error {
-    background: var(--color-red-background);
+    background: hsla(var(--color-red), 0.15);
   }
 
   & > svg {
diff --git a/packages/graphiql-react/src/toolbar/execute.css b/packages/graphiql-react/src/toolbar/execute.css
index ee8c6a112da..b16627c6fc2 100644
--- a/packages/graphiql-react/src/toolbar/execute.css
+++ b/packages/graphiql-react/src/toolbar/execute.css
@@ -3,7 +3,7 @@
 }
 
 .graphiql-execute-button {
-  background-color: var(--color-pink);
+  background-color: hsl(var(--color-pink));
   border: none;
   border-radius: var(--border-radius-8);
   cursor: pointer;
@@ -12,11 +12,11 @@
   width: var(--toolbar-width);
 
   &:active {
-    background-color: var(--color-pink-dark);
+    background-color: hsla(var(--color-pink), 0.8);
   }
 
   &:focus {
-    outline: var(--color-pink-dark) auto 1px;
+    outline: hsla(var(--color-pink), 0.8) auto 1px;
   }
 
   & > svg {
diff --git a/packages/graphiql-react/src/ui/button-group.css b/packages/graphiql-react/src/ui/button-group.css
index ed2b0a1264c..4b061627411 100644
--- a/packages/graphiql-react/src/ui/button-group.css
+++ b/packages/graphiql-react/src/ui/button-group.css
@@ -1,12 +1,15 @@
 .graphiql-button-group {
-  background-color: var(--color-neutral-7);
+  background-color: hsla(var(--color-neutral), 0.07);
   /* Border radius of button plus padding */
   border-radius: calc(var(--border-radius-4) + var(--px-4));
   display: flex;
   padding: var(--px-4);
 
-  & > button.graphiql-button.active {
-    background-color: var(--color-neutral-0);
+  & > button.graphiql-button {
+    background-color: transparent;
+    &.active {
+      background-color: hsl(var(--color-base));
+    }
   }
 
   & > * + * {
diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
index 272c06ad76f..3d4122bb6ee 100644
--- a/packages/graphiql-react/src/ui/button.css
+++ b/packages/graphiql-react/src/ui/button.css
@@ -4,35 +4,35 @@ button.graphiql-un-styled {
   cursor: pointer;
 
   &:active {
-    background-color: var(--color-neutral-7);
+    background-color: hsla(var(--color-neutral), 0.07);
   }
 
   &:focus {
-    outline: var(--color-neutral-15) auto 1px;
+    outline: hsla(var(--color-neutral), 0.15) auto 1px;
   }
 }
 
 button.graphiql-button {
-  background-color: var(--color-neutral-7);
+  background-color: hsla(var(--color-neutral), 0.07);
   border: none;
   border-radius: var(--border-radius-4);
-  color: var(--color-neutral-100);
+  color: hsla(var(--color-neutral), 1);
   cursor: pointer;
   font-size: var(--font-size-body);
   padding: var(--px-8) var(--px-12);
 
   &:active {
-    background-color: var(--color-neutral-10);
+    background-color: hsla(var(--color-neutral), 0.1);
   }
 
   &:focus {
-    outline: var(--color-neutral-15) auto 1px;
+    outline: hsla(var(--color-neutral), 0.15) auto 1px;
   }
 
   &.graphiql-button-success {
-    background-color: var(--color-green-background);
+    background-color: hsla(var(--color-green), 0.15);
   }
   &.graphiql-button-error {
-    background-color: var(--color-red-background);
+    background-color: hsla(var(--color-red), 0.15);
   }
 }
diff --git a/packages/graphiql-react/src/ui/dialog.css b/packages/graphiql-react/src/ui/dialog.css
index ef7b513f0e7..6fe8bf686ed 100644
--- a/packages/graphiql-react/src/ui/dialog.css
+++ b/packages/graphiql-react/src/ui/dialog.css
@@ -2,7 +2,7 @@
 
 [data-reach-dialog-overlay] {
   align-items: center;
-  background-color: var(--color-neutral-background);
+  background-color: hsla(var(--color-neutral), 0.15);
   display: flex;
   justify-content: center;
   /**
@@ -14,7 +14,7 @@
 }
 
 [data-reach-dialog-content] {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   border-radius: var(--border-radius-12);
   box-shadow: var(--box-shadow);
   margin: 0;
@@ -26,7 +26,7 @@
 }
 
 .graphiql-dialog-close > svg {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: block;
   height: var(--px-12);
   padding: var(--px-12);
diff --git a/packages/graphiql-react/src/ui/markdown.css b/packages/graphiql-react/src/ui/markdown.css
index 4e3acde1ce0..f1af2b6d9d5 100644
--- a/packages/graphiql-react/src/ui/markdown.css
+++ b/packages/graphiql-react/src/ui/markdown.css
@@ -72,7 +72,7 @@
 .CodeMirror-hint-information-description,
 .CodeMirror-info .info-description {
   & a {
-    color: var(--color-pink);
+    color: hsl(var(--color-pink));
     text-decoration: none;
 
     &:hover {
@@ -81,13 +81,13 @@
   }
 
   & blockquote {
-    border-left: 1.5px solid var(--color-neutral-40);
+    border-left: 1.5px solid hsla(var(--color-neutral), 0.4);
   }
 
   & code,
   & pre {
-    background-color: var(--color-neutral-7);
-    color: var(--color-neutral-100);
+    background-color: hsla(var(--color-neutral), 0.07);
+    color: hsla(var(--color-neutral), 1);
   }
 
   & > * {
@@ -99,17 +99,17 @@
 .CodeMirror-hint-information-deprecation-reason,
 .CodeMirror-info .info-deprecation {
   & a {
-    color: var(--color-orche);
+    color: hsl(var(--color-orche));
     text-decoration: underline;
   }
 
   & blockquote {
-    border-left: 1.5px solid var(--color-orche);
+    border-left: 1.5px solid hsl(var(--color-orche));
   }
 
   & code,
   & pre {
-    background-color: var(--color-orche-background-dark);
+    background-color: hsla(var(--color-orche), 0.15);
   }
 
   & > * {
@@ -129,10 +129,10 @@
 
 .CodeMirror-hint-information-deprecation,
 .CodeMirror-info .info-deprecation {
-  background-color: var(--color-orche-background);
-  border: 1px solid var(--color-orche);
+  background-color: hsla(var(--color-orche), 0.07);
+  border: 1px solid hsl(var(--color-orche));
   border-radius: var(--border-radius-4);
-  color: var(--color-orche);
+  color: hsl(var(--color-orche));
   margin-top: var(--px-12);
   padding: var(--px-6) var(--px-8);
 }
diff --git a/packages/graphiql-react/src/ui/menu.css b/packages/graphiql-react/src/ui/menu.css
index 3344eaa4bcf..9a91b7cacd1 100644
--- a/packages/graphiql-react/src/ui/menu.css
+++ b/packages/graphiql-react/src/ui/menu.css
@@ -1,7 +1,7 @@
 @import url('@reach/menu-button/styles.css');
 
 [data-reach-menu-list] {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   box-shadow: var(--box-shadow);
   border: none;
   border-radius: var(--border-radius-8);
@@ -21,7 +21,7 @@
 
   &[data-selected],
   &:hover {
-    background-color: var(--color-neutral-7);
+    background-color: hsla(var(--color-neutral), 0.07);
     color: inherit;
   }
 
diff --git a/packages/graphiql-react/src/ui/spinner.css b/packages/graphiql-react/src/ui/spinner.css
index ef23858c8b5..0953f487fd4 100644
--- a/packages/graphiql-react/src/ui/spinner.css
+++ b/packages/graphiql-react/src/ui/spinner.css
@@ -8,7 +8,7 @@
     animation: rotation 0.8s linear 0s infinite;
     border: 4px solid transparent;
     border-radius: 100%;
-    border-top: 4px solid var(--color-neutral-40);
+    border-top: 4px solid hsla(var(--color-neutral), 0.4);
     content: '';
     display: inline-block;
     height: 46px;
diff --git a/packages/graphiql-react/src/ui/tabs.css b/packages/graphiql-react/src/ui/tabs.css
index bde3c6ef2e8..b6c4e884dc8 100644
--- a/packages/graphiql-react/src/ui/tabs.css
+++ b/packages/graphiql-react/src/ui/tabs.css
@@ -11,7 +11,7 @@
 .graphiql-tab {
   align-items: stretch;
   border-radius: var(--border-radius-8);
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: flex;
 
   & > button.graphiql-tab-close {
@@ -24,8 +24,8 @@
   }
 
   &.graphiql-tab-active {
-    background-color: var(--color-neutral-15);
-    color: var(--color-neutral-100);
+    background-color: hsla(var(--color-neutral), 0.15);
+    color: hsla(var(--color-neutral), 1);
   }
 }
 
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 1aecf60e206..662108de716 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -1,6 +1,6 @@
 /* Everything */
 .graphiql-container {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   display: flex;
   height: 100%;
   margin: 0;
@@ -17,12 +17,12 @@
   width: var(--sidebar-width);
 }
 .graphiql-container .graphiql-sidebar button {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   height: var(--sidebar-width);
   width: var(--sidebar-width);
 }
 .graphiql-container .graphiql-sidebar button.active {
-  color: var(--color-neutral-100);
+  color: hsla(var(--color-neutral), 1);
 }
 .graphiql-container .graphiql-sidebar button:not(:first-child) {
   margin-top: var(--px-4);
@@ -42,7 +42,7 @@
 
 /* The current session and tabs */
 .graphiql-container .graphiql-sessions {
-  background-color: var(--color-neutral-7);
+  background-color: hsla(var(--color-neutral), 0.07);
   /* Adding the 8px of padding to the inner border radius of the query editor */
   border-radius: calc(var(--border-radius-12) + var(--px-8));
   display: flex;
@@ -66,7 +66,7 @@ button.graphiql-tab-add {
   margin-left: var(--px-12);
 }
 button.graphiql-tab-add > svg {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   display: block;
   height: var(--px-16);
   width: var(--px-16);
@@ -80,7 +80,7 @@ button.graphiql-tab-add > svg {
 
 /* The GraphiQL logo */
 .graphiql-container .graphiql-logo {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-medium);
   padding: var(--px-12) var(--px-16);
@@ -95,7 +95,7 @@ button.graphiql-tab-add > svg {
 
 /* All editors (query, variable, headers) */
 .graphiql-container .graphiql-editors {
-  background-color: var(--color-neutral-0);
+  background-color: hsl(var(--color-base));
   border-radius: calc(var(--border-radius-12));
   display: flex;
   flex: 1;
@@ -107,7 +107,7 @@ button.graphiql-tab-add > svg {
 
 /* The query editor and the toolbar */
 .graphiql-container .graphiql-query-editor {
-  border-bottom: 1px solid var(--color-neutral-15);
+  border-bottom: 1px solid hsla(var(--color-neutral), 0.15);
   display: flex;
   flex: 1;
   padding: var(--px-16);
@@ -130,7 +130,7 @@ button.graphiql-tab-add > svg {
 
 /* The toolbar icons */
 .graphiql-toolbar-icon {
-  color: var(--color-neutral-40);
+  color: hsla(var(--color-neutral), 0.4);
   display: block;
   height: calc(var(--toolbar-width) - (var(--px-8) * 2));
   padding: var(--px-8);
@@ -146,10 +146,10 @@ button.graphiql-tab-add > svg {
   padding: var(--px-8);
 }
 .graphiql-container .graphiql-editor-tools button {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
 }
 .graphiql-container .graphiql-editor-tools button.active {
-  color: var(--color-neutral-100);
+  color: hsla(var(--color-neutral), 1);
 }
 
 /* The tab buttons to switch between editor tools */
@@ -172,7 +172,7 @@ button.graphiql-tab-add > svg {
 
 /* The response view */
 .graphiql-container .graphiql-response {
-  --editor-background: var(--color-neutral-7);
+  --editor-background: transparent;
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -187,12 +187,12 @@ button.graphiql-tab-add > svg {
 
 /* The footer below the response view */
 .graphiql-container .graphiql-footer {
-  border-top: 1px solid var(--color-neutral-15);
+  border-top: 1px solid hsla(var(--color-neutral), 0.15);
 }
 
 /* The plugin container */
 .graphiql-container .graphiql-plugin {
-  border-left: 1px solid var(--color-neutral-15);
+  border-left: 1px solid hsla(var(--color-neutral), 0.15);
   flex: 1;
   max-width: calc(100% - 2 * var(--px-16));
   overflow-y: auto;
@@ -205,7 +205,7 @@ button.graphiql-tab-add > svg {
   cursor: col-resize;
 }
 .graphiql-container .graphiql-horizontal-drag-bar:hover::after {
-  border: var(--px-2) solid var(--color-neutral-15);
+  border: var(--px-2) solid hsla(var(--color-neutral), 0.15);
   border-radius: var(--border-radius-2);
   content: '';
   display: block;
@@ -219,7 +219,7 @@ button.graphiql-tab-add > svg {
 
 /* Generic icon style */
 .graphiql-container .graphiql-chevron-icon {
-  color: var(--color-neutral-40);
+  color: hsla(var(--color-neutral), 0.4);
   display: block;
   height: var(--px-12);
   padding: var(--px-12);
@@ -256,7 +256,7 @@ reach-portal .graphiql-dialog-title {
 /* A section inside the settings dialog */
 reach-portal .graphiql-dialog-section {
   align-items: center;
-  border-top: 1px solid var(--color-neutral-15);
+  border-top: 1px solid hsla(var(--color-neutral), 0.15);
   display: flex;
   justify-content: space-between;
   padding: var(--px-24);
@@ -273,7 +273,7 @@ reach-portal .graphiql-dialog-section-title {
 
 /* The section caption in the settings dialog */
 reach-portal .graphiql-dialog-section-caption {
-  color: var(--color-neutral-60);
+  color: hsla(var(--color-neutral), 0.6);
 }
 
 reach-portal .graphiql-table {
@@ -281,13 +281,13 @@ reach-portal .graphiql-table {
   width: 100%;
 }
 reach-portal .graphiql-table :is(th, td) {
-  border: 1px solid var(--color-neutral-15);
+  border: 1px solid hsla(var(--color-neutral), 0.15);
   padding: var(--px-8) var(--px-12);
 }
 
 /* A single key the short-key dialog */
 reach-portal .graphiql-key {
-  background-color: var(--color-neutral-10);
+  background-color: hsla(var(--color-neutral), 0.1);
   border-radius: var(--border-radius-4);
   padding: var(--px-4);
 }