{ "tag": "div", "name": "Post", "dataPropsConfig": { "schema": { "author": { "name": "text", "avatar": "text" }, "postTitle": "text", "postContent": "text" }, "defaults": { "author": { "name": "John", "avatar": "" }, "postTitle": "The most part", "postContent": "Some long lorem ipsum text!" } }, "children": [ { "tag": "textField", "id": "ghitf1", "name": "authorName", "props": { "content": { "name": "dataProps", "path": [ "author", "name" ] } }, "cssConfig": [ { "configProps": {}, "states": [ { "styles": { "width": "min-content", "border": "0px", "cursor": "pointer", "padding-top": "spacing-xs", "padding-bottom": "spacing-xs", "padding-left": "spacing-m", "padding-right": "spacing-m", "box-shadow": "elevation-normal color-shadowColor", "border-radius": "radius-normal", "font-size": "inherit", "font-weight": "bold" } } ] } ] }, { "tag": "card", "id": "jklc1", "name": "postCard", "props": { "title": { "name": "dataProps", "path": [ "postTitle" ] }, "content": { "name": "dataProps", "path": [ "postContent" ] } } }, { "tag": "button", "name": "tempButton", "id": "Refdcs", "children": [ { "tag": "textField", "name": "buttonText", "id": "grbefwdnjevw", "props": { "content": { "name": "staticData", "value": "Button Here" } } } ], "onClick": [ { "name": "updateProps", "params": { "id": "main", "propUpdates": { "postTitle": "Button clicked :p" } }, "onSuccess": [ { "name": "updateMainProps", "params": { "id": "main" } } ] } ] } ], "cssConfig": [ { "configProps": {}, "states": [ { "styles": { "width": "min-content", "border": "0px", "cursor": "pointer", "padding-top": "spacing-xs", "padding-bottom": "spacing-xs", "padding-left": "spacing-m", "padding-right": "spacing-m", "box-shadow": "elevation-normal color-shadowColor", "border-radius": "radius-normal", "font-size": "inherit", "font-weight": "bold" } } ] } ] }
Theme object
{ "name": "light", "color": { "brand": "#3F51B5", "brandHover": "#3949AB", "brandDisabled": "#7986CB", "brandBackground": "#E8EAF6", "secondary": "#3c3939", "secondaryHover": "#322f2f", "secondaryDisabled": "#696363", "secondaryBackground": "#f5f0f0", "fontOnBrand": "#f2f2f3", "brandContainer": "#E8EAF6", "fontOnBrandContainer": "#212121", "fontSubduedOnBrand": "#d1d1d1", "fontSubduedOnBrandContainer": "#4d4c4c", "secondaryContainer": "#f3f1f1", "fontOnSecondary": "#f8f7f7", "fontSubduedOnSecondary": "#dedede", "fontOnSecondaryContainer": "#292828", "fontSubduedOnSecondaryContainer": "#4d4c4c", "neutral": "#ffffff", "neutralLight1": "#ededed", "neutralLight2": "#c7c7c7", "neutralDark": "#1a1a1a", "fontOnNeutral": "#292929", "fontOnNeutralLight1": "#121212", "fontOnNeutralLight2": "#0a0a0a", "fontOnNeutralDark": "#ffffff", "fontSubduedOnNeutral": "#4a4a4a", "shadowColor": "#8f8f8f" }, "spacing": { "xxs": "4px", "xs": "8px", "s": "12px", "m": "16px", "l": "20px", "xl": "24px", "xxl": "32px", "big": "40px", "huge": "48px" }, "thickness": { "thin": "1px", "normal": "2px", "thick": "4px", "extraThick": "8px" }, "custom": {}, "radius": { "small": "2px", "normal": "4px", "large": "8px", "huge": "16px" }, "elevation": { "extraLow": "0 0 1px 0", "low": "0 0 1px 0", "normal": "0 0 2px 0", "high": "0 0 4px 0", "extraHigh": "0 0 8px 0" }, "fontWeight": { "normal": "normal", "thin": "200", "semi-bold": "400", "bold": "bold", "semiBold": "400" } }