Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vonage/vvd-context
Advanced tools
@vonage/vvd-context - npm Package Compare versions
Comparing version 1.0.3 to 1.0.4
@@ -1,2 +0,2 @@ | ||
| ## [1.0.3](https://github.com/vonage/vivid/compare/v1.0.2...v1.0.3) (2021-01-18) | ||
| ## [1.0.4](https://github.com/vonage/vivid/compare/v1.0.3...v1.0.4) (2021-01-19) | ||
@@ -3,0 +3,0 @@ |
| { | ||
| "name": "@vonage/vvd-context", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "> TODO: description", | ||
@@ -28,3 +28,3 @@ "homepage": "https://github.com/Vonage/vivid/tree/master/components/context#readme", | ||
| "dependencies": { | ||
| "@vonage/vvd-core": "^1.0.3", | ||
| "@vonage/vvd-core": "^1.0.4", | ||
| "lit-element": "^2.4.0", | ||
@@ -34,7 +34,7 @@ "tslib": "^2.0.3" | ||
| "devDependencies": { | ||
| "@vonage/vvd-design-tokens": "^1.0.3", | ||
| "@vonage/vvd-foundation": "^1.0.3", | ||
| "@vonage/vvd-typography": "^1.0.3" | ||
| "@vonage/vvd-design-tokens": "^1.0.4", | ||
| "@vonage/vvd-foundation": "^1.0.4", | ||
| "@vonage/vvd-typography": "^1.0.4" | ||
| }, | ||
| "gitHead": "05344855a57ffb51ba1357a1861d67aaddc64d5c" | ||
| "gitHead": "077e7a1b7dea25e7b40280521fae90f883c05daf" | ||
| } |
| ### Introduction | ||
| Vivid components are fully taking care of their styling. | ||
| Yet there are usually also a simple native HTML elements in use. | ||
| Those elements should also comply with the Vivid Design System. | ||
| Yet there are also a simple native HTML elements, that should also comply with the Vivid Design System. | ||
| For this reason we are providing **Vivid Context** service, responsible of mounting the Vivid styling into a document context. | ||
| For this reason we are providing **Vivid Context** service, responsible of mounting the Vivid styling into a document. | ||
| The service is optional, but most likely will be needed in any Vonage application. | ||
| > Attention! `vvd-context` uses internally `vvd-core`, which sets up the core services like theming and typography, thus `vvd-context` user may safely omit any own setup of the core. | ||
| ### API | ||
| Attention! As an initial step, to provide smoother migration and lesser friction with an existing systems (especially those heavily dependent on Volta's legacy), we are scoping most of the Vivid context impact by special class: `vivid-scope`. | ||
| Please, put `vivid-scope` class at the root of the DOM tree, that is ready to be styled by Vivid. | ||
| > Any new application should just safely put that class on the application DOM root (usually `body`). | ||
| #### `mount(target)` | ||
@@ -35,3 +42,3 @@ | ||
| #### Mount context to current document scope | ||
| #### Mount context into the current document scope | ||
@@ -42,3 +49,3 @@ ```js | ||
| #### Mount context to a document of choice | ||
| #### Mount context into a document of choice | ||
@@ -45,0 +52,0 @@ ```js |
| import { css } from 'lit-element'; | ||
| export const style = css `body{font:400 ultra-condensed 16px / 24px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}@supports(font-size-adjust: 1){body{font-size-adjust:.5}}.vivid-scope-tmp h1{font:500 condensed 66px / 88px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp h2{font:500 condensed 52px / 68px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp h3{font:500 condensed 40px / 52px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp h4{font:500 condensed 32px / 44px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp h5{font:500 condensed 26px / 36px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp h6{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp code,.vivid-scope-tmp kbd,.vivid-scope-tmp samp,.vivid-scope-tmp var{font-family:"SpeziaMonoWebVariable",monospace}.vivid-scope-tmp b,.vivid-scope-tmp strong{font-weight:600}.vivid-scope-tmp small{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope-tmp a{text-decoration:underline}.vivid-scope-tmp blockquote{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}body{background-color:var(--vvd-color-base);color:var(--vvd-color-on-base)}.vivid-scope-tmp a{color:#871eff}.vivid-scope-tmp code,.vivid-scope-tmp kbd,.vivid-scope-tmp samp,.vivid-scope-tmp var{background-color:var(--vvd-color-surface);color:#bb3700}.vivid-scope-tmp pre{background-color:var(--vvd-color-surface)}.vivid-scope-tmp blockquote{border-inline-start:8px solid var(--vvd-color-connotation);box-shadow:inset 0 1px 0 0 #b3b3b3,inset 0 -1px 0 0 #b3b3b3,inset -1px 0 0 0 #b3b3b3}.vivid-scope-tmp blockquote[connotation=success i]{--vvd-color-connotation:var(--vvd-color-success);--vvd-color-on-connotation:var(--vvd-color-on-success)}.vivid-scope-tmp blockquote[connotation=alert i]{--vvd-color-connotation:var(--vvd-color-alert);--vvd-color-on-connotation:var(--vvd-color-on-alert)}.vivid-scope-tmp blockquote[connotation=warning i]{--vvd-color-connotation:var(--vvd-color-warning);--vvd-color-on-connotation:var(--vvd-color-on-warning)}.vivid-scope-tmp blockquote[connotation=info i]{--vvd-color-connotation:var(--vvd-color-info);--vvd-color-on-connotation:var(--vvd-color-on-info)}.vivid-scope-tmp blockquote[connotation=announcement i]{--vvd-color-connotation:var(--vvd-color-announcement);--vvd-color-on-connotation:var(--vvd-color-on-announcement)}.vivid-scope-tmp blockquote:not([connotation]){--vvd-color-connotation:var(--vvd-color-info);--vvd-color-on-connotation:var(--vvd-color-on-info)}body{margin:0;padding:0}.vivid-scope-tmp pre,.vivid-scope-tmp code,.vivid-scope-tmp kbd,.vivid-scope-tmp samp,.vivid-scope-tmp var{padding:3px 4px;border-radius:6px}.vivid-scope-tmp pre{overflow:auto}.vivid-scope-tmp pre code,.vivid-scope-tmp pre kbd,.vivid-scope-tmp pre samp,.vivid-scope-tmp pre var{padding:initial}.vivid-scope-tmp blockquote{margin-left:0;margin-right:0;padding:20px 22px;border-radius:6px}.vivid-scope-tmp blockquote :first-child{margin-block-start:0;padding-block-start:0}.vivid-scope-tmp blockquote :last-child{margin-block-end:0;padding-block-end:0}`; | ||
| export const style = css `body{font:400 ultra-condensed 16px / 24px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}@supports(font-size-adjust: 1){body{font-size-adjust:.5}}.vivid-scope h1{font:500 condensed 66px / 88px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope h2{font:500 condensed 52px / 68px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope h3{font:500 condensed 40px / 52px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope h4{font:500 condensed 32px / 44px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope h5{font:500 condensed 26px / 36px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope h6{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope code,.vivid-scope kbd,.vivid-scope samp,.vivid-scope var{font-family:"SpeziaMonoWebVariable",monospace}.vivid-scope b,.vivid-scope strong{font-weight:600}.vivid-scope small{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}.vivid-scope a{text-decoration:underline}.vivid-scope blockquote{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}body{background-color:var(--vvd-color-base);color:var(--vvd-color-on-base)}.vivid-scope a{color:#871eff}.vivid-scope code,.vivid-scope kbd,.vivid-scope samp,.vivid-scope var{background-color:var(--vvd-color-surface);color:#bb3700}.vivid-scope pre{background-color:var(--vvd-color-surface)}.vivid-scope blockquote{border-inline-start:8px solid var(--vvd-color-connotation);box-shadow:inset 0 1px 0 0 #b3b3b3,inset 0 -1px 0 0 #b3b3b3,inset -1px 0 0 0 #b3b3b3}.vivid-scope blockquote[connotation=success i]{--vvd-color-connotation:var(--vvd-color-success);--vvd-color-on-connotation:var(--vvd-color-on-success)}.vivid-scope blockquote[connotation=alert i]{--vvd-color-connotation:var(--vvd-color-alert);--vvd-color-on-connotation:var(--vvd-color-on-alert)}.vivid-scope blockquote[connotation=warning i]{--vvd-color-connotation:var(--vvd-color-warning);--vvd-color-on-connotation:var(--vvd-color-on-warning)}.vivid-scope blockquote[connotation=info i]{--vvd-color-connotation:var(--vvd-color-info);--vvd-color-on-connotation:var(--vvd-color-on-info)}.vivid-scope blockquote[connotation=announcement i]{--vvd-color-connotation:var(--vvd-color-announcement);--vvd-color-on-connotation:var(--vvd-color-on-announcement)}.vivid-scope blockquote:not([connotation]){--vvd-color-connotation:var(--vvd-color-info);--vvd-color-on-connotation:var(--vvd-color-on-info)}body{margin:0;padding:0}.vivid-scope pre,.vivid-scope code,.vivid-scope kbd,.vivid-scope samp,.vivid-scope var{padding:3px 4px;border-radius:6px}.vivid-scope pre{overflow:auto}.vivid-scope pre code,.vivid-scope pre kbd,.vivid-scope pre samp,.vivid-scope pre var{padding:initial}.vivid-scope blockquote{margin-left:0;margin-right:0;padding:20px 22px;border-radius:6px}.vivid-scope blockquote :first-child{margin-block-start:0;padding-block-start:0}.vivid-scope blockquote :last-child{margin-block-end:0;padding-block-end:0}`; | ||
| //# sourceMappingURL=vvd-context.css.js.map |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.85%
32917
- Number of lines in readme file
- increased by15.22%
53
Worsened metrics
- Lines of code
- decreased by-1.3%
76
Dependency changes
Updated@vonage/vvd-core@^1.0.4