Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extensive list of Lumo Variables in Vaadin

I would like to do custom theme variations for my Vaadin 20 app. For that I am going to give custom values to Lumo CSS variables available, like --lumo-base-color and --lumo-primary-color. The problem is that I can't find an extensive list of variables that are available.

My questions are:

  1. Where can I find a list of all the variables that are themeable?
  2. Is there a good theme example with a lot of these variables set, that I could use as an example?
like image 445
Jens Jansson Avatar asked May 11 '21 07:05

Jens Jansson


2 Answers

This is an excellent question, as it is often a best practice to start customization of the application on high level by redefining values of the Lumo CSS variables.

Take for example elements like ComboBox drop down button, text field clear icon, DatePicker popup button all use variable --lumo-contrast-60pct. It is easy to define its value in shared global css, and the new color will be consistently used by all the components. This is better approach than defining a custom css per component basis. See example below, where original graphite grey color has been changed to blue.

enter image description here

  1. In the design system foundation documentation, each sub-section will list the available variables.

Additionally, if you inspect the <html> element in your browser development tools, you can see them listed there also.

enter image description here

  1. In the Lumo theme editor demo you can change as many styles as you wish. It then lets you download a file that lists all the variables that you changed.

Another option is going to https://start.vaadin.com, where you can also customize some aspects of the theme, and the downloaded application will include those definitions.

like image 55
Erik Lumme Avatar answered Nov 15 '22 23:11

Erik Lumme


In your running application, you could paste something like the following ugly snippet into your DevTools console to output all the Lumo custom variables and their current value:

[...document.styleSheets].forEach((sheet) =>
  [...sheet.cssRules]
    .filter((rule) => rule.type === 1)
    .forEach((rule) =>
      [...rule.style]
        .filter((style) => style.startsWith("--lumo"))
        .forEach((style) => console.log(style + ": " + rule.style.getPropertyValue(style)))
    )
);

This will spam your console with something like

--lumo-border-radius-s:  1em
--lumo-base-color:  hsl(214, 35%, 21%)
--lumo-tint-5pct:  hsla(214, 65%, 85%, 0.06)
--lumo-tint-10pct:  hsla(214, 60%, 80%, 0.14)
...

You might want to adjust the snippet to produce something more useful, depending on if you want to just use it as reference, or copy & paste into your theme.

like image 40
Marc Englund Avatar answered Nov 15 '22 22:11

Marc Englund