How to enlarge calendar fonts

[qweluke]

Description

So I am using Stencil.js to build my web comonent and I wanted to use datepicker but it seems that ther's this weird issue with font-size in calendar dropdown and I don't know how to fix it
I think it might be some kind of issue with em fonts as I am not able to define root size so I would like to switch them to px..

As for now I am using this styles:

<vaadin-date-picker
     min={this.form.checkInDate || this.yesterdayDate}
     value={this.form.checkOutDate}
     id="end"/>

:host {
  --lumo-font-size-m: 14px; //changes text size in input only
  --vaadin-text-field-default-width: 100%;
  --lumo-contrast-10pct: #fff;
  --lumo-border-radius: 6px;

  font-size: 62.5%; // not working
}

Expected outcome

Actual outcome

https://i.imgur.com/L50wpxw.jpg

Browsers Affected

all

[web-padawan]

The date-picker overlay is teleported under document.body, in order to avoid any problems with z-index on positioned ancestors. So you need to override custom CSS properties under html:

html  {
  --lumo-font-size-m: 1.25rem;
}

[qweluke]

OK, I have added styles via JS and it is working now

@Component({
    tag: 'my-fancy-component'
})
export class MyApp {

    @Prop({ context: 'store' }) store: Store;
    @Prop() lang: string;
    @Prop() subid: string;

    componentWillLoad() {

        //hotfix for calendar dropdown dates size
        document.documentElement.style.setProperty('--lumo-font-size-xxs', '12px');
        document.documentElement.style.setProperty('--lumo-font-size-xs', '13px');
        document.documentElement.style.setProperty('--lumo-font-size-s', '14px');
        document.documentElement.style.setProperty('--lumo-font-size-m', '16px');
        document.documentElement.style.setProperty('--lumo-font-size-l', '18px');
        document.documentElement.style.setProperty('--lumo-font-size-xl', '28px');
        document.documentElement.style.setProperty('--lumo-font-size-xl', '28px');
        document.documentElement.style.setProperty('--lumo-font-size-xxl', '40px');


        document.documentElement.style.setProperty('--lumo-size-xs', '26px');
        document.documentElement.style.setProperty('--lumo-size-s', '30px');
        document.documentElement.style.setProperty('--lumo-size-m', '36px');
        document.documentElement.style.setProperty('--lumo-size-l', '44px');
        document.documentElement.style.setProperty('--lumo-size-xl', '56px');
)
}

[web-padawan]

I recommend using https://demo.vaadin.com/lumo-editor/ to customise Lumo variables.
Especially, the "Typography" tab provides you a set of control to adjust the font sizes.

Note that Lumo recommends to use rem units over px. You can use following sizes:

html {
  --lumo-font-size: 1rem;
  --lumo-font-size-xxxl: 3rem;
  --lumo-font-size-xxl: 2.25rem;
  --lumo-font-size-xl: 1.75rem;
  --lumo-font-size-l: 1.375rem;
  --lumo-font-size-m: 1.125rem;
  --lumo-font-size-s: 1rem;
  --lumo-font-size-xs: 0.875rem;
  --lumo-font-size-xxs: 0.8125rem;
}

You can add these properties via JS as you do in the above example, if that works better for you.