Nested vs. flattened design tokens: performance concerns with property-level reactivity

[ghost]

Title:
Performance considerations for nested vs. flattened design token access in reactive property bindings

Body:

Hello,

I’m implementing Material Design token support in Slint and have encountered a design trade-off between developer experience (boilerplate reduction) and runtime reactivity performance.

Context

A single component property (e.g., font family, weight, size) may map to multiple design tokens based on conditional logic (e.g., role, emphasized).

If design tokens are grouped using structs, retrieving and applying values becomes concise:

in property <TypeRole> role;
in property <bool> emphasized;

private <TypeRoleStyle> style: {
  emphasized
  ? role == TypeRole.DisplaySmall
    ? Typescale.emphasized_display_small
    : role == TypeRole.DisplayMedium
    ? Typescale.emphasized_display_medium
    : role == TypeRole.DisplayLarge
    ? Typescale.emphasized_display_large
    : role == TypeRole.HeadlineSmall
    ? Typescale.emphasized_headline_small
    : role == TypeRole.HeadlineMedium
    ? Typescale.emphasized_headline_medium
    : role == TypeRole.HeadlineLarge
    ? Typescale.emphasized_headline_large
    : role == TypeRole.TitleSmall
    ? Typescale.emphasized_title_small
    : role == TypeRole.TitleMedium
    ? Typescale.emphasized_title_medium
    : role == TypeRole.TitleLarge
    ? Typescale.emphasized_title_large
    : role == TypeRole.BodySmall
    ? Typescale.emphasized_body_small
    : role == TypeRole.BodyMedium
    ? Typescale.emphasized_body_medium
    : role == TypeRole.LabelSmall
    ? Typescale.emphasized_label_small
    : role == TypeRole.LabelMedium
    ? Typescale.emphasized_label_medium
    : role == TypeRole.LabelLarge
    ? Typescale.emphasized_label_large
    : Typescale.emphasized_body_large
    
  : role == TypeRole.DisplaySmall
    ? Typescale.display_small
    : role == TypeRole.DisplayMedium
    ? Typescale.display_medium
    : role == TypeRole.DisplayLarge
    ? Typescale.display_large
    : role == TypeRole.HeadlineSmall
    ? Typescale.headline_small
    : role == TypeRole.HeadlineMedium
    ? Typescale.headline_medium
    : role == TypeRole.HeadlineLarge
    ? Typescale.headline_large
    : role == TypeRole.TitleSmall
    ? Typescale.title_small
    : role == TypeRole.TitleMedium
    ? Typescale.title_medium
    : role == TypeRole.TitleLarge
    ? Typescale.title_large
    : role == TypeRole.BodySmall
    ? Typescale.body_small
    : role == TypeRole.BodyMedium
    ? Typescale.body_medium
    : role == TypeRole.LabelSmall
    ? Typescale.label_small
    : role == TypeRole.LabelMedium
    ? Typescale.label_medium
    : role == TypeRole.LabelLarge
    ? Typescale.label_large
    : Typescale.body_large
};

font-family: style.family;
font-weight: style.weight;
font-size: style.size;
letter-spacing: style.tracking;

Even less boilerplate is possible with deeper nesting:

in property <TypeCategory> category;
in property <TypeSize> size;
in property <bool> emphasized;

private property <TypeRoleStyle> style: {
  let type_scheme = emphasized ? Typescale.emphasized : Typescale.baseline;
  let type_sizes = category == TypeCategory.Display ? type_scheme.display
                 : category == TypeCategory.Headline ? type_scheme.headline
                 : category == TypeCategory.Title ? type_scheme.title
                 : category == TypeCategory.Body ? type_scheme.body
                 : type_scheme.label;
  let type_style = size == TypeSize.Small ? type_sizes.small
                 : size == TypeSize.Medium ? type_sizes.medium
                 : type_sizes.large;
  type_style
}

This nesting reduces boilerplate significantly, especially given that a full design system can contain over 1000 tokens.

Problem

Most component tokens reference system tokens (named md.sys.* in Material Design). Since Slint’s reactivity is property‑level, a change to a single system token could cause struct re‑evaluation across all components' tokens.

Question

1. Will deep nesting of token structs cause meaningful performance issues in practice?
2. Which approach would you recommend for a large‑scale design system:
   • Nesting (better DX, possible re‑evaluation overhead), or
   • Flattening (more boilerplate, potentially less reactivity churn)?

Example of Current Complexity

Attached is an abbreviated version of my current Typescale implementation. Half of our component tokens follow this pattern.

export component MaterialText inherits Text {
    in property <TypeRole> role: TypeRole.BodyLarge;
    in property <bool> emphasized: false;

    // --- 1. Font Family ---
    font-family:
        root.role == TypeRole.DisplaySmall ? (root.emphasized ? Typescale.emphasized_display_small_family : Typescale.display_small_family) :
        root.role == TypeRole.DisplayMedium ? (root.emphasized ? Typescale.emphasized_display_medium_family : Typescale.display_medium_family) :
        root.role == TypeRole.DisplayLarge ? (root.emphasized ? Typescale.emphasized_display_large_family : Typescale.display_large_family) :
        root.role == TypeRole.HeadlineSmall ? (root.emphasized ? Typescale.emphasized_headline_small_family : Typescale.headline_small_family) :
        root.role == TypeRole.HeadlineMedium ? (root.emphasized ? Typescale.emphasized_headline_medium_family : Typescale.headline_medium_family) :
        root.role == TypeRole.HeadlineLarge ? (root.emphasized ? Typescale.emphasized_headline_large_family : Typescale.headline_large_family) :
        root.role == TypeRole.TitleSmall ? (root.emphasized ? Typescale.emphasized_title_small_family : Typescale.title_small_family) :
        root.role == TypeRole.TitleMedium ? (root.emphasized ? Typescale.emphasized_title_medium_family : Typescale.title_medium_family) :
        root.role == TypeRole.TitleLarge ? (root.emphasized ? Typescale.emphasized_title_large_family : Typescale.title_large_family) :
        root.role == TypeRole.BodySmall ? (root.emphasized ? Typescale.emphasized_body_small_family : Typescale.body_small_family) :
        root.role == TypeRole.BodyMedium ? (root.emphasized ? Typescale.emphasized_body_medium_family : Typescale.body_medium_family) :
        root.role == TypeRole.LabelSmall ? (root.emphasized ? Typescale.emphasized_label_small_family : Typescale.label_small_family) :
        root.role == TypeRole.LabelMedium ? (root.emphasized ? Typescale.emphasized_label_medium_family : Typescale.label_medium_family) :
        root.role == TypeRole.LabelLarge ? (root.emphasized ? Typescale.emphasized_label_large_family : Typescale.label_large_family) :
        (root.emphasized ? Typescale.emphasized_body_large_family : Typescale.body_large_family);

    // --- 2. Font Weight ---
    font-weight:
        root.role == TypeRole.DisplaySmall ? (root.emphasized ? Typescale.emphasized_display_small_weight : Typescale.display_small_weight) :
        root.role == TypeRole.DisplayMedium ? (root.emphasized ? Typescale.emphasized_display_medium_weight : Typescale.display_medium_weight) :
        root.role == TypeRole.DisplayLarge ? (root.emphasized ? Typescale.emphasized_display_large_weight : Typescale.display_large_weight) :
        root.role == TypeRole.HeadlineSmall ? (root.emphasized ? Typescale.emphasized_headline_small_weight : Typescale.headline_small_weight) :
        root.role == TypeRole.HeadlineMedium ? (root.emphasized ? Typescale.emphasized_headline_medium_weight : Typescale.headline_medium_weight) :
        root.role == TypeRole.HeadlineLarge ? (root.emphasized ? Typescale.emphasized_headline_large_weight : Typescale.headline_large_weight) :
        root.role == TypeRole.TitleSmall ? (root.emphasized ? Typescale.emphasized_title_small_weight : Typescale.title_small_weight) :
        root.role == TypeRole.TitleMedium ? (root.emphasized ? Typescale.emphasized_title_medium_weight : Typescale.title_medium_weight) :
        root.role == TypeRole.TitleLarge ? (root.emphasized ? Typescale.emphasized_title_large_weight : Typescale.title_large_weight) :
        root.role == TypeRole.BodySmall ? (root.emphasized ? Typescale.emphasized_body_small_weight : Typescale.body_small_weight) :
        root.role == TypeRole.BodyMedium ? (root.emphasized ? Typescale.emphasized_body_medium_weight : Typescale.body_medium_weight) :
        root.role == TypeRole.LabelSmall ? (root.emphasized ? Typescale.emphasized_label_small_weight : Typescale.label_small_weight) :
        root.role == TypeRole.LabelMedium ? (root.emphasized ? Typescale.emphasized_label_medium_weight : Typescale.label_medium_weight) :
        root.role == TypeRole.LabelLarge ? (root.emphasized ? Typescale.emphasized_label_large_weight : Typescale.label_large_weight) :
        (root.emphasized ? Typescale.emphasized_body_large_weight : Typescale.body_large_weight);

    // --- 3. Font Size ---
    font-size:
        root.role == TypeRole.DisplaySmall ? (root.emphasized ? Typescale.emphasized_display_small_size : Typescale.display_small_size) :
        root.role == TypeRole.DisplayMedium ? (root.emphasized ? Typescale.emphasized_display_medium_size : Typescale.display_medium_size) :
        root.role == TypeRole.DisplayLarge ? (root.emphasized ? Typescale.emphasized_display_large_size : Typescale.display_large_size) :
        root.role == TypeRole.HeadlineSmall ? (root.emphasized ? Typescale.emphasized_headline_small_size : Typescale.headline_small_size) :
        root.role == TypeRole.HeadlineMedium ? (root.emphasized ? Typescale.emphasized_headline_medium_size : Typescale.headline_medium_size) :
        root.role == TypeRole.HeadlineLarge ? (root.emphasized ? Typescale.emphasized_headline_large_size : Typescale.headline_large_size) :
        root.role == TypeRole.TitleSmall ? (root.emphasized ? Typescale.emphasized_title_small_size : Typescale.title_small_size) :
        root.role == TypeRole.TitleMedium ? (root.emphasized ? Typescale.emphasized_title_medium_size : Typescale.title_medium_size) :
        root.role == TypeRole.TitleLarge ? (root.emphasized ? Typescale.emphasized_title_large_size : Typescale.title_large_size) :
        root.role == TypeRole.BodySmall ? (root.emphasized ? Typescale.emphasized_body_small_size : Typescale.body_small_size) :
        root.role == TypeRole.BodyMedium ? (root.emphasized ? Typescale.emphasized_body_medium_size : Typescale.body_medium_size) :
        root.role == TypeRole.LabelSmall ? (root.emphasized ? Typescale.emphasized_label_small_size : Typescale.label_small_size) :
        root.role == TypeRole.LabelMedium ? (root.emphasized ? Typescale.emphasized_label_medium_size : Typescale.label_medium_size) :
        root.role == TypeRole.LabelLarge ? (root.emphasized ? Typescale.emphasized_label_large_size : Typescale.label_large_size) :
        (root.emphasized ? Typescale.emphasized_body_large_size : Typescale.body_large_size);

    // --- 4. Letter Spacing (Tracking) ---
    letter-spacing:
        root.role == TypeRole.DisplaySmall ? (root.emphasized ? Typescale.emphasized_display_small_tracking : Typescale.display_small_tracking) :
        root.role == TypeRole.DisplayMedium ? (root.emphasized ? Typescale.emphasized_display_medium_tracking : Typescale.display_medium_tracking) :
        root.role == TypeRole.DisplayLarge ? (root.emphasized ? Typescale.emphasized_display_large_tracking : Typescale.display_large_tracking) :
        root.role == TypeRole.HeadlineSmall ? (root.emphasized ? Typescale.emphasized_headline_small_tracking : Typescale.headline_small_tracking) :
        root.role == TypeRole.HeadlineMedium ? (root.emphasized ? Typescale.emphasized_headline_medium_tracking : Typescale.headline_medium_tracking) :
        root.role == TypeRole.HeadlineLarge ? (root.emphasized ? Typescale.emphasized_headline_large_tracking : Typescale.headline_large_tracking) :
        root.role == TypeRole.TitleSmall ? (root.emphasized ? Typescale.emphasized_title_small_tracking : Typescale.title_small_tracking) :
        root.role == TypeRole.TitleMedium ? (root.emphasized ? Typescale.emphasized_title_medium_tracking : Typescale.title_medium_tracking) :
        root.role == TypeRole.TitleLarge ? (root.emphasized ? Typescale.emphasized_title_large_tracking : Typescale.title_large_tracking) :
        root.role == TypeRole.BodySmall ? (root.emphasized ? Typescale.emphasized_body_small_tracking : Typescale.body_small_tracking) :
        root.role == TypeRole.BodyMedium ? (root.emphasized ? Typescale.emphasized_body_medium_tracking : Typescale.body_medium_tracking) :
        root.role == TypeRole.LabelSmall ? (root.emphasized ? Typescale.emphasized_label_small_tracking : Typescale.label_small_tracking) :
        root.role == TypeRole.LabelMedium ? (root.emphasized ? Typescale.emphasized_label_medium_tracking : Typescale.label_medium_tracking) :
        root.role == TypeRole.LabelLarge ? (root.emphasized ? Typescale.emphasized_label_large_tracking : Typescale.label_large_tracking) :
        (root.emphasized ? Typescale.emphasized_body_large_tracking : Typescale.body_large_tracking);
}

Full typescale.slint is attached for reference.

In MaterialText, you can see the repeated per‑property conditional chains. This is the kind of boilerplate nesting would eliminate.

Thank you for your guidance.
typescale.slint.txt