> ## 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.

# Theme Construction

> How AppTheme builds a complete Material ThemeData from Sundial tokens

[`app_theme.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/app_theme.dart) is where tokens become a Flutter theme. A single private builder produces every theme the app uses:

```dart theme={null}
class AppTheme {
  static ThemeData _buildTheme(Brightness brightness) { … }

  static final light = _buildTheme(Brightness.light);
  static final dark  = _buildTheme(Brightness.dark);
}
```

Brightness is the only axis — the persona palette parameter was retired with Sundial 2.0.

## Build sequence

**1. Pick base tokens**

`DesignSystemTypography.base` (colorless metrics) and `DesignSystemColors.light` or `.dark` by brightness.

**2. Resolve the accent**

`AccentColors.lavenderLight` or `.lavenderDark` by brightness — the single lavender accent, nested into the color tokens.

**3. Style every Material component**

Buttons, inputs, chips, menus, switch, slider, bottom sheet, divider, dialog, navigation bar, drawer, text selection — all wired to tokens. See [Material bridge](https://design.slingshotai.com/theming/material-bridge.md).

**4. Install the ThemeExtensions**

`extensions: [colorThemeExtension, DesignSystemTypography.light|dark]` — what `context.colorTheme` / `context.textTheme` read.

## App wiring

`MaterialApp` is configured in `lib/main.dart`:

```dart main.dart theme={null}
theme: AppTheme.light,
darkTheme: AppTheme.dark,
```

Flutter selects `theme` or `darkTheme` from the platform brightness; every token, component theme, and extension flips with it.

## Global behaviors baked into the theme

### Cupertino transitions everywhere

```dart theme={null}
pageTransitionsTheme: PageTransitionsTheme(
  builders: {
    for (final platform in TargetPlatform.values)
      platform: const CupertinoPageTransitionsBuilder(),
  },
),
```

Every `Navigator.push` slides in from the right, iOS-style, **on Android too** — one consistent motion language.

### Consistent back icon

`actionIconTheme` forces `Icons.arrow_back` as the back button icon on all platforms.

### Scaffold background

`scaffoldBackgroundColor: colorTheme.surfaceBg` — screens start on the correct surface without any per-screen setup.

## Notable component wiring

A few representative mappings (the full set is in [Material bridge](https://design.slingshotai.com/theming/material-bridge.md)):

| Component | Token wiring |
| - | - |
| `ElevatedButton` | fill `accent.button`, content `accent.onButton`, radius 16, elevation 0, `buttonLarge` |
| `Switch` | selected: thumb `accent.onButton` / track `accent.button`; unselected: thumb `contrastWeak` / track `surfaceElevated` with `surfaceHigh` outline; disabled: `disabled*` |
| `Slider` | active track & thumb `accent.button`, inactive `surfaceHigh`, overlay `accent.background` |
| `Dialog` | bg `surfaceBg`, radius 8, title `titleSmall`/`contrastStrong`, content `bodyLarge`/`contrastMedium` |
| `NavigationBar` | bg `surfaceBg`, selected `contrastStrong` vs unselected `contrastWeak`, labels `buttonSmall` |
| `Drawer` | width 330, bg `surfaceElevated` |
| Text selection | cursor `accent.button`, handles `accent.secondary`, selection `accent.background` |

## Theme instances are cached

`AppTheme.light`/`.dark` are `static final` — built once, pure functions of tokens. Either is safe to install anywhere — which is exactly what [ThemeOverride](https://design.slingshotai.com/components/theme-override.md) does per subtree. Note the static-final consequence: token edits need a full restart, not a hot reload.


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