Merge branch 'accessibility-color-blind' of https://github.com/David-Brenn/anki into accessibility-color-blind

ts/routes/graphs/TrueRetentionCombined.svelte

@@ -5,7 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { localizedNumber } from "@tslib/i18n";
-
     import { type RevlogRange } from "./graph-helpers";
     import {
         calculateRetentionPercentageString,
@@ -13,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         type PeriodTrueRetentionData,
         type RowData,
     } from "./true-retention";
+    import { onMount } from "svelte";
 
     interface Props {
         revlogRange: RevlogRange;
@@ -22,6 +22,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const { revlogRange, data }: Props = $props();
 
     const rowData: RowData[] = $derived(getRowData(data, revlogRange));
+
+    // Default (non-colorblind) colors
+    let youngColor = "#64c476";
+    let matureColor = "#31a354";
+
+    onMount(() => {
+        const isColorBlindMode = (window as any).colorBlindMode;
+        if (isColorBlindMode) {
+            youngColor = "#44ab9a";
+            matureColor = "#127733";
+        }
+        // Set globally so scoped SCSS can use them
+        document.documentElement.style.setProperty("--young-color", youngColor);
+        document.documentElement.style.setProperty("--mature-color", matureColor);
+    });
 </script>
 
 <table>
@@ -84,11 +99,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .young {
-        color: #64c476;
+        color: var(--young-color);
     }
 
     .mature {
-        color: #31a354;
+        color: var(--mature-color);
     }
 
     .total {

ts/routes/graphs/TrueRetentionSingle.svelte

@@ -1,7 +1,3 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { type RevlogRange } from "./graph-helpers";
@@ -15,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         type Scope,
     } from "./true-retention";
     import { localizedNumber } from "@tslib/i18n";
+    import { onMount } from "svelte";
 
     interface Props {
         revlogRange: RevlogRange;
@@ -25,6 +22,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const { revlogRange, data, scope }: Props = $props();
 
     const rowData: RowData[] = $derived(getRowData(data, revlogRange));
+
+    let passColor = "#3bc464";
+    let failColor = "#c43b3b";
+
+    onMount(() => {
+        const isColorBlindMode = (window as any).colorBlindMode;
+        if (isColorBlindMode) {
+            passColor = "#127733";
+            failColor = "#cb6676";
+        }
+        // Apply them to document root so SCSS can see them
+        document.documentElement.style.setProperty("--pass-color", passColor);
+        document.documentElement.style.setProperty("--fail-color", failColor);
+    });
 </script>
 
 <table>
@@ -71,11 +82,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .pass {
-        color: #3bc464;
+        color: var(--pass-color);
     }
 
     .fail {
-        color: #c43b3b;
+        color: var(--fail-color);
     }
 
     .retention {

ts/routes/graphs/hours.ts

@@ -16,6 +16,7 @@ import {
     axisRight,
     curveBasis,
     interpolateBlues,
+    interpolatePurples,
     pointer,
     scaleBand,
     scaleLinear,
@@ -83,11 +84,21 @@ export function renderHours(
         .classed(oddTickClass, (d: any): boolean => d % 2 != 0)
         .attr("direction", "ltr");
 
-    const cappedRange = scaleLinear().range([0.1, 0.8]);
-    const colour = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain([
+    let cappedRange = scaleLinear().range([0.1, 0.8]);
+    let colour;
+    const isColorBlindMode = (window as any).colorBlindMode;
+
+    if(isColorBlindMode) { 
+        colour = scaleSequential((n) => interpolatePurples(cappedRange(n)!)).domain([
             0,
             yMax,
         ]);
+    } else {
+        colour = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain([
+            0,
+            yMax,
+        ]);
+    }
 
     // y scale
     const yTickFormat = (n: number): string => localizedNumber(n);