feat(dashboard,accounts): reconcile, debts box, per-currency charts, validated series palette

src/lib/components/dashboard/AccountsChart.svelte

@@ -152,7 +152,11 @@
     {:else if panels.length === 0}
       <p class="py-10 text-center text-cladd-fg-soft">
         No accounts to draw. Pick the accounts for this chart in
-        <a class="text-brand underline" href="/preferences">Preferences</a>.
+        <a
+          class="text-brand dark:text-(--ff-series-1) underline"
+          href="/preferences"
+          >Preferences</a
+        >.
       </p>
     {:else}
       {#each panels as panel (panel.cur.code)}
@@ -178,7 +182,9 @@
     {/if}
   </div>
   {#snippet footer()}
-    <a class="text-brand hover:underline" href="/accounts/asset"
+    <a
+      class="text-brand dark:text-(--ff-series-1) hover:underline"
+      href="/accounts/asset"
       >View your asset accounts</a
     >
     {#if converted}

src/lib/components/dashboard/BudgetsChart.svelte

@@ -92,7 +92,11 @@
       <p class="py-6 text-center text-cladd-fg-soft">
         No budgets with a limit or spending in this period. Set an amount for a
         budget on the
-        <a class="text-brand underline" href="/budgets">budgets page</a>.
+        <a
+          class="text-brand dark:text-(--ff-series-1) underline"
+          href="/budgets"
+          >budgets page</a
+        >.
       </p>
     {:else}
       {#each visible as group (group.code)}
@@ -116,6 +120,10 @@
     {/if}
   </div>
   {#snippet footer()}
-    <a class="text-brand hover:underline" href="/budgets">Go to your budgets</a>
+    <a
+      class="text-brand dark:text-(--ff-series-1) hover:underline"
+      href="/budgets"
+      >Go to your budgets</a
+    >
   {/snippet}
 </Box>

src/lib/components/dashboard/CategoriesChart.svelte

@@ -101,7 +101,9 @@
     {/if}
   </div>
   {#snippet footer()}
-    <a class="text-brand hover:underline" href="/categories"
+    <a
+      class="text-brand dark:text-(--ff-series-1) hover:underline"
+      href="/categories"
       >Go to your categories</a
     >
   {/snippet}

src/lib/components/dashboard/DebtsBox.svelte

@@ -95,7 +95,9 @@
       {/each}
     </div>
     {#snippet footer()}
-      <a class="text-brand hover:underline" href="/accounts/liabilities"
+      <a
+        class="text-brand dark:text-(--ff-series-1) hover:underline"
+        href="/accounts/liabilities"
         >See your liabilities</a
       >
     {/snippet}

src/lib/components/dashboard/InfoBoxes.svelte

@@ -164,7 +164,7 @@
       : ""}"
   >
     <span
-      class="hidden size-10 shrink-0 place-items-center rounded-cladd-md text-white sm:grid"
+      class="hidden size-10 shrink-0 place-items-center rounded-cladd-md text-white sm:grid dark:text-black/75"
       style:background={color}
     >
       <Icon class="size-5" />

src/lib/components/dashboard/InsightBox.svelte

@@ -137,7 +137,9 @@
     {/if}
   </div>
   {#snippet footer()}
-    <a class="text-brand hover:underline" href="/accounts/{kind}"
+    <a
+      class="text-brand dark:text-(--ff-series-1) hover:underline"
+      href="/accounts/{kind}"
       >See your {kind} accounts</a
     >
   {/snippet}

src/lib/components/dashboard/PiggyBanksBox.svelte

@@ -62,7 +62,9 @@
       {/each}
     </ul>
     {#snippet footer()}
-      <a class="text-brand hover:underline" href="/piggy-banks"
+      <a
+        class="text-brand dark:text-(--ff-series-1) hover:underline"
+        href="/piggy-banks"
         >Go to your piggy banks</a
       >
     {/snippet}

src/lib/components/dashboard/SubscriptionsBox.svelte

@@ -149,7 +149,9 @@
       {/if}
     </div>
     {#snippet footer()}
-      <a class="text-brand hover:underline" href="/subscriptions"
+      <a
+        class="text-brand dark:text-(--ff-series-1) hover:underline"
+        href="/subscriptions"
         >Go to your subscriptions</a
       >
     {/snippet}

src/lib/components/dashboard/data.ts

@@ -217,5 +217,5 @@ export const accountsQuery = (type: string, start: string, end: string) => ({
 });
 
 export function proportional(counts: number[]): string {
-  return counts.map((n) => `minmax(0, ${Math.max(2, n)}fr)`).join(" ");
+  return counts.map((n) => `minmax(8rem, ${Math.max(2, n)}fr)`).join(" ");
 }