Skip to content

Commit 5be2f21

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

1 file changed

Lines changed: 93 additions & 87 deletions

File tree

‎demo/styles.md‎

Lines changed: 93 additions & 87 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 |
19-
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 |
2025
## Spacing
2126

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

2732
## Cards
2833

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

3641
### Card Shadow
3742

3843
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.
3944

4045
For CSS-based platforms, the equivalent shadow layers are:
4146

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

4853
## Typography
4954

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

5257
### Text Scale Reference
5358

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 |
59+
| Name | Size | Weight | Usage |
60+
| ---------- | ---- | ---------- | ------------------------------------------------------------------------- |
61+
| bodyLarge | 16 | normal/400 | Radio button labels (dialogs) |
62+
| bodyMedium | 14 | normal/400 | Card row labels, toggle labels, unstacked list items, list empty state |
63+
| bodyMedium | 14 | medium/500 | Stacked list key, collapsible "N more" link |
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

@@ -86,7 +92,7 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
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,7 +103,7 @@ 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
102108
- Height: 48
103109
- Corner radius: 8
@@ -106,7 +112,7 @@ All sizes in sp/px. Use the platform's default system font unless otherwise note
106112

107113
- Full width
108114
- Background: transparent
109-
- Border + text color: oneSignalRed
115+
- Border + text color: osPrimary
110116
- Height: 48
111117
- Corner radius: 8
112118

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

132138
## Warning Banner
133139

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

138144
## List Items
139145

140146
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).
141147

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

148154
### Stacked (key-value pairs)
149155

150156
Two lines vertically stacked. Used for paired data like tags or labeled aliases.
151157

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

157163
### Unstacked (single value)
158164

159165
Single line. Used for simple string lists like emails or SMS numbers.
160166

161-
| Line | Style |
162-
| ---- | ------------------ |
163-
| Text | bodyMedium (14) |
167+
| Line | Style |
168+
| ---- | --------------- |
169+
| Text | bodyMedium (14) |
164170

165171
### Empty State
166172

167-
- Text: bodyMedium (14), color subtleText
173+
- Text: bodyMedium (14), color osGrey600
168174
- Centered, 12 vertical padding
169175

170176
### Collapsible Overflow
171177

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

174-
- Text: bodyMedium (14), color oneSignalRed, weight medium/500
180+
- Text: bodyMedium (14), color osPrimary, weight medium/500
175181
- Padding: 4 vertical
176182

177183
## Scrollable List
@@ -184,50 +190,50 @@ Sticky dark panel at the top of the scrollable content, always visible. Full wid
184190

185191
### Layout
186192

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

195201
### Header Row
196202

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

206212
Tapping the header row toggles expand/collapse.
207213

208214
### Log Entry Row
209215

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

215221
Each row contains three inline elements separated by 4px gaps:
216222

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

223229
### Log Level Colors
224230

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

232238
### Behavior
233239

@@ -238,5 +244,5 @@ Each row contains three inline elements separated by 4px gaps:
238244
## Loading Overlay
239245

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

0 commit comments

Comments
 (0)