@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

package/src/styles/mobile/components/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/styles/mobile/components/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/styles/mobile/components/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);
@@ -131,77 +134,119 @@
 .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/styles/mobile/components/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/styles/mobile/components/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 {

package/src/styles/mobile/components/dialogs/dialog.less

@@ -15,41 +15,43 @@
     color: var(--wm-color-primary);
 }
 
-.app-dialog.header {
+.app-dialog-header {
     padding: var(--wm-modal-header-padding);
     border-style: var(--wm-modal-header-border-style);
     border-color: var(--wm-modal-header-border-color);
     border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
 }
 
 .app-dialog-title {
     padding-bottom: var(--wm-modal-header-label-padding-bottom);
 }
 
-.app-dialog-icon {
+.app-dialog-icon .app-icon-shape{
     font-size: var(--wm-modal-icon-font-size);
+    color: var(--wm-modal-icon-color);
 }
 
 .app-dialog-icon-text {
-    font-size: var(--wm-modal-icon-font-size);
-    font-weight: var(--wm-modal-icon-font-weight);
-    color: var(--wm-color-black);
+    font-size: var(--wm-modal-title-font-size);
+    font-weight: var(--wm-modal-title-font-weight);
+    color: var(--wm-modal-title-color);
     max-width: unset;
     padding: 0;
+    letter-spacing: var(--wm-modal-title-letter-spacing);
+    line-height: var(--wm-modal-title-line-height);
+    font-family: var(--wm-modal-title-font-family);
 }
 
 .btn-default.icon.root {
     color: var(--wm-color-black);
 }
 
-.app-dialog.icon.icon {
-    color: var(--wm-color-black);
-    font-size: var(--wm-modal-icon-font-size);
-}
-
-.app-dialog-close-btn.root {
-    margin-bottom: var(--wm-modal-header-close-btn-margin);
+.app-dialog-close-btn .app-button{
     border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
 }
 
 .app-dialog-close-btn .app-button-content {
@@ -72,4 +74,46 @@
     justify-content: flex-end;
     gap: var(--wm-modal-footer-gap);
     border-color: var(--wm-color-primary);
+}
+
+.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);
+}
+
+.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);
+}
+
+.btn-only-label .app-button{
+background-color: var(--wm-modal-btn-ok-background);
+}
+
+.btn-only-label .app-label-text{
+    color: var(--wm-modal-btn-ok-color);
+}
+
+.app-alertdialog-ok .app-button{
+background-color: var(--wm-modal-btn-ok-background);
+}
+
+.app-confirmdialog-cancelButton {
+background-color: var(--wm-modal-btn-cancel-background);
+}
+
+.app-confirmdialog-cancelButton-text{
+    color: var(--wm-modal-btn-cancel-color);
+}
+
+.app-dialogactions{
+    padding: var(--wm-modal-footer-padding);
+}
+
+.app-confirmdialog-actions .app-dialogactions{
+    padding: var(--wm-modal-footer-padding);   
 }

package/src/styles/mobile/components/input/toggle.less

@@ -20,7 +20,9 @@
     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);

package/src/styles/mobile/components/navigation/appnavbar.less

@@ -6,6 +6,13 @@
     padding-top: var(--wm-navbar-padding-top);
     padding-bottom: var(--wm-navbar-padding-bottom);
     background-color: var(--wm-navbar-background-color);
+    border-color: var(--wm-navbar-border-color);
+    border-style: var(--wm-navbar-border-style);
+    border-top-width: var(--wm-navbar-border-width-top);
+    border-bottom-width: var(--wm-navbar-border-width-bottom);
+    border-left-width: var(--wm-navbar-border-width-left);
+    border-right-width: var(--wm-navbar-border-width-right);
+    border-radius: var(--wm-navbar-border-radius);
 }
 
 
@@ -29,7 +36,7 @@
     font-size: var(--wm-navbar-back-icon-size);
 }
 
-.app-appnavbar-image {
+.app-appnavbar-image .app-picture {
     width: var(--wm-navbar-image-width);
     height: var(--wm-navbar-image-height);
 }
@@ -63,14 +70,15 @@
     font-family: var(--wm-navbar-anchor-text-font-family);
 }
 
-.navbar-anchor-icon {
+.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-icon-color);
-    font-size: var(--wm-navbar-button-icon-size);
+    color: var(--wm-navbar-button-color);
+    font-size: var(--wm-navbar-button-font-size);
 }
 
 .navbar-button-text {

package/src/styles/mobile/components/navigation/navitem.less

@@ -1,27 +1,88 @@
+@import (optional) url('../variables/navitem.variant.less');
 
-.app-navitem {
-    background-color: var(--wm-nav-item-background);
-    min-height: var(--wm-nav-item-min-height);
+.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);
 }
 
-.navAnchorItem.text {
-    font-size: var(--wm-nav-item-font-size);
-    font-family: var(--wm-nav-item-font-family);
-    font-weight: var(--wm-nav-item-font-weight);
-    line-height: var(--wm-nav-item-line-height);
-    letter-spacing: var(--wm-nav-item-letter-spacing);
-    color: var(--wm-nav-item-color);
+.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);
 }
 
-.navAnchorItem.root {
-    padding-left: var(--wm-nav-item-padding-left);
-    padding-right: var(--wm-nav-item-padding-right);
-    padding-top: var(--wm-nav-item-padding-top);
-    padding-bottom: var(--wm-nav-item-padding-bottom);
+.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);
 }
 
-.navAnchorItem.icon.root {
-    color: var(--wm-nav-item-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/styles/mobile/components/navigation/popover.less

@@ -8,14 +8,29 @@
     border-top-left-radius: var(--wm-popover-border-top-left-radius);
     border-top-right-radius: var(--wm-popover-border-top-right-radius)
 }
-.app-popover-action-sheet-popover {
-    position: var(--wm-popover-position);
+
+.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-top: var(--wm-popover-link-padding-top);
+    padding-bottom: var(--wm-popover-link-padding-bottom);
+    padding-left: var(--wm-popover-link-padding-left);
+    padding-right: var(--wm-popover-link-padding-right);
+    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);
     border-radius: var(--wm-popover-radius);
-    box-shadow: var(--wm-popover-elevation);
+    box-shadow: var(--wm-popover-shadow);
 }
 
 .app-popover-title {
@@ -51,7 +66,7 @@
 }
 
 .app-popover-link .app-anchor-text {
-    color: var(--wm-popover-link-text-color);
+    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);

package/src/styles/mobile/components/page/tabbar.less

@@ -1,11 +1,16 @@
 .app-tabbar {
     height: var(--wm-tabbar-height);
     box-shadow: var(--wm-tabbar-box-shadow);
+    border-top-width: var(--wm-tabbar-border-top-width);
+    border-top-style: var(--wm-tabbar-border-top-style);
+    border-top-color: var(--wm-tabbar-border-top-color);
+
 }
 
 .app-tabbar-menu {
     background-color: var(--wm-tabbar-menu-background);
     height: var(--wm-tabbar-menu-height);
+    align-items: center;
 }
 
 .app-tabbar-more-menu {
@@ -23,7 +28,9 @@
 .app-tabbar-item {
     min-height: var(--wm-tabbar-item-min-height);
     min-width: var(--wm-tabbar-item-min-width);
-    margin-bottom: var(--wm-tabbar-item-margin-bottom);
+    background-color: var(--wm-tabbar-item-background-color);
+    border-radius: var(--wm-tabbar-item-border-radius);
+    margin-bottom: var(--wm-space-0);
     opacity: var(--wm-tabbar-item-opacity);
     display: flex;
     justify-content: center;
@@ -32,7 +39,7 @@
 
 .app-tabbar-active-item {
     opacity: var(--wm-tabbar-item-opacity);
-    margin-bottom: var(--wm-tabbar-item-margin-bottom);
+    margin-bottom: var(--wm-space-0);
     border-radius: var(--wm-tabbar-item-border-radius);
     background-color: var(--wm-tabbar-item-background-color);
     display: flex;
@@ -56,6 +63,8 @@
 
 .app-tabbar-active-icon .app-icon-shape {
     color: var(--wm-tabbar-icon-color);
+    font-size: var(--wm-tabbar-icon-size);
+    padding-right: var(--wm-tabbar-icon-padding-right);
 }
 
 .app-tabbar-item-label {
@@ -69,6 +78,8 @@
 
 .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');