Skip to main content

Primitive variables

Each theme defines the following "primitive" variables. These variables are referenced by utility classes and by component variables, so customizing these variables will have a large impact on a theme.

Shadows

--shadow--s

--shadow--m

--shadow--l

--shadow--xl

Radii

--radius--none

--radius--tiny

--radius--small

--radius--med

--radius--large

--radius--circle

--radius--pill

Fonts

--font--stack

--font--monospace

--font--emoji

Font sizes

--font-size--xxs

--font-size--xs

--font-size--s

--font-size--base

--font-size--l

--font-size--xl

--font-size--xxl

--font-size--xxxl

--font-size--subheadline

--font-size--headline

Font weights

--font-weight--normal

--font-weight--semibold

--font-weight--bold

Line heights

--line-height--copy

--line-height--solid

--line-height--title

--line-height--loose

Tracking

--tracked--tighter

--tracked--tight

--tracked--loose

--tracked--looser

--tracked--mega

Transition timings

--timing--click

--timing--hover

--timing--fade

--timing--rotate