Ghost / Subtle Button appearance

[yinonov]

Button appearances explainer

proposing subtle appearance -
To consider a new action appearance we have to take the following rationales in account.

Currently, we have 3 types of button styles in Vivid. Adding a 'subtle' style may result in over-flooding the button variants.

The 'subtle' style adds graining and noise to the UI.
From an accessibility point of view, there is no benefit in adding 'subtle' buttons, the contrast between the button's background and the main screen's background doesn't have a sufficient contrast ratio and will result in users with low vision and color blindness not seeing the difference. This might not be an accessibility violation but it will result in different user types having different experiences in the product.

Examples of 'control/action bars' using ghost styled buttons from other applications -

1. Github
   

2. Slack
   

3. Webex

4. Zoom
   

5. Microsoft teams
   

Examples of 'control/action bars' using ghost styled buttons in Vonage applications -

1. The following is a Meeting upcoming design utilizing the Vivid ghost buttons and design best practices
   

2. Meeting whiteboard
   

Google meet & material differs from Vonage's design system in many aspects. This is a legacy and modern implementation concern

In 'Educational' project the 'Top-Bar' utilizes Vivid ghost button (on the right),

In the 'Button-bar' action items differ from the following bars with ghost button where the initial background has a subtle shade of contrast

Alternatively, there are patterns where components library maintainers keep a certain level of customizability by exposing CSS variables but this puts lots of trust in authors and may lead to inconsistent look & feel very quickly

This is a common design tradeoff between many or few options