Update button colours

[ulde01]

Design update: 2021-09-07

Change

(Old colour in parentheses)

1. Primary Button

• Default background: Dark Blue 2 (was Dark blue 1)
• Hover: Dark Blue 1 (Blue)
• Pressed: Dark Blue 1 (Blue)

2. Secondary Button

• Hover: Dark Blue 1 (Blue)
• Pressed: Dark Blue 1 (Blue)
• Disabled border and text Grey 500 (disabled background: Grey 200)

3.a. Ghost button light

• Disabled border and text: Grey 500 (disabled background: Grey 200)
• Disabled background: Transparent
• Focus gradient: Box-shadow - 0 0 6px 1.5px in 90% white
• Focus text: White

3.b. Ghost button dark

• Disabled border and text: 50% White (disabled background: Grey 200 and text: Grey 500)
• Focus gradient: box-shadow - 0 0 6px 1.5px in Grey 700 (4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue)
• Focus background: #333 (focus background: White)
• Focus text: White

4. Button link

• Hover: Dark Blue 1 (Blue)
• Pressed: Dark Blue 1 (Blue)
• Disabled text: Grey 500 (disabled background: 200)
• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue 7

7. More button

• Hover background: Dark Blue 1 (Blue)
• Pressed: Dark Blue 1 (Blue)

Reason

To reach accessibility in terms of contrast we have changed our primary blue buttons to the darkest blue (Dark Blue 2 #007ac7). This means that other states are affected needed colour adjustments.

The disabled state on a few button variations is updated to mirror their normal state. An example, if normal state is a secondary button with an outline, the disabled state with have an outline in Grey 500 and link text in Grey 500 (compared to the previous solid background in Grey 200 for all disabled buttons).

Details

https://designlibrary.sebgroup.com/components/component-button