Problem with selected color

Flow
1

I have problem with selected color in valo theme with light focus color
I use this code in css variable file with Standard Valo background:

$v-focus-color: #07bc8d;
$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;
$v-gradient: v-linear 8%;

When select menubar or combox the the valo set color: # 090F0E
for selected item.
Like the standard focus color valo would be set a light color for this atribute…
Why? How can I fix?
26407.png
26408.png

2

$v-focus-color: #197EDE;
$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;
$v-gradient: v-linear 8%;

3

@R V
I want to change the default focus color with various color. #197EDE is similar to original color.

The problem is in vaadin “function” that calculate selected color…
Can I modify the function?
The only soluction is to use css to override the selected color ?

4

any ideas?

5

If I understand you correctly, you want the text color to be either white or black, depending on the background.
This is exactly what we wanted as well

By default valo computes a “pretty” color instead, with low contrast.
We got the following workaround from vaadin: 1) import valo, 2) override the function:

<setting variables>

@import "../valo/valo";

// Override the font color function to get high contrast color
@function valo-font-color($bg-color, $contrast: 0.8) { 
  @if type-of($bg-color) == color {
    @if is-dark-color($bg-color) {
      @return #fff;
    } @else {
      @return #000;
    }
  }
  @return null;
}

@mixin <my project> {