Colors should only be defined and referenced in ui/globals.less
.
If you want a red background on a div.error
, define it in global.less
and reference a generically named variable in my-feature.less
as:
// globals.less
@ui-error-bg-color: @red-1;
// my-feature.less
div.error {
background-color: @ui-error-bg-color;
}
This allows us to provide a themeable framework where the color scheme
can be changed by introducing a new globals.less
stylesheet only.
-
Primary
-
@{{color}}
-
-
Secondary
-
@{{color}}
-
-
Greytone
-
@{{color}}
-
-
Tertiary
-
@{{color}}
-