VCL theme

The VCL default theme for the core modules collection.

Features

Definition of the theme terms which consist of:

• colors.
• font faces.

These definitions are typically obtained from the color palette of a web site design or directly from the corporate identity or brand design stipulations of a corporation or a specific project.

Based on these terms all ~650 variables required by the modules included in the official VCL module collection.

Variables

These term variables form the interface of this module.

Grays

• --gray-dark-4
• --gray-dark-3
• --gray-dark-2
• --gray-dark-1
• --gray
• --gray-light-1
• --gray-light-2
• --gray-light-3
• --gray-light-4
• --gray-light-5
• --gray-light-6

Brand Accent Colors

• --brand-accent-darker
• --brand-accent-dark
• --brand-accent
• --brand-accent-light
• --brand-accent-lighter

Semantic Colors

• --emphasized-dark-color

• --emphasized-medium-color

• --emphasized-light-color

• --primary-dark-color

• --primary-medium-color

• --primary-light-color

• --success-dark-color

• --success-medium-color

• --success-light-color

• --info-light-color

• --info-medium-color

• --info-dark-color

• --warning-dark-color

• --warning-medium-color

• --warning-light-color

• --error-dark-color

• --error-medium-color

• --error-light-color

• --danger-dark-color

• --danger-medium-color

• --danger-light-color

Shadows, transparencies etc.

• --glass-1
• --glass-2

Shared Variables

These variables are shared within the theme:

• --block-elem-vertical-gap
• --form-control-vertical-gap
• --input-elem-height
• --text-primary-color
• --text-secondary-color
• --content-primary-bg-color
• --content-secondary-bg-color
• --content-ternary-bg-color

Demo

example.html on GH-pages.