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.

The following table lists the available CSS styling variables:

#VariableName	TypeOfValue(Color,px,double,font)	Short description
#--base-bg-color	color	The main background
#--base-fg-color	color	The main font color
#--textfield-label-clr	color	Font color of control labels
#--btn-default-clr	color	Button color if having no other style
#--cancel-action-bg-color	color	The Cancel-changes button
#--cancel-action-bg-color-dark	color	The Cancel-changes button hover
#--danger-color	color	color on buttons with style danger
#--danger-color-dark	color	color on buttons with style danger when hover
#--error-clr	color	Broken constraint of type error background
#--fileupload-label-clr	color
#--info-clr	color	Broken constraint of type info background
#--navbar-bg-color	color	The background of the top level menu bar
#--navbar-brand-color	color	The font color of the app name
#--navbar-link-color	color	The color of global menu item text
#--primary-color	color	The signature color used on table row select, Save-button, Menu-Button
#--primary-color-dark	color	The signature color when hover
#--redo-action-bg-color	color
#--redo-action-bg-color-dark	color
#--redo-action-text-color	color
#--save-action-bg-color	color
#--save-action-bg-color-dark	color
#--save-action-text-color	color
#--select-border-clr	color	The color of the border of the select controls
#--sidebar-bg-color	color	The background of the left side menu
#--sidebar-border-clr	color
#--sidebar-divider-clr	color
#--success-color	color
#--success-color-dark	color
#--table-bg-clr	color	The color of table background
#--table-border-clr	color	The color of the border of table
#--textfield-border-clr	color
#--textfield-disabled-bg-clr	color
#--textfield-icon-clr	color
#--textfield-label-clr	color
#--text-on-danger	color
#--text-on-default-btn	color	Text on placed button actions
#--text-on-error	color	Broken constraint of type error foreground
#--text-on-info	color	Broken constraint of type info foreground
#--text-on-primary	color	Text used on system buttons like login
#--text-on-success	color
#--text-on-warning	color	Broken constraint of type warning foreground
#--toolbar-bg-color	color	Toolbar background color
#--toolbar-item-color	color	Toolbar action text color
#--tooltip-bg-clr	color
#--tooltip-text-clr	color
#--undo-action-bg-color	color
#--undo-action-bg-color-dark	color
#--undo-action-text-color	color
#--warning-color	color	color on buttons with style warning
#--warning-color-dark	color	color on buttons with style warning when hover
#--data-table-header-text-color	color	The text color of table header
#--data-table-header-bg-color	color	The background of table headers
#--textfield-border-radius	px
#--select-border-radius	px
#--table-border-radius	px	The radius of the border of tables
#--table-border-width	px	The width of the border of tables
#--extra-small	px	Size of extra-small image
#--small	px	Size of small image
#--medium	px	Size of medium image
#--large	px	Size of image
#--extra-large	px	Size of image
#--navbar-height	px	The height of the main menu
#--savebar-height	px
#--btn-border-radius	px	The radius of buttons
#--tooltip-border-radius	px
#--sidebar-width	px	The width of the left side menu
#--base-border-radius	px	The radius of inputs
#--resizer-width	px	The size of the resizer between grid header columns
#--input-border-radius	px
#--base-font-size	px	The size of the base font of the application
#--base-checkbox-size	px
#--data-table-row-height	px	The height of a row in the data table
#--data-table-header-height	px	The height of the header row in the data table
#--sidebar-item-height	px	The height of actions in the left side menu
#--sidebar-divider-alpha	double
#--app-font-family	font	Font used for constraints
#--base-font-family	font	Main font of the UI
#--app-icon-font	font	Font used for MaterialDesign Icons
#--label-font-size	px	Font size of labels
#--quickgrid-row-height	px	Height of Blazor quickgrid row - fixed to avoid flicker when virtualized

Editing rules

Do not move this page, rename it, or change its required format. Doing so can break MDriven Designer.

Before editing:

1. Confirm that the change is required for MDriven Designer's styling-variable metadata.
2. Preserve the existing metadata structure, including its ordering and markup.
3. Do not replace metadata with explanatory prose, examples, tables, or template markup unless the MDriven Designer implementation explicitly supports it.
4. 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.

See also

• HowTos:Styling and Theming Your Application
• Documentation:MDriven Turnkey theming
• Documentation:MDriven Designer Overview Series