Skip to content

Make text styles theme-aware #89

@SjaakSchilperoort

Description

@SjaakSchilperoort

As a developer,
I want the component library to provide dynamic, theme‑driven typography,
so that each app can override or extend text styles, and the shared components automatically adapt to the app’s chosen theme.

Context

Text styles are currently defined as static imports, but they include colours and therefore depend on the active theme. To support dynamic theming properly, text styles need to become theme‑dependent.

We also want to move text styles into the theme, so that apps can override or extend them. This allows each app to define its own typography. This allows ObsIdentify and Observation to use different font sizes for the same semantic text styles, and shared components automatically pick up the correct styles.

The first step is to update the component library to support dynamic, theme‑driven typography. Once that is in place, we can begin migrating the apps from static text styles to dynamic theme usage.

Goals

  • Move typography (font + text styles) into the shared theme system.
  • Allow apps to override existing text styles.
  • Allow apps to add new app‑specific text styles.
  • Ensure type‑safety for both shared and app‑specific text styles.
  • Migrate shared components to use dynamic theme‑based text styles.
  • Provide proof‑of‑concept migrations for app components.

Scope

In Component Library:

  • Add font and dynamic text to the theme.
  • Introduce createTextStyles(theme) factory.
  • Add createTheme(overrides) merge function.
  • Update Theme type to allow extension via declaration merging.
  • Migrate the components to use theme.text.*.

In the apps:

  • Add theme type augmentation (theme.d.ts).
  • Provide theme overrides using createTheme.
  • Migrate a few app components from static text styles to dynamic theme usage.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions