Template Hot-Reload Demo - Edit ui-doc/templates/ files to see changes instantly

Variables

Variables used in the project.

Colors

The color variables are used to define the color palette of the application. The color palette is defined by the following variables:

  • color-black
  • color-blue
  • color-yellow
  • color-gray
  • color-white

The color variables are defined by the RGB values of the color.

black --color-black
#14213d blue --color-blue
#fca311 yellow --color-yellow
#e5e5e5 gray --color-gray
#ffffff white --color-white

Font

Set of predefined font variables.

Font weight

Font weights are a set of predefined values that can be used to define the weight of a font:

  • font-weight-normal
  • font-weight-bold

Font size

Font sizes are a set of predefined values that can be used to define the size of a font:

  • font-size-xs
  • font-size-sm
  • font-size-normal
  • font-size-md
  • font-size-lg

Icons

Please note that icons for specific use cases are grouped by an prefix.

chevron-down --icon-chevron-down
chevron-left --icon-chevron-left
chevron-right --icon-chevron-right
chevron-up --icon-chevron-up

Spaces

Space are a set of predefined values that can be used to define the space of an element. When spaces are used there is always a set of two variables you can use the --space-unit and --space-<size>. The --space-unit is the base unit that will be multiplied by the --space-<size>. Depending on the context you are using the space <size> changes.

The predefined space can the be set in a specific context by defining the --space-<size> variable. For example the space unit is 1rem and we are in the padding context, we can use --space-pt: var(--space-md); to change the padding top to the medium space.

--space-xxs 0.35 Extra extra small
--space-xs 0.5 Extra small
--space-sm 0.7 Small
--space-normal 1 Normal
--space-md 1.3 Medium
--space-lg 1.8 Large
--space-xl 3.2 Extra large
--space-xxl 4.8 Extra extra large

Width (Content)

Widths are a set of predefined values that can be used to limit the content width.

Globals

There are some global veriables that are used in the project. These variables are a base set and can be changed depending on context and requirements. All components are using these variables to define the style or as a fallback if there more specific named variable is not present.

Font

  • --font-space-unit - The spacing unit when using font related spaces (see the spaces documentation for mor details).
  • --font-size-base - The base font size.
  • --font-color - used font color.
  • --font-family - uded font family.
  • --font-weight - used font weight.
  • --font-size - used font size.
  • --font-line-height - used font line height.

Colors

  • --bg-color - used background color
  • --accent-color - used accent color
  • --selection-color - used selection color
  • --selection-bg-color - used selection background color
  • --animation-time - used animation time

Animation

  • --animation-time - used animation time