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.

Alika

As for the vote to close because question is "too broad" - Perhaps the downvoter is not familiar with Vaadin theming in general and Valo specifically. The Valo theme is built to be customized, with various parameters for changing colors, fonts, roundedness of corners, puffiness or flatness, animations, opacity, borders, and more. See this wiki tutorial. Before attempting my own, I’m asking if anyone has already started building a set of customization code to approximate the size and perhaps look of the previous Reindeer theme. – Alika

$v-font-size is your starting point and next $v-unit-size. They both should bring you far. You could also remove all the rants in your question and make clear, if you are concerned about the visual size or the filesystem size of the generated code and i bet this question could be reopened. – Pibroch

i'd start with github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/…, change the colors to something greyish and adjust font/font-size and you are not that far off from reindeer. after all one has to go with the tides of time... – Pibroch

I upvoted it, and reported it too moderators. There is an fairly easy solution which I just implemented in our app (posted here in @Pibroch comment). Why someone would want to close this question? – Deontology

@Deontology the valo theme demo nowadays even provides an example for this github.com/vaadin/valo-demo/blob/… – Pibroch

@Basil You're right! It was a misunderstanding on my part. Thanks for the clarification! The comment have been deleted. – Snub

The Valo theme demo with Reindeer sizing seems to be here. From the popup menu in the upper right corner choose “Migrate Reindeer”. These dozen lines of CSS may be in play, but I have not verified that. The widget sizing does seem better to me. But the thin fonts are not appropriate for business people using an app for much of their job. – Alika

This wiki page lists the main variables defined in Valo: Valo theme - Getting started – Alika

FYI, in Vaadin Flow (versions 10 to 14), the successor to Valo theme is Lumo theme. As of Vaadin Flow 13 and 14, you can add an annotation to enable Compact mode, reducing the size and spacing of widgets. See Question, Engage “Lumo compact mode” in Vaadin 13 and later, for smaller size layouts – Alika

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.

Gauguin

I do not understand your first paragraph above the divider line. If you are simply saying your solution is also mentioned in the comments, no need to explain that (except maybe for a mere mention of the comment poster’s name for credit). Quite often on Stack Overflow people mention a possible solution briefly as a comment while others take that idea, flesh it out by adding details and examples, and post an Answer. – Alika

Ok, I just wanted to clarify that I do not want to "steal" the credits :) – Gauguin

Then just add a brief note like "per the comment by AliceW" or "as noted in comment by SusanH". As it is now, that opening paragraph is a confusing distraction. – Alika

I just removed it completely then. – Gauguin

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";

Minium