Skip to content

Commit 04e2798

Browse files
fadi-georgefadi-george
committed
refactor(demo): standardize color token naming
1 parent f7ee73f commit 04e2798

File tree

1 file changed

+99
-89
lines changed

1 file changed

+99
-89
lines changed

‎demo/styles.md‎

Lines changed: 99 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,69 @@
11
# Demo App Style Reference
22

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.).
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.). Token names use camelCase; convert to kebab-case (e.g. `os-primary`) for CSS/USS platforms.
44

55
## Colors
66

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 |
7+
| Token | Value | Usage |
8+
| ------------------- | ------------------ | ----------------------------------- |
9+
| osPrimary | `#E54B4D` | Header, primary buttons |
10+
| osSuccess | `#34A853` | Logged-in / success status |
11+
| osGrey700 | `#616161` | Section headers |
12+
| osGrey600 | `#757575` | Toggle descriptions, secondary text |
13+
| osGrey500 | `#9E9E9E` | Icons |
14+
| osLightBackground | `#F8F9FA` | Page background |
15+
| osCardBackground | `#FFFFFF` | Card surfaces |
16+
| osDivider | `#E8EAED` | Dividers |
17+
| osWarningBackground | `#FFF8E1` | Guidance / warning banner card |
18+
| osOverlayScrim | `rgba(0,0,0,0.26)` | Loading overlay background |
19+
| osLogBackground | `#1A1B1E` | Logs view background |
20+
| osLogDebug | `#82AAFF` | Log level: Debug |
21+
| osLogInfo | `#C3E88D` | Log level: Info |
22+
| osLogWarn | `#FFCB6B` | Log level: Warn |
23+
| osLogError | `#FF5370` | Log level: Error |
24+
| osLogTimestamp | `#676E7B` | Log timestamp text |
1925

2026
## Spacing
2127

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 |
28+
| Token | Value | Usage |
29+
| --------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------- |
30+
| gap | 8 | Gap between elements inside a section |
31+
| Section spacing | 24 vertical, 16 horizontal | Gap between sections. CSS platforms can use `gap: 24` on the list container instead of per-section padding |
2632

2733
## Cards
2834

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+
| Property | Value |
36+
| ------------- | ---------------------------------- |
37+
| Background | osCardBackground (`#FFFFFF`) |
38+
| Corner radius | 12 |
39+
| Inner padding | 12 horizontal, 12 vertical |
40+
| Outer margin | 0 (parent section handles spacing) |
3541

3642
### Card Shadow
3743

3844
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.
3945

4046
For CSS-based platforms, the equivalent shadow layers are:
4147

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)` |
48+
| Layer | Offset | Blur | Spread | Color |
49+
| -------- | ------ | ---- | ------ | ------------------ |
50+
| Umbra | 0, 2 | 1 | -1 | `rgba(0,0,0,0.20)` |
51+
| Penumbra | 0, 1 | 1 | 0 | `rgba(0,0,0,0.14)` |
52+
| Ambient | 0, 1 | 3 | 0 | `rgba(0,0,0,0.12)` |
4753

4854
## Typography
4955

5056
All sizes in sp/px. Use the platform's default system font unless otherwise noted.
5157

5258
### Text Scale Reference
5359

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+
| Name | Size | Weight | Usage |
61+
| ---------- | ---- | ---------- | ------------------------------------------------------------------------- |
62+
| bodyLarge | 16 | normal/400 | Radio button labels (dialogs) |
63+
| bodyMedium | 14 | normal/400 | Card row labels, toggle labels, unstacked list items, list empty state |
64+
| bodyMedium | 14 | medium/500 | Stacked list key, collapsible "N more" link |
65+
| bodySmall | 12 | normal/400 | Card row values, toggle descriptions, section headers, stacked list value |
66+
| labelSmall | 11 | medium/500 | Log entry text (timestamp, level, message) |
6067

6168
### Header Bar
6269

@@ -68,11 +75,11 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
6875

6976
- Size: bodySmall (12)
7077
- Weight: bold
71-
- Color: sectionHeaderText
78+
- Color: osGrey700
7279
- Letter spacing: 0.5
7380
- Transform: uppercase
7481
- Bottom padding: 8 (gap)
75-
- Info icon: 18, color sectionHeaderText
82+
- Info icon: 18, color osGrey500
7683

7784
### Card Row Labels
7885

@@ -81,12 +88,12 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
8188
### Card Row Values
8289

8390
- Style: bodySmall (12)
84-
- Font: monospace
91+
- Font: monospace (applies to ID values like App ID, Push Subscription ID, External ID, and status text)
8592

8693
### Toggle Row
8794

8895
- Label: bodyMedium (14)
89-
- Description: bodySmall (12), color subtleText
96+
- Description: bodySmall (12), color osGrey600
9097

9198
### Radio Button Labels (Dialogs)
9299

@@ -97,16 +104,19 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
97104
### Primary Button
98105

99106
- Full width
100-
- Background: oneSignalRed
107+
- Background: osPrimary
101108
- Text color: white
109+
- Font weight: semibold/600
102110
- Height: 48
103111
- Corner radius: 8
112+
- Leading icon (when present): size 18, 8 gap before label
104113

105114
### Destructive / Outlined Button
106115

107116
- Full width
108117
- Background: transparent
109-
- Border + text color: oneSignalRed
118+
- Border + text color: osPrimary
119+
- Font weight: semibold/600
110120
- Height: 48
111121
- Corner radius: 8
112122

@@ -131,47 +141,47 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
131141

132142
## Warning Banner
133143

134-
- Uses card styling (shadow, corner radius) with warningBackground color
144+
- Uses card styling (shadow, corner radius) with osWarningBackground color
135145
- Text: bodySmall (12)
136-
- Link: bodySmall (12), color oneSignalRed, weight semibold/600, no underline, no gap above
146+
- Link: bodySmall (12), color osPrimary, weight semibold/600, no underline, no gap above
137147

138148
## List Items
139149

140150
Items displayed inside cards (e.g. tags, aliases, emails, SMS numbers). The list sits inside a card with standard card padding (12 horizontal, 12 vertical).
141151

142-
| Property | Value |
143-
| -------------- | -------------------------------------------------------------- |
144-
| Item padding | 4 vertical, 4 horizontal |
145-
| Divider | height 1 between items |
146-
| Delete icon | close/X, size 18, color sectionHeaderText (`#616161`), trailing |
152+
| Property | Value |
153+
| ------------ | ------------------------------------------- |
154+
| Item padding | 4 vertical, 4 horizontal |
155+
| Divider | height 1 between items |
156+
| Delete icon | close/X, size 18, color osPrimary, trailing |
147157

148158
### Stacked (key-value pairs)
149159

150160
Two lines vertically stacked. Used for paired data like tags or labeled aliases.
151161

152-
| Line | Style |
153-
| ----- | -------------------------------------- |
154-
| Key | bodyMedium (14), weight medium/500 |
155-
| Value | bodySmall (12), color subtleText |
162+
| Line | Style |
163+
| ----- | ---------------------------------- |
164+
| Key | bodyMedium (14), weight medium/500 |
165+
| Value | bodySmall (12), color osGrey600 |
156166

157167
### Unstacked (single value)
158168

159169
Single line. Used for simple string lists like emails or SMS numbers.
160170

161-
| Line | Style |
162-
| ---- | ------------------ |
163-
| Text | bodyMedium (14) |
171+
| Line | Style |
172+
| ---- | --------------- |
173+
| Text | bodyMedium (14) |
164174

165175
### Empty State
166176

167-
- Text: bodyMedium (14), color subtleText
177+
- Text: bodyMedium (14), color osGrey600
168178
- Centered, 12 vertical padding
169179

170180
### Collapsible Overflow
171181

172182
When a list exceeds `maxVisible` items (default 5), the overflow is hidden behind a "N more" link.
173183

174-
- Text: bodyMedium (14), color oneSignalRed, weight medium/500
184+
- Text: bodyMedium (14), color osPrimary, weight medium/500
175185
- Padding: 4 vertical
176186

177187
## Scrollable List
@@ -184,59 +194,59 @@ Sticky dark panel at the top of the scrollable content, always visible. Full wid
184194

185195
### Layout
186196

187-
| Property | Value |
188-
| --------------- | ------------------------------ |
189-
| Background | logBackground (`#1A1B1E`) |
190-
| Corner radius | 0 |
191-
| Height | 100 (fixed, content scrolls) |
192-
| Margin | 0 (touches header bar on top, content below) |
193-
| Default state | Expanded |
197+
| Property | Value |
198+
| ------------- | -------------------------------------------- |
199+
| Background | osLogBackground (`#1A1B1E`) |
200+
| Corner radius | 0 |
201+
| Height | 100 (fixed, content scrolls) |
202+
| Margin | 0 (touches header bar on top, content below) |
203+
| Default state | Expanded |
194204

195205
### Header Row
196206

197-
| Property | Value |
198-
| --------------- | ------------------------------ |
199-
| Padding | 16 horizontal, 12 vertical |
200-
| Title text | "LOGS", bold, white |
201-
| Count text | "(N)" where N = log count, grey 400 |
202-
| Clear icon | Trash/delete, size 18, grey 400 |
203-
| Expand/collapse | Chevron icon, size 20, grey 400 |
204-
| Spacing | 8 between title and count |
207+
| Property | Value |
208+
| --------------- | ----------------------------------------------------- |
209+
| Padding | 16 horizontal, 12 vertical |
210+
| Title text | "LOGS", labelSmall (11), bold, white |
211+
| Count text | "(N)" where N = log count, labelSmall (11), osGrey500 |
212+
| Clear icon | Trash/delete, size 18, osGrey500 |
213+
| Expand/collapse | Chevron icon, size 18, osGrey500 |
214+
| Spacing | 8 between title and count |
205215

206216
Tapping the header row toggles expand/collapse.
207217

208218
### Log Entry Row
209219

210-
| Property | Value |
211-
| --------------- | ------------------------------ |
212-
| Vertical padding | 1 |
213-
| List padding | 12 horizontal |
220+
| Property | Value |
221+
| ---------------- | ------------- |
222+
| Vertical padding | 1 |
223+
| List padding | 12 horizontal |
214224

215225
Each row contains three inline elements separated by 4px gaps:
216226

217-
| Element | Size | Font | Color | Format |
218-
| --------- | ---- | --------- | ---------------- | ------------------- |
219-
| Timestamp | 11 | monospace | grey 500 | `HH:mm:ss` |
220-
| Level | 11 | monospace, bold | level color (see below) | Single letter: D, I, W, E |
221-
| Message | 11 | monospace | white 70% opacity | `tag: message` |
227+
| Element | Style | Color | Format |
228+
| --------- | -------------------------------- | ----------------------- | ------------------------- |
229+
| Timestamp | labelSmall (11), monospace | osLogTimestamp | `HH:mm:ss` |
230+
| Level | labelSmall (11), monospace, bold | level color (see below) | Single letter: D, I, W, E |
231+
| Message | labelSmall (11), monospace | white | `tag: message` |
222232

223233
### Log Level Colors
224234

225-
| Level | Label | Color |
226-
| ----- | ----- | ------- |
227-
| Debug | D | Blue |
228-
| Info | I | Green |
229-
| Warn | W | Amber |
230-
| Error | E | Red |
235+
| Level | Label | Color |
236+
| ----- | ----- | ----- |
237+
| Debug | D | Blue |
238+
| Info | I | Green |
239+
| Warn | W | Amber |
240+
| Error | E | Red |
231241

232242
### Behavior
233243

234-
- Auto-scrolls to the newest entry when a log is added
235-
- Empty state: centered "No logs yet" text, grey 500
244+
- Newest entries at the top
245+
- Empty state: centered "No logs yet" text, osGrey500
236246
- Horizontal scroll on the entire list (not per row), no text truncation
237247

238248
## Loading Overlay
239249

240250
- Full-screen scrim over content
241-
- Background: overlayScrim (`rgba(0,0,0,0.26)`)
251+
- Background: osOverlayScrim (`rgba(0,0,0,0.26)`)
242252
- Centered spinner using the platform's native progress indicator

0 commit comments

Comments
 (0)