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 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-over-page // dropdowns/popovers
--level-over-content // modals/popups
--level-over-all // notification

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

See more about values of Scales.

Palette #

The framework automatically generates the specified colors in $palette map into the appropriate css variables. 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 framework automatically generates the specified colors in $colors map into the appropriate css variables. 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
--shadow-300

See more about values of Colors.