Globals

Superkube has the following CSS variables and groups by default:

Basis #

--font-text
--font-heading
--font-mono
--font-weight-semibold
--font-weight-heavy
--unit
--body-text-size
--body-text-line

See more about values of Basis.

Scales #

// type scale
--type-scale-80
--type-scale-64
--type-scale-60
--type-scale-56
--type-scale-48
--type-scale-32
--type-scale-28
--type-scale-24
--type-scale-20
--type-scale-18
--type-scale-16
--type-scale-15
--type-scale-14
--type-scale-13
--type-scale-12
--type-scale-11

// type space
--type-space-h1-to-tag
--type-space-h2-to-tag
--type-space-h3-to-tag
--type-space-h4-to-tag
--type-space-h5-to-tag
--type-space-h6-to-tag
--type-space-tag-to-tag
--type-space-tag-to-h2
--type-space-tag-to-h3
--type-space-tag-to-h4
--type-space-tag-to-h5
--type-space-tag-to-h6
--type-space-figure-to-tag
--type-space-form-item-to-item

// level (z-index)
--level-content // overlays
--level-page // offcanvas
--level-control // modals/popups
--level-all // messages

// radius
--radius-small
--radius-base
--radius-large
--radius-huge

// shadow
--shadow-100
--shadow-150
--shadow-200
--shadow-250
--shadow-300
--shadow-350

// button
--button-small
--button-base
--button-large

// input
--input-small
--input-base
--input-large

See more about values of Scales.

Palette #

The palette variables are generated according to the following principle:

--palette-{color}
--palette-{color}-{opacity}
--palette-{color}-{shade-or-tint}

Examples:

--palette-black
--palette-black-50
--palette-neutral-base

See more about values of Palette.

Colors #

The color variables are generated according to the following principle:

--{group}-{variant}
--{group}-{variant}-{property}
--{group}-{variant}-{state}-{property}

Examples:

--text-default
--link-default-color
--link-default-hover-color

See more about values of Colors.