Update link and body colors to be WCAG AAA compliant

app/components/dependency-list/row.hbs

@@ -2,8 +2,8 @@
   local-class="
     row
     {{if @dependency.optional "optional"}}
-    {{if this.focused "focused"}}
   "
+  class="{{ if this.focused "focused" }}"
   data-test-dependency={{@dependency.crate_id}}
   ...attributes
 >
@@ -64,4 +64,4 @@
       </div>
     {{/if}}
   </div>
-</div>
+</div>

app/components/dependency-list/row.module.css

@@ -1,33 +1,14 @@
 .row {
-    --bg-color: var(--grey200);
-    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
-    --range-color: light-dark(var(--grey900), #d1cfc7);
-    --crate-color: light-dark(var(--grey700), #d1cfc7);
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
+
+    composes: row from global;
 
     display: flex;
     align-items: center;
-    position: relative;
-    font-size: 18px;
-    padding: var(--space-s) var(--space-m);
-    background-color: light-dark(white, #141413);
-    border-radius: var(--space-3xs);
-    box-shadow: var(--shadow);
-    transition: all var(--transition-slow);
-
-    &:hover, &.focused {
-        background-color: var(--hover-bg-color);
-        transition: all var(--transition-instant);
-    }
-
-    &.focused {
-        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
-    }
 
     &.optional {
-        --range-color: light-dark(var(--grey600), var(--grey600));
-        --crate-color: light-dark(var(--grey600), var(--grey600));
+        --row-bg: light-dark(#f6f6f6, #292726);
+        --row-content: light-dark(var(--grey800), var(--grey400));
         --placeholder-opacity: 0.15;
     }
 
@@ -49,7 +30,7 @@
 .range-lg, .range-sm {
     margin-right: var(--space-s);
     min-width: 100px;
-    color: var(--range-color);
+    color: var(--row-content);
     font-variant: tabular-nums;
 }
 
@@ -70,13 +51,13 @@
 }
 
 .link {
-    color: var(--crate-color);
+    color: var(--row-content);
     font-weight: 500;
     margin-right: var(--space-s);
     outline: none;
 
     &:hover {
-        color: var(--crate-color);
+        color: var(--row-content);
     }
 
     &::after {
@@ -90,7 +71,7 @@
 }
 
 .optional-label, .features-label {
-    color: var(--grey600);
+    color: light-dark(var(--grey700), var(--grey400));
     text-transform: uppercase;
     letter-spacing: .7px;
     font-size: 13px;
@@ -138,7 +119,7 @@
 
 .description {
     margin-top: var(--space-xs);
-    color: var(--crate-color);
+    color: var(--row-content);
     font-size: 90%;
     line-height: 1.5;
 }

app/components/front-page-list/item.module.css

@@ -48,13 +48,13 @@
 .subtitle {
     margin-top: var(--space-3xs);
     font-size: 13px;
-    color: light-dark(rgb(118, 131, 138), #cccac2);
+    color: var(--main-color-light);
 }
 
 .right {
     flex-shrink: 0;
     height: var(--space-s);
     width: auto;
     margin-left: var(--space-xs);
-    color: light-dark(rgb(118, 131, 138), #cccac2);
+    color: var(--main-color-light);
 }

app/components/pagination.module.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 90%;
+    font-size: 110%;
     margin-bottom: var(--space-xs);
 
     ol {
@@ -21,7 +21,7 @@
     a:hover { background-color: var(--main-bg-dark); }
     a:global(.active) { background-color: var(--main-bg-dark); }
 
-    img, svg { vertical-align: middle; }
+    img, svg { vertical-align: middle; width: 2em; height: 2em; }
 
 
     .prev, .next {

app/components/rev-dep-row.hbs

@@ -1,4 +1,4 @@
-<div local-class="row {{if this.focused "focused"}}" ...attributes>
+<div local-class="row" class="{{if this.focused "focused"}}" ...attributes>
   <div local-class="top">
     <div local-class="left">
       <LinkTo

app/components/rev-dep-row.module.css

@@ -1,25 +1,7 @@
 .row {
-    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
-    --crate-color: light-dark(var(--grey700), var(--grey600));
     --placeholder-opacity: 0.35;
-    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
-    position: relative;
-    font-size: 18px;
-    padding: var(--space-s) var(--space-m);
-    background-color: light-dark(white, #141413);
-    border-radius: var(--space-3xs);
-    box-shadow: var(--shadow);
-    transition: all var(--transition-slow);
-
-    &:hover, &.focused {
-        background-color: var(--hover-bg-color);
-        transition: all var(--transition-instant);
-    }
-
-    &.focused {
-        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
-    }
+    composes: row from global;
 }
 
 .top {
@@ -59,7 +41,7 @@
 }
 
 .range {
-    color: var(--grey600);
+    color: var(--range-color);
     text-transform: uppercase;
     letter-spacing: .7px;
     font-size: 13px;
@@ -68,7 +50,7 @@
 .downloads {
     display: flex;
     align-items: center;
-    color: var(--grey600);
+    color: var(--range-color);
     font-size: 16px;
     font-weight: 500;
     font-variant: tabular-nums;

app/components/stats-value.module.css

@@ -14,7 +14,7 @@
 .label {
     grid-column: 1;
     grid-row: 2;
-    color: #76838a;
+    color: light-dark(#545454, #adc0cd);
     font-size: var(--space-s);
     font-weight: normal;
     line-height: 1.6;
@@ -27,5 +27,5 @@
     height: var(--space-l-xl);
     margin-left: var(--space-s);
     margin-top: var(--space-3xs);
-    color: #76838a;
+    color: light-dark(#545454, #adc0cd);
 }

app/components/version-list/row.hbs

@@ -4,8 +4,8 @@
     {{if @version.isHighestOfReleaseTrack "latest"}}
     {{if @version.yanked "yanked"}}
     {{if @version.isPrerelease "prerelease"}}
-    {{if this.focused "focused"}}
   "
+  class="{{ if this.focused "focused" }}"
   ...attributes
 >
   <div local-class="version">
@@ -159,4 +159,4 @@
       </dd.Menu>
     </Dropdown>
   </PrivilegedAction>
-</div>
+</div>

app/components/version-list/row.module.css

@@ -1,27 +1,13 @@
 .row {
-    --bg-color: light-dark(var(--grey200), #242422);
-    --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
-    --fg-color: light-dark(var(--grey700), #ccc);
+    --fg-color: var(--row-content);
     --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
+    composes: row from global;
+
     display: flex;
     align-items: center;
-    position: relative;
-    font-size: 18px;
-    padding: var(--space-s) var(--space-m);
-    background-color: light-dark(white, #141413);
-    border-radius: var(--space-3xs);
-    box-shadow: var(--shadow);
-    transition: all var(--transition-slow);
-
-    &:hover, &.focused {
-        background-color: var(--hover-bg-color);
-        transition: all var(--transition-instant);
-    }
 
-    &.focused {
-        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
-    }
+    --bg-color: light-dark(var(--grey200), var(--grey800));
 
     &.latest {
         --bg-color: light-dark(hsl(109, 75%, 87%), hsl(136, 67%, 11%));
@@ -135,7 +121,7 @@
 .metadata {
     flex-grow: 1;
     margin-left: var(--space-m);
-    color: light-dark(var(--grey600), #d1cfc7);
+    color: light-dark(var(--grey800), #d1cfc7);
     text-transform: uppercase;
     letter-spacing: .7px;
     font-size: 13px;

app/styles/application.module.css

@@ -1,8 +1,10 @@
 :root, [data-theme="classic"] {
     --violet800: hsl(252, 44%, 24%);
     --grey900: hsl(200, 15%, 19%);
+    --grey800: hsl(200, 11%, 30%);
     --grey700: hsl(200, 11%, 43%);
     --grey600: hsl(200, 13%, 60%);
+    --grey400: hsl(200, 14%, 75%);
     --grey200: hsl(200, 17%, 96%);
     --green800: hsl(115, 31%, 31%);
     --green900: hsl(115, 31%, 21%);
@@ -38,13 +40,17 @@
         "Courier New", monospace;
 
     --main-color: light-dark(#383838, #f9f7ec);
-    --main-color-light: light-dark(#858585, #a6a6a6);
+    --main-color-light: light-dark(#585858, #a6a6a6);
     --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
     --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
     --main-bg-dark: light-dark(#edebdd, #141413);
     --gray-border: light-dark(#d5d3cb, #666561);
-    --link-color: rgb(0, 172, 91);
-    --link-hover-color: #007940;
+    --link-color: light-dark(#006133, #04da75);
+    --link-hover-color: light-dark(#01391f, #00f27f);
+
+    --row-bg: light-dark(white, black);
+    --row-hover-bg: light-dark(var(--grey200), var(--grey900));
+    --row-content: var(--main-color);
 
     --placeholder-bg: hsl(212, 7%, 57%);
     --placeholder-bg2: hsl(213, 16%, 75%);
@@ -183,6 +189,27 @@ noscript {
     }
 }
 
+:global(.row) {
+    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
+    padding: var(--space-s) var(--space-m);
+    background-color: var(--row-bg);
+    border-radius: var(--space-3xs);
+    box-shadow: var(--shadow);
+    transition: all var(--transition-slow);
+
+    position: relative;
+    font-size: 1.1rem;
+}
+
+:global(.row:hover), :global(.row.focused) {
+    background-color: var(--row-hover-bg);
+    transition: all var(--transition-instant);
+}
+
+:global(.row.focused) {
+    box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
+}
+
 .main {
     flex-grow: 1;
     display: flex;

app/styles/categories.module.css

@@ -8,20 +8,23 @@
 }
 
 .list {
-    background-color: light-dark(white, #141413);
-    border-radius: var(--space-3xs);
-    box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
-    margin-bottom: var(--space-s);
+    list-style: none;
+    margin: var(--space-2xs) 0 var(--space-s);
+    padding: 0;
 
-    > * {
-        padding: var(--space-s);
+    > * + * {
+        margin-top: var(--space-2xs);
     }
 
-    > * + * {
-        border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #424242);
+    &:global(.is-empty) {
+        min-height: calc(2 * var(--space-s) + var(--space-xl));
     }
 }
 
+.row {
+    composes: row from global;
+}
+
 .description {
     margin-top: var(--space-2xs);
     line-height: 1.5;
@@ -32,4 +35,8 @@
 	margin: var(--space-2xs) 0;
 	text-align: center;
 	font-size: 85%;
+
+    > a {
+        text-decoration: underline;
+    }
 }

app/styles/crate/version.module.css

@@ -89,6 +89,10 @@
     flex-grow: 7;
     display: flex;
     flex-wrap: wrap;
+
+    & a {
+        text-decoration: underline;
+    }
 }
 
 .stat {