Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vcl/theme

Package Overview
Dependencies
Maintainers
4
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vcl/theme - npm Package Compare versions

Comparing version 0.4.0-0 to 0.4.0-1

32

package.json
{
"name": "@vcl/theme",
"description": "The VCL default theme",
"version": "0.4.0-0",
"description": "Reference to the VCL default theme",
"version": "0.4.0-1",
"main": "package.json",
"scripts": {
"test": "vcl-preprocessor ./index.sss ./build/test.css",
"browsersync": "browser-sync start --server --files \"demo\" \"build\" --index \"/build/index.html\" ",
"build-demo": "vcl-build-demo",
"start": "npm-run-all --parallel build-demo browsersync"
"test": "vcl-preprocessor ./index.sss ./build/test.css"
},

@@ -24,11 +21,9 @@ "style": "index.sss",

],
"license": "MIT",
"devDependencies": {
"@vcl/build-demo": "^0.4.0-12",
"@vcl/preprocessor": "^0.4.0-0",
"@vcl/typography": "^0.4.0-0",
"browser-sync": "2.26.3",
"normalize.css": "^8.0.1",
"pre-commit": "^1.2.2"
"@vcl/preprocessor": "^0.4.0-4"
},
"dependencies": {
"@vcl/default-theme": "^0.4.0-0"
},
"license": "MIT",
"keywords": [

@@ -40,12 +35,3 @@ "css",

"theme"
],
"vcl": {
"categories": [
{
"title": "Themes",
"itemPriority": 10,
"priority": 180
}
]
}
]
}
# [VCL](https://vcl.github.io/) theme
The VCL default theme for the core modules collection.
This modules is just a reference to the default theme.
## 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.

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc