Update to Hub button theme colors

[KlaraSchmitt]

Layout enhancements

We have received many enhancement requests for our layout editor. This includes requests for column layouts, text formatting, undo/redo, and the ability to embed cards in other sites. To lay the foundation for building these features, we are slowly transitioning parts of our application to a different framework (Calcite). While our goal is that this will have limited impact on your existing sites, we will need to tweak a few patterns. 

Update to theme

One of these patterns that we will be changing is how theme is applied to buttons. Calcite uses fewer colors than Hub when it comes to calculating button styles. Our initial observations are that this can cause some accessibility contrast violations in transparent and hollow / outline buttons on themes that were previously accessible. To avoid this scenario without requiring customers to review each of their individual site themes, we are going to use the link color and the site (body) background color to generate all styles of buttons. We assume that those who are most concerned about accessible color palates will already have picked a contrast safe option for the link text used with their site background. 

Hub theme builder displaying body background, text, and link color pickers

Moving forward, solid / filled buttons will be using link color for button background and site (body) background for button text. Hollow / outline buttons will be using link color for button border and button text and they will have a transparent background that permits the site (body) background color to come through.

Filled button displaying link-color as background and two hollow buttons using link-color as border and text

The proposed release date for these changes is 02-22-2023 and at that point we would also be removing the theme pickers for button background color and button text color.

Outline buttons on rows

Please see update posted on 03/02/2023.

As a result of the new framework, outline / hollow buttons will be using a transparent background. This results in the link color / site background combo in most parts of the app. If you've set a unique row color on a Hub site or page, any outline or hollow buttons used within that row will display the row color as the button background. Consider reviewing these patterns for legibility and switching to a solid / filled button if preferred.

Survey card set to color palette of theme and button style of hollow

Gallery cards

There is one additional pattern where changes may be noticeable. The site Gallery Card has a white background and in themes where the site background is dark, link color is likely to be a light color. A light link colored outline button on a white background becomes illegible. To account for this, we will automatically try to darken the link color for outline buttons when they are present on white backgrounds. The solid button will not be affected by this issue.

Gallery card displaying darkened pink color for outline button

We’re excited to bring you improvements to the layout editor in the coming months, enabled by our transition to a Calcite framework.  

[Emily_Nilson]

Hello Hub community, we've just added an amendment to this blog post to clarify what happens in the event you have hollow / outline buttons on a row that is using a unique background color. 

[BradCarone]

Hello, 

I have created buttons / drop downs in html using a text card, do I know define the style with css? 

[RandyMcGregor3]

Body Link Color is orange:

Gallery card - Filled Button (as expected)

Hollow Button (not as expected)

I thought the hollow button outline and text would be the same as the Body Link Color. Did I miss something? 

Thank you,

Randy McGregor

[KlaraSchmitt]

Update

We appreciated the community feedback on this change related to how theme is applied to buttons. Based on that feedback, we plan to replace the transparent background on the Bootstrap outline buttons using the .btn-default class with the site-background color (as they were before). This new change was carefully considered and will streamline conversion to calcite outline-fill buttons in the future. We expect it to be included in our next release.

[KlaraSchmitt]

Hello @BradCarone, 

I am sorry for the delay. I have not forgotten about you, but I wanted to make sure I gave you accurate guidance.

If you're using Calcite buttons <calcite-button> with an href, you can use appearance="solid" to get a solid button using link-color or appearance="transparent" to get a transparent button using link-color. I might ask you to hold off on using appearance="outline". We are currently in the process of implementing an upgrade that will change how that particular style behaves and it should be finalized by the end of March.

An example of this would be:
<calcite-button href="#" appearance="solid">Button Text</calcite-button>

If you need an outline button, I would suggest using Bootstrap for now (please see my update above for expected changes.) When using Bootstrap 3 classes on a link or a dropdown, you can use .btn-primary to get a solid button, .btn-default to get an outline button, or .btn-link to get a transparent button.

An example of this would be:
<a href="#" class="btn btn-primary">Button Text</a>

[KlaraSchmitt]

Hello @RandyMcGregor3,

I understand the confusion and I apologize. Because the Gallery Cards always have a white background and we are trying to automatically handle accessibility contrast requirements for light link colors, we are running a function that darkens the color threshold based on its luminance. It is not perfect, but we are trying to account for a majority of use cases. It presently does result in gray for medium-level link colors that would fail contrast on a while background.

Currently, the outline button on Gallery Cards uses a transparent background, but perhaps we can look at other options once the calcite upgrade has been integrated with our app. In the meantime, using the solid button would give you color and also ensure that the button passes color contrast requirements.

[RandyMcGregor3]

Thank you for the thorough explanation. Nothing to apologize for, I was just making sure I understood the functionality 🙂 I will experiment with darker button colors and different backgrounds.