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, tooltips, and labels. 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.

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.

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.

CSS profile property reference table

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

CSS profile property template

The following is a full list of all the available CSS profile properties without values that you can use to create a CSS profile. Be sure to delete any properties that you do not want to set.

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
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:
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:
instructions-font-weight:
instructions-font-size:
instructions-on-light-color:
instructions-on-dark-color:
placeholder-font-weight:
placeholder-text-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-box-border-color:
input-box-semi-rounded-border-radius:
input-box-border-width:
input-box-padding:
input-card-border-color:
input-card-border-width:
input-card-semi-rounded-border-radius:

Feedback