Skip to content

Apply OMS design system to example apps #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tolgahan-arikan merged 2 commits into from
Jun 5, 2026
Merged

Apply OMS design system to example apps #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
830acd2
Apply OMS design system to example apps
tolgahan-arikan Jun 5, 2026
8a7998a
Fix unreadable hover on option buttons
tolgahan-arikan Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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`) |
6 changes: 6 additions & 0 deletions examples/react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<title>OMS SDK React Example</title>
</head>
<body>
Expand Down
Loading
Loading