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

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

@@ -1,3 +1,7 @@
-.app-webview-container {
-    min-height: var(--wm-webview-container-min-height);
+.app-webview {
+  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);
 }

package/src/styles/mobile/components/basic/anchor.less

@@ -5,8 +5,8 @@
 
 .app-anchor-text {
     color: var(--wm-anchor-color);
-    padding-left: var(--wm-space-2);
-    padding-right: var(--wm-space-2);
+    padding-left: var(--wm-anchor-text-padding-left);
+    padding-right: var(--wm-anchor-text-padding-right);
     font-size: var(--wm-anchor-font-size);
     font-family: var(--wm-anchor-font-family);
     font-weight: var(--wm-anchor-font-weight);

package/src/styles/mobile/components/basic/bottomsheet.less

@@ -8,6 +8,12 @@
     border-top-left-radius: var(--wm-bottomsheet-border-radius); 
     margin-left: var(--wm-bottomsheet-margin-left); 
     margin-right: var(--wm-bottomsheet-margin-right); 
+    border-top-width: var(--wm-bottomsheet-border-width-top); 
+    border-bottom-width: var(--wm-bottomsheet-border-width-bottom); 
+    border-left-width: var(--wm-bottomsheet-border-width-left); 
+    border-right-width: var(--wm-bottomsheet-border-width-right); 
+    border-color: var(--wm-bottomsheet-border-color);
+    border-style: var(--wm-bottomsheet-border-style);
 }
 
 .app-bottomsheet-draghandle-container {

package/src/styles/mobile/components/basic/button.less

@@ -9,7 +9,6 @@
     border-radius: var(--wm-btn-radius);
     ripple-color: var(--wm-btn-ripple-color);
     box-shadow: var(--wm-btn-shadow);
-    align-self: flex-start;
     flex-direction: column;
     overflow: hidden;
     min-width: var(--wm-btn-min-width);
@@ -51,16 +50,20 @@
     padding-right: var(--wm-space-0);
     padding-top: var(--wm-space-0);
     padding-bottom: var(--wm-space-0);
-    min-width: var(--wm-btn-icon-size);
-    width: var(--wm-btn-icon-size);
-    height: var(--wm-btn-icon-size);
-    font-size: var(--wm-btn-icon-size);
 }
 
 .app-button-icon .app-icon{
     color: var(--wm-btn-color);
 }
 
+.app-button-icon .app-icon-shape {
+    min-width: var(--wm-btn-icon-size);
+    width: var(--wm-btn-icon-size);
+    height: var(--wm-btn-icon-size);
+    font-size: var(--wm-btn-icon-size);
+    line-height: var(--wm-btn-icon-size);
+}
+
 .app-button-skeleton {
     width: var(--wm-btn-skeleton-width);
     height: var(--wm-btn-skeleton-height);
@@ -70,4 +73,13 @@
     width: 100%;
 }
 
+.app-button-disabled .app-button {
+    color: var(--wm-btn-color);
+    background-color: var(--wm-btn-background);
+    border-color: var(--wm-btn-border-color);
+    opacity: var(--wm-btn-opacity);
+    cursor: var(--wm-btn-cursor);
+    box-shadow: var(--wm-btn-shadow);
+}
+
 @import (optional) url('../variables/button.variant.less');

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

@@ -1,6 +1,21 @@
 .app-label {
-    margin: var(--wm-label-margin);
-    padding: var(--wm-label-padding);
+    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);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .app-label-text {
@@ -16,13 +31,13 @@
 
 .p.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
     color: var(--wm-label-color);
 }
 
 .media-heading.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
     color: var(--wm-label-color);
 }
 
@@ -31,7 +46,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h2.app-label-text {
@@ -39,7 +55,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h3.app-label-text {
@@ -47,7 +64,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h4.app-label-text {
@@ -55,7 +73,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h5.app-label-text {
@@ -63,7 +82,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h6.app-label-text {
@@ -71,37 +91,137 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-primary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-primary .app-label-text {
-    color: var(--wm-label-color);    
+    color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-secondary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-secondary .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-success .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-success .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-warning .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-warning .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-danger .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-danger .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-info .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-info .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-muted .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-muted .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
+//no problem
 .label-primary .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
@@ -114,6 +234,8 @@
 .label-primary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-secondary .app-label {
@@ -128,23 +250,28 @@
 .label-secondary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-success .app-label{
+.label-success .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
     padding-left: var(--wm-label-padding-left);
     padding-right: var(--wm-label-padding-right);
     border-radius: var(--wm-label-border-radius);
+
 }
 
 .label-success .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-warning .app-label{
+.label-warning .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -156,9 +283,11 @@
 .label-warning .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-danger .app-label{
+.label-danger .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -170,9 +299,11 @@
 .label-danger .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-info .app-label{
+.label-info .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -184,6 +315,8 @@
 .label-info .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-muted .app-label {
@@ -198,6 +331,8 @@
 .label-muted .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 @import (optional) url('../variables/label.variant.less');

package/src/styles/mobile/components/basic/lottie.less

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

package/src/styles/mobile/components/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/styles/mobile/components/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/styles/mobile/components/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/styles/mobile/components/container/tabs.less

@@ -1,6 +1,7 @@
 @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);