Understanding the PT_CUSTOM_PROPS Style Sheet

PT_CUSTOM_PROPS is a free form style sheet, which is included in the fluid and classic plus composite style sheets. It contains the CSS variables or CSS custom properties delivered in PeopleTools 8.60.

The style sheet is divided into two parts:

• Raw palette definitions.

• Functional properties.

The palette definitions and functional properties are declared at the root level in the PT_CUSTOM_PROPS style sheet.

Raw Palette Definitions

PT_CUSTOM_PROPS includes 46 color definitions. The variable names begin with --pt-palette- followed by a sequential number. For example, --pt-palette-0.

For example: --pt-palette-0: #000000;

Note:

Oracle recommends that you do not directly use a color palette definition; instead you should use a functional variable because the color palette is used in multiple places. If PeopleTools changes the color palette definition, it will affect the functional variables wherever the color palette is used and this may cause unexpected results for you.

Functional Properties

PT_CUSTOM_PROPS includes properties such as color, height, images, background, offsets and so on. You should use these functional properties to create consistent constructs.

A functional property generally follows this naming structure: --pt-[<HighLevelUsage>-[SubUsagelevels...]-[State(s)]-][PropertyUsage]-<property>.

Elements of Functional Properties	Description
pt	Refers to PeopleTools, the owner of the functional property.
HighLevelUsage	Specifies the overall usage of a property, that is, a page, control, button, switch, and so on.
SubUsagelevels	It's a qualification of the high level usage. For example, if the high level usage is a button, then the usage level is simple, primary, toggle, and so on. This element is optional.
State	Specifies the state of a control, such as on or off state of a switch, error condition, disabled or active state of a button, hover, selected, and so on. This element is optional.
PropertyUsage	Property usage qualifies the property to be set. For example, if you are setting the color property, the property usage element indicates the type of color that is being set, that is, you are specifically setting the background color or you are setting the text color. This element is optional.
Property	Specifies the CSS property that you want to set by using the functional variable, that is, the background value, the color value, the opacity value, the border value, and so on that you want to set. Property is the last element in the structure to make it easy to understand what is being set or specified by the functional variable.

For example: --pt-button-primary-active-background-color.

In the following example, you use functional variables to specify the background color and text color in your construct instead of using hard-coded colors.

html, body, form {
  height:100%;
  background:var(--pt-page-background-color);
  color:var(--pt-page-text-color);
}