Bug 1673582 - Introduce theme-link-color for better contrast on devtools links r=devtools-reviewers,nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D187863

devtools/client/accessibility/accessibility.css

@@ -21,7 +21,7 @@
   --accessibility-tree-row-height: 21px;
   --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
   --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-icon-dimmed-color);
-  --accessibility-link-color: var(--blue-60);
+  --accessibility-link-color: var(--theme-link-color);
   --accessibility-link-color-active: var(--blue-70);
   --accessibility-body-background-a90: rgba(255, 255, 255, 0.9);
   --accessibility-code-background: var(--grey-20);
@@ -30,7 +30,6 @@
 :root.theme-dark {
   --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
   --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-selection-color);
-  --accessibility-link-color: var(--theme-highlight-blue);
   --accessibility-link-color-active: var(--blue-40);
   --accessibility-body-background-a90: rgba(42, 42, 46, 0.9);
   --accessibility-code-background: var(--grey-70);

devtools/client/application/src/base.css

@@ -61,7 +61,7 @@ ul {
 }
 
 a {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   text-decoration: underline;
   cursor: pointer;
 }

devtools/client/debugger/src/components/Editor/Preview.css

@@ -28,7 +28,7 @@
 
 .popover .preview .header .link {
   align-self: flex-end;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   text-decoration: underline;
 }
 

devtools/client/shared/components/reps/reps.css

@@ -10,7 +10,7 @@
   --object-color: var(--theme-highlight-blue);
   --caption-color: var(--theme-highlight-blue);
   --location-color: var(--theme-comment);
-  --source-link-color: var(--theme-highlight-blue);
+  --source-link-color: var(--theme-link-color);
   --node-color: var(--theme-highlight-purple);
   --reference-color: var(--theme-highlight-blue);
   --comment-node-color: var(--theme-comment);

devtools/client/shared/components/tree/TreeView.css

@@ -113,7 +113,7 @@
 /* Learn More link */
 .treeTable .treeValueCell .learn-more-link {
   user-select: none;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   cursor: pointer;
   margin: 0 5px;
 }

devtools/client/themes/compatibility.css

@@ -130,7 +130,7 @@
 }
 
 .compatibility-issue-item__property {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   unicode-bidi: plaintext;
   display: flex;
   gap: var(--compatibility-base-unit);

devtools/client/themes/components-frame.css

@@ -8,7 +8,7 @@
  */
 
 .theme-light {
-  --frame-link-line-color: var(--theme-highlight-blue);
+  --frame-link-line-color: var(--theme-link-color);
   --frame-link-source: var(--theme-highlight-purple);
 }
 

devtools/client/themes/dark-theme.css

@@ -43,7 +43,7 @@ body {
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
 }
 
 .theme-comment,

devtools/client/themes/light-theme.css

@@ -43,7 +43,7 @@ body {
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
 }
 
 .theme-comment,

devtools/client/themes/memory.css

@@ -15,7 +15,7 @@
   --cell-border-color: rgba(0,0,0,0.15);
   --row-alt-background-color: rgba(76,158,217,0.1);
   --row-hover-background-color: rgba(76,158,217,0.2);
-  --link-color: var(--blue-60);
+  --link-color: var(--theme-link-color);
   --link-color-active: var(--blue-70);
 }
 

devtools/client/themes/perf.css

@@ -2,15 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-:root.theme-light {
-  /**
-   * Override this variable to match the Photon guidelines and make sure the
-   * links have enough contrast on the background of the onboarding message.
-   * See Bug 1673582 to apply this back to devtools main variable.css file.
-   */
-  --theme-highlight-blue: var(--blue-60);
-}
-
 .perf {
   display: flex;
   flex-direction: column;
@@ -59,7 +50,7 @@
   padding: 0;
   background: none;
   border: none;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   text-decoration: underline;
   white-space: nowrap;
   cursor: pointer;

devtools/client/themes/storage.css

@@ -6,7 +6,7 @@
  * Global styles
  */
 a {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   text-decoration: none;
   cursor: pointer;
 }

devtools/client/themes/tooltips.css

@@ -135,7 +135,7 @@ strong {
 
 .devtools-tooltip-inactive-css .link,
 .devtools-tooltip-css-compatibility .link {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   cursor: pointer;
 }
 
@@ -879,7 +879,7 @@ strong {
 }
 
 .invoke-confirm .learn-more-link {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   padding-inline-end: 4px;
   display: flex;
   align-items: center;

devtools/client/themes/variables.css

@@ -168,6 +168,7 @@
   /* Text color */
   --theme-comment: var(--grey-50);
   --theme-body-color: var(--grey-70);
+  --theme-link-color: var(--blue-60);
   --theme-text-color-alt: var(--grey-50);
   --theme-text-color-inactive: var(--grey-40);
   --theme-text-color-error: var(--red-60);
@@ -296,6 +297,7 @@
   /* Text color */
   --theme-comment: var(--grey-45);
   --theme-body-color: var(--grey-40);
+  --theme-link-color: #75bfff;
   --theme-text-color-alt: var(--grey-45);
   --theme-text-color-inactive: var(--grey-50);
   --theme-text-color-error: var(--grey-10);

devtools/client/themes/webconsole.css

@@ -509,7 +509,7 @@
 
 .message .learn-more-link {
   user-select: none;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   margin: 0 1ch;
 }
 

devtools/client/webconsole/components/App.css

@@ -495,7 +495,7 @@ body {
   padding: 2px;
   background: transparent;
   border: none;
-  color: var(--theme-highlight-blue);
+  color: var(--theme-link-color);
   font-family: inherit;
   cursor: pointer;
   font-size: inherit;