CSS Profile Properties

What are CSS profile properties?

CSS profile properties are predefined style variables that control the look of specific UI elements in sites and portals, such as headings, input fields, typefaces, and more. Each property maps to a standard CSS property like color, font-size, or border-radius, and accepts values in standard CSS formats such as hex codes, pixel values, and rem units.

When you create a CSS profile, you define property-value pairs using the format property-name: value. These values are applied to the corresponding UI elements on any site or portal that uses the CSS profile.

Properties that you don't include in a CSS profile retain their standard Appian values.

Validations and supported formatting for CSS profile properties

CSS profiles have validations to enforce specific formatting rules. Review the following guidelines when creating or updating CSS profiles to ensure you enter the properties correctly.

Property format

Each property in a CSS profile must use the format property-name: value. Ensure each property is on a separate line and contains no punctuation between properties, such as commas or semicolons.

All property names must be lowercase.

Validation logic

When you create or modify a CSS profile, a validation check identifies the following issues:

• Invalid property names: The property name does not match a supported CSS profile property name.
• Missing values: A property name is listed without a corresponding value.
• Duplicate names: The same property name appears more than once in the list.
• Incorrect formatting: A property-value pair is not formatted correctly.

Validation limitations and fallback behavior

The CSS profile validation check doesn't verify that your CSS values are valid or supported. If a browser can't render a value, it determines what to use instead. Be sure to verify the rendering of your custom values using browser developer tools in a site or portal.

Supported values for CSS profile properties

Review the following guidelines when entering properties into a CSS profile to ensure the values work correctly.

Supported value formats

CSS profile properties allow any value that is allowed by the associated CSS property, unless noted otherwise in this section. Refer to MDN for specifics about CSS property values.

For example, in the list of CSS profile properties, placeholder-font-style lists font-style as the Associated CSS Property. That means you can use any of the property values defined for the font-style CSS property.

Avoid descriptive values

Do not use descriptive CSS values such as "thick", "thin", or "medium" in CSS profile properties. These values can produce inconsistent results because many Appian components calculate dimensions based on specific values.

Font weight unsupported values

CSS profile properties ending in -font-weight don't accept the following values: 100, 200, 500, 800, and 900. If you provide an unsupported value, the interface will use the closest supported weight.

Color supported formats

CSS profile properties support hexadecimal, RGB, RGBA, HSL, and HSLA color values, as well as named color values such as "red". Other formats may not be supported.

We recommend avoiding transparent colors.

Border radius suggested value format

For CSS profile properties ending in -border-radius, provide a single value to ensure consistent rendering across all components. For example, instead of tooltip-border-radius: 8px 12px 8px 12px, use tooltip-border-radius: 8px.

Radio button and checkbox considerations

Radio button styles

CSS profile properties support two different styles for radio buttons:

• Standard Appian radio button: A radio button with only an outer border. For example:

  

  This example uses the following properties:

  1
  2
  3
  radio-button-size: 16px
  radio-button-selected-border-width: 5px
  radio-button-selected-border-color: #020A51
  

• Radio button with an inner circle: A radio button with an outer border and an inner circle that are separated by a contrasting color. For example:

  

  This example uses the following properties:

  1
  2
  3
  4
  5
  radio-button-size: 16px
  radio-button-selected-inner-circle-size: 10px
  radio-button-selected-border-width: 1px
  radio-button-selected-border-color: #020A51
  radio-button-selected-inner-circle-color: #020A51
  

Checkbox styles

A standard selected checkbox has a colored background with no border and a contrasting checkmark.

With CSS profile properties, you can create a selected checkbox with a white background and a contrasting border and checkmark.

This example uses the following properties:

1
2
3
checkbox-selected-border-color: #020A51
checkbox-selected-background-color: transparent
checkbox-selected-check-color: #020A51

Checkbox color behavior on accent backgrounds

Checkboxes on accent-colored backgrounds automatically flip to use the content-on-accent-color fill with an accent-color checkmark. This automatic color flipping overrides the checkbox-selected-background-color and checkbox-selected-check-color CSS profile properties to ensure sufficient contrast and readability.

Unselected radio button and checkbox fill color

The unselected fill color for radio buttons and checkboxes is always white.

Radio button and checkbox sizing

The radio-button-size and checkbox-size CSS profile properties use border-box sizing, which means the border is included in the specified size rather than added outside it. A thicker border reduces the content area inside the radio button or checkbox.

For example, a checkbox-size of 24px with a checkbox-border-width of 2px results in a content area of 20px (24px minus 2px on each side). The same calculation applies to radio-button-size and its border width properties.

If your organization's design system uses content-box sizing, be sure to account for this difference.

Other usage considerations for CSS profile properties

Properties with on-light and on-dark colors

Some color properties have on-light and on-dark variations, which allow you to configure slightly different values for better contrast on light or dark backgrounds. Unless you use dark backgrounds in your sites and portals, you can usually configure just the on-light color variations.

Pop-up menu properties

The pop-up-menu-on-light-background-color and pop-up-menu-on-dark-background-color properties control the background color for overlay elements that appear on top of page content in response to a user interaction. These properties don't affect dialog boxes, such as record actions that open in a dialog or the Settings dialog in the user menu.

The following UI elements are affected by the pop-up menu properties:

• Date picker calendar.
• Dropdown option list.
• Signature field pop-up.
  • The color of the actual field that users draw on is affected by input-on-light-background-color or input-on-dark-background-color.
• Pop-ups in the styled text editor, such as the keyboard shortcut and color format menus.
• User hover card.
• Record action context menu.
• Picker suggestion options.

Base font size and relative units

In addition to changing the size of much of the non-header text in sites and portals, the base-font-size CSS profile property also sets the root font size that the browser uses to calculate relative values, such as rems and ems. Many Appian UI elements use relative values for padding, margins, and spacing. When you change the base font size, all relative values scale proportionally.

For example, if the base font size is 14px (the Appian standard), a padding value of 0.5rem renders as 7px. If you change the base font size to 16px, the same 0.5rem padding renders as 8px.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Which properties to include

If you don't want to set a property, don't include it in the CSS profile. Properties that you don't include in a CSS profile retain their standard Appian values.

Heading level mapping

If your organization's design system defines styles by HTML heading level (h1–h6), note that Appian heading sizes don't map directly to heading levels. You can use the headingTag and labelHeadingTag parameters to assign heading levels, which is independent from heading size.

However, the following table shows how heading sizes could map to HTML heading levels:

Color compatibility with Appian colors

When you configure negative, error, positive, success, warn, and info properties for CSS profiles, ensure your custom values are compatible with the standard Appian colors for any properties you do not override. For example, if you change the warn-on-light-color color but keep the default info-on-light-color color, make sure the custom warn color doesn't clash with Appian's info color.

The following table contains the CSS profile property and its corresponding standard Appian hex color.

Input background color properties

The input-on-light-background-color and input-on-dark-background-color properties are named input- (not input-box-) because they affect more than just the containers around input values, such as the background of checkboxes and radio buttons. Additionally, they apply to components that input-box properties don't apply to, such as file upload and card choices components.

For dark themes, consider using transparent, which allow inputs to blend into the background.

CSS profile property reference table

The following table lists all properties you can configure in a CSS profile:

Renamed properties

The following CSS profile properties were renamed in 26.6:

If you are using the old property name, we recommend updating to the new names for better formatting control and support.

CSS profile property templates

All properties without values

The following template lists all available CSS profile properties without values that you can use to create a CSS profile from scratch. Copy it into a new CSS profile and delete any properties you don't want to set.

Properties highlighted in yellow were added after the initial 26.3 release.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
negative-on-light-color:
negative-on-dark-color:
error-background-color:
positive-on-light-color:
positive-on-dark-color:
success-background-color:
warn-on-light-color:
warn-on-dark-color:
warn-background-color:
info-on-light-color:
info-on-dark-color:
info-background-color:
content-on-accent-color:
!base-font-size:
!card-box-shadow:
tag-standard-semi-rounded-border-radius:
tag-small-semi-rounded-border-radius:
required-asterisk-on-light-color:
required-asterisk-on-dark-color:
required-asterisk-font-size:
required-asterisk-font-weight:
label-font-weight:
label-font-size:
label-on-light-color:
label-on-dark-color:
tooltip-background-color:
tooltip-text-color:
tooltip-font-size:
tooltip-box-shadow:
tooltip-border-radius:
tooltip-icon-on-light-color:
tooltip-icon-on-dark-color:
tooltip-icon-size:
!pop-up-menu-on-light-background-color:
!pop-up-menu-on-dark-background-color:
instructions-font-weight:
instructions-font-size:
instructions-on-light-color:
instructions-on-dark-color:
placeholder-font-weight:
placeholder-text-on-light-color:
!placeholder-text-on-dark-color:
placeholder-font-style:
heading-large-plus-font-size:
heading-large-font-size:
heading-medium-plus-font-size:
heading-medium-font-size:
heading-small-font-size:
heading-extra-small-font-size:
heading-large-plus-line-height:
heading-large-line-height:
heading-medium-plus-line-height:
heading-medium-line-height:
heading-small-line-height:
heading-extra-small-line-height:
!input-on-light-background-color:
!input-on-dark-background-color:
input-box-on-light-border-color:
!input-box-on-dark-border-color:
input-box-semi-rounded-border-radius:
input-box-border-width:
input-box-padding:
input-card-on-light-border-color:
!input-card-on-dark-border-color:
input-card-border-width:
input-card-semi-rounded-border-radius:
!radio-button-size:
!radio-button-unselected-border-color:
!radio-button-unselected-border-width:
!radio-button-selected-border-color:
!radio-button-selected-border-width:
!radio-button-selected-inner-circle-size:
!radio-button-selected-inner-circle-color:
!checkbox-size:
!checkbox-semi-rounded-border-radius:
!checkbox-border-width:
!checkbox-unselected-border-color:
!checkbox-selected-border-color:
!checkbox-selected-background-color:
!checkbox-selected-check-color:
!checkbox-selected-check-size:

All properties with example values

The following template includes example values for every CSS profile property. You can use it to see what the properties affect.

The following image shows what these example properties look like in a form. This example uses a typeface called "Inter."

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
negative-on-light-color: #8B1A1A
negative-on-dark-color: #E57373
error-background-color: #F5E0E0
positive-on-light-color: #2E7D32
positive-on-dark-color: #81C784
success-background-color: #E8F5E9
warn-on-light-color: #E65100
warn-on-dark-color: #FFB74D
warn-background-color: #FFF3E0
info-on-light-color: #00796B
info-on-dark-color: #80CBC4
info-background-color: #E0F2F1
content-on-accent-color: #FFFFFF
tag-standard-semi-rounded-border-radius: 6px
tag-small-semi-rounded-border-radius: 4px
required-asterisk-on-light-color: #D32F2F
required-asterisk-on-dark-color: #EF5350
required-asterisk-font-size: 16px
required-asterisk-font-weight: 600
label-font-weight: 400
label-font-size: 16px
label-on-light-color: #1C3B3F
label-on-dark-color: #ECEFF1
tooltip-background-color: #FAFBFF
tooltip-text-color: #37474F
tooltip-font-size: 14px
tooltip-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25)
tooltip-border-radius: 8px
tooltip-icon-on-light-color: #263238
tooltip-icon-on-dark-color: #ECEFF1
tooltip-icon-size: 18px
instructions-font-weight: 400
instructions-font-size: 14px
instructions-on-light-color: #546E7A
instructions-on-dark-color: #B0BEC5
placeholder-font-weight: 400
placeholder-text-on-light-color: #78909C
placeholder-text-on-dark-color: #B0BEC5
placeholder-font-style: normal
pop-up-menu-on-light-background-color: #FAFBFF
pop-up-menu-on-dark-background-color: #263238
heading-large-plus-font-size: 38px
heading-large-font-size: 30px
heading-medium-plus-font-size: 24px
heading-medium-font-size: 20px
heading-small-font-size: 16px
heading-extra-small-font-size: 14px
heading-large-plus-line-height: 46px
heading-large-line-height: 38px
heading-medium-plus-line-height: 30px
heading-medium-line-height: 26px
heading-small-line-height: 22px
heading-extra-small-line-height: 18px
input-on-light-background-color: #FAFBFF
input-on-dark-background-color: #1C3B3F
input-box-on-light-border-color: #90A4AE
input-box-on-dark-border-color: #546E7A
input-box-semi-rounded-border-radius: 10px
input-box-border-width: 1.5px
input-box-padding: 12px
input-card-on-light-border-color: #B0BEC5
input-card-on-dark-border-color: #455A64
input-card-border-width: 2px
input-card-semi-rounded-border-radius: 10px
radio-button-size: 22px
radio-button-unselected-border-color: #90A4AE
radio-button-unselected-border-width: 2px
radio-button-selected-border-color: #0E3842
radio-button-selected-border-width: 2px
radio-button-selected-inner-circle-size: 10px
radio-button-selected-inner-circle-color: #0E3842
checkbox-size: 22px
checkbox-semi-rounded-border-radius: 4px
checkbox-border-width: 2px
checkbox-unselected-border-color: #90A4AE
checkbox-selected-border-color: #0E3842
checkbox-selected-background-color: #0E3842
checkbox-selected-check-color: #FFFFFF
checkbox-selected-check-size: 14px
base-font-size: 16px
card-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.12)

Feedback