@wavemaker/rn-codegen 11.15.1-rc.248 → 11.15.2-rc.249

package/src/templates/foundation-theme/wavemaker/design-tokens/container/accordion/accordionpane.less

@@ -1,3 +1,9 @@
 
 .app-accordionpane {
+    background-color: var(--wm-accordion-pane-content-background-color);
+    padding: var(--wm-accordion-pane-content-padding);
+    border-radius: var(--wm-accordion-pane-content-border-radius);
+    border-style: var(--wm-accordion-pane-content-border-style);
+    border-width: var(--wm-accordion-pane-content-border-width);
+    border-color: var(--wm-accordion-pane-content-border-color);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/container/accordion.less

@@ -1,3 +1,5 @@
+@import (optional) url('../variables/accordion.variant.less');
+
 .app-accordion {
     width: var(--wm-accordion-width);
     border-width: var(--wm-accordion-border-width);
@@ -5,9 +7,15 @@
     border-color: var(--wm-accordion-border-color);
     border-radius: var(--wm-accordion-border-radius);
     background-color: var(--wm-accordion-background-color);
+    gap: var(--wm-accordion-gap);
 }
 
 .app-accordion-text {
+    align-self: flex-start;
+    border-radius: var(--wm-accordion-text-border-radius);
+    border-width: var(--wm-accordion-text-border-width);
+    border-color: var(--wm-accordion-text-border-color);
+    background-color: var(--wm-accordion-text-background-color);
     color: var(--wm-accordion-text-color);
     font-size: var(--wm-accordion-text-font-size);
 }
@@ -15,7 +23,7 @@
 .app-accordion-header {
     background-color: var(--wm-accordion-header-background-color);
     padding: var(--wm-accordion-header-padding);
-    border-bottom-width: var(--wm-accordion-header-border-bottom-width);
+    border-width: var(--wm-accordion-header-border-width);
     border-color: var(--wm-accordion-header-border-color);
     border-top-left-radius: var(--wm-accordion-border-radius);
     border-top-right-radius: var(--wm-accordion-border-radius);
@@ -25,7 +33,7 @@
 .app-accordion-active-header {
     background-color: var(--wm-accordion-header-background-color);
     padding: var(--wm-accordion-header-padding);
-    border-bottom-width: var(--wm-accordion-header-border-bottom-width);
+    border-width: var(--wm-accordion-header-border-width);
     border-color: var(--wm-accordion-header-border-color);
     border-top-left-radius: var(--wm-accordion-border-radius);
     border-top-right-radius: var(--wm-accordion-border-radius);
@@ -33,6 +41,11 @@
 }
 
 .app-accordion-active-header-title {
+    align-self: flex-start;
+    border-radius: var(--wm-accordion-text-border-radius);
+    border-width: var(--wm-accordion-text-border-width);
+    border-color: var(--wm-accordion-text-border-color);
+    background-color: var(--wm-accordion-text-background-color);
     color: var(--wm-accordion-text-color);
     font-size: var(--wm-accordion-text-font-size);
 }
@@ -92,6 +105,13 @@
     align-self: stretch;
 }
 
+.app-accordion-pane{
+    border-style: var(--wm-accordion-pane-border-style);
+    border-width: var(--wm-accordion-pane-border-width);
+    border-color: var(--wm-accordion-pane-border-color);
+    border-radius: var(--wm-accordion-pane-border-radius);
+}
+
 .app-accordion-header-danger-badge {
     background-color: var(--wm-color-error);
 }
@@ -115,4 +135,16 @@
 .app-accordion-header-default-badge{
     background-color: var(--wm-accordion-badge-background-color);
 }
-@import (optional) url('../variables/accordion.variant.less');
+
+.app-accordion-title-wrapper {
+    flex: 1;
+    flex-direction: row;
+    align-items: flex-start;
+    width: var(--wm-accordion-title-wrapper-width);
+    padding: var(--wm-accordion-title-wrapper-padding);
+    border-width: var(--wm-accordion-title-wrapper-border-width);
+    border-radius: var(--wm-accordion-title-wrapper-border-radius);
+    border-style: var(--wm-accordion-title-wrapper-border-style);
+    background-color: var(--wm-accordion-title-wrapper-background-color);
+
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/container/panel.less

@@ -38,11 +38,6 @@
     color: var(--wm-panel-description-color);
 }
 
-.app-panel-content {
-    padding: var(--wm-panel-content-padding);
-}
-
-
 //TODO: Remove below styles once rn style override issue is fixed
 .panel-default.app-panel-header {
     background-color: var(--wm-panel-heading-background);

package/src/templates/foundation-theme/wavemaker/design-tokens/container/tabs/tab-header.less

@@ -9,23 +9,33 @@
 }
 
 .app-tabheader-item {
-    padding-top: var(--wm-tabs-item-heading-padding);
-    padding-bottom: var(--wm-tabs-item-heading-padding);
+    padding: var(--wm-tabs-item-heading-padding);
+    border-width: var(--wm-tabs-item-heading-border-width);
+    border-style: var(--wm-tabs-item-heading-border-style);
+    border-color: var(--wm-tabs-item-heading-border-color);
+    border-radius: var(--wm-tabs-item-heading-border-radius);
     background-color: var(--wm-tabs-item-heading-background);
 }
 
 .app-tabheader-active-item {
-   background-color: var(--wm-tabs-item-heading-background);
+    padding: var(--wm-tabs-item-heading-padding);
+    border-width: var(--wm-tabs-item-heading-border-width);
+    border-style: var(--wm-tabs-item-heading-border-style);
+    border-color: var(--wm-tabs-item-heading-border-color);
+    border-radius: var(--wm-tabs-item-heading-border-radius);
+    background-color: var(--wm-tabs-item-heading-background);
 }
 .app-tabheader-item-text {
     font-size: var(--wm-tabs-item-heading-font-size);
     font-weight: var(--wm-tabs-item-heading-font-weight);
+    font-family: var(--wm-tabs-item-heading-font-family);
     line-height: var(--wm-tabs-item-heading-line-height);
     color: var(--wm-tabs-item-heading-text-color);
 }
 .app-tabheader-active-item-text {
     font-size: var(--wm-tabs-item-heading-font-size);
     font-weight: var(--wm-tabs-item-heading-font-weight);
+    font-family: var(--wm-tabs-item-heading-font-family);
     line-height: var(--wm-tabs-item-heading-line-height);
     color: var(--wm-tabs-item-heading-text-color);
 }
@@ -46,6 +56,7 @@
 }
 
 .app-tabheader-active-indicator{
+    margin: var(--wm-tabs-item-heading-indicator-margin);
     background-color: var(--wm-tabs-item-heading-indicator-background);
     height: var(--wm-tabs-item-heading-indicator-height);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/container/tile.less

@@ -5,10 +5,7 @@
   border-radius: var(--wm-tile-border-radius);
   border-width: var(--wm-tile-border-width);
   border-color: var(--wm-tile-border-color);
-  padding-top: var(--wm-tile-padding-top);
-  padding-bottom: var(--wm-tile-padding-bottom);
-  padding-left: var(--wm-tile-padding-left);
-  padding-right: var(--wm-tile-padding-right);
+  padding: var(--wm-tile-padding);
   color: var(--wm-tile-color);
   border-style: solid;
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/container/wizard.less

@@ -3,20 +3,14 @@
   background-color: var(--wm-wizard-background-color);
   border-radius: var(--wm-wizard-border-radius);
   box-shadow: var(--wm-wizard-box-shadow);
-  padding-top: var(--wm-wizard-padding-top);
-  padding-bottom: var(--wm-wizard-padding-bottom);
-  padding-left: var(--wm-wizard-padding-left);
-  padding-right: var(--wm-wizard-padding-right);
+  padding: var(--wm-wizard-padding);
   gap: var(--wm-wizard-gap);
 }
 
 .app-wizard-header {
   background-color: var(--wm-wizard-heading-background-color);
   border-radius: var(--wm-wizard-heading-radius);
-  padding-top: var(--wm-wizard-heading-padding-top);
-  padding-bottom: var(--wm-wizard-heading-padding-bottom);
-  padding-left: var(--wm-wizard-heading-padding-left);
-  padding-right: var(--wm-wizard-heading-padding-right);
+  padding: var(--wm-wizard-heading-padding);
 }
 
 .app-wizard-done-step {
@@ -37,7 +31,7 @@
 
 .app-wizard-body {
   height: var(--wm-wizard-body-height);
-  padding-top: var(--wm-wizard-body-padding-top);
+  padding: var(--wm-wizard-body-padding);
 }
 
 .app-wizard-step-title {

package/src/templates/foundation-theme/wavemaker/design-tokens/container.less

@@ -2,16 +2,10 @@
     border-style: var(--wm-container-border-style);
     box-shadow: var(--wm-container-box-shadow);
     background-color: var(--wm-container-background-color);
-    padding-right: var(--wm-container-padding-right);
-    padding-left: var(--wm-container-padding-left);
-    padding-bottom: var(--wm-container-padding-bottom);
-    padding-top: var(--wm-container-padding-top);
+    padding: var(--wm-container-padding);
 
     border-radius: var(--wm-container-border-radius);
-    border-top-width: var(--wm-container-border-width-top);
-    border-bottom-width: var(--wm-container-border-width-bottom);
-    border-left-width: var(--wm-container-border-width-left);
-    border-right-width: var(--wm-container-border-width-right);
+    border-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -20,16 +14,10 @@
     border-style: var(--wm-container-border-style);
     box-shadow: var(--wm-container-box-shadow);
     background-color: var(--wm-container-background-color);
-    padding-right: var(--wm-container-padding-right);
-    padding-left: var(--wm-container-padding-left);
-    padding-bottom: var(--wm-container-padding-bottom);
-    padding-top: var(--wm-container-padding-top);
+    padding: var(--wm-container-padding);
 
     border-radius: var(--wm-container-border-radius);
-    border-top-width: var(--wm-container-border-width-top);
-    border-bottom-width: var(--wm-container-border-width-bottom);
-    border-left-width: var(--wm-container-border-width-left);
-    border-right-width: var(--wm-container-border-width-right);
+    border-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -39,16 +27,10 @@
     opacity: var(--wm-container-opacity);
     box-shadow: var(--wm-container-box-shadow);
     background-color: var(--wm-container-background-color);
-    padding-right: var(--wm-container-padding-right);
-    padding-left: var(--wm-container-padding-left);
-    padding-bottom: var(--wm-container-padding-bottom);
-    padding-top: var(--wm-container-padding-top);
+    padding: var(--wm-container-padding);
 
     border-radius: var(--wm-container-border-radius);
-    border-top-width: var(--wm-container-border-width-top);
-    border-bottom-width: var(--wm-container-border-width-bottom);
-    border-left-width: var(--wm-container-border-width-left);
-    border-right-width: var(--wm-container-border-width-right);
+    border-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -57,16 +39,10 @@
     border-style: var(--wm-container-border-style);
     box-shadow: var(--wm-container-box-shadow);
     background-color: var(--wm-container-background-color);
-    padding-right: var(--wm-container-padding-right);
-    padding-left: var(--wm-container-padding-left);
-    padding-bottom: var(--wm-container-padding-bottom);
-    padding-top: var(--wm-container-padding-top);
+    padding: var(--wm-container-padding);
 
     border-radius: var(--wm-container-border-radius);
-    border-top-width: var(--wm-container-border-width-top);
-    border-bottom-width: var(--wm-container-border-width-bottom);
-    border-left-width: var(--wm-container-border-width-left);
-    border-right-width: var(--wm-container-border-width-right);
+    border-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/data/card.less

@@ -1,10 +1,7 @@
 .app-card-header {
     background-color: var(--wm-card-header-background-color);
     width: var(--wm-card-header-width);
-    padding-left: var(--wm-card-header-padding-left);
-    padding-right: var(--wm-card-header-padding-right);
-    padding-top: var(--wm-card-header-padding-top);
-    padding-bottom: var(--wm-card-header-padding-bottom);
+    padding: var(--wm-card-header-padding);
 }
 
 .app-card-content {

package/src/templates/foundation-theme/wavemaker/design-tokens/data/form.less

@@ -5,7 +5,6 @@
 .app-form {
     background-color: var(--wm-form-background);
     padding: var(--wm-form-padding);
-    margin: var(--wm-form-margin);
     border-radius: var(--wm-form-border-radius);
     border-width: var(--wm-form-border-width);
     border-style: var(--wm-form-border-style);
@@ -142,15 +141,9 @@
 
 .app-input {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -170,10 +163,7 @@
 }
 
 .app-input-focused {
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
     // color: var(--wm-form-controls-color);
@@ -182,15 +172,9 @@
 
 .app-input-focused {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -204,15 +188,9 @@
 
 .app-input-disabled {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -230,15 +208,9 @@
 
 .app-select-disabled{
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
@@ -257,6 +229,140 @@
 .app-input.activeFloatingLabel {
     // color: green;
 }
+.app-text-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-text-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-textarea-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-textarea-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-date-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-date-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-time-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-time-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-datetime-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-datetime-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+//date, time, datetime floating label class is .app-text-with-label .app-text-flotaing-label
+//no floating label for select and select locale
 
 .app-form-footer{
     padding-left: var(--wm-form-footer-padding-horizontal);

package/src/templates/foundation-theme/wavemaker/design-tokens/data/list.less

@@ -1,10 +1,7 @@
 .app-list {
   border-style: var(--wm-list-border-style);
   background-color: var(--wm-list-background-color);
-  padding-right: var(--wm-list-padding-right);
-  padding-left: var(--wm-list-padding-left);
-  padding-bottom: var(--wm-list-padding-bottom);
-  padding-top: var(--wm-list-padding-top);
+  padding: var(--wm-list-padding);
   border-radius: var(--wm-list-border-radius);
   border-color: var(--wm-list-border-color);
   border-width: var(--wm-list-border-width);

package/src/templates/foundation-theme/wavemaker/design-tokens/device/barcodescanner.less

@@ -1,13 +1,10 @@
 .app-barcodescanner {
     background-color: var(--wm-barcodescanner-background);
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
+    padding: var(--wm-barcodescanner-padding);
     min-height: var(--wm-barcodescanner-min-height);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
     border-width: var(--wm-barcodescanner-border-width);
     border-color: var(--wm-barcodescanner-border-color);
     border-style: var(--wm-barcodescanner-border-style);
-    padding-right: var(--wm-barcodescanner-padding-right);
     border-radius: var(--wm-barcodescanner-border-radius);
     min-width: var(--wm-barcodescanner-min-width);
     ripple-color: var(--wm-barcodescanner-ripple-color);
@@ -19,7 +16,7 @@
 .app-barcodescanner-text {
     color: var(--wm-barcodescanner-text-color);
     font-size: var(--wm-barcodescanner-text-font-size);
-    padding-left: var(--wm-barcodescanner-text-padding-left);
+    padding: var(--wm-barcodescanner-text-padding);
     line-height: var(--wm-barcodescanner-text-font-size);
 }
 .app-barcodescanner-icon {

package/src/templates/foundation-theme/wavemaker/design-tokens/device/camera.less

@@ -6,10 +6,7 @@
     background-color: var(--wm-camera-background);
     min-height: var(--wm-camera-min-height);
     min-width: var(--wm-camera-min-width);
-    padding-top: var(--wm-camera-padding-top);
-    padding-bottom: var(--wm-camera-padding-bottom);
-    padding-left: var(--wm-camera-padding-left);
-    padding-right: var(--wm-camera-padding-right);;
+    padding: var(--wm-camera-padding);
 }
 
 .app-camera-text {

package/src/templates/foundation-theme/wavemaker/design-tokens/dialogs/dialog.less

@@ -3,14 +3,17 @@
     border-radius: var(--wm-modal-radius);
     padding: var(--wm-modal-body-padding);
     min-width: var(--wm-modal-min-width);
-    margin-top: var(--wn-modal-margin);
-    margin-bottom: var(--wn-modal-margin);
 }
 
 .app-dialogcontent{
     padding: var(--wn-modal-body-padding);
 }
 
+.app-dialog-modal {
+    background-color: var(--wm-modal-dialog-overlay-background);
+
+}
+
 .btn-only-label.text {
     color: var(--wm-color-primary);
 }
@@ -76,18 +79,28 @@
     border-color: var(--wm-color-primary);
 }
 
-.app-confirmdialog-message{
+.app-confirmdialog-message {
     font-weight: var(--wm-modal-description-font-weight);
     font-family: var(--wm-modal-description-font-family);
     color: var(--wm-modal-description-color);
     font-size: var(--wm-modal-description-font-size);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
 }
 
-.app-alertdialog-message{
+.app-alertdialog-message {
     font-weight: var(--wm-modal-description-font-weight);
     font-family: var(--wm-modal-description-font-family);
     color: var(--wm-modal-description-color);
     font-size: var(--wm-modal-description-font-size);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
 }
 
 .btn-only-label .app-button{