@vcl/theme/README.md

The VCL default theme

# [VCL](https://vcl.github.io/) 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](/demo/example.html) on GH-pages.