npm - @wavemaker/foundation-css - Versions diffs - 11.14.3-rc.6401 → 11.14.4-rc.647538 - Mend

@wavemaker/foundation-css 11.14.3-rc.6401 → 11.14.4-rc.647538

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/src/styles/mobile/components/navigation/menu.less CHANGED Viewed

@@ -1,9 +1,6 @@
 .app-menu {
   background-color: var(--wm-dropdown-menu-background);
-  border-radius: var(--wm-dropdown-menu-border-radius);
-  border-width: var(--wm-dropdown-menu-border-width);
-  border-color: var(--wm-dropdown-menu-border-color);
 }
 .app-menu-link-text {
@@ -19,8 +16,7 @@
 }
 .app-menu-trigger .app-anchor-icon .app-icon-shape  {
-  font-size: var(--wm-dropdown-menu-caret-size);
-  color: var(--wm-dropdown-menu-caret-color);
+  font-size: var(--wm-dropdown-menu-icon-size);
 }
 .app-menu-content {

package/src/styles/mobile/components/navigation/popover.less CHANGED Viewed

@@ -29,34 +29,8 @@
     line-height: var(--wm-popover-header-line-height);
     letter-spacing: var(--wm-popover-header-letter-spacing);
     color: var(--wm-popover-header-color);
-    background-color: var(--wm-popover-header-background-color);
 }
 //We don't have the support to add inline content for the popover body.
 //Content can only be added using partials, so there are no tokens available for the popover body.
-.app-popover-link .app-anchor-icon .app-icon {
-    min-width: var(--wm-popover-link-icon-size);
-    width: var(--wm-popover-link-icon-size);
-    height: var(--wm-popover-link-icon-size);
-}
-.app-popover-link .app-anchor-icon .app-icon-shape {
-    color: var(--wm-popover-link-icon-color);
-    font-size: var(--wm-popover-link-icon-size);
-    min-width: var(--wm-popover-link-icon-size);
-    width: var(--wm-popover-link-icon-size);
-    height: var(--wm-popover-link-icon-size);
-    line-height: var(--wm-popover-link-icon-size);
-}
-.app-popover-link .app-anchor-text {
-    color: var(--wm-popover-link-text-color);
-    padding-left: var(--wm-space-2);
-    padding-right: var(--wm-space-2);
-    font-size: var(--wm-popover-link-font-size);
-    font-family: var(--wm-popover-link-font-family);
-    font-weight: var(--wm-popover-link-font-weight);
-    line-height: var(--wm-popover-link-line-height);
-    letter-spacing: var(--wm-popover-link-letter-spacing);
-}

package/src/styles/mobile/components/page/page-content.less CHANGED Viewed

@@ -1,4 +1,4 @@
 .app-page-content {
     background-color: var(--wm-page-content-background);
-    padding: var(--wm-page-content-padding);
 }

package/src/styles/mobile/components/tokens.light.css CHANGED Viewed

@@ -11,8 +11,6 @@
   --wm-accordion-badge-border-width: 2px;
   --wm-accordion-badge-border-color: #cccccc;
   --wm-accordion-badge-background-color: transparent;
-  --wm-accordion-title-icon-color: #333333;
-  --wm-accordion-title-icon-size: 18px;
   --wm-anchor-text-transform: none;
   --wm-anchor-text-decoration: none;
   --wm-audio-width: 300px;
@@ -102,9 +100,6 @@
   --wm-chips-list-height: 70px;
   --wm-chips-item-height: 32px;
   --wm-container-border-color: transparent;
-  --wm-container-background-color: transparent;
-  --wm-container-box-shadow: none;
-  --wm-container-opacity: 1;
   --wm-currency-inputgroup-addon-width: 40px;
   --wm-datetime-cancel-button-background: transparent;
   --wm-datetime-button-ripple-color: transparent;
@@ -113,11 +108,10 @@
   --wm-dropdown-menu-text-decoration: none;
   --wm-dropdown-menu-content-width: 220px;
   --wm-dropdown-menu-content-background: #fff;
-  --wm-dropdown-menu-border-width: 0;
   --wm-fileupload-text-align: center;
   --wm-fileupload-ripple-color: transparent;
-  --wm-form-controls-opacity: 1px;
-  --wm-form-controls-min-height: 48px;
+  --wm-form-input-opacity: 1;
+  --wm-form-input-min-height: 48px;
   --wm-grid-layout-width: 100%;
   --wm-icon-size: 24px;
   --wm-icon-size-xs: 12px;
@@ -140,10 +134,16 @@
   --wm-left-panel-min-height: 100%;
   --wm-left-panel-background: #ffffff;
   --wm-left-panel-max-width: 360px;
+  --wm-list-listicon-margin-top: 10px;
+  --wm-list-group-heading-background-color: transparent;
+  --wm-list-group-heading-line-height: 40px;
   --wm-list-heading-margin-bottom: 6px;
   --wm-list-heading-background-color: transparent;
-  --wm-list-item-border-radius: 6px;
+  --wm-list-empty-message-line-height: 18px;
+  --wm-list-on-demand-messsage-width: 100%;
   --wm-list-item-min-height: 56px;
+  --wm-list-item-border-radius: 6px;
+  --wm-list-item-border-color: transparent;
   --wm-lottie-content-width: 100%;
   --wm-message-container-border-radius: 6px;
   --wm-message-icon-size: 20px;
@@ -162,15 +162,6 @@
   --wm-nav-item-background: #ffffff;
   --wm-nav-item-min-height: 44px;
   --wm-nav-item-color: #151420;
-  --wm-navbar-height: 80px;
-  --wm-navbar-image-width: 32px;
-  --wm-navbar-image-height: 32px;
-  --wm-navbar-badge-background-color: transparent;
-  --wm-navbar-badge-margin-left: 4px;
-  --wm-navbar-anchor-padding-right: 0px;
-  --wm-navbar-anchor-padding-left: 0px;
-  --wm-navbar-anchor-padding-top: 0px;
-  --wm-navbar-anchor-padding-bottom: 0px;
   --wm-app-font-smoothing: antialiased;
   --wm-app-text-transform: none;
   --wm-app-margin: 0;
@@ -216,13 +207,12 @@
   --wm-pagination-pagecount-input-height: 32px;
   --wm-pagination-pagecount-input-width: 48px;
   --wm-horizontal-page-slider-anchor-width: 32px;
+  --wm-panel-help-message-background: #fffed0;
   --wm-picture-background: transparent;
   --wm-popover-position: absolute;
   --wm-popover-width: 100%;
   --wm-popover-min-height: 240px;
   --wm-progress-bar-height: 16px;
-  --wm-progress-circle-width: 150px;
-  --wm-progress-circle-height: 150px;
   --wm-radiobutton-size: 20px;
   --wm-radiobutton-indicator-size: 16px;
   --wm-radiobutton-color: transparent;
@@ -255,7 +245,6 @@
   --wm-search-dropdown-width: 90%;
   --wm-search-dropdown-border-color: transparent;
   --wm-search-dropdown-border-width: 0;
-  --wm-search-btn-ripple-color: rgba(255, 255, 255, 0.08);
   --wm-search-data-complete-background: transparent;
   --wm-search-item-separator-width: 0;
   --wm-select-arrow-button-height: 12px;
@@ -282,7 +271,7 @@
   --wm-tabs-item-icon-width: 1;
   --wm-tabs-min-height: 240px;
   --wm-textarea-height: 86px;
-  --wm-tile-border-width: 1px;
+  --wm-tile-border-width: 1;
   --wm-tile-border-color: transparent;
   --wm-toast-container-width: 344px;
   --wm-toggle-width: 52px;
@@ -302,9 +291,16 @@
   --wm-wizard-step-indicator-size: 33px;
   --wm-wizard-step-indicator-background-color: transparent;
   --wm-wizard-step-connector-width: 1px;
+  --wm-border-style-none: none;
   --wm-border-style-solid: solid;
   --wm-border-style-dotted: dotted;
   --wm-border-style-dashed: dashed;
+  --wm-border-style-double: double;
+  --wm-border-style-groove: groove;
+  --wm-border-style-ridge: ridge;
+  --wm-border-style-inset: inset;
+  --wm-border-style-outset: outset;
+  --wm-border-style-hidden: hidden;
   --wm-border-width-0: 0px;
   --wm-border-width-1: 1px;
   --wm-border-width-2: 2px;
@@ -667,12 +663,8 @@
   --wm-chips-item-letter-spacing: var(--wm-label-large-letter-spacing);
   --wm-chips-item-avatar-size: var(--wm-icon-size);
   --wm-chips-item-avatar-radius: var(--wm-radius-pill);
-  --wm-container-border-width: var(--wm-border-width-0);
   --wm-container-border-radius: var(--wm-radius-none);
-  --wm-container-padding-top: var(--wm-space-0);
-  --wm-container-padding-bottom: var(--wm-space-0);
-  --wm-container-padding-left: var(--wm-space-6);
-  --wm-container-padding-right: var(--wm-space-6);
+  --wm-container-border-width: var(--wm-border-width-0);
   --wm-datetime-cancel-button-text-color: var(--wm-color-on-surface);
   --wm-datetime-cancel-button-text-size: var(--wm-body-medium-font-size);
   --wm-datetime-selected-button-background: var(--wm-color-primary);
@@ -697,7 +689,6 @@
   --wm-dropdown-menu-text-padding-left: var(--wm-space-2);
   --wm-dropdown-menu-text-padding-right: var(--wm-space-3);
   --wm-dropdown-menu-content-border-radius: var(--wm-radius-xs);
-  --wm-dropdown-menu-caret-color: var(--wm-color-on-surface-variant);
   --wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
   --wm-dropdown-menu-icon-size: var(--wm-icon-size-md);
   --wm-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
@@ -708,8 +699,6 @@
   --wm-dropdown-menu-item-padding-left: var(--wm-space-4);
   --wm-dropdown-menu-item-padding-right: var(--wm-space-4);
   --wm-dropdown-menu-item-padding-top: var(--wm-space-3);
-  --wm-dropdown-menu-border-radius: var(--wm-radius-none);
-  --wm-dropdown-menu-border-color: var(--wm-color-on-surface-variant);
   --wm-fileupload-border-color: var(--wm-color-black);
   --wm-fileupload-border-width: var(--wm-border-width-base);
   --wm-fileupload-border-style: var(--wm-border-style-solid);
@@ -720,55 +709,54 @@
   --wm-fileupload-text-color: var(--wm-color-primary);
   --wm-fileupload-icon-font-size: var(--wm-body-large-font-size);
   --wm-fileupload-icon-color: var(--wm-color-primary);
-  --wm-form-controls-padding-vertical: var(--wm-space-2);
-  --wm-form-controls-padding-horizontal: var(--wm-space-2);
-  --wm-form-controls-border-color: var(--wm-color-outline);
-  --wm-form-controls-border-radius: var(--wm-radius-sm);
-  --wm-form-controls-border-width: var(--wm-border-width-base);
-  --wm-form-controls-placeholder-color: var(--wm-color-on-surface);
-  --wm-form-controls-background: var(--wm-color-outline-variant);
-  --wm-form-controls-color: var(--wm-color-black);
-  --wm-form-controls-label-color: var(--wm-color-on-surface);
-  --wm-form-controls-label-background: var(--wm-color-transparent);
-  --wm-form-controls-label-font-size: var(--wm-label-large-font-size);
-  --wm-form-controls-label-margin-vertical: var(--wm-space-1);
-  --wm-form-controls-label-margin-horizontal: var(--wm-space-1);
-  --wm-form-background: var(--wm-color-outline-variant);
-  --wm-form-padding: var(--wm-space-3);
-  --wm-form-margin: var(--wm-space-2);
-  --wm-form-border-radius: var(--wm-radius-sm);
-  --wm-form-border-width: var(--wm-border-width-base);
-  --wm-form-border-color: var(--wm-color-transparent);
-  --wm-form-header-padding-vertical: var(--wm-space-2);
-  --wm-form-header-padding-horizontal: var(--wm-space-2);
-  --wm-form-header-border-color: var(--wm-color-transparent);
-  --wm-form-header-border-radius: var(--wm-radius-sm);
-  --wm-form-header-border-width: var(--wm-border-width-base);
-  --wm-form-header-title-color: var(--wm-color-on-surface);
-  --wm-form-header-title-font-size: var(--wm-h4-font-size);
-  --wm-form-header-title-font-weight: var(--wm-font-weight-700);
-  --wm-form-header-title-font-family: var(--wm-font-family-brand);
-  --wm-form-header-title-margin-vertical: var(--wm-space-1);
-  --wm-form-header-title-margin-horizontal: var(--wm-space-1);
-  --wm-form-header-sub-title-color: var(--wm-color-on-surface-variant);
-  --wm-form-header-sub-title-font-size: var(--wm-h6-font-size);
-  --wm-form-header-sub-title-font-weight: var(--wm-font-weight-500);
-  --wm-form-header-sub-title-font-family: var(--wm-font-family-brand);
-  --wm-form-header-sub-title-margin-vertical: var(--wm-space-1);
-  --wm-form-header-sub-title-margin-horizontal: var(--wm-space-1);
-  --wm-form-header-background: var(--wm-color-transparent);
-  --wm-form-body-background: var(--wm-color-transparent);
-  --wm-form-body-padding-vertical: var(--wm-space-1);
-  --wm-form-body-padding-horizontal: var(--wm-space-1);
-  --wm-form-body-border-color: var(--wm-color-transparent);
-  --wm-form-body-border-radius: var(--wm-radius-sm);
-  --wm-form-body-border-width: var(--wm-border-width-base);
-  --wm-form-footer-background: var(--wm-color-transparent);
-  --wm-form-footer-border-color: var(--wm-color-transparent);
-  --wm-form-footer-border-radius: var(--wm-radius-sm);
-  --wm-form-footer-border-width: var(--wm-border-width-base);
-  --wm-form-footer-padding-vertical: var(--wm-space-1);
-  --wm-form-footer-padding-horizontal: var(--wm-space-1);
+  --wm-form-default-background: var(--wm-color-outline-variant);
+  --wm-form-default-padding: var(--wm-space-3);
+  --wm-form-default-margin: var(--wm-space-2);
+  --wm-form-default-border-radius: var(--wm-radius-sm);
+  --wm-form-default-border-width: var(--wm-border-width-base);
+  --wm-form-default-border-color: var(--wm-color-transparent);
+  --wm-form-default-header-padding-vertical: var(--wm-space-2);
+  --wm-form-default-header-padding-horizontal: var(--wm-space-2);
+  --wm-form-default-header-border-color: var(--wm-color-transparent);
+  --wm-form-default-header-border-radius: var(--wm-radius-sm);
+  --wm-form-default-header-border-width: var(--wm-border-width-base);
+  --wm-form-default-header-title-color: var(--wm-color-on-surface);
+  --wm-form-default-header-title-font-size: var(--wm-h4-font-size);
+  --wm-form-default-header-title-font-weight: var(--wm-font-weight-700);
+  --wm-form-default-header-title-font-family: var(--wm-font-family-brand);
+  --wm-form-default-header-title-margin-vertical: var(--wm-space-1);
+  --wm-form-default-header-title-margin-horizontal: var(--wm-space-1);
+  --wm-form-default-header-sub-title-color: var(--wm-color-on-surface-variant);
+  --wm-form-default-header-sub-title-font-size: var(--wm-h6-font-size);
+  --wm-form-default-header-sub-title-font-weight: var(--wm-font-weight-500);
+  --wm-form-default-header-sub-title-font-family: var(--wm-font-family-brand);
+  --wm-form-default-header-sub-title-margin-vertical: var(--wm-space-1);
+  --wm-form-default-header-sub-title-margin-horizontal: var(--wm-space-1);
+  --wm-form-default-header-background: var(--wm-color-transparent);
+  --wm-form-default-body-background: var(--wm-color-transparent);
+  --wm-form-default-body-padding-vertical: var(--wm-space-1);
+  --wm-form-default-body-padding-horizontal: var(--wm-space-1);
+  --wm-form-default-body-border-color: var(--wm-color-transparent);
+  --wm-form-default-body-border-radius: var(--wm-radius-sm);
+  --wm-form-default-body-border-width: var(--wm-border-width-base);
+  --wm-form-default-footer-background: var(--wm-color-transparent);
+  --wm-form-default-footer-border-color: var(--wm-color-transparent);
+  --wm-form-default-footer-border-radius: var(--wm-radius-sm);
+  --wm-form-default-footer-border-width: var(--wm-border-width-base);
+  --wm-form-default-footer-padding-vertical: var(--wm-space-1);
+  --wm-form-default-footer-padding-horizontal: var(--wm-space-1);
+  --wm-form-input-padding-vertical: var(--wm-space-2);
+  --wm-form-input-padding-horizontal: var(--wm-space-2);
+  --wm-form-input-border-color: var(--wm-color-outline);
+  --wm-form-input-border-radius: var(--wm-radius-sm);
+  --wm-form-input-border-width: var(--wm-border-width-base);
+  --wm-form-input-placeholder-color: var(--wm-color-on-surface);
+  --wm-form-input-background: var(--wm-color-outline-variant);
+  --wm-form-input-label-color: var(--wm-color-on-surface);
+  --wm-form-input-label-background: var(--wm-color-transparent);
+  --wm-form-input-label-font-size: var(--wm-label-large-font-size);
+  --wm-form-input-label-margin-vertical: var(--wm-space-1);
+  --wm-form-input-label-margin-horizontal: var(--wm-space-1);
   --wm-grid-layout-column-padding-top: var(--wm-space-2);
   --wm-grid-layout-column-padding-left: var(--wm-space-2);
   --wm-grid-layout-column-padding-right: var(--wm-space-2);
@@ -792,6 +780,16 @@
   --wm-label-small-font-weight: var(--wm-font-weight-500);
   --wm-left-panel-border-top-right-radius: var(--wm-radius-lg);
   --wm-left-panel-border-bottom-right-radius: var(--wm-radius-lg);
+  --wm-list-select-icon-font-size: var(--wm-body-medium-font-size);
+  --wm-list-select-icon-color: var(--wm-color-primary);
+  --wm-list-listicon-margin-right: var(--wm-space-2);
+  --wm-list-group-margin-bottom: var(--wm-space-4);
+  --wm-list-group-heading-font-size: var(--wm-body-large-font-size);
+  --wm-list-group-heading-padding-left: var(--wm-space-2);
+  --wm-list-group-heading-padding-right: var(--wm-space-2);
+  --wm-list-group-heading-font-family: var(--wm-font-family-plain);
+  --wm-list-loading-icon-font-size: var(--wm-space-4);
+  --wm-list-loading-icon-text-color: var(--wm-color-on-surface-variant);
   --wm-list-heading-padding: var(--wm-space-2);
   --wm-list-title-line-height: var(--wm-body-large-line-height);
   --wm-list-title-font-size: var(--wm-body-large-font-size);
@@ -801,10 +799,14 @@
   --wm-list-sub-heading-line-height: var(--wm-body-medium-line-height);
   --wm-list-sub-heading-color: var(--wm-color-on-surface);
   --wm-list-sub-heading-font-family: var(--wm-font-family-plain);
+  --wm-list-empty-message-font-size: var(--wm-body-large-font-size);
+  --wm-list-empty-message-color: var(--wm-color-on-surface);
+  --wm-list-on-demand-messsage-padding-vertical: var(--wm-space-2);
+  --wm-list-on-demand-messsage-text: var(--wm-color-on-surface);
+  --wm-list-item-background-color-active: var(--wm-color-surface-container-high);
   --wm-list-item-padding: var(--wm-space-1);
   --wm-list-item-header-background-color: var(--wm-color-surface-container-lowest);
-  --wm-list-select-icon-font-size: var(--wm-body-medium-font-size);
-  --wm-list-select-icon-color: var(--wm-color-primary);
+  --wm-list-item-header-color: var(--wm-color-on-surface);
   --wm-login-error-text-color: var(--wm-color-on-error);
   --wm-login-error-background-color: var(--wm-color-error);
   --wm-login-error-border-color: var(--wm-color-error);
@@ -852,30 +854,7 @@
   --wm-nav-item-padding-right: var(--wm-space-3);
   --wm-nav-item-padding-top: var(--wm-space-3);
   --wm-nav-item-padding-bottom: var(--wm-space-3);
-  --wm-navbar-background-color: var(--wm-color-surface);
-  --wm-navbar-padding-left: var(--wm-space-3);
-  --wm-navbar-padding-right: var(--wm-space-3);
-  --wm-navbar-padding-top: var(--wm-space-3);
-  --wm-navbar-padding-bottom: var(--wm-space-3);
-  --wm-navbar-left-icon-color: var(--wm-color-on-surface);
-  --wm-navbar-left-icon-size: var(--wm-icon-size);
-  --wm-navbar-back-icon-color: var(--wm-color-on-surface);
-  --wm-navbar-back-icon-size: var(--wm-icon-size);
-  --wm-navbar-menu-icon-color: var(--wm-color-on-surface);
-  --wm-navbar-menu-icon-size: var(--wm-icon-size);
-  --wm-navbar-popover-icon-color: var(--wm-color-on-surface);
-  --wm-navbar-popover-icon-size: var(--wm-icon-size);
-  --wm-navbar-content-color: var(--wm-color-on-surface);
-  --wm-navbar-content-font-size: var(--wm-body-large-font-size);
-  --wm-navbar-badge-color: var(--wm-color-primary);
-  --wm-navbar-anchor-text-color: var(--wm-color-on-surface);
-  --wm-navbar-anchor-text-font-size: var(--wm-body-large-font-size);
-  --wm-navbar-anchor-icon-color: var(--wm-color-on-surface);
-  --wm-navbar-anchor-icon-size: var(--wm-icon-size);
-  --wm-navbar-button-color: var(--wm-color-on-surface);
-  --wm-navbar-button-font-size: var(--wm-body-large-font-size);
-  --wm-page-content-background: var(--wm-color-surface-variant);
-  --wm-page-content-padding: var(--wm-space-0);
+  --wm-page-content-background: var(--wm-color-surface);
   --wm-app-font-size: var(--wm-body-medium-font-size);
   --wm-app-line-height: var(--wm-body-medium-line-height);
   --wm-app-letter-spacing: var(--wm-body-medium-letter-spacing);
@@ -999,8 +978,6 @@
   --wm-horizontal-page-slider-anchor-icon-size: var(--wm-icon-size-sm);
   --wm-panel-background: var(--wm-color-surface);
   --wm-panel-radius: var(--wm-radius-xs);
-  --wm-panel-border-color: var(--wm-color-transparent);
-  --wm-panel-border-width: var(--wm-border-width-base);
   --wm-panel-heading-gap: var(--wm-space-2);
   --wm-panel-heading-padding-block: var(--wm-space-4);
   --wm-panel-heading-padding-inline: var(--wm-space-4);
@@ -1015,7 +992,10 @@
   --wm-panel-description-color: var(--wm-color-on-surface-variant);
   --wm-panel-actions-gap: var(--wm-space-2);
   --wm-panel-content-padding: var(--wm-space-4);
-  --wm-panel-footer-background: var(--wm-color-surface);
+  --wm-panel-help-message-header-background: var(--wm-color-surface);
+  --wm-panel-help-message-border-color: var(--wm-color-outline-variant);
+  --wm-panel-help-message-border-width: var(--wm-border-width-base);
+  --wm-panel-help-message-padding: var(--wm-space-2);
   --wm-panel-footer-padding: var(--wm-space-4);
   --wm-panel-footer-border-color: var(--wm-color-outline-variant);
   --wm-panel-footer-border-width: var(--wm-border-width-base);
@@ -1045,13 +1025,6 @@
   --wm-popover-header-font-size: var(--wm-h5-font-size);
   --wm-popover-header-line-height: var(--wm-h5-line-height);
   --wm-popover-header-letter-spacing: var(--wm-h5-letter-spacing);
-  --wm-popover-header-background-color: var(--wm-color-on-surface);
-  --wm-popover-link-text-color: var(--wm-color-secondary);
-  --wm-popover-link-font-size: var(--wm-body-medium-font-size);
-  --wm-popover-link-line-height: var(--wm-body-medium-line-height);
-  --wm-popover-link-letter-spacing: var(--wm-body-medium-letter-spacing);
-  --wm-popover-link-icon-size: var(--wm-icon-size);
-  --wm-popover-link-icon-color: var(--wm-color-secondary);
   --wm-progress-bar-background-inactive: var(--wm-color-primary-container);
   --wm-progress-bar-background-active: var(--wm-color-primary);
   --wm-progress-bar-radius: var(--wm-radius-lg);
@@ -1066,8 +1039,6 @@
   --wm-progress-circle-sub-title-font-family: var(--wm-font-family-brand);
   --wm-progress-circle-sub-title-font-size: var(--wm-body-small-font-size);
   --wm-progress-circle-sub-title-color: var(--wm-color-scrim);
-  --wm-progress-circle-stroke-inactive: var(--wm-color-primary-container);
-  --wm-progress-circle-stroke-active: var(--wm-color-primary);
   --wm-radiobutton-gap: var(--wm-space-1);
   --wm-radiobutton-label-font-size: var(--wm-body-large-font-size);
   --wm-radiobutton-label-line-height: var(--wm-body-large-line-height);
@@ -1183,6 +1154,7 @@
   --wm-search-btn-background-color: var(--wm-color-surface);
   --wm-search-btn-icon-color: var(--wm-color-on-surface);
   --wm-search-btn-icon-size: var(--wm-icon-size);
+  --wm-search-btn-ripple-color: var(--wm-color-surface-container);
   --wm-search-placeholder-text-color: var(--wm-color-outline);
   --wm-search-data-complete-padding-top: var(--wm-space-2);
   --wm-search-data-complete-padding-bottom: var(--wm-space-2);
@@ -1249,20 +1221,21 @@
   --wm-tabbar-text-font-weight: var(--wm-font-weight-400);
   --wm-tabbar-text-color: var(--wm-color-on-surface-variant);
   --wm-tabbar-text-margin-top: var(--wm-space-rule);
-  --wm-tabs-background: var(--wm-color-surface);
+  --wm-tabs-background: var(--wm-color-primary-container);
   --wm-tabs-border-radius: var(--wm-radius-sm);
   --wm-tabs-border-width: var(--wm-border-width-1);
   --wm-tabs-heading-background: var(--wm-color-surface);
   --wm-tabs-heading-border-radius: var(--wm-radius-sm);
-  --wm-tabs-heading-border-color: var(--wm-color-surface);
+  --wm-tabs-heading-border-color: var(--wm-color-primary-container);
   --wm-tabs-heading-border-width: var(--wm-border-width-1);
   --wm-tabs-item-heading-padding: var(--wm-space-2);
   --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
   --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
-  --wm-tabs-item-heading-background: var(--wm-color-surface);
+  --wm-tabs-item-heading-background: var(--wm-color-primary-container);
   --wm-tabs-item-heading-text: var(--wm-color-outline);
   --wm-tabs-item-heading-icon: var(--wm-color-outline);
   --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
+  --wm-tabs-item-icon-color: var(--wm-color-outline);
   --wm-tabs-item-icon-font-size: var(--wm-h6-font-size);
   --wm-tile-border-radius: var(--wm-radius-sm);
   --wm-tile-padding-top: var(--wm-space-4);
@@ -1423,18 +1396,19 @@
   --wm-datetime-selected-text-font-weight: var(--wm-body-medium-font-weight);
   --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
   --wm-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
-  --wm-form-controls-border-style: var(--wm-border-style-base);
-  --wm-form-controls-label-font-weight: var(--wm-label-large-font-weight);
-  --wm-form-controls-label-font-family: var(--wm-label-large-font-family);
-  --wm-form-border-style: var(--wm-border-style-base);
-  --wm-form-header-border-style: var(--wm-border-style-base);
-  --wm-form-body-border-style: var(--wm-border-style-base);
-  --wm-form-footer-border-style: var(--wm-border-style-base);
+  --wm-form-default-border-style: var(--wm-border-style-base);
+  --wm-form-default-header-border-style: var(--wm-border-style-base);
+  --wm-form-default-body-border-style: var(--wm-border-style-base);
+  --wm-form-default-footer-border-style: var(--wm-border-style-base);
+  --wm-form-input-border-style: var(--wm-border-style-base);
+  --wm-form-input-label-font-weight: var(--wm-label-large-font-weight);
+  --wm-form-input-label-font-family: var(--wm-label-large-font-family);
   --wm-label-font-weight: var(--wm-body-medium-font-weight);
   --wm-label-font-family: var(--wm-body-medium-font-family);
   --wm-left-panel-elevation: var(--wm-elevation-shadow-1);
   --wm-list-title-font-weight: var(--wm-body-large-font-weight);
   --wm-list-sub-heading-font-weight: var(--wm-body-medium-font-weight);
+  --wm-list-item-border-style: var(--wm-border-style-base);
   --wm-message-container-border-style: var(--wm-border-style-base);
   --wm-modal-header-border-style: var(--wm-border-style-base);
   --wm-modal-title-font-family: var(--wm-h3-font-family);
@@ -1442,12 +1416,6 @@
   --wm-modal-icon-font-weight: var(--wm-h4-font-weight);
   --wm-nav-item-font-family: var(--wm-label-large-font-family);
   --wm-nav-item-font-weight: var(--wm-label-large-font-weight);
-  --wm-navbar-content-font-family: var(--wm-body-large-font-family);
-  --wm-navbar-content-font-weight: var(--wm-body-large-font-weight);
-  --wm-navbar-anchor-text-font-family: var(--wm-body-large-font-family);
-  --wm-navbar-anchor-text-font-weight: var(--wm-body-large-font-weight);
-  --wm-navbar-button-font-family: var(--wm-body-large-font-family);
-  --wm-navbar-button-font-weight: var(--wm-body-large-font-weight);
   --wm-app-font-family: var(--wm-body-medium-font-family);
   --wm-app-font-weight: var(--wm-body-medium-font-weight);
   --wm-aside-nav-background: var(--wm-aside-panel-background);
@@ -1476,13 +1444,12 @@
   --wm-panel-heading-font-weight: var(--wm-h4-font-weight);
   --wm-panel-description-font-family: var(--wm-body-medium-font-family);
   --wm-panel-description-font-weight: var(--wm-body-medium-font-weight);
+  --wm-panel-help-message-border-style: var(--wm-border-style-base);
   --wm-panel-footer-border-style: var(--wm-border-style-base);
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-popover-header-font-family: var(--wm-h5-font-family);
   --wm-popover-header-font-weight: var(--wm-h5-font-weight);
-  --wm-popover-link-font-family: var(--wm-body-medium-font-family);
-  --wm-popover-link-font-weight: var(--wm-body-medium-font-weight);
   --wm-radiobutton-label-font-family: var(--wm-body-large-font-family);
   --wm-radiobutton-label-font-weight: var(--wm-body-large-font-weight);
   --wm-radiobutton-title-font-family: var(--wm-body-large-font-family);

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

@@ -1,14 +1,8 @@
-.app-accordion-active-header,
-.app-accordion-active-header-title,
-.app-accordion-header-collapse-icon,
-.app-accordion-active-header-badge,
-.app-accordion-active-title-icon {
+.app-accordion-active {
   --wm-accordion-header-border-color: var(--wm-color-primary);
   --wm-accordion-header-background-color: var(--wm-color-primary);
   --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);
   --wm-accordion-badge-border-color: var(--wm-color-white);
-  --wm-accordion-badge-background-color: transparent;
   --wm-accordion-badge-color: var(--wm-color-white);
 }

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

@@ -1,4 +1,4 @@
-.app-button-disabled {
+.app-button-disabled-root {
   --wm-btn-color: var(--wm-color-on-surface);
   --wm-btn-background: var(--wm-color-surface-container-highest);
   --wm-btn-border-color: var(--wm-color-surface-container-highest);

package/src/styles/mobile/components/variables/checkbox.variant.less CHANGED Viewed

@@ -1,11 +1,10 @@
-.app-checkbox-checkicon,
-.app-checkbox-selected-label {
+.app-checkbox-checkicon {
   --wm-checkbox-background-color: var(--wm-color-primary);
   --wm-checkbox-border-color: var(--wm-color-primary);
   --wm-checkbox-icon-color: var(--wm-color-on-primary);
   --wm-checkbox-label-font-size: var(--wm-body-large-font-size);
   --wm-checkbox-label-font-family: var(--wm-body-large-font-family);
-  --wm-checkbox-label-color: var(--wm-color-on-surface-variant);
+  --wm-checkbox-label-color: var(--wm-color-on-primary);
 }
 .app-checkbox-disabled {

package/src/styles/mobile/components/variables/checkboxset.variant.less CHANGED Viewed

@@ -1,5 +1,4 @@
-.app-checkboxset-checkicon,
-.app-checkboxset-selected-label {
+.app-checkboxset-checkicon {
   --wm-checkboxset-background-color: var(--wm-color-primary);
   --wm-checkboxset-border-color: var(--wm-color-primary);
   --wm-checkboxset-icon-color: var(--wm-color-on-primary);
@@ -11,8 +10,6 @@
 .app-checkboxset-disabled {
   --wm-checkboxset-opacity: 0.6;
-  --wm-checkboxset-border-width: 2px;
-  --wm-checkboxset-border-radius: var(--wm-radius-xxs);
   --wm-checkboxset-border-color: var(--wm-color-on-surface-variant);
   --wm-checkboxset-label-color: var(--wm-color-on-surface-variant);
 }

package/src/styles/mobile/components/variables/chips.variant.less CHANGED Viewed

@@ -3,8 +3,7 @@
   --wm-chips-pointer-events: none;
 }
-.app-chips-active-item,
-.app-chips-active-item-text {
+.app-chips-active {
   --wm-chips-color: var(--wm-color-on-surface-variant);
   --wm-chips-background-color: var(--wm-color-secondary-container);
   --wm-chips-item-border-color: var(--wm-color-secondary-container);

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

@@ -1,21 +1,21 @@
 .app-default-container {
-  --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-0);
   --wm-container-border-color: transparent;
   --wm-container-border-radius: var(--wm-radius-none);
+  --wm-container-border-width: var(--wm-border-width-0);
+  --wm-container-border-style: var(--wm-border-style-base);
 }
 .app-outlined-container {
-  --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-base);
   --wm-container-border-color: var(--wm-color-outline-variant);
+  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-style: var(--wm-border-style-base);
   --wm-container-border-radius: 1px;
 }
 .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: var(--wm-border-width-base);
   --wm-container-border-radius: var(--wm-radius-sm);
+  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-style: var(--wm-border-style-base);
 }

package/src/styles/mobile/components/variables/form-input.variant.less ADDED Viewed

@@ -0,0 +1,14 @@
+.app-input-focused {
+  --wm-form-input-border-color: var(--wm-color-primary);
+  --wm-form-input-border-width: var(--wm-border-width-base);
+  --wm-form-input-background: var(--wm-color-on-primary);
+  --wm-form-input-color: var(--wm-color-on-primary);
+}
+.app-input-disabled {
+  --wm-form-input-border-color: var(--wm-color-shadow);
+  --wm-form-input-border-width: var(--wm-border-width-base);
+  --wm-form-input-background: var(--wm-color-surface-dim);
+  --wm-form-input-color: var(--wm-color-scrim);
+  --wm-form-input-opacity: 0.67;
+}

package/src/styles/mobile/components/variables/radioset.variant.less CHANGED Viewed

@@ -1,5 +1,4 @@
-.app-radioset-checked-icon,
-.app-radioset-selected-label {
+.app-radioset-checked-icon {
   --wm-radiobutton-label-color: var(--wm-color-on-surface);
   --wm-radiobutton-color: var(--wm-color-secondary);
   --wm-radiobutton-border-color: var(--wm-color-secondary);

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

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

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

@@ -1,10 +1,5 @@
-.app-tabheader-active-item,
-.app-tabheader-active-item-text,
-.app-tabheader-active-item-icon,
-.app-tabheader-active-indicator {
-  --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);
+.app-tabheader-active {
+  --wm-tabs-item-heading-background: var(--wm-color-primary-container);
   --wm-tabs-item-heading-text: var(--wm-color-primary);
   --wm-tabs-item-heading-icon: var(--wm-color-primary);
 }