Theme & UI Overrides

Storybook applies the RitoSwap visual system through a custom theme, global fonts, and CSS overrides.

• dapp
  • .storybook
    • RitoTheme.ts
    • manager.ts
    • manager-head.html
    • preview-head.html
    • fonts.css
    • storybook-overrides.css

RitoTheme

RitoTheme.ts defines a dark Storybook theme using RitoSwap brand colors and typography. It is applied in:

• dapp/.storybook/preview.tsx (parameters.docs.theme)
• dapp/.storybook/manager.ts (Storybook manager UI)

Fonts and head injection

• manager-head.html and preview-head.html load custom fonts from /fonts and set CSS variables.
• fonts.css sets the --font-* variables used throughout the app.

UI overrides

storybook-overrides.css fixes Storybook-specific stacking issues (e.g., the mobile nav overlay) without changing production UI behavior.