scu-web-components 0.0.36 → 0.0.38

package/dist/tokens/source/jsCssGeneratorSansAssets.js

@@ -1,35 +1,1043 @@
-export default class JsCssGenerator{constructor(e){this.tokens={"COLORS|color":{primary:{"01":["rgba(28,74,5,1)"],"02":["rgba(41,95,14,1)"],"03":["rgba(52,110,6,1)"],"04":["rgba(63,121,15,1)"],"05":["rgba(75,132,29,1)"],"":["rgba(75,132,29,1)"],"06":["rgba(99,166,10,1)"],"07":["rgba(158,201,101,1)"],"08":["rgba(200,230,160,1)"],"09":["rgba(232,247,212,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(246,255,237,1)"]},grey:{10:["rgba(255,255,255,1)"],"00":["rgba(0,0,0,1)"],"01":["rgba(29,30,32,1)"],"02":["rgba(62,65,67,1)"],"03":["rgba(87,90,93,1)"],"04":["rgba(114,118,122,1)"],"05":["rgba(134,137,140,1)"],"":["rgba(134,137,140,1)"],"06":["rgba(154,158,160,1)"],"07":["rgba(177,180,183,1)"],"08":["rgba(194,197,200,1)"],"09":["rgba(218,220,223,1)"],"092":["rgba(235,238,240,1)"],"095":["rgba(246,247,249,1)"]},error:{"":["rgba(228,109,114,1)"],light:["rgba(249,230,230,1)"],dark:["rgba(158,0,0,1)"]},warning:{"":["rgba(255,134,66,1)"],light:["rgba(255,214,191,1)"],dark:["rgba(128,46,0,1)"]},success:{"":["rgba(123,209,8,1)"],light:["rgba(213,233,187,1)"],dark:["rgba(72,121,6,1)"]},information:{"":["rgba(252,231,40,1)"],light:["rgba(255,250,208,1)"],dark:["rgba(170,153,0,1)"]},icon:{"":["rgba(1,1,1,1)"]},secondary:{"":["rgba(87,90,93,1)"]},mortgage:{"01":["rgba(74,2,57,1)"],"02":["rgba(92,1,75,1)"],"03":["rgba(107,4,83,1)"],"04":["rgba(136,6,105,1)"],"05":["rgba(162,0,125,1)"],"":["rgba(162,0,125,1)"],"06":["rgba(193,64,164,1)"],"07":["rgba(214,121,192,1)"],"08":["rgba(235,169,220,1)"],"09":["rgba(247,220,242,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(253,240,250,1)"]},investments:{"01":["rgba(15,14,88,1)"],"02":["rgba(37,37,124,1)"],"03":["rgba(52,52,145,1)"],"04":["rgba(65,64,157,1)"],"05":["rgba(85,84,177,1)"],"":["rgba(85,84,177,1)"],"06":["rgba(117,116,195,1)"],"07":["rgba(160,159,219,1)"],"08":["rgba(200,199,237,1)"],"09":["rgba(227,226,248,1)"],"092":["rgba(232,231,249,1)"],"095":["rgba(244,244,255,1)"]},"credit-cards":{"01":["rgba(1,51,77,1)"],"02":["rgba(1,70,106,1)"],"03":["rgba(1,88,132,1)"],"04":["rgba(1,104,157,1)"],"05":["rgba(0,122,185,1)"],"":["rgba(0,122,185,1)"],"06":["rgba(46,147,199,1)"],"07":["rgba(94,173,213,1)"],"08":["rgba(140,197,227,1)"],"09":["rgba(189,224,242,1)"],"092":["rgba(227,241,249,1)"],"095":["rgba(236,249,255,1)"]},student:{"01":["rgba(1,56,49,1)"],"02":["rgba(0,75,67,1)"],"03":["rgba(0,94,83,1)"],"04":["rgba(0,113,100,1)"],"05":["rgba(0,131,116,1)"],"":["rgba(0,131,116,1)"],"06":["rgba(46,156,143,1)"],"07":["rgba(105,185,176,1)"],"08":["rgba(157,217,211,1)"],"09":["rgba(209,240,237,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(237,253,252,1)"]},savings:{"01":["rgba(119,33,0,1)"],"02":["rgba(149,41,0,1)"],"03":["rgba(163,46,2,1)"],"04":["rgba(178,51,3,1)"],"05":["rgba(195,75,0,1)"],"":["rgba(195,75,0,1)"],"06":["rgba(230,118,47,1)"],"07":["rgba(242,165,109,1)"],"08":["rgba(250,209,167,1)"],"09":["rgba(255,235,211,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(253,247,239,1)"]},checking:{"01":["rgba(49,6,67,1)"],"02":["rgba(64,21,83,1)"],"03":["rgba(92,40,114,1)"],"04":["rgba(119,57,145,1)"],"05":["rgba(148,77,178,1)"],"":["rgba(148,77,178,1)"],"06":["rgba(168,108,193,1)"],"07":["rgba(198,151,217,1)"],"08":["rgba(218,187,232,1)"],"09":["rgba(233,213,240,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(249,237,252,1)"]},"red-shoes":{"01":["rgba(90,7,9,1)"],"02":["rgba(117,15,18,1)"],"03":["rgba(143,23,27,1)"],"04":["rgba(171,31,36,1)"],"05":["rgba(201,40,45,1)"],"":["rgba(201,40,45,1)"],"06":["rgba(214,80,84,1)"],"07":["rgba(226,119,121,1)"],"08":["rgba(240,162,164,1)"],"09":["rgba(255,219,220,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(255,240,241,1)"]},business:{"01":["rgba(83,72,1,1)"],"02":["rgba(111,96,1,1)"],"03":["rgba(141,122,1,1)"],"04":["rgba(168,145,1,1)"],"05":["rgba(199,172,0,1)"],"":["rgba(199,172,0,1)"],"06":["rgba(212,190,46,1)"],"07":["rgba(227,209,98,1)"],"08":["rgba(241,229,149,1)"],"09":["rgba(255,247,197,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(255,251,224,1)"]},personal:{"01":["rgba(1,40,60,1)"],"02":["rgba(1,59,90,1)"],"03":["rgba(1,80,121,1)"],"04":["rgba(1,99,150,1)"],"05":["rgba(0,122,185,1)"],"":["rgba(0,122,185,1)"],"06":["rgba(48,149,202,1)"],"07":["rgba(100,179,220,1)"],"08":["rgba(154,210,238,1)"],"09":["rgba(202,237,255,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(226,245,255,1)"]},heloc:{"01":["rgba(41,17,75,1)"],"02":["rgba(56,28,92,1)"],"03":["rgba(76,44,118,1)"],"04":["rgba(101,63,149,1)"],"05":["rgba(128,91,177,1)"],"":["rgba(128,91,177,1)"],"06":["rgba(159,126,201,1)"],"07":["rgba(189,164,221,1)"],"08":["rgba(207,191,229,1)"],"09":["rgba(229,219,244,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(243,239,252,1)"]}},"TYPOGRAPHY|type":{text:{10:["2.5rem","'Proxima Nova'","400","3.045rem","0rem","none"],"09":["1.875rem","'Proxima Nova'","400","2.284rem","0rem","none"],"08":["1.5rem","'Proxima Nova'","400","1.827rem","0rem","none"],"07":["1.25rem","'Proxima Nova'","400","1.523rem","0rem","none"],"06":["1.125rem","'Proxima Nova'","400","1.625rem","0rem","none"],"05":["1rem","'Proxima Nova'","400","1.218rem","0rem","none"],"":["1rem","'Proxima Nova'","400","1.218rem","0rem","none"],"04":["0.875rem","'Proxima Nova'","400","1.066rem","0rem","none"],"03":["0.75rem","'Proxima Nova'","400","0.914rem","0rem","none"],"02":["0.6875rem","'Proxima Nova'","400","0.837rem","0rem","none"],"01":["0.5625rem","'Proxima Nova'","400","0.685rem","0rem","none"]},"text-bold-condensed":{10:["2.5rem","'Proxima Nova Condensed'","700","3.045rem","0rem","none"],"09":["1.875rem","'Proxima Nova Condensed'","700","2.284rem","0rem","none"],"08":["1.5rem","'Proxima Nova Condensed'","700","1.827rem","0rem","none"],"07":["1.25rem","'Proxima Nova Condensed'","700","1.523rem","0rem","none"],"06":["1.125rem","'Proxima Nova Condensed'","700","1.37rem","0rem","none"],"05":["1rem","'Proxima Nova Condensed'","700","1.218rem","0rem","none"],"":["1rem","'Proxima Nova Condensed'","700","1.218rem","0rem","none"],"04":["0.875rem","'Proxima Nova Condensed'","700","1.066rem","0rem","none"],"03":["0.75rem","'Proxima Nova Condensed'","700","0.914rem","0rem","none"],"02":["0.6875rem","'Proxima Nova Condensed'","700","0.837rem","0rem","none"],"01":["0.5625rem","'Proxima Nova Condensed'","700","0.685rem","0rem","none"]},"text-bold":{10:["2.5rem","'Proxima Nova'","700","3.045rem","0rem","none"],"09":["1.875rem","'Proxima Nova'","700","2.284rem","0rem","none"],"08":["1.5rem","'Proxima Nova'","700","1.827rem","0rem","none"],"07":["1.25rem","'Proxima Nova'","700","1.523rem","0rem","none"],"06":["1.125rem","'Proxima Nova'","700","1.37rem","0rem","none"],"05":["1rem","'Proxima Nova'","700","1.218rem","0rem","none"],"":["1rem","'Proxima Nova'","700","1.218rem","0rem","none"],"04":["0.875rem","'Proxima Nova'","700","1.066rem","0rem","none"],"03":["0.75rem","'Proxima Nova'","700","0.914rem","0rem","none"],"02":["0.6875rem","'Proxima Nova'","700","0.837rem","0rem","none"],"01":["0.5625rem","'Proxima Nova'","700","0.685rem","0rem","none"]}},"EFFECTS|effect":{shadow:{"":["0px 0px 8px 0px rgba(0,0,0,0.27)"]},focus:{"":["0px 0px 0px 2px rgba(53,155,249,1)"]}},"ICONS|icon":{placeholder:{svg:[""]},clear:{svg:[""]},instagram:{svg:[""]},close:{svg:[""]},check:{svg:[""]},download:{svg:[""]},linkedin:{svg:[""]},facebook:{svg:[""]},tiktok:{svg:[""]},location:{svg:[""]},"location-dot":{svg:[""]},search:{svg:[""]},visible:{svg:[""]},hidden:{svg:[""]},lock:{svg:[""]},edit:{svg:[""]},envelope:{svg:[""]},"external-link":{svg:[""]},crosshairs:{svg:[""]},message:{svg:[""]},minus:{svg:[""]},mobile:{svg:[""]},pdf:{svg:[""]},plus:{svg:[""]},"chevron-up":{svg:[""]},"chevron-down":{svg:[""]},"chevron-left":{svg:[""]},"chevron-right":{svg:[""]},clock:{svg:[""]},info:{svg:[""]},user:{svg:[""]},circle:{svg:[""]},code:{svg:[""]},print:{svg:[""]},slider:{svg:[""]},document:{svg:[""]},checkbox:{svg:[""]},radio:{svg:[""]},"checkbox-selected":{svg:[""]},"radio-selected":{svg:[""]},"checkbox-hover":{svg:[""]},"radio-hover":{svg:[""]},"checkbox-selected-hover":{svg:[""]},"radio-selected-hover":{svg:[""]},"checkbox-disabled":{svg:[""]},"radio-disabled":{svg:[""]},"checkbox-selected-disabled":{svg:[""]},"radio-selected-disabled":{svg:[""]},"color-test":{svg:[""]}},"GRAPHICS|graphic":{"apple-app-store":{svg:[""],"":["159px","47px"]},logo:{svg:[""],"":["143px","64px"]},ncua:{svg:[""],"":["108px","50px"]},ehl:{svg:[""],"":["53px","53px"]},"google-play-store":{svg:[""],"":["159px","47px"]}},"LAYOUTS|":{spacing:{1:["0.625rem"]},col:{1:["8.3333%"]},colvw:{1:["8.3333vw"]}},"FONTS|font":{"proxima_nova condensed-700-normal":{"":["Proxima Nova Condensed","font-proxima_nova condensed-700-normal.otf","700","normal"]},"proxima_nova-700-normal":{"":["Proxima Nova","font-proxima_nova-700-normal.otf","700","normal"]},"proxima_nova-300-normal":{"":["Proxima Nova","font-proxima_nova-300-normal.otf","300","normal"]}},"BREAKPOINTS|breakpoint":{}},this.prefix="scw",this.uuid="4bdcd1ee-9e5d-499d-a372-4f265681d3e4",this.initialized=!1,this.lookup,this.css_classes_root="",this.css_comp_suffix="",this.units=[0,1,2,3,4,5,6,7,8,9,10,11,12],this.subUnits=[0,3,4,6,8,9],this.subUnitAttachments=[0,1,2,3],this.config=e||{},this.version=this.config.version||!1,this.extraCssPromise=this.config.extraCssPromise||!1,this.assetsUrl=this.config.assetsUrl||!1,this.attributes=this.config.attributes||!0,this.classes=this.config.classes||!0,this.variablesOnly=this.config.variablesOnly||!1}async buildCss(){this.version&&(this.css_comp_suffix="-"+this.version),this.lookup={};let t=`/*
-`,e="";return t=(t=(t=(t=(t=(t+=`* CREATED: ${new Date}
-`)+`* VERSION: ${this.version}
-`)+`* UUID: ${this.uuid}
-`+`*/
-`)+this.generateCssVariables())+this.generateLayoutClasses())+this.generateGapSpacingClasses(),!1===this.variablesOnly&&(t+=this.generateCssClasses(),e=this.generateFontCssClasses(),t=(t+=this.generateColumnClasses())+this.generateSpacingClasses()),t=(t+=this.generateLayoutHelperClasses())+this.generateAlignmentClasses(),this.extraCssPromise&&await this.extraCssPromise().then(e=>{t+=`
-/* EXTRA CSS */
- `+e}),{tokens:this.tokens,prefix:this.prefix,uuid:this.uuid,version:this.version,css:t,fontCss:e,lookup:this.lookup}}createCssVariableFunk(e,t,a,r,i){const s=this.createCssVariableName(e,t,a,r);return(e,t)=>{t=t||"",i.push(`  ${s}${t}: ${e};
-`)}}createCssVariableNameStub(e,t,a){return"--"+this.mergeDashed(e,t,a)}createCssVariableName(e,t,a,r){return this.mergeDashed(this.createCssVariableNameStub(e,t,a),r)}generateCssVariables(){const i=[];return Object.entries(this.tokens).map(e=>{var t=e[0].split("|");const r=t[0],g=t[1];t=e[1];Object.entries(t).map(e=>{let n=e[0],t=":root, :host";var a=n.split(":"),a=(1<a.length&&(n=a[0],t=`[${this.prefix}-${a[1]}]`,this.version&&(t=`:root ${t}, :host ${t}, :host`+t)),e[1]);const o=[];Object.entries(a).map(e=>{var t=e[0];const i=e[1],s=this.createCssVariableFunk(this.prefix,g,n,t,o);switch(r){case"COLORS":s(i[0],"");break;case"EFFECTS":s(i[0],"-shadow");break;case"LAYOUTS":this.units.map(r=>{this.subUnits.map(e=>{if(!(-1===this.subUnitAttachments.indexOf(r)&&0<e))if(1===r&&0===e)s(i[0]);else{const t=this.createCssVariableFunk(this.prefix,g,n,r+(e?"-"+e:""),o),a=r+e/12;t(`calc( var( --${this.prefix}-${n}-1 ) *  ${a.toFixed(3)} )`)}})});break;case"TYPOGRAPHY":i[6]&&s(i[6],"-opentype-flags"),s(`${i[2]} ${i[0]}/${i[3]} `+i[1],"-font");break;case"ICONS":break;case"GRAPHICS":s(i[0],"-width"),s(i[1],"-height")}}),0<o.length&&(i.push(t+` {
-`),o.map(e=>{i.push(e)}),i.push(`}
-`))})}),i.join("")}createCssClassFunk(g,l,h,m,c){return(e,t,a,r)=>{a=a||"";var i=this.mergeDashed(g,e,l,h);let s=t;Array.isArray(t)&&(s=t.join("\n  "));const n=[],o=[];!0===c&&(this.processSelector(n,this.css_classes_root,""+i+a,!1),this.css_comp_suffix&&0<this.css_comp_suffix.length&&this.processSelector(n,this.css_classes_root,""+i+this.css_comp_suffix+a,!1)),!0===r?(t=this.mergeDashed(g,e,l,h+"s"),this.classes&&this.processSelector(n,this.css_classes_root,"."+t+a),this.attributes&&this.processSelector(n,this.css_classes_root,`[${t}]`+a),this.addToLookup(e,null,h+"s",a,s)):(this.classes&&this.processSelector(n,this.css_classes_root,"."+i+a),this.attributes&&this.processSelector(n,this.css_classes_root,`[${i}]`+a)),o.push(""+n.join(",\n")+`
-{
-  ${s} 
-}`),this.addToLookup(e,l,h,a,s),m.push(o.join("")),m.push("\n\n")}}processSelector(e,t,a,r){t&&0<t.length?(!1!==r&&e.push(""+t+a),e.push(t+" "+a)):e.push(a)}generateCssClasses(){const h=[];return Object.entries(this.tokens).map(e=>{var t=e[0].split("|");const g=t[0],l=t[1];t=e[1];Object.entries(t).map(e=>{const o=e[0];var t=o.split(":");1<t.length&&"root"!==t[1]||(t=e[1],Object.entries(t).map(e=>{var t,a=e[0],r=e[1],i=this.createCssVariableName(this.prefix,l,o,a);this.createCssVariableNameStub(this.prefix,l,o);const s=this.createCssClassFunk(this.prefix,o,a,h,!1);switch(g){case"COLORS":s("color",`color: var( ${i} ); --color: var( ${i} );`),s("background-color",`background-color: var( ${i} ); --background-color: var( ${i} );`),s("border",`border: 1px solid var( ${i} );`),s("border-color",`border-color: var( ${i} );`),s("border-top-bottom",`border-top: 1px solid var( ${i} );
- border-bottom: 1px solid var( ${i} );`),s("border-top",`border-top: 1px solid var( ${i} );`),s("border-bottom",`border-bottom: 1px solid var( ${i} );`),s("border-left-right",`border-left: 1px solid var( ${i} );
- border-right: 1px solid var( ${i} );`),s("border-left",`border-left: 1px solid var( ${i} );`),s("border-right",`border-right: 1px solid var( ${i} );`),s("color-hover",`color: var( ${i} ); --color: var( ${i} );`,":hover"),s("background-color-hover",`background-color: var( ${i} ); --background-color: var( ${i} );`,":hover");break;case"EFFECTS":s("",`box-shadow: var( ${i}-shadow );`);break;case"LAYOUTS":break;case"TYPOGRAPHY":const n=[`font: var( ${i}-font );`];r[5]&&n.push(`font-feature-settings: var( ${i}-opentype-flags );`),s("",n);break;case"ICONS":"svg"!==a&&(t=[`--svg-name: ${o};`],s("icon",t));break;case"GRAPHICS":"svg"!==a&&(t=[`--svg-name: ${o};`],s("graphic",t))}}))})}),h.join("")+"\n\n"}generateFontCssClasses(){const a=[];return Object.entries(this.tokens).map(e=>{const t=e[0].split("|")[0];e=e[1];Object.entries(e).map(e=>{e=e[1];Object.entries(e).map(e=>{e=e[1];"FONTS"===t&&a.push(`@font-face {
-  font-family: "${e[0]}";
-  src: ${this.assetsUrl?`url('${this.assetsUrl}/${e[1]}')`:e[4]};
-  font-weight: ${e[2]};
-  font-style: ${e[3]};
+
+  export default class JsCssGenerator {
+  
+    constructor (config) { // (version, extraCssPromise, assetsUrl, config ) {
+      this.tokens = {"COLORS|color":{"primary":{"01":["rgba(28,74,5,1)"],"02":["rgba(41,95,14,1)"],"03":["rgba(52,110,6,1)"],"04":["rgba(63,121,15,1)"],"05":["rgba(75,132,29,1)"],"":["rgba(75,132,29,1)"],"06":["rgba(99,166,10,1)"],"07":["rgba(158,201,101,1)"],"08":["rgba(200,230,160,1)"],"09":["rgba(232,247,212,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(246,255,237,1)"]},"grey":{"10":["rgba(255,255,255,1)"],"00":["rgba(0,0,0,1)"],"01":["rgba(29,30,32,1)"],"02":["rgba(62,65,67,1)"],"03":["rgba(87,90,93,1)"],"04":["rgba(114,118,122,1)"],"05":["rgba(134,137,140,1)"],"":["rgba(134,137,140,1)"],"06":["rgba(154,158,160,1)"],"07":["rgba(177,180,183,1)"],"08":["rgba(194,197,200,1)"],"09":["rgba(218,220,223,1)"],"092":["rgba(235,238,240,1)"],"095":["rgba(246,247,249,1)"]},"error":{"":["rgba(228,109,114,1)"],"light":["rgba(249,230,230,1)"],"dark":["rgba(158,0,0,1)"]},"warning":{"":["rgba(255,134,66,1)"],"light":["rgba(255,214,191,1)"],"dark":["rgba(128,46,0,1)"]},"success":{"":["rgba(123,209,8,1)"],"light":["rgba(213,233,187,1)"],"dark":["rgba(72,121,6,1)"]},"information":{"":["rgba(252,231,40,1)"],"light":["rgba(255,250,208,1)"],"dark":["rgba(170,153,0,1)"]},"icon":{"":["rgba(1,1,1,1)"]},"secondary":{"":["rgba(87,90,93,1)"]},"mortgage":{"01":["rgba(74,2,57,1)"],"02":["rgba(92,1,75,1)"],"03":["rgba(107,4,83,1)"],"04":["rgba(136,6,105,1)"],"05":["rgba(162,0,125,1)"],"":["rgba(162,0,125,1)"],"06":["rgba(193,64,164,1)"],"07":["rgba(214,121,192,1)"],"08":["rgba(235,169,220,1)"],"09":["rgba(247,220,242,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(253,240,250,1)"]},"investments":{"01":["rgba(15,14,88,1)"],"02":["rgba(37,37,124,1)"],"03":["rgba(52,52,145,1)"],"04":["rgba(65,64,157,1)"],"05":["rgba(85,84,177,1)"],"":["rgba(85,84,177,1)"],"06":["rgba(117,116,195,1)"],"07":["rgba(160,159,219,1)"],"08":["rgba(200,199,237,1)"],"09":["rgba(227,226,248,1)"],"092":["rgba(232,231,249,1)"],"095":["rgba(244,244,255,1)"]},"credit-cards":{"01":["rgba(1,51,77,1)"],"02":["rgba(1,70,106,1)"],"03":["rgba(1,88,132,1)"],"04":["rgba(1,104,157,1)"],"05":["rgba(0,122,185,1)"],"":["rgba(0,122,185,1)"],"06":["rgba(46,147,199,1)"],"07":["rgba(94,173,213,1)"],"08":["rgba(140,197,227,1)"],"09":["rgba(189,224,242,1)"],"092":["rgba(227,241,249,1)"],"095":["rgba(236,249,255,1)"]},"student":{"01":["rgba(1,56,49,1)"],"02":["rgba(0,75,67,1)"],"03":["rgba(0,94,83,1)"],"04":["rgba(0,113,100,1)"],"05":["rgba(0,131,116,1)"],"":["rgba(0,131,116,1)"],"06":["rgba(46,156,143,1)"],"07":["rgba(105,185,176,1)"],"08":["rgba(157,217,211,1)"],"09":["rgba(209,240,237,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(237,253,252,1)"]},"savings":{"01":["rgba(119,33,0,1)"],"02":["rgba(149,41,0,1)"],"03":["rgba(163,46,2,1)"],"04":["rgba(178,51,3,1)"],"05":["rgba(195,75,0,1)"],"":["rgba(195,75,0,1)"],"06":["rgba(230,118,47,1)"],"07":["rgba(242,165,109,1)"],"08":["rgba(250,209,167,1)"],"09":["rgba(255,235,211,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(253,247,239,1)"]},"checking":{"01":["rgba(49,6,67,1)"],"02":["rgba(64,21,83,1)"],"03":["rgba(92,40,114,1)"],"04":["rgba(119,57,145,1)"],"05":["rgba(148,77,178,1)"],"":["rgba(148,77,178,1)"],"06":["rgba(168,108,193,1)"],"07":["rgba(198,151,217,1)"],"08":["rgba(218,187,232,1)"],"09":["rgba(233,213,240,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(249,237,252,1)"]},"red-shoes":{"01":["rgba(90,7,9,1)"],"02":["rgba(117,15,18,1)"],"03":["rgba(143,23,27,1)"],"04":["rgba(171,31,36,1)"],"05":["rgba(201,40,45,1)"],"":["rgba(201,40,45,1)"],"06":["rgba(214,80,84,1)"],"07":["rgba(226,119,121,1)"],"08":["rgba(240,162,164,1)"],"09":["rgba(255,219,220,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(255,240,241,1)"]},"business":{"01":["rgba(83,72,1,1)"],"02":["rgba(111,96,1,1)"],"03":["rgba(141,122,1,1)"],"04":["rgba(168,145,1,1)"],"05":["rgba(199,172,0,1)"],"":["rgba(199,172,0,1)"],"06":["rgba(212,190,46,1)"],"07":["rgba(227,209,98,1)"],"08":["rgba(241,229,149,1)"],"09":["rgba(255,247,197,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(255,251,224,1)"]},"personal":{"01":["rgba(1,40,60,1)"],"02":["rgba(1,59,90,1)"],"03":["rgba(1,80,121,1)"],"04":["rgba(1,99,150,1)"],"05":["rgba(0,122,185,1)"],"":["rgba(0,122,185,1)"],"06":["rgba(48,149,202,1)"],"07":["rgba(100,179,220,1)"],"08":["rgba(154,210,238,1)"],"09":["rgba(202,237,255,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(226,245,255,1)"]},"heloc":{"01":["rgba(41,17,75,1)"],"02":["rgba(56,28,92,1)"],"03":["rgba(76,44,118,1)"],"04":["rgba(101,63,149,1)"],"05":["rgba(128,91,177,1)"],"":["rgba(128,91,177,1)"],"06":["rgba(159,126,201,1)"],"07":["rgba(189,164,221,1)"],"08":["rgba(207,191,229,1)"],"09":["rgba(229,219,244,1)"],"092":["rgba(204,218,222,1)"],"095":["rgba(243,239,252,1)"]}},"TYPOGRAPHY|type":{"text":{"10":["2.5rem","'Proxima Nova'","400","3.045rem","0rem","none"],"09":["1.875rem","'Proxima Nova'","400","2.531rem","0rem","none"],"08":["1.5rem","'Proxima Nova'","400","2.025rem","0rem","none"],"07":["1.25rem","'Proxima Nova'","400","1.688rem","0rem","none"],"06":["1.125rem","'Proxima Nova'","400","1.688rem","0rem","none"],"05":["1rem","'Proxima Nova'","400","1.5rem","0rem","none"],"":["1rem","'Proxima Nova'","400","1.5rem","0rem","none"],"04":["0.875rem","'Proxima Nova'","400","1.313rem","0rem","none"],"03":["0.75rem","'Proxima Nova'","400","0.938rem","0rem","none"],"02":["0.6875rem","'Proxima Nova'","400","0.859rem","0rem","none"],"01":["0.5625rem","'Proxima Nova'","400","0.703rem","0rem","none"]},"text-bold-condensed":{"10":["2.5rem","'Proxima Nova Condensed'","700","3.375rem","0rem","none"],"09":["1.875rem","'Proxima Nova Condensed'","700","2.531rem","0rem","none"],"08":["1.5rem","'Proxima Nova Condensed'","700","2.025rem","0rem","none"],"07":["1.25rem","'Proxima Nova Condensed'","700","1.688rem","0rem","none"],"06":["1.125rem","'Proxima Nova Condensed'","700","1.688rem","0rem","none"],"05":["1rem","'Proxima Nova Condensed'","700","1.5rem","0rem","none"],"":["1rem","'Proxima Nova Condensed'","700","1.5rem","0rem","none"],"04":["0.875rem","'Proxima Nova Condensed'","700","1.313rem","0rem","none"],"03":["0.75rem","'Proxima Nova Condensed'","700","0.938rem","0rem","none"],"02":["0.6875rem","'Proxima Nova Condensed'","700","0.859rem","0rem","none"],"01":["0.5625rem","'Proxima Nova Condensed'","700","0.703rem","0rem","none"]},"text-bold":{"10":["2.5rem","'Proxima Nova'","700","3.375rem","0rem","none"],"09":["1.875rem","'Proxima Nova'","700","2.531rem","0rem","none"],"08":["1.5rem","'Proxima Nova'","700","2.025rem","0rem","none"],"07":["1.25rem","'Proxima Nova'","700","1.688rem","0rem","none"],"06":["1.125rem","'Proxima Nova'","700","1.688rem","0rem","none"],"05":["1rem","'Proxima Nova'","700","1.5rem","0rem","none"],"":["1rem","'Proxima Nova'","700","1.5rem","0rem","none"],"04":["0.875rem","'Proxima Nova'","700","1.313rem","0rem","none"],"03":["0.75rem","'Proxima Nova'","700","0.938rem","0rem","none"],"02":["0.6875rem","'Proxima Nova'","700","0.859rem","0rem","none"],"01":["0.5625rem","'Proxima Nova'","700","0.703rem","0rem","none"]}},"EFFECTS|effect":{"shadow":{"":["0px 0px 8px 0px rgba(0,0,0,0.27)"]},"focus":{"":["0px 0px 0px 2px rgba(53,155,249,1)"]}},"ICONS|icon":{"placeholder":{"svg":[""]},"close":{"svg":[""]},"instagram":{"svg":[""]},"check":{"svg":[""]},"download":{"svg":[""]},"menu":{"svg":[""]},"linkedin":{"svg":[""]},"facebook":{"svg":[""]},"tiktok":{"svg":[""]},"location":{"svg":[""]},"location-dot":{"svg":[""]},"search":{"svg":[""]},"visible":{"svg":[""]},"hidden":{"svg":[""]},"lock":{"svg":[""]},"edit":{"svg":[""]},"envelope":{"svg":[""]},"external-link":{"svg":[""]},"crosshairs":{"svg":[""]},"message":{"svg":[""]},"minus":{"svg":[""]},"mobile":{"svg":[""]},"pdf":{"svg":[""]},"plus":{"svg":[""]},"chevron-up":{"svg":[""]},"chevron-down":{"svg":[""]},"chevron-left":{"svg":[""]},"chevron-right":{"svg":[""]},"clock":{"svg":[""]},"info":{"svg":[""]},"user":{"svg":[""]},"circle":{"svg":[""]},"code":{"svg":[""]},"print":{"svg":[""]},"slider":{"svg":[""]},"document":{"svg":[""]},"checkbox":{"svg":[""]},"radio":{"svg":[""]},"checkbox-selected":{"svg":[""]},"radio-selected":{"svg":[""]},"checkbox-hover":{"svg":[""]},"radio-hover":{"svg":[""]},"checkbox-selected-hover":{"svg":[""]},"radio-selected-hover":{"svg":[""]},"checkbox-disabled":{"svg":[""]},"radio-disabled":{"svg":[""]},"checkbox-selected-disabled":{"svg":[""]},"radio-selected-disabled":{"svg":[""]},"color-test":{"svg":[""]}},"GRAPHICS|graphic":{"apple-app-store":{"svg":[""],"":["159px","47px"]},"logo":{"svg":[""],"":["143px","64px"]},"ncua":{"svg":[""],"":["108px","50px"]},"ehl":{"svg":[""],"":["53px","53px"]},"google-play-store":{"svg":[""],"":["159px","47px"]}},"LAYOUTS|":{"spacing":{"1":["0.625rem"]},"col":{"1":["8.3333%"]},"colvw":{"1":["8.3333vw"]}},"FONTS|font":{"proxima_nova condensed-700-normal":{"":["Proxima Nova Condensed","font-proxima_nova condensed-700-normal.otf","700","normal"]},"proxima_nova-700-normal":{"":["Proxima Nova","font-proxima_nova-700-normal.otf","700","normal"]},"proxima_nova-300-normal":{"":["Proxima Nova","font-proxima_nova-300-normal.otf","300","normal"]}},"BREAKPOINTS|breakpoint":{"xlg":{"":["xlg","1200px","0px"]},"lg":{"":["lg","992px","0px"]},"md":{"":["md","768px","0px"]},"sm":{"":["sm","576px","0px"]}}};
+      this.prefix = 'scw';// dynamic
+      this.uuid = '8103ec77-4c61-4e36-9325-2e09f76f3c6f';// dynamic
+      
+      this.initialized = false;
+      this.lookup;
+  
+      this.css_classes_root = '';
+      this.css_comp_suffix = '';
+
+      this.units = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+      this.subUnits = [0, 3, 4, 6, 8, 9];
+      this.subUnitAttachments = [0, 1, 2, 3];
+
+      // process config
+      this.config = config ? config : {};
+      this.version = this.config.version ? this.config.version : false;
+      this.extraCssPromise = this.config.extraCssPromise ? this.config.extraCssPromise : false;
+      this.assetsUrl = this.config.assetsUrl ? this.config.assetsUrl : false;
+      this.attributes = this.config.attributes ? this.config.attributes : true;
+      this.classes = this.config.classes ? this.config.classes : true;
+      this.variablesOnly = this.config.variablesOnly ? this.config.variablesOnly : false;
+
+      /*con sole.log(`Generating CSS
+this.version ${this.version}
+this.extraCssPromise ${this.extraCssPromise}
+this.assetsUrl ${this.assetsUrl}
+this.attributes ${this.attributes}
+this.classes ${this.classes}
+      );*/
+    }
+
+    async buildCss() {
+      if (this.version) {
+        this.css_comp_suffix = `-${this.version}`;
+      }
+      this.lookup = {};// init lookup...
+      let cssString = `/*\n`;
+      let fontString = '';
+      cssString += `* CREATED: ${new Date()}\n`;
+      cssString += `* VERSION: ${this.version}\n`;
+      cssString += `* UUID: ${this.uuid}\n`;
+      cssString += `*/\n`;
+      cssString += this.generateCssVariables();
+      cssString += this.generateLayoutClasses();// needs to be first...
+      cssString += this.generateGapSpacingClasses();
+      
+      if (this.variablesOnly === false) {
+        cssString += this.generateCssClasses();
+        fontString = this.generateFontCssClasses();
+        cssString += this.generateColumnClasses();
+        cssString += this.generateSpacingClasses();
+      }
+      
+      cssString += this.generateLayoutHelperClasses();
+      cssString += this.generateAlignmentClasses();
+
+      if ( this.extraCssPromise ) {
+        await this.extraCssPromise().then(result => {
+          cssString += `\n/* EXTRA CSS */\n ${result}`;
+        });
+      }
+
+      return {
+        tokens: this.tokens,
+        prefix: this.prefix,
+        uuid: this.uuid,
+        version: this.version,
+        css: cssString,
+        fontCss: fontString,
+        lookup: this.lookup
+      }
+    }
+
+    /* Template Injection Points */
+    
+  // ====== CSS VARIABLES ====================================================
+  createCssVariableFunk(
+    prefix,
+    groupName,
+    patternName,
+    valueName,
+    tokenCssVars 
+  ) {
+    const cssVariableName = this.createCssVariableName(
+      prefix,
+      groupName,
+      patternName,
+      valueName
+    );
+    return (value, suffix) => {
+      if ( !suffix ) {
+        suffix = '';
+      }
+      tokenCssVars.push( 
+        `  ${cssVariableName}${suffix}: ${value};\n`
+      );
+    }
+  }
+
+  createCssVariableNameStub (prefix, groupName, patternName) {
+    return `--${this.mergeDashed( prefix, groupName, patternName )}`;// adding prefix is a different project...
+  }
+
+  createCssVariableName (prefix, groupName, patternName, valueName ) {
+    return this.mergeDashed( 
+      this.createCssVariableNameStub( prefix, groupName, patternName ),
+      valueName
+    );
+  }
+
+  generateCssVariables() {
+    const tokenCssVars = [];
+    Object.entries(this.tokens).map(groupEntry => {
+      const groupNameArr = groupEntry[0].split('|');
+      const groupType = groupNameArr[0];
+      const groupName = groupNameArr[1];
+      const group = groupEntry[1];
+      Object.entries(group).map(patternEntry => {
+        let patternName = patternEntry[0];
+
+        let scope = ':root, :host';
+        const patternNameArr = patternName.split(":");// name is name and scope
+        if (patternNameArr.length > 1) {
+          patternName = patternNameArr[0];
+          scope = `[${this.prefix}-${patternNameArr[1]}]`;
+          if (this.version) {
+            scope = `:root ${scope}, :host ${scope}, :host${scope}`;
+          }
+        }
+
+        const pattern = patternEntry[1];
+        const tmpCssVars = [];
+        Object.entries(pattern).map(valueEntry => {
+          const valueName = valueEntry[0];
+          const value = valueEntry[1];
+          const createCssVariable = this.createCssVariableFunk( 
+            this.prefix,
+            groupName,
+            patternName,
+            valueName,
+            tmpCssVars, // tokenCssVars
+          );
+          switch ( groupType ) {
+            case "COLORS" :
+              createCssVariable( value[0], '' );
+              break;
+            case "EFFECTS" :
+              createCssVariable( value[0], `-shadow` );
+              break;
+            case "LAYOUTS" :
+              // only getting the base unit value, so need to unpack variables as well as classes...
+              this.units.map( unit => {
+                this.subUnits.map( subUnit => {
+                  // don't render subUnits for those not in attachments
+                  if ( this.subUnitAttachments.indexOf(unit) === -1 && 
+                    subUnit > 0 ) return;
+          
+                  if (unit === 1 && subUnit === 0) {
+                    createCssVariable( value[0] );
+                  }else{
+                    const layoutCssVar = this.createCssVariableFunk( 
+                      this.prefix,
+                      groupName,
+                      patternName, 
+                      `${unit}${subUnit ? `-${subUnit}` : ''}`,
+                      tmpCssVars, // tokenCssVars
+                    );
+                    const multiple = ( unit + (subUnit / 12) );
+                    layoutCssVar(
+                      `calc( var( --${this.prefix}-${patternName}-1 ) *  ${multiple.toFixed(3)} )`
+                    );
+                  }
+                });
+              });
+              break;
+            case "TYPOGRAPHY" :
+              if (value[6]) {
+                createCssVariable( value[6], `-opentype-flags` );// not in 'font'
+              }
+              // single
+              createCssVariable( `${value[2]} ${value[0]}/${value[3]} ${value[1]}`, `-font` );
+              break;
+            case "ICONS" :
+              /* Icons are retrieved from javascript assets file
+              if (valueName === 'svg' ) {
+                if (this.assetsUrl) {
+                  const iconUrl = `${this.assetsUrl}/icon-${patternName}.svg`;
+                  createCssVariable( iconUrl );
+                  createCssVariable( `url( ${iconUrl} )`, `-url` );
+                  this.addSvgToLookup(`svg-${patternName}`, false, false, iconUrl, 'url');
+                }else{
+                  createCssVariable( this.valueToSvg( value[0] ) );
+                  this.addSvgToLookup(`svg-${patternName}`, false, false, value[0], 'svg');
+                }
+              }// else{
+                // createCssVariable( value[0], `-size` );
+              // }
+              */
+              break;
+            case "GRAPHICS" :
+              /*
+              if (valueName === 'svg' ) {
+                if (this.assetsUrl) {
+                  const graphicUrl = `${this.assetsUrl}/graphic-${patternName}.svg`;
+                  createCssVariable( graphicUrl );
+                  createCssVariable( `url( ${graphicUrl} )`, `-url` );
+                  this.addSvgToLookup(`svg-${patternName}`, false, false, graphicUrl, 'url');
+                }else{
+                  createCssVariable( this.valueToSvg( value[0] ) );
+                  this.addSvgToLookup(`svg-${patternName}`, false, false, value[0], 'svg');
+                }
+              }else{*/
+                createCssVariable( value[0], `-width` );
+                createCssVariable( value[1], `-height` );
+              // }
+              break;
+          }
+        });
+
+        // avoid empty declarations
+        if (tmpCssVars.length > 0) {
+          tokenCssVars.push(`${scope} {\n`);
+          tmpCssVars.map(cssVar => {
+            tokenCssVars.push( cssVar );
+          });
+          tokenCssVars.push(`}\n`);
+        }
+      });
+    });
+    return tokenCssVars.join('');
+  }
+
+    
+    // ====== CSS CLASSES ======================================================
+    createCssClassFunk(
+      prefix,
+      patternName,
+      valueName,
+      tokenCssClasses,
+      includeNodeName
+    ) {
+      return (name, value, pseudo, useSpacingLegacy) => {
+        if ( !pseudo ) { pseudo = '' }
+
+        // figure out stuff before pushing into array...
+        const fullName = this.mergeDashed(
+          prefix, name, patternName, valueName
+        );
+  
+        let finalValue = value;
+        if (Array.isArray(value)) {
+          finalValue = value.join('\n  ');
+        }
+
+        const selectorArr = [];
+        const classArr = [];
+  
+        // NODE NAME
+        if (includeNodeName === true) {
+          // complicated to merge attribute with node name, so you'll just have to use a div with an attribute on root.
+          this.processSelector( selectorArr, this.css_classes_root, `${fullName}${pseudo}`, false);// node name
+          if (this.css_comp_suffix && this.css_comp_suffix.length > 0) {
+            this.processSelector( selectorArr, this.css_classes_root, `${fullName}${this.css_comp_suffix}${pseudo}`, false);// node name with version
+          }
+        }
+
+        if (useSpacingLegacy === true) {
+          const fullLegacyName = this.mergeDashed(// just adding the "s" to valueName
+            prefix, name, patternName, `${valueName}s`
+          );
+          // CLASSES w/ "s"
+          if (this.classes) {
+            this.processSelector( selectorArr, this.css_classes_root, `.${fullLegacyName}${pseudo}`);// class
+          }
+          // ATTRIBUTES w/ "s"
+          if (this.attributes) {
+            this.processSelector( selectorArr, this.css_classes_root, `[${fullLegacyName}]${pseudo}`);// attribute
+          }
+          this.addToLookup(name, null, `${valueName}s`, pseudo, finalValue);
+        }else{
+          // CLASSES
+          if (this.classes) {
+            this.processSelector( selectorArr, this.css_classes_root, `.${fullName}${pseudo}`);// class
+          }
+          // ATTRIBUTES
+          if (this.attributes) {
+            this.processSelector( selectorArr, this.css_classes_root, `[${fullName}]${pseudo}`);// attribute
+          }
+        }
+        classArr.push(`${selectorArr.join(',\n')}\n{\n  ${finalValue} \n}`)
+  
+        this.addToLookup(name, patternName, valueName , pseudo, finalValue);
+  
+        // finish
+        tokenCssClasses.push(classArr.join(''));
+        tokenCssClasses.push('\n\n');
+      }
+    }
+  
+    processSelector( selectorArr, prefix, selector, addToSameNode ) {
+      if (prefix && prefix.length > 0) {
+        // want the prefix to work on the root element as well...
+        if (addToSameNode !== false) {// but sometimes it doesn't work...
+          selectorArr.push(`${prefix}${selector}`);
+        }
+        selectorArr.push(`${prefix} ${selector}`);
+      }else{
+        selectorArr.push(selector);
+      }
+    }
+  
+    generateCssClasses() {
+      const tokenCssClasses  = [];
+
+      // Groups
+      Object.entries(this.tokens).map(groupEntry => {
+        const groupNameArr = groupEntry[0].split('|');
+        const groupType = groupNameArr[0];
+        const groupName = groupNameArr[1];
+        const group = groupEntry[1];
+
+        // Patterns
+        Object.entries(group).map(patternEntry => {
+          const patternName = patternEntry[0];
+          const patternNameArr = patternName.split(":");// name is name and scope
+          if (patternNameArr.length > 1) {
+            if (patternNameArr[1] !== 'root') {
+              return;// no classes for scoped tokens...they only change css vars
+            }
+          }
+          const pattern = patternEntry[1];
+  
+          // Values
+          Object.entries(pattern).map(valueEntry => {
+            const valueName = valueEntry[0];
+            const value = valueEntry[1];
+  
+            // TESTING
+            // tokenCssVars.push( '/* pattern:' + patternName + ' value:' + valueName + ' */');
+            const cssVariableName = this.createCssVariableName(this.prefix, groupName, patternName, valueName);
+            const cssVariableNameStub = this.createCssVariableNameStub(this.prefix, groupName, patternName);
+  
+            const createCssClass = this.createCssClassFunk(
+              this.prefix,      // prefix
+              patternName,      // patternName
+              valueName,        // valueName
+              tokenCssClasses,  // tokenCssClasses
+              false,            // includeNodeName
+            );
+            switch ( groupType ) {
+              case "COLORS" :
+                createCssClass('color', `color: var( ${cssVariableName} ); --color: var( ${cssVariableName} );` );
+                createCssClass('background-color', `background-color: var( ${cssVariableName} ); --background-color: var( ${cssVariableName} );` );
+                createCssClass('border', `border: 1px solid var( ${cssVariableName} );`);
+                createCssClass('border-color', `border-color: var( ${cssVariableName} );`);
+                createCssClass('border-top-bottom', `border-top: 1px solid var( ${cssVariableName} );\n border-bottom: 1px solid var( ${cssVariableName} );` );
+                createCssClass('border-top', `border-top: 1px solid var( ${cssVariableName} );` );
+                createCssClass('border-bottom', `border-bottom: 1px solid var( ${cssVariableName} );` );
+                createCssClass('border-left-right', `border-left: 1px solid var( ${cssVariableName} );\n border-right: 1px solid var( ${cssVariableName} );` );
+                createCssClass('border-left', `border-left: 1px solid var( ${cssVariableName} );` );
+                createCssClass('border-right', `border-right: 1px solid var( ${cssVariableName} );` );
+                createCssClass('color-hover', `color: var( ${cssVariableName} ); --color: var( ${cssVariableName} );`, ':hover' );
+                createCssClass('background-color-hover', `background-color: var( ${cssVariableName} ); --background-color: var( ${cssVariableName} );`, ':hover' );
+                break;
+              case "EFFECTS" :
+                createCssClass('', `box-shadow: var( ${cssVariableName}-shadow );` );
+                break;
+              case "LAYOUTS" :
+                // see "generateColumnClasses" and "generateSpacingClasses"
+                break;
+              case "TYPOGRAPHY" :
+                const typeProps = [
+                  `font: var( ${cssVariableName}-font );`,
+                ];
+                if (value[5]) {
+                  typeProps.push(`font-feature-settings: var( ${cssVariableName}-opentype-flags );`);
+                }
+                createCssClass('', typeProps );// uncatergorized....
+                break;
+              case "ICONS" :
+                if (valueName !== 'svg' ) {
+                  const typeProps = [
+                    // `width: var( ${cssVariableName}-size );`,
+                    // `height: var( ${cssVariableName}-size );`,
+                    // `background-size: var( ${cssVariableName}-size ) var( ${cssVariableName}-size );`,
+                    // `display: block;`,
+                    // `background-image: var( --svg-url );`,
+                    // `background-position: center;`,
+                    // `background-repeat: no-repeat;`,
+                    // `--svg: var( ${cssVariableNameStub}-svg );`,
+                    // `--svg-url: var( ${cssVariableNameStub}-svg-url );`,
+                    `--svg-name: ${patternName};`,
+                    // `--svg-width: var( ${cssVariableName}-size );`,
+                    // `--svg-height: var( ${cssVariableName}-size ); `
+                  ];
+                  createCssClass('icon', typeProps );
+                }
+                break;
+              case "GRAPHICS" :
+                if (valueName !== 'svg' ) {
+                  const typeProps = [
+                    // `width: var( ${cssVariableName}-width );`,
+                    // `height: var( ${cssVariableName}-height );`,
+                    // `background-size: var( ${cssVariableName}-width ) var( ${cssVariableName}-height );`,
+                    // `display: block;`,
+                    // `background-image: var( --svg-url );`,
+                    // `background-position: center;`,
+                    // `background-repeat: no-repeat;`,
+                    // `--svg: var( ${cssVariableNameStub}-svg );`,
+                    // `--svg-url: var( ${cssVariableNameStub}-svg-url );`,
+                    `--svg-name: ${patternName};`,
+                    // `--svg-width: var( ${cssVariableName}-width );`,
+                    // `--svg-height: var( ${cssVariableName}-height );`
+                  ];
+                  createCssClass('graphic', typeProps );
+                }
+                break;
+              /* generated on it's own since shadow doms can't handle fonts
+              case "FONTS" :
+                  tokenCssClasses.push( 
+`@font-face {
+  font-family: "${value[0]}";
+  src: ${this.assetsUrl ? `url('${this.assetsUrl}/${value[1]}')` : value[4]};
+  font-weight: ${value[2]};
+  font-style: ${value[3]};
+}`
+                  );
+                break; */
+            }
+          });
+        });
+      });
+      return tokenCssClasses.join('') + '\n\n';
+    }
+
+    generateFontCssClasses() {
+      const tokenCssClasses  = [];
+      // Groups
+      Object.entries(this.tokens).map(groupEntry => {
+        const groupNameArr = groupEntry[0].split('|');
+        const groupType = groupNameArr[0];
+        const group = groupEntry[1];
+        // Patterns
+        Object.entries(group).map(patternEntry => {
+          const pattern = patternEntry[1];
+          // Values
+          Object.entries(pattern).map(valueEntry => {
+            const value = valueEntry[1];
+            switch ( groupType ) {
+              case "FONTS" :
+                  tokenCssClasses.push( 
+`@font-face {
+  font-family: "${value[0]}";
+  src: ${this.assetsUrl ? `url('${this.assetsUrl}/${value[1]}')` : value[4]};
+  font-weight: ${value[2]};
+  font-style: ${value[3]};
   font-display: swap;
-}`)})})}),a.join("")+"\n\n"}generateColumnClasses(){return`
-        ${this.__generateColumnClasses("col")}
-        ${this.__generateColumnClasses("colvw")}
-        ${[].join("\n\n")}
-      `}__generateColumnClasses(i){const s=[];return this.units.map(r=>{this.subUnits.map(e=>{if(!(-1===this.subUnitAttachments.indexOf(r)&&0<e||12===r&&0!=e)){var t=r+(e?"-"+e:"");const a=this.createCssClassFunk(this.prefix,i,t,s,!1);e=0===r&&0===e?"0":`var( --${this.prefix}-${i}-${t} )`;a("width",`width: ${e};`),a("min-width",`min-width: ${e};`),a("max-width",`max-width: ${e};`),a("left",`left: ${e};`),a("right",`right: ${e};`),a("margin-left",`margin-left: ${e};`),a("margin-right",`margin-right: ${e};`),a("padding-left",`padding-left: ${e};`),a("padding-right",`padding-left: ${e};`),a("margin-x",`margin-right: ${e}; margin-left: ${e};`),a("padding-x",`padding-right: ${e}; padding-left: ${e};`),a("margin-width",`margin-right: ${e}; margin-left: ${e};`),a("padding-width",`padding-right: ${e}; padding-left: ${e};`)}})}),s.join("")+"\n\n"}generateSpacingClasses(){const i=[];return this.units.map(r=>{this.subUnits.map(e=>{if(!(-1===this.subUnitAttachments.indexOf(r)&&0<e)){var t=r+(e?"-"+e:"");const a=this.createCssClassFunk(this.prefix,"",t,i,!1);e=0===r&&0===e?"0":`var( --${this.prefix}-spacing-${t} )`;a("size",`width: ${e}; 
- height: ${e};`,"",!0),a("width",`width: ${e};`,"",!0),a("min-width",`min-width: ${e};`,"",!0),a("height",`height: ${e};`,"",!0),a("min-height",`min-height: ${e};`,"",!0),a("left",`left: ${e};`,"",!0),a("right",`right: ${e};`,"",!0),a("top",`top: ${e};`,"",!0),a("bottom",`bottom: ${e};`,"",!0),a("margin",`margin: ${e};`,"",!0),a("margin-width",`margin-left: ${e}; 
- margin-right: ${e};`,":nth-child(n)",!0),a("margin-x",`margin-left: ${e}; 
- margin-right: ${e};`,":nth-child(n)",!0),a("margin-height",`margin-top: ${e}; 
- margin-bottom: ${e};`,":nth-child(n)",!0),a("margin-y",`margin-top: ${e}; 
- margin-bottom: ${e};`,":nth-child(n)",!0),a("margin-left",`margin-left: ${e};`,"",!0),a("margin-right",`margin-right: ${e};`,":nth-child(n)",!0),a("margin-top",`margin-top: ${e};`,"",!0),a("margin-bottom",`margin-bottom: ${e};`,":nth-child(n)",!0),a("padding",`padding: ${e};`,"",!0),a("padding-width",`padding-left: ${e}; 
- padding-right: ${e};`,"",!0),a("padding-x",`padding-left: ${e}; 
- padding-right: ${e};`,"",!0),a("padding-height",`padding-top: ${e}; 
- padding-bottom: ${e};`,"",!0),a("padding-y",`padding-top: ${e}; 
- padding-bottom: ${e};`,"",!0),a("padding-left",`padding-left: ${e};`,"",!0),a("padding-right",`padding-right: ${e};`,"",!0),a("padding-top",`padding-top: ${e};`,"",!0),a("padding-bottom",`padding-bottom: ${e};`,"",!0),a("border-radius",`border-radius: ${e};`,"",!0)}})}),i.join("")+"\n\n"}generateGapSpacingClasses(){const i=[];return this.units.map(r=>{this.subUnits.map(e=>{if(!(-1===this.subUnitAttachments.indexOf(r)&&0<e)){var t=r+(e?"-"+e:"");const a=this.createCssClassFunk(this.prefix,"",t,i,!1);e=0===r&&0===e?"0":`var( --${this.prefix}-spacing-${t} )`;a("gap",`--gap: ${e};`," > *",!0)}})}),i.join("")+"\n\n"}generateLayoutClasses(){const e=[],t=this.createCssClassFunk(this.prefix,"","",e,!0);return t("stack",[...this.getInitComponentCss("  "),"display: block;"]),t("stack",[...this.getInitComponentCss("  "),"--gap-h-int: 0px;","--gap-v-int: var( --gap, var( --gap-v, initial ));","width: 100%;"]," > *:nth-child(n)"),t("stack",["--gap-v-int: 0px;"]," > *:last-child"),t("layout",[...this.getInitComponentCss("  "),"display: block;"]),t("layout",[...this.getInitComponentCss("  "),"--gap-h-int: 0px;","--gap-v-int: var( --gap, var( --gap-v, initial ));","width: 100%;"]," > *:nth-child(n)"),t("layout",["--gap-v-int: 0px;"]," > *:last-child"),t("flex-h",[...this.getInitComponentCss("  "),...this.getInitFlexComponentCss("  "),"display: flex;","flex-flow: row nowrap;","--ai-h: flex-start;","--jc-h: flex-start;","--ai-int: var( --ai-h, initial );","--jc-int: var( --jc-h, initial );"]),t("flex-h",[...this.getInitComponentCss("    "),"--gap-h-int: var( --gap , var( --gap-h, initial ));","--gap-v-int: 0px;"]," > *:nth-child(n)"),t("flex-h",["--gap-h-int: 0px;"]," > *:last-child"),t("flex-v",[...this.getInitComponentCss("  "),...this.getInitFlexComponentCss("  "),"display: flex;","flex-flow: column nowrap;","--ai-v: flex-start;","--jc-v: flex-start;","--ai-int: var( --ai-v, initial );","--jc-int: var( --jc-v, initial );"]),t("flex-v",[...this.getInitComponentCss("    "),"--gap-h-int:  0px;","--gap-v-int: var( --gap , var( --gap-v, initial ));"]," > *:nth-child(n)"),t("flex-v",["--gap-v-int: 0px;"]," > *:last-child"),t("center",[...this.getInitComponentCss("  "),...this.getInitFlexComponentCss("  "),"display: flex;","flex-flow: column nowrap;","--ai-v: center;","--jc-v: center;","--ai-int: var( --ai-v, initial );","--jc-int: var( --jc-v, initial );"]),t("center",[...this.getInitComponentCss("    "),"--gap-h-int:  0px;","--gap-v-int: var( --gap , var( --gap-v, initial ));"]," > *:nth-child(n)"),t("center",["--gap-v-int: 0px;"]," > *:last-child"),t("float",[...this.getInitComponentCss("  "),"display: block;"]),t("float",['content: "";',"clear: both;","display: table;"],"::after"),t("float",[...this.getInitComponentCss("    "),"--gap-h-int: 0px;","--gap-v-int: var( --gap, var( --gap-v, initial ));","width: auto;","float: left;","clear: left;"]," > *:nth-child(n)"),t("float",[...this.getInitComponentCss("    "),"--gap-v-int: 0px;"]," > *:last-child"),e.join("")+"\n\n"}getInitComponentCss(e){return["/* element */","position: relative;","box-sizing: border-box;","--margin-right: initial;","--margin-bottom: initial;","--gap-h-int: initial;","--gap-v-int: initial;","margin-right: var( --margin-right, var( --gap-h-int, initial ) );","margin-bottom: var( --margin-bottom, var( --gap-v-int, initial ) );"]}getInitFlexComponentCss(e){return["/* flex element */","position: relative;","box-sizing: border-box;","--align-items: initial;","--justify-content: initial;","align-items: var( --align-items , var( --ai-int, flex-start ) );","justify-content: var( --justify-content , var( --jc-int, flex-start ) );"]}generateLayoutHelperClasses(){const e=[],t=this.createCssClassFunk(this.prefix,"","",e,!1),a=(t("scroll-y",["overflow-y: auto;"]),t("hide",["display: none;"]),t("fill-container",["position: absolute;","left: 0;","right: 0;","top: 0;","bottom: 0;"],":nth-child(n)"),this.createCssClassFunk(this.prefix,"","",e,!0));return["","1","2","3","4","5","6","7","8","9"].map(e=>{a("fill"+(""!==e?"-"+e:e),[`flex: ${""===e?"1":e};`])}),e.join("")+"\n\n"}generateAlignmentClasses(){const e=[],t=this.createCssClassFunk(this.prefix,"","",e,!1);var a=["--ai-h: center;","--jc-h: center;","--ai-v: center;","--jc-v: center;"],a=(t("alignment-center",a),t("alignment-center-center",a),["--ai-h: center;","--jc-h: flex-start;","--ai-v: flex-start;","--jc-v: center;"]),a=(t("alignment-center-left",a),t("alignment-left-center",a),["--ai-h: center;","--jc-h: flex-end;","--ai-v: flex-end;","--jc-v: center;"]),a=(t("alignment-center-right",a),t("alignment-right-center",a),["--ai-h: flex-start;","--jc-h: flex-start;","--ai-v: flex-start;","--jc-v: flex-start;"]),a=(t("alignment-top",a),t("alignment-top-left",a),t("alignment-left-top",a),t("alignment-left",a),["--ai-h: flex-start;","--jc-h: center;","--ai-v: center;","--jc-v: flex-start;"]),a=(t("alignment-top-center",a),t("alignment-center-top",a),["--ai-h: flex-start;","--jc-h: flex-end;","--ai-v: flex-end;","--jc-v: flex-start;"]),a=(t("alignment-top-right",a),t("alignment-right-top",a),t("alignment-right",a),["--ai-h: stretch;","--jc-h: flex-start;","--ai-v: stretch;","--jc-v: flex-start;"]),a=(t("alignment-top-stretch",a),t("alignment-stretch",a),["--ai-h: flex-end;","--jc-h: flex-start;","--ai-v: flex-start;","--jc-v: flex-end;"]),a=(t("alignment-bottom",a),t("alignment-bottom-left",a),t("alignment-left-bottom",a),["--ai-h: flex-end;","--jc-h: center;","--ai-v: center;","--jc-v: flex-end;"]),a=(t("alignment-bottom-center",a),t("alignment-center-bottom",a),["--ai-h: flex-end;","--jc-h: flex-end;","--ai-v: flex-end;","--jc-v: flex-end;"]),a=(t("alignment-bottom-right",a),t("alignment-right-bottom",a),["--ai-h: stretch;","--jc-h: flex-start;","--ai-v: stretch;","--jc-v: flex-start;"]),a=(t("alignment-stretch",a),t("alignment-stretch-top",a),t("alignment-top-stretch",a),["--ai-h: stretch;","--jc-h: flex-end;","--ai-v: stretch;","--jc-v: flex-end;"]),a=(t("alignment-stretch-right",a),t("alignment-right-stretch",a),t("alignment-stretch-bottom",a),t("alignment-bottom-stretch",a),["--ai-h: stretch;","--jc-h: center;","--ai-v: stretch;","--jc-v: center;"]),a=(t("alignment-stretch-center",a),t("alignment-center-stretch",a),["--ai-h: baseline;","--jc-h: flex-start;","--ai-v: flex-start;","--jc-v: flex-start;"]),a=(t("alignment-baseline",a),t("alignment-baseline-left",a),t("alignment-left-baseline",a),["--ai-h: baseline;","--jc-h: flex-end;","--ai-v: flex-end;","--jc-v: flex-start;"]),a=(t("alignment-baseline-right",a),t("alignment-right-baseline",a),["--ai-h: baseline;","--jc-h: center;","--ai-v: center;","--jc-v: flex-start;"]);return t("alignment-baseline-center",a),t("alignment-center-baseline",a),t("fill-children","flex: 1;"," > *"),t("children-fill","flex: 1;"," > *"),e.join("")+"\n\n"}mergeDashed(...e){let t=[];return e.map(e=>{e&&""!==e&&t.push(e)}),t.join("-")}valueToSvg(e){return e}addToLookup(e,t,a,r,i){e=this.mergeDashed(e,t,a);let s=[];this.lookup[e]||(this.lookup[e]=[]),s.push(i),r&&""!==r&&s.push(r),this.lookup[e].push(s)}addSvgToLookup(e,t,a,r,i){e=this.mergeDashed(e,t,a);this.lookup[e]={info:r,type:i}}}
+}`
+                  );
+                break;
+            }
+          });
+        });
+      });
+      return tokenCssClasses.join('') + '\n\n';
+    }
+
+    
+    // ====== COLUMN ===========================================================
+    generateColumnClasses() {
+      const colClasses = [];
+      return `
+        ${this.__generateColumnClasses('col')}
+        ${this.__generateColumnClasses('colvw')}
+        ${colClasses.join('\n\n')}
+      `;
+    }
+    
+    __generateColumnClasses(varBase ) {
+      const css  = [];
+      this.units.map(unit => {
+        this.subUnits.map(subUnit => {
+          // don't render subUnits for those not in attachments
+          if ( this.subUnitAttachments.indexOf(unit) === -1 && 
+            subUnit > 0 ) return;
+
+          if (unit === 12 && subUnit != 0) return;
+          const valueName = `${unit}${subUnit ? `-${subUnit}` : ''}`;
+          const classValueName = `${valueName}`;
+          const cssClass = this.createCssClassFunk(
+            this.prefix, varBase, classValueName, css, false
+          );
+          const value = ( unit === 0 && subUnit === 0 ) ? '0' : `var( --${this.prefix}-${varBase}-${valueName} )`;
+          cssClass('width', `width: ${value};` );
+          cssClass('min-width', `min-width: ${value};` )
+          cssClass('max-width', `max-width: ${value};` );
+          cssClass('left', `left: ${value};` );
+          cssClass('right', `right: ${value};` );
+          cssClass('margin-left', `margin-left: ${value};` );
+          cssClass('margin-right', `margin-right: ${value};` );
+          cssClass('padding-left', `padding-left: ${value};` );
+          cssClass('padding-right', `padding-left: ${value};` );
+          cssClass('margin-x', `margin-right: ${value}; margin-left: ${value};` );
+          cssClass('padding-x', `padding-right: ${value}; padding-left: ${value};` );
+          cssClass('margin-width', `margin-right: ${value}; margin-left: ${value};` );
+          cssClass('padding-width', `padding-right: ${value}; padding-left: ${value};` );
+        });
+      });
+      return css.join('') + '\n\n';
+    }
+
+    
+// ====== SPACING ==========================================================
+generateSpacingClasses() {
+  const css  = [];
+  this.units.map(unit => {
+    this.subUnits.map(subUnit => {
+      // don't render subUnits for those not in attachments
+      if ( this.subUnitAttachments.indexOf(unit) === -1 && 
+        subUnit > 0 ) return;
+
+      const valueName = `${unit}${subUnit ? `-${subUnit}` : ''}`;
+      const cssClass = this.createCssClassFunk(
+        this.prefix,          // prefix
+        '',                   // patternName
+        valueName,            // valueName
+        css,                  // tokenCssClasses
+        false,                // includeNodeName
+      );
+      const value = ( unit === 0 && subUnit === 0 ) ? '0' : `var( --${this.prefix}-spacing-${valueName} )`;
+
+      cssClass('size', `width: ${value}; \n height: ${value};`, '', true );
+      cssClass('width', `width: ${value};`, '', true );
+      cssClass('min-width', `min-width: ${value};`, '', true );
+      cssClass('height', `height: ${value};`, '', true );
+      cssClass('min-height', `min-height: ${value};`, '', true );
+      cssClass('left', `left: ${value};`, '', true );
+      cssClass('right', `right: ${value};`, '', true );
+      cssClass('top', `top: ${value};`, '', true );
+      cssClass('bottom', `bottom: ${value};`, '', true );
+
+      cssClass('margin', `margin: ${value};`, '', true );
+      cssClass('margin-width', `margin-left: ${value}; \n margin-right: ${value};`, ':nth-child(n)', true );
+      cssClass('margin-x', `margin-left: ${value}; \n margin-right: ${value};`, ':nth-child(n)', true );
+      cssClass('margin-height', `margin-top: ${value}; \n margin-bottom: ${value};`, ':nth-child(n)', true );
+      cssClass('margin-y', `margin-top: ${value}; \n margin-bottom: ${value};`, ':nth-child(n)', true );
+      cssClass('margin-left', `margin-left: ${value};`, '', true );
+      cssClass('margin-right', `margin-right: ${value};`, ':nth-child(n)', true );
+      cssClass('margin-top', `margin-top: ${value};`, '', true );
+      cssClass('margin-bottom', `margin-bottom: ${value};`, ':nth-child(n)', true );
+
+      cssClass('padding', `padding: ${value};`, '', true );
+      cssClass('padding-width', `padding-left: ${value}; \n padding-right: ${value};`, '', true );
+      cssClass('padding-x', `padding-left: ${value}; \n padding-right: ${value};`, '', true );
+      cssClass('padding-height', `padding-top: ${value}; \n padding-bottom: ${value};`, '', true );
+      cssClass('padding-y', `padding-top: ${value}; \n padding-bottom: ${value};`, '', true );
+      cssClass('padding-left', `padding-left: ${value};`, '', true );
+      cssClass('padding-right', `padding-right: ${value};`, '', true );
+      cssClass('padding-top', `padding-top: ${value};`, '', true );
+      cssClass('padding-bottom', `padding-bottom: ${value};`, '', true );
+
+      cssClass('border-radius', `border-radius: ${value};`, '', true );
+    });
+  });
+  return css.join('') + '\n\n';
+}
+
+    
+
+// ====== GAP SPACING ==========================================================
+generateGapSpacingClasses() {
+  const css  = [];
+  this.units.map(unit => {
+    this.subUnits.map(subUnit => {
+      // don't render subUnits for those not in attachments
+      if ( this.subUnitAttachments.indexOf(unit) === -1 && 
+        subUnit > 0 ) return;
+
+      const valueName = `${unit}${subUnit ? `-${subUnit}` : ''}`;
+      const cssClass = this.createCssClassFunk(
+        this.prefix,      // prefix
+        '',               // patternName
+        valueName,        // valueName
+        css,              // tokenCssClasses
+        false,            // includeNodeName
+      );
+      const value = ( unit === 0 && subUnit === 0 ) ? '0' : `var( --${this.prefix}-spacing-${valueName} )`;
+      cssClass('gap', `--gap: ${value};`, ' > *', true );
+    });
+  });
+  return css.join('') + '\n\n';
+}
+
+    
+  // ====== LAYOUT ===========================================================
+  generateLayoutClasses() {
+    const css  = [];
+    const createCssClass = this.createCssClassFunk(
+      this.prefix,      // prefix
+      '',               // patternName
+      '',               // valueName
+      css,              // tokenCssClasses
+      true,             // includeNodeName
+    );
+    // stack
+    createCssClass('stack', [
+      ...this.getInitComponentCss('  '),
+      `display: block;`
+    ]);
+    createCssClass('stack', [
+      ...this.getInitComponentCss('  '),
+      `--gap-h-int: 0px;`,
+      `--gap-v-int: var( --gap, var( --gap-v, initial ));`,
+      `width: 100%;`
+    ], ` > *:nth-child(n)`);
+    createCssClass('stack', [
+      `--gap-v-int: 0px;`
+    ], ` > *:last-child`);
+
+    // layout
+    createCssClass('layout', [
+      ...this.getInitComponentCss('  '),
+      `display: block;`
+    ]);
+    createCssClass('layout', [
+      ...this.getInitComponentCss('  '),
+      `--gap-h-int: 0px;`,
+      `--gap-v-int: var( --gap, var( --gap-v, initial ));`,
+      `width: 100%;`
+    ], ` > *:nth-child(n)`);
+    createCssClass('layout', [
+      `--gap-v-int: 0px;`
+    ], ` > *:last-child`);
+
+    // flex-h
+    createCssClass('flex-h', [
+      ...this.getInitComponentCss('  '),
+      ...this.getInitFlexComponentCss('  '),
+      `display: flex;`,
+      `flex-flow: row nowrap;`,
+      `--ai-h: flex-start;`,
+      `--jc-h: flex-start;`,
+      `--ai-int: var( --ai-h, initial );`,
+      `--jc-int: var( --jc-h, initial );`
+    ]);
+    createCssClass('flex-h', [
+      ...this.getInitComponentCss('    '),
+      `--gap-h-int: var( --gap , var( --gap-h, initial ));`,
+      `--gap-v-int: 0px;`
+    ], ' > *:nth-child(n)');
+    createCssClass('flex-h', [
+      `--gap-h-int: 0px;`
+    ], ' > *:last-child');
+
+    // flex-v
+    createCssClass('flex-v', [
+      ...this.getInitComponentCss('  '),
+      ...this.getInitFlexComponentCss('  '),
+      `display: flex;`,
+      `flex-flow: column nowrap;`,
+      `--ai-v: flex-start;`,
+      `--jc-v: flex-start;`,
+      `--ai-int: var( --ai-v, initial );`,
+      `--jc-int: var( --jc-v, initial );`
+    ]);
+    createCssClass('flex-v', [
+      ...this.getInitComponentCss('    '),
+      `--gap-h-int:  0px;`,
+      `--gap-v-int: var( --gap , var( --gap-v, initial ));`
+    ], ' > *:nth-child(n)');
+    createCssClass('flex-v', [
+      `--gap-v-int: 0px;`
+    ], ' > *:last-child');
+
+    // center
+    createCssClass('center', [
+      ...this.getInitComponentCss('  '),
+      ...this.getInitFlexComponentCss('  '),
+      `display: flex;`,
+      `flex-flow: column nowrap;`,
+      `--ai-v: center;`,
+      `--jc-v: center;`,
+      `--ai-int: var( --ai-v, initial );`,
+      `--jc-int: var( --jc-v, initial );`
+    ]);
+    createCssClass('center', [
+      ...this.getInitComponentCss('    '),
+      `--gap-h-int:  0px;`,
+      `--gap-v-int: var( --gap , var( --gap-v, initial ));`
+    ], ' > *:nth-child(n)');
+    createCssClass('center', [
+      `--gap-v-int: 0px;`
+    ], ' > *:last-child');
+
+    // float
+    createCssClass('float', [
+      ...this.getInitComponentCss('  '),
+      `display: block;`
+    ]);
+    createCssClass('float', [
+      `content: "";`,
+      `clear: both;`,
+      `display: table;`
+    ], '::after');
+    createCssClass('float', [
+      ...this.getInitComponentCss('    '),
+      `--gap-h-int: 0px;`,
+      `--gap-v-int: var( --gap, var( --gap-v, initial ));`,
+      `width: auto;`,
+      `float: left;`,
+      `clear: left;`
+    ], ' > *:nth-child(n)');
+    createCssClass('float', [
+      ...this.getInitComponentCss('    '),
+      `--gap-v-int: 0px;`
+    ], ' > *:last-child');
+
+    return css.join('') + '\n\n';
+  }
+
+  getInitComponentCss(indent) {
+      return [
+        `/* element */`,
+        `position: relative;`,
+        `box-sizing: border-box;`,
+        `--margin-right: initial;`,
+        `--margin-bottom: initial;`,
+        `--gap-h-int: initial;`,
+        `--gap-v-int: initial;`,
+        `margin-right: var( --margin-right, var( --gap-h-int, initial ) );`,
+        `margin-bottom: var( --margin-bottom, var( --gap-v-int, initial ) );`,
+      ];
+    }
+  
+    getInitFlexComponentCss(indent) {
+      return [
+        `/* flex element */`,
+        `position: relative;`,
+        `box-sizing: border-box;`,
+        `--align-items: initial;`,
+        `--justify-content: initial;`,
+        `align-items: var( --align-items , var( --ai-int, flex-start ) );`,
+        `justify-content: var( --justify-content , var( --jc-int, flex-start ) );`,
+      ];
+    }
+
+    
+  // ====== LAYOUT HELPER ====================================================
+  generateLayoutHelperClasses() {
+    const css  = [];
+    const createCssClass = this.createCssClassFunk(
+      this.prefix,        // prefix
+      '',                 // patternName
+      '',                 // valueName
+      css,                // tokenCssClasses
+      false,              // includeNodeName
+    );
+
+    // scroll-y
+    createCssClass('scroll-y', [
+      `overflow-y: auto;`
+    ]);
+
+    // hide
+    createCssClass('hide', [
+      `display: none;`
+    ]);
+
+    // fill-container
+    createCssClass('fill-container', [
+      `position: absolute;`,
+      `left: 0;`,
+      `right: 0;`,
+      `top: 0;`,
+      `bottom: 0;`
+    ], ':nth-child(n)' );
+
+    /*
+    // float-left
+    createCssClass('float-left', [
+      `float: left;`
+    ]);
+
+    // float-right
+    createCssClass('float-right', [
+      `float: right;`
+    ]);
+
+    // float-clear-left
+    createCssClass('float-clear-left', [
+      `float: left;`,
+      `clear: left;`
+    ]);
+
+    // float-clear-right
+    createCssClass('float-clear-right', [
+      `float: right;`,
+      `clear: right;`
+    ]);
+    */
+
+    // fill
+    const createFillCssClass = this.createCssClassFunk(
+      this.prefix,        // prefix
+      '',                 // patternName
+      '',                 // valueName
+      css,                // tokenCssClasses
+      true,               // includeNodeName
+    );
+    ['','1','2','3','4','5','6','7','8','9'].map(increment => {
+      createFillCssClass(
+        `fill${increment !== '' ? `-${increment}` : increment}`, 
+        [`flex: ${increment === '' ? '1' : increment};`] 
+      );
+    });
+
+    return css.join('') + '\n\n';
+  }
+
+    
+    // ====== ALIGNMENT ========================================================
+    generateAlignmentClasses() {
+      const css  = [];
+      const createCssClass = this.createCssClassFunk(
+        this.prefix,      // prefix
+        '',               // patternName
+        '',               // valueName
+        css,              // tokenCssClasses
+        false,            // includeNodeName
+      );
+  
+      // CENTER
+      const centerContent = [
+        `--ai-h: center;`,
+        `--jc-h: center;`,
+        `--ai-v: center;`,
+        `--jc-v: center;`
+      ];
+      createCssClass('alignment-center', centerContent );
+      createCssClass('alignment-center-center', centerContent );
+  
+      const centerLeftContent = [
+        `--ai-h: center;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: flex-start;`,
+        `--jc-v: center;`
+      ];
+      createCssClass('alignment-center-left', centerLeftContent );
+      createCssClass('alignment-left-center', centerLeftContent );
+  
+      const centerRightContent = [
+        `--ai-h: center;`,
+        `--jc-h: flex-end;`,
+        `--ai-v: flex-end;`,
+        `--jc-v: center;`
+      ];
+      createCssClass('alignment-center-right', centerRightContent );
+      createCssClass('alignment-right-center', centerRightContent );
+  
+      // TOP
+      const topContent = [
+        `--ai-h: flex-start;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: flex-start;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-top', topContent );
+      createCssClass('alignment-top-left', topContent );
+      createCssClass('alignment-left-top', topContent ); 
+      createCssClass('alignment-left', topContent );
+  
+      const topCenterContent = [
+        `--ai-h: flex-start;`,
+        `--jc-h: center;`,
+        `--ai-v: center;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-top-center', topCenterContent );
+      createCssClass('alignment-center-top', topCenterContent );
+  
+      const topRightContent = [
+        `--ai-h: flex-start;`,
+        `--jc-h: flex-end;`,
+        `--ai-v: flex-end;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-top-right', topRightContent );
+      createCssClass('alignment-right-top', topRightContent );
+      createCssClass('alignment-right', topRightContent );
+  
+      const topStretchContent = [
+        `--ai-h: stretch;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: stretch;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-top-stretch', topStretchContent );
+      createCssClass('alignment-stretch', topStretchContent );
+  
+      // BOTTOM
+      const bottomContent = [
+        `--ai-h: flex-end;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: flex-start;`,
+        `--jc-v: flex-end;`
+      ];
+      createCssClass('alignment-bottom', bottomContent );
+      createCssClass('alignment-bottom-left', bottomContent );
+      createCssClass('alignment-left-bottom', bottomContent );
+  
+      const bottomCenterContent = [
+        `--ai-h: flex-end;`,
+        `--jc-h: center;`,
+        `--ai-v: center;`,
+        `--jc-v: flex-end;`
+      ];
+      createCssClass('alignment-bottom-center', bottomCenterContent );
+      createCssClass('alignment-center-bottom', bottomCenterContent );
+  
+      const bottomRightContent = [
+        `--ai-h: flex-end;`,
+        `--jc-h: flex-end;`,
+        `--ai-v: flex-end;`,
+        `--jc-v: flex-end;`
+      ];
+      createCssClass('alignment-bottom-right', bottomRightContent );
+      createCssClass('alignment-right-bottom', bottomRightContent );
+  
+      // STRETCH
+      const stretchContent = [
+        `--ai-h: stretch;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: stretch;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-stretch', stretchContent );
+      createCssClass('alignment-stretch-top', stretchContent );
+      createCssClass('alignment-top-stretch', stretchContent );
+  
+      const stretchRightContent = [
+        `--ai-h: stretch;`,
+        `--jc-h: flex-end;`,
+        `--ai-v: stretch;`,
+        `--jc-v: flex-end;`
+      ];
+      createCssClass('alignment-stretch-right', stretchRightContent );
+      createCssClass('alignment-right-stretch', stretchRightContent );
+      createCssClass('alignment-stretch-bottom', stretchRightContent );
+      createCssClass('alignment-bottom-stretch', stretchRightContent );
+      
+      const stretchCenterContent = [
+        `--ai-h: stretch;`,
+        `--jc-h: center;`,
+        `--ai-v: stretch;`,
+        `--jc-v: center;`
+      ];
+      createCssClass('alignment-stretch-center', stretchCenterContent );
+      createCssClass('alignment-center-stretch', stretchCenterContent );
+  
+      // BASELINE
+      const baselineContent = [
+        `--ai-h: baseline;`,
+        `--jc-h: flex-start;`,
+        `--ai-v: flex-start;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-baseline', baselineContent );
+      createCssClass('alignment-baseline-left', baselineContent );
+      createCssClass('alignment-left-baseline', baselineContent );
+  
+      const baselineRightContent = [
+        `--ai-h: baseline;`,
+        `--jc-h: flex-end;`,
+        `--ai-v: flex-end;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-baseline-right', baselineRightContent );
+      createCssClass('alignment-right-baseline', baselineRightContent );
+  
+      const baselineCenterContent = [
+        `--ai-h: baseline;`,
+        `--jc-h: center;`,
+        `--ai-v: center;`,
+        `--jc-v: flex-start;`
+      ];
+      createCssClass('alignment-baseline-center', baselineCenterContent );
+      createCssClass('alignment-center-baseline', baselineCenterContent );
+  
+      createCssClass('fill-children', 'flex: 1;', ' > *' );
+      createCssClass('children-fill', 'flex: 1;', ' > *' );
+  
+      return css.join('') + '\n\n';
+    }
+
+
+    // ====== UTILS ============================================================
+    mergeDashed(...args) {
+      let final = [];
+      args.map(arg => {
+        if (arg && arg !== '') {
+          final.push( arg );
+        }
+      });
+      return final.join('-');
+    }
+  
+    valueToSvg ( value ) {
+      // const svgValue = value.replace(/#/g, '%23');
+      // return "url('data:image/svg+xml;utf8," + svgValue + "')";
+      return value;
+    }
+
+    addToLookup(name, patternName, valueName, pseudo, finalValue) {
+      // prefix is same for all...
+      const fullName = this.mergeDashed( name, patternName, valueName );
+      let lookupEntry = [];// 0 = css, 1 = pseudo...trying to be as small as possible
+      if (!this.lookup[fullName]) {
+        this.lookup[fullName] = [];
+      }
+      lookupEntry.push( finalValue );
+      if ( pseudo && pseudo !== '' ) {
+        lookupEntry.push( pseudo );
+      }
+      this.lookup[fullName].push(lookupEntry);
+    }
+
+    addSvgToLookup(name, patternName, valueName, svgInfo, svgType ) {
+      // prefix is same for all...
+      const fullName = this.mergeDashed( name, patternName, valueName );
+      this.lookup[fullName] = {
+        info: svgInfo,
+        type: svgType
+      };
+    }
+  }
+  
+  
+