CSS Profile Property Usage Considerations

This page covers usage considerations and component-specific behaviors for CSS profile properties. For the full list of properties, see CSS Profile Property Reference.

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.

Link text color properties

The link-text-on-light-color and link-text-on-dark-color properties set the color of link text and the hover underline across the following components:

• Link field.
• Rich text links.
• Styled text editor (STEF) links.
• Links in components, such as "Add row" in grids and the "Clear" link in the signature component.

If these properties are not set in a CSS profile, links use the accent color defined in site or portal branding.

For rich text and STEF links, these properties only apply when no custom color is defined directly on the link.

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.

Button considerations

Control button height with padding

If you want to adjust the height of buttons, change the vertical padding using the button padding properties (button-small-padding, button-standard-padding, button-large-padding).

Icon-only button padding

When you set the icon-button padding properties (icon-button-small-padding, icon-button-standard-padding, icon-button-large-padding), the same padding on all sides won't produce a square button since icons are taller than they are wide. To make square icon-only buttons, use more horizontal padding than vertical padding.

How button properties affect a!buttonWidget_23r3

The a!buttonWidget_23r3 component is an older version of the button component. If you are using a!buttonWidget_23r3 in an interface, the border-width button properties will map as follows:

Configure all button color properties for a style

When customizing button colors, configure all of the color properties for a given button style and color combination, or none of them. If you only configure some of the properties, Appian chooses the remaining values to maintain readability, which may not produce the result you expect.

Accent buttons on accent backgrounds

If an accent-colored button appears on an accent-colored background, the button uses the content-on-accent-color value instead of the button color properties. This preserves the contrast behavior of content-on-accent-color.

Hover blur radius

The button-hover-blur-radius property controls the size of the glow effect that appears when users hover over a button. The default value is 5px. To reduce the glow, use a smaller value. To turn off the glow entirely, set this property to 0px. If you turn off the glow, consider using the hover text and background color properties to ensure buttons still have a visible hover state.

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.

Feedback