Use brighness for links, opacity for monochrome icons. (#8528)

Author: isoos

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}',

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>

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>

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%);
     }
   }
 

pkg/web_css/lib/src/_pkg.scss

@@ -115,10 +115,6 @@
       font-size: 24px;
     }
   }
-
-  .version-table-icon {
-    opacity: 0.7;
-  }
 }
 
 .changelog-entry {