[Valo] Basic component styling question

Vaadin 6 / 7 / 8
1

Hi all,

I have a basic question about styling your Vaadin components with Valo. In the theme.scss file i only define the background color for my theme.

$v-background-color: hsla(213, 100%, 31%, 1)

The components change there appearance correctly according to the given color.

Button


TextField


Now i have a specific layout with a different background color. How can i achieve that
all components
 in this layout change accordingly to the background color?

I tried using the button mixin from the
SassDoc
 but did not come to the same result.

$v-background-color: hsla(213, 100%, 31%, 1);  

@import "../valo/valo.scss";

@mixin valotest {
 @include valo;
 
 .mylayout{
    $color: hsl(210, 0%, 98%);
    background-color: $color;
   
    .v-button{    
        @include valo-button-style(... , $background-color: $color, ...);
    }
 }
}

A short example or hint would help.

Thank you in advance

Johannes