Skip to content

Latest commit

 

History

History
97 lines (78 loc) · 6.92 KB

css-tokens-available-in-markdown-free-text.md

File metadata and controls

97 lines (78 loc) · 6.92 KB

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