apps/firefly-ui
2
0 Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hh committed 2026-10-16 14:51:02 +00:00
1 parent 4e774f5104
commit 60b099e917
4 files changed
+60 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bun.lock
+6
View File
@@ -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
+2
View File
@@ -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
+1 -1
View File
@@ -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
+51 -31
View File
@@ -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;
}