Skip to content

Commit e923beb

Browse files
fadi-georgefadi-george
committed
docs: add style reference for demo apps
1 parent 08365d4 commit e923beb

1 file changed

Lines changed: 236 additions & 0 deletions

File tree

‎demo/styles.md‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
# Demo App Style Reference
2+
3+
Design spec for OneSignal SDK demo/sample apps. Values use platform-independent units (px). Adapt to the equivalent on each platform (dp on Android, pt on iOS, px in CSS, etc.).
4+
5+
## Colors
6+
7+
| Token | Value | Usage |
8+
| ----------------- | ------------------- | ------------------------------ |
9+
| oneSignalRed | `#E54B4D` | Header, primary buttons |
10+
| oneSignalGreen | `#34A853` | Logged-in / success status |
11+
| lightBackground | `#F8F9FA` | Page background |
12+
| cardBackground | `#FFFFFF` | Card surfaces |
13+
| dividerColor | `#E8EAED` | Dividers |
14+
| warningBackground | `#FFF8E1` | Guidance / warning banner card |
15+
| overlayScrim | `rgba(0,0,0,0.26)` | Loading overlay background |
16+
| sectionHeaderText | `#616161` | Section header label and icon |
17+
| subtleText | `#757575` | Toggle descriptions, secondary text |
18+
| logBackground | `#1A1B1E` | Logs view background |
19+
20+
## Spacing
21+
22+
| Token | Value | Usage |
23+
| --------------------------- | ------------------------------ | ----------------------------------------------------------- |
24+
| gap | 8 | Gap between elements inside a section |
25+
| Section spacing | 24 vertical, 16 horizontal | Gap between sections. CSS platforms can use `gap: 24` on the list container instead of per-section padding |
26+
27+
## Cards
28+
29+
| Property | Value |
30+
| --------------- | -------------------------- |
31+
| Background | cardBackground (`#FFFFFF`) |
32+
| Corner radius | 12 |
33+
| Inner padding | 12 horizontal, 12 vertical |
34+
| Outer margin | 0 (parent section handles spacing) |
35+
36+
### Card Shadow
37+
38+
Use the platform's standard light shadow (elevation 1 on Android/Flutter, a subtle `box-shadow` in CSS). No header/toolbar shadow. Also applies to the warning/guidance banner.
39+
40+
For CSS-based platforms, the equivalent shadow layers are:
41+
42+
| Layer | Offset | Blur | Spread | Color |
43+
| -------- | ------- | ---- | ------ | ------------------ |
44+
| Umbra | 0, 2 | 1 | -1 | `rgba(0,0,0,0.20)` |
45+
| Penumbra | 0, 1 | 1 | 0 | `rgba(0,0,0,0.14)` |
46+
| Ambient | 0, 1 | 3 | 0 | `rgba(0,0,0,0.12)` |
47+
48+
## Typography
49+
50+
All sizes in sp/px. Use the platform's default system font unless otherwise noted.
51+
52+
### Text Scale Reference
53+
54+
| Name | Size | Weight | Usage |
55+
| ----------- | ---- | ---------- | -------------------------------------------- |
56+
| bodyLarge | 16 | normal/400 | Radio button labels (dialogs) |
57+
| bodyMedium | 14 | normal/400 | Card row labels, toggle labels, unstacked list items, list empty state |
58+
| bodyMedium | 14 | medium/500 | Stacked list key, collapsible "N more" link |
59+
| bodySmall | 12 | normal/400 | Card row values, toggle descriptions, section headers, stacked list value |
60+
61+
### Header Bar
62+
63+
- Logo height: 22
64+
- Title text ("Sample App"): bodyMedium (14, normal/400), color white
65+
- Centered
66+
67+
### Section Headers
68+
69+
- Size: bodySmall (12)
70+
- Weight: bold
71+
- Color: sectionHeaderText
72+
- Letter spacing: 0.5
73+
- Transform: uppercase
74+
- Bottom padding: 8 (gap)
75+
- Info icon: 18, color sectionHeaderText
76+
77+
### Card Row Labels
78+
79+
- Style: bodyMedium (14) (e.g., "App ID", "Push ID", "Status")
80+
81+
### Card Row Values
82+
83+
- Style: bodySmall (12)
84+
- Font: monospace
85+
86+
### Toggle Row
87+
88+
- Label: bodyMedium (14)
89+
- Description: bodySmall (12), color subtleText
90+
91+
### Radio Button Labels (Dialogs)
92+
93+
- Style: bodyLarge (16)
94+
95+
## Buttons
96+
97+
### Primary Button
98+
99+
- Full width
100+
- Background: oneSignalRed
101+
- Text color: white
102+
- Height: 48
103+
- Corner radius: 8
104+
105+
### Destructive / Outlined Button
106+
107+
- Full width
108+
- Background: transparent
109+
- Border + text color: oneSignalRed
110+
- Height: 48
111+
- Corner radius: 8
112+
113+
## Toggle / Switch
114+
115+
- Use the platform's native switch component
116+
- Reduce extra tap-target padding where the platform allows
117+
118+
## Dialogs
119+
120+
- Horizontal inset from screen edge: 16
121+
- Vertical inset: 24
122+
123+
## Dividers
124+
125+
- Use the platform's default divider / separator (1px line, subtle grey)
126+
127+
## Text Input Fields
128+
129+
- Corner radius: 8
130+
- Content padding: 12 horizontal, 14 vertical
131+
132+
## Warning Banner
133+
134+
- Uses card styling (shadow, corner radius) with warningBackground color
135+
- Text: bodySmall (12)
136+
- Link: bodySmall (12), color oneSignalRed, weight semibold/600, no underline, no gap above
137+
138+
## List Items
139+
140+
Items displayed inside cards (e.g. tags, aliases, emails, SMS numbers). Separated by dividers (height 1). Each item has 4 vertical and 4 horizontal padding, with an optional delete icon (close/X, size 18, color sectionHeaderText) on the trailing edge.
141+
142+
### Stacked (key-value pairs)
143+
144+
Two lines vertically stacked. Used for paired data like tags or labeled aliases.
145+
146+
| Line | Style |
147+
| ----- | -------------------------------------- |
148+
| Key | bodyMedium (14), weight medium/500 |
149+
| Value | bodySmall (12), color subtleText |
150+
151+
### Unstacked (single value)
152+
153+
Single line. Used for simple string lists like emails or SMS numbers.
154+
155+
| Line | Style |
156+
| ---- | ------------------ |
157+
| Text | bodyMedium (14) |
158+
159+
### Empty State
160+
161+
- Text: bodyMedium (14), color subtleText
162+
- Centered, 12 vertical padding
163+
164+
### Collapsible Overflow
165+
166+
When a list exceeds `maxVisible` items (default 5), the overflow is hidden behind a "N more" link.
167+
168+
- Text: bodyMedium (14), color oneSignalRed, weight medium/500
169+
- Padding: 4 vertical
170+
171+
## Scrollable List
172+
173+
- Bottom padding: 24
174+
175+
## Logs View
176+
177+
Sticky dark panel at the top of the scrollable content, always visible. Full width with no horizontal margin, no rounded corners, and no gap between it and the header bar.
178+
179+
### Layout
180+
181+
| Property | Value |
182+
| --------------- | ------------------------------ |
183+
| Background | logBackground (`#1A1B1E`) |
184+
| Corner radius | 0 |
185+
| Height | 100 (fixed, content scrolls) |
186+
| Margin | 0 (touches header bar on top, content below) |
187+
| Default state | Expanded |
188+
189+
### Header Row
190+
191+
| Property | Value |
192+
| --------------- | ------------------------------ |
193+
| Padding | 16 horizontal, 12 vertical |
194+
| Title text | "LOGS", bold, white |
195+
| Count text | "(N)" where N = log count, grey 400 |
196+
| Clear icon | Trash/delete, size 18, grey 400 |
197+
| Expand/collapse | Chevron icon, size 20, grey 400 |
198+
| Spacing | 8 between title and count |
199+
200+
Tapping the header row toggles expand/collapse.
201+
202+
### Log Entry Row
203+
204+
| Property | Value |
205+
| --------------- | ------------------------------ |
206+
| Vertical padding | 1 |
207+
| List padding | 12 horizontal |
208+
209+
Each row contains three inline elements separated by 4px gaps:
210+
211+
| Element | Size | Font | Color | Format |
212+
| --------- | ---- | --------- | ---------------- | ------------------- |
213+
| Timestamp | 11 | monospace | grey 500 | `HH:mm:ss` |
214+
| Level | 11 | monospace, bold | level color (see below) | Single letter: D, I, W, E |
215+
| Message | 11 | monospace | white 70% opacity | `tag: message` |
216+
217+
### Log Level Colors
218+
219+
| Level | Label | Color |
220+
| ----- | ----- | ------- |
221+
| Debug | D | Blue |
222+
| Info | I | Green |
223+
| Warn | W | Amber |
224+
| Error | E | Red |
225+
226+
### Behavior
227+
228+
- Auto-scrolls to the newest entry when a log is added
229+
- Empty state: centered "No logs yet" text, grey 500
230+
- Horizontal scroll on the entire list (not per row), no text truncation
231+
232+
## Loading Overlay
233+
234+
- Full-screen scrim over content
235+
- Background: overlayScrim (`rgba(0,0,0,0.26)`)
236+
- Centered spinner using the platform's native progress indicator

0 commit comments

Comments
 (0)