Brand Colors

Intended audience: administrators Developers

AO Platform: 3.5

Overview

This topic describes the style configurations for Brand Colors.

Variable Names

--vux-primary-900

CSS Variable Name	--vux-primary-900
Light
Dark

Description

Used for file manager segmented buttons

Examples

1. File Manger toolbar - segment - button – selected.
   

   

--vux-primary-700

CSS Variable Name	--vux-primary-700
Light
Dark

Description

Used for hover of primary color.

Examples

1. Submit buttons hover.

2. Accordion header hover

3. Pivot table (SS) header background color

   

--vux-primary-600

CSS Variable Name	--vux-primary-600
Light
Dark

Description

Used for text in primary color.

Examples

1. Submit buttons text, with background is white.

2. Sidebar text color on selection & hover

3. List selected text color

4. Combo text
   

   

--vux-primary-500

CSS Variable Name	--vux-primary-500
Light
Dark

Description

Wherever blue color appearance needed, we are using this variable.

Examples

• Submit, Segmented buttons background.

• Accordion header background

• Sidebar icon color on selection & hover

• Slider handle color & Range Slider

• File manager buttons background.
  
  

  

--vux-primary-50

CSS Variable Name	--vux-primary-50
Light
Dark

Description

Used for sidebar hover background.

Examples

1. Berger menu list hover & selected background color

--vux-secondary-500

CSS Variable Name	--vux-secondary-500
Light
Dark

Description

Used for checkbox, input & text area focus border colors.

Examples

1. Checkbox border color.

2. Input & Textarea focus border color

3. Segmented active button background

4. Icon hover color

--vux-secondary-filled-checkbox

CSS Variable Name	--vux-secondary-filled-checkbox
Light
Dark

Description

Used for accent-color for checkbox buttons in OL Maps

Examples:

--vux-accent-700

CSS Variable Name	--vux-accent-700
Light
Dark

Description

Used for default styles of toc, currently these styles were not using because of solution level template, style overrides.

Examples

1. ao-vux-toc_item_selected text color.

2. .webix_list_item.webix_selected, .ao-vux-toc_indicator_checked background.
   

   

--vux-accent-500

CSS Variable Name	--vux-accent-500
Light
Dark

Description

Used for feedback icon selected color.

Examples:

Examples

1. Feedback icon selected color.
   
   

   

   
   

2. .vux_doccontent_number_container background color
   

   

--vux-accent-300

CSS Variable Name	--vux-accent-300
Light
Dark

Description

Used for highlight-violet background color in tagger.

Examples

1. highlight-violet background color in tagger.
   

   

2. tag-color-violet  background in tagger.
   

   

3. highlight.violet border-bottom color.
   

   

4. querybuilder-header-icon active icon color in query builder.

   

5. vux-richsearchpopup > list_item_history color.
   

   

Contact App Orchid | Disclaimer