docs: add style reference for demo apps

Author: fadi-george

styles.md

@@ -0,0 +1,144 @@
+# Demo App Style Reference
+
+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.).
+
+## Colors
+
+| Token             | Value               | Usage                          |
+| ----------------- | ------------------- | ------------------------------ |
+| oneSignalRed      | `#E54B4D`           | Header, primary buttons        |
+| oneSignalGreen    | `#34A853`           | Logged-in / success status     |
+| lightBackground   | `#F8F9FA`           | Page background                |
+| cardBackground    | `#FFFFFF`           | Card surfaces                  |
+| dividerColor      | `#E8EAED`           | Dividers                       |
+| warningBackground | `#FFF8E1`           | Guidance / warning banner card |
+| overlayScrim      | `rgba(0,0,0,0.26)`  | Loading overlay background     |
+| sectionHeaderText | `#616161`           | Section header label and icon  |
+| subtleText        | `#757575`           | Toggle descriptions, secondary text |
+
+## Spacing
+
+| Token                       | Value                          | Usage                                                       |
+| --------------------------- | ------------------------------ | ----------------------------------------------------------- |
+| gap                         | 8                              | Gap between elements inside a section                       |
+| Section spacing             | 24 vertical, 16 horizontal     | Gap between sections. CSS platforms can use `gap: 24` on the list container instead of per-section padding |
+
+## Cards
+
+| Property        | Value                      |
+| --------------- | -------------------------- |
+| Background      | cardBackground (`#FFFFFF`) |
+| Corner radius   | 12                         |
+| Inner padding   | 12 horizontal, 12 vertical |
+| Outer margin    | 0 (parent section handles spacing) |
+
+### Card Shadow
+
+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.
+
+For CSS-based platforms, the equivalent shadow layers are:
+
+| Layer    | Offset  | Blur | Spread | Color              |
+| -------- | ------- | ---- | ------ | ------------------ |
+| Umbra    | 0, 2    | 1    | -1     | `rgba(0,0,0,0.20)` |
+| Penumbra | 0, 1    | 1    | 0      | `rgba(0,0,0,0.14)` |
+| Ambient  | 0, 1    | 3    | 0      | `rgba(0,0,0,0.12)` |
+
+## Typography
+
+All sizes in sp/px. Use the platform's default system font unless otherwise noted.
+
+### Text Scale Reference
+
+| Name        | Size | Weight     | Usage                                        |
+| ----------- | ---- | ---------- | -------------------------------------------- |
+| bodyLarge   | 16   | normal/400 | Radio button labels (dialogs)                |
+| bodyMedium  | 14   | normal/400 | Card row labels, toggle labels, list items   |
+| bodySmall   | 12   | normal/400 | Card row values, toggle descriptions, section headers |
+
+### Header Bar
+
+- Logo height: 22
+- Title text ("Sample App"): bodyMedium (14, normal/400), color white
+- Centered
+
+### Section Headers
+
+- Size: bodySmall (12)
+- Weight: bold
+- Color: sectionHeaderText
+- Letter spacing: 0.5
+- Transform: uppercase
+- Bottom padding: 8 (gap)
+- Info icon: 18, color sectionHeaderText
+
+### Card Row Labels
+
+- Style: bodyMedium (14) (e.g., "App ID", "Push ID", "Status")
+
+### Card Row Values
+
+- Style: bodySmall (12)
+- Font: monospace
+
+### Toggle Row
+
+- Label: bodyMedium (14)
+- Description: bodySmall (12), color subtleText
+
+### Radio Button Labels (Dialogs)
+
+- Style: bodyLarge (16)
+
+## Buttons
+
+### Primary Button
+
+- Full width
+- Background: oneSignalRed
+- Text color: white
+- Height: 48
+- Corner radius: 8
+
+### Destructive / Outlined Button
+
+- Full width
+- Background: transparent
+- Border + text color: oneSignalRed
+- Height: 48
+- Corner radius: 8
+
+## Toggle / Switch
+
+- Use the platform's native switch component
+- Reduce extra tap-target padding where the platform allows
+
+## Dialogs
+
+- Horizontal inset from screen edge: 16
+- Vertical inset: 24
+
+## Dividers
+
+- Use the platform's default divider / separator (1px line, subtle grey)
+
+## Text Input Fields
+
+- Corner radius: 8
+- Content padding: 12 horizontal, 14 vertical
+
+## Warning Banner
+
+- Uses card styling (shadow, corner radius) with warningBackground color
+- Text: bodySmall (12)
+- Link: bodySmall (12), color oneSignalRed, weight semibold/600, no underline, no gap above
+
+## Scrollable List
+
+- Bottom padding: 24
+
+## Loading Overlay
+
+- Full-screen scrim over content
+- Background: overlayScrim (`rgba(0,0,0,0.26)`)
+- Centered spinner using the platform's native progress indicator