scu-web-components 0.0.1

package/dist/tokens/apps/theme.css

@@ -0,0 +1,282 @@
+@import './fonts/Open_Sans/font.css';
+
+:root {
+  --grey-00: rgba(0,0,0,1);
+  --grey-01: rgba(35,35,35,1);
+  --grey-02: rgba(57,57,57,1);
+  --grey-03: rgba(82,82,82,1);
+  --grey-04: rgba(104,104,104,1);
+  --grey-05: rgba(127,127,127,1);
+  --grey: rgba(127,127,127,1);
+  --grey-06: rgba(149,149,149,1);
+  --grey-07: rgba(173,173,173,1);
+  --grey-08: rgba(196,196,196,1);
+  --grey-09: rgba(219,219,219,1);
+  --grey-092: rgba(238,238,238,1);
+  --grey-095: rgba(242,242,242,1);
+  --grey-10: rgba(255,255,255,1);
+
+  --color-primary-01: rgba(42,73,1,1);
+  --color-primary-02: rgba(58,99,3,1);
+  --color-primary-03: rgba(72,121,6,1);
+  --color-primary-04: rgba(86,144,8,1);
+  --color-primary-05: rgba(99,166,10,1);
+  --color-primary: rgba(99,166,10,1);
+  --color-primary-06: rgba(126,182,51,1);
+  --color-primary-07: rgba(158,201,101,1);
+  --color-primary-08: rgba(187,218,146,1);
+  --color-primary-09: rgba(213,233,187,1);
+  --color-primary-095: rgba(251,255,246,1);
+
+  --highlight: #007AB9;
+  --highlight-light: #6ABCE7;
+  --highlight-secondary: #63A60A;
+
+  --text-thin-10: 400 34px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-09: 400 24px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-08: 400 21px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-07: 400 18.7px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-06: 400 16px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-05: 400 15px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-04: 400 13px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-03: 400 12px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-02: 400 11px OpenSans-Light, Arial, Helvetica, sans-serif;
+  --text-thin-01: 400 9px OpenSans-Light, Arial, Helvetica, sans-serif;
+
+  --text-10: 400 34px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-09: 400 24px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-08: 400 21px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-07: 400 18.7px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-06: 400 16px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-05: 400 15px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-04: 400 13px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-03: 400 12px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-02: 400 11px OpenSans-Regular, Arial, Helvetica, sans-serif;
+  --text-01: 400 9px OpenSans-Regular, Arial, Helvetica, sans-serif;
+
+  --text-bold-10: 700 30px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-09: 700 24px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-08: 700 21px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-07: 700 18.7px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-06: 700 16px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-05: 700 15px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-04: 700 13px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-03: 700 12px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-02: 700 11px OpenSans-Bold, Arial, Helvetica, sans-serif;
+  --text-bold-01: 700 9px OpenSans-Bold, Arial, Helvetica, sans-serif;
+
+  --text-italic-10: italic 400 30px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-09: italic 400 24px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-08: italic 400 21px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-07: italic 400 18.7px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-06: italic 400 16px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-05: italic 400 15px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-04: italic 400 13px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-03: italic 400 12px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-02: italic 400 11px OpenSans-Italic, Arial, Helvetica, sans-serif;
+  --text-italic-01: italic 400 9px OpenSans-Italic, Arial, Helvetica, sans-serif;
+
+  --spacing-0: 0px;
+  --spacing-0-3: 2px;
+  --spacing-0-6: 4px;
+  --spacing-0-9: 6px;
+  --spacing-1: 8px;
+  --spacing-1-3: 10px;
+  --spacing-1-6: 12px;
+  --spacing-1-9: 14px;
+  --spacing-2: 16px;
+  --spacing-2-3: 18px;
+  --spacing-2-6: 20px;
+  --spacing-2-9: 22px;
+  --spacing-3: 24px;
+  --spacing-3-3: 26px;
+  --spacing-3-6: 28px;
+  --spacing-3-9: 30px;
+  --spacing-4: 32px;
+  --spacing-4-3: 34px;
+  --spacing-4-6: 36px;
+  --spacing-4-9: 38px;
+  --spacing-5: 40px;
+  --spacing-5-3: 42px;
+  --spacing-5-6: 44px;
+  --spacing-5-9: 46px;
+  --spacing-6: 48px;
+  --spacing-6-3: 50px;
+  --spacing-6-6: 52px;
+  --spacing-6-9: 54px;
+  --spacing-7: 56px;
+  --spacing-7-3: 58px;
+  --spacing-7-6: 60px;
+  --spacing-7-9: 62px;
+  --spacing-8: 64px;
+  --spacing-8-3: 66px;
+  --spacing-8-6: 68px;
+  --spacing-8-9: 70px;
+  --spacing-9: 72px;
+  --spacing-9-3: 74px;
+  --spacing-9-6: 76px;
+  --spacing-9-9: 78px;
+  --spacing-10: 80px;
+  --spacing-10-3: 82px;
+  --spacing-10-6: 84px;
+  --spacing-10-9: 86px;
+  --spacing-11: 88px;
+  --spacing-11-3: 90px;
+  --spacing-11-6: 92px;
+  --spacing-11-9: 94px;
+  --spacing-12: 96px;
+  --spacing-12-3: 98px;
+  --spacing-12-6: 100px;
+  --spacing-12-9: 102px;
+  
+  --col-0: 0%;
+  --col-0-3: 2.0833%;
+  --col-0-4: 2.7778%;
+  --col-0-6: 4.1667%;
+  --col-0-8: 5.5556%;
+  --col-0-9: 6.25%;
+  --col-1: 8.3333%;
+  --col-1-3: 10.4167%;
+  --col-1-4: 11.1111%;
+  --col-1-6: 12.5%;
+  --col-1-8: 13.8889%;
+  --col-1-9: 14.5833%;
+  --col-2: 16.6667%;
+  --col-2-3: 18.75%;
+  --col-2-4: 19.4444%;
+  --col-2-6: 20.8333%;
+  --col-2-8: 22.2222%;
+  --col-2-9: 22.9167%;
+  --col-3: 25%;
+  --col-3-3: 27.0833%;
+  --col-3-4: 27.7778%;
+  --col-3-6: 29.1667%;
+  --col-3-8: 30.5556%;
+  --col-3-9: 31.25%;
+  --col-4: 33.3333%;
+  --col-4-3: 35.4167%;
+  --col-4-4: 36.1111%;
+  --col-4-6: 37.5%;
+  --col-4-8: 38.8889%;
+  --col-4-9: 39.5833%;
+  --col-5: 41.6667%;
+  --col-5-3: 43.75%;
+  --col-5-4: 44.4444%;
+  --col-5-6: 45.8333%;
+  --col-5-8: 47.2222%;
+  --col-5-9: 47.9167%;
+  --col-6: 50%;
+  --col-6-3: 52.0833%;
+  --col-6-4: 52.7778%;
+  --col-6-6: 54.1667%;
+  --col-6-8: 55.5556%;
+  --col-6-9: 56.25%;
+  --col-7: 58.3333%;
+  --col-7-3: 60.4167%;
+  --col-7-4: 61.1111%;
+  --col-7-6: 62.5%;
+  --col-7-8: 63.8889%;
+  --col-7-9: 64.5833%;
+  --col-8: 66.6667%;
+  --col-8-3: 68.75%;
+  --col-8-4: 69.4444%;
+  --col-8-6: 70.8333%;
+  --col-8-8: 72.2222%;
+  --col-8-9: 72.9167%;
+  --col-9: 75%;
+  --col-9-3: 77.0833%;
+  --col-9-4: 77.7778%;
+  --col-9-6: 79.1667%;
+  --col-9-8: 80.5556%;
+  --col-9-9: 81.25%;
+  --col-10: 83.3333%;
+  --col-10-3: 85.4167%;
+  --col-10-4: 86.1111%;
+  --col-10-6: 87.5%;
+  --col-10-8: 88.8889%;
+  --col-10-9: 89.5833%;
+  --col-11: 91.6667%;
+  --col-11-3: 93.75%;
+  --col-11-4: 94.4444%;
+  --col-11-6: 95.8333%;
+  --col-11-8: 97.2222%;
+  --col-11-9: 97.9167%;
+  --col-12: 100%;
+  
+  --colvw-0: 0vw;
+  --colvw-0-3: 2.0833vw;
+  --colvw-0-4: 2.7778vw;
+  --colvw-0-6: 4.1667vw;
+  --colvw-0-8: 5.5556vw;
+  --colvw-0-9: 6.25vw;
+  --colvw-1: 8.3333vw;
+  --colvw-1-3: 10.4167vw;
+  --colvw-1-4: 11.1111vw;
+  --colvw-1-6: 12.5vw;
+  --colvw-1-8: 13.8889vw;
+  --colvw-1-9: 14.5833vw;
+  --colvw-2: 16.6667vw;
+  --colvw-2-3: 18.75vw;
+  --colvw-2-4: 19.4444vw;
+  --colvw-2-6: 20.8333vw;
+  --colvw-2-8: 22.2222vw;
+  --colvw-2-9: 22.9167vw;
+  --colvw-3: 25vw;
+  --colvw-3-3: 27.0833vw;
+  --colvw-3-4: 27.7778vw;
+  --colvw-3-6: 29.1667vw;
+  --colvw-3-8: 30.5556vw;
+  --colvw-3-9: 31.25vw;
+  --colvw-4: 33.3333vw;
+  --colvw-4-3: 35.4167vw;
+  --colvw-4-4: 36.1111vw;
+  --colvw-4-6: 37.5vw;
+  --colvw-4-8: 38.8889vw;
+  --colvw-4-9: 39.5833vw;
+  --colvw-5: 41.6667vw;
+  --colvw-5-3: 43.75vw;
+  --colvw-5-4: 44.4444vw;
+  --colvw-5-6: 45.8333vw;
+  --colvw-5-8: 47.2222vw;
+  --colvw-5-9: 47.9167vw;
+  --colvw-6: 50vw;
+  --colvw-6-3: 52.0833vw;
+  --colvw-6-4: 52.7778vw;
+  --colvw-6-6: 54.1667vw;
+  --colvw-6-8: 55.5556vw;
+  --colvw-6-9: 56.25vw;
+  --colvw-7: 58.3333vw;
+  --colvw-7-3: 60.4167vw;
+  --colvw-7-4: 61.1111vw;
+  --colvw-7-6: 62.5vw;
+  --colvw-7-8: 63.8889vw;
+  --colvw-7-9: 64.5833vw;
+  --colvw-8: 66.6667vw;
+  --colvw-8-3: 68.75vw;
+  --colvw-8-4: 69.4444vw;
+  --colvw-8-6: 70.8333vw;
+  --colvw-8-8: 72.2222vw;
+  --colvw-8-9: 72.9167vw;
+  --colvw-9: 75vw;
+  --colvw-9-3: 77.0833vw;
+  --colvw-9-4: 77.7778vw;
+  --colvw-9-6: 79.1667vw;
+  --colvw-9-8: 80.5556vw;
+  --colvw-9-9: 81.25vw;
+  --colvw-10: 83.3333vw;
+  --colvw-10-3: 85.4167vw;
+  --colvw-10-4: 86.1111vw;
+  --colvw-10-6: 87.5vw;
+  --colvw-10-8: 88.8889vw;
+  --colvw-10-9: 89.5833vw;
+  --colvw-11: 91.6667vw;
+  --colvw-11-3: 93.75vw;
+  --colvw-11-4: 94.4444vw;
+  --colvw-11-6: 95.8333vw;
+  --colvw-11-8: 97.2222vw;
+  --colvw-11-9: 97.9167vw;
+  --colvw-12: 100vw;
+
+  --border-radius: 4px;
+  --corner-radius: var(--border-radius);
+}

package/dist/tokens/apps/tokens/code-page/code-page.css

@@ -0,0 +1,79 @@
+
+
+.codeCol {
+  padding: 0 80px;
+  padding-top: 40px;
+  overflow-y: scroll;
+
+  position: relative;
+  flex: 1;
+  background-color: #000;
+
+  color: #fff;
+  padding-bottom: 40px;
+
+  --exampleDeclaration: #aaa;/*#79C316;*/
+  --exampleDeclarationWeight: bold;
+  --exampleName: #9DD354;
+  --exampleValue: #87C7E8;
+}
+
+  .codeCol::-webkit-scrollbar-thumb {
+    background-color: #555; 
+    border: 4px solid #000;
+  }
+
+  .codeCol h1 {
+    color: #fff;
+    margin-top: 40px;
+    margin-bottom: 10px;
+    font-size: 30px;
+    font-weight: 200;
+  }
+
+  #style_guide.plugin .codeCol {
+    display: none;
+  }
+
+  .s_code #style_guide.plugin .codeCol {
+    position: absolute;
+    left: 0px; top: 0; bottom: 0; right: 0;
+    display: block;
+    z-index: 100;
+  }
+
+    .codeCol .version {
+      position: fixed;
+      bottom: 20px; right: 20px;
+      color: white;
+      font: var( --text-04 );
+    }
+
+/* EXAMPLE ROWS ======================================================= */
+.codeExample {
+  padding: 4px 0px;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  font-size: 14px;
+  color: var( --exampleName );
+  transform-style: preserve-3d;
+}
+  .codeExample pre {
+    margin: var( --spacing-1 ) 0;
+  }
+
+  .codeExample:hover:after {
+    content: ' ';
+    position: absolute;
+    top: 0; bottom: 0;
+    left: calc( -1 * var( --spacing-1 ) );
+    right: var( --spacing-1 );
+    background-color: var( --grey-03 );
+    border-radius: var( --corner-radius );
+    /* z-index: -1; */
+    transform: translateZ(-1px);
+  }
+/* END EXAMPLE ROWS =================================================== */
+
+

package/dist/tokens/apps/tokens/code-page/code-page.js

@@ -0,0 +1,45 @@
+import fetchCss from '../../utils/fetchCss.js';
+import fetchScript from '../../utils/fetchScript.js';
+import renderClassMixins, { classMixinTypes } from './sections/classesMixins.js';
+import renderHtmlCssStubs from './sections/htmlCssStubs.js';
+import renderVars, { varTypes } from './sections/variables.js';
+
+let root;
+
+export default async function init(state) {
+  fetchCss('./code-page.css', import.meta );
+  fetchCss('../../local_modules/highlight/styles/agate.css', import.meta );
+  await fetchScript('../../local_modules/highlight/highlight.pack.js', import.meta );
+  RouteState.addDiffListener(
+    "valueset",
+    function() {
+      render( state );
+    }
+  );
+  root = document.createElement('div');
+  root.classList.add('codeCol');
+  render( state );
+  return root;
+}
+
+async function render (state) {
+  const valuesetHTML = [];
+  if (RouteState.route.valueset) {
+    root.innerHTML = '';
+
+    await renderVars(state, root, varTypes.CSS);
+    await renderVars(state, root, varTypes.SCSS);
+    await renderClassMixins(state, root, classMixinTypes.CSS);
+    await renderClassMixins(state, root, classMixinTypes.SCSS);
+    await renderClassMixins(state, root, classMixinTypes.COMPS);
+    await renderHtmlCssStubs(state, root);
+
+    const versionEle = document.createElement('div');
+    versionEle.classList.add('version');
+    versionEle.innerHTML = state.version;
+    root.appendChild(versionEle);
+  }else{
+    valuesetHTML.push(`<div class="closeBtn" onClick="RouteState.merge({code:''})">close</div>`);
+  }
+}
+

package/dist/tokens/apps/tokens/code-page/sections/classesMixins.js

@@ -0,0 +1,109 @@
+import { STNK_CLIPBOARD_UPDATE } from '../../../clipboard/clipboard.js';
+import fetchJSON from '../../../utils/fetchJson.js';
+
+export const classMixinTypes = {
+	CSS: "css classes",
+	SCSS: "scss mixins",
+	COMPS: "component mixins"
+}
+
+export default async function renderClassMixins(state, root, type) {
+  let contentSource;
+  let codeType;
+  switch (type) {
+    case classMixinTypes.SCSS:
+      contentSource = await fetchJSON(`${state.tokenDir}/source/cssApi/${RouteState.route.valueset}.scss.json`).catch(err => {});
+      codeType = 'scss';
+      break;
+    case classMixinTypes.CSS:
+      contentSource = await fetchJSON(`${state.tokenDir}/source/cssApi/${RouteState.route.valueset}.css.json`).catch(err => {});
+      codeType = 'css';
+      break;
+    case classMixinTypes.COMPS:
+      contentSource = await fetchJSON(`${state.tokenDir}/source/componentScssMixins/${RouteState.route.valueset}.json`).catch(err => {});
+      codeType = 'scss';
+      break;
+    default :
+      console.error('not using enum for renderClassMixins');
+      return;
+  }
+  if (contentSource) {
+    const h1Ele = document.createElement('h1');
+    h1Ele.innerHTML = `${type.toUpperCase()}`;
+    root.appendChild(h1Ele);
+
+    if (type === classMixinTypes.COMPS && contentSource['module-info']) {
+      const path = `@use "${contentSource['module-info'].path}" as ${contentSource['module-info'].namespace};`;
+      root.appendChild(
+        createNamespaceCode('scss', path, path)
+      );
+    }
+
+    Object.entries(contentSource).map(entry => {
+      const name = entry[0];
+      const values = entry[1];
+      if (name === 'module-info') return;
+
+      const contentArr = values.output.split("{");
+      let copyStr = "Nothing to copy";
+      let codeStr = 'No code str';
+      if (contentArr.length > 0 ) {
+        if (type === classMixinTypes.CSS) {
+          const contentSelectorArr = contentArr[0].split(',');
+          copyStr = contentSelectorArr[0].trim().replace('.','').replace(':hover','');
+          codeStr = values.output;
+        }else if (type === classMixinTypes.SCSS) {
+          copyStr = `${contentArr[0].trim().replace("mixin",'include')};`;
+          codeStr = values.output;
+        }else if (type === classMixinTypes.COMPS) {
+          copyStr = `@include ${values.outputSegmentRef};`;//`${contentArr[0].replace("@mixin ", "@include ").trim()};`;
+          codeStr = values.outputSegment;
+        }
+      }
+
+      const ele = document.createElement('div');
+      ele.classList.add('codeExample');
+      ele.innerHTML = `<pre>${hljs.highlight(codeType, codeStr).value}</pre>`;
+      ele.addEventListener('click', evt => {
+        evt.target.dispatchEvent(
+          new CustomEvent(
+            STNK_CLIPBOARD_UPDATE, 
+            { bubbles: true,
+              detail: {
+                clipboard: 'generic',
+                properties: {
+                  content: copyStr
+                }
+              }
+            }
+          )
+        )
+      });
+      root.appendChild(ele);
+    });
+  }
+}
+
+function createNamespaceCode(type, content, copyStr) {
+  const ele = document.createElement('div');
+  ele.classList.add('codeExample');
+  ele.innerHTML = `<pre>${hljs.highlight(type, content).value}</pre>`;
+  ele.addEventListener('click', evt => {
+    evt.target.dispatchEvent(
+      new CustomEvent(
+        STNK_CLIPBOARD_UPDATE, 
+        { bubbles: true,
+          detail: {
+            clipboard: 'generic',
+            properties: {
+              content: copyStr
+            }
+          }
+        }
+      )
+    )
+  });
+  return ele;
+}
+
+

package/dist/tokens/apps/tokens/code-page/sections/htmlCssStubs.js

@@ -0,0 +1,47 @@
+import { STNK_CLIPBOARD_UPDATE } from '../../../clipboard/clipboard.js';
+import fetchJSON from '../../../utils/fetchJson.js';
+import { trimChar } from '../../../utils/utils.js';
+
+export default async function renderHtmlCssStubs(state, root) {
+  const contentFileName = trimChar(RouteState.route.valueset, '-');
+  const contentSource = await fetchJSON(`${state.tokenDir}/source/htmlStubs/${contentFileName}.json` ).catch(err => {});
+  // let contentSource = state.htmlStubs[trimChar(RouteState.route.valueset, '-')];
+
+  if (contentSource) {
+    const htmlH1Ele = document.createElement('h1');
+    htmlH1Ele.innerHTML = `HTML Stub`;
+    root.appendChild(htmlH1Ele);
+    const htmlCode = contentSource.html;
+    renderSubSection('html', htmlCode, root);
+
+    const scssH1Ele = document.createElement('h1');
+    scssH1Ele.innerHTML = `SCSS Stub`;
+    root.appendChild(scssH1Ele);
+    const scssCode = contentSource.scss;
+    renderSubSection('scss', scssCode, root);
+  }
+}
+
+function renderSubSection (codeType, content, root) {
+  let copyStr = content.output;
+  const ele = document.createElement('div');
+  ele.classList.add('codeExample');
+  ele.innerHTML = `<pre>${hljs.highlight(codeType, content.output).value}</pre>`;
+  ele.addEventListener('click', evt => {
+    evt.target.dispatchEvent(
+      new CustomEvent(
+        STNK_CLIPBOARD_UPDATE, 
+        { bubbles: true,
+          detail: {
+            clipboard: 'generic',
+            properties: {
+              content: copyStr
+            },
+            display: '(HTML / SCSS Stub Snippet)'
+          }
+        }
+      )
+    )
+  });
+  root.appendChild(ele);
+}

package/dist/tokens/apps/tokens/code-page/sections/variables.js

@@ -0,0 +1,91 @@
+import { STNK_CLIPBOARD_UPDATE } from '../../../clipboard/clipboard.js';
+import fetchJSON from '../../../utils/fetchJson.js';
+
+export const varTypes = {
+	CSS: "css",
+	SCSS: "scss"
+}
+
+export default async function renderVars(state, root, type) {
+  let vars;
+  if (type === "scss" ) {
+    vars = await fetchJSON(`${state.tokenDir}/source/scssVariables/${RouteState.route.valueset}.json`).catch(err => {});
+    // vars = state.scssVariables[RouteState.route.valueset];
+  }else{
+    vars = await fetchJSON(`${state.tokenDir}/source/cssVariables/${RouteState.route.valueset}.json`).catch(err => {});
+    // vars = state.cssVariables[RouteState.route.valueset];
+  }
+
+  if (vars) {
+    const h1Ele = document.createElement('h1');
+    h1Ele.innerHTML = `${type.toUpperCase()} Variables`;
+    root.appendChild(h1Ele);
+
+    if (type === 'scss' && vars['module-info']) {
+      const path = `@use "${vars['module-info'].path}" as ${vars['module-info'].namespace};`;
+      root.appendChild(
+        createNamespaceCode( type, path, path )
+      );
+    }
+
+    Object.entries(vars).map(entry => {
+      const name = entry[0];
+      const values = entry[1];
+      if (name === 'module-info') return;
+
+      const contentArr = values.output.split(":");
+      let copyStr = "Nothing to copy";
+      let codeStr = "No code str";
+      if (contentArr.length > 0 ) {
+        if (type === "css" ) {
+          copyStr = `var( ${contentArr[0].trim()} );`;
+          codeStr = values.output;
+        }else{
+          copyStr = values.outputSegmentRef;//contentArr[0].trim();
+          codeStr = values.outputSegment;
+        }
+      }
+      const ele = document.createElement('div');
+      ele.classList.add('codeExample');
+      ele.innerHTML = `<pre>${hljs.highlight(type, codeStr).value}</pre>`;
+      ele.addEventListener('click', evt => {
+        evt.target.dispatchEvent(
+          new CustomEvent(
+            STNK_CLIPBOARD_UPDATE, 
+            { bubbles: true,
+              detail: {
+                clipboard: 'generic',
+                properties: {
+                  content: copyStr
+                }
+              }
+            }
+          )
+        )
+      });
+      root.appendChild(ele);
+    });
+  }
+}
+
+function createNamespaceCode(type, content, copyStr) {
+  const ele = document.createElement('div');
+  ele.classList.add('codeExample');
+  ele.innerHTML = `<pre>${hljs.highlight(type, content).value}</pre>`;
+  ele.addEventListener('click', evt => {
+    evt.target.dispatchEvent(
+      new CustomEvent(
+        STNK_CLIPBOARD_UPDATE, 
+        { bubbles: true,
+          detail: {
+            clipboard: 'generic',
+            properties: {
+              content: copyStr
+            }
+          }
+        }
+      )
+    )
+  });
+  return ele;
+}

package/dist/tokens/apps/tokens/groups-nav/groups-nav.css

@@ -0,0 +1,47 @@
+
+
+
+#groups {
+  height: 50px;
+  background-color: var( --grey-02 );
+  color: var( --grey-10 );
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+  .group-nav-item {
+    position: relative;
+    text-transform: uppercase;
+    flex: 1;
+    font: var( --text-04 );
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+    .group-nav-item:hover {
+      cursor: pointer;
+    }
+
+    .group-nav-item:hover:after {
+      content: ' ';
+      position: absolute;
+      left: 0; right: 0;
+      bottom: 0;
+      height: 6px;
+      background-color: var( --grey-05 );
+    }
+
+  .group-nav-item.selected:after {
+    content: ' ';
+    position: absolute;
+    left: 0; right: 0;
+    bottom: 0;
+    height: 6px;
+    background-color: var( --grey-10 );
+  }