Font
--font-space-unit- The spacing unit when using font related spaces (see the spaces documentation for mor details).--font-size-html-base- The font size base used on the html tag need to be a pixel value--font-color- used font color.--font-family- used font family.--font-weight- used font weight.--font-size- used font size.--font-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.
--headline-space- space to upper element--headline-family--headline-weight--headline-line-height--headline-color--headline-scale
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)).
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.
Animation
--transition-fast--transition-base--transition-slow
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:
--font-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-font-color- Text color when displayed on accent backgrounds--accent-bg-color- Background color for accent elements and highlights
Hover States:
--accent-hover-font-color- Text color for interactive elements on hover--accent-hover-bg-color- Background color for interactive elements on hover
Text Selection:
--selection-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.
Width (Content)
Widths are a set of predefined values that can be used to limit the content width.
--width-min-offset-x- The minimum space on the left and right side.--width-content- The width of the content.--width-lg- The width of the large screen.--width-base- Default width.--width-sm- The width of the small screen.
Border
Global border settings. Will be used as fallback.
--border-width- set border width--border-style- set border style--border-color- set border color
Border width
Border width definition
--border-width-thin--border-width-medium--border-width-thick
Rounded
Border radius definition
--rounded-sm--rounded-base--rounded-md--rounded-lg--rounded-xl