CSS tokens available in Markdown Free Text

The following CSS tokens are available in Markdown Free Text:

They can either be used in the style tag for a class or in inline css.

Color

Color system is inspired from Material Design color system.

Using color tokens instead of hard-coded colors will ensure that the color is coherent with the current theme, or that it will also work in dark mode.

Main colors

Token
Description
Result

--color-primary

Primary color of the theme

--color-on-primary

Color to apply on Primary color

--color-primary-container

Primary Container color of the theme

--color-on-primary-container

Color to apply on Primary Container color

--color-secondary

Secondary color of the theme

--color-on-secondary

Color to apply on Secondary color

--color-secondary-container

Secondary Container color of the theme

--color-on-secondary-container

Color to apply on Secondary Container color

--color-tertiary

Tertiary color of the theme

--color-on-tertiary

Color to apply on Tertiary color

--color-tertiary-container

Tertiary Container color of the theme

--color-on-tertiary-container

Color to apply on Tertiary Container color

Status colors

Token
Description
Result

--color-error

Error color of the theme

--color-on-error

Color to apply on Error color

--color-error-container

Error Container color of the theme

--color-on-error-container

Color to apply on Error Container color

--color-success

Success color of the theme

--color-on-success

Color to apply on Success color

--color-success-container

Success Container color of the theme

--color-on-success-container

Color to apply on Success Container color

--color-warning

Warning color of the theme

--color-on-warning

Color to apply on Warning color

--color-warning-container

Warning Container color of the theme

--color-on-warning-container

Color to apply on Warning Container color

Neutral colors

Token
Description
Result

--color-outline

Color to use for outlines

--color-surface

Color to use for surface

--color-on-surface

Color to apply on surface

--color-surface-variant

Variant Color to use for surface

--color-on-surface-variant

Color to apply on surface variant

--color-background

Color to use for background

--color-on-background

Color to apply on background

--color-surface-container

Color to use for surface container

--color-on-surface-container

Color to apply on surface container

Space

Token
Description
Default value

--space-xxx-small

Very Small space

2px

--space-xx-small

Small space

4px

--space-x-small

Small space

8px

--space-small

Small space

12px

--space-medium

Medium space

16px

--space-large

Large space

20px

--space-x-large

Extra large space

28px

--space-xx-large

Extra extra large space

36px

--space-xxx-large

Extra extra extra large space

48px

Font-size

Token
Description
Default value

--font-size-x-small

Very Small font size

0.75rem

--font-size-small

Small font size

0.875rem

--font-size-medium

Medium font size

1rem

--font-size-large

Large font size

1.25rem

--font-size-x-large

Extra large font size

1.5rem

--font-size-xx-large

Extra extra large font size

2.25rem

--font-size-xxx-large

Extra extra extra large font size

3rem

Font-weight

Token
Description
Default value

--font-weight-thin

Light font weight

200

--font-weight-normal

Light font weight

400

--font-weight-semi-bold

Light font weight

500

--font-weight-bold

Light font weight

700

--font-weight-extra-bold

Light font weight

800

Last updated