From 454cf864b57c1bf521844394876cb334765d05e0 Mon Sep 17 00:00:00 2001 From: luchobonatti Date: Wed, 9 Sep 2026 16:42:30 -0300 Subject: [PATCH 1/3] feat: add vault colour and type design tokens Define the LP Vault's 14 colour custom properties and 15 type role classes read from the design prototype, so components built for #83 reach for a token instead of a literal hex code or font block. --- app/index.html | 2 +- app/src/main.tsx | 1 + app/src/styles/tokens.css | 19 ++++++ app/src/styles/type.module.css | 113 +++++++++++++++++++++++++++++++++ 4 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 app/src/styles/tokens.css create mode 100644 app/src/styles/type.module.css diff --git a/app/index.html b/app/index.html index edffd74..9261c6e 100644 --- a/app/index.html +++ b/app/index.html @@ -8,7 +8,7 @@ diff --git a/app/src/main.tsx b/app/src/main.tsx index 17ad524..2e52a16 100644 --- a/app/src/main.tsx +++ b/app/src/main.tsx @@ -3,6 +3,7 @@ import { StrictMode } from "react" import { createRoot } from "react-dom/client" import { BrowserRouter } from "react-router-dom" import "@stellar-scaffold/app-lib/styles.css" +import "./styles/tokens.css" import App from "./App.tsx" import { NotificationProvider } from "./providers/NotificationProvider.tsx" import { WalletProvider } from "./providers/WalletProvider.tsx" diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css new file mode 100644 index 0000000..c65785b --- /dev/null +++ b/app/src/styles/tokens.css @@ -0,0 +1,19 @@ +:root { + --vault-surface-card: #ffffff; + --vault-surface-inset: #f7f7f7; + --vault-surface-page: #efefef; + --vault-fill-warn: var(--vault-surface-page); + --vault-border-faint: #f2f2f2; + --vault-border-hairline: #e0e0e0; + --vault-border-inactive: #b4b4b4; + --vault-text-muted: #6e6e6e; + --vault-text-body: #2e2e2e; + --vault-ink: #000000; + --vault-action: #1d4ed8; + --vault-action-ring: #edf2fe; + --vault-success: #1f7a4c; + --vault-success-fill: #ebf4ef; + --vault-danger: #b3261e; + --vault-font-sans: "Space Grotesk", system-ui, sans-serif; + --vault-font-mono: "JetBrains Mono", ui-monospace, monospace; +} diff --git a/app/src/styles/type.module.css b/app/src/styles/type.module.css new file mode 100644 index 0000000..bf0235a --- /dev/null +++ b/app/src/styles/type.module.css @@ -0,0 +1,113 @@ +.vaultName { + font-family: var(--vault-font-sans); + font-weight: 700; + font-size: 30px; + line-height: 1.05; + letter-spacing: -0.02em; +} + +.cardHead { + font-family: var(--vault-font-sans); + font-weight: 500; + font-size: 21px; + line-height: 1.2; +} + +.waitHead { + font-family: var(--vault-font-sans); + font-weight: 500; + font-size: 19px; + line-height: 1.25; +} + +.sectionHead { + font-family: var(--vault-font-sans); + font-weight: 500; + font-size: 18px; + line-height: 1.25; +} + +.body { + font-family: var(--vault-font-sans); + font-weight: 400; + font-size: 16px; + line-height: 1.5; +} + +.stepTitle { + font-family: var(--vault-font-sans); + font-weight: 500; + font-size: 15.5px; + line-height: 1.3; +} + +.footnote { + font-family: var(--vault-font-sans); + font-weight: 400; + font-size: 13.5px; + line-height: 1.5; +} + +.label { + font-family: var(--vault-font-mono); + font-weight: 500; + font-size: 11px; + line-height: 1; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.position { + font-family: var(--vault-font-mono); + font-weight: 500; + font-size: 28px; + line-height: 1.05; + font-variant-numeric: tabular-nums; +} + +.metric { + font-family: var(--vault-font-mono); + font-weight: 500; + font-size: 25px; + line-height: 1.05; + font-variant-numeric: tabular-nums; +} + +.amountInput { + font-family: var(--vault-font-mono); + font-weight: 400; + font-size: 25px; + line-height: 1.1; + font-variant-numeric: tabular-nums; +} + +.estimate { + font-family: var(--vault-font-mono); + font-weight: 500; + font-size: 22px; + line-height: 1.15; + font-variant-numeric: tabular-nums; +} + +.summaryValue { + font-family: var(--vault-font-mono); + font-weight: 400; + font-size: 15px; + line-height: 1.4; + font-variant-numeric: tabular-nums; +} + +.railValue { + font-family: var(--vault-font-mono); + font-weight: 400; + font-size: 13.5px; + line-height: 1.4; + font-variant-numeric: tabular-nums; +} + +.metricSub { + font-family: var(--vault-font-mono); + font-weight: 400; + font-size: 12.5px; + line-height: 1.3; +} From 76b7a4827beb26f9ea7b5356cd0c010fc56f46c1 Mon Sep 17 00:00:00 2001 From: luchobonatti Date: Wed, 9 Sep 2026 17:07:08 -0300 Subject: [PATCH 2/3] feat: add the two rail type roles --- app/src/styles/type.module.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/src/styles/type.module.css b/app/src/styles/type.module.css index bf0235a..1b1d975 100644 --- a/app/src/styles/type.module.css +++ b/app/src/styles/type.module.css @@ -111,3 +111,16 @@ font-size: 12.5px; line-height: 1.3; } + +.railId { + font-family: var(--vault-font-mono); + font-weight: 500; + font-size: 10.5px; + line-height: 1; +} + +.railLabel { + font-family: var(--vault-font-sans); + font-weight: 400; + font-size: 14px; +} From 3550a12852b731c742236323635ea8ec74d22d1f Mon Sep 17 00:00:00 2001 From: luchobonatti Date: Thu, 10 Sep 2026 11:20:21 -0300 Subject: [PATCH 3/3] chore: drop the unused rail type roles --- app/src/styles/type.module.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/app/src/styles/type.module.css b/app/src/styles/type.module.css index 1b1d975..bf0235a 100644 --- a/app/src/styles/type.module.css +++ b/app/src/styles/type.module.css @@ -111,16 +111,3 @@ font-size: 12.5px; line-height: 1.3; } - -.railId { - font-family: var(--vault-font-mono); - font-weight: 500; - font-size: 10.5px; - line-height: 1; -} - -.railLabel { - font-family: var(--vault-font-sans); - font-weight: 400; - font-size: 14px; -}