From 830acd245e671aae17dde161b67b863ba806a0a9 Mon Sep 17 00:00:00 2001 From: Tolgahan Date: Fri, 5 Jun 2026 13:53:10 +0300 Subject: [PATCH 1/2] Apply OMS design system to example apps - Restyle react, wagmi, and trails-actions examples with oms-sdk-design-system tokens - Centralize tokens in examples/shared/oms-tokens.css; each example imports it - Load Fustat/Inter/Geist Mono fonts in each example - Document the styling convention in AGENTS.md (rules + Maintenance Matrix) --- AGENTS.md | 8 + examples/react/index.html | 6 + examples/react/src/styles.css | 260 ++++++++++++---------- examples/shared/oms-tokens.css | 72 +++++++ examples/trails-actions/index.html | 6 + examples/trails-actions/src/styles.css | 288 +++++++++++++++---------- examples/wagmi/index.html | 6 + examples/wagmi/src/styles.css | 207 +++++++++++------- 8 files changed, 552 insertions(+), 301 deletions(-) create mode 100644 examples/shared/oms-tokens.css diff --git a/AGENTS.md b/AGENTS.md index 2ab182d..4a068d8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -82,6 +82,7 @@ This repository is a pnpm workspace for the OMS TypeScript SDK. The root package - `examples/react/`: Vite React demo that consumes the SDK through the workspace. - `examples/wagmi/`: Vite React wagmi demo using the OMS Wallet connector and MetaMask connector. - `examples/node/`: Interactive Node OTP/signing example. +- `examples/shared/oms-tokens.css`: Shared OMS design tokens (`--oms-*`) imported by each browser example's `styles.css`. See the Example App Styling rules. - `scripts/write-esm-package.cjs`: Writes `dist/esm/package.json` during the root build. ## Commands @@ -124,6 +125,12 @@ This repository is a pnpm workspace for the OMS TypeScript SDK. The root package - Keep supported network metadata and chain ID lookup going through `src/networks.ts`, `Networks`, `supportedNetworks`, `findNetworkById`, and `findNetworkByName` instead of ad hoc conversion. - The TypeScript compiler is the enforced style gate. There is no separate lint or formatter command in the root scripts, so avoid broad formatting churn and match the local file style. +## Example App Styling + +- The browser examples (`examples/react`, `examples/wagmi`, `examples/trails-actions`) share one set of design tokens in `examples/shared/oms-tokens.css`, mirrored from `oms-sdk-design-system`'s `omsTokens`. Each example's `styles.css` imports it via `@import url("../../shared/oms-tokens.css")`. +- Reference the `--oms-*` CSS variables (colors, radius, typography, focus rings) for any example styling. Do not hardcode new hex/radius values in the per-app `styles.css` files; if a token is missing, add it to `examples/shared/oms-tokens.css` so all examples stay in sync. (The `.burn-button` fire gradient in the React example is an intentional decorative-effect exception, not a token.) +- When tokens change in `oms-sdk-design-system`, update `examples/shared/oms-tokens.css` to match rather than editing each example. + ## Testing See **[TESTING.md](./TESTING.md)** for testing conventions, unit vs. integration boundaries, and @@ -184,3 +191,4 @@ execution commands. | `src/generated/waas.gen.ts` (regenerated) | Document schema source + regen command in PR description | | Repo structure (new top-level dirs) | `AGENTS.md` Repository Layout section | | Examples added or renamed | `pnpm-workspace.yaml`, root `package.json` scripts, `pages.yml` | +| Design tokens (`oms-sdk-design-system`) | `examples/shared/oms-tokens.css` (single source; examples import it — never hardcode hex/radius in per-app `styles.css`) | diff --git a/examples/react/index.html b/examples/react/index.html index acbb6ea..28155c6 100644 --- a/examples/react/index.html +++ b/examples/react/index.html @@ -3,6 +3,12 @@ + + + OMS SDK React Example diff --git a/examples/react/src/styles.css b/examples/react/src/styles.css index c09db78..1cd808c 100644 --- a/examples/react/src/styles.css +++ b/examples/react/src/styles.css @@ -1,10 +1,5 @@ -:root { - color: #202124; - background: #f7f8fa; - font-family: - Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - sans-serif; -} +/* Design tokens live in one place — see examples/shared/oms-tokens.css. */ +@import url("../../shared/oms-tokens.css"); * { box-sizing: border-box; @@ -32,30 +27,34 @@ select { display: grid; gap: 18px; padding: 28px; - border: 1px solid #dde2e8; - border-radius: 8px; - background: #ffffff; - box-shadow: 0 16px 48px rgb(20 28 38 / 10%); + border: 1px solid var(--oms-slate-200); + border-radius: 24px; + background: var(--oms-surface); + box-shadow: 0 24px 60px rgb(20 16 53 / 10%); } .eyebrow { margin: 0 0 6px; - color: #5f6c7b; + color: var(--oms-brand); font-size: 13px; font-weight: 700; + letter-spacing: 0.04em; text-transform: uppercase; } h1 { margin: 0; + color: var(--oms-ink); font-size: 28px; + font-weight: 700; line-height: 1.15; } .section-title { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; + font-weight: 700; line-height: 1.25; } @@ -67,9 +66,9 @@ h1 { label { display: grid; gap: 8px; - color: #374151; + color: var(--oms-slate-900); font-size: 14px; - font-weight: 650; + font-weight: 600; } .checkbox-row { @@ -78,16 +77,16 @@ label { gap: 10px; min-height: 44px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .checkbox-row input { width: 18px; min-height: 18px; margin: 0; - accent-color: #1d4ed8; + accent-color: var(--oms-brand); } .checkbox-row span { @@ -107,9 +106,9 @@ label { gap: 12px; min-height: 44px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .session-lifetime-option > span { @@ -121,13 +120,13 @@ label { } .session-lifetime-copy strong { - color: #374151; + color: var(--oms-slate-900); font-size: 14px; line-height: 1.25; } .session-lifetime-copy small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 600; line-height: 1.35; @@ -158,7 +157,7 @@ label { } .session-lifetime-option small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } @@ -171,10 +170,10 @@ label { .field-hint { min-height: 42px; padding: 11px 12px; - border-radius: 6px; + border-radius: 12px; margin: 0; - color: #344054; - background: #eef2f7; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; } @@ -183,51 +182,89 @@ select { width: 100%; min-height: 44px; padding: 10px 12px; - border: 1px solid #cbd3dd; - border-radius: 6px; - color: #111827; - background: #ffffff; + border: 1px solid var(--oms-slate-300); + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-surface); + transition: + border-color 160ms ease, + box-shadow 160ms ease; } input:focus, select:focus { - outline: 2px solid #7aa7ff; - outline-offset: 1px; - border-color: #6b9dff; + outline: none; + border-color: var(--oms-slate-400); + box-shadow: var(--oms-input-focus); } button { min-height: 44px; - border: 0; - border-radius: 6px; + border: 1px solid transparent; + border-radius: 12px; padding: 10px 14px; - color: #ffffff; - background: #1d4ed8; + color: var(--oms-surface); + background: var(--oms-slate-950); font-weight: 700; cursor: pointer; + transition: + background-color 160ms ease, + border-color 160ms ease, + box-shadow 160ms ease; +} + +button:hover:not(:disabled) { + background: var(--oms-slate-800); +} + +button:active:not(:disabled) { + background: var(--oms-purple-700); +} + +button:focus-visible { + outline: none; + box-shadow: var(--oms-focus-ring); } button.secondary { - color: #243044; - background: #e6ebf2; + color: var(--oms-slate-950); + background: transparent; + border-color: var(--oms-slate-500); +} + +button.secondary:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-950); +} + +button.secondary:active:not(:disabled) { + background: var(--oms-purple-100); + border-color: var(--oms-purple-200); } button.subtle { - color: #475467; + color: var(--oms-muted-ink); background: transparent; - border: 1px solid #d8dee8; + border: 1px solid var(--oms-slate-300); +} + +button.subtle:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-400); } button:disabled { cursor: not-allowed; - background: #a7b1c2; + color: var(--oms-slate-400); + background: var(--oms-slate-200); + border-color: transparent; } .burn-button { position: relative; overflow: hidden; isolation: isolate; - background: #1d4ed8; + background: var(--oms-slate-950); transition: background-color 420ms ease, box-shadow 420ms ease; @@ -302,7 +339,7 @@ button:disabled { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; - color: #667085; + color: var(--oms-muted-ink); font-size: 13px; font-weight: 700; } @@ -311,29 +348,31 @@ button:disabled { .divider::after { content: ""; height: 1px; - background: #d8dee8; + background: var(--oms-slate-300); } .tool { display: grid; gap: 12px; padding: 16px; - border: 1px solid #e1e6ee; - border-radius: 8px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 16px; + background: var(--oms-slate-50); } .tool h2 { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; + font-weight: 700; line-height: 1.25; } .tool h3 { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 15px; + font-weight: 700; line-height: 1.25; } @@ -346,15 +385,15 @@ button:disabled { .collapsible-tool summary { min-height: 52px; padding: 16px; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; - font-weight: 800; + font-weight: 700; line-height: 1.25; cursor: pointer; } .collapsible-tool summary::marker { - color: #667085; + color: var(--oms-muted-ink); } .collapsible-content { @@ -372,19 +411,19 @@ button:disabled { display: grid; gap: 4px; padding: 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #ffffff; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-surface); } .balance-panel span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } .balance-panel strong { - color: #1f2937; + color: var(--oms-ink); font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; @@ -404,9 +443,9 @@ button:disabled { .network-meta { min-width: 48px; padding: 4px 8px; - border-radius: 6px; - color: #ffffff; - background: #1d4ed8; + border-radius: 16px; + color: var(--oms-surface); + background: var(--oms-brand); font-size: 12px; font-weight: 800; line-height: 1.2; @@ -416,10 +455,10 @@ button:disabled { .metadata-pill { min-width: 48px; padding: 4px 8px; - border: 1px solid #d8dee8; - border-radius: 6px; - color: #475467; - background: #eef2f7; + border: 1px solid var(--oms-slate-300); + border-radius: 16px; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 12px; font-weight: 800; line-height: 1.2; @@ -427,8 +466,8 @@ button:disabled { } select:disabled { - color: #667085; - background: #eef2f7; + color: var(--oms-muted-ink); + background: var(--oms-slate-100); } .fee-modal-backdrop { @@ -438,7 +477,7 @@ select:disabled { display: grid; place-items: center; padding: 20px; - background: rgb(16 24 40 / 52%); + background: rgb(9 6 36 / 55%); } .fee-options { @@ -447,7 +486,7 @@ select:disabled { display: grid; gap: 10px; overflow: auto; - box-shadow: 0 22px 70px rgb(20 28 38 / 28%); + box-shadow: 0 30px 80px rgb(9 6 36 / 28%); } .fee-option-list { @@ -463,8 +502,9 @@ select:disabled { gap: 12px; min-height: 54px; padding: 10px 12px; - color: #1f2937; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-slate-100); text-align: left; } @@ -479,7 +519,7 @@ select:disabled { } .fee-option span:last-child { - color: #475467; + color: var(--oms-slate-500); font-size: 13px; text-align: right; } @@ -495,7 +535,7 @@ select:disabled { .fee-option small, .wallet-option small { margin-top: 3px; - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; } @@ -503,13 +543,14 @@ select:disabled { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; - color: #344054; + color: var(--oms-slate-800); + font-family: var(--oms-font-mono); font-size: 12px; } .wallet-option-action { justify-self: end; - color: #1d4ed8; + color: var(--oms-brand); font-size: 13px; font-weight: 800; } @@ -522,9 +563,9 @@ select:disabled { output { min-height: 42px; padding: 11px 12px; - border-radius: 6px; - color: #344054; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; } @@ -535,7 +576,7 @@ output { } .wallet span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 13px; font-weight: 700; } @@ -544,9 +585,10 @@ output { min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; - border-radius: 6px; - background: #101828; - color: #dbeafe; + border-radius: 12px; + background: var(--oms-slate-950); + color: var(--oms-purple-100); + font-family: var(--oms-font-mono); } .session-info { @@ -558,9 +600,9 @@ output { .session-info div { min-width: 0; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .session-info span, @@ -571,14 +613,14 @@ output { } .session-info span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } .session-info strong { margin-top: 4px; - color: #1f2937; + color: var(--oms-ink); font-size: 13px; } @@ -591,19 +633,20 @@ output { overflow-wrap: anywhere; margin: 0; padding: 10px 12px; - border-radius: 6px; - background: #101828; - color: #dbeafe; + border-radius: 12px; + background: var(--oms-slate-950); + color: var(--oms-purple-100); + font-family: var(--oms-font-mono); } .result-label { - color: #98a2b3; + color: var(--oms-slate-400); font-size: 12px; font-weight: 800; } .result-value { - color: #7dd3fc; + color: var(--oms-purple-300); } .result-block { @@ -612,7 +655,7 @@ output { } .result-block a { - color: #1d4ed8; + color: var(--oms-brand); font-size: 14px; font-weight: 700; text-decoration: none; @@ -629,17 +672,17 @@ output { display: grid; place-items: center; padding: 20px; - background: rgb(16 24 40 / 48%); + background: rgb(9 6 36 / 52%); } .modal { width: min(100%, 420px); display: grid; gap: 14px; - padding: 22px; - border-radius: 8px; - background: #ffffff; - box-shadow: 0 22px 64px rgb(16 24 40 / 28%); + padding: 24px; + border-radius: 24px; + background: var(--oms-surface); + box-shadow: 0 30px 80px rgb(9 6 36 / 28%); } .modal h2, @@ -648,33 +691,34 @@ output { } .modal h2 { - color: #101828; + color: var(--oms-ink); font-size: 21px; + font-weight: 700; line-height: 1.25; } .modal p { - color: #475467; + color: var(--oms-muted-ink); font-size: 14px; line-height: 1.5; } .modal-detail { padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); overflow-wrap: anywhere; } .modal-detail strong { - color: #1f2937; + color: var(--oms-ink); } .modal-hint { padding: 10px 12px; - border-radius: 6px; - background: #eef2f7; + border-radius: 12px; + background: var(--oms-slate-100); } .modal-actions { diff --git a/examples/shared/oms-tokens.css b/examples/shared/oms-tokens.css new file mode 100644 index 0000000..fd33cbd --- /dev/null +++ b/examples/shared/oms-tokens.css @@ -0,0 +1,72 @@ +/* + * OMS design-system tokens — single source of truth for example app styling. + * Mirrors `oms-sdk-design-system`'s omsTokens. The example `styles.css` files + * import this file and must reference these `--oms-*` variables instead of + * hardcoding hex/radius values. Update tokens here, not per-app. + */ +:root { + /* slate scale */ + --oms-slate-50: #f6f6fc; + --oms-slate-100: #eef0f9; + --oms-slate-200: #dfe3f0; + --oms-slate-300: #c8cfe1; + --oms-slate-400: #929eba; + --oms-slate-500: #64708f; + --oms-slate-800: #222744; + --oms-slate-900: #141635; + --oms-slate-950: #090624; + + /* purple scale */ + --oms-purple-50: #f6f3fb; + --oms-purple-100: #eae4f5; + --oms-purple-200: #d5c4f2; + --oms-purple-300: #b78eef; + --oms-purple-500: #670de5; + --oms-purple-700: #400a8e; + + /* red scale */ + --oms-red-50: #fef2f2; + --oms-red-100: #fee2e2; + --oms-red-200: #fecaca; + --oms-red-400: #f87171; + --oms-red-500: #ef4444; + --oms-red-600: #dc2626; + --oms-red-700: #b91c1c; + --oms-red-800: #991b1b; + + /* status scales */ + --oms-emerald-50: #ecfdf5; + --oms-emerald-200: #a7f3d0; + --oms-emerald-700: #047857; + --oms-orange-50: #fff7ed; + --oms-orange-200: #fed7aa; + --oms-amber-700: #b45309; + + /* semantic */ + --oms-page: #f6f6fc; + --oms-surface: #ffffff; + --oms-brand: #670de5; + --oms-ink: #141635; + --oms-muted-ink: #64708f; + --oms-border: #c8cfe1; + + /* radius scale */ + --oms-radius-button: 8px; + --oms-radius-button-large: 12px; + --oms-radius-input: 12px; + --oms-radius-badge: 16px; + --oms-radius-card: 24px; + --oms-radius-pill: 999px; + + /* typography */ + --oms-font: 'Fustat', 'Inter', system-ui, sans-serif; + --oms-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; + + /* focus rings */ + --oms-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--oms-purple-300); + --oms-input-focus: 0 0 0 4px rgb(103 13 229 / 15%); + + color: var(--oms-ink); + background: var(--oms-page); + font-family: var(--oms-font); +} diff --git a/examples/trails-actions/index.html b/examples/trails-actions/index.html index 2ddb79f..1496bbe 100644 --- a/examples/trails-actions/index.html +++ b/examples/trails-actions/index.html @@ -3,6 +3,12 @@ + + + Trails Actions React Example diff --git a/examples/trails-actions/src/styles.css b/examples/trails-actions/src/styles.css index fce6d68..bc6df53 100644 --- a/examples/trails-actions/src/styles.css +++ b/examples/trails-actions/src/styles.css @@ -1,10 +1,5 @@ -:root { - color: #202124; - background: #f7f8fa; - font-family: - Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - sans-serif; -} +/* Design tokens live in one place — see examples/shared/oms-tokens.css. */ +@import url("../../shared/oms-tokens.css"); * { box-sizing: border-box; @@ -32,30 +27,34 @@ select { display: grid; gap: 18px; padding: 28px; - border: 1px solid #dde2e8; - border-radius: 8px; - background: #ffffff; - box-shadow: 0 16px 48px rgb(20 28 38 / 10%); + border: 1px solid var(--oms-slate-200); + border-radius: 24px; + background: var(--oms-surface); + box-shadow: 0 24px 60px rgb(20 16 53 / 10%); } .eyebrow { margin: 0 0 6px; - color: #5f6c7b; + color: var(--oms-brand); font-size: 13px; font-weight: 700; + letter-spacing: 0.04em; text-transform: uppercase; } h1 { margin: 0; + color: var(--oms-ink); font-size: 28px; + font-weight: 700; line-height: 1.15; } .section-title { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; + font-weight: 700; line-height: 1.25; } @@ -67,9 +66,9 @@ h1 { label { display: grid; gap: 8px; - color: #374151; + color: var(--oms-slate-900); font-size: 14px; - font-weight: 650; + font-weight: 600; } .checkbox-row { @@ -78,16 +77,16 @@ label { gap: 10px; min-height: 44px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .checkbox-row input { width: 18px; min-height: 18px; margin: 0; - accent-color: #1d4ed8; + accent-color: var(--oms-brand); } .checkbox-row span { @@ -111,9 +110,9 @@ label { gap: 12px; min-height: 44px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .session-lifetime-option > span { @@ -125,13 +124,13 @@ label { } .session-lifetime-copy strong { - color: #374151; + color: var(--oms-slate-900); font-size: 14px; line-height: 1.25; } .session-lifetime-copy small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 600; line-height: 1.35; @@ -162,7 +161,7 @@ label { } .session-lifetime-option small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } @@ -175,10 +174,10 @@ label { .field-hint { min-height: 42px; padding: 11px 12px; - border-radius: 6px; + border-radius: 12px; margin: 0; - color: #344054; - background: #eef2f7; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; } @@ -191,49 +190,87 @@ select { width: 100%; min-height: 44px; padding: 10px 12px; - border: 1px solid #cbd3dd; - border-radius: 6px; - color: #111827; - background: #ffffff; + border: 1px solid var(--oms-slate-300); + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-surface); + transition: + border-color 160ms ease, + box-shadow 160ms ease; } input:focus, select:focus { - outline: 2px solid #7aa7ff; - outline-offset: 1px; - border-color: #6b9dff; + outline: none; + border-color: var(--oms-slate-400); + box-shadow: var(--oms-input-focus); } input:disabled { - color: #667085; - background: #eef2f7; + color: var(--oms-muted-ink); + background: var(--oms-slate-100); } button { min-height: 44px; - border: 0; - border-radius: 6px; + border: 1px solid transparent; + border-radius: 12px; padding: 10px 14px; - color: #ffffff; - background: #1d4ed8; + color: var(--oms-surface); + background: var(--oms-slate-950); font-weight: 700; cursor: pointer; + transition: + background-color 160ms ease, + border-color 160ms ease, + box-shadow 160ms ease; +} + +button:hover:not(:disabled) { + background: var(--oms-slate-800); +} + +button:active:not(:disabled) { + background: var(--oms-purple-700); +} + +button:focus-visible { + outline: none; + box-shadow: var(--oms-focus-ring); } button.secondary { - color: #243044; - background: #e6ebf2; + color: var(--oms-slate-950); + background: transparent; + border-color: var(--oms-slate-500); +} + +button.secondary:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-950); +} + +button.secondary:active:not(:disabled) { + background: var(--oms-purple-100); + border-color: var(--oms-purple-200); } button.subtle { - color: #475467; + color: var(--oms-muted-ink); background: transparent; - border: 1px solid #d8dee8; + border: 1px solid var(--oms-slate-300); +} + +button.subtle:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-400); } button:disabled { cursor: not-allowed; - background: #a7b1c2; + color: var(--oms-slate-400); + background: var(--oms-slate-200); + border-color: transparent; } .actions { @@ -247,7 +284,7 @@ button:disabled { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; - color: #667085; + color: var(--oms-muted-ink); font-size: 13px; font-weight: 700; } @@ -256,29 +293,31 @@ button:disabled { .divider::after { content: ""; height: 1px; - background: #d8dee8; + background: var(--oms-slate-300); } .tool { display: grid; gap: 12px; padding: 16px; - border: 1px solid #e1e6ee; - border-radius: 8px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 16px; + background: var(--oms-slate-50); } .tool h2 { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; + font-weight: 700; line-height: 1.25; } .tool h3 { margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 15px; + font-weight: 700; line-height: 1.25; } @@ -291,15 +330,15 @@ button:disabled { .collapsible-tool summary { min-height: 52px; padding: 16px; - color: #1f2937; + color: var(--oms-ink); font-size: 17px; - font-weight: 800; + font-weight: 700; line-height: 1.25; cursor: pointer; } .collapsible-tool summary::marker { - color: #667085; + color: var(--oms-muted-ink); } .collapsible-content { @@ -330,19 +369,19 @@ button:disabled { display: grid; gap: 4px; padding: 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #ffffff; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-surface); } .balance-panel span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } .balance-panel strong { - color: #1f2937; + color: var(--oms-ink); font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; @@ -362,9 +401,9 @@ button:disabled { .network-meta { min-width: 48px; padding: 4px 8px; - border-radius: 6px; - color: #ffffff; - background: #1d4ed8; + border-radius: 16px; + color: var(--oms-surface); + background: var(--oms-brand); font-size: 12px; font-weight: 800; line-height: 1.2; @@ -374,10 +413,10 @@ button:disabled { .metadata-pill { min-width: 48px; padding: 4px 8px; - border: 1px solid #d8dee8; - border-radius: 6px; - color: #475467; - background: #eef2f7; + border: 1px solid var(--oms-slate-300); + border-radius: 16px; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 12px; font-weight: 800; line-height: 1.2; @@ -391,7 +430,7 @@ button:disabled { display: grid; place-items: center; padding: 20px; - background: rgb(16 24 40 / 52%); + background: rgb(9 6 36 / 55%); } .modal-backdrop { @@ -401,17 +440,17 @@ button:disabled { display: grid; place-items: center; padding: 20px; - background: rgb(16 24 40 / 55%); + background: rgb(9 6 36 / 55%); } .modal { width: min(100%, 420px); display: grid; gap: 12px; - padding: 22px; - border-radius: 8px; - background: #ffffff; - box-shadow: 0 22px 70px rgb(20 28 38 / 28%); + padding: 24px; + border-radius: 24px; + background: var(--oms-surface); + box-shadow: 0 30px 80px rgb(9 6 36 / 28%); } .modal h2, @@ -420,25 +459,26 @@ button:disabled { } .modal h2 { - color: #1f2937; + color: var(--oms-ink); font-size: 20px; + font-weight: 700; line-height: 1.25; } .modal p { - color: #475467; + color: var(--oms-muted-ink); font-size: 14px; line-height: 1.5; } .modal-detail { padding: 10px 12px; - border-radius: 6px; - background: #eef2f7; + border-radius: 12px; + background: var(--oms-slate-100); } .modal-detail strong { - color: #1f2937; + color: var(--oms-ink); overflow-wrap: anywhere; } @@ -459,7 +499,7 @@ button:disabled { display: grid; gap: 10px; overflow: auto; - box-shadow: 0 22px 70px rgb(20 28 38 / 28%); + box-shadow: 0 30px 80px rgb(9 6 36 / 28%); } .fee-option-list { @@ -475,8 +515,9 @@ button:disabled { gap: 12px; min-height: 54px; padding: 10px 12px; - color: #1f2937; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-slate-100); text-align: left; } @@ -491,7 +532,7 @@ button:disabled { } .fee-option span:last-child { - color: #475467; + color: var(--oms-slate-500); font-size: 13px; text-align: right; } @@ -507,7 +548,7 @@ button:disabled { .fee-option small, .wallet-option small { margin-top: 3px; - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; } @@ -515,13 +556,14 @@ button:disabled { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; - color: #344054; + color: var(--oms-slate-800); + font-family: var(--oms-font-mono); font-size: 12px; } .wallet-option-action { justify-self: end; - color: #1d4ed8; + color: var(--oms-brand); font-size: 13px; font-weight: 800; } @@ -534,9 +576,9 @@ button:disabled { output { min-height: 42px; padding: 11px 12px; - border-radius: 6px; - color: #344054; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; } @@ -547,7 +589,7 @@ output { } .wallet span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 13px; font-weight: 700; } @@ -559,30 +601,37 @@ output { gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; - border-radius: 6px; - background: #101828; + border-radius: 12px; + background: var(--oms-slate-950); } .wallet-address-row code { min-width: 0; overflow-wrap: anywhere; - color: #dbeafe; + color: var(--oms-purple-100); + font-family: var(--oms-font-mono); font-size: 13px; } .wallet-copy { min-height: 32px; padding: 6px 10px; - border: 1px solid rgb(219 234 254 / 22%); - border-radius: 6px; - color: #ffffff; - background: #1d4ed8; + border: 1px solid rgb(234 228 245 / 22%); + border-radius: 12px; + color: var(--oms-surface); + background: var(--oms-brand); font-size: 13px; font-weight: 800; } +.wallet-copy:hover:not(:disabled) { + background: var(--oms-purple-700); +} + .wallet-copy:disabled { - background: #475467; + color: var(--oms-slate-400); + background: var(--oms-slate-800); + border-color: transparent; } .session-info { @@ -594,9 +643,9 @@ output { .session-info div { min-width: 0; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .session-info span, @@ -607,14 +656,14 @@ output { } .session-info span { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; } .session-info strong { margin-top: 4px; - color: #1f2937; + color: var(--oms-ink); font-size: 13px; } @@ -627,19 +676,20 @@ output { overflow-wrap: anywhere; margin: 0; padding: 10px 12px; - border-radius: 6px; - background: #101828; - color: #dbeafe; + border-radius: 12px; + background: var(--oms-slate-950); + color: var(--oms-purple-100); + font-family: var(--oms-font-mono); } .result-label { - color: #98a2b3; + color: var(--oms-slate-400); font-size: 12px; font-weight: 800; } .result-value { - color: #7dd3fc; + color: var(--oms-purple-300); } .result-block { @@ -648,7 +698,7 @@ output { } .result-block a { - color: #1d4ed8; + color: var(--oms-brand); font-size: 14px; font-weight: 700; text-decoration: none; @@ -673,7 +723,7 @@ output { } .prepared-summary dt { - color: #5f6c7b; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 800; white-space: nowrap; @@ -682,7 +732,7 @@ output { .prepared-summary dd { min-width: 0; margin: 0; - color: #1f2937; + color: var(--oms-ink); font-size: 13px; font-weight: 700; } @@ -691,6 +741,7 @@ output { display: block; max-width: 100%; overflow-x: auto; + font-family: var(--oms-font-mono); white-space: nowrap; } @@ -705,9 +756,9 @@ output { align-items: center; gap: 10px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #ffffff; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-surface); } .position-row div { @@ -723,7 +774,7 @@ output { } .position-row small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; } @@ -747,9 +798,10 @@ output { overflow: auto; margin: 0; padding: 10px 12px; - border-radius: 6px; - color: #dbeafe; - background: #101828; + border-radius: 12px; + color: var(--oms-purple-100); + background: var(--oms-slate-950); + font-family: var(--oms-font-mono); white-space: pre-wrap; } diff --git a/examples/wagmi/index.html b/examples/wagmi/index.html index 14f741d..a4006e1 100644 --- a/examples/wagmi/index.html +++ b/examples/wagmi/index.html @@ -3,6 +3,12 @@ + + + OMS Wallet Wagmi Example diff --git a/examples/wagmi/src/styles.css b/examples/wagmi/src/styles.css index 6d9fd0d..8a81e18 100644 --- a/examples/wagmi/src/styles.css +++ b/examples/wagmi/src/styles.css @@ -1,10 +1,5 @@ -:root { - color: #202124; - background: #f7f8fa; - font-family: - Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - sans-serif; -} +/* Design tokens live in one place — see examples/shared/oms-tokens.css. */ +@import url("../../shared/oms-tokens.css"); * { box-sizing: border-box; @@ -32,10 +27,10 @@ select { display: grid; gap: 18px; padding: 28px; - border: 1px solid #dde2e8; - border-radius: 8px; - background: #ffffff; - box-shadow: 0 16px 48px rgb(20 28 38 / 10%); + border: 1px solid var(--oms-slate-200); + border-radius: 24px; + background: var(--oms-surface); + box-shadow: 0 24px 60px rgb(20 16 53 / 10%); } h1, @@ -47,26 +42,31 @@ p { .eyebrow { margin: 0 0 6px; - color: #5f6c7b; + color: var(--oms-brand); font-size: 13px; font-weight: 700; + letter-spacing: 0.04em; text-transform: uppercase; } h1 { + color: var(--oms-ink); font-size: 28px; + font-weight: 700; line-height: 1.15; } h2 { - color: #1f2937; + color: var(--oms-ink); font-size: 17px; + font-weight: 700; line-height: 1.25; } h3 { - color: #1f2937; + color: var(--oms-ink); font-size: 15px; + font-weight: 700; line-height: 1.25; } @@ -74,7 +74,7 @@ h3 { display: grid; gap: 14px; padding-top: 20px; - border-top: 1px solid #e6ebf2; + border-top: 1px solid var(--oms-slate-200); } .tool-header { @@ -108,11 +108,22 @@ h3 { .auth-method-button { width: 100%; - color: #253044; - background: #e8edf4; + color: var(--oms-slate-950); + background: transparent; + border: 1px solid var(--oms-slate-500); font-weight: 800; } +.auth-method-button:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-950); +} + +.auth-method-button:active:not(:disabled) { + background: var(--oms-purple-100); + border-color: var(--oms-purple-200); +} + .session-auth-button { display: grid; justify-items: center; @@ -127,8 +138,9 @@ h3 { } .auth-method-button:disabled { - color: #ffffff; - background: #a7b1c2; + color: var(--oms-slate-400); + background: var(--oms-slate-200); + border-color: transparent; } .divider { @@ -136,7 +148,7 @@ h3 { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; - color: #667085; + color: var(--oms-muted-ink); font-size: 13px; font-weight: 700; } @@ -145,7 +157,7 @@ h3 { .divider::after { content: ""; height: 1px; - background: #d8dee8; + background: var(--oms-slate-300); } .actions { @@ -161,7 +173,7 @@ h3 { .operation-example + .operation-example { padding-top: 16px; - border-top: 1px solid #e6ebf2; + border-top: 1px solid var(--oms-slate-200); } .trails-widget-launcher > div, @@ -178,10 +190,10 @@ h3 { .field-hint { min-height: 42px; padding: 11px 12px; - border-radius: 6px; + border-radius: 12px; margin: 0; - color: #344054; - background: #eef2f7; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; overflow-wrap: anywhere; } @@ -189,9 +201,9 @@ h3 { label { display: grid; gap: 8px; - color: #374151; + color: var(--oms-slate-900); font-size: 14px; - font-weight: 650; + font-weight: 600; } input, @@ -199,39 +211,72 @@ select { width: 100%; min-height: 44px; padding: 10px 12px; - border: 1px solid #cbd3dd; - border-radius: 6px; - color: #111827; - background: #ffffff; + border: 1px solid var(--oms-slate-300); + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-surface); font-weight: 400; + transition: + border-color 160ms ease, + box-shadow 160ms ease; } input:focus, select:focus { - outline: 2px solid #7aa7ff; - outline-offset: 1px; - border-color: #6b9dff; + outline: none; + border-color: var(--oms-slate-400); + box-shadow: var(--oms-input-focus); } button { min-height: 44px; - border: 0; - border-radius: 6px; + border: 1px solid transparent; + border-radius: 12px; padding: 10px 14px; - color: #ffffff; - background: #1d4ed8; + color: var(--oms-surface); + background: var(--oms-slate-950); font-weight: 700; cursor: pointer; + transition: + background-color 160ms ease, + border-color 160ms ease, + box-shadow 160ms ease; +} + +button:hover:not(:disabled) { + background: var(--oms-slate-800); +} + +button:active:not(:disabled) { + background: var(--oms-purple-700); +} + +button:focus-visible { + outline: none; + box-shadow: var(--oms-focus-ring); } button.secondary { - color: #243044; - background: #e6ebf2; + color: var(--oms-slate-950); + background: transparent; + border-color: var(--oms-slate-500); +} + +button.secondary:hover:not(:disabled) { + background: transparent; + border-color: var(--oms-slate-950); +} + +button.secondary:active:not(:disabled) { + background: var(--oms-purple-100); + border-color: var(--oms-purple-200); } button:disabled { cursor: not-allowed; - background: #a7b1c2; + color: var(--oms-slate-400); + background: var(--oms-slate-200); + border-color: transparent; } .connector-grid { @@ -245,15 +290,24 @@ button:disabled { justify-items: start; gap: 3px; min-height: 64px; - color: #263242; - border: 1px solid #d8dee8; - background: #f7f9fc; + color: var(--oms-slate-950); + border: 1px solid var(--oms-slate-300); + background: var(--oms-slate-50); +} + +.connector-button:hover:not(:disabled) { + background: var(--oms-slate-50); + border-color: var(--oms-slate-400); } .connector-button.active { - color: #ffffff; - border-color: #1d4ed8; - background: #1d4ed8; + color: var(--oms-surface); + border-color: transparent; + background: var(--oms-slate-950); +} + +.connector-button.active:hover:not(:disabled) { + background: var(--oms-slate-800); } .connector-button small { @@ -274,14 +328,14 @@ button:disabled { gap: 5px; min-height: 64px; padding: 10px 12px; - border: 1px solid #e1e6ee; - border-radius: 6px; - background: #fbfcfe; + border: 1px solid var(--oms-slate-200); + border-radius: 12px; + background: var(--oms-slate-50); } .summary-grid span, .result span { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; @@ -290,7 +344,7 @@ button:disabled { .summary-grid strong { min-width: 0; overflow-wrap: anywhere; - color: #1f2937; + color: var(--oms-ink); font-size: 14px; } @@ -309,9 +363,9 @@ button:disabled { .network-meta { min-width: 48px; padding: 4px 8px; - border-radius: 6px; - color: #ffffff; - background: #1d4ed8; + border-radius: 16px; + color: var(--oms-surface); + background: var(--oms-brand); font-size: 12px; font-weight: 800; line-height: 1.2; @@ -325,7 +379,7 @@ button:disabled { display: grid; place-items: center; padding: 20px; - background: rgb(16 24 40 / 52%); + background: rgb(9 6 36 / 55%); } .fee-options { @@ -333,12 +387,12 @@ button:disabled { max-height: min(640px, calc(100vh - 40px)); display: grid; gap: 10px; - padding: 16px; - border: 1px solid #e1e6ee; - border-radius: 8px; - background: #fbfcfe; + padding: 24px; + border: 1px solid var(--oms-slate-200); + border-radius: 24px; + background: var(--oms-surface); overflow: auto; - box-shadow: 0 22px 70px rgb(20 28 38 / 28%); + box-shadow: 0 30px 80px rgb(9 6 36 / 28%); } .fee-option-list { @@ -353,8 +407,9 @@ button:disabled { gap: 12px; min-height: 54px; padding: 10px 12px; - color: #1f2937; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-ink); + background: var(--oms-slate-100); text-align: left; } @@ -363,7 +418,7 @@ button:disabled { } .fee-option span:last-child { - color: #475467; + color: var(--oms-slate-500); font-size: 13px; text-align: right; } @@ -375,7 +430,7 @@ button:disabled { } .fee-option small { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; } @@ -384,8 +439,8 @@ button:disabled { gap: 6px; min-height: 54px; padding: 10px 12px; - border-radius: 6px; - background: #f3f6fb; + border-radius: 12px; + background: var(--oms-slate-50); overflow-wrap: anywhere; } @@ -393,12 +448,12 @@ button:disabled { display: grid; gap: 6px; padding: 10px 12px; - border-radius: 6px; - background: #f3f6fb; + border-radius: 12px; + background: var(--oms-slate-50); } .typed-data-preview span { - color: #667085; + color: var(--oms-muted-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; @@ -408,7 +463,8 @@ button:disabled { min-width: 0; max-height: 220px; overflow: auto; - color: #1f2937; + color: var(--oms-ink); + font-family: var(--oms-font-mono); font-size: 12px; line-height: 1.45; white-space: pre; @@ -417,7 +473,8 @@ button:disabled { .result code, .result a { min-width: 0; - color: #1d4ed8; + color: var(--oms-brand); + font-family: var(--oms-font-mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; @@ -427,9 +484,9 @@ output { display: block; min-height: 42px; padding: 11px 12px; - border-radius: 6px; - color: #344054; - background: #eef2f7; + border-radius: 12px; + color: var(--oms-slate-800); + background: var(--oms-slate-100); font-size: 14px; overflow-wrap: anywhere; } From 8a7998a0bad29c93891f616adea7a94614dec501 Mon Sep 17 00:00:00 2001 From: Tolgahan Date: Fri, 5 Jun 2026 13:58:05 +0300 Subject: [PATCH 2/2] Fix unreadable hover on option buttons .fee-option/.wallet-option are light-background buttons; the generic button:hover/:active darkened them while text stayed dark. Add option- specific hover (slate-200) and active (purple-100) overrides. --- examples/react/src/styles.css | 11 +++++++++++ examples/trails-actions/src/styles.css | 11 +++++++++++ examples/wagmi/src/styles.css | 9 +++++++++ 3 files changed, 31 insertions(+) diff --git a/examples/react/src/styles.css b/examples/react/src/styles.css index 1cd808c..f7a6637 100644 --- a/examples/react/src/styles.css +++ b/examples/react/src/styles.css @@ -513,6 +513,17 @@ select:disabled { row-gap: 6px; } +/* Keep light-background option buttons readable; override the generic button hover/active. */ +.fee-option:hover:not(:disabled), +.wallet-option:hover:not(:disabled) { + background: var(--oms-slate-200); +} + +.fee-option:active:not(:disabled), +.wallet-option:active:not(:disabled) { + background: var(--oms-purple-100); +} + .fee-option span, .wallet-option span { min-width: 0; diff --git a/examples/trails-actions/src/styles.css b/examples/trails-actions/src/styles.css index bc6df53..4d7b784 100644 --- a/examples/trails-actions/src/styles.css +++ b/examples/trails-actions/src/styles.css @@ -526,6 +526,17 @@ button:disabled { row-gap: 6px; } +/* Keep light-background option buttons readable; override the generic button hover/active. */ +.fee-option:hover:not(:disabled), +.wallet-option:hover:not(:disabled) { + background: var(--oms-slate-200); +} + +.fee-option:active:not(:disabled), +.wallet-option:active:not(:disabled) { + background: var(--oms-purple-100); +} + .fee-option span, .wallet-option span { min-width: 0; diff --git a/examples/wagmi/src/styles.css b/examples/wagmi/src/styles.css index 8a81e18..281fa2c 100644 --- a/examples/wagmi/src/styles.css +++ b/examples/wagmi/src/styles.css @@ -413,6 +413,15 @@ button:disabled { text-align: left; } +/* Keep light-background option buttons readable; override the generic button hover/active. */ +.fee-option:hover:not(:disabled) { + background: var(--oms-slate-200); +} + +.fee-option:active:not(:disabled) { + background: var(--oms-purple-100); +} + .fee-option span { min-width: 0; }