Documentation

Styling

Customizing the linkki theme

For general information, see the Vaadin documentation on styling applications.

In general, a CSS file is needed for styling and loaded by the application.
In Spring projects, the stylesheets should be defined in src/main/resources/META-INF/resources.
In non-Spring WAR projects, they need to be defined in src/main/webapp.

The stylesheet can then be used with @Stylesheet on top of the linkki theme.

Applying own stylings

@Stylesheet(LinkkiTheme.STYLESHEET)
@Stylesheet("styles.css")
public class MyAppShellConfigurator implements AppShellConfigurator {
    ...
}

Creating reusable themes based on linkki theme

In Vaadin, a stylesheet can be made reusable by creating a CSS in a folder with the name of the theme.

Custom theme that needs to be reusable

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

linkki theme can then be simply imported in the CSS.

As linkki theme is placed in META-INF/resources/themes/linkki/styles.css due to compatibility, it needs to be imported with

@import '../../linkki/styles.css';

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 represent 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.

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 Roboto 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