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

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;
}