@zuzjs/ui 0.3.2 → 0.3.4

package/src/core/styles.ts

@@ -1,372 +1,379 @@
-const cssProps : { [key: string] : any } = {
-    "ac": "align-content",
-    "alignContent": "align-content",
-    
-    "aic": "aic",
-    "ais": "ais",
-    "aie": "aie",
-    "nous": "nous",
-    "nope": "nope",
-    "ai": "align-items",
-    "alignItems": "align-items",
-    
-    "ass": "ass",
-    "asc": "asc",
-    "ase": "ase",
-    "alignSelf": "align-self",
-    "all": "all",
-    "animation": "animation",
-    "animationDelay": "animation-delay",
-    "animationDirection": "animation-direction",
-    "animationDuration": "animation-duration",
-    "animationFillMode": "animation-fill-mode",
-    "animationIterationCount": "animation-iteration-count",
-    "animationName": "animation-name",
-    "animationPlayState": "animation-play-state",
-    "animationTimingFunction": "animation-timing-function",
-    "backfaceVisibility": "backface-visibility",
-    "backgroundAttachment": "background-attachment",
-    "backgroundBlendMode": "background-blend-mode",
-    "backgroundClip": "background-clip",
-
-    "bg": "background",
-    "background": "background",
-    "bgc": "background-color",
-    "bgColor": "background-color",
-    "backgroundColor": "background-color",
-    
-    "backgroundImage": "background-image",
-    "backgroundOrigin": "background-origin",
-    "backgroundPosition": "background-position",
-    "backgroundRepeat": "background-repeat",
-    "backgroundSize": "background-size",
-    "border": "border",
-    "borderBottom": "border-bottom",
-    "borderBottomColor": "border-bottom-color",
-    "borderBottomStyle": "border-bottom-style",
-    "borderBottomWidth": "border-bottom-width",
-    "borderCollapse": "border-collapse",
-    "borderColor": "border-color",
-    "borderImage": "border-image",
-    "borderImageOutset": "border-image-outset",
-    "borderImageRepeat": "border-image-repeat",
-    "borderImageSlice": "border-image-slice",
-    "borderImageSource": "border-image-source",
-    "borderImageWidth": "border-image-width",
-    "borderLeft": "border-left",
-    "borderLeftColor": "border-left-color",
-    "borderLeftStyle": "border-left-style",
-    "borderLeftWidth": "border-left-width",
-    
-    //Radius
-    "r": "border-radius",
-    "br": "border-radius",
-    "borderRadius": "border-radius",
-    "brtl": "border-top-left-radius",
-    "borderTopLeftRadius": "border-top-left-radius",
-    "brtr": "border-top-right-radius",
-    "borderTopRightRadius": "border-top-right-radius",
-    "brbl": "border-bottom-left-radius",
-    "borderBottomLeftRadius": "border-bottom-left-radius",
-    "brbr": "border-bottom-right-radius",
-    "borderBottomRightRadius": "border-bottom-right-radius",
-
-    "borderRight": "border-right",
-    "borderRightColor": "border-right-color",
-    "borderRightStyle": "border-right-style",
-    "borderRightWidth": "border-right-width",
-    "borderSpacing": "border-spacing",
-    "borderStyle": "border-style",
-    "borderTop": "border-top",
-    "borderTopColor": "border-top-color",
-    
-    "borderTopStyle": "border-top-style",
-    "borderTopWidth": "border-top-width",
-    "borderWidth": "border-width",
-    "bottom": "bottom",
-    "boxDecorationBreak": "box-decoration-break",
-    "boxShadow": "box-shadow",
-    "boxSizing": "box-sizing",
-    "captionSide": "caption-side",
-    "caretColor": "caret-color",
-    "@charset": "@charset",
-    "clear": "clear",
-    "clip": "clip",
-    "clipPath": "clip-path",
-    "color": "color",
-    "columnCount": "column-count",
-    "columnFill": "column-fill",
-    "columnGap": "column-gap",
-    "colGap": "column-gap",
-    "columnRule": "column-rule",
-    "columnRuleColor": "column-rule-color",
-    "columnRuleStyle": "column-rule-style",
-    "columnRuleWidth": "column-rule-width",
-    "columnSpan": "column-span",
-    "columnWidth": "column-width",
-    "colW": "column-width",
-    "columns": "columns",
-    "content": "content",
-    "counterIncrement": "counter-increment",
-    "counterReset": "counter-reset",
-    "cursor": "cursor",
-    "pointer": "pointer",
-    "direction": "direction",
-    "display": "display",
-    "emptyCells": "empty-cells",
-    "filter": "filter",
-    "flex": "flex",
-    "flexBasis": "flex-basis",
-    "dir": "flex-direction",
-    "flexDirection": "flex-direction",
-    "flexFlow": "flex-flow",
-    "flexGrow": "flex-grow",
-    "flexShrink": "flex-shrink",
-    "flexWrap": "flex-wrap",
-    "float": "float",
-    "font": "font",
-    "fontFamily": "font-family",
-    "fontKerning": "font-kerning",
-    "size": "font-size",
-    "fontSize": "font-size",
-    "fontSizeAdjust": "font-size-adjust",
-    "fontStretch": "font-stretch",
-    "fontStyle": "font-style",
-    "fontVariant": "font-variant",
-    "bold": "bold",
-    "fontWeight": "font-weight",
-    "gap" : "gap",
-    "grid": "grid",
-    "gridArea": "grid-area",
-    "gridAutoColumns": "grid-auto-columns",
-    "gridAutoFlow": "grid-auto-flow",
-    "gridAutoRows": "grid-auto-rows",
-    "gridColumn": "grid-column",
-    "gridColumnEnd": "grid-column-end",
-    "gridColumnGap": "grid-column-gap",
-    "gridColumnStart": "grid-column-start",
-    "gridGap": "grid-gap",
-    "gridRow": "grid-row",
-    "gridRowEnd": "grid-row-end",
-    "gridRowGap": "grid-row-gap",
-    "gridRowStart": "grid-row-start",
-    "gridTemplate": "grid-template",
-    "gridTemplateAreas": "grid-template-areas",
-    "gridTemplateColumns": "grid-template-columns",
-    "gridTemplateRows": "grid-template-rows",
-    "hangingPunctuation": "hanging-punctuation",
-    "hyphens": "hyphens",
-    "isolation": "isolation",
-    "jcc": "jcc",
-    "jcs": "jcs",
-    "jce": "jce",
-    "jc": "justify-content",
-    "justifyContent": "justify-content",
-    "left": "left",
-    "letterSpacing": "letter-spacing",
-    "lineHeight": "line-height",
-    "listStyle": "list-style",
-    "listStyleImage": "list-style-image",
-    "listStylePosition": "list-style-position",
-    "listStyleType": "list-style-type",
-    
-    //Margin
-    "m": "margin",
-    "margin": "margin",
-    "mb": "margin-bottom",
-    "marginBottom": "margin-bottom",
-    "ml": "margin-left",
-    "marginLeft": "margin-left",
-    "mr": "margin-right",
-    "marginRight": "margin-right",
-    "mt": "margin-top",
-    "marginTop": "margin-top",
-    
-    
-    //Height
-    "h": "height",
-    "height": "height",
-    "minH": "min-height",
-    "minHeight": "min-height",
-    "maxH": "max-height",
-    "maxHeight": "max-height",
-    
-    //Width
-    "w": "width",
-    "width": "width",
-    "minW": "min-width",
-    "minWidth": "min-width",
-    "maxW": "max-width",
-    "maxWidth": "max-width",
-    
-    "mixBlendMode": "mix-blend-mode",
-    "objectFit": "object-fit",
-    "objectPosition": "object-position",
-    "opacity": "opacity",
-    "order": "order",
-    "outline": "outline",
-    "outlineColor": "outline-color",
-    "outlineOffset": "outline-offset",
-    "outlineStyle": "outline-style",
-    "outlineWidth": "outline-width",
-    "overflow": "overflow",
-    "overflowX": "overflow-x",
-    "overflowY": "overflow-y",
-    
-
-    "p": "padding",
-    "padding": "padding",
-    "pb": "padding-bottom",
-    "paddingBottom": "padding-bottom",
-    "pl": "padding-left",
-    "paddingLeft": "padding-left",
-    "pr": "padding-right",
-    "paddingRight": "padding-right",
-    "pt": "padding-top",
-    "paddingTop": "padding-top",
-    
-    "pageBreakAfter": "page-break-after",
-    "pageBreakBefore": "page-break-before",
-    "pageBreakInside": "page-break-inside",
-    "perspective": "perspective",
-    "perspectiveOrigin": "perspective-origin",
-    "pointerEvents": "pointer-events",
-    
-    "rel":"rel",
-    "abs":"abs",
-    "fixed":"fixed",
-    "sticky":"sticky",
-    "pos": "position",
-    "position": "position",
-    
-    "quotes": "quotes",
-    "resize": "resize",
-    "right": "right",
-    "scrollBehavior": "scroll-behavior",
-    "tabSize": "tab-size",
-    "tableLayout": "table-layout",
-    
-    "align" : "text-align",
-    "textAlign": "text-align",
-    "textAlignLast": "text-align-last",
-    
-    "tdh": "tdh", //text-decoration: underline on hover
-    "td": "text-decoration",
-    "textDecoration": "text-decoration",
-    "textDecorationColor": "text-decoration-color",
-    "textDecorationLine": "text-decoration-line",
-    "textDecorationStyle": "text-decoration-style",
-    "textIndent": "text-indent",
-    "textJustify": "text-justify",
-    "textOverflow": "text-overflow",
-    "textShadow": "text-shadow",
-    "textTransform": "text-transform",
-    "top": "top",
-    
-    "transform": "transform",
-    "transform(2D)": "transform(2D)",
-    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
-    "transformStyle": "transform-style",
-    "transition": "transition",
-    "transitionDelay": "transition-delay",
-    "transitionDuration": "transition-duration",
-    "transitionProperty": "transition-property",
-    "transitionTimingFunction": "transition-timing-function",
-    "unicodeBidi": "unicode-bidi",
-    "userSelect": "user-select",
-    "verticalAlign": "vertical-align",
-    "visibility": "visibility",
-    "weight" : "flex",
-    "whiteSpace": "white-space",
-    "ws": "white-space",
-    "wordBreak": "word-break",
-    "wordSpacing": "word-spacing",
-    "wrap": "wrap",
-    "textWrap": "textWrap",
-    "wordWrap": "word-wrap",
-    "writingMode": "writing-mode",
-    "zIndex": "z-index",
-    "backdropFilter": "backdrop-filter",
-    "bgFilter": "backdrop-filter",
-
-    //Custom
-    "anim" : "anim",
-    "fill" : "fill",
-    "abc" : "abc",
-    "fb" : "fb",
-    "ph" : "ph",
-    "pv" : "pv",
-    "mv" : "mv",
-    "mh" : "mh"
-}
-
-const cssPropsVals : { [key: string] : any } = {
-    //Colors
-    "primary" : 'var(--primary-color)',
-    "c" : "center",
-    //Flex Directions
-    "cols" : "column",
-    "colsr" : "column-reverse",
-    "rows" : "row",
-    "rowsr" : "row-reverse",
-    //Positions
-    "rel" : "relative",
-    "abs" : "absolute",
-}
-
-const cssPropsDirect : { [key : string] : any } = {
-    'rel' : 'position: relative;',
-    'fixed' : 'position: fixed;',
-    'abs' : 'position: absolute;',
-    'sticky' : 'position: sticky;',
-    'flex' : 'display: flex;',
-    'fwrap' : 'flex-wrap: wrap;',
-    'aic' : 'align-items: center;',
-    'ais' : 'align-items: flex-start;',
-    'aie' : 'align-items: flex-end;',
-    'ass' : 'align-self: flex-start;',
-    'asc' : 'align-self: center;',
-    'ase' : 'align-self: flex-end;',
-    'jcc' : 'justify-content: center;',
-    'jcs' : 'justify-content: flex-start;',
-    'jce' : 'justify-content: flex-end;',
-    'grid' : 'display: grid;',
-    'fill' : 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
-    'abc' : 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
-    'block' : 'display: block;',
-    'bold' : "font-weight: bold;",
-    'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'pointer' : "cursor: pointer;",
-    'fb' : 'font-family: var(--primary-font-bold);',
-    'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
-    'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
-    'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
-    'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim' : 'transition:all __VALUE__s linear 0s;',
-    'nous' : 'user-select: none;',
-    'nope' : 'pointer-events: none;',
-    'tdn' : 'text-decoration: none;',
-}
-
-const cssPropsIgnore : string[] = [
-    'weight', `opacity`
-]
-
-const _cssColors : string[] = [ `white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`  ]
-const _cssColorsRange : string[] = [ `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`  ]
-let cssColors : string[] = []
-
-if(cssColors.length == 0){
-    _cssColors.map(c => {
-        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
-    });
-}
-
-export { 
-    cssPropsDirect,
-    cssProps,
-    cssPropsVals,
-    cssPropsIgnore,
-    cssColors
+const cssProps : { [key: string] : any } = {
+    "ac": "align-content",
+    "alignContent": "align-content",
+    
+    "aic": "aic",
+    "ais": "ais",
+    "aie": "aie",
+    "nous": "nous",
+    "nope": "nope",
+    "ai": "align-items",
+    "alignItems": "align-items",
+    
+    "ass": "ass",
+    "asc": "asc",
+    "ase": "ase",
+    "alignSelf": "align-self",
+    "all": "all",
+    "animation": "animation",
+    "animationDelay": "animation-delay",
+    "animationDirection": "animation-direction",
+    "animationDuration": "animation-duration",
+    "animationFillMode": "animation-fill-mode",
+    "animationIterationCount": "animation-iteration-count",
+    "animationName": "animation-name",
+    "animationPlayState": "animation-play-state",
+    "animationTimingFunction": "animation-timing-function",
+    "backfaceVisibility": "backface-visibility",
+    "backgroundAttachment": "background-attachment",
+    "backgroundBlendMode": "background-blend-mode",
+    "backgroundClip": "background-clip",
+
+    "bg": "background",
+    "background": "background",
+    "bgc": "background-color",
+    "bgColor": "background-color",
+    "backgroundColor": "background-color",
+    
+    "backgroundImage": "background-image",
+    "backgroundOrigin": "background-origin",
+    "backgroundPosition": "background-position",
+    "backgroundRepeat": "background-repeat",
+    "backgroundSize": "background-size",
+    "border": "border",
+    "borderBottom": "border-bottom",
+    "borderBottomColor": "border-bottom-color",
+    "borderBottomStyle": "border-bottom-style",
+    "borderBottomWidth": "border-bottom-width",
+    "borderCollapse": "border-collapse",
+    "borderColor": "border-color",
+    "borderImage": "border-image",
+    "borderImageOutset": "border-image-outset",
+    "borderImageRepeat": "border-image-repeat",
+    "borderImageSlice": "border-image-slice",
+    "borderImageSource": "border-image-source",
+    "borderImageWidth": "border-image-width",
+    "borderLeft": "border-left",
+    "borderLeftColor": "border-left-color",
+    "borderLeftStyle": "border-left-style",
+    "borderLeftWidth": "border-left-width",
+    
+    //Radius
+    "r": "border-radius",
+    "br": "border-radius",
+    "borderRadius": "border-radius",
+    "brtl": "border-top-left-radius",
+    "borderTopLeftRadius": "border-top-left-radius",
+    "brtr": "border-top-right-radius",
+    "borderTopRightRadius": "border-top-right-radius",
+    "brbl": "border-bottom-left-radius",
+    "borderBottomLeftRadius": "border-bottom-left-radius",
+    "brbr": "border-bottom-right-radius",
+    "borderBottomRightRadius": "border-bottom-right-radius",
+
+    "borderRight": "border-right",
+    "borderRightColor": "border-right-color",
+    "borderRightStyle": "border-right-style",
+    "borderRightWidth": "border-right-width",
+    "borderSpacing": "border-spacing",
+    "borderStyle": "border-style",
+    "borderTop": "border-top",
+    "borderTopColor": "border-top-color",
+    
+    "borderTopStyle": "border-top-style",
+    "borderTopWidth": "border-top-width",
+    "borderWidth": "border-width",
+    "bottom": "bottom",
+    "boxDecorationBreak": "box-decoration-break",
+    "boxShadow": "box-shadow",
+    "boxSizing": "box-sizing",
+    "captionSide": "caption-side",
+    "caretColor": "caret-color",
+    "@charset": "@charset",
+    "clear": "clear",
+    "clip": "clip",
+    "clipPath": "clip-path",
+    "color": "color",
+    "columnCount": "column-count",
+    "columnFill": "column-fill",
+    "columnGap": "column-gap",
+    "colGap": "column-gap",
+    "columnRule": "column-rule",
+    "columnRuleColor": "column-rule-color",
+    "columnRuleStyle": "column-rule-style",
+    "columnRuleWidth": "column-rule-width",
+    "columnSpan": "column-span",
+    "columnWidth": "column-width",
+    "colW": "column-width",
+    "columns": "columns",
+    "content": "content",
+    "counterIncrement": "counter-increment",
+    "counterReset": "counter-reset",
+    "cursor": "cursor",
+    "pointer": "pointer",
+    "direction": "direction",
+    "display": "display",
+    "emptyCells": "empty-cells",
+    "filter": "filter",
+    "flex": "flex",
+    "flexBasis": "flex-basis",
+    "dir": "flex-direction",
+    "flexDirection": "flex-direction",
+    "flexFlow": "flex-flow",
+    "flexGrow": "flex-grow",
+    "flexShrink": "flex-shrink",
+    "flexWrap": "flex-wrap",
+    "float": "float",
+    "font": "font",
+    "fontFamily": "font-family",
+    "fontKerning": "font-kerning",
+    "size": "font-size",
+    "fontSize": "font-size",
+    "fontSizeAdjust": "font-size-adjust",
+    "fontStretch": "font-stretch",
+    "fontStyle": "font-style",
+    "fontVariant": "font-variant",
+    "bold": "bold",
+    "b900": "b900",
+    "b800": "b800",
+    "b700": "b700",
+    "fontWeight": "font-weight",
+    "gap" : "gap",
+    "grid": "grid",
+    "gridArea": "grid-area",
+    "gridAutoColumns": "grid-auto-columns",
+    "gridAutoFlow": "grid-auto-flow",
+    "gridAutoRows": "grid-auto-rows",
+    "gridColumn": "grid-column",
+    "gridColumnEnd": "grid-column-end",
+    "gridColumnGap": "grid-column-gap",
+    "gridColumnStart": "grid-column-start",
+    "gridGap": "grid-gap",
+    "gridRow": "grid-row",
+    "gridRowEnd": "grid-row-end",
+    "gridRowGap": "grid-row-gap",
+    "gridRowStart": "grid-row-start",
+    "gridTemplate": "grid-template",
+    "gridTemplateAreas": "grid-template-areas",
+    "gridTemplateColumns": "grid-template-columns",
+    "gridTemplateRows": "grid-template-rows",
+    "hangingPunctuation": "hanging-punctuation",
+    "hyphens": "hyphens",
+    "isolation": "isolation",
+    "jcc": "jcc",
+    "jcs": "jcs",
+    "jce": "jce",
+    "jc": "justify-content",
+    "justifyContent": "justify-content",
+    "left": "left",
+    "letterSpacing": "letter-spacing",
+    "lineHeight": "line-height",
+    "listStyle": "list-style",
+    "listStyleImage": "list-style-image",
+    "listStylePosition": "list-style-position",
+    "listStyleType": "list-style-type",
+    "aspectRatio": "aspect-ratio",
+    //Margin
+    "m": "margin",
+    "margin": "margin",
+    "mb": "margin-bottom",
+    "marginBottom": "margin-bottom",
+    "ml": "margin-left",
+    "marginLeft": "margin-left",
+    "mr": "margin-right",
+    "marginRight": "margin-right",
+    "mt": "margin-top",
+    "marginTop": "margin-top",
+    
+    
+    //Height
+    "h": "height",
+    "height": "height",
+    "minH": "min-height",
+    "minHeight": "min-height",
+    "maxH": "max-height",
+    "maxHeight": "max-height",
+    
+    //Width
+    "w": "width",
+    "width": "width",
+    "minW": "min-width",
+    "minWidth": "min-width",
+    "maxW": "max-width",
+    "maxWidth": "max-width",
+    
+    "mixBlendMode": "mix-blend-mode",
+    "objectFit": "object-fit",
+    "objectPosition": "object-position",
+    "opacity": "opacity",
+    "order": "order",
+    "outline": "outline",
+    "outlineColor": "outline-color",
+    "outlineOffset": "outline-offset",
+    "outlineStyle": "outline-style",
+    "outlineWidth": "outline-width",
+    "overflow": "overflow",
+    "overflowX": "overflow-x",
+    "overflowY": "overflow-y",
+    
+
+    "p": "padding",
+    "padding": "padding",
+    "pb": "padding-bottom",
+    "paddingBottom": "padding-bottom",
+    "pl": "padding-left",
+    "paddingLeft": "padding-left",
+    "pr": "padding-right",
+    "paddingRight": "padding-right",
+    "pt": "padding-top",
+    "paddingTop": "padding-top",
+    
+    "pageBreakAfter": "page-break-after",
+    "pageBreakBefore": "page-break-before",
+    "pageBreakInside": "page-break-inside",
+    "perspective": "perspective",
+    "perspectiveOrigin": "perspective-origin",
+    "pointerEvents": "pointer-events",
+    
+    "rel":"rel",
+    "abs":"abs",
+    "fixed":"fixed",
+    "sticky":"sticky",
+    "pos": "position",
+    "position": "position",
+    
+    "quotes": "quotes",
+    "resize": "resize",
+    "right": "right",
+    "scrollBehavior": "scroll-behavior",
+    "tabSize": "tab-size",
+    "tableLayout": "table-layout",
+    
+    "align" : "text-align",
+    "textAlign": "text-align",
+    "textAlignLast": "text-align-last",
+    
+    "tdh": "tdh", //text-decoration: underline on hover
+    "td": "text-decoration",
+    "textDecoration": "text-decoration",
+    "textDecorationColor": "text-decoration-color",
+    "textDecorationLine": "text-decoration-line",
+    "textDecorationStyle": "text-decoration-style",
+    "textIndent": "text-indent",
+    "textJustify": "text-justify",
+    "textOverflow": "text-overflow",
+    "textShadow": "text-shadow",
+    "textTransform": "text-transform",
+    "top": "top",
+    
+    "transform": "transform",
+    "transform(2D)": "transform(2D)",
+    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
+    "transformStyle": "transform-style",
+    "transition": "transition",
+    "transitionDelay": "transition-delay",
+    "transitionDuration": "transition-duration",
+    "transitionProperty": "transition-property",
+    "transitionTimingFunction": "transition-timing-function",
+    "unicodeBidi": "unicode-bidi",
+    "userSelect": "user-select",
+    "verticalAlign": "vertical-align",
+    "visibility": "visibility",
+    "weight" : "flex",
+    "whiteSpace": "white-space",
+    "ws": "white-space",
+    "wordBreak": "word-break",
+    "wordSpacing": "word-spacing",
+    "wrap": "wrap",
+    "textWrap": "textWrap",
+    "wordWrap": "word-wrap",
+    "writingMode": "writing-mode",
+    "zIndex": "z-index",
+    "backdropFilter": "backdrop-filter",
+    "bgFilter": "backdrop-filter",
+
+    //Custom
+    "anim" : "anim",
+    "fill" : "fill",
+    "abc" : "abc",
+    "fb" : "fb",
+    "ph" : "ph",
+    "pv" : "pv",
+    "mv" : "mv",
+    "mh" : "mh"
+}
+
+const cssPropsVals : { [key: string] : any } = {
+    //Colors
+    "primary" : 'var(--primary-color)',
+    "c" : "center",
+    //Flex Directions
+    "cols" : "column",
+    "colsr" : "column-reverse",
+    "rows" : "row",
+    "rowsr" : "row-reverse",
+    //Positions
+    "rel" : "relative",
+    "abs" : "absolute",
+}
+
+const cssPropsDirect : { [key : string] : any } = {
+    'rel' : 'position: relative;',
+    'fixed' : 'position: fixed;',
+    'abs' : 'position: absolute;',
+    'sticky' : 'position: sticky;',
+    'flex' : 'display: flex;',
+    'fwrap' : 'flex-wrap: wrap;',
+    'aic' : 'align-items: center;',
+    'ais' : 'align-items: flex-start;',
+    'aie' : 'align-items: flex-end;',
+    'ass' : 'align-self: flex-start;',
+    'asc' : 'align-self: center;',
+    'ase' : 'align-self: flex-end;',
+    'jcc' : 'justify-content: center;',
+    'jcs' : 'justify-content: flex-start;',
+    'jce' : 'justify-content: flex-end;',
+    'grid' : 'display: grid;',
+    'fill' : 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
+    'abc' : 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
+    'block' : 'display: block;',
+    'bold' : "font-weight: bold;",
+    'b900' : "font-weight: 900;",
+    'b800' : "font-weight: 800;",
+    'b700' : "font-weight: 700;",
+    'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
+    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
+    'pointer' : "cursor: pointer;",
+    'fb' : 'font-family: var(--primary-font-bold);',
+    'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
+    'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
+    'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
+    'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
+    'anim' : 'transition:all __VALUE__s linear 0s;',
+    'nous' : 'user-select: none;',
+    'nope' : 'pointer-events: none;',
+    'tdn' : 'text-decoration: none;',
+    'aspectRatio' : 'aspect-ratio: __VALUE__;'
+}
+
+const cssPropsIgnore : string[] = [
+    'weight', `opacity`
+]
+
+const _cssColors : string[] = [ `white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`  ]
+const _cssColorsRange : string[] = [ `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`  ]
+let cssColors : string[] = []
+
+if(cssColors.length == 0){
+    _cssColors.map(c => {
+        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
+    });
+}
+
+export { 
+    cssPropsDirect,
+    cssProps,
+    cssPropsVals,
+    cssPropsIgnore,
+    cssColors
 }