> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# Material Bridge

> How stock Material widgets stay on-system without Styled wrappers

Not every widget in the app is a `Styled*` component — plenty of code uses plain `ElevatedButton`, `TextField`, `Chip`, `Switch`, or third-party packages that read Material's `ColorScheme`/`TextTheme`. The **Material bridge** is the part of [`app_theme.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/app_theme.dart) that keeps all of that on-system.

It has three parts:

## 1. Per-component themes

Every relevant `*ThemeData` on `ThemeData` is wired to Sundial tokens:

| Material widget | Key token wiring |
| - | - |
| `AppBar` | bg `surfaceBg`, fg `contrastMedium`, title `titleMedium`, centered |
| `ElevatedButton` | fill `accent.button`, content `accent.onButton`, radius 16, elevation 0, padding 17/20, `buttonLarge`; disabled → `disabledContainer`/`disabledOnContainer` |
| `OutlinedButton` | border + content `accent.secondary`, radius 16, `buttonLarge` |
| `TextButton` | content `accent.secondary`, radius 16, `buttonLarge` |
| `FilledButton` | fill `surfaceElevated`, content `contrastMedium`, radius 8 — the "neutral" button |
| `IconButton` | 40×40, 24 px icon, fg `contrastMedium`, bg `surfaceElevated` |
| `TextField` (InputDecoration) | filled `surfaceElevated`, hint `bodyLarge`/`contrastWeak`, content padding 16, no border strokes |
| `DropdownMenu` | text `buttonMedium`, shares the input decoration theme |
| `Chip` | bg `surfaceElevated`, selected `surfaceHigh`, label `buttonMedium`/`contrastBold`, radius 32, no border |
| `MenuButton` | bg `surfaceElevated`, fg `contrastBold` |
| `Switch` | selected: `accent.onButton` thumb on `accent.button` track · unselected: `contrastWeak` on `surfaceElevated` with 2 px `surfaceHigh` outline · disabled: `disabled*` |
| `Slider` | active `accent.button`, inactive `surfaceHigh`, thumb `accent.button` (12 px), overlay `accent.background`, 4 px track |
| `BottomSheet` | bg `surfaceBg`, drag handle 32×4 `surfaceHigh` |
| `Divider` | `surfaceElevated` |
| `Dialog` | bg `surfaceBg`, radius 8, title `titleSmall`/`contrastStrong`, content `bodyLarge`/`contrastMedium` |
| `NavigationBar` | bg `surfaceBg`, transparent indicator, selected `contrastStrong` / unselected `contrastWeak`, labels `buttonSmall` |
| `Drawer` | width 330, bg `surfaceElevated` |
| `TextSelection` | cursor `accent.button`, handles `accent.secondary`, selection `accent.background` |

> [!NOTE]
>
> Because accent tokens feed the button/switch/slider/selection themes, **persona theming applies to stock Material widgets automatically** — no Styled wrapper needed for accent-correct UI.

## 2. ColorScheme mapping

For widgets (and packages) that read `Theme.of(context).colorScheme`:

| ColorScheme slot | Sundial token |
| - | - |
| `primary` | `contrastStrong` |
| `secondary` | `contrastMedium` |
| `surface` | `surfaceBg` |
| `error` | `badgeRed` |
| `surfaceContainerHighest` | `surfaceHigh` |
| `surfaceTint` | `surfaceHigh` |

The rest of the scheme comes from Flutter's default for the brightness (`ThemeData(brightness: …).colorScheme`), overridden with the slots above.

## 3. TextTheme mapping

For code that reads Material's `TextTheme` (`Theme.of(context).textTheme`):

| Material slot | Sundial token |
| - | - |
| `displayLarge/Medium/Small` | DS `display*` |
| `titleLarge/Medium/Small` | DS `title*` |
| `bodyLarge/Medium/Small` | DS `body*` |
| `labelLarge/Medium/Small` | **DS `overline*`** |

All slots are colored `contrastStrong`. Note the deliberate remap: Material's `label*` slots carry Sundial's overline styles — Material has no overline category, and its label slots serve the same role.

## When to rely on the bridge vs. a Styled component

* **Bridge is enough**: standard Material behavior with Sundial looks — a plain button, switch, slider, dialog.
* **Use the Styled component**: when Sundial adds behavior or structure beyond styling — `StyledTextField`'s character counter, `StyledScaffold`'s back handling, `StyledCard`'s variants. See [Components](https://design.slingshotai.com/components/styled-card.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.