@wavemaker/rn-codegen 11.14.3-rc.6401 → 11.15.0-2.247

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

@@ -23,12 +23,26 @@
 }
 
 .app-search-invalid {
+    border-bottom-color: var(--wm-search-invalid-color);
     border-color: var(--wm-search-invalid-color);
 }
 
 .app-search-clear-btn .app-button {
     border-color: transparent;
     ripple-color: transparent;
+    padding-left: var(--wm-search-clear-btn-padding-left);
+    padding-right: var(--wm-search-clear-btn-padding-right);
+    padding-top: var(--wm-search-clear-btn-padding-top);
+    padding-bottom: var(--wm-search-clear-btn-padding-bottom);
+    border-radius: var(--wm-search-clear-btn-border-radius);
+    background-color: var(--wm-search-clear-btn-background-color);
+    width: var(--wm-search-clear-btn-width);
+}
+
+.app-search-clear-btn .app-button-icon .app-icon-shape{
+    background-color: transparent;
+    color:var(--wm-search-clear-btn-icon-color);
+    font-size: var(--wm-search-clear-btn-icon-size);
 }
 
 .app-search-btn .app-button-icon .app-icon-shape {
@@ -71,7 +85,7 @@
 }
 
 .app-search-placeholder {
-    color: var(--wm-search-placeholder-color);
+    color: var(--wm-search-placeholder-text-color);
 }
 
 .app-search-dropdown-content {
@@ -96,7 +110,12 @@
     border-width: var(--wm-search-border-width);
     border-style: solid;
     border-left-width: 0;
-    
+    padding-left: var(--wm-search-btn-padding-left);
+    padding-right: var(--wm-search-btn-padding-right);
+    padding-top: var(--wm-search-btn-padding-top);
+    padding-bottom: var(--wm-search-btn-padding-bottom);
+    width: var(--wm-search-btn-width);
+
 }
 
 .app-autocomplete.text{

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

@@ -1,3 +1,15 @@
-
 .app-panel-footer {
+    background-color: var(--wm-panel-footer-background);
+    padding-inline: var(--wm-panel-footer-padding-inline);
+    padding-block: var(--wm-panel-footer-padding-block);
+    border-style: var(--wm-panel-footer-border-style);
+    border-width: var(--wm-panel-footer-border-width);
+    border-color: var(--wm-panel-footer-border-color);
+    border-radius: var(--wm-panel-footer-border-radius);
+    min-height: var(--wm-panel-footer-min-height);
+    margin-top: var(--wm-panel-footer-margin-top);
+    margin-bottom: var(--wm-panel-footer-margin-bottom);
+    margin-left: var(--wm-panel-footer-margin-left);
+    margin-right: var(--wm-panel-footer-margin-right)
 }
+    

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

@@ -8,43 +8,40 @@
     padding: 0;
 }
 
-.app-panel-title {
-    font-family: var(--wm-panel-heading-font-family);
-    font-size: var(--wm-panel-heading-font-size);
-    color: var(--wm-panel-heading-color);
-    font-weight: var(--wm-panel-heading-font-weight);
+.app-panel-icon .app-icon-text {
+    font-size: var(--wm-panel-heading-icon-size);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .app-panel-header {
+    gap: var(--wm-panel-heading-gap);
     background-color: var(--wm-panel-heading-background);
     padding-inline: var(--wm-panel-heading-padding-inline);
     padding-block: var(--wm-panel-heading-padding-block);
 }
 
 .app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
+    font-family: var(--wm-panel-heading-font-family);
+    font-size: var(--wm-panel-heading-font-size);
+    font-weight: var(--wm-panel-heading-font-weight);
+    letter-spacing: var(--wm-panel-heading-letter-spacing);
+    line-height: var(--wm-panel-heading-line-height);
 }
 
 .app-panel-sub-title {
+    font-family: var(--wm-panel-description-font-family);
+    font-size: var(--wm-panel-description-font-size);
+    font-weight: var(--wm-panel-description-font-weight);
+    letter-spacing: var(--wm-panel-description-letter-spacing);
+    line-height: var(--wm-panel-description-line-height);
     color: var(--wm-panel-description-color);
 }
 
-.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
-}
-
 .app-panel-content {
     padding: var(--wm-panel-content-padding);
 }
 
-.app-panel-footer {
-    background-color: var(--wm-panel-footer-background);
-    padding-inline: var(--wm-panel-footer-padding);
-    padding-block: var(--wm-panel-footer-padding);
-    border-style: var(--wm-panel-footer-border-style);
-    border-width: var(--wm-panel-footer-border-width);
-    border-color: var(--wm-panel-footer-border-color);
-}
 
 //TODO: Remove below styles once rn style override issue is fixed
 .panel-default.app-panel-header {
@@ -52,7 +49,7 @@
 }
 
 .panel-default.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-default.app-panel-sub-title {
@@ -60,7 +57,7 @@
 }
 
 .panel-default.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-danger.app-panel-header {
@@ -68,7 +65,7 @@
 }
 
 .panel-danger.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-danger.app-panel-sub-title {
@@ -76,7 +73,7 @@
 }
 
 .panel-danger.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-success.app-panel-header {
@@ -84,7 +81,7 @@
 }
 
 .panel-success.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-success.app-panel-sub-title {
@@ -92,7 +89,7 @@
 }
 
 .panel-success.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-warning.app-panel-header {
@@ -100,7 +97,7 @@
 }
 
 .panel-warning.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-warning.app-panel-sub-title {
@@ -108,7 +105,7 @@
 }
 
 .panel-warning.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-info.app-panel-header {
@@ -116,7 +113,7 @@
 }
 
 .panel-info.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-info.app-panel-sub-title {
@@ -124,7 +121,7 @@
 }
 
 .panel-info.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-primary.app-panel-header {
@@ -132,7 +129,7 @@
 }
 
 .panel-primary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-primary.app-panel-sub-title {
@@ -140,7 +137,7 @@
 }
 
 .panel-primary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-secondary.app-panel-header {
@@ -148,7 +145,7 @@
 }
 
 .panel-secondary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-secondary.app-panel-sub-title {
@@ -156,7 +153,7 @@
 }
 
 .panel-secondary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }
 
 .panel-tertiary.app-panel-header {
@@ -164,7 +161,7 @@
 }
 
 .panel-tertiary.app-panel-title {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-text-color);
 }
 
 .panel-tertiary.app-panel-sub-title {
@@ -172,5 +169,5 @@
 }
 
 .panel-tertiary.app-panel-icon .app-icon-text {
-    color: var(--wm-panel-heading-color);
+    color: var(--wm-panel-heading-icon-color);
 }

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

@@ -21,19 +21,25 @@
     font-size: var(--wm-tabs-item-heading-font-size);
     font-weight: var(--wm-tabs-item-heading-font-weight);
     line-height: var(--wm-tabs-item-heading-line-height);
-    color: var(--wm-tabs-item-heading-text);
+    color: var(--wm-tabs-item-heading-text-color);
 }
 .app-tabheader-active-item-text {
-    color: var(--wm-tabs-item-heading-text);
+    font-size: var(--wm-tabs-item-heading-font-size);
+    font-weight: var(--wm-tabs-item-heading-font-weight);
+    line-height: var(--wm-tabs-item-heading-line-height);
+    color: var(--wm-tabs-item-heading-text-color);
 }
 
 .app-tabheader-active-item-icon .app-icon-shape {
-    color: var(--wm-tabs-item-heading-icon);
+    color: var(--wm-tabs-item-heading-icon-color);
+    font-size: var(--wm-tabs-item-heading-icon-size);
+    height: var(--wm-tabs-item-heading-icon-height);
+    width: var(--wm-tabs-item-heading-icon-width);
 }
 
 .app-tabheader-item-icon .app-icon-shape {
-    color: var(--wm-tabs-item-heading-icon);
-    font-size: var(--wm-tabs-item-heading-font-size);
+    color: var(--wm-tabs-item-heading-icon-color);
+    font-size: var(--wm-tabs-item-heading-icon-size);
     height: var(--wm-tabs-item-heading-icon-height);
     width: var(--wm-tabs-item-heading-icon-width);
  

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

@@ -1,10 +1,12 @@
 @import (optional) url('../variables/tabs.variant.less');
 
 .app-tabs {
+    width: 100%; // create and assign a variable for this.. ex: var(--wm-tabs-width), like accordion and expose it in the style ws
     background-color: var(--wm-tabs-background);
     border-radius: var(--wm-tabs-border-radius);
     border-style: var(--wm-tabs-border-style);
     border-width: var(--wm-tabs-border-width);
     border-bottom-width: var(--wm-tabs-border-width);
     border-color: var(--wm-tabs-border-color);
+    min-height: var(--wm-tabs-min-height);
 }

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

@@ -8,7 +8,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    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-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -23,7 +26,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    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-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -39,7 +45,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    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-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }
@@ -54,7 +63,10 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    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-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
 }

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

@@ -1,7 +1,10 @@
 .app-card-header {
     background-color: var(--wm-card-header-background-color);
     width: var(--wm-card-header-width);
-    padding: var(--wm-card-header-padding);
+    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);
 }
 
 .app-card-content {

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

@@ -77,10 +77,13 @@
 
 .form-label.app-label-text {
     color: var(--wm-form-controls-label-color);
-    background-color: var(--wm-form-controls-label-background);
     font-size: var(--wm-form-controls-label-font-size);
     font-weight: var(--wm-form-controls-label-font-weight);
     font-family: var(--wm-form-controls-label-font-family);
+}
+
+.form-label{
+    background-color: var(--wm-form-controls-label-background);
     margin-top: var(--wm-form-controls-label-margin-vertical);
     margin-bottom: var(--wm-form-controls-label-margin-vertical);
     margin-left: var(--wm-form-controls-label-margin-horizontal);
@@ -94,11 +97,11 @@
     color: var(--wm-form-controls-placeholder-color);
 }
 .app-number-placeholer{
-    color: var(--wm-form-controls-placeholder-color); 
+    color: var(--wm-form-controls-placeholder-color);
 }
 
 .app-date-place-holder-text{
-    color: var(--wm-form-controls-placeholder-color); 
+    color: var(--wm-form-controls-placeholder-color);
 }
 
 .app-datetime-place-holder-text{
@@ -127,81 +130,123 @@
   margin-bottom: var(--wm-form-controls-label-margin-vertical);
   margin-left: var(--wm-form-controls-label-margin-horizontal);
   margin-right: var(--wm-form-controls-label-margin-horizontal);
-} 
+}
 .app-form-field-error-msg {
     color: var(--wm-form-error-color);
     font-size: var(--wm-form-error-font-size);
-    padding-top: var(--wm-form-error-padding-vertical);
-    padding-bottom: var(--wm-form-error-padding-vertical);
-    padding-left: var(--wm-form-error-padding-horizontal);
-    padding-right: var(--wm-form-error-padding-horizontal);
+    padding-top: var(--wm-form-error-padding-top);
+    padding-bottom: var(--wm-form-error-padding-bottom);
+    padding-left: var(--wm-form-error-padding-left);
+    padding-right: var(--wm-form-error-padding-right);
 }
 
 .app-input {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-vertical);
-    padding-bottom: var(--wm-form-controls-padding-vertical);
-    padding-left: var(--wm-form-controls-padding-horizontal);
-    padding-right: var(--wm-form-controls-padding-horizontal);
+    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);
     border-style: var(--wm-form-controls-border-style);
-    border-width: var(--wm-form-controls-border-width);
+    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-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
     opacity: var(--wm-form-controls-opacity);
+    min-width: var(--wm-form-controls-min-width);
+    font-size: var(--wm-form-controls-font-size);
+    font-family: var(--wm-form-controls-font-family);
+    font-weight: var(--wm-form-controls-font-weight);
+}
+
+.app-input-text{
+    color: var(--wm-form-controls-color);
+    font-size: var(--wm-form-controls-font-size);
+    font-family: var(--wm-form-controls-font-family);
+    font-weight: var(--wm-form-controls-font-weight);
 }
 
 .app-input-focused {
-    border-width: var(--wm-form-controls-border-width);
+    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-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
-    color: var(--wm-form-controls-color);
+    // color: var(--wm-form-controls-color);
     opacity: var(--wm-form-controls-opacity);
 }
 
 .app-input-focused {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-vertical);
-    padding-bottom: var(--wm-form-controls-padding-vertical);
-    padding-left: var(--wm-form-controls-padding-horizontal);
-    padding-right: var(--wm-form-controls-padding-horizontal);
+    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);
     border-style: var(--wm-form-controls-border-style);
-    border-width: var(--wm-form-controls-border-width);
+    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-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
     opacity: var(--wm-form-controls-opacity);
+    // font-size: var(--wm-form-controls-font-size);
+    font-family: var(--wm-form-controls-font-family);
+    font-weight: var(--wm-form-controls-font-weight);
+    min-width: var(--wm-form-controls-min-width);
 }
 
 .app-input-disabled {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-vertical);
-    padding-bottom: var(--wm-form-controls-padding-vertical);
-    padding-left: var(--wm-form-controls-padding-horizontal);
-    padding-right: var(--wm-form-controls-padding-horizontal);
+    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);
     border-style: var(--wm-form-controls-border-style);
-    border-width: var(--wm-form-controls-border-width);
+    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-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
     opacity: var(--wm-form-controls-opacity);
+    font-size: var(--wm-form-controls-font-size);
+    font-family: var(--wm-form-controls-font-family);
+    font-weight: var(--wm-form-controls-font-weight);
+    min-width: var(--wm-form-controls-min-width);
+    border-top-color: var(--wm-form-controls-border-color);
+    border-left-color: var(--wm-form-controls-border-color);
+    border-bottom-color: var(--wm-form-controls-border-color);
+    border-right-color: var(--wm-form-controls-border-color);
 }
 
 .app-select-disabled{
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-vertical);
-    padding-bottom: var(--wm-form-controls-padding-vertical);
-    padding-left: var(--wm-form-controls-padding-horizontal);
-    padding-right: var(--wm-form-controls-padding-horizontal);
+    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);
     border-style: var(--wm-form-controls-border-style);
-    border-width: var(--wm-form-controls-border-width);
+    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-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
     opacity: var(--wm-form-controls-opacity);
+    font-size: var(--wm-form-controls-font-size);
+    font-family: var(--wm-form-controls-font-family);
+    font-weight: var(--wm-form-controls-font-weight);
+    min-width: var(--wm-form-controls-min-width);
 }
 
 .app-input.floatingLabel {

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

@@ -1,46 +1,11 @@
-.app-list-heading {
-  padding: var(--wm-list-heading-padding);
-  background-color: var(--wm-list-heading-background-color);
-  margin-bottom: var(--wm-list-heading-margin-bottom);
-}
-
-.app-list-title {
-  font-family: var(--wm-list-title-font-family);
-  color: var(--wm-list-title-color);
-  font-size: var(--wm-list-title-font-size);
-  line-height: var(--wm-list-title-line-height);
-  font-weight: var(--wm-list-title-font-weight);
-}
-
-.app-list-sub-title {
-  font-family: var(--wm-list-sub-heading-font-family);
-  color: var(--wm-list-sub-heading-color);
-  line-height: var(--wm-list-sub-heading-line-height);
-  font-size: var(--wm-list-sub-heading-font-size);
-  font-weight: var(--wm-list-sub-heading-font-weight);
-}
-
-.app-list-item {
-  color: var(--wm-list-item-header-color);
-  background-color: var(--wm-list-item-header-background-color);
-  padding: var(--wm-list-item-padding);
-  border-radius: var(--wm-list-item-border-radius);
-  min-height: var(--wm-list-item-min-height);
-  border-style: var(--wm-list-item-border-style);
-  box-shadow: none;
-}
-
-.app-list-template{
-  color: var(--wm-list-item-header-color);
-  background-color: var(--wm-list-item-header-background-color);
-  padding: var(--wm-list-item-padding);
-  border-color: var(--wm-list-item-border-color);
-  border-radius: var(--wm-list-item-border-radius);
-  min-height: var(--wm-list-item-min-height);
-  border-style: var(--wm-list-item-border-style);
-}
-
-.app-list-selected-icon-text{
-    font-size: var(--wm-list-select-icon-font-size);
-    color: var(--wm-list-select-icon-color);
+.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);
+  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/camera.less

@@ -1,14 +1,15 @@
 
 .app-camera {
-    min-height: var(--wm-camera-button-root-min-height);
-    min-width: var(--wm-camera-button-root-min-width);
     border-width: var(--wm-camera-border-width);
     border-radius: var(--wm-camera-border-radius);
     border-color: var(--wm-camera-border-color);
     background-color: var(--wm-camera-background);
     min-height: var(--wm-camera-min-height);
     min-width: var(--wm-camera-min-width);
-    padding: var(--wm-camera-padding);
+    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);;
 }
 
 .app-camera-text {