Skip to main content

Styles and AppConfig

Hosanna UI styling is authored in assets/meta/app.config.json. This is the shared registry for design tokens, control variants, fragment trees, CollectionView row settings, cell styles, translations, and device-specific configuration.

Use this section when the concern is presentation or UI configuration. Use the Workflow section for how to build, run, debug, or upgrade an app.

Section Map​

  • Style Syntax: $extends, ~ references, state buckets, style keys, and config variants.
  • Fragments: reusable fragment view trees, data maps, callbacks, providers, constraints, and lifecycle rules.
  • Fragment Constraints: inline constraint bindings, explicit constraint rules, priorities, and runtime layout semantics.
  • Fragment Computed Values: declarative computed variables for fragment fields and constraint arguments.
  • Cells: cells.* definitions rendered by DynamicCell and CollectionView item data.
  • Rows: rows.* settings for CollectionView row layout, row types, cell sizing, focus, and overrides.
  • Fonts: theme.fonts, fontKey, web font registration, and native font resolution.
  • Translations and Asset Resolution: locale dictionaries, translate(...), @locale, and $RES$.
  • Node Pool Defaults: pristine field values replayed when pooled nodes are reused.

What Belongs Here​

AppConfig is the right place for stable UI configuration:

  • design tokens such as colors, fonts, spacing, and images
  • control styles and focus/selected/disabled/error states
  • fragment layouts used by FragmentView and DynamicCell
  • CollectionView row styles, cell styles, row overrides, and mixed cell styles
  • localized strings and localized asset paths
  • expression-specific variants such as app.config.phone.json
  • device-quality and performance flags

TypeScript remains the right place for behavior that is genuinely dynamic, registered callback implementations, platform adapter code, and application state transitions.

Common Top-Level Sections​

{
  "theme": {
    "colors": {},
    "fonts": {}
  },
  "controls": {},
  "rows": {},
  "cells": {},
  "translations": {},
  "performance": {},
  "nodePoolPristineDefaults": {}
}

The top-level section usually matches the reader's job. If you are changing the rendered tree inside a cell, start with cells.*. If you are changing row height or horizontal layout behavior, start with rows.*. If you are changing typography globally, start with theme.fonts.