@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.249

package/src/styles/mobile/components/variables/accordion.variant.less

@@ -5,6 +5,10 @@
 .app-accordion-active-title-icon {
   --wm-accordion-header-border-color: var(--wm-color-primary);
   --wm-accordion-header-background-color: var(--wm-color-primary);
+  --wm-accordion-text-background-color: transparent;
+  --wm-accordion-text-border-width: var(--wm-border-width-0);
+  --wm-accordion-text-border-radius: 0px;
+  --wm-accordion-text-border-color: var(--wm-color-outline);
   --wm-accordion-text-color: var(--wm-color-white);
   --wm-accordion-title-icon-color: var(--wm-color-white);
   --wm-accordion-icon-color: var(--wm-color-white);

package/src/styles/mobile/components/variables/button.variant.less

@@ -112,190 +112,133 @@
 .btn-text-default {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-on-surface);
 }
 
 .btn-text-primary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-primary);
 }
 
 .btn-text-secondary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-secondary);
 }
 
 .btn-text-tertiary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-tertiary);
 }
 
 .btn-text-success {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-success);
 }
 
 .btn-text-info {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-info);
 }
 
 .btn-text-warning {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-warning);
 }
 
 .btn-text-danger {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-error);
 }
 
 .btn-text-error {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-error);
 }
 
 .btn-standard-default {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-on-surface);
 }
 
 .btn-standard-primary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-primary);
 }
 
 .btn-standard-secondary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-secondary);
 }
 
 .btn-standard-tertiary {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-tertiary);
 }
 
 .btn-standard-success {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-success);
 }
 
 .btn-standard-info {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-info);
 }
 
 .btn-standard-warning {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-warning);
 }
 
 .btn-standard-danger {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-error);
 }
 
 .btn-standard-error {
   --wm-btn-background: none;
   --wm-btn-border-color: transparent;
-  --wm-btn-padding-top: var(--wm-space-2);
-  --wm-btn-padding-bottom: var(--wm-space-2);
-  --wm-btn-padding-left: var(--wm-space-3);
-  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-color: var(--wm-color-error);
 }
 
 .btn-icon {
   --wm-btn-height: 40px;
   --wm-btn-min-width: 40px;
-  --wm-btn-padding-top: var(--wm-space-0);
-  --wm-btn-padding-bottom: var(--wm-space-0);
-  --wm-btn-padding-left: var(--wm-space-0);
-  --wm-btn-padding-right: var(--wm-space-0);
+  --wm-btn-padding: var(--wm-space-0);
   --wm-btn-icon-size: var(--wm-icon-size-md);
 }
 
@@ -304,9 +247,6 @@
 }
 
 .btn-fab {
-  --wm-btn-position: absolute;
-  --wm-btn-position-bottom: 10px;
-  --wm-btn-position-right: 10px;
   --wm-btn-height: 56px;
   --wm-btn-min-width: 56px;
   --wm-btn-border-radius: 16px;

package/src/styles/mobile/components/variables/carousel.variant.less

@@ -6,7 +6,6 @@
   --wm-carousel-dots-border-color: var(--wm-color-primary-container);
   --wm-carousel-dots-border-radius: 5px;
   --wm-carousel-dots-border-width: var(--wm-border-width-base);
-  --wm-carousel-dots-margin-left: var(--wm-radius-xxs);
-  --wm-carousel-dots-margin-right: var(--wm-radius-xxs);
-  --wm-carousel-slide-padding-horizontal: var(--wm-space-4);
+  --wm-carousel-dots-margin: var(--wm-space-0) var(--wm-radius-xxs);
+  --wm-carousel-slide-padding: var(--wm-space-0) var(--wm-space-4);
 }

package/src/styles/mobile/components/variables/container.variant.less

@@ -1,44 +1,26 @@
 .app-default-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width-top: var(--wm-border-width-0);
-  --wm-container-border-width-bottom: var(--wm-border-width-0);
-  --wm-container-border-width-left: var(--wm-border-width-0);
-  --wm-container-border-width-right: var(--wm-border-width-0);
+  --wm-container-border-width: var(--wm-border-width-0);
   --wm-container-border-color: transparent;
   --wm-container-border-radius: var(--wm-radius-none);
   --wm-container-box-shadow: var(--wm-elevation-shadow-none);
-  --wm-container-padding-top: var(--wm-space-0);
-  --wm-container-padding-bottom: var(--wm-space-0);
-  --wm-container-padding-left: var(--wm-space-0);
-  --wm-container-padding-right: var(--wm-space-0);
+  --wm-container-padding: var(--wm-space-0);
 }
 
 .app-outlined-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width-top: var(--wm-border-width-base);
-  --wm-container-border-width-bottom: var(--wm-border-width-base);
-  --wm-container-border-width-left: var(--wm-border-width-base);
-  --wm-container-border-width-right: var(--wm-border-width-base);
+  --wm-container-border-width: var(--wm-border-width-base);
   --wm-container-border-color: var(--wm-color-outline-variant);
   --wm-container-border-radius: 1px;
   --wm-container-box-shadow: var(--wm-elevation-shadow-none);
-  --wm-container-padding-top: var(--wm-space-0);
-  --wm-container-padding-bottom: var(--wm-space-0);
-  --wm-container-padding-left: var(--wm-space-0);
-  --wm-container-padding-right: var(--wm-space-0);
+  --wm-container-padding: var(--wm-space-0);
 }
 
 .app-elevated-container {
   --wm-container-box-shadow: var(--wm-elevation-shadow-1);
   --wm-container-border-style: var(--wm-border-style-base);
   --wm-container-border-color: transparent;
-  --wm-container-border-width-top: var(--wm-border-width-base);
-  --wm-container-border-width-bottom: var(--wm-border-width-base);
-  --wm-container-border-width-left: var(--wm-border-width-base);
-  --wm-container-border-width-right: var(--wm-border-width-base);
+  --wm-container-border-width: var(--wm-border-width-base);
   --wm-container-border-radius: var(--wm-radius-sm);
-  --wm-container-padding-top: var(--wm-space-0);
-  --wm-container-padding-bottom: var(--wm-space-0);
-  --wm-container-padding-left: var(--wm-space-0);
-  --wm-container-padding-right: var(--wm-space-0);
+  --wm-container-padding: var(--wm-space-0);
 }

package/src/styles/mobile/components/variables/form-controls.variant.less

@@ -1,19 +1,20 @@
 .app-input-focused {
   --wm-form-controls-border-color: var(--wm-color-primary);
-  --wm-form-controls-border-top-width: var(--wm-border-width-1);
-  --wm-form-controls-border-left-width: var(--wm-border-width-1);
-  --wm-form-controls-border-right-width: var(--wm-border-width-1);
-  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-outline-variant);
   --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
+  --wm-form-controls-floating-font-size: var(--wm-body-medium-font-size);
+  --wm-form-controls-floating-font-weight: var(--wm-body-medium-font-weight);
+  --wm-form-controls-floating-font-family: var(--wm-body-medium-font-family);
+  --wm-form-controls-floating-top: var(--wm-space-3);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+  --wm-form-controls-floating-padding: var(--wm-space-0);
 }
 
 .app-input-disabled {
   --wm-form-controls-border-color: var(--wm-color-shadow);
-  --wm-form-controls-border-top-width: var(--wm-border-width-1);
-  --wm-form-controls-border-left-width: var(--wm-border-width-1);
-  --wm-form-controls-border-right-width: var(--wm-border-width-1);
-  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-surface-dim);
   --wm-form-controls-color: var(--wm-color-scrim);
   --wm-form-controls-opacity: 0.67;

package/src/styles/mobile/components/variables/picture.variant.less

@@ -1,9 +1,6 @@
 .rounded-image.app-picture {
   --wm-picture-radius: var(--wm-radius-none);
-  --wm-picture-padding-top: var(--wm-space-0);
-  --wm-picture-padding-bottom: var(--wm-space-0);
-  --wm-picture-padding-left: var(--wm-space-0);
-  --wm-picture-padding-right: var(--wm-space-0);
+  --wm-picture-padding: var(--wm-space-0);
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-picture-border-width: var(--wm-border-width-0);
@@ -13,10 +10,7 @@
 
 .circle-image.app-picture {
   --wm-picture-radius: var(--wm-radius-none);
-  --wm-picture-padding-top: var(--wm-space-0);
-  --wm-picture-padding-bottom: var(--wm-space-0);
-  --wm-picture-padding-left: var(--wm-space-0);
-  --wm-picture-padding-right: var(--wm-space-0);
+  --wm-picture-padding: var(--wm-space-0);
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-picture-border-width: var(--wm-border-width-0);
@@ -26,10 +20,7 @@
 
 .thumbnail-image.app-picture {
   --wm-picture-radius: var(--wm-radius-xs);
-  --wm-picture-padding-top: var(--wm-space-1);
-  --wm-picture-padding-bottom: var(--wm-space-1);
-  --wm-picture-padding-left: var(--wm-space-1);
-  --wm-picture-padding-right: var(--wm-space-1);
+  --wm-picture-padding: var(--wm-space-1);
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-picture-border-width: var(--wm-border-width-base);

package/src/styles/mobile/components/variables/tabbar.variant.less

@@ -2,6 +2,7 @@
 .app-tabbar-active-icon,
 .app-tabbar-active-label {
   --wm-tabbar-item-border-radius: 50px;
+  --wm-tabbar-item-border-width: var(--wm-border-width-0);
   --wm-tabbar-item-background-color: var(--wm-color-primary-container);
   --wm-tabbar-item-margin-bottom: -2;
   --wm-tabbar-icon-color: var(--wm-color-primary);

package/src/styles/mobile/components/variables/tabs.variant.less

@@ -2,9 +2,16 @@
 .app-tabheader-active-item-text,
 .app-tabheader-active-item-icon,
 .app-tabheader-active-indicator {
+  --wm-tabs-item-heading-padding: var(--wm-space-2);
+  --wm-tabs-item-heading-border-radius: var(--wm-radius-none);
+  --wm-tabs-item-heading-border-style: var(--wm-border-style-base);
+  --wm-tabs-item-heading-border-color: var(--wm-color-surface);
+  --wm-tabs-item-heading-border-width: var(--wm-border-width-0);
   --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
   --wm-tabs-item-heading-font-weight: var(--wm-h6-font-weight);
+  --wm-tabs-item-heading-font-family: var(--wm-h6-font-family);
   --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
+  --wm-tabs-item-heading-indicator-margin: var(--wm-space-0);
   --wm-tabs-item-heading-indicator-height: 3px;
   --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
   --wm-tabs-item-heading-background: var(--wm-color-surface);

package/src/styles/mobile/studio/advanced/carousel.less

@@ -41,7 +41,7 @@
 }
 
 .carousel-control.right {
-    top: 50%;
+    top: 30%;
     opacity: 1;
     border-style: solid;
     margin-right: var(--wm-carousel-navigation-arrows-margin-left);
@@ -52,10 +52,11 @@
     height: var(--wm-carousel-navigation-arrows-height);
     border-color: var(--wm-carousel-navigation-arrows-border-color);
     border-width: var(--wm-carousel-navigation-arrows-border-width);
+    z-index: 1;
 }
 
 .carousel-control.left {
-    top: 50%;
+    top: 30%;
     opacity: 1;
     border-style: solid;
     margin-left: var(--wm-carousel-navigation-arrows-margin-left);
@@ -66,6 +67,7 @@
     height: var(--wm-carousel-navigation-arrows-height);
     border-color: var(--wm-carousel-navigation-arrows-border-color);
     border-width: var(--wm-carousel-navigation-arrows-border-width);
+    z-index: 1;
 }
 
 .app-carousel .carousel-indicators li {

package/src/styles/mobile/studio/advanced/login.less

@@ -1,9 +1,6 @@
 .app-form {
     &.app-login {
         background-color: transparent;
-        padding-top: var(--wm-login-form-padding-top);
-        padding-right: var(--wm-login-form-padding-right);
-        padding-bottom: var(--wm-login-form-padding-bottom);
-        padding-left: var(--wm-login-form-padding-left);
+        padding: var(--wm-login-form-padding);
     }
 }

package/src/styles/mobile/studio/advanced/webview.less

@@ -1,7 +1,4 @@
 .app-iframe {
     background-color: var(--wm-webview-background-color);
-    padding-right: var(--wm-webview-padding-right);
-    padding-left: var(--wm-webview-padding-left);
-    padding-bottom: var(--wm-webview-padding-bottom);
-    padding-top: var(--wm-webview-padding-top);
+    padding: var(--wm-webview-padding);
 }

package/src/styles/mobile/studio/basic/label.less

@@ -11,10 +11,6 @@
         padding-right: var(--wm-label-padding-right);
         padding-top: var(--wm-label-padding-top);
         padding-bottom: var(--wm-label-padding-bottom);
-        margin-top: var(--wm-label-margin-top);
-        margin-bottom: var(--wm-label-margin-bottom);
-        margin-left: var(--wm-label-margin-left);
-        margin-right: var(--wm-label-margin-right);
         line-height: var(--wm-label-line-height);
         letter-spacing: var(--wm-label-letter-spacing);
     }
@@ -33,10 +29,6 @@
         padding-bottom: var(--wm-label-padding-bottom) !important;
         padding-left: var(--wm-label-padding-left) !important;
         padding-right: var(--wm-label-padding-right) !important;
-        margin-top: var(--wm-label-margin-top);
-        margin-bottom: var(--wm-label-margin-bottom);
-        margin-left: var(--wm-label-margin-left);
-        margin-right: var(--wm-label-margin-right);
         line-height: var(--wm-label-line-height);
         letter-spacing: var(--wm-label-letter-spacing);
     }

package/src/styles/mobile/studio/basic/message.less

@@ -25,8 +25,7 @@
    // color: var(--wm-message-color); //TODO Button color missing
     opacity: 1;
     text-shadow: none;
-    padding-left: var(--wm-message-close-btn-padding-left);
-    padding-right: var(--wm-message-close-btn-padding-right);
+    padding: var(--wm-message-close-btn-padding);
     border-radius: var(--wm-message-close-btn-border-radius);
     border-color: var(--wm-message-close-btn-border-color) !important;
     background-color: var(--wm-message-close-btn-background-color) !important;

package/src/styles/mobile/studio/container/accordion.less

@@ -1,6 +1,6 @@
 .app-accordion{
     .panel-heading {
-        border-bottom-width: var(--wm-accordion-header-border-bottom-width);
+        border-width: var(--wm-accordion-header-border-width);
         display: flex;
         flex-direction: row;
         align-self: center;
@@ -20,7 +20,4 @@
             }
         }
     }
-    .panel-body {
-        padding: 0px;
-    }
 }

package/src/styles/mobile/studio/container/container.less

@@ -6,16 +6,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/styles/mobile/studio/container/tabs.less

@@ -26,7 +26,11 @@
             align-items: center;
             margin: 0px;
             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);
             .tab-heading {
 
 
@@ -61,7 +65,11 @@
 
             &.active {
 
-
+                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);
                 color: var(--wm-tabs-item-heading-text-color);
 

package/src/styles/mobile/studio/data/card.less

@@ -1,6 +1,6 @@
     .app-card {
         &-header {
-            padding: var(--wm-card-heading-padding);
+            padding: var(--wm-card-header-padding);
             background-color: var(--wm-card-header-background-color);
             width: var(--wm-card-heading-width);
         }

package/src/styles/mobile/studio/device/barcode.less

@@ -1,9 +1,6 @@
 .app-page-content .app-ng-transclude .app-barcode {
     width: auto;
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
-    padding-right: var(--wm-barcodescanner-padding-right);
+    padding: var(--wm-barcodescanner-padding);
     gap: var(--wm-space-0) !important;
     display: grid !important;
     justify-content: none;
@@ -12,10 +9,7 @@
 
  .app-barcode{
     width: auto;
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
-    padding-right: var(--wm-barcodescanner-padding-right);
+    padding: var(--wm-barcodescanner-padding);
     gap: var(--wm-space-0) !important;
     display: grid !important;
     justify-content: none;

package/src/styles/mobile/studio/input/calendar.less

@@ -1,8 +1,68 @@
 
-.app-calendar .fc .fc-day-today {
-    border-width: 2px;
-    border-style: solid;
-    background-color: #fff;
-    border-radius: 99px;
+.app-calendar {
+  width: var(--wm-calendar-width);
+  min-height: var(--wm-calendar-min-height);
+  box-shadow: var(--wm-calendar-wrapper-shadow);
+  border-style: var(--wm-calendar-wrapper-border-style);
+  border-radius: var(--wm-calendar-wrapper-border-radius);
+  border-color: var(--wm-calendar-wrapper-border-color);
+  border-width: var(--wm-calendar-wrapper-border-width);
+  background-color: var(--wm-calendar-wrapper-background);
+
+  .fc {
+    .fc-toolbar.fc-header-toolbar {
+      padding: var(--wm-calendar-header-padding);
+      background-color: var(--wm-calendar-header-background-color);
+      border-color: var(--wm-calendar-header-border-color);
+      border-width: var(--wm-calendar-header-border-width);
+      border-style: var(--wm-calendar-header-border-style);
+
+      .fc-toolbar-title {
+        //the change shouldnt be displayed in web so not mapped tokens here
+      }
+    }
+
+    table tbody tr th {
+      border-width: var(--wm-calendar-weekday-border-width);
+      border-style: var(--wm-calendar-weekday-border-style);
+      padding: var(--wm-calendar-weekday-padding);
+      background-color: var(--wm-calendar-weekday-background-color);
+      border-color: var(--wm-calendar-weekday-border-color);
+
+      .fc-col-header-cell a {
+        color: var(--wm-calendar-weekday-text-color);
+        font-weight: var(--wm-calendar-weekday-text-font-weight);
+        font-family: var(--wm-calendar-weekday-text-font-family);
+        font-size: var(--wm-calendar-weekday-text-font-size);
+      }
+    }
+
+    .fc-daygrid-day-top {
+      background-color: var(--wm-calendar-daywrapper-background);
+      border-color: var(--wm-calendar-daywrapper-border-color);
+      border-width: var(--wm-space-1);
+      border-style: var(--wm-border-style-solid);
+      border-radius: 100%;
+
+      a {
+        color: var(--wm-calendar-day-color);
+        font-size: var(--wm-calendar-day-font-size);
+        font-weight: var(--wm-calendar-day-font-weight);
+        font-family: var(--wm-calendar-day-font-family);
+        border-color: var(--wm-calendar-day-border-color);
+      }
+    }
+
+    .fc-day-today {
+      .fc-daygrid-day-top {
+        border-color: var(--wm-calendar-today-border-color);
+        background-color: var(--wm-calendar-today-background-color);
+
+        .a {
+          background-color: var(--wm-calendar-today-text-background-color);
+        }
+      }
+
+    }
   }
-  
+}