How to create a theme with small size for all components?

Support
#1

Hi,
I am building a new application using the latest version of Jmix (2.1) and I wish to apply small size to all components since my views contain a lot of fields / components. I suppose that I have to create a new theme and apply it to the application but I am not aware of the related css variables that must be used.

Thank you,
George

#2 
import com.vaadin.flow.component.dependency.JsModule;

@Route("")
@ViewController("hppui_MainView")
@ViewDescriptor("main-view.xml")
@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
public class MainView extends StandardMainView {
}
1 Like
#3

Hi,

In addition to the preceding example of using Vaadin’s compact preset, you can define preferable sizes in the lumo-editor and then import styles to your’s app theme.

Regards,
Gleb

1 Like
#4

Thank you Ray

#5

Hi Gleb,
Following your suggestion I’ve defined the sizes and spacing using lumo-editor. In addition I’ve defined the Button as ‘Border & Gradient’ and Text field style as ‘Border’. I ended up with this result:

Copy the HTML below to a new .html file and import it in your app after the default Lumo theme imports.

For example:

<link rel="import" href="my-lumo-theme.html">

<custom-style>
  <style>

html {
  --lumo-font-size: 1rem;
  --lumo-font-size-xxxl: 1.75rem;
  --lumo-font-size-xxl: 1.375rem;
  --lumo-font-size-xl: 1.125rem;
  --lumo-font-size-l: 1rem;
  --lumo-font-size-m: 0.875rem;
  --lumo-font-size-s: 0.8125rem;
  --lumo-font-size-xs: 0.75rem;
  --lumo-font-size-xxs: 0.6875rem;
  --lumo-line-height-m: 1.4;
  --lumo-line-height-s: 1.2;
  --lumo-line-height-xs: 1.1;
  --lumo-size-xl: 2.5rem;
  --lumo-size-l: 2rem;
  --lumo-size-m: 1.75rem;
  --lumo-size-s: 1.5rem;
  --lumo-size-xs: 1.25rem;
  --lumo-space-xl: 1.75rem;
  --lumo-space-l: 1.125rem;
  --lumo-space-m: 0.5rem;
  --lumo-space-s: 0.25rem;
  --lumo-space-xs: 0.125rem;
}

[theme~="dark"] {
}

  </style>
</custom-style>


<dom-module id="button-style" theme-for="vaadin-button">
  <template>
    <style>:host(:not([theme~="tertiary"])){background-image:linear-gradient(var(--lumo-tint-5pct), var(--lumo-shade-5pct));box-shadow:inset 0 0 0 1px var(--lumo-contrast-20pct);}:host(:not([theme~="tertiary"]):not([theme~="primary"]):not([theme~="error"]):not([theme~="success"])){color:var(--lumo-body-text-color);}:host([theme~="primary"]){text-shadow:0 -1px 0 var(--lumo-shade-20pct);}
    </style>
  </template>
</dom-module>

<dom-module id="text-field-style" theme-for="vaadin-text-field">
  <template>
    <style>[part="input-field"]{box-shadow:inset 0 0 0 1px var(--lumo-contrast-30pct);background-color:var(--lumo-base-color);}:host([invalid]) [part="input-field"]{box-shadow:inset 0 0 0 1px var(--lumo-error-color);}
    </style>
  </template>
</dom-module>

My question is: can I include this HTML file into Jmix project? If not, is there a way to define Button style and Text field style without this HTML code, just CSS?
Thank you in advance.

#6

Hi,

Just copy html {...} and paste it to the styles.css file in project’s theme folder.

Regards,
Gleb

#7

Gleb,

Thank you, that works