diff --git a/bun.lock b/bun.lock index 07ebd23..c8e7565 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index ecfd75c..6ffc5a4 100644 --- a/package.json +++ b/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", diff --git a/src/lib/components/Amount.svelte b/src/lib/components/Amount.svelte index 67be7d9..b7464ce 100644 --- a/src/lib/components/Amount.svelte +++ b/src/lib/components/Amount.svelte @@ -33,6 +33,6 @@ ); -{formatMoney({ amount, code, decimals, symbol }, signed)} diff --git a/src/routes/layout.css b/src/routes/layout.css index 25a8fc8..d1ef78a 100644 --- a/src/routes/layout.css +++ b/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-deep: oklch(0.5 0.1 240); - --ff-on-brand: oklch(0.99 0.01 240); - --ff-income: oklch(0.5 0.12 145); - --ff-expense: oklch(0.52 0.15 28); - --ff-transfer: oklch(0.5 0.085 225); - --ff-warn: oklch(0.62 0.14 70); - --ff-row-hover: oklch(0.96 0.012 240); + --ff-brand: oklch(0.6 0.1 240); + --ff-brand-deep: oklch(0.52 0.095 240); + --ff-on-brand: oklch(0.995 0 0); + --ff-income: oklch(0.53 0.14 152); + --ff-expense: oklch(0.56 0.18 30); + --ff-transfer: oklch(0.52 0.1 240); + --ff-warn: oklch(0.6 0.14 65); + --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-outline: oklch(0.9 0.008 240); + --cladd-bg-outline: oklch(0.87 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-deep: oklch(0.36 0.075 240); - --ff-on-brand: oklch(0.97 0.01 240); - --ff-income: oklch(0.78 0.15 140); - --ff-expense: oklch(0.76 0.1 35); - --ff-transfer: oklch(0.76 0.08 220); - --ff-warn: oklch(0.8 0.13 80); - --ff-row-hover: oklch(0.25 0.012 240); - --ff-row-cursor: oklch(0.29 0.03 240); - --ff-row-selected: oklch(0.33 0.06 240); - --ff-series-1: #348dcf; - --ff-series-2: #d5753a; - --ff-series-3: #0f9b89; - --ff-series-4: #b68b16; - --ff-series-5: #cd6199; - --ff-series-6: #4e943e; - --ff-series-7: #876cca; - --ff-series-8: #c44844; + --ff-brand: oklch(0.5 0.1 240); + --ff-brand-deep: oklch(0.44 0.09 240); + --ff-on-brand: oklch(0.995 0 0); + --ff-income: oklch(0.77 0.17 152); + --ff-expense: oklch(0.72 0.17 28); + --ff-transfer: oklch(0.77 0.1 235); + --ff-warn: oklch(0.82 0.14 80); + --ff-row-hover: oklch(0.29 0.014 250); + --ff-row-cursor: oklch(0.32 0.035 245); + --ff-row-selected: oklch(0.36 0.06 245); + --ff-series-1: #4a9ad6; + --ff-series-2: #e0834a; + --ff-series-3: #1fae9a; + --ff-series-4: #c99d2a; + --ff-series-5: #d872a6; + --ff-series-6: #5ea84d; + --ff-series-7: #9580d6; + --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; }