Skip to content

Commit aab3fac

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

File tree

1 file changed

+93
-86
lines changed

1 file changed

+93
-86
lines changed

‎demo/styles.md‎

Lines changed: 93 additions & 86 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

@@ -86,7 +93,7 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
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,7 +104,7 @@ 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
102109
- Height: 48
103110
- Corner radius: 8
@@ -106,7 +113,7 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
106113

107114
- Full width
108115
- Background: transparent
109-
- Border + text color: oneSignalRed
116+
- Border + text color: osPrimary
110117
- Height: 48
111118
- Corner radius: 8
112119

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

132139
## Warning Banner
133140

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

138145
## List Items
139146

140147
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).
141148

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 |
149+
| Property | Value |
150+
| ------------ | ------------------------------------------- |
151+
| Item padding | 4 vertical, 4 horizontal |
152+
| Divider | height 1 between items |
153+
| Delete icon | close/X, size 18, color osPrimary, trailing |
147154

148155
### Stacked (key-value pairs)
149156

150157
Two lines vertically stacked. Used for paired data like tags or labeled aliases.
151158

152-
| Line | Style |
153-
| ----- | -------------------------------------- |
154-
| Key | bodyMedium (14), weight medium/500 |
155-
| Value | bodySmall (12), color subtleText |
159+
| Line | Style |
160+
| ----- | ---------------------------------- |
161+
| Key | bodyMedium (14), weight medium/500 |
162+
| Value | bodySmall (12), color osGrey600 |
156163

157164
### Unstacked (single value)
158165

159166
Single line. Used for simple string lists like emails or SMS numbers.
160167

161-
| Line | Style |
162-
| ---- | ------------------ |
163-
| Text | bodyMedium (14) |
168+
| Line | Style |
169+
| ---- | --------------- |
170+
| Text | bodyMedium (14) |
164171

165172
### Empty State
166173

167-
- Text: bodyMedium (14), color subtleText
174+
- Text: bodyMedium (14), color osGrey600
168175
- Centered, 12 vertical padding
169176

170177
### Collapsible Overflow
171178

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

174-
- Text: bodyMedium (14), color oneSignalRed, weight medium/500
181+
- Text: bodyMedium (14), color osPrimary, weight medium/500
175182
- Padding: 4 vertical
176183

177184
## Scrollable List
@@ -184,50 +191,50 @@ Sticky dark panel at the top of the scrollable content, always visible. Full wid
184191

185192
### Layout
186193

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 |
194+
| Property | Value |
195+
| ------------- | -------------------------------------------- |
196+
| Background | osLogBackground (`#1A1B1E`) |
197+
| Corner radius | 0 |
198+
| Height | 100 (fixed, content scrolls) |
199+
| Margin | 0 (touches header bar on top, content below) |
200+
| Default state | Expanded |
194201

195202
### Header Row
196203

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 |
204+
| Property | Value |
205+
| --------------- | ----------------------------------------------------- |
206+
| Padding | 16 horizontal, 12 vertical |
207+
| Title text | "LOGS", labelSmall (11), bold, white |
208+
| Count text | "(N)" where N = log count, labelSmall (11), osGrey500 |
209+
| Clear icon | Trash/delete, size 18, osGrey500 |
210+
| Expand/collapse | Chevron icon, size 18, osGrey500 |
211+
| Spacing | 8 between title and count |
205212

206213
Tapping the header row toggles expand/collapse.
207214

208215
### Log Entry Row
209216

210-
| Property | Value |
211-
| --------------- | ------------------------------ |
212-
| Vertical padding | 1 |
213-
| List padding | 12 horizontal |
217+
| Property | Value |
218+
| ---------------- | ------------- |
219+
| Vertical padding | 1 |
220+
| List padding | 12 horizontal |
214221

215222
Each row contains three inline elements separated by 4px gaps:
216223

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` |
224+
| Element | Style | Color | Format |
225+
| --------- | -------------------------------- | ----------------------- | ------------------------- |
226+
| Timestamp | labelSmall (11), monospace | osLogTimestamp | `HH:mm:ss` |
227+
| Level | labelSmall (11), monospace, bold | level color (see below) | Single letter: D, I, W, E |
228+
| Message | labelSmall (11), monospace | white | `tag: message` |
222229

223230
### Log Level Colors
224231

225-
| Level | Label | Color |
226-
| ----- | ----- | ------- |
227-
| Debug | D | Blue |
228-
| Info | I | Green |
229-
| Warn | W | Amber |
230-
| Error | E | Red |
232+
| Level | Label | Color |
233+
| ----- | ----- | ----- |
234+
| Debug | D | Blue |
235+
| Info | I | Green |
236+
| Warn | W | Amber |
237+
| Error | E | Red |
231238

232239
### Behavior
233240

@@ -238,5 +245,5 @@ Each row contains three inline elements separated by 4px gaps:
238245
## Loading Overlay
239246

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

0 commit comments

Comments
 (0)