Details

This feature request is a warehouse for specific style updates related to the angular upgrade. In order to conform with new MX styles and maintain a minimum change for CFA user, the CFA MX team will us a hybrid version of the generally available MX palette and the existing InFORM layout.

GA Style Guide: https://hotschedules.invisionapp.com/share/ABW6X9S98GR#/screens/409273528

Site Wide Rules

1. No drop shadows on any element. This includes dropdowns, input fields, modals, etc...
2. Italic font style is reserved for specific sections in the site where the intent is to provide the user with additional information. Italics should not be used in tables (even as sub-text), date pickers, etc...
3. The fonts themselves are not changing in this update. Only the color, weight, or style.
4. Colors and fonts should be at full transparency.

Common Elements

Color Pallete

Updated InFORM Colors:

• Global Site Header Background Color, Modal Header Background Color: #1f366c
• Table title row background: #F4F4F4
• Table Header Background: #FFFFFF
• Highlighted Option Background: #F4F4F4
• Table row background: #FFFFFF
• Table borders and dividing lines: #CCCCCC
• Active Selection Background: #F4F4F4
• Passive Selectable Item Background: #FFFFFF
• Pill Background: #1f366C
  
  
• Table Header Text, Row Header Text, Table Title Text: #4A5456
  • These options should also be bold
  • Usually these are 13px
• Table Data Text: #4A5456
  • Usually normal font style
  • Usually 13px
    
    

Single Select Drop Down List - CFAMX-12982

• Disabled Text Font Color: #CCCCCC
• Enabled Text Font Color: #4a5456
• Highlighted Selection Background Color: #F4F4F4
• Highlighted Selection Text Color: #4A5456
  
  

Filter and Sort Buttons and Input Fields

• Border: 888C90
• Text: 4A5654
• Passive Background: #FFFFFF
• Highlighted Background: #CCCCCC
• Selected Button: #CCCCCC
  
  

Modals - CFAMX-12983

• Border: #1F366C
  • 1px
• Header Background: #1F366C
• Body Background: #FFFFFF
• Footer Background: #FFFFFF
• When Required, Middle Divider Color: #CCCCCC
  • A divider after the last section is not required.

Grids and Tables - CFAMX-12856
Toasts - CFAMX-12984

Visual Aids

Current Spot Count

Updated Spot Count

Spot Count With Annotations

Current Modal

Updated Modal