Color Variable Guideline

1 Guideline

This guidline describes how color variables should be initialized and used in LESS.

1. Colors in stylesheets should always be set by variables.
2. All color variables shold be set in \templates\default\less\variable.less.
3. Color variants should be set as a new color variable. You never know, if a variant eg. (lighten(@brand-primary,15%)) looks well for users brand color.
4. Try to make use of existing variables declared in \Services\UICore\lib\bootstrap\less\variables.less or  \templates\default\less\variable.less.
5. Only reuse variables context-sensitive. (e.g. @link-color should not be used to define a container background, even if it should have the same color.
6. Ad "il-" as prefix to new variable names to distinguish them from bootstrap variables.
7. Do only make use of a predefined gray shades palette . 7 should be enough.
   
   

Shades of gray suggestion

@il-gray-darkest:    #222222;
@gray-darker:     #434343;
@gray-dark:         lighten(@gray-darker, 14%);
@gray:                   lighten(@gray-darker, 25%);
@gray-light:          lighten(@gray-darker, 45%);
@gray-lighter:      lighten(@gray-darker, 68%);
@il-gray-lightest: lighten(@gray-darker, 72%);
@il-white:              #ffffff;

2 Status

• Effective from release: { not approved yet | x.y }
• Approved by Jour Fixe at: { link to Jour Fixe agenda }
  
• Implementation status: { implemented completely | partly implemented | needs implementation }
• Funding for streamlining existing features: { name of organisation }
• Implementation of guideline: { all developers | name of responsible developer }

3 Components that are not compliant with the Guideline

• …

4 Discussion

JF 16 Mar 2015: Jean Luc and the kitchen sink project will work out a joined proposal for this point. In general we support the idea to optimize the use of color variables.