Files
mobile-ios/docs/color-palette.md

94 lines
3.4 KiB
Markdown

# Rosetta Color Palette
## Brand Colors
| Name | Hex | Usage |
|------|-----|-------|
| Primary Blue | `#248AE6` | Main accent, buttons, links |
| Primary Blue Dark | `#238BE6` | Dark theme primary |
| Primary Blue Pressed | `#2B7CD3` | Button pressed state |
| Primary Blue Disabled | `#9BCDFF` | Disabled state |
## Light Theme (not implemented yet)
| Token | Hex | Usage |
|-------|-----|-------|
| background | `#FFFFFF` | Main background |
| backgroundSecondary | `#F2F3F5` | Grouped sections |
| surface | `#F5F5F5` | Cards, inputs |
| text | `#000000` | Primary text |
| textSecondary | `#666666` | Subtitle, caption |
| textTertiary | `#999999` | Placeholder, hint |
| border | `#E0E0E0` | Borders |
| divider | `#EEEEEE` | List separators |
| messageBubble | `#F5F5F5` | Incoming message |
| messageBubbleOwn | `#DCF8C6` | Own message (green) |
| inputBackground | `#F2F3F5` | Text input bg |
## Dark Theme (active)
| Token | Hex | Usage |
|-------|-----|-------|
| background | `#000000` | Main background (Color.black) |
| backgroundSecondary | `#2A2A2A` | Grouped sections |
| surface | `#242424` | Cards, inputs |
| text | `#FFFFFF` | Primary text |
| textSecondary | `#8E8E93` | Subtitle, caption |
| textTertiary | `#666666` | Placeholder, hint |
| border | `#2E2E2E` | Borders |
| divider | `#333333` | List separators |
| messageBubble | `#2A2A2A` | Incoming message |
| messageBubbleOwn | `#263341` | Own message (dark blue) |
| inputBackground | `#2A2A2A` | Text input bg |
## Semantic Colors
| Token | Hex | Usage |
|-------|-----|-------|
| error | `#FF3B30` | Errors, destructive |
| success | `#34C759` | Success, online |
| warning | `#FF9500` | Warnings |
| accent | `#E91E63` | Secondary accent (pink) |
| online | `#34C759` | Online indicator |
## Avatar Colors (hash-based, 11 variants — Mantine v8 "light" variant)
Rendering: dark mode = opaque `#1A1B1E` base + shade-6 at 15% opacity + shade-3 text.
Light mode = white base + shade-6 at 10% opacity + shade-6 text.
| Index | Shade-6 (tint) | Shade-3 (text dark) | Name |
|-------|---------------|---------------------|------|
| 0 | `#228be6` | `#74c0fc` | Blue |
| 1 | `#15aabf` | `#66d9e8` | Cyan |
| 2 | `#be4bdb` | `#e599f7` | Grape |
| 3 | `#40c057` | `#8ce99a` | Green |
| 4 | `#4c6ef5` | `#91a7ff` | Indigo |
| 5 | `#82c91e` | `#c0eb75` | Lime |
| 6 | `#fd7e14` | `#ffc078` | Orange |
| 7 | `#e64980` | `#faa2c1` | Pink |
| 8 | `#fa5252` | `#ffa8a8` | Red |
| 9 | `#12b886` | `#63e6be` | Teal |
| 10 | `#7950f2` | `#b197fc` | Violet |
Hash input = display name (NOT public key). Fallback when name empty = `publicKey.prefix(7)` (server sends first 7 chars as default title). Index = `abs(hashCode(input)) % 11`. Hash algorithm: `hash = (hash << 5) - hash + charCode` (same as Java's String.hashCode, 32-bit signed).
## Background Blur Solid Presets
| Name | Hex |
|------|-----|
| solid_blue | `#0D8CF4` |
| solid_green | `#4CAF50` |
| solid_orange | `#FF9800` |
| solid_red | `#E53935` |
| solid_purple | `#7C4DFF` |
| solid_teal | `#009688` |
| solid_pink | `#E91E63` |
| solid_grey | `#78909C` |
## Background Blur Gradient Presets
| Name | Start | End |
|------|-------|-----|
| grad_blue_cyan | `#2979FF` | `#00BCD4` |
| grad_green_lime | `#4CAF50` | `#CDDC39` |
| grad_orange_yellow | `#FF9800` | `#FFEB3B` |
| grad_red_pink | `#E53935` | `#FF4081` |
| grad_purple_blue | `#7C4DFF` | `#536DFE` |
| grad_teal_green | `#009688` | `#69F0AE` |
| grad_pink_magenta | `#E91E63` | `#CE93D8` |
| grad_mono | `#546E7A` | `#B0BEC5` |