Valo Button Color

First of all, it needs to be said that Jouni’s work is fantastic. Valo is indeed a fresh breath. I’ve been pixel bashing for a few days to make sense of it all after migration from a Reindeer application to Valo. Mostly successful. But I wonder:

  1. Given an established overall background color, is there a hook to modify the basic colors of the buttons “primary”, “friendly” and “danger” and keep all of the calculations that create the button’s gradients, borders, font color etc?

  2. Is there a way to create a new button style “warning” (based on a yellow for example) and make use of all of Jouni’s magic calculations?

Overall, I’m very pleased with Valo, and look foward to a bit more documentation on some of these tweakables.

Peeking at Jouni’s source pointed to this which does the trick.

.v-button-test {
      @include valo-button-style($background-color: #ccccff);
    }

Thanks Steve for the kind words! I really appreciate it!

Glad that you figured out a solution yourself to the second question. For the first, there are global variables for both friendly and danger colors, $v-friendly-color and $v-error-indicator-color respectively. The primary button color is the same as $v-selection-color. The latter two affect other parts of the UI as well, so it depends if it’s suitable to adjust those directly.

The Sass API for Valo is available for extension (we can’t take anything away or modify any calculations any more, really), so we could add a more variables to adjust just some very specific parts of the UI. But I’m waiting for more feedback before we add any more API, just to get a better feeling what kind of things are most needed. This is all in all a pretty new territory for all of us, so it’s going to be a learning experience :slight_smile:

While waiting for more detailed/comprehensive tutorials, you can already start browsing the SassDoc for Valo at
https://vaadin.com/api/valo
(not complete at the time of writing, but working on it this week).

Hi Steve

I have some problems setting custom style for button. This great scss work for me only for clean button style.

  .v-button-confirm {
    @include valo-button-style($background-color: #eb7b3f);
  }

After adding additional style to button btn.addStyleName(ValoTheme.BUTTON_SMALL), generated css for v-button-custom overrides v-button-small settings. So the button stays with default normal size.

Is it possible to set only only backgroud?
Thank you

.mytheme .v-button.confirm {
   [b]
 height: 30px;
[/b]
    [b]
padding: 0 13px;
[/b]
    color: #f9f3f0;
    font-weight: 400;
    [b]
border-radius: 3px;
[/b]
    border: 1px solid #b96131;
    border-top-color: #ba6835;
    border-bottom-color: #b0552a;
    background-color: #eb7b3f;
    background-image: -webkit-linear-gradient(top, #ec8444 2%, #df6c36 98%);
    background-image: linear-gradient(to bottom,#ec8444 2%, #df6c36 98%);
    -webkit-box-shadow: inset 0 1px 0 #ed9e73, inset 0 -1px 0 #d86834, 0 2px 3px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 #ed9e73, inset 0 -1px 0 #d86834, 0 2px 3px rgba(0, 0, 0, 0.05);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.mytheme .v-button-small {
    [s]
height: 24px;
[/s]
    [s]
padding: 0 11px;
[/s]
    font-size: 11px;
    [s]
border-radius: 3px;
[/s]
}

Hi Primoz,

If you set the unit-size to “null” in the mixin call, it doesn’t output any properties that affect the sizing. So the following should work in your case:

.v-button-confirm {
@include valo-button-style($background-color: #eb7b3f, $unit-size: null);
}

Thank you Jouni
It works.

So, any mixin is possible to use as stand alone css generator for components. Just have to read Valo Api, analize, supply needed parameters, check ifs, and rule the web