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.

Keywords

FAQs

What is @vcl/theme?

Is @vcl/theme popular?

Is @vcl/theme well maintained?

Package last updated on 22 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install