@calimero-network/mero-react 2.0.1 → 2.1.0

package/README.md

@@ -234,6 +234,68 @@ import {
 } from '@calimero-network/mero-react';
 ```
 
+## Theming
+
+`ConnectButton` and `LoginModal` default to the green Calimero palette used in admin-dashboard, tauri-app, and app-registry. Pass nothing for the default — provide a partial `MeroTheme` to override any subset.
+
+```tsx
+import { ConnectButton } from '@calimero-network/mero-react';
+
+// Default green palette — no theme prop needed
+<ConnectButton />
+
+// Override only what you want; the rest stay default
+<ConnectButton
+  theme={{
+    primary: '#ff4081',
+    primaryHover: '#e91e63',
+    primaryText: '#ffffff',
+  }}
+/>
+```
+
+The same theme is forwarded to the embedded `LoginModal` and is also exposed as CSS variables on the component root, so a global stylesheet works too:
+
+```css
+:root {
+  --mero-accent: #ff4081;
+  --mero-accent-hover: #e91e63;
+}
+```
+
+`MeroTheme` keys (all optional): `primary`, `primaryHover`, `primaryText`, `background`, `backgroundSecondary`, `backgroundTertiary`, `border`, `text`, `textSecondary`, `error`, `overlay`, `radius`. Defaults: `#a5ff11` / `#8ed40d` / `#0d1117` / `#161b22` / `#1c2128` / `#30363d` / `#e6edf3` / `#8b949e` / `#ff6b6b` / `rgba(0,0,0,0.75)` / `8px`.
+
+Helpers: `defaultMeroTheme` (the full default palette), `resolveMeroTheme(partial?)` (merges a partial with defaults), and `themeToCssVars(resolved)` (returns a `CSSProperties` map of `--mero-*` variables for applying to your own container) are exported for advanced use.
+
+**Browser support**: hover-state and modal tints use CSS [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix), which requires Chrome 111+, Safari 16.2+, or Firefox 113+ (all 2023). On older browsers the bundled `styles.css` falls back to the default green `rgba()` for the button hover; the modal renders without subtle tints but is otherwise fully functional.
+
+### `<ConnectButton>` props
+
+```tsx
+// Square 40×40 icon button — logo only, no text
+<ConnectButton logoOnly />
+
+// Custom label (shorthand: bare string overrides the disconnected label)
+<ConnectButton label="Sign in with Calimero" />
+
+// Per-state label overrides
+<ConnectButton
+  label={{
+    connect: 'Sign in',
+    connected: 'Signed in',
+    reconnecting: 'Reconnecting…',
+  }}
+/>
+```
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `connectionType` | `ConnectionType \| CustomConnectionConfig` | `RemoteAndLocal` | Which options the embedded LoginModal shows. `Custom` skips the modal. |
+| `theme` | `MeroTheme` | — | Partial token override. |
+| `logoOnly` | `boolean` | `false` | Render only the Calimero logo (square button). The label is still announced via `aria-label`. |
+| `label` | `string \| { connect?, connected?, reconnecting? }` | — | Override default labels. Bare string targets the disconnected state. |
+| `className` / `style` | — | — | Forwarded to the inner `<button>`. |
+
 ## Enums
 
 ```tsx
@@ -260,6 +322,8 @@ import type {
   ApplicationContextRecord,// { contextId, applicationId }
   ContextDiscoveryOptions, // options for useContextDiscovery
   ContextDiscoveryState,   // return type of useContextDiscovery
+  MeroTheme,               // partial theme override for ConnectButton / LoginModal
+  ResolvedMeroTheme,       // fully populated theme returned by resolveMeroTheme()
 } from '@calimero-network/mero-react';
 ```
 
@@ -272,6 +336,9 @@ MeroProvider, useMero, MeroContext
 // Components (mero-react)
 ConnectButton, LoginModal
 
+// Theming (mero-react)
+MeroTheme, ResolvedMeroTheme, defaultMeroTheme, resolveMeroTheme, themeToCssVars
+
 // Enums (mero-react)
 AppMode, ConnectionType