Atomio

# 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.

←