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..f7a6637 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 var(--oms-slate-300);
+}
+
+button.subtle:hover:not(:disabled) {
background: transparent;
- border: 1px solid #d8dee8;
+ 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;
}
@@ -473,13 +513,24 @@ 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;
}
.fee-option span:last-child {
- color: #475467;
+ color: var(--oms-slate-500);
font-size: 13px;
text-align: right;
}
@@ -495,7 +546,7 @@ select:disabled {
.fee-option small,
.wallet-option small {
margin-top: 3px;
- color: #667085;
+ color: var(--oms-muted-ink);
font-size: 12px;
}
@@ -503,13 +554,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 +574,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 +587,7 @@ output {
}
.wallet span {
- color: #5f6c7b;
+ color: var(--oms-muted-ink);
font-size: 13px;
font-weight: 700;
}
@@ -544,9 +596,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 +611,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 +624,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 +644,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 +666,7 @@ output {
}
.result-block a {
- color: #1d4ed8;
+ color: var(--oms-brand);
font-size: 14px;
font-weight: 700;
text-decoration: none;
@@ -629,17 +683,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 +702,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..4d7b784 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 var(--oms-slate-300);
+}
+
+button.subtle:hover:not(:disabled) {
background: transparent;
- border: 1px solid #d8dee8;
+ 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;
}
@@ -485,13 +526,24 @@ 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;
}
.fee-option span:last-child {
- color: #475467;
+ color: var(--oms-slate-500);
font-size: 13px;
text-align: right;
}
@@ -507,7 +559,7 @@ button:disabled {
.fee-option small,
.wallet-option small {
margin-top: 3px;
- color: #667085;
+ color: var(--oms-muted-ink);
font-size: 12px;
}
@@ -515,13 +567,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 +587,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 +600,7 @@ output {
}
.wallet span {
- color: #5f6c7b;
+ color: var(--oms-muted-ink);
font-size: 13px;
font-weight: 700;
}
@@ -559,30 +612,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 +654,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 +667,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 +687,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 +709,7 @@ output {
}
.result-block a {
- color: #1d4ed8;
+ color: var(--oms-brand);
font-size: 14px;
font-weight: 700;
text-decoration: none;
@@ -673,7 +734,7 @@ output {
}
.prepared-summary dt {
- color: #5f6c7b;
+ color: var(--oms-muted-ink);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
@@ -682,7 +743,7 @@ output {
.prepared-summary dd {
min-width: 0;
margin: 0;
- color: #1f2937;
+ color: var(--oms-ink);
font-size: 13px;
font-weight: 700;
}
@@ -691,6 +752,7 @@ output {
display: block;
max-width: 100%;
overflow-x: auto;
+ font-family: var(--oms-font-mono);
white-space: nowrap;
}
@@ -705,9 +767,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 +785,7 @@ output {
}
.position-row small {
- color: #667085;
+ color: var(--oms-muted-ink);
font-size: 12px;
}
@@ -747,9 +809,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..281fa2c 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,17 +407,27 @@ 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;
}
+/* 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;
}
.fee-option span:last-child {
- color: #475467;
+ color: var(--oms-slate-500);
font-size: 13px;
text-align: right;
}
@@ -375,7 +439,7 @@ button:disabled {
}
.fee-option small {
- color: #667085;
+ color: var(--oms-muted-ink);
font-size: 12px;
}
@@ -384,8 +448,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 +457,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 +472,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 +482,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 +493,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;
}