Working with CSS Variables

Oracle introduced the Redwood color scheme for PeopleSoft applications in PeopleTools 8.60 and implements the color specifications through cascading style sheets (CSS) variables.

The advantages of re-use and consistency that CSS variables provide enable application developers and administrators to maintain consistent user experience across applications.

This topic does not attempt to describe the delivered CSS variables. The intent is to provide an overview of the CSS variables in PeopleSoft systems and their usage.

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);
}

The usage of the delivered CSS variables depends on your branding requirements.

This topic discusses:

  • Use of CSS variables in your custom style sheet.

  • Use of CSS variables in content branding.

Using CSS Variables in Custom Style Sheet

You can use the delivered CSS variables to automatically update any colors from the PeopleSoft application that are used by you for your custom constructs in the custom style sheet.

Consider the following example, which illustrates the use of the delivered CSS variables. You are using your custom style sheet, but you're planning to copy some of the colors from the PeopleSoft applications for your constructs, such as, the background color of the left panel, the color of the selected item in the panel, and the text color in the panel. Additionally, you plan to synchronize the colors that PeopleSoft applications use for these constructs with the colors for these constructs in your system. In this case, you could use the delivered functional CSS variables that are closest to the functionality you are trying to replicate within your custom style sheet. Whenever PeopleSoft applications update the colors in future releases, the colors used in your constructs will be automatically updated without any rework on your part.

Note: In your custom style sheet, if you plan to use only your colors or color scheme for your custom constructs and do not plan to use any of the colors from PeopleSoft applications, you do not need to use the delivered CSS variables.

Using CSS Variables in Content Branding

Another advantage of CSS variables is that it gives you greater control over global changes to controls internally. But you should be careful about making global changes because you should consider all contexts of usage. An example of the global changes can be seen in the delivered style sheet – PT_CUSTOM_PROPS_PRE860 – in which the palette is redefined with the pre-8.60 color scheme. This reversion style sheet allows you to retain the 8.59 color scheme. For more information on the delivered style sheet for reversion to the 8.59 color scheme, see Assembling Branding Themes, Reverting Branding to Pre-8.60 Visuals.