From f894ed25b0e6b35cca24a6f1a7df36098ea80dab Mon Sep 17 00:00:00 2001
From: Istvan Soos <istvan.soos@gmail.com>
Date: Wed, 5 Feb 2025 16:39:37 +0100
Subject: [PATCH] Use brighness for links, opacity for monochrome icons.

---
 .../views/pkg/versions/version_row.dart       |  6 +++---
 .../frontend/golden/pkg_versions_page.html    | 12 +++++------
 .../goldens/packages/oxygen/versions.html     |  8 ++++----
 pkg/web_css/lib/src/_base.scss                | 20 ++++++++++++++++---
 pkg/web_css/lib/src/_pkg.scss                 |  4 ----
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/lib/frontend/templates/views/pkg/versions/version_row.dart b/app/lib/frontend/templates/views/pkg/versions/version_row.dart
index bbde27638c..e7387f86ad 100644
--- a/app/lib/frontend/templates/views/pkg/versions/version_row.dart
+++ b/app/lib/frontend/templates/views/pkg/versions/version_row.dart
@@ -60,7 +60,7 @@ d.Node versionRowNode(
           rel: 'nofollow',
           title: 'Download $package ${version.version} archive',
           child: d.img(
-            classes: ['version-table-icon', 'filter-invert-on-dark'],
+            classes: ['pub-monochrome-icon', 'filter-invert-on-dark'],
             image: d.Image(
               src: staticUrls.downloadIcon,
               alt: 'Download $package ${version.version} archive',
@@ -91,7 +91,7 @@ d.Node _documentationCell(
       rel: 'nofollow',
       title: 'Go to the documentation of $package ${version.version}',
       child: d.img(
-        classes: ['version-table-icon', 'filter-invert-on-dark'],
+        classes: ['pub-monochrome-icon', 'filter-invert-on-dark'],
         image: d.Image(
           src: staticUrls.documentationIcon,
           alt: 'Go to the documentation of $package ${version.version}',
@@ -106,7 +106,7 @@ d.Node _documentationCell(
       rel: 'nofollow',
       title: 'Check the analysis logs for $package ${version.version}',
       child: d.img(
-        classes: ['version-table-icon', 'filter-invert-on-dark'],
+        classes: ['pub-monochrome-icon', 'filter-invert-on-dark'],
         image: d.Image(
           src: staticUrls.documentationFailedIcon,
           alt: 'Check the analysis logs for $package ${version.version}',
diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html
index 6a13304796..fd156baf35 100644
--- a/app/test/frontend/golden/pkg_versions_page.html
+++ b/app/test/frontend/golden/pkg_versions_page.html
@@ -249,12 +249,12 @@ <h2 id="stable">Stable versions of oxygen</h2>
                         </td>
                         <td class="documentation">
                           <a href="/documentation/oxygen/1.2.0/" rel="nofollow" title="Go to the documentation of oxygen 1.2.0">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.2.0" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.2.0" width="24" height="24"/>
                           </a>
                         </td>
                         <td class="archive">
                           <a href="/api/archives/oxygen-1.2.0.tar.gz" rel="nofollow" title="Download oxygen 1.2.0 archive">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.2.0 archive" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.2.0 archive" width="24" height="24"/>
                           </a>
                         </td>
                       </tr>
@@ -271,12 +271,12 @@ <h2 id="stable">Stable versions of oxygen</h2>
                         </td>
                         <td class="documentation">
                           <a href="/documentation/oxygen/1.0.0/" rel="nofollow" title="Go to the documentation of oxygen 1.0.0">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.0.0" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.0.0" width="24" height="24"/>
                           </a>
                         </td>
                         <td class="archive">
                           <a href="/api/archives/oxygen-1.0.0.tar.gz" rel="nofollow" title="Download oxygen 1.0.0 archive">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.0.0 archive" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.0.0 archive" width="24" height="24"/>
                           </a>
                         </td>
                       </tr>
@@ -316,12 +316,12 @@ <h2 id="prerelease">Prerelease versions of oxygen</h2>
                         </td>
                         <td class="documentation">
                           <a href="/documentation/oxygen/2.0.0-dev/" rel="nofollow" title="Go to the documentation of oxygen 2.0.0-dev">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 2.0.0-dev" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 2.0.0-dev" width="24" height="24"/>
                           </a>
                         </td>
                         <td class="archive">
                           <a href="/api/archives/oxygen-2.0.0-dev.tar.gz" rel="nofollow" title="Download oxygen 2.0.0-dev archive">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 2.0.0-dev archive" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 2.0.0-dev archive" width="24" height="24"/>
                           </a>
                         </td>
                       </tr>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions.html b/app/test/task/testdata/goldens/packages/oxygen/versions.html
index e3790873c6..42fb6fb2f1 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions.html
@@ -235,12 +235,12 @@ <h2 id="stable">Stable versions of oxygen</h2>
                         </td>
                         <td class="documentation">
                           <a href="/documentation/oxygen/2.0.0/" rel="nofollow" title="Go to the documentation of oxygen 2.0.0">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 2.0.0" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 2.0.0" width="24" height="24"/>
                           </a>
                         </td>
                         <td class="archive">
                           <a href="/api/archives/oxygen-2.0.0.tar.gz" rel="nofollow" title="Download oxygen 2.0.0 archive">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 2.0.0 archive" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 2.0.0 archive" width="24" height="24"/>
                           </a>
                         </td>
                       </tr>
@@ -257,12 +257,12 @@ <h2 id="stable">Stable versions of oxygen</h2>
                         </td>
                         <td class="documentation">
                           <a href="/documentation/oxygen/1.0.0/" rel="nofollow" title="Go to the documentation of oxygen 1.0.0">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.0.0" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/description-24px.svg" alt="Go to the documentation of oxygen 1.0.0" width="24" height="24"/>
                           </a>
                         </td>
                         <td class="archive">
                           <a href="/api/archives/oxygen-1.0.0.tar.gz" rel="nofollow" title="Download oxygen 1.0.0 archive">
-                            <img class="version-table-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.0.0 archive" width="24" height="24"/>
+                            <img class="pub-monochrome-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/vertical_align_bottom-24px.svg" alt="Download oxygen 1.0.0 archive" width="24" height="24"/>
                           </a>
                         </td>
                       </tr>
diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index 75ab1d4d08..a82805e7c7 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -89,6 +89,22 @@ button {
   }
 }
 
+// The class annotates an image icon with either black or white pixels on
+// a transparent base layer.
+// The default display with the muted opacity will move the icon's color
+// towards the gray spectrum, and on hovering it will show high contrast.
+//
+// Note: The `filter: brightness()` used below with the `a` element does
+//       not work with monochrome images, as the linear transformation
+//       will keep the pixels with rgb(0,0,0) the same.
+.pub-monochrome-icon {
+  opacity: 0.6;
+
+  a:hover & {
+    opacity: 1;
+  }
+}
+
 a {
   text-decoration: none;
   color: var(--pub-link-text-color);
@@ -103,10 +119,8 @@ a {
   }
 
   .light-theme & {
-    opacity: 1;
-
     &:hover {
-      opacity: 0.8;
+      filter: brightness(80%);
     }
   }
 
diff --git a/pkg/web_css/lib/src/_pkg.scss b/pkg/web_css/lib/src/_pkg.scss
index a92798a28f..131b1c29e1 100644
--- a/pkg/web_css/lib/src/_pkg.scss
+++ b/pkg/web_css/lib/src/_pkg.scss
@@ -115,10 +115,6 @@
       font-size: 24px;
     }
   }
-
-  .version-table-icon {
-    opacity: 0.7;
-  }
 }
 
 .changelog-entry {