Below you can find the complete list of CSS variables that can be used to style the component.

Accent color

Brand-specific accent color. This probably needs override to match your app.

--infinite-accent-color

Color

The text color inside the component

--infinite-color

Space 0

--infinite-space-0

Space 1

--infinite-space-1

Space 2

--infinite-space-2

Space 3

--infinite-space-3

Space 4

--infinite-space-4

Space 5

--infinite-space-5

Space 6

--infinite-space-6

Space 7

--infinite-space-7

Space 8

--infinite-space-8

Space 9

--infinite-space-9

Space 10

--infinite-space-10

Font size 0

--infinite-font-size-0

Font size 1

--infinite-font-size-1

Font size 2

--infinite-font-size-2

Font size 3

--infinite-font-size-3

Font size 4

--infinite-font-size-4

Font size 5

--infinite-font-size-5

Font size 6

--infinite-font-size-6

Font size 7

--infinite-font-size-7

Font family

--infinite-font-family

Min height

--infinite-min-height

Border radius

--infinite-border-radius

Background

The background color for the whole component.

Overriden in the dark theme.

--infinite-background

Load mask padding

The padding used for the content inside the LoadMask.

--infinite-load-mask-padding

Load mask color

--infinite-load-mask-color

Load mask text background

--infinite-load-mask-text-background

Load mask overlay background

--infinite-load-mask-overlay-background

Load mask overlay opacity

--infinite-load-mask-overlay-opacity

Load mask border radius

--infinite-load-mask-border-radius

Header background

Background color for the header. Defaults to --infinie-header-cell-background.

Overriden in the dark theme.

--infinite-header-background

Header color

The text color inside the header.

Overriden in the dark theme.

--infinite-header-color

Header height

--infinite-header-height

Header cell dragging background

--infinite-header-cell-dragging-background

Header cell background

Background for header cells.

Overriden in the dark theme.

--infinite-header-cell-background

Header cell padding

--infinite-header-cell-padding

Header cell icon size

--infinite-header-cell-icon-size

Cell padding

--infinite-cell-padding

Cell border width

--infinite-cell-border-width

Cell border

Specifies the border for cells.

Overriden in the dark theme - eg: 1px solid #2a323d

--infinite-cell-border

Cell border invisible

--infinite-cell-border-invisible

Cell border radius

--infinite-cell-border-radius

Row color

Text color inside rows. Defaults to currentColor

Overriden in dark theme.

--infinite-row-color

Row background

Background color for rows. Defaults to --infinite-background.

Overriden in dark theme.

--infinite-row-background

Row odd background

Background color for odd rows. Even rows will use --infinite-row-background.

Overriden in dark theme.

--infinite-row-odd-background

Row hover background

Background color for rows, on hover.

Overriden in the dark theme.

--infinite-row-hover-background

Group row background

--infinite-group-row-background

Group row column nesting

--infinite-group-row-column-nesting

Row pointer events while scrolling

--infinite-row-pointer-events-while-scrolling