Skip to content

Commit 89046d8

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

File tree

1 file changed

+105
-90
lines changed

1 file changed

+105
-90
lines changed

‎demo/styles.md‎

Lines changed: 105 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,68 @@
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

50-
All sizes in sp/px. Use the platform's default system font unless otherwise noted.
56+
All sizes in sp/px. Use the platform's default system font unless otherwise noted. Default text color is black unless a specific color is listed.
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, stacked list key |
64+
| bodySmall | 12 | normal/400 | Card row values, toggle descriptions, section headers, stacked list value |
65+
| labelSmall | 11 | medium/500 | Log entry text (timestamp, level, message) |
6066

6167
### Header Bar
6268

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

6975
- Size: bodySmall (12)
7076
- Weight: bold
71-
- Color: sectionHeaderText
77+
- Color: osGrey700
7278
- Letter spacing: 0.5
7379
- Transform: uppercase
7480
- Bottom padding: 8 (gap)
75-
- Info icon: 18, color sectionHeaderText
81+
- Info icon: 18, color osGrey500
7682

7783
### Card Row Labels
7884

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

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

8692
### Toggle Row
8793

8894
- Label: bodyMedium (14)
89-
- Description: bodySmall (12), color subtleText
95+
- Description: bodySmall (12), color osGrey600
9096

9197
### Radio Button Labels (Dialogs)
9298

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

99105
- Full width
100-
- Background: oneSignalRed
106+
- Background: osPrimary
101107
- Text color: white
108+
- Font weight: semibold/600
102109
- Height: 48
103110
- Corner radius: 8
111+
- Leading icon (when present): size 18, 8 gap before label
104112

105113
### Destructive / Outlined Button
106114

107115
- Full width
108116
- Background: transparent
109-
- Border + text color: oneSignalRed
117+
- Border + text color: osPrimary
118+
- Font weight: semibold/600
110119
- Height: 48
111120
- Corner radius: 8
112121

@@ -117,8 +126,14 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
117126

118127
## Dialogs
119128

129+
- Background: osCardBackground (`#FFFFFF`)
130+
- Corner radius: 28
120131
- Horizontal inset from screen edge: 16
121132
- Vertical inset: 24
133+
- Title: size 24, weight normal/400
134+
- Action buttons (cancel, confirm, delete): size 14, weight medium/500, color osPrimary, padding 12 horizontal 8 vertical
135+
- Actions gap: 8
136+
- Actions area padding: 24 left, 24 right, 24 bottom
122137

123138
## Dividers
124139

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

132147
## Warning Banner
133148

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

138153
## List Items
139154

140155
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).
141156

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 |
157+
| Property | Value |
158+
| ------------ | ------------------------------------------- |
159+
| Item padding | 4 vertical, 4 horizontal |
160+
| Divider | height 1 between items |
161+
| Delete icon | close/X, size 18, color osPrimary, trailing |
147162

148163
### Stacked (key-value pairs)
149164

150165
Two lines vertically stacked. Used for paired data like tags or labeled aliases.
151166

152-
| Line | Style |
153-
| ----- | -------------------------------------- |
154-
| Key | bodyMedium (14), weight medium/500 |
155-
| Value | bodySmall (12), color subtleText |
167+
| Line | Style |
168+
| ----- | ------------------------------- |
169+
| Key | bodyMedium (14) |
170+
| Value | bodySmall (12), color osGrey600 |
156171

157172
### Unstacked (single value)
158173

159174
Single line. Used for simple string lists like emails or SMS numbers.
160175

161-
| Line | Style |
162-
| ---- | ------------------ |
163-
| Text | bodyMedium (14) |
176+
| Line | Style |
177+
| ---- | --------------- |
178+
| Text | bodyMedium (14) |
164179

165180
### Empty State
166181

167-
- Text: bodyMedium (14), color subtleText
182+
- Text: bodyMedium (14), color osGrey600
168183
- Centered, 12 vertical padding
169184

170185
### Collapsible Overflow
171186

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

174-
- Text: bodyMedium (14), color oneSignalRed, weight medium/500
189+
- Text: bodyMedium (14), color osPrimary, weight medium/500
175190
- Padding: 4 vertical
176191

177192
## Scrollable List
@@ -184,59 +199,59 @@ Sticky dark panel at the top of the scrollable content, always visible. Full wid
184199

185200
### Layout
186201

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 |
202+
| Property | Value |
203+
| ------------- | -------------------------------------------- |
204+
| Background | osLogBackground (`#1A1B1E`) |
205+
| Corner radius | 0 |
206+
| Height | 100 (fixed, content scrolls) |
207+
| Margin | 0 (touches header bar on top, content below) |
208+
| Default state | Expanded |
194209

195210
### Header Row
196211

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 |
212+
| Property | Value |
213+
| --------------- | ----------------------------------------------------- |
214+
| Padding | 16 horizontal, 12 vertical |
215+
| Title text | "LOGS", labelSmall (11), bold, white |
216+
| Count text | "(N)" where N = log count, labelSmall (11), osGrey500 |
217+
| Clear icon | Trash/delete, size 18, osGrey500 |
218+
| Expand/collapse | Chevron icon, size 18, osGrey500 |
219+
| Spacing | 8 between title and count |
205220

206221
Tapping the header row toggles expand/collapse.
207222

208223
### Log Entry Row
209224

210-
| Property | Value |
211-
| --------------- | ------------------------------ |
212-
| Vertical padding | 1 |
213-
| List padding | 12 horizontal |
225+
| Property | Value |
226+
| ---------------- | ------------- |
227+
| Vertical padding | 1 |
228+
| List padding | 12 horizontal |
214229

215230
Each row contains three inline elements separated by 4px gaps:
216231

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` |
232+
| Element | Style | Color | Format |
233+
| --------- | -------------------------------- | ----------------------- | ------------------------- |
234+
| Timestamp | labelSmall (11), monospace | osLogTimestamp | `HH:mm:ss` |
235+
| Level | labelSmall (11), monospace, bold | level color (see below) | Single letter: D, I, W, E |
236+
| Message | labelSmall (11), monospace | white | `tag: message` |
222237

223238
### Log Level Colors
224239

225-
| Level | Label | Color |
226-
| ----- | ----- | ------- |
227-
| Debug | D | Blue |
228-
| Info | I | Green |
229-
| Warn | W | Amber |
230-
| Error | E | Red |
240+
| Level | Label | Color |
241+
| ----- | ----- | ----- |
242+
| Debug | D | Blue |
243+
| Info | I | Green |
244+
| Warn | W | Amber |
245+
| Error | E | Red |
231246

232247
### Behavior
233248

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

238253
## Loading Overlay
239254

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

0 commit comments

Comments
 (0)