16 Dec
2011
16 Dec
'11
8:21 p.m.
Hi,
Since we introduces ColorThemes in XE 2.0 we've used them constantly, being
a great improvement for the cases when we wanted to rapidly change the
color variables used.
The problem with the ColorThemes is that they contain a limited number of
variables. There are places in Colibri where we've recycled and used
variables that were not intended to be used there, for example:
- Administration's vertical-menu is using
$theme.panelCollapsedBackgroundColor (which was intended for the collapsed
state of the panels);
- Suggest search results is using for it's .resultContainer also
$theme.panelCollapsedBackgroundColor;
- etc.
Also there are some variables in the ColorThemes like
$theme.textPrimaryColor and $theme.textSecondaryColor or even
$theme.backgroundSecondaryColor that are used quite randomly in the code
(all being shades of gray in the default theme). Not knowing exactly what
is the purpose and usage of a color is very easy when you create a
ColorTheme to chose colors that in practice will not provide enough
contrast or that will not look very nice together.
Since their release, we've added just 6 new variables (2 for the "Add" menu
and 4 for the notifications colors: warning, error, success and info). One
of the reason behind not adding new colors was not to confuse the user with
a wide range of color variations. The colortheme wizard was great at making
it easy for the user to change the 36 variables, but having 50+ variables
to set could be a difficult/complex task even when using a Wizard.
Although when we created ColorThemes we had in mind that they will be skin
independent I don't know if in practice this will be still valid. When
we're going to create a new skin for XE it will have a different layout, a
different semantic of the variables names and a different color pool need.
These needs are not mappable on what we currently have.
So I think the ColorThemes should be skin dependent and also version
dependent in order to assure that is gonna look the way it was originally
intended to look.
For example I want to add some CSS3 gradients for the 3.4 Colibri skin, but
I don't have enough variables to specify the gradient shades. To solve that
I've used non semantically variables combinations like:
background-image: -moz-linear-gradient(top, $theme.linkColor 0%,
$theme.buttonPrimaryBackgroundColor 100%);
background-image: -moz-linear-gradient(top,
$theme.pageContentBackgroundColor 0%, $theme.buttonSecondaryBackgroundColor
100%);
Even though the combination will work for the ColorTheme defined specially
for XE 3.4, this means the other existing ColorThemes will be used in a way
they were not designed for (like ColorThemes.Bordo theme, etc.) thus not
being as good looking as before when applied on the new skin.
The same use case will be for any other skin that we will create for the XE
4.x. IMO you can't assume that any defined colortheme will work
"graciously" independent of the skin applied and version used. (they will
work but the color mix will be random).
So another solution would be add more colors to the ColorTheme. For
variation of Colibri this will work, but for a new skin (that maybe will
not have 2 sets of menus, or will not have 2 separate colors for the
background and the content) all the semantic behind the variables naming
will fail. We will end up with variables inside the colortheme that may
never be used inside the new skin code and I don't even imagine how the
ColorTheme Wizard would look like (a nice idea would be to adjust itself
dynamically dependent of the enabled skin).
Also I want to know what is your opinion regarding adding new variables.
What is the backward compatibility strategy for that? Right now, we have a
fallback ColorTheme that provides fallback colors in case the ColorTheme
doesn't have those colors set. But this does not assure that installing an
"old" red colortheme will look nice with the fallback blue colors. We are
not telling the user anywhere that there are missing colors in the
installed colortheme and also in the wizard is hard to know what colors are
defined and what are the fallback ones (if you know what colors are missing
than you can manual define them and you don't need to cover all wizard
dialogs in order to find the inconsistencies).
So IMO the only solution is to have ColorThemes designed dependent of a
skin and a version, with the possibility to let the user manually enhance
and reuse old colortheme to work on the new versions.
Maybe you have other solutions.
Thanks,
Caty