use different colors for field names and argument names (#2757)

thomasheyenbrock · web-flow · commit 32a70065434e · 2022-09-07T10:13:44.000+02:00
diff --git a/.changeset/violet-mangos-explain.md b/.changeset/violet-mangos-explain.md
@@ -0,0 +1,6 @@
+---
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+Use different colors for field names and argument names
diff --git a/packages/graphiql-plugin-explorer/src/index.tsx b/packages/graphiql-plugin-explorer/src/index.tsx
@@ -30,7 +30,7 @@ function ExplorerPlugin(props: GraphiQLExplorerProps) {
         def: 'hsl(var(--color-tertiary))',
         property: 'hsl(var(--color-info))',
         qualifier: 'hsl(var(--color-secondary))',
-        attribute: 'hsl(var(--color-info))',
+        attribute: 'hsl(var(--color-tertiary))',
         number: 'hsl(var(--color-success))',
         string: 'hsl(var(--color-warning))',
         builtin: 'hsl(var(--color-success))',
diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css
@@ -75,7 +75,7 @@
   }
   /* Name (ObjectField, Argument) */
   & .cm-attribute {
-    color: hsl(var(--color-info));
+    color: hsl(var(--color-tertiary));
   }
   /* Name (Directive) */
   & .cm-meta {
