use hsl values and reduce number of CSS variables (#2637)

graphql · Aug 24, 2022 · 22fba5e · 22fba5e
1 parent 7e7200d
commit 22fba5e
Show file tree

Hide file tree

Showing 28 changed files with 186 additions and 211 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-default-value {
-  color: var(--color-green);
+  color: hsl(var(--color-green));
 }