# Properties
# Available properties
# Color properties
- color-main
- color-field
- color-background
- color-background-secondary
- color-block
- color-font
- color-font-control-element
- color-font-background
- color-valid
- color-invalid
- color-disabled-main
- color-disabled-secondary
# Font properties
- font-main
- font-weight-normal
- font-weight-medium
- font-weight-bold
# How colors are handled
Theme engine handles colors not as you would expect.
Instead of storing them in RGB color model they are actually stored as separate values of HSL color model.
Everytime you call set-property
or set-properties
with some RGB value, i.e. #a2e344
, theme engine creates 3 separate
CSS properties each containing corresponding HSL values of given RGB color. Whenever you wanna use this color you are actually getting
an hsl()
function of this properties.
# Why?
Storing colors as separate values of HSL color model allows to dynamically modify color's lightness.
Sass lighten
and darken
functions only apply transformations on compile time and only on static colors.
# In-built lighten, darken etc.
Because every color is returned as hsl()
function you can't apply usual Sass functions to it, as they only operate over RGB values.
This is why theme engine provides in-built functions to apply these transformations. They only operate over theme colors.
Following functions are available in theming
module:
- lighten-color($color, $value) - i.e.
lighten-color("color-main", 10%)
- darken-color($color, $value) - i.e.
darken-color("color-main", 10%)
- alpha-color($color, $value) - i.e.
alpha-color("color-main", 0.2)
Note that in $color
parameter you provide string name of the color.
← Usage