I've had the chance to spend time with Shakeeb Rahman at Kscope15 and talk about some of the new APEX UI features.
From the beginning I thought Theme Roller was going to be a gimmick... something only usable through the Universal Theme boundaries.
Turns out I was wrong, Theme Roller is 100% customizable.
In the past months, I've been putting a fair amount of time in this theme Material APEX (Demo) (Source).
General feedback is positive, but people were struggling with changing the default colors I had chosen (Cyan and Red).
This was where I lost most people and caused the decision not to use the theme.
LESS is a CSS preprocessor that allows CSS enhancements such as variables and nesting.
The LESS file is the brain that controls everything that happens with Theme Roller; starting from groups, variables, selectors and finally CSS styling.
"name" can be a simple String, it will appear in the Theme Roller.
Again, variables are parsed as LESS comment blocks.
In LESS, variables are prefixed with @. You need to define them in the comment block as well as the variable itself.
"var" can be anything you want. You are going to reference this variable later.
"group" needs to match previously defined groups.
Now the variables are ready to be used, you simply need to apply CSS over them.
Now make it your own!
Important notice: if you are planning on using the Universal Theme for your project, this technique is not recommended because you might not be able to benefit from future updates from the APEX team. You've been warned but I still encourage you to customize your styles!