style: Inter with tabular figures, Firefly inks, higher contrast

bun.lock

@@ -8,6 +8,8 @@
         "@biomejs/biome": "^2.5.15",
         "@fontsource-variable/geist": "^5.3.0",
         "@fontsource-variable/geist-mono": "^5.3.0",
+        "@fontsource-variable/inter": "^5.3.0",
+        "@fontsource-variable/source-sans-3": "^5.3.1",
         "@internationalized/date": "^3.12.0",
         "@lucide/svelte": "^1.23.0",
         "@sveltejs/adapter-static": "^4.0.0",
@@ -84,6 +86,10 @@
 
     "@fontsource-variable/geist-mono": ["@fontsource-variable/geist-mono@5.3.0", "", {}, "sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw=="],
 
+    "@fontsource-variable/inter": ["@fontsource-variable/inter@5.3.0", "", {}, "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA=="],
+
+    "@fontsource-variable/source-sans-3": ["@fontsource-variable/source-sans-3@5.3.1", "", {}, "sha512-u0p5Z/PM2e1uxYOMiodLM6NVzxHwULcB6Oi7QSr2WU/sdoLBFP/BeOZ3YYHeJ6rHsjPZA1nZweZVaV7sf2MAyQ=="],
+
     "@internationalized/date": ["@internationalized/date@3.12.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ=="],
 
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],

package.json

@@ -21,6 +21,8 @@
     "@biomejs/biome": "^2.5.15",
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/source-sans-3": "^5.3.1",
     "@internationalized/date": "^3.12.0",
     "@lucide/svelte": "^1.23.0",
     "@sveltejs/adapter-static": "^4.0.0",

src/lib/components/Amount.svelte

@@ -33,6 +33,6 @@
   );
 </script>
 
-<span class="num {color} {className}"
+<span class="num font-medium {color} {className}"
   >{formatMoney({ amount, code, decimals, symbol }, signed)}</span
 >

src/routes/layout.css

@@ -3,17 +3,18 @@
 @import "shadcn-svelte/tailwind.css";
 
 @import "./claddcn.css";
+@import "@fontsource-variable/inter/index.css";
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --ff-brand: oklch(0.57 0.105 240);
+  --ff-brand: oklch(0.6 0.1 240);
-  --ff-brand-deep: oklch(0.5 0.1 240);
+  --ff-brand-deep: oklch(0.52 0.095 240);
-  --ff-on-brand: oklch(0.99 0.01 240);
+  --ff-on-brand: oklch(0.995 0 0);
-  --ff-income: oklch(0.5 0.12 145);
+  --ff-income: oklch(0.53 0.14 152);
-  --ff-expense: oklch(0.52 0.15 28);
+  --ff-expense: oklch(0.56 0.18 30);
-  --ff-transfer: oklch(0.5 0.085 225);
+  --ff-transfer: oklch(0.52 0.1 240);
-  --ff-warn: oklch(0.62 0.14 70);
+  --ff-warn: oklch(0.6 0.14 65);
-  --ff-row-hover: oklch(0.96 0.012 240);
+  --ff-row-hover: oklch(0.965 0.01 240);
   --ff-row-cursor: oklch(0.93 0.03 240);
   --ff-row-selected: oklch(0.9 0.05 240);
   --ff-series-1: #1777b8;
@@ -27,11 +28,15 @@
 }
 
 :root:not(.dark) {
-  --cladd-bg: oklch(0.955 0.007 240);
+  --cladd-bg: oklch(0.95 0.008 240);
   --cladd-surface: oklch(1 0 0);
   --cladd-surface-cut: oklch(0.955 0.005 240);
-  --cladd-bg-outline: oklch(0.88 0.008 240);
+  --cladd-bg-outline: oklch(0.87 0.008 240);
-  --cladd-outline: oklch(0.9 0.008 240);
+  --cladd-outline: oklch(0.89 0.008 240);
+  --cladd-fg: oklch(0.22 0.01 250);
+  --cladd-fg-soft: oklch(0.42 0.012 250);
+  --cladd-fg-softer: oklch(0.55 0.012 250);
+  --cladd-fg-softest: oklch(0.7 0.01 250);
   --ring: var(--ff-brand);
 }
 
@@ -40,28 +45,40 @@
 }
 
 .dark {
+  --cladd-bg: oklch(0.2 0.012 250);
+  --cladd-surface: oklch(0.25 0.014 250);
+  --cladd-surface-cut: oklch(0.215 0.012 250);
+  --cladd-bg-outline: oklch(0.3 0.014 250);
+  --cladd-outline: oklch(0.34 0.016 250);
+  --cladd-fg: oklch(0.96 0.004 250);
+  --cladd-fg-soft: oklch(0.8 0.01 250);
+  --cladd-fg-softer: oklch(0.67 0.012 250);
+  --cladd-fg-softest: oklch(0.52 0.012 250);
   --ring: var(--ff-series-1);
-  --ff-brand: oklch(0.42 0.085 240);
+  --ff-brand: oklch(0.5 0.1 240);
-  --ff-brand-deep: oklch(0.36 0.075 240);
+  --ff-brand-deep: oklch(0.44 0.09 240);
-  --ff-on-brand: oklch(0.97 0.01 240);
+  --ff-on-brand: oklch(0.995 0 0);
-  --ff-income: oklch(0.78 0.15 140);
+  --ff-income: oklch(0.77 0.17 152);
-  --ff-expense: oklch(0.76 0.1 35);
+  --ff-expense: oklch(0.72 0.17 28);
-  --ff-transfer: oklch(0.76 0.08 220);
+  --ff-transfer: oklch(0.77 0.1 235);
-  --ff-warn: oklch(0.8 0.13 80);
+  --ff-warn: oklch(0.82 0.14 80);
-  --ff-row-hover: oklch(0.25 0.012 240);
+  --ff-row-hover: oklch(0.29 0.014 250);
-  --ff-row-cursor: oklch(0.29 0.03 240);
+  --ff-row-cursor: oklch(0.32 0.035 245);
-  --ff-row-selected: oklch(0.33 0.06 240);
+  --ff-row-selected: oklch(0.36 0.06 245);
-  --ff-series-1: #348dcf;
+  --ff-series-1: #4a9ad6;
-  --ff-series-2: #d5753a;
+  --ff-series-2: #e0834a;
-  --ff-series-3: #0f9b89;
+  --ff-series-3: #1fae9a;
-  --ff-series-4: #b68b16;
+  --ff-series-4: #c99d2a;
-  --ff-series-5: #cd6199;
+  --ff-series-5: #d872a6;
-  --ff-series-6: #4e943e;
+  --ff-series-6: #5ea84d;
-  --ff-series-7: #876cca;
+  --ff-series-7: #9580d6;
-  --ff-series-8: #c44844;
+  --ff-series-8: #d65a55;
 }
 
 @theme inline {
+  --font-sans:
+    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
+    sans-serif;
   --color-brand: var(--ff-brand);
   --color-brand-deep: var(--ff-brand-deep);
   --color-on-brand: var(--ff-on-brand);
@@ -79,10 +96,15 @@
     @apply border-border outline-ring/50;
   }
   html {
+    scroll-padding-top: 3.75rem;
+    scroll-padding-bottom: 0.75rem;
     scrollbar-color: var(--cladd-fg-softest) transparent;
   }
   body {
+    font-family: var(--font-sans);
     font-size: 13px;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
     line-height: 1.45;
     @apply bg-background text-foreground;
   }
@@ -102,9 +124,7 @@
 }
 
 @utility num {
-  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  letter-spacing: -0.01em;
   white-space: nowrap;
 }