QtCS25 - UnifiedStyling

Session Summary

• Code: git@git.qt.io:playground/unifiedstyling.git

• Demo current state
  • still research, but up for discussion and looking for guinea pigs
  • might be valuable to look into CSS again - we are solving those problems now in QML, but lots of people know CSS

Session Owners

• Presenter: Richard
• Notes: Volker

Notes

// slides go here

• Use a QML document to describe the various aspects of a design system in a UnifiedStyle element with nodes
  • singleton
  • loads the style from a matching QML document
• child nodes select the type of control, following the element type hierarchy
  • propagation
  • e.g. `control` describes the design of all controls, `textField` then overrides attributes for text fields
  • for each description, can use state-specific designs (e.g. hovered, pressed)
  • consistent pattern for styling control elements (e.g. handles)
  • animations between states are work in progress

• Theming (e.g. dark/light mode)
  • override relevant control attributes depending on which color scheme is active (but can also have custom themes)

• tooling integration
  • default colors can be defined as properties in a separate document, would nicely match e.g. Figma
  • "hot reload" might be possible at least for those properties (through bindings, UI will update)

• Widgets
  • for widgets we generate a C++ header file that describes the properties for a QStyle implementation
  • header file size explodes right now, so room for optimization
  • goal is to bring the basic design to both frameworks
  • Widgets might be too limited for certain things, e.g. animations - probably an acceptable trade-off
  • should not restrict the framework based on widget limitations
  • since this is about hybrid UIs, can we use QML to parse the style also in a widget application?

• support for custom controls/widgets
  • create UnifiedProperties element in custom control, select a pre-defined control type
  • API work in progress