add CSS variables for color shades (#2735)

.changeset/fair-gifts-smell.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/react': minor
+---
+
+Add CSS variables for color alpha values:
+- `--alpha-secondary`: A color for supplementary text that should be read but not be the main focus
+- `--alpha-tertiary`: A color for supplementary text which is optional to read, i.e. the UI would function without the user reading this text
+- `--alpha-background-light`, `--alpha-background-medium` and `--alpha-background-heavy`: Three alpha values used for backgrounds and borders that have different intensity

.changeset/sweet-terms-fold.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/plugin-explorer': patch
+---
+
+Use the new CSS variables for color alpha values defined in `@graphiql/react` in style definitions

packages/graphiql-plugin-explorer/src/index.css

@@ -29,7 +29,7 @@
 
 .graphiql-explorer-root select {
   background-color: hsl(var(--color-base));
-  border: 1px solid hsla(var(--color-neutral), 0.6);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-secondary));
   border-radius: var(--border-radius-4);
   color: hsl(var(--color-neutral));
   margin: 0 var(--px-4);

packages/graphiql-plugin-explorer/src/index.tsx

@@ -42,7 +42,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         <svg
           viewBox="0 -4 13 15"
           style={{
-            color: 'hsla(var(--color-neutral), 0.4)',
+            color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
             marginRight: 'var(--px-4)',
             height: 'var(--px-16)',
             width: 'var(--px-16)',
@@ -58,7 +58,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         <svg
           viewBox="0 -2 13 15"
           style={{
-            color: 'hsla(var(--color-neutral), 0.4)',
+            color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
             marginRight: 'var(--px-4)',
             height: 'var(--px-16)',
             width: 'var(--px-16)',
@@ -74,7 +74,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         <svg
           viewBox="0 0 15 15"
           style={{
-            color: 'hsla(var(--color-neutral), 0.4)',
+            color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
             marginRight: 'var(--px-4)',
             height: 'var(--px-16)',
             width: 'var(--px-16)',
@@ -106,7 +106,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         buttonStyle: {
           backgroundColor: 'transparent',
           border: 'none',
-          color: 'hsla(var(--color-neutral), 0.6)',
+          color: 'hsla(var(--color-neutral), var(--alpha-secondary, 0.6))',
           cursor: 'pointer',
           fontSize: '1em',
         },
@@ -116,7 +116,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         actionButtonStyle: {
           backgroundColor: 'transparent',
           border: 'none',
-          color: 'hsla(var(--color-neutral), 0.6)',
+          color: 'hsla(var(--color-neutral), var(--alpha-secondary, 0.6))',
           cursor: 'pointer',
           fontSize: '1em',
         },

packages/graphiql-react/src/editor/style/auto-insertion.css

@@ -13,6 +13,6 @@
 
   15%,
   85% {
-    background-color: hsla(var(--color-warning), 0.07);
+    background-color: hsla(var(--color-warning), var(--alpha-background-light));
   }
 }

packages/graphiql-react/src/editor/style/codemirror.css

@@ -35,7 +35,7 @@
 
 .cm-s-graphiql {
   /* Default to punctuation */
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
 
   /* OperationType, `fragment`, `on` */
   & .cm-keyword {
@@ -47,7 +47,7 @@
   }
   /* Punctuator (except `$` and `@`) */
   & .cm-punctuation {
-    color: hsla(var(--color-neutral), 0.6);
+    color: hsla(var(--color-neutral), var(--alpha-secondary));
   }
   /* Variable */
   & .cm-variable {
@@ -91,11 +91,11 @@
   }
   /* Comment */
   & .cm-comment {
-    color: hsla(var(--color-neutral), 0.4);
+    color: hsla(var(--color-neutral), var(--alpha-tertiary));
   }
   /* Whitespace */
   & .cm-ws {
-    color: hsla(var(--color-neutral), 0.4);
+    color: hsla(var(--color-neutral), var(--alpha-tertiary));
   }
   /* Invalid characters */
   & .cm-invalidchar {
@@ -104,25 +104,25 @@
 
   /* Cursor */
   & .CodeMirror-cursor {
-    border-left: 2px solid hsla(var(--color-neutral), 0.6);
+    border-left: 2px solid hsla(var(--color-neutral), var(--alpha-secondary));
   }
 
   /* Color for line numbers and fold-gutters */
   & .CodeMirror-linenumber {
-    color: hsla(var(--color-neutral), 0.4);
+    color: hsla(var(--color-neutral), var(--alpha-tertiary));
   }
 }
 
 /* Matching bracket colors */
 div.CodeMirror span.CodeMirror-matchingbracket,
 div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: hsla(var(--color-neutral), 0.4);
+  color: hsla(var(--color-neutral), var(--alpha-tertiary));
 }
 
 /* Selected text blocks */
 .CodeMirror-selected,
 .CodeMirror-focused .CodeMirror-selected {
-  background: hsla(var(--color-neutral), 0.15);
+  background: hsla(var(--color-neutral), var(--alpha-background-heavy));
 }
 
 /* Position the search dialog */
@@ -137,12 +137,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   z-index: 6;
 }
 .CodeMirror-dialog-top {
-  border-bottom: 1px solid hsla(var(--color-neutral), 0.15);
+  border-bottom: 1px solid
+    hsla(var(--color-neutral), var(--alpha-background-heavy));
   padding-bottom: var(--px-12);
   top: 0;
 }
 .CodeMirror-dialog-bottom {
-  border-top: 1px solid hsla(var(--color-neutral), 0.15);
+  border-top: 1px solid
+    hsla(var(--color-neutral), var(--alpha-background-heavy));
   bottom: 0;
   padding-top: var(--px-12);
 }
@@ -154,7 +156,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 
 /* Style the input field for searching */
 .CodeMirror-dialog input {
-  border: 1px solid hsla(var(--color-neutral), 0.15);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
   border-radius: var(--border-radius-4);
   padding: var(--px-4);
 }
@@ -164,7 +166,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 
 /* Set the highlight color for search results */
 .cm-searching {
-  background-color: hsla(var(--color-warning), 0.07);
+  background-color: hsla(var(--color-warning), var(--alpha-background-light));
   /**
    * When cycling through search results, CodeMirror overlays the current 
    * selection with another element that has the .CodeMirror-selected class

packages/graphiql-react/src/editor/style/fold.css

@@ -16,7 +16,7 @@
 
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
-  color: hsla(var(--color-neutral), 0.4);
+  color: hsla(var(--color-neutral), var(--alpha-tertiary));
 
   &::after {
     margin: 0 var(--px-2);

packages/graphiql-react/src/editor/style/hint.css

@@ -18,7 +18,7 @@
 /* Autocomplete items */
 .CodeMirror-hint {
   border-radius: var(--border-radius-4);
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   grid-column: 1 / 2;
   margin: var(--px-4);
   /* Override element style added by codemirror */
@@ -29,13 +29,14 @@
   }
 }
 li.CodeMirror-hint-active {
-  background: hsla(var(--color-primary), 0.1);
+  background: hsla(var(--color-primary), var(--alpha-background-medium));
   color: hsl(var(--color-primary));
 }
 
 /* Sidebar with additional information */
 .CodeMirror-hint-information {
-  border-left: 1px solid hsla(var(--color-neutral), 0.15);
+  border-left: 1px solid
+    hsla(var(--color-neutral), var(--alpha-background-heavy));
   grid-column: 2 / 3;
   grid-row: 1 / 99999;
   /* Same as the popup as a whole minus padding */
@@ -52,9 +53,9 @@ li.CodeMirror-hint-active {
   font-weight: var(--font-weight-medium);
 }
 .CodeMirror-hint-information-type-name-pill {
-  border: 1px solid hsla(var(--color-neutral), 0.4);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
   border-radius: var(--border-radius-4);
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   margin-left: var(--px-6);
   padding: var(--px-4);
 }
@@ -67,6 +68,6 @@ li.CodeMirror-hint-active {
   }
 }
 .CodeMirror-hint-information-description {
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   margin-top: var(--px-12);
 }

packages/graphiql-react/src/editor/style/info.css

@@ -43,16 +43,16 @@
 
   /* Type names */
   & .type-name-pill {
-    border: 1px solid hsla(var(--color-neutral), 0.4);
+    border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
     border-radius: var(--border-radius-4);
-    color: hsla(var(--color-neutral), 0.6);
+    color: hsla(var(--color-neutral), var(--alpha-secondary));
     margin-left: var(--px-6);
     padding: var(--px-4);
   }
 
   /* Descriptions */
   & .info-description {
-    color: hsla(var(--color-neutral), 0.6);
+    color: hsla(var(--color-neutral), var(--alpha-secondary));
     margin-top: var(--px-12);
     overflow: hidden;
   }

packages/graphiql-react/src/explorer/components/argument.css

@@ -9,7 +9,7 @@
 }
 
 .graphiql-doc-explorer-argument-deprecation {
-  background-color: hsla(var(--color-warning), 0.07);
+  background-color: hsla(var(--color-warning), var(--alpha-background-light));
   border: 1px solid hsl(var(--color-warning));
   border-radius: var(--border-radius-4);
   color: hsl(var(--color-warning));

packages/graphiql-react/src/explorer/components/deprecation-reason.css

@@ -1,5 +1,5 @@
 .graphiql-doc-explorer-deprecation {
-  background-color: hsla(var(--color-warning), 0.07);
+  background-color: hsla(var(--color-warning), var(--alpha-background-light));
   border: 1px solid hsl(var(--color-warning));
   border-radius: var(--px-4);
   color: hsl(var(--color-warning));

packages/graphiql-react/src/explorer/components/doc-explorer.css

@@ -50,7 +50,7 @@
 /* The back-button in the doc explorer */
 a.graphiql-doc-explorer-back {
   align-items: center;
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   display: flex;
   text-decoration: none;
 
@@ -59,7 +59,7 @@ a.graphiql-doc-explorer-back {
   }
 
   &:focus {
-    outline: hsla(var(--color-neutral), 0.6) auto 1px;
+    outline: hsla(var(--color-neutral), var(--alpha-secondary)) auto 1px;
 
     & + .graphiql-doc-explorer-title {
       /* Don't hide the header when focussing the back link */
@@ -89,13 +89,13 @@ a.graphiql-doc-explorer-back {
 
 /* The contents of the currently active page in the doc explorer */
 .graphiql-doc-explorer-content > * {
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   margin-top: var(--px-20);
 }
 
 /* Error message */
 .graphiql-doc-explorer-error {
-  background-color: hsla(var(--color-error), 0.15);
+  background-color: hsla(var(--color-error), var(--alpha-background-heavy));
   border: 1px solid hsl(var(--color-error));
   border-radius: var(--border-radius-8);
   color: hsl(var(--color-error));

packages/graphiql-react/src/explorer/components/search.css

@@ -1,7 +1,7 @@
 @import url('@reach/combobox/styles.css');
 
 [data-reach-combobox] {
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
 
   &:not([data-state='idle']) {
     border: var(--popover-border);
@@ -19,7 +19,7 @@
 
 .graphiql-doc-explorer-search-input {
   align-items: center;
-  background-color: hsla(var(--color-neutral), 0.07);
+  background-color: hsla(var(--color-neutral), var(--alpha-background-light));
   border-radius: var(--border-radius-4);
   display: flex;
   padding: var(--px-8) var(--px-12);
@@ -41,7 +41,8 @@
   border: none;
   border-bottom-left-radius: var(--border-radius-4);
   border-bottom-right-radius: var(--border-radius-4);
-  border-top: 1px solid hsla(var(--color-neutral), 0.15);
+  border-top: 1px solid
+    hsla(var(--color-neutral), var(--alpha-background-heavy));
   max-height: 400px;
   overflow-y: auto;
 
@@ -59,22 +60,25 @@
 
 [data-reach-combobox-option] {
   border-radius: var(--border-radius-4);
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   overflow-x: hidden;
   padding: var(--px-8) var(--px-12);
   text-overflow: ellipsis;
   white-space: nowrap;
 
   &[data-highlighted] {
-    background-color: hsla(var(--color-neutral), 0.07);
+    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
   }
 
   &:hover {
-    background-color: hsla(var(--color-neutral), 0.1);
+    background-color: hsla(
+      var(--color-neutral),
+      var(--alpha-background-medium)
+    );
   }
 
   &[data-highlighted]:hover {
-    background-color: hsla(var(--color-neutral), 0.15);
+    background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
   }
 
   & + & {
@@ -95,14 +99,14 @@
 }
 
 .graphiql-doc-explorer-search-divider {
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   font-size: var(--font-size-hint);
   font-weight: var(--font-weight-medium);
   margin-top: var(--px-8);
   padding: var(--px-8) var(--px-12);
 }
 
 .graphiql-doc-explorer-search-empty {
-  color: hsla(var(--color-neutral), 0.6);
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
   padding: var(--px-8) var(--px-12);
 }