cuba-platform / helium-theme

Modern configurable theme for CUBA applications

Helium Theme

Overview

Designed from scratch, Helium theme provides a modern look and feel and customization capabilities. Main features:

Color Presets

CSS variables are used for colors. As a result, it's possible to apply different color presets on the fly, without theme recompilation and app restart. There are two color presets provided out of the box - light and dark.

To manage presets available for end-users modify the following properties in web-app.properties

cuba.theme.helium.modes = light|dark
cuba.theme.helium.defaultModeToUse = light

Also, you can create your own color presets using the online theme editor (see below).

Size Presets

There are three built-in presets for size: small, medium and large:

Similarly to the colors presets, you can modify presets for sizes in web-app.properties via the following properties:

cuba.theme.helium.sizes = small|medium|large
cuba.theme.helium.defaultSizeToUse = medium

Per-user settings

A user can set the desired color and size preset in settings screen (Help > Theme Settings). There is the helium-theme-minimal role that enables access to the settings screen.

Installation

Install add-on from marketplace or by the following coordinates, using CUBA Studio:

com.haulmont.addon.helium:helium-global:<version>

Pick a version which is compatible with the platform version used in your project:

Platform Version	Add-on Version
7.2.4+	0.4.x
7.1.5+	0.1.x

Theme Editor

Theme editor allows you to easily create custom color presets.

Applying Custom Color Preset

To add a color preset you will need to extend the Helium theme. You can easily do it in Studio: in the main menu click CUBA > Advanced > Manage Themes > Create Theme Extension. Select helium in the dropdown.

Once theme extension is created, place generated CSS variables in helium-ext.scss file, e.g.:

@mixin com_company_demo-helium-ext {
  /* Basic */
  --primary-color: #0097D8;
  --primary-color_rgb: 0, 151, 216;

  /* Common */
  --primary-color-shade-1: #0084BD;
  --primary-color-shade-2: #0076A8;
  --primary-dim-color: #2EC0FF;

  &.dark {
    /* Common */
    --primary-dim-color: #195b7c;
  }
}

Browser Compatibility

Helium works in the latest versions of modern browsers that support CSS variables. IE 11 is not supported out of the box since it does not support CSS variables. It is possible to use polyfill for IE 11, however, it is not tested and may cause performance issues

helium-theme's Issues

Fix style for the emptyStateLinkMessage attribute of Table

Fix 'powered by' link spacing

AR:

ER:

Incorrect display of the theme in IE11

Incorrect display of the theme com.haulmont.addon.helium: helium-global: 0.2.0 in IE11 (11.900.18362.0)
Chrome:

IE 11

Remove unnecessary dependencies on the default button styles

Some components depend their colors on the default button colors, that leads to unexpected changes in such components in case styles for the default button is changed.

Improve color naming

• Swap --text-color and --text-medium-color.
• Rename --primary-disabled-color.
• Rename --read-only-color.

Incorrect date displaying in DataGrid inline editor

based on forum's question

Enviroment:

CUBA Platform version: 7.2.13
CUBA Studio plugin version: 15.0.SNAPSHOT2712-202
IntelliJ version: IntelliJ IDEA 2021.1 (Community Edition)
Helium add-on v.0.3.1

TC:

1. Create new project
2. Add Helium add-on
3. Create new entity with LocalDateTime field -> generate standard screens -> choose DataGrid in browser screen -> finish
4. Open entity browser -> add to datagrid 'stylename="small"'
5. Run app -> open Settings -> choose theme Helium -> logout and login
6. Open entity browser -> Create new instance -> save
7. Double-click created instance

AR:

Add the ability to change theme default values

Description

It would be very useful if we could configure theme defaults like application properties. For instance,

cuba.theme.defaultModeToUse = dark
# or
cuba.theme.defaultSizeToUse = small

Icons in the new login are not displayed correctly

As you can see in the image the icons and text of the new login are not aligned correctly.

Simple TokenList with defined size does not have a right border radius

Simple TokenList with defined size does not have a right border radius.

<tokenList id="tokenList">
    <lookup/>
</tokenList>

Some color variables of RichTextArea do not change depending on the theme

For example:

--richtextarea-toolbar-background-color: #F2F2F2;
--richtextarea-toolbar-togglebutton-down-background-color: #CECECE;

The --richtextarea-toolbar-background-color may depend on --dim-color variable.

Also the text inside the RichTextArea editor should depend on theme.

Increase report wizard height

Related to cuba-platform/reports#266

• Install reports add-on
• Open Reports > Reports
• Press Create > Using wizard

Standard preset:

Large preset:

Typo in side-menu variables

  /* SideMenu */
--sedemenu-item-selected-background-color: #003ED5;
--sedemenu-item-selected-color: #0090CE;

(sede instead of side)

QA

Please also check the above variables work in the side menu.

Use CSS variables for border-radius

Add built-in role

LinkButton with primary=true displays as regular button

<linkButton primary="true" caption="Link Button"/>

AR:

ER:

Inappropriate position of suggeestion list in case scaling >100%

project testsuggesionfield.zip

Related issue - https://www.cuba-platform.com/discuss/t/new-version-7-2-7-still-a-bug-when-using-suggestionfield/13211/3

env:
platforn v. 7.2.7
laptop with scaling = 250%

Steps to reproduce:

• open attached project -> start app
• login app -> TestEntity -> Create
• linkedfield -> input 'Link'

ER: list with suggestions should display under linkedfield
AR: list with suggestions displayes above linkedfield

Reorder variables

Rename middle size preset to medium in settings screen

Consider applying primary style to button with primary action

See action's primary attribute.

Steps to reproduce

• set $cuba-highlight-primary-action:true;
• wire button to primary action

    <actions>
        <action id="primaryAction" primary="true"/>
    </actions>
    <layout>
        <button action="primaryAction" caption="Button with primary action"/>
    </layout>

Button is not highlighted.
Also consider to set $cuba-highlight-primary-action to true by default in Helium.

Table and DataGrid with no-stripes style have incorrect color for selected row

See jmix-projects/jmix-ui#538

Implement missing styles

Solution

The following styles have been supported:

Containers

• borderless - GroupBox, Accordion
• well - GroupBox
• v-panel-caption - HBox

Button

• icon-align-top - https://demo10.cuba-platform.com/sampler/open?screen=styles-button

Fields

• borderless - LookupField, DateField, TimeField, TextField, TextArea, ResizableTextArea, PickerField and its inheritors

Fixed bugs

• #49
• #46

P.S GroupBox light and classic will be implemented in a separate issue

Good if this can be available to import in classic vaadin project

This theme is a very pleasing one. How can this be used in any standard vaadin project ?

DateField does not hide required indicator

If the datefield is indicated as not editable its requirement indicator is not hidden. I don't know if it should be hidden or not, since in the other types of components the indicator is not shown if they are read-only. In the image you can see.

Personal size does not apply for some components

Environment

• Platform version: 7.2.3
• Add-on version: 0.2.0.BETA.5

Description

• Set small size in Theme Settings
• Try to set a different size for some components

A.R. Nothing happens

Components:

• Button
• PopupButtom
• LinkButton

Synchronize user settings with browser cookies

Table column header context menu doesn't adapt to size preset

1. Set small size preset
2. Right-click on table column header

ER:
Context menu adapt to size preset

AR:

Column with link attribute is not styled

Description

For entity column add:

<column id="order" link="true"/>

AR

Colors extension point

Provide an extension point (e.g. file with variables) to apply custom preset generated with editor.

Typo in --sidemenu-collapsible-controls-panel-backgroun-color

Replace --sidemenu-collapsible-controls-panel-backgroun-color with --sidemenu-collapsible-controls-panel-background-color

The small v-datefield-button has transparent background color

The small v-datefield-button has transparent background color in all theme presets:

Add derived variables calculation for colors of buttons in all themes

Dark mode

Provide dark color preset

No space between tabs if there are hidden tabs

Add a TabSheet with hidden tabs:

<tabSheet>
    <tab id="tab11"
         caption="Tab Tab 1"
         margin="true"
         spacing="true">
    </tab>
    <tab id="tab12"
         caption="Tab Tab 2"
         margin="true"
         spacing="true">
    </tab>
    <tab id="tab13"
         caption="Tab Tab 3"
         margin="true"
         spacing="true"
         visible="false">
    </tab>
    <tab id="tab14"
         caption="Tab Tab 4"
         margin="true"
         spacing="true">
    </tab>
</tabSheet>

ER:

AR:

Visited link appears hidden in Selected DataGrid/Table row

Origin: https://www.cuba-platform.ru/discuss/t/datagrid-helium-link/4403/3

GroupTable in Scheduled tasks screen displayed incorrectly

Environment

• Platform version: 7.2.3

Description of the bug or enhancement

Open Scheduled tasks screen

A.R. Table displayed incorrectly

DataGrid with no-vertical-lines style still have some lines in header and footer

See cuba-platform/cuba#3202

Implement GroupBox classic style

Implement predefined style so that the GroupBox component will look like in the other themes, i.e. has caption IN border:

Required field '*' indicator

I have looked through the files in hope of finding how the red '*' is inserted after required field captions but cannot find more than this line in modules/web/themes/helium/helium-defaults.scss:

$v-show-required-indicators:true;

I am trying to implement this in my custom cuba theme. Any help on this would be highly appreciated.

Also, I hope this kind of issue is allowed, if not, I apologize.

Some color variables of SourceCodeEditor do not change depending on the theme

The following color variables should be theme specific:

  --sourcecodeeditor-gutter-background-color: #CECECE;
  --sourcecodeeditor-gutter-active-line-background-color: #A7A7A7;
  --sourcecodeeditor-active-line-background-color: #F2F2F2;

Use --secondary-contrast-text-color as the default tooltip font color

Since Tooltip background color depends on secondary color, its text must depend on --secondary-contrast-text-color.

Single-side roundness of active item in top menu

Theme settings screen behavior when different theme is active

Currently theme settings screen does not work properly:

I suggest to show a message:

To configure Helium theme you should make it active

DataGrid context menu displays disabled actions as regular

Define a DataGrid with a disabled action

<dataGrid id="usersTable"
          width="100%"
          dataContainer="usersDc">
    <actions>
        <action id="create" type="create"/>
        <action id="edit" type="edit"/>
        <action id="remove" type="remove" enable="false"/>
    </actions>
    <columns>
        ...
    </columns>
    <buttonsPanel id="buttonsPanel"
                  alwaysVisible="true">
        <button id="createBtn" action="usersTable.create"/>
        <button id="editBtn" action="usersTable.edit"/>
        <button id="removeBtn" action="usersTable.remove"/>
    </buttonsPanel>
</dataGrid>

AR:
A disabled action is displayed as regular.

Settings partially work in custom theme based on helium

Selected color mode and size is only being applied on settings screen

Provide styles for vertical dockable SplitPanel

See cuba-platform/cuba#2785

There is no border in optionsList in some conditions

Set the following component

<optionsList optionsEnum="com.haulmont.cuba.security.entity.RoleType" stylename="small"/>

A.R.

Implement GroupBox 'light' style

Make buttons independent of their related colors

Currently, button's main color depends on the corresponding basic color, e.g. --primary-color, --success-color, etc. As a result, the user can't easily alter button's styles without changing related basic color.

Add derived variables calculation for colors of secondary button

The colors for the secondary button should be calculated from the --secondary-color:

  --button-secondary-hover-color: #4F5C78;                 // (--secondary-color) (d10%)
  --button-secondary-active-color: #3B4459;                // (--secondary-color) (d20%)
  --button-secondary-disabled-color: #A0AAC0;              // (--secondary-color) (l30%)

Automatic dark/light switching using prefers-color-scheme media

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://web.dev/prefers-color-scheme/

Request on the support forum