From 1c184c171364e1a2b1f3297b3ba65c6a8c160893 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Sun, 7 Aug 2022 12:41:03 +0200 Subject: [PATCH] rename CSS variables for colors (#2641) --- .../src/editor/style/auto-insertion.css | 2 +- .../src/editor/style/codemirror.css | 30 +++++++------- .../graphiql-react/src/editor/style/fold.css | 2 +- .../graphiql-react/src/editor/style/hint.css | 4 +- .../graphiql-react/src/editor/style/lint.css | 24 +++++------ .../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 | 6 +-- .../src/explorer/components/field-link.css | 4 +- .../components/schema-documentation.css | 2 +- .../src/explorer/components/search.css | 6 +-- .../components/type-documentation.css | 2 +- .../src/explorer/components/type-link.css | 4 +- packages/graphiql-react/src/history/style.css | 8 ++-- packages/graphiql-react/src/style/root.css | 40 +++++++++++-------- .../graphiql-react/src/toolbar/button.css | 2 +- .../graphiql-react/src/toolbar/execute.css | 6 +-- packages/graphiql-react/src/ui/button.css | 4 +- packages/graphiql-react/src/ui/markdown.css | 14 +++---- 21 files changed, 92 insertions(+), 86 deletions(-) diff --git a/packages/graphiql-react/src/editor/style/auto-insertion.css b/packages/graphiql-react/src/editor/style/auto-insertion.css index 9ce2ddb9757..bb988cbfc3e 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: hsla(var(--color-orche), 0.07); + background-color: hsla(var(--color-warning), 0.07); } } diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css index 5e37b0261af..4f8c36da453 100644 --- a/packages/graphiql-react/src/editor/style/codemirror.css +++ b/packages/graphiql-react/src/editor/style/codemirror.css @@ -39,11 +39,11 @@ /* OperationType, `fragment`, `on` */ & .cm-keyword { - color: hsl(var(--color-pink)); + color: hsl(var(--color-primary)); } /* Name (OperationDefinition), FragmentName */ & .cm-def { - color: hsl(var(--color-teal)); + color: hsl(var(--color-tertiary)); } /* Punctuator (except `$` and `@`) */ & .cm-punctuation { @@ -51,43 +51,43 @@ } /* Variable */ & .cm-variable { - color: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } /* NamedType */ & .cm-atom { - color: hsl(var(--color-teal)); + color: hsl(var(--color-tertiary)); } /* IntValue, FloatValue */ & .cm-number { - color: hsl(var(--color-green)); + color: hsl(var(--color-success)); } /* StringValue */ & .cm-string { - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); } /* BooleanValue */ & .cm-builtin { - color: hsl(var(--color-green)); + color: hsl(var(--color-success)); } /* EnumValue */ & .cm-string-2 { - color: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } /* Name (ObjectField, Argument) */ & .cm-attribute { - color: hsl(var(--color-blue)); + color: hsl(var(--color-info)); } /* Name (Directive) */ & .cm-meta { - color: hsl(var(--color-teal)); + color: hsl(var(--color-tertiary)); } /* Name (Alias, Field without Alias) */ & .cm-property { - color: hsl(var(--color-blue)); + color: hsl(var(--color-info)); } /* Name (Field with Alias) */ & .cm-qualifier { - color: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } /* Comment */ & .cm-comment { @@ -99,7 +99,7 @@ } /* Invalid characters */ & .cm-invalidchar { - color: hsl(var(--color-red)); + color: hsl(var(--color-error)); } /* Cursor */ @@ -159,12 +159,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { padding: var(--px-4); } .CodeMirror-dialog input:focus { - outline: hsl(var(--color-pink)) solid 2px; + outline: hsl(var(--color-primary)) solid 2px; } /* Set the highlight color for search results */ .cm-searching { - background-color: hsla(var(--color-orche), 0.07); + background-color: hsla(var(--color-warning), 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 6dfbae43669..a9815e7c2a0 100644 --- a/packages/graphiql-react/src/editor/style/fold.css +++ b/packages/graphiql-react/src/editor/style/fold.css @@ -5,7 +5,7 @@ } .CodeMirror-foldmarker { - background-color: hsl(var(--color-blue)); + background-color: hsl(var(--color-info)); border-radius: var(--border-radius-4); color: hsl(var(--color-base)); font-family: inherit; diff --git a/packages/graphiql-react/src/editor/style/hint.css b/packages/graphiql-react/src/editor/style/hint.css index 6017d5d0766..27be02a3cb2 100644 --- a/packages/graphiql-react/src/editor/style/hint.css +++ b/packages/graphiql-react/src/editor/style/hint.css @@ -29,8 +29,8 @@ } } li.CodeMirror-hint-active { - background: hsla(var(--color-pink), 0.1); - color: hsl(var(--color-pink)); + background: hsla(var(--color-primary), 0.1); + color: hsl(var(--color-primary)); } /* Sidebar with additional information */ diff --git a/packages/graphiql-react/src/editor/style/lint.css b/packages/graphiql-react/src/editor/style/lint.css index 652470cd6ea..3ad987355f4 100644 --- a/packages/graphiql-react/src/editor/style/lint.css +++ b/packages/graphiql-react/src/editor/style/lint.css @@ -12,60 +12,60 @@ background-position: 0 95%; } .cm-s-graphiql .CodeMirror-lint-mark-error { - color: hsl(var(--color-red)); + color: hsl(var(--color-error)); } .CodeMirror-lint-mark-error { background-image: linear-gradient( 45deg, transparent 65%, - hsl(var(--color-red)) 80%, + hsl(var(--color-error)) 80%, transparent 90% ), linear-gradient( 135deg, transparent 5%, - hsl(var(--color-red)) 15%, + hsl(var(--color-error)) 15%, transparent 25% ), linear-gradient( 135deg, transparent 45%, - hsl(var(--color-red)) 55%, + hsl(var(--color-error)) 55%, transparent 65% ), linear-gradient( 45deg, transparent 25%, - hsl(var(--color-red)) 35%, + hsl(var(--color-error)) 35%, transparent 50% ); } .cm-s-graphiql .CodeMirror-lint-mark-warning { - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); } .CodeMirror-lint-mark-warning { background-image: linear-gradient( 45deg, transparent 65%, - hsl(var(--color-orche)) 80%, + hsl(var(--color-warning)) 80%, transparent 90% ), linear-gradient( 135deg, transparent 5%, - hsl(var(--color-orche)) 15%, + hsl(var(--color-warning)) 15%, transparent 25% ), linear-gradient( 135deg, transparent 45%, - hsl(var(--color-orche)) 55%, + hsl(var(--color-warning)) 55%, transparent 65% ), linear-gradient( 45deg, transparent 25%, - hsl(var(--color-orche)) 35%, + hsl(var(--color-warning)) 35%, transparent 50% ); } @@ -88,8 +88,8 @@ padding: 0; } .CodeMirror-lint-message-error { - color: hsl(var(--color-red)); + color: hsl(var(--color-error)); } .CodeMirror-lint-message-warning { - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); } diff --git a/packages/graphiql-react/src/explorer/components/argument.css b/packages/graphiql-react/src/explorer/components/argument.css index e0dc9a3cc66..fc98985830f 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: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } .graphiql-doc-explorer-argument-deprecation { - background-color: hsla(var(--color-orche), 0.07); - border: 1px solid hsl(var(--color-orche)); + background-color: hsla(var(--color-warning), 0.07); + border: 1px solid hsl(var(--color-warning)); border-radius: var(--border-radius-4); - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); 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 f8e34cf2a17..59c2dcf2454 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: hsl(var(--color-green)); + color: hsl(var(--color-success)); } diff --git a/packages/graphiql-react/src/explorer/components/deprecation-reason.css b/packages/graphiql-react/src/explorer/components/deprecation-reason.css index 677c403cd9c..a78bcaeab80 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: hsla(var(--color-orche), 0.07); - border: 1px solid hsl(var(--color-orche)); + background-color: hsla(var(--color-warning), 0.07); + border: 1px solid hsl(var(--color-warning)); border-radius: var(--px-4); - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); 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 5b5e5521cfb..17783cac86b 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: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css index a4e87ba279e..bc652826f08 100644 --- a/packages/graphiql-react/src/explorer/components/doc-explorer.css +++ b/packages/graphiql-react/src/explorer/components/doc-explorer.css @@ -84,9 +84,9 @@ a.graphiql-doc-explorer-back { /* Error message */ .graphiql-doc-explorer-error { - background-color: hsla(var(--color-red), 0.15); - border: 1px solid hsl(var(--color-red)); + background-color: hsla(var(--color-error), 0.15); + border: 1px solid hsl(var(--color-error)); border-radius: var(--border-radius-8); - color: hsl(var(--color-red)); + color: hsl(var(--color-error)); 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 c32763bcf22..ff377b0902b 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: hsl(var(--color-blue)); + color: hsl(var(--color-info)); text-decoration: none; &:hover { @@ -7,6 +7,6 @@ a.graphiql-doc-explorer-field-name { } &:focus { - outline: hsl(var(--color-blue)) auto 1px; + outline: hsl(var(--color-info)) 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 a80fb212bcc..c4e690b4be0 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: hsl(var(--color-blue)); + color: hsl(var(--color-info)); } diff --git a/packages/graphiql-react/src/explorer/components/search.css b/packages/graphiql-react/src/explorer/components/search.css index ae10b2fc894..70d87b78e63 100644 --- a/packages/graphiql-react/src/explorer/components/search.css +++ b/packages/graphiql-react/src/explorer/components/search.css @@ -82,15 +82,15 @@ } .graphiql-doc-explorer-search-type { - color: hsl(var(--color-blue)); + color: hsl(var(--color-info)); } .graphiql-doc-explorer-search-field { - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); } .graphiql-doc-explorer-search-argument { - color: hsl(var(--color-purple)); + color: hsl(var(--color-secondary)); } .graphiql-doc-explorer-search-divider { diff --git a/packages/graphiql-react/src/explorer/components/type-documentation.css b/packages/graphiql-react/src/explorer/components/type-documentation.css index 7f900f4e3aa..7f65c236ba5 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: hsl(var(--color-blue)); + color: hsl(var(--color-info)); } diff --git a/packages/graphiql-react/src/explorer/components/type-link.css b/packages/graphiql-react/src/explorer/components/type-link.css index e534bb57003..afd2048462d 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: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); text-decoration: none; &:hover { @@ -7,6 +7,6 @@ a.graphiql-doc-explorer-type-name { } &:focus { - outline: hsl(var(--color-orche)) auto 1px; + outline: hsl(var(--color-warning)) auto 1px; } } diff --git a/packages/graphiql-react/src/history/style.css b/packages/graphiql-react/src/history/style.css index cc43f3657b5..804fd158ede 100644 --- a/packages/graphiql-react/src/history/style.css +++ b/packages/graphiql-react/src/history/style.css @@ -26,7 +26,7 @@ } &.editable { - background-color: hsla(var(--color-pink), 0.1); + background-color: hsla(var(--color-primary), 0.1); & > input { background: transparent; @@ -43,15 +43,15 @@ } & > button { - color: hsl(var(--color-pink)); + color: hsl(var(--color-primary)); padding: 0 var(--px-10); &:active { - background-color: hsla(var(--color-pink), 0.15); + background-color: hsla(var(--color-primary), 0.15); } &:focus { - outline: hsl(var(--color-pink)) auto 1px; + outline: hsl(var(--color-primary)) auto 1px; } & > svg { diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css index c406b4b2b1f..8b439406779 100644 --- a/packages/graphiql-react/src/style/root.css +++ b/packages/graphiql-react/src/style/root.css @@ -3,13 +3,13 @@ .CodeMirror-lint-tooltip, reach-portal { /* Colors */ - --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-primary: 320, 95%, 43%; + --color-secondary: 242, 51%, 61%; + --color-tertiary: 188, 100%, 36%; + --color-info: 208, 100%, 46%; + --color-success: 158, 60%, 42%; + --color-warning: 36, 100%, 41%; + --color-error: 13, 93%, 58%; --color-neutral: 219, 28%, 32%; --color-base: 219, 28%, 100%; @@ -59,10 +59,13 @@ reach-portal { body:not(.graphiql-light) .CodeMirror-info, body:not(.graphiql-light) .CodeMirror-lint-tooltip, body:not(.graphiql-light) reach-portal { - --color-pink: 338, 100%, 67%; - --color-purple: 243, 100%, 77%; - --color-blue: 208, 100%, 72%; - --color-orche: 30, 100%, 80%; + --color-primary: 338, 100%, 67%; + --color-secondary: 243, 100%, 77%; + --color-tertiary: 188, 100%, 44%; + --color-info: 208, 100%, 72%; + --color-success: 158, 100%, 42%; + --color-warning: 30, 100%, 80%; + --color-error: 13, 100%, 58%; --color-neutral: 219, 29%, 78%; --color-base: 219, 29%, 18%; } @@ -72,10 +75,13 @@ body.graphiql-dark .graphiql-container, body.graphiql-dark .CodeMirror-info, body.graphiql-dark .CodeMirror-lint-tooltip, body.graphiql-dark reach-portal { - --color-pink: 338, 100%, 67%; - --color-purple: 243, 100%, 77%; - --color-blue: 208, 100%, 72%; - --color-orche: 30, 100%, 80%; + --color-primary: 338, 100%, 67%; + --color-secondary: 243, 100%, 77%; + --color-tertiary: 188, 100%, 44%; + --color-info: 208, 100%, 72%; + --color-success: 158, 100%, 42%; + --color-warning: 30, 100%, 80%; + --color-error: 13, 100%, 58%; --color-neutral: 219, 29%, 78%; --color-base: 219, 29%, 18%; } @@ -104,10 +110,10 @@ reach-portal { } & a { - color: hsl(var(--color-pink)); + color: hsl(var(--color-primary)); &:focus { - outline: hsl(var(--color-pink)) auto 1px; + outline: hsl(var(--color-primary)) auto 1px; } } } diff --git a/packages/graphiql-react/src/toolbar/button.css b/packages/graphiql-react/src/toolbar/button.css index a4d2d89c23b..44fb55d3e96 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: hsla(var(--color-red), 0.15); + background: hsla(var(--color-error), 0.15); } & > svg { diff --git a/packages/graphiql-react/src/toolbar/execute.css b/packages/graphiql-react/src/toolbar/execute.css index b16627c6fc2..a954d4c42a4 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: hsl(var(--color-pink)); + background-color: hsl(var(--color-primary)); border: none; border-radius: var(--border-radius-8); cursor: pointer; @@ -12,11 +12,11 @@ width: var(--toolbar-width); &:active { - background-color: hsla(var(--color-pink), 0.8); + background-color: hsla(var(--color-primary), 0.8); } &:focus { - outline: hsla(var(--color-pink), 0.8) auto 1px; + outline: hsla(var(--color-primary), 0.8) auto 1px; } & > svg { diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css index 3d4122bb6ee..40f99852f4a 100644 --- a/packages/graphiql-react/src/ui/button.css +++ b/packages/graphiql-react/src/ui/button.css @@ -30,9 +30,9 @@ button.graphiql-button { } &.graphiql-button-success { - background-color: hsla(var(--color-green), 0.15); + background-color: hsla(var(--color-success), 0.15); } &.graphiql-button-error { - background-color: hsla(var(--color-red), 0.15); + background-color: hsla(var(--color-error), 0.15); } } diff --git a/packages/graphiql-react/src/ui/markdown.css b/packages/graphiql-react/src/ui/markdown.css index f1af2b6d9d5..cc158ee5b5e 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: hsl(var(--color-pink)); + color: hsl(var(--color-primary)); text-decoration: none; &:hover { @@ -99,17 +99,17 @@ .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation { & a { - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); text-decoration: underline; } & blockquote { - border-left: 1.5px solid hsl(var(--color-orche)); + border-left: 1.5px solid hsl(var(--color-warning)); } & code, & pre { - background-color: hsla(var(--color-orche), 0.15); + background-color: hsla(var(--color-warning), 0.15); } & > * { @@ -129,10 +129,10 @@ .CodeMirror-hint-information-deprecation, .CodeMirror-info .info-deprecation { - background-color: hsla(var(--color-orche), 0.07); - border: 1px solid hsl(var(--color-orche)); + background-color: hsla(var(--color-warning), 0.07); + border: 1px solid hsl(var(--color-warning)); border-radius: var(--border-radius-4); - color: hsl(var(--color-orche)); + color: hsl(var(--color-warning)); margin-top: var(--px-12); padding: var(--px-6) var(--px-8); }