use hsl instead hsla when alpha is 1 (#3634)

* prefer `hsl` * add changeset * Update .changeset/fair-cups-cry.md Co-authored-by: Ted Thibodeau Jr <[email protected]> * Update packages/graphiql-react/src/ui/markdown.css Co-authored-by: Ted Thibodeau Jr <[email protected]> --------- Co-authored-by: Ted Thibodeau Jr <[email protected]>
graphql · Jul 1, 2024 · adf0ba0 · adf0ba0
1 parent b52c391
commit adf0ba0
Show file tree

Hide file tree

Showing 20 changed files with 58 additions and 52 deletions.
diff --git a/.changeset/fair-cups-cry.md b/.changeset/fair-cups-cry.md
@@ -0,0 +1,7 @@
+---
+'graphiql': patch
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/react': patch
+---
+
+when alpha is `1`, use `hsl` instead of `hsla`
diff --git a/examples/graphiql-webpack/src/index.css b/examples/graphiql-webpack/src/index.css
@@ -97,10 +97,10 @@ li.select-server--previous-entry button:hover {
 
 li.select-server--previous-entry button {
   background-color: transparent;
-  border: hsla(var(--color-neutral), 1);
+  border: hsl(var(--color-neutral));
   display: flex;
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
   font-size: 1rem;
-  cursor: pinter;
+  cursor: pointer;
   padding: 0.5rem;
 }
diff --git a/examples/graphiql-webpack/src/select-server-plugin.css b/examples/graphiql-webpack/src/select-server-plugin.css
@@ -96,10 +96,10 @@ li.select-server--previous-entry button:hover {
 
 li.select-server--previous-entry button {
   background-color: transparent;
-  border: hsla(var(--color-neutral), 1);
+  border: hsl(var(--color-neutral));
   display: flex;
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
   font-size: 1rem;
-  cursor: pinter;
+  cursor: pointer;
   padding: 0.5rem;
 }
diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md
@@ -11,7 +11,7 @@ autocomplete and linting powered by your GraphQL Schema.
 ### Getting Started
 
 ```sh
-npm install --save cm6-graphql
+npm install cm6-graphql
 ```
 
 [CodeMirror 6](https://codemirror.net/) customization is done through

diff --git a/packages/codemirror-graphql/README.md b/packages/codemirror-graphql/README.md
@@ -15,7 +15,7 @@ typeahead hinter powered by your GraphQL Schema.
 ### Getting Started
 
 ```sh
-npm install --save codemirror-graphql
+npm install codemirror-graphql
 ```
 
 CodeMirror helpers install themselves to the global CodeMirror when they are

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
@@ -9,14 +9,14 @@ into the GraphiQL UI.
 Use your favorite package manager to install the package:
 
 ```sh
-npm i -S @graphiql/plugin-code-exporter
+npm install @graphiql/plugin-code-exporter
 ```
 
 The following packages are peer dependencies, so make sure you have them
 installed as well:
 
 ```sh
-npm i -S react react-dom graphql
+npm install react react-dom graphql
 ```
 
 ## Usage
@@ -27,22 +27,21 @@ for all details on available `props` and how to
 [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
 
 ```jsx
-import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { GraphiQL } from 'graphiql';
 import { useState } from 'react';
-
+import { GraphiQL } from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import 'graphiql/graphiql.css';
 import '@graphiql/plugin-code-exporter/dist/style.css';
 
 const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
 });
 
-/*
-Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details
-*/
-
+/**
+ * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for
+ * details
+ */
 const removeQueryName = query =>
   query.replace(
     /^[^{(]+([{(])/,
@@ -91,7 +90,7 @@ const exporter = codeExporterPlugin({
   codeMirrorTheme: 'graphiql',
 });
 
-function GraphiQLWithExplorer() {
+function GraphiQLWithCodeExporter() {
   return (
     <GraphiQL fetcher={fetcher} defaultQuery={query} plugins={[exporter]} />
   );

diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -76,9 +76,9 @@
       }
 
       var exampleSnippetOne = {
-        name: `Example One`,
-        language: `JavaScript`,
-        codeMirrorMode: `jsx`,
+        name: 'Example One',
+        language: 'JavaScript',
+        codeMirrorMode: 'jsx',
         options: [],
         generate: arg => `export const query = graphql\`
       ${getQuery(arg, 2)}
@@ -87,9 +87,9 @@
       };
 
       var exampleSnippetTwo = {
-        name: `Example Two`,
-        language: `JavaScript`,
-        codeMirrorMode: `jsx`,
+        name: 'Example Two',
+        language: 'JavaScript',
+        codeMirrorMode: 'jsx',
         options: [],
         generate: arg => `import { graphql } from 'graphql'
 
@@ -107,7 +107,7 @@
       var query =
         'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}';
 
-      function GraphiQLWithExporter() {
+      function GraphiQLWithCodeExporter() {
         return React.createElement(GraphiQL, {
           fetcher: fetcher,
           defaultEditorToolsVisibility: true,
@@ -117,7 +117,7 @@
       }
 
       const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-      root.render(React.createElement(GraphiQLWithExporter));
+      root.render(React.createElement(GraphiQLWithCodeExporter));
     </script>
   </body>
 </html>
diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -82,7 +82,7 @@
     cursor: pointer;
     text-decoration: none;
     padding: var(--px-8) var(--px-12);
-    color: hsla(var(--color-neutral), 1) !important;
+    color: hsl(var(--color-neutral)) !important;
     border-radius: var(--border-radius-4) !important;
     &:hover {
       background-color: hsla(

diff --git a/packages/graphiql-react/src/editor/style/info.css b/packages/graphiql-react/src/editor/style/info.css
@@ -4,7 +4,7 @@
   border: var(--popover-border);
   border-radius: var(--border-radius-8);
   box-shadow: var(--popover-box-shadow);
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
   max-height: 300px;
   max-width: 400px;
   opacity: 0;

diff --git a/packages/graphiql-react/src/explorer/components/search.css b/packages/graphiql-react/src/explorer/components/search.css
@@ -5,7 +5,7 @@
     border: var(--popover-border);
     border-radius: var(--border-radius-4);
     box-shadow: var(--popover-box-shadow);
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
 
     & .graphiql-doc-explorer-search-input {
       background: hsl(var(--color-base));

diff --git a/packages/graphiql-react/src/history/style.css b/packages/graphiql-react/src/history/style.css
@@ -26,7 +26,7 @@
   height: 34px;
 
   &:hover {
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
     background-color: hsla(var(--color-neutral), var(--alpha-background-light));
   }
 
@@ -91,7 +91,7 @@ button.graphiql-history-item-action {
   padding: var(--px-8) var(--px-6);
 
   &:hover {
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
   }
 
   & > svg {

diff --git a/packages/graphiql-react/src/icons/close.svg b/packages/graphiql-react/src/icons/close.svg
diff --git a/packages/graphiql-react/src/icons/plus.svg b/packages/graphiql-react/src/icons/plus.svg
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
@@ -121,15 +121,15 @@ body.graphiql-dark [data-radix-popper-content-wrapper] {
 .graphiql-dialog {
   &,
   &:is(button) {
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
     font-family: var(--font-family);
     font-size: var(--font-size-body);
-    font-weight: var(----font-weight-regular);
+    font-weight: var(--font-weight-regular);
     line-height: var(--line-height);
   }
 
   & input {
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
     font-family: var(--font-family);
     font-size: var(--font-size-caption);
 

diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
@@ -25,7 +25,7 @@ button.graphiql-button {
   background-color: hsla(var(--color-neutral), var(--alpha-background-light));
   border: none;
   border-radius: var(--border-radius-4);
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
   cursor: pointer;
   font-size: var(--font-size-body);
   padding: var(--px-8) var(--px-12);

diff --git a/packages/graphiql-react/src/ui/markdown.css b/packages/graphiql-react/src/ui/markdown.css
@@ -1,9 +1,9 @@
 /**
  * We render markdown in the following places:
- * - In the hint tooltip when typing in the query editor (field description 
- *   and optionally deprecation reason).
+ * - In the hint tooltip when typing in the query editor (field description
+ *   and, optionally, deprecation reason).
  * - In the info tooltip when hovering over a field in the query editor
- *   (field description any optionally deprecation reason).
+ *   (field description and, optionally, deprecation reason).
  */
 
 .graphiql-markdown-description,
@@ -87,7 +87,7 @@
   & code,
   & pre {
     background-color: hsla(var(--color-neutral), var(--alpha-background-light));
-    color: hsla(var(--color-neutral), 1);
+    color: hsl(var(--color-neutral));
   }
 
   & > * {

diff --git a/packages/graphiql-toolkit/docs/create-fetcher.md b/packages/graphiql-toolkit/docs/create-fetcher.md
@@ -15,7 +15,7 @@ specification, and the most popular transport spec proposals.
 You can install `@graphiql/toolkit` using your favorite package manager:
 
 ```bash
-npm install --save @graphiql/toolkit
+npm install @graphiql/toolkit
 ```
 
 ## Getting Started
@@ -50,7 +50,7 @@ root.render(<App />);
 First you'll need to install `graphql-ws` as a peer dependency:
 
 ```bash
-npm install --save graphql-ws
+npm install graphql-ws
 ```
 
 Just by providing the `subscriptionUrl`, you can also generate a `graphql-ws`
@@ -193,7 +193,7 @@ root.render(<App />);
 Note that you will need to install the client separately:
 
 ```bash
-npm install --save subscriptions-transport-ws
+npm install subscriptions-transport-ws
 ```
 
 ### Custom `fetcher` Example

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -33,7 +33,7 @@
 }
 
 .graphiql-container .graphiql-sidebar button.active {
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
 }
 
 .graphiql-container .graphiql-sidebar button:not(:first-child) {
@@ -169,7 +169,7 @@ button.graphiql-tab-add > svg {
 }
 
 .graphiql-container .graphiql-editor-tools button.active {
-  color: hsla(var(--color-neutral), 1);
+  color: hsl(var(--color-neutral));
 }
 
 /* The tab buttons to switch between editor tools */

diff --git a/packages/graphql-language-service-cli/README.md b/packages/graphql-language-service-cli/README.md
@@ -53,7 +53,7 @@ yarn global add graphql-language-service-cli
 with `npm`:
 
 ```sh
-npm i -g graphql-language-service-cli
+npm install -g graphql-language-service-cli
 ```
 
 either will install the `graphql-lsp` bin globally

diff --git a/packages/graphql-language-service-server/README.md b/packages/graphql-language-service-server/README.md
@@ -42,7 +42,7 @@ Supported features include:
 ### Installation
 
 ```bash
-npm install --save graphql-language-service-server
+npm install graphql-language-service-server
 # or
 yarn add graphql-language-service-server
 ```