Variables

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

Colorset

A comprehensive color definition system that establishes a complete visual identity for UI components or sections. Each colorset provides all essential color variables needed for consistent theming across your entire application.

Core Colors:

  • --text-color - Primary text color for readable content
  • --bg-color - Main background color for containers and surfaces
  • --border-color - Color for borders, dividers, and outlines

Visual Enhancement:

  • --shadow-color - RGB values for drop shadows and depth effects
  • --shadow-alpha - Opacity level for shadow transparency (0.0-1.0)

Interactive Elements:

  • --accent-color - Highlight color for UI elements and emphasis
  • --accent-text-color - Text color when displayed on accent backgrounds
  • --accent-bg-color - Background color for accent elements and highlights

Hover States:

  • --accent-hover-text-color - Text color for interactive elements on hover
  • --accent-hover-bg-color - Background color for interactive elements on hover

Text Selection:

  • --selection-text-color - Text color when selected by user
  • --selection-bg-color - Background color for selected text

Usage: Apply colorsets to create consistent theming across components, enable easy theme switching, and maintain visual harmony throughout your application.

Font

  • --text-space-unit - The spacing unit when using font related spaces (see the spaces documentation for mor details).
  • --text-size-html-base - The font size base used on the html tag need to be a pixel value
  • --text-color - used font color.
  • --text-family - used font family.
  • --text-weight - used font weight.
  • --text-size - used font size.
  • --text-line-height - used font line height.

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

Line heit variables are a set of variables to switch between different line heights

  • --line-height-tight
  • --line-height-base
  • --line-height-relaxed

Headline

Variables to change link behavior.

  • --link-color
  • --link-decoration
  • --link-hover-color
  • --link-hover-decoration
  • --link-transition-time

Colors

The color variables are used to define the color palette.

The color variables are defined by RGB value. When you want to use a color you need use the rgb() function. For example: rgb(var(--color-black)).

#282828 Black --color-black
#ffffff White --color-white

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-2xs 0.35 Extra extra small
--space-xs 0.5 Extra small
--space-sm 0.7 Small
--space-base 1 Base
--space-md 1.3 Medium
--space-lg 1.8 Large
--space-xl 3.2 Extra large
--space-2xl 4.8 2x extra large

Animation

  • --transition-fast
  • --transition-base
  • --transition-slow