fix: updating #999 font colors to #666 (#1883)

* fix: updating #999 font colors to #666 Co-authored-by: Dan Sweeney <dsweeney@poppulo.com> Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
graphql · Oct 29, 2021 · afaa36c · afaa36c
1 parent 0240c57
commit afaa36c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/light-olives-rush.md b/.changeset/light-olives-rush.md
@@ -0,0 +1,6 @@
+---
+'graphiql-2-rfc-context': patch
+'graphiql': patch
+---
+
+Updating font colors for line numbers, comments & brackets from #999 to #666 for accessibility purposes. #666 passes AA accessibility standards for small text, with a contrast ratio of over 5:1.
diff --git a/packages/graphiql-2-rfc-context/src/components/common/themes/default/index.ts b/packages/graphiql-2-rfc-context/src/components/common/themes/default/index.ts
@@ -11,7 +11,7 @@ import { Colors, Space, GraphiQLTheme } from '../types';
 
 const palette = {
   neutral: {
-    20: '#999999',
+    20: '#666666',
     70: '#333333',
     90: `rgba(0, 0, 0, 0.1)`,
     100: '#fff',

diff --git a/packages/graphiql/src/css/app.css b/packages/graphiql/src/css/app.css
@@ -525,7 +525,7 @@ div.CodeMirror-lint-tooltip > * + * {
 
 /* Comment */
 .cm-comment {
-  color: #999;
+  color: #666;
 }
 
 /* Punctuation */

diff --git a/packages/graphiql/src/css/codemirror.css b/packages/graphiql/src/css/codemirror.css
@@ -29,15 +29,15 @@
 }
 .CodeMirror-linenumbers {}
 .CodeMirror-linenumber {
-  color: #999;
+  color: #666;
   min-width: 20px;
   padding: 0 3px 0 5px;
   text-align: right;
   white-space: nowrap;
 }
 
 .CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
+.CodeMirror-guttermarker-subtle { color: #666; }
 
 /* CURSOR */
 
@@ -96,12 +96,12 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-s-default .cm-meta {color: #555;}
 .cm-s-default .cm-qualifier {color: #555;}
 .cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-bracket {color: #666;}
 .cm-s-default .cm-tag {color: #170;}
 .cm-s-default .cm-attribute {color: #00c;}
 .cm-s-default .cm-header {color: blue;}
 .cm-s-default .cm-quote {color: #090;}
-.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-hr {color: #666;}
 .cm-s-default .cm-link {color: #00c;}
 
 .cm-negative {color: #d44;}

diff --git a/packages/graphiql/src/css/doc-explorer.css b/packages/graphiql/src/css/doc-explorer.css
@@ -159,7 +159,7 @@
 }
 
 .graphiql-container .field-short-description {
-  color: #999;
+  color: #666;
   margin-left: 5px;
   overflow: hidden;
   text-overflow: ellipsis;