Issue with Outsystems UI style guide preview after new release

1. After Outsystems UI new release on June 1st 2020, the UI components in the live style guide preview have yellow color focus when clicked. 

This is because of this : 

/* Accessibility Styles */
.has-accessible-features a:focus {
    background-color: var(--color-focus-outer);
    box-shadow: 0 2px var(--color-focus-inner);
    color: var(--color-neutral-10);

.has-accessible-features a:focus,
.has-accessible-features a:focus:hover {
    text-decoration: none;    

.has-accessible-features a[disabled] {
    color: var(--color-neutral-6);

Previously this was not the case, it seems like after the new release of Outsystmes UI , these changes are showing up on the Live Style Guide preview (Reactive). 

2. Further I noticed, while adding a new screen to the live style guide and adding UI components to the same , this issue does not occur. This is happening to only already existing screens and UI components.

3. Every time there is new update, if the UI components in Live Style guide are affected. Is it a good idea to use Outsystems UI has a base theme for our custom theme ?

Can anyone please help me ?

Thank you.  

Hi Sushma,

Thanks for reporting this. I've asked OutSystems to take a look at it, but I'd also advise you to create a Support Case for it.


The Style Guide preview has all the Accessibility features enabled by default, and after the last OutSystems UI update, there are improvements to the focus styles in order to be compliant with WCAG 2.1

You can read more about accessibility here.

When using the Style Guide preview on your environment, this can be switched off.

Hope this helps, let us know if you have any questions.

My regards