Package Exports

@vcl/theme

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vcl/theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.