From 84a3b5b30a77221ce45698b4059e6d9f337bd06e Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 15:30:21 +0100 Subject: [PATCH 1/7] Update link and body colors to have a contrast ratio of 7:1 (WCAG AAA compliant), resolves #1233 --- app/components/stats-value.module.css | 4 ++-- app/styles/application.module.css | 6 +++--- app/styles/categories.module.css | 9 +++++++++ app/templates/categories.hbs | 8 ++++---- tests/axe-config.js | 6 +----- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/app/components/stats-value.module.css b/app/components/stats-value.module.css index 14a0a585f0c..3de6d8e371c 100644 --- a/app/components/stats-value.module.css +++ b/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); } diff --git a/app/styles/application.module.css b/app/styles/application.module.css index 6c187584f5a..2c914b2b2b5 100644 --- a/app/styles/application.module.css +++ b/app/styles/application.module.css @@ -38,13 +38,13 @@ "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); --placeholder-bg: hsl(212, 7%, 57%); --placeholder-bg2: hsl(213, 16%, 75%); diff --git a/app/styles/categories.module.css b/app/styles/categories.module.css index eee5c7c9e26..f468b3b4702 100644 --- a/app/styles/categories.module.css +++ b/app/styles/categories.module.css @@ -15,6 +15,11 @@ > * { padding: var(--space-s); + display: block; + } + + > *:hover { + background-color: var(--main-bg); } > * + * { @@ -32,4 +37,8 @@ margin: var(--space-2xs) 0; text-align: center; font-size: 85%; + + > a { + text-decoration: underline; + } } diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs index c49fdc5ff66..d9750856c8e 100644 --- a/app/templates/categories.hbs +++ b/app/templates/categories.hbs @@ -21,11 +21,11 @@
{{#each this.model as |category|}} -
+
- + {{~category.category~}} - + {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}} @@ -33,7 +33,7 @@
{{ category.description }}
-
+ {{/each}}
diff --git a/tests/axe-config.js b/tests/axe-config.js index 80e95df7ee2..4f00b08c16f 100644 --- a/tests/axe-config.js +++ b/tests/axe-config.js @@ -1,7 +1,3 @@ export default { - rules: { - 'color-contrast': { - enabled: false, - }, - }, + rules: {}, }; From ac4fa5f1dd3009ba59894bfa09afa5448d043c79 Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 15:33:07 +0100 Subject: [PATCH 2/7] Increase size of pagination tap targets to pass Lighthouse accessibility audit --- app/components/pagination.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/pagination.module.css b/app/components/pagination.module.css index f71a1f1f4f8..17596471c95 100644 --- a/app/components/pagination.module.css +++ b/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 { From b93a5f71972e6cdde1c0239d159920b4688f8639 Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 15:35:33 +0100 Subject: [PATCH 3/7] Use standard (accessible) colors on front page list --- app/components/front-page-list/item.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/front-page-list/item.module.css b/app/components/front-page-list/item.module.css index 9deb5ba5f9b..bb9ee615483 100644 --- a/app/components/front-page-list/item.module.css +++ b/app/components/front-page-list/item.module.css @@ -48,7 +48,7 @@ .subtitle { margin-top: var(--space-3xs); font-size: 13px; - color: light-dark(rgb(118, 131, 138), #cccac2); + color: var(--main-color-light); } .right { @@ -56,5 +56,5 @@ height: var(--space-s); width: auto; margin-left: var(--space-xs); - color: light-dark(rgb(118, 131, 138), #cccac2); + color: var(--main-color-light); } From 12dc472515fc8d2b3227694001a57c4779224c14 Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 16:05:24 +0100 Subject: [PATCH 4/7] Add underline to differentiate stats overview "(see all)" link --- app/styles/crate/version.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css index 1daa2bd556d..3292c178a67 100644 --- a/app/styles/crate/version.module.css +++ b/app/styles/crate/version.module.css @@ -89,6 +89,10 @@ flex-grow: 7; display: flex; flex-wrap: wrap; + + & a { + text-decoration: underline; + } } .stat { From 96f383ab56edba24a8a40b3c5e20115b0e1578ee Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 16:12:05 +0100 Subject: [PATCH 5/7] Increase contrast in crate dependencies list --- app/components/dependency-list/row.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css index 0000a668982..46e635b9223 100644 --- a/app/components/dependency-list/row.module.css +++ b/app/components/dependency-list/row.module.css @@ -26,8 +26,8 @@ } &.optional { - --range-color: light-dark(var(--grey600), var(--grey600)); - --crate-color: light-dark(var(--grey600), var(--grey600)); + --range-color: light-dark(var(--grey800), var(--grey600)); + --crate-color: light-dark(var(--grey800), var(--grey600)); --placeholder-opacity: 0.15; } @@ -90,7 +90,7 @@ } .optional-label, .features-label { - color: var(--grey600); + color: light-dark(var(--grey600), var(--grey400)); text-transform: uppercase; letter-spacing: .7px; font-size: 13px; From 0fab5ba8c10f8d1ccb7ce81b0bda2f822e8507e0 Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Fri, 11 Jul 2025 16:34:50 +0100 Subject: [PATCH 6/7] Use colors consistently across dependencies and depdents pages --- app/components/dependency-list/row.module.css | 6 +++--- app/components/rev-dep-row.module.css | 7 ++++--- app/styles/application.module.css | 2 ++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css index 46e635b9223..b8bbd627837 100644 --- a/app/components/dependency-list/row.module.css +++ b/app/components/dependency-list/row.module.css @@ -1,8 +1,8 @@ .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); + --range-color: light-dark(var(--grey900), var(--grey400)); + --crate-color: light-dark(var(--grey900), var(--grey400)); --placeholder-opacity: 0.35; --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321); @@ -90,7 +90,7 @@ } .optional-label, .features-label { - color: light-dark(var(--grey600), var(--grey400)); + color: var(--range-color); text-transform: uppercase; letter-spacing: .7px; font-size: 13px; diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css index 9619fc516b1..79aec517175 100644 --- a/app/components/rev-dep-row.module.css +++ b/app/components/rev-dep-row.module.css @@ -1,6 +1,7 @@ .row { --hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%)); - --crate-color: light-dark(var(--grey700), var(--grey600)); + --crate-color: light-dark(var(--grey900), var(--grey400)); + --range-color: light-dark(var(--grey900), var(--grey400)); --placeholder-opacity: 0.35; --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321); @@ -59,7 +60,7 @@ } .range { - color: var(--grey600); + color: var(--range-color); text-transform: uppercase; letter-spacing: .7px; font-size: 13px; @@ -68,7 +69,7 @@ .downloads { display: flex; align-items: center; - color: var(--grey600); + color: var(--range-color); font-size: 16px; font-weight: 500; font-variant: tabular-nums; diff --git a/app/styles/application.module.css b/app/styles/application.module.css index 2c914b2b2b5..6d26b35da9d 100644 --- a/app/styles/application.module.css +++ b/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%); From e69646247ddd05519dd9f758f36637b7aca30c60 Mon Sep 17 00:00:00 2001 From: Kailan Blanks Date: Wed, 16 Jul 2025 15:38:45 +0100 Subject: [PATCH 7/7] Create globally reusable styles for clickable lists --- app/components/dependency-list/row.hbs | 4 +- app/components/dependency-list/row.module.css | 37 +++++-------------- app/components/rev-dep-row.hbs | 2 +- app/components/rev-dep-row.module.css | 21 +---------- app/components/version-list/row.hbs | 4 +- app/components/version-list/row.module.css | 24 +++--------- app/styles/application.module.css | 25 +++++++++++++ app/styles/categories.module.css | 22 +++++------ app/templates/categories.hbs | 32 ++++++++-------- 9 files changed, 72 insertions(+), 99 deletions(-) diff --git a/app/components/dependency-list/row.hbs b/app/components/dependency-list/row.hbs index bf115196a0c..7fe45d404c5 100644 --- a/app/components/dependency-list/row.hbs +++ b/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 @@
{{/if}} - \ No newline at end of file + diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css index b8bbd627837..012bc9f84c3 100644 --- a/app/components/dependency-list/row.module.css +++ b/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), var(--grey400)); - --crate-color: light-dark(var(--grey900), var(--grey400)); --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(--grey800), var(--grey600)); - --crate-color: light-dark(var(--grey800), 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(--range-color); + 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; } diff --git a/app/components/rev-dep-row.hbs b/app/components/rev-dep-row.hbs index 16ffc7a57a3..8ed11e42726 100644 --- a/app/components/rev-dep-row.hbs +++ b/app/components/rev-dep-row.hbs @@ -1,4 +1,4 @@ -
+
@@ -159,4 +159,4 @@ -
\ No newline at end of file +
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css index feccb01d3a6..a1c829d1783 100644 --- a/app/components/version-list/row.module.css +++ b/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; diff --git a/app/styles/application.module.css b/app/styles/application.module.css index 6d26b35da9d..fc347727efa 100644 --- a/app/styles/application.module.css +++ b/app/styles/application.module.css @@ -48,6 +48,10 @@ --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%); @@ -185,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; diff --git a/app/styles/categories.module.css b/app/styles/categories.module.css index f468b3b4702..cbc2b08d4ba 100644 --- a/app/styles/categories.module.css +++ b/app/styles/categories.module.css @@ -8,23 +8,21 @@ } .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); - display: block; + > * + * { + margin-top: var(--space-2xs); } - > *:hover { - background-color: var(--main-bg); + &:global(.is-empty) { + min-height: calc(2 * var(--space-s) + var(--space-xl)); } +} - > * + * { - border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #424242); - } +.row { + composes: row from global; } .description { diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs index d9750856c8e..eeedf8b1c53 100644 --- a/app/templates/categories.hbs +++ b/app/templates/categories.hbs @@ -19,23 +19,25 @@
-
+
    {{#each this.model as |category|}} - -
    - - {{~category.category~}} - - - {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}} - -
    -
    - {{ category.description }} -
    -     +
  • + +
    + + {{~category.category~}} + + + {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}} + +
    +
    + {{ category.description }} +
    +     +
    • {{/each}} -
+