New Theme Availability

Thank you @gorelov

This there is turning into a beautiful one!! I like it.

1 Like

The new Helium theme looks good to me. It works well on my iPad Air 3 !

I am not seeing any flaws, so I am wondering how soon will it be released ?

There was another colour option (blue) in earlier beta version but i don’t see that in BETA 4 version anymore.

By design, Helium will have two predefined color variants: light (default) and dark, with the ability to add custom color variants for a certain CUBA application. Blue and the other test color variants were included to the BETA.1 as an example.

Regards,
Gleb

@gorelov
Will there be an option in the add-on to add custom colour? That will be really fantastic, can’t wait for the final release.

In order to add custom color variants, you’ll need to extend the theme. The same is required to update an existing. By the time of release, we will prepare a guide on how to do this.

Regards,
Gleb

1 Like

Assuming that the theme can be extended within the add-on so that the extended color variants are available where ever we use as add-on, is this assumption right?

Do you think it will be possible to make the corners of the tabSheet (currently almost 90% corners) similar to other components within this Helium theme?

image

Sure,


Not sure that I got your idea correct. As I mentioned earlier, in order to add custom color variants, you’ll need to extend the helium theme in a project that includes the Helium Theme add-on.

Regards,
Gleb

Any plan to integrate the Lumo Vaadin Theme into CUBA ?
It offers a very customizable editor.

Regards!

1 Like

Hi @richard.thibault,

Lumo Vaadin Theme is used for Vaadin 14, CUBA uses Vaadin 8, so that we can’t integrate it. If you’re interested in why we don’t use Vaadin 14, you may find this article helpful: Vaadin 10+ as the Future of CUBA UI.

Regards,
Gleb

Hi everyone!

Helium theme has been released! Please read this post for more details: Helium theme and editor are released - CUBA.Platform.

Regards,
Gleb

Oh thank you for this information !
Yes I red your very good and detailed article about Vaadin, but I beleaved the Lumo theme was working with Vaadin 8 as well.
Shame, I would use the other themes then :slight_smile:
Thank you for your answer !

1 Like

Hi

I was wondering if this new theme is responsive and works properly both in desktop and mobile devices without requiring any intensive editing.

Thanks

1 Like

Unfortunately, not. A theme itself can’t be responsive, it just changes UI components visual appearance.

Regards,
Gleb

Hi Gleb,
is it possible to customize helium theme showing vertical line in the tables? How can I change the no-vertical-lines predefined style?

Hi,

There are no predefined styles yet to show lines, but you can easily implement them, e.g.:

.c-table-composition.has-borders {
    $table-inner-border: he-table-border(--table-inner-border-color);

    .v-table-caption-container {
      border-left: $table-inner-border;
    }

    .v-table-cell-content:not(:first-child) {
      border-left: $table-inner-border;
    }

    .v-table-table {
      .v-table-row,
      .v-table-row-odd {
        &:not(:first-child) td {
          border-top: $table-inner-border;
        }
      }
    }
  }

Where has-borders is a custom stylename that must be added to the table component.

Regards,
Gleb

Hi Gleb, thanks. It works.
So, the only way is create custom styles? There is not possibility to custom default features? There is a guide to know how to create my own stylename with other customization? For example to change foreground, font, size etc?
With hover style I know how create custom stylename. For example I defined a red textfield with the follow features:

 .name-field-red {
    background-color: #E38E8E;
    text-align: center;
    font-size: 18px;
    color: white;
    font-family: Vivaldi;
  }

If I try to add this code in helium-ext.scss file, it works only for the text-align feature. The others are overwritten by the standard features of the helium textfields. So, can I do the same thing with helium UI? Probably in my application I need to custom not only components colors but also other features.
Thanks in advance.

Hi,

Indeed, you can implement custom styles for any component. The styles you provided work for me:

Screenshot 2020-05-06 at 11.49.31

Of course, due to helium specific, some styles written for the other themes may need some changes. In order to implement correct styles, I would recommend using Browser Developer Tools to inspect specific component and see what styles it has (see the screenshot), but it’s general HTML/CSS staff.

Regards,
Gleb