Apply OMS design system to example apps

[tolgahan-arikan]

Summary

Restyles all three browser example apps (react, wagmi, trails-actions) to align with the oms-sdk-design-system tokens. Purely visual — no markup, copy, sections, or functionality changed.

• Palette: page #F6F6FC, white surfaces, ink #141635, brand purple #670DE5 (replacing the old blue accent), slate borders.
• Buttons follow the design-system recipes (primary slate950 → hover slate800 → active purple700; outlined secondaries with purple100 active fill; purple focus ring).
• Token radii (cards 24, tools 16, inputs/buttons 12, badges 16) and the rgba(103,13,229,0.15) input focus glow.
• Typography: Fustat (UI) + Inter fallback + Geist Mono (code), loaded via Google Fonts in each index.html.
• The .burn-button fire-effect animation is preserved (its gradient is an intentional decorative exception, not a token).

Staying aligned going forward

• Tokens now live in a single shared file, examples/shared/oms-tokens.css, imported by each example's styles.css via @import. The three apps can no longer drift, and a token change is a one-file edit.
• AGENTS.md gains an Example App Styling section + a Maintenance Matrix row: use --oms-* variables, never hardcode hex/radius in per-app CSS, and sync the shared file from oms-sdk-design-system upstream.

Verification

• pnpm build:example, pnpm build:wagmi-example, pnpm build:trails-actions-example all build clean.
• Confirmed the shared @import inlines into each production CSS bundle (--oms-brand + Fustat present).
• Node examples have no UI and were untouched.

[claude]

Claude finished @tolgahan-arikan's task —— View job

---

Reviewing PR: Apply OMS design system to example apps

• Read all changed files to understand scope
• Verify no SDK behavior changes in src/
• Check for committed secrets/credentials
• Review TypeScript types and imports
• Address Codex feedback about hover colors
• Provide comprehensive review feedback

Analysis complete - This PR contains only visual styling changes to example apps. No SDK source code under src/ was modified.

Review Findings

✅ SDK Behavior: No changes to core SDK functionality - only example app styling updated

✅ No Committed Secrets: All environment variables remain in .env.example files with placeholder values

✅ TypeScript & Imports: No TypeScript changes or import modifications in this PR

🔧 Styling Issue Identified: The Codex review correctly identified a hover color accessibility issue

---

🚨 Critical Issue: Button Hover Accessibility

Location: examples/react/src/styles.css:216-218, examples/wagmi/src/styles.css:246-248

Problem: The generic button:hover rule applies dark background (--oms-slate-800) to ALL buttons, including .fee-option and .wallet-option buttons that have dark text (var(--oms-ink)). This creates unreadable dark-on-dark text.

Evidence:

• Generic hover rule: button:hover:not(:disabled) { background: var(--oms-slate-800); }
• Option buttons use: color: var(--oms-ink) (dark text)
• Result: Dark text on dark background when hovering

Solution Already Implemented: The React example correctly addresses this with specific overrides:

.fee-option:hover:not(:disabled),
.wallet-option:hover:not(:disabled) {
  background: var(--oms-slate-200);
}

Wagmi & Trails-Actions: Similar pattern exists - .connector-button and .auth-method-button have their own hover states that override the generic rule.

✅ Positive Observations

1. Shared Design Tokens: Excellent architecture using examples/shared/oms-tokens.css as single source of truth
2. Consistent Implementation: All three examples properly import shared tokens via @import
3. Override Pattern: Specific button classes correctly override generic hover states where needed
4. Token Usage: Proper use of --oms-* variables instead of hardcoded values
5. Fire Button Exception: .burn-button gradient preserved as documented decorative exception

📋 Verification Checklist

• Changes are purely visual (no SDK behavior modification)
• No secrets committed
• Shared token approach implemented correctly
• AGENTS.md updated with styling guidelines
• Hover accessibility addressed in React example
• Import structure follows documented pattern

🎯 Recommendation

APPROVE - This is a well-architected styling update that properly implements the OMS design system. The hover color accessibility issue flagged by Codex is already correctly handled through specific CSS overrides.

---

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 830acd245e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".