@wavemaker-ai/rn-codegen 1.0.0-rc.647469

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/input/switch.less

@@ -0,0 +1,44 @@
+@import (optional) url('../variables/switch.variant.less');
+.app-switch-first-btn{
+  border-top-left-radius: var(--wm-switch-button-border-radius);
+  border-bottom-left-radius: var(--wm-switch-button-border-radius);
+}
+
+.app-switch-last-btn{
+  border-top-right-radius: var(--wm-switch-button-border-radius);
+  border-bottom-right-radius: var(--wm-switch-button-border-radius);
+}
+
+.app-switch-btn {
+  height: var(--wm-switch-button-height);
+  color: var(--wm-switch-button-color);
+  ripple-color: var(--wm-switch-button-ripple-color);
+  border-color: var(--wm-switch-button-border-color);
+  background-color: var(--wm-switch-button-background-color);
+  padding: var(--wm-switch-button-padding);
+  border-width: var(--wm-switch-button-border-width);
+}
+
+.app-switch-btn-text {
+  font-size: var(--wm-switch-button-font-size);
+  font-family: var(--wm-switch-button-font-family);
+  font-weight: var(--wm-switch-button-font-weight);
+  text-transform: var(--wm-switch-button-text-transform);
+}
+
+.app-switch-btn-selected{
+  color: var(--wm-switch-button-color);
+  border-color: var(--wm-switch-button-border-color);
+  background-color: var(--wm-switch-button-background-color);
+}
+
+.app-switch-btn-selected-text{
+  font-size: var(--wm-switch-button-font-size);
+  font-family: var(--wm-switch-button-font-family);
+  font-weight: var(--wm-switch-button-font-weight);
+  text-transform: var(--wm-switch-button-text-transform);
+}
+
+.app-switch-disabled {
+  opacity: var(--wm-switch-opacity);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/input/toggle.less

@@ -0,0 +1,61 @@
+@import (optional) url('../variables/toggle.variant.less');
+
+.app-toggle-off  .app-toggle {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+    border-radius: var(--wm-toggle-border-radius);
+    border-color: var(--wm-toggle-border-color);
+    background-color: var(--wm-toggle-background-color);
+    border-width: var(--wm-toggle-border-width);
+}
+.app-toggle-handle-off .app-toggle-handle {
+    width: var(--wm-toggle-handle-width);
+    height: var(--wm-toggle-handle-height);
+    border-radius: var(--wm-toggle-handle-radius);
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
+    background-color: var(--wm-toggle-handle-color);
+    align-items: center;
+    justify-content: center;
+}
+.app-toggle-on .app-toggle {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+    border-radius: var(--wm-toggle-border-radius);
+    border-color: var(--wm-toggle-border-color);
+    background-color: var(--wm-toggle-background-color);
+    border-width: var(--wm-toggle-border-width);
+}
+.app-toggle-handle-on .app-toggle-handle {
+    width: var(--wm-toggle-handle-width);
+    height: var(--wm-toggle-handle-height);
+    border-radius: var(--wm-toggle-handle-radius);
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
+    background-color: var(--wm-toggle-handle-color);
+    align-items: center;
+    justify-content: center;
+}
+
+.app-toggle-disabled {
+    opacity: var(--wm-toggle-opacity);
+}
+.app-toggle-disabled.handle{
+    opacity: var(--wm-toggle-opacity);
+}
+
+.app-toggle-checkicon.icon{
+    color: #4F378A;
+    font-size: 12px;
+    align-self: center;
+    min-width: 0px;
+}
+
+.app-toggle-uncheckicon.icon{
+    color: #E6E0E9;
+    font-size: 12px;
+    align-self: center;
+    min-width: 0px;
+}
+
+

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/appnavbar.less

@@ -0,0 +1,106 @@
+
+.app-appnavbar {
+    height: var(--wm-navbar-height);
+    padding: var(--wm-navbar-padding);
+    background-color: var(--wm-navbar-background-color);
+    border-width: var(--wm-navbar-border-width);
+    border-style: var(--wm-navbar-border-style);
+    border-color: var(--wm-navbar-border-color);
+    border-radius: var(--wm-navbar-border-radius);
+}
+
+
+.app-appnavbar-left-icon {
+    color: var(--wm-navbar-left-icon-color);
+    font-size: var(--wm-navbar-left-icon-size);
+}
+
+.app-appnavbar-left-icon .app-icon-shape {
+    color: var(--wm-navbar-left-icon-color);
+    font-size: var(--wm-navbar-left-icon-size);
+}
+
+.app-appnavbar-back-icon {
+    color: var(--wm-navbar-back-icon-color);
+    font-size: var(--wm-navbar-back-icon-size);
+}
+
+.app-appnavbar-back-icon .app-icon-shape {
+    color: var(--wm-navbar-back-icon-color);
+    font-size: var(--wm-navbar-back-icon-size);
+}
+
+.app-appnavbar-image .app-picture {
+    width: var(--wm-navbar-image-width);
+    height: var(--wm-navbar-image-height);
+}
+
+.app-appnavbar-content {
+    color: var(--wm-navbar-content-color);
+    font-size: var(--wm-navbar-content-font-size);
+    font-weight: var(--wm-navbar-content-font-weight);
+    font-family: var(--wm-navbar-content-font-family);
+
+}
+
+.app-appnavbar-badge,
+.navbarAnchorItem.badge {
+    background-color: var(--wm-navbar-badge-background-color);
+    color: var(--wm-navbar-badge-color);
+    height: var(--wm-navbar-badge-height);
+    width: var(--wm-navbar-badge-width);
+    font-size: var(--wm-navbar-badge-font-size);
+    line-height: var(--wm-navbar-badge-line-height);
+    border-radius: var(--wm-navbar-badge-border-radius);
+    margin-left: var(--wm-navbar-badge-margin-left);
+}
+
+.navbar-anchor {
+    padding: var(--wm-navbar-anchor-padding);
+}
+
+.navbar-anchor-text {
+    color: var(--wm-navbar-anchor-text-color);
+    font-size: var(--wm-navbar-anchor-text-font-size);
+    font-weight: var(--wm-navbar-anchor-text-font-weight);
+    font-family: var(--wm-navbar-anchor-text-font-family);
+}
+
+.navbar-anchor-icon,
+.navbarAnchorItem.icon.icon {
+    color: var(--wm-navbar-anchor-icon-color);
+    font-size: var(--wm-navbar-anchor-icon-size);
+}
+
+.navbar-button-icon {
+    color: var(--wm-navbar-button-color);
+    font-size: var(--wm-navbar-button-font-size);
+}
+
+.navbar-button-text {
+    color: var(--wm-navbar-button-color);
+    font-size: var(--wm-navbar-button-font-size);
+    font-weight: var(--wm-navbar-button-font-weight);
+    font-family: var(--wm-navbar-button-font-family);
+
+}
+
+.navbarMenu.app-menu-trigger .app-anchor-icon .app-icon-shape {
+    color: var(--wm-navbar-menu-icon-color);
+    font-size: var(--wm-navbar-menu-icon-size);
+}
+
+.navbarMenu.app-menu-trigger .app-anchor-text {
+    color: var(--wm-navbar-menu-icon-color);
+    font-size: var(--wm-navbar-menu-icon-size);
+}
+
+.navbarPopover.app-popover-link .app-anchor-icon .app-icon-shape {
+    color: var(--wm-navbar-popover-icon-color);
+    font-size: var(--wm-navbar-popover-icon-size);
+}
+
+.navbarPopover.app-popover-link .app-anchor-text {
+    color: var(--wm-navbar-popover-icon-color);
+    font-size: var(--wm-navbar-popover-icon-size);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/basenav.less

@@ -0,0 +1,3 @@
+
+.app-basenav {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/menu.less

@@ -0,0 +1,52 @@
+
+.app-menu {
+  background-color: var(--wm-dropdown-menu-background);
+  border-radius: var(--wm-dropdown-menu-border-radius);
+  border-width: var(--wm-dropdown-menu-border-width);
+  border-color: var(--wm-dropdown-menu-border-color);
+}
+
+.app-menu-link-text {
+  color: var(--wm-dropdown-menu-color);
+  font-weight: var(--wm-dropdown-menu-text-font-weight);
+  text-decoration: var(--wm-dropdown-menu-text-decoration);
+  padding: var(--wm-dropdown-menu-text-padding);
+}
+
+.app-menu-trigger .app-anchor-icon .app-icon {
+  color: var(--wm-dropdown-menu-color);
+}
+
+.app-menu-trigger .app-anchor-icon .app-icon-shape  {
+  font-size: var(--wm-dropdown-menu-caret-size); 
+  color: var(--wm-dropdown-menu-caret-color);
+}
+
+.app-menu-content {
+  background-color: var(--wm-dropdown-menu-content-background); 
+  border-radius: var(--wm-dropdown-menu-content-border-radius); 
+  width: var(--wm-dropdown-menu-content-width); 
+  padding: var(--wm-dropdown-menu-padding);
+}
+
+.app-menu.modalContent{
+  box-shadow: var(--wm-dropdown-menu-box-shadow);
+}
+
+.app-menu-item.root {
+  border-style: var(--wm-dropdown-menu-item-border-style); 
+  padding: var(--wm-dropdown-menu-item-padding);
+}
+
+.app-menu-item .app-anchor-text {
+  padding-top: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  color: var(--wm-dropdown-menu-item-color); 
+  font-family: var(--wm-dropdown-menu-item-font-family); 
+  font-size: var(--wm-dropdown-menu-item-font-size); 
+  font-weight: var(--wm-dropdown-menu-item-font-weight); 
+  line-height: var(--wm-dropdown-menu-item-line-height); 
+  text-decoration-line: none;
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/navbar.less

@@ -0,0 +1,9 @@
+
+.app-navbar {
+}
+
+.app-navbar-item {
+}
+
+.app-navbar-child-nav {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/navitem.less

@@ -0,0 +1,88 @@
+@import (optional) url('../variables/navitem.variant.less');
+
+.app-navitem-active .navAnchorItem .app-anchor-icon .app-icon-shape,
+.app-navitem-anchor .app-anchor-icon .app-icon-shape,
+.navAnchorItem .app-anchor-icon .app-icon-shape{
+  color: var(--wm-navitem-icon-color);
+  font-size: var(--wm-navitem-icon-size);
+  padding-left: var(--wm-navitem-icon-padding-left);
+  padding-right: var(--wm-navitem-icon-padding-right);
+  padding-top: var(--wm-navitem-icon-padding-top);
+  padding-bottom: var(--wm-navitem-icon-padding-bottom);
+}
+
+.app-navitem-active.app-navitem,
+.app-navitem-anchor,
+.navAnchorItem{
+  padding-top: var(--wm-navitem-padding-top);
+  padding-bottom: var(--wm-navitem-padding-bottom);
+  padding-left: var(--wm-navitem-padding-left);
+  padding-right: var(--wm-navitem-padding-right);
+  margin-left: var(--wm-navitem-margin-left);
+  margin-right: var(--wm-navitem-margin-right);
+  margin-top: var(--wm-navitem-margin-top);
+  margin-bottom: var(--wm-navitem-margin-bottom);
+  border-radius: var(--wm-navitem-border-radius);
+  background-color: var(--wm-navitem-background);
+}
+.app-navitem-active .navAnchorItem.root{
+    padding: 0;
+    background-color: var(--wm-navitem-background);
+}
+.app-navitem-active .navAnchorItem.badge,
+.app-navitem-anchor .app-anchor-badge,
+.navAnchorItem.badge{
+   margin-top: var(--wm-navitem-badge-margin-top);
+   margin-bottom: var(--wm-navitem-badge-margin-bottom);
+   margin-right: var(--wm-navitem-badge-margin-right);
+   margin-left: var(--wm-navitem-badge-margin-left);
+   background-color: var(--wm-navitem-badge-background);
+   text-align: var(--wm-navitem-badge-text-align);
+   align-self: var(--wm-navitem-badge-align-self);
+   font-weight: var(--wm-navitem-badge-font-weight);
+   font-size: var(--wm-navitem-badge-font-size);
+   font-family: var(--wm-navitem-badge-font-family);
+   border-radius: var(--wm-navitem-badge-border-radius);
+   min-width: var(--wm-navitem-badge-min-width);
+   min-height: var(--wm-navitem-badge-min-height);
+   line-height: var(--wm-navitem-badge-line-height);
+   color: var(--wm-navitem-badge-color);
+}
+
+.app-navitem-active .navAnchorItem.text,
+.app-navitem-anchor .app-anchor-text,
+.navAnchorItem.text{
+    text-decoration: var(--wm-navitem-text-decoration);
+    text-decoration-line: var(--wm-navitem-text-decoration);
+    line-height: var(--wm-navitem-line-height);
+    font-weight: var(--wm-navitem-font-weight);
+    font-size: var(--wm-navitem-font-size);
+    font-family: var(--wm-navitem-font-family);
+    padding-left: var(--wm-navitem-text-padding-left);
+    padding-right: var(--wm-navitem-text-padding-right);
+    padding-top: var(--wm-navitem-text-padding-top);
+    padding-bottom: var(--wm-navitem-text-padding-bottom);
+    color: var(--wm-navitem-color);
+    flex: var(--wm-navitem-text-flex);
+}
+.app-navitem-child .app-navitem{
+    background-color: var(--wm-navitem-child-background-color);
+}
+.app-navitem-child .navAnchorItem .app-anchor-icon .app-icon-shape,
+.app-navitem-child .navAnchorItem.badge,
+.app-navitem-child .navAnchorItem.text{
+    color: var(--wm-navitem-child-color);
+}
+
+.app-navitem-active.app-navitem-caret .app-icon-text,
+.app-navitem-caret .app-icon-text{
+    color: var(--wm-navitem-caret-color);
+}
+
+.app-navitem {
+    background-color: var(--wm-navitem-background);
+}
+.app-navitem-active{
+    background-color: var(--wm-navitem-background);
+}
+

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/navigation/popover.less

@@ -0,0 +1,83 @@
+.app-popover{
+    padding: var(--wm-popover-padding);
+    background-color: var(--wm-popover-background-color);
+    box-shadow: var(--wm-popover-shadow);
+    border-radius: var(--wm-popover-border-radius);
+    border-width: var(--wm-popover-border-width);
+    border-style: var(--wm-popover-border-style);
+    border-color: var(--wm-popover-border-color);
+}
+
+.app-popover-content{
+    background-color: var(--wm-popover-content-background-color);
+    box-shadow: var(--wm-popover-content-shadow);
+    border-width: var(--wm-popover-content-border-width);
+    border-style: var(--wm-popover-content-border-style);
+    border-color: var(--wm-popover-content-border-color);
+    border-radius: var(--wm-popover-content-border-radius);
+}
+
+.app-popover-modal-content{
+    box-shadow: var(--wm-popover-modal-content-shadow);
+}
+.app-popover-wrapper{
+    background-color: var(--wm-popover-link-background-color);
+    border-color: var(--wm-popover-link-border-color);
+    border-width: var(--wm-popover-link-border-width);
+    border-style: var(--wm-popover-link-border-style);
+    border-radius: var(--wm-popover-link-border-radius);
+    padding: var(--wm-popover-link-padding);
+    width: var(--wm-popover-link-width);
+    height: var(--wm-popover-link-height);
+    min-height: var(--wm-popover-link-min-height);
+}
+
+.app-popover-action-sheet.popover {
+    left: var(--wm-popover-left); 
+    bottom: var(--wm-popover-bottom);
+    width: var(--wm-popover-width);
+    min-height: var(--wm-popover-min-height);
+    box-shadow: var(--wm-popover-shadow);
+}
+
+.app-popover-title {
+    padding: var(--wm-popover-header-padding);
+    font-family: var(--wm-popover-header-font-family);
+    font-size: var(--wm-popover-header-font-size);
+    font-weight: var(--wm-popover-header-font-weight);
+    line-height: var(--wm-popover-header-line-height);
+    letter-spacing: var(--wm-popover-header-letter-spacing);
+    color: var(--wm-popover-header-color);
+    background-color: var(--wm-popover-header-background-color);
+}
+
+//We don't have the support to add inline content for the popover body.
+//Content can only be added using partials, so there are no tokens available for the popover body.
+
+.app-popover-link .app-anchor-icon .app-icon {
+    min-width: var(--wm-popover-link-icon-size);
+    width: var(--wm-popover-link-icon-size);
+    height: var(--wm-popover-link-icon-size);
+}
+
+.app-popover-link .app-anchor-icon .app-icon-shape {
+    color: var(--wm-popover-link-icon-color);
+    font-size: var(--wm-popover-link-icon-size);
+    min-width: var(--wm-popover-link-icon-size);
+    width: var(--wm-popover-link-icon-size);
+    height: var(--wm-popover-link-icon-size);
+    line-height: var(--wm-popover-link-icon-size);
+}
+
+.app-popover-link .app-anchor-text {
+    color: var(--wm-popover-link-color);
+    padding-left: var(--wm-space-2);
+    padding-right: var(--wm-space-2);
+    font-size: var(--wm-popover-link-font-size);
+    font-family: var(--wm-popover-link-font-family);
+    font-weight: var(--wm-popover-link-font-weight);
+    line-height: var(--wm-popover-link-line-height);
+    letter-spacing: var(--wm-popover-link-letter-spacing);
+    text-decoration: var(--wm-popover-link-text-decoration);
+    text-decoration-line: var(--wm-popover-link-text-decoration);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/content.less

@@ -0,0 +1,3 @@
+
+.app-content {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/left-panel.less

@@ -0,0 +1,7 @@
+.app-left-panel {
+    background-color: var(--wm-left-panel-background);
+    box-shadow: var(--wm-left-panel-elevation);
+    border-top-right-radius: var(--wm-left-panel-border-top-right-radius);
+    border-bottom-right-radius: var(--wm-left-panel-border-bottom-right-radius);
+    max-width: var(--wm-left-panel-max-width);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/page-content.less

@@ -0,0 +1,4 @@
+.app-page-content {
+    background-color: var(--wm-page-content-background);
+    padding: var(--wm-page-content-padding);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/partial-container.less

@@ -0,0 +1,4 @@
+
+.app-partial-container {
+    background-color: var(--wm-partial-container-background-color);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/partial.less

@@ -0,0 +1,6 @@
+
+.app-partial {
+}
+
+.app-partial-skeleton {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page/tabbar.less

@@ -0,0 +1,93 @@
+.app-tabbar {
+    height: var(--wm-tabbar-height);
+    gap: var(--wm-tabbar-gap);
+    box-shadow: var(--wm-tabbar-box-shadow);
+    border-width: var(--wm-tabbar-border-width);
+    border-style: var(--wm-tabbar-border-style);
+    border-color: var(--wm-tabbar-border-color);
+
+}
+
+.app-tabbar-menu {
+    background-color: var(--wm-tabbar-menu-background);
+    height: var(--wm-tabbar-menu-height);
+    align-items: center;
+}
+
+.app-tabbar-more-menu {
+    width: var(--wm-tabbar-more-menu-width);
+    box-shadow: var(--wm-tabbar-more-menu-box-shadow);
+    background-color: var(--wm-tabbar-more-menu-background);
+}
+
+.app-tabbar-more-menu-row {
+    width: var(--wm-tabbar-more-menu-row-width);
+    padding: var(--wm-tabbar-more-menu-row-padding);
+}
+
+.app-tabbar-item {
+    min-height: var(--wm-tabbar-item-min-height);
+    min-width: var(--wm-tabbar-item-min-width);
+    background-color: var(--wm-tabbar-item-background-color);
+    border-radius: var(--wm-tabbar-item-border-radius);
+    border-width: var(--wm-tabbar-item-border-width);
+    margin-bottom: var(--wm-space-0);
+    border-color: var(--wm-tabbar-item-border-color);
+    border-style: var(--wm-tabbar-item-border-style);
+    opacity: var(--wm-tabbar-item-opacity);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--wm-tabbar-item-padding);
+    gap: var(--wm-tabbar-item-gap);
+}
+
+.app-tabbar-active-item {
+    opacity: var(--wm-tabbar-item-opacity);
+    margin-bottom: var(--wm-space-0);
+    border-radius: var(--wm-tabbar-item-border-radius);
+    border-width: var(--wm-tabbar-item-border-width);
+    border-color: var(--wm-tabbar-item-border-color);
+    border-style: var(--wm-tabbar-item-border-style);
+    background-color: var(--wm-tabbar-item-background-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    padding: var(--wm-tabbar-item-padding);
+    gap: var(--wm-tabbar-item-gap);
+}
+
+.app-tabbar-item-icon .app-icon {
+    border-bottom-color: var(--wm-tabbar-icon-border-bottom-color);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-item-icon .app-icon-shape {
+    color: var(--wm-tabbar-icon-color);
+    font-size: var(--wm-tabbar-icon-size);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-active-icon .app-icon-shape {
+    color: var(--wm-tabbar-icon-color);
+    font-size: var(--wm-tabbar-icon-size);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-item-label {
+    color: var(--wm-tabbar-text-color);
+    font-size: var(--wm-tabbar-text-font-size);
+    font-family: var(--wm-tabbar-text-font-family);
+    font-weight: var(--wm-tabbar-text-font-weight);
+    margin-top: var(--wm-tabbar-text-margin-top);
+
+}
+
+.app-tabbar-active-label {
+    font-weight: var(--wm-tabbar-text-font-weight);
+    font-size: var(--wm-tabbar-text-font-size);
+    font-family: var(--wm-tabbar-text-font-family);
+    color: var(--wm-tabbar-text-color);
+}
+@import (optional) url('../variables/tabbar.variant.less');

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/page.less

@@ -0,0 +1,3 @@
+
+.app-page {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/prefab.less

@@ -0,0 +1,6 @@
+
+.app-prefab {
+}
+
+.app-prefab-skeleton {
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/advanced/carousel.less

@@ -0,0 +1,75 @@
+.carousel-control {
+
+}
+
+.app-carousel .carousel-control .wi-chevron-right {
+    position: relative;
+    margin-top: var(--wm-space-0);
+    top: var(--wm-space-0);
+    right: var(--wm-space-0);
+    left: var(--wm-space-0);
+    opacity: var(--wm-space-1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.wi-chevron-right:before {
+    font-size: var(--wm-carousel-next-btn-font-size);
+    color: var(--wm-carousel-next-btn-color);
+}
+
+.app-carousel .carousel-control .wi-chevron-left {
+    position: relative;
+    margin-top: var(--wm-space-0);
+    top: var(--wm-space-0);
+    right: var(--wm-space-0);
+    left: var(--wm-space-0);
+    opacity: var(--wm-space-1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.wi-chevron-left:before {
+    font-size: var(--wm-carousel-prev-btn-font-size);
+    color: var(--wm-carousel-prev-btn-color);
+}
+
+.carousel-control.right {
+    top: 30%;
+    opacity: 1;
+    border-style: solid;
+    margin-right: var(--wm-carousel-next-btn-margin-left);
+    background-color: var(--wm-carousel-next-btn-background);
+    ripple-color: var(--wm-carousel-next-btn-ripple-color);
+    border-radius: var(--wm-carousel-next-btn-border-radius);
+    width: var(--wm-carousel-next-btn-width);
+    height: var(--wm-carousel-next-btn-height);
+    border-color: var(--wm-carousel-next-btn-border-color);
+    border-width: var(--wm-carousel-next-btn-border-width);
+    z-index: 1;
+}
+
+.carousel-control.left {
+    top: 30%;
+    opacity: 1;
+    border-style: solid;
+    margin-left: var(--wm-carousel-prev-btn-margin-left);
+    background-color: var(--wm-carousel-prev-btn-background);
+    ripple-color: var(--wm-carousel-prev-btn-ripple-color);
+    border-radius: var(--wm-carousel-prev-btn-border-radius);
+    width: var(--wm-carousel-prev-btn-width);
+    height: var(--wm-carousel-prev-btn-height);
+    border-color: var(--wm-carousel-prev-btn-border-color);
+    border-width: var(--wm-carousel-prev-btn-border-width);
+    z-index: 1;
+}
+
+.app-carousel .carousel-indicators li {
+    border-color: var(--wm-carousel-dots-border-color);
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/advanced/login.less

@@ -0,0 +1,6 @@
+.app-form {
+    &.app-login {
+        background-color: transparent;
+        padding: var(--wm-login-form-padding);
+    }
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/advanced/styles.less

@@ -0,0 +1,3 @@
+@import url('./carousel.less');
+@import url('./login.less');
+@import url('./webview.less');

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/advanced/webview.less

@@ -0,0 +1,4 @@
+.app-iframe {
+    background-color: var(--wm-webview-background-color);
+    padding: var(--wm-webview-padding);
+}