Documentation

Styling

Customizing the linkki theme

For general information, see the Vaadin documentation on application themes.

In general, a certain folder structure is needed for a custom theme. This structure depends on whether the theme will be directly used in the application in which it is defined, or will it be packaged to be used in a different project.

For direct usage, the minimum requirement includes a folder with the theme name in frontend/themes, with a styles.css file and a theme.json file.

Folder structure for a custom theme for the own project

frontend
└── themes
    └── my-theme
        ├── styles.css
        └── theme.json

If the theme needs to be packaged for other projects, the theme folder must be in src/main/resources/META-INF/resources/themes.

Folder structure for a custom theme that needs to be packaged

src
└── main
    └── resources
        └── META-INF
            └── resources
                └── themes
                    └── my-theme
                        ├── styles.css
                        └── theme.json

In both cases, the theme.json file must include the following configuration:

{
  "parent": "linkki"
}

The styles.css file contains the CSS customizations one wants to make in the theme. For most simple changes, adjusting some of the Lumo CSS properties should suffice. The Lumo Theme Editor is a useful tool to visualize the possibilities.

CSS Custom Properties in linkki Theme

linkki theme defines CSS custom properties which is the easiest way to customize the UI. These CSS custom properties representing colors, fonts, sizes and other styles, which are used in various components. The style properties can be modified to change the styling either globally, or in a certain scope. Vaadin documentation provides some examples on how to customize the style properties. As linkki theme is based on the Lumo theme, all Lumo style properties are also available.

Colors

Input Fields

The following style properties define the appearance of all input fields.

Table 1. Input Field Properties
Function	Property	Default Value
Background	--linkki-input-background	--lumo-contrast-10pct
Background on hover	--linkki-input-background-hover	--lumo-contrast-20pct
Border color for readonly	--linkki-input-border-color-readonly	--lumo-contrast-20pct
Text color for readonly	--linkki-readonly-text-color	--lumo-body-text-color

Info

Info colors are used to display information that should be visually highlighted, but does not have a great impact.

Table 2. Info Properties
Function	Property	Default Value
Info color	--linkki-info-color	hsl(213, 80%, 50%)
Info color with 10% opacity	--linkki-info-color-10pct	hsla(213, 80%, 49%, 0.1)
Info color with 50% opacity	--linkki-info-color-50pct	hsla(213, 80%, 49%, 0.5)
Info text color	--linkki-info-text-color	hsl(213, 80%, 50%)

Warning

Warning colors are used to display information that should raise caution.

Table 3. Warning Properties
Function	Property	Default Value
Warning color	--linkki-warning-color	--lumo-warning-color
Warning color 10% opacity	--linkki-warning-color-10pct	hsla(45, 100%, 60%, 0.3)
Warning color with 50% opacity	--linkki-warning-color-50pct	hsla(45, 100%, 60%, 0.5)
Warning text color	--linkki-warning-text-color	--lumo-warning-text-color

Success

Success colors are used to display result messages of an successful operation, or messages that indicate that a process can be continued. They are used to display validation messages, e.g. on fields or in notifications.

Table 4. Success Properties
Function	Property	Default Value
Success color	--linkki-success-color	--lumo-success-color
Success color with 10% opacity	--linkki-success-color-10pct	--lumo-success-color-10pct
Success color with 50% opacity	--linkki-success-color-50pct	--lumo-success-color-50pct
Success text color	--linkki-success-text-color	--lumo-success-text-color

Error

Error color indicates that a process cannot be started or continued. They are used to display validation messages,e.g. on fields or in notifications

Table 5. Error Properties
Function	Property	Default Value
Error color	--linkki-error-color	--lumo-error-color
Error color with 10% opacity	--linkki-error-color-10pct	--lumo-error-color-10pct
Error color with 50% opacity	--linkki-error-color-50pct	--lumo-error-color-50pct
Error text color	--linkki-error-text-color	--lumo-error-text-color

Fonts

Lumo default font family is modified to make sure that Segoe UI as system font is preferred over Robot font.

Interaction

This CSS property is useful for adjusting the way how the application signals clickable elements to users of pointer devices. linkki follows the web approach and uses the pointer (i.e., hand) cursor for clickable items by default.

Table 6. Cursor
Function	Property	Default value
Clickable cursor	--lumo-clickable-cursor	pointer

Loading indicator

The position of the loading indicator can be configured with the following css properties:

Table 7. Loading indicator
Function	Property	Default value
Top position	--linkki-loading-indicator-top	auto
Bottom position	--linkki-loading-indicator-bottom	0

In de linkki theme the loading indicator is configured to be displayed at the bottom of the page by default.

Examples

loading indicator at the bottom of the page

--linkki-loading-indicator-top: auto
--linkki-loading-indicator-bottom: 0

loading indicator at the top of the page

--linkki-loading-indicator-top: 0
--linkki-loading-indicator-bottom: auto