feat: iss 462/viv 220 inline native elements (#464)

* issue #462: initial take on code element

* issue #462: basic HTML elements styling

* issue #462: styling the base HTML elements with Vivid context

* issue #462: inline native elements styling

* issue #462: fixing the code style color

* issue #462: setting the color value via the common base names set

* issue #462: fixing the deps check issues

* issue #462: adjusting the colors

* issue #462: adjusting the latest changes in schemes

.storybook/preview.js

@@ -3,10 +3,9 @@ import '@storybook/addon-console';
 import { addParameters, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
 
 vvdCore.settled
- .then(() => console.info('init Vivid context done (preview frame)'))
+ .then(() => console.info('init Vivid core done (preview frame)'))
  .catch(e => console.error(e));
 
 async function run() {

.storybook/vivid-theme.js

@@ -1,20 +1,19 @@
 import { create } from '@storybook/theming/create';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import vvdCore from '@vonage/vvd-core';
 
 vvdCore.settled
- .then(() => console.info('init Vivid context done (main page)'));
+ .then(() => console.info('init Vivid core done (main page)'));
+
+vvdContext.install()
+ .then(() => console.log('init Vivid context into main document done'));
 
 export default create({
  base: 'light',
  colorSecondary: 'black',
 
  appBorderRadius: 6,
 
- fontBase: 'var(--vvd-font-family-spezia), sans-serif',
- fontCode: 'monospace',
-
- textColor: '#131415',
  barSelectedColor: 'black',
 
  brandTitle: 'Vivid, the Vonage Design System',

common/context/package.json

@@ -30,6 +30,7 @@
  },
  "devDependencies": {
  "@vonage/vvd-design-tokens": "^0.16.2",
+ "@vonage/vvd-foundation": "^0.16.2",
  "@vonage/vvd-typography": "^0.16.2"
  }
-}
+}

common/context/src/partials/_layout.scss

@@ -2,5 +2,10 @@
  body {
  margin: 0;
  padding: 0;
- }
+ }
+
+ code {
+ padding: 3px 4px;
+ border-radius: 6px;
+ }
 }

common/context/src/partials/_theme.scss

@@ -1,8 +1,18 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
 
 @mixin scheme-variables-coupling {
  body {
  background-color: var(#{scheme-variables.$vvd-color-base});
  color: var(#{scheme-variables.$vvd-color-on-base});
- }
+ }
+
+ code {
+ background-color:var(#{scheme-variables.$vvd-color-surface});
+ color: color-base.$orange-600;
+ }
+
+ a {
+ color: color-base.$purple-600;
+ }
 }

common/context/src/partials/_typography.scss

@@ -32,10 +32,22 @@
  p {
  width: 60ch;
  max-width: 100%;
- }
+ }
+
+ code {
+ @include typography.typography-cat-shorthand('body-1-code');
+ }
+
+ b,
+ strong {
+ @include typography.typography-cat-shorthand('body-1-bold');
+ }
+
+ a {
+ @include typography.typography-cat-shorthand('body-1-link');
+ }
 
- code,
- samp,
+ samp,
  kbd,
  var {
  @include typography.typography-cat-shorthand('body-1-code');

common/context/src/vvd-context.ts

@@ -1,14 +1,30 @@
 import '@vonage/vvd-core';
-import { style } from './vvd-context.css';
 
-init();
+export default {
+ install,
+};
 
-function init(): void {
- injectGlobalStyle();
-}
+const CONTEXT_STYLE_IDENTIFIER = 'vivid-context-style';
+
+/**
+ * installs Vivid context (styles) into the target scope
+ */
+async function install(target = document): Promise<void> {
+ if (
+ !target ||
+ (target.nodeType !== Node.DOCUMENT_NODE &&
+ target.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)
+ ) {
+ throw new Error(`target document expected; got ${target}`);
+ }
+
+ const { style } = await import('./vvd-context.css');
+
+ let styleElement = target.querySelector(`.${CONTEXT_STYLE_IDENTIFIER}`);
+ if (!styleElement) {
+ styleElement = (target.ownerDocument ?? target).createElement('style');
+ }
 
-function injectGlobalStyle() {
- const globalStyleSheet = document.createElement('style');
- globalStyleSheet.innerHTML = style.cssText;
- document.head.appendChild(globalStyleSheet);
+ styleElement.innerHTML = style.cssText;
+ (target.head || target).appendChild(styleElement);
 }

common/context/stories/context-basic.stories.js

@@ -1,5 +1,4 @@
-import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import '@vonage/vwc-theme-switch';
 import '@vonage/vwc-top-app-bar';
 import { html } from 'lit-element';
@@ -21,6 +20,10 @@ export const basic = () => html`
 
  <h2>Overview (H2)</h2>
 
+ <p>
+ The contents of this page are an excerps from <a href="https://developer.nexmo.com/voice/voice-api/guides/call-flow">this API docs</a>.
+ </p>
+
  <p>
  The Nexmo Voice API handles two types of phone call:
  <b>inbound</b> and <b>outbound</b>.
@@ -43,6 +46,6 @@ export const basic = () => html`
  </main>
 `;
 
-vvdCore.settled
+vvdContext.install()
  .then(() => console.log('Vivid context initialised for the context demo story'))
  .catch(e => console.error(e));

common/foundation/scss/variable-names/_color-base-variable-names.scss

@@ -2,3 +2,4 @@ $purple-600: #871EFF;
 $red-100: #fdecec;
 $red-600: #CD0D0D;
 $green-600: #167629;
+$orange-600: rgb(187,55,0);