You can use this page as the MDriven Designer metadata catalog for CSS styling variables; it is maintained for MDriven Designer and should only be edited by people who understand its required format.
Purpose
MDriven Designer reads the values on this page to obtain metadata about CSS styling variables. This page is therefore part of the Designer integration, not a general guide to creating a theme.
For example, when a styling variable is presented in MDriven Designer, the metadata read from this page can describe that variable to the Designer. Do not assume that changing text, ordering, or markup is harmless: the Designer depends on the established structure.
Editing rules
Do not move this page, rename it, or change its required format. Doing so can break MDriven Designer.
Before editing:
- Confirm that the change is required for MDriven Designer's styling-variable metadata.
- Preserve the existing metadata structure, including its ordering and markup.
- Do not replace metadata with explanatory prose, examples, tables, or template markup unless the MDriven Designer implementation explicitly supports it.
- Verify the result in MDriven Designer after making the change.
If you want to document or change the visual design of an application, use the styling pages below rather than editing this metadata catalog.
Where to configure styling
Use HowTos:Styling and Theming Your Application to learn the two styling approaches:
- Apply an overall application theme with the predefined CSS variables in the MDriven Turnkey StyleSystem.
- Apply data-driven styling through styles in the model. For example, a ViewModel column styling expression can select a green or red style based on model data.
Use Documentation:MDriven Turnkey theming for Turnkey theming, including the newer variable-based approach and the older SCSS-based workflow. That page also explains the relationship to tkusercss and the local prototype workflow.
Scope
This page does not define application business rules or explain how to build styles in the model. Keep those concerns in the model and in the relevant styling documentation. In particular, use model-driven styles when formatting communicates information to the user, such as showing a success state in green and an alert state in red.