Common CSS Styles for Finesse Desktop

Naming Conventions

For CSS properties involving text, icons, borders, and background colors, the following conventions are used in class names:

• info – To effectively convey informational content (represented in blue)

• accent – To highlight accent elements, for example mandatory fields

• text-regular – For standard text content

• text-bold – To emphasize bold text

• text-disabled – To indicate disabled or inactive content

• light – For light-colored (white colored) text/background/icons

• neutral – To indicate general grey colored icons/border/backgrounds

Button Conventions

By convention, default buttons, colored in blue, typically denote actions such as save or continue, while grey-colored buttons are regarded as 'regular' and commonly used for actions such as revert, edit, or move. Buttons in red usually signify a cancel action, and those in green represent call actions. The class names for buttons are derived from the considerations mentioned earlier. In case of uncertainity about which CSS style to apply, you can derive the style from the corresponding desktop UI element.

Use the following CSS styles for the third-party gadgets to match the look and feel of Finesse Desktop: