Scale down the Valo theme’s spacing and widget size to that of the Reindeer theme

Question

The new Valo theme is now the default in Vaadin 7.3 apps. This theme renders visually with widgets (buttons, fields, and so on) that are dramatically larger (wider and taller) than in the previous default Reindeer theme.

This kind of look is now popular in mobile apps in Android and iOS 7/8 as well as some web sites. But those contexts are for brief usage in the range of mere minutes. In contrast, business-oriented desktop-style apps are used by people for much longer work sessions, perhaps for hours on-and-off all day. And business-oriented apps present much more information in a denser format. For such use, the default rendering of the Valo theme is inappropriate. Specifically, the fonts are too thin and faint, and the size is too large for fonts and widgets.

Valo's claim to fame is that it is built to be adjustable and easy to morph just a few lines of Java and/or CSS code. Has any one experimented with altering Valo to be sized similar to the Reindeer theme? Any source code or instructions to share?

To be clear, my goal is simply reduce the visual height & width and their font size. I'm not asking about altering the design, I would be grateful just to get back some pixel space. I'm looking simply for the easiest and safest way to get the Valo widgets’ size to parallel the visual size of their counterparts in Reindeer theme.

In the short term, I will continue to override the default to use Reindeer, as described on this StackOverflow.com Question, Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app. But longer term, the Vaadin team is betting big on Valo. Eventually Reindeer will fall out of favor, so I would like to learn how to transition.

I did open Ticket # 14,909 to suggest providing a switch to make Valo automatically downsize to Reindeer scheme.

Some people have misread this post: we are not talking about storage size on disk. We are talking about pixels here, not bits. Visual size, not file size. Graphical layout, not widgetset optimization.

This Question was inexplicably closed as "too broad". Yet it continues to receive up-votes. I ask you up-voters to vote to re-open.

Answer 1

To use the valo theme as a replacement for the reindeer theme you can configure the theme variables used for valo just like this:

$v-font-size: 12px;

$v-unit-size: 26px;
$v-unit-size--small: 20px;
$v-unit-size--tiny: 18px;

$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;

(Source: Valo Demo Project - Reindeer Theme)

---

The section Book of Vaadin - Valo Theme explains in depth where to put those variables and how to customize the theme.

Answer 2

I also had the same issue when I switched from Reindeer to Valo theme.Using small font size and family before loading the theme solved my problem.

$v-font-size: 12px;
$v-font-family: sans-serif;

@import "../valo/valo.scss";