@vcl/default-theme

VCL default-theme

The VCL default theme for the core modules collection.

Features

Defines all ~650 variables required to be set by the modules included in the core-module collection and narrows them down to the small set of variables defined below. These variables form the interface of this module.

Variables

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.