@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/styles/mobile/components/data/form.less

@@ -0,0 +1,394 @@
+
+@import (optional) url('../variables/form-wrapper.variant.less');
+@import (optional) url('../variables/form-controls.variant.less');
+
+.app-form {
+    background-color: var(--wm-form-background);
+    padding: var(--wm-form-padding);
+    border-radius: var(--wm-form-border-radius);
+    border-width: var(--wm-form-border-width);
+    border-style: var(--wm-form-border-style);
+    border-color: var(--wm-form-border-color);
+}
+
+
+.app-form-header {
+    padding-top: var(--wm-form-header-padding-vertical);
+    padding-bottom: var(--wm-form-header-padding-vertical);
+    padding-left: var(--wm-form-header-padding-horizontal);
+    padding-right: var(--wm-form-header-padding-horizontal);
+    border-radius: var(--wm-form-header-border-radius);
+    border-color: var(--wm-form-header-border-color);
+    border-style: var(--wm-form-header-border-style);
+    border-width: var(--wm-form-header-border-width);
+    background-color: var(--wm-form-header-background);
+    border-bottom-width: var(--wm-form-header-border-width);
+}
+
+.app-form-title {
+    color: var(--wm-form-header-title-color);
+    font-size: var(--wm-form-header-title-font-size);
+    font-weight: var(--wm-form-header-title-font-weight);
+    font-family: var(--wm-form-header-title-font-family);
+    margin-top: var(--wm-form-header-title-margin-vertical);
+    margin-bottom: var(--wm-form-header-title-margin-vertical);
+    margin-left: var(--wm-form-header-title-margin-horizontal);
+    margin-right: var(--wm-form-header-title-margin-horizontal);
+}
+
+.app-form-sub-title {
+    color: var(--wm-form-header-sub-title-color);
+    font-size: var(--wm-form-header-sub-title-font-size);
+    font-weight: var(--wm-form-header-sub-title-font-weight);
+    font-family: var(--wm-form-header-sub-title-font-family);
+    margin-top: var(--wm-form-header-sub-title-margin-vertical);
+    margin-bottom: var(--wm-form-header-sub-title-margin-vertical);
+    margin-left: var(--wm-form-header-sub-title-margin-horizontal);
+    margin-right: var(--wm-form-header-sub-title-margin-horizontal);
+}
+
+
+.app-form-body{
+    padding-left: var(--wm-form-body-padding-horizontal);
+    padding-right: var(--wm-form-body-padding-horizontal);
+    padding-top: var(--wm-form-body-padding-vertical);
+    padding-bottom: var(--wm-form-body-padding-vertical);
+    border-width: var(--wm-form-body-border-width);
+    border-color: var(--wm-form-body-border-color);
+    border-radius: var(--wm-form-body-border-radius);
+    background-color: var(--wm-form-body-background);
+    border-style: var(--wm-form-body-border-style);
+}
+
+.app-form-field {
+    min-height: var(--wm-form-field-height);  // hardcoded example
+    // min-height: ~"calc(var(--wm-form-controls-min-height) + var(--wm-form-error-font-size) + var(--wm-form-error-padding-vertical) + 10px)";
+
+    margin-left: var(--wm-form-field-margin-horizontal);
+    margin-right: var(--wm-form-field-margin-horizontal);
+    margin-top: var(--wm-form-field-margin-vertical);
+    margin-bottom: var(--wm-form-field-margin-vertical);
+    padding-left: var(--wm-form-field-padding-horizontal);
+    padding-right: var(--wm-form-field-padding-horizontal);
+    padding-top: var(--wm-form-field-padding-vertical);
+    padding-bottom: var(--wm-form-field-padding-vertical);
+}
+
+.form-label.app-label-text {
+    color: var(--wm-form-controls-label-color);
+    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);
+    margin-right: var(--wm-form-controls-label-margin-horizontal);
+}
+
+.app-text-place-holder-text{
+    color: var(--wm-form-controls-placeholder-color);
+}
+.app-textarea-placeholder{
+    color: var(--wm-form-controls-placeholder-color);
+}
+.app-number-placeholer{
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.app-date-place-holder-text{
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.app-datetime-place-holder-text{
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.app-time-place-holder-text{
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.app-currency-placeholder {
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.app-select-placeholderText{
+    color: var(--wm-form-controls-placeholder-color);
+}
+
+.control-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);
+  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);
+  margin-right: var(--wm-form-controls-label-margin-horizontal);
+}
+.app-form-field-error-msg {
+    color: var(--wm-form-error-color);
+    font-size: var(--wm-form-error-font-size);
+    padding-top: var(--wm-form-error-padding-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: var(--wm-form-controls-padding);
+    border-style: var(--wm-form-controls-border-style);
+    border-width: var(--wm-form-controls-border-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-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);
+}
+
+.app-input-focused {
+    min-height: var(--wm-form-controls-min-height);
+    padding: var(--wm-form-controls-padding);
+    border-style: var(--wm-form-controls-border-style);
+    border-width: var(--wm-form-controls-border-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: var(--wm-form-controls-padding);
+    border-style: var(--wm-form-controls-border-style);
+    border-width: var(--wm-form-controls-border-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: var(--wm-form-controls-padding);
+    border-style: var(--wm-form-controls-border-style);
+    border-width: var(--wm-form-controls-border-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 {
+    // color: red;
+    // background-color: #FFFFFF;
+    // padding: 4px;
+}
+.app-input.activeFloatingLabel {
+    // color: green;
+}
+.app-text-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-text-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-textarea-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-textarea-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-date-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-date-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-time-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-time-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-datetime-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-datetime-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+//date, time, datetime floating label class is .app-text-with-label .app-text-flotaing-label
+//no floating label for select and select locale
+
+.app-form-footer{
+    padding-left: var(--wm-form-footer-padding-horizontal);
+    padding-right: var(--wm-form-footer-padding-horizontal);
+    padding-top: var(--wm-form-footer-padding-vertical);
+    padding-bottom: var(--wm-form-footer-padding-vertical);
+    border-width: var(--wm-form-footer-border-width);
+    border-color: var(--wm-form-footer-border-color);
+    border-radius: var(--wm-form-footer-border-radius);
+    background-color: var(--wm-form-footer-background);
+    border-style: var(--wm-form-footer-border-style);
+    border-top-width: var(--wm-form-footer-border-width);
+}
+
+.app-form-header{
+    border-style: var(--wm-form-header-border-style);
+    background-color: var(--wm-form-header-background);
+    border-width: var(--wm-form-header-border-width);
+    border-radius: var(--wm-form-header-border-radius);
+    border-color: var(--wm-form-header-border-color);
+    padding-left: var(--wm-form-header-padding-horizontal);
+    padding-right: var(--wm-form-header-padding-horizontal);
+    padding-top: var(--wm-form-header-padding-vertical);
+    padding-bottom: var(--wm-form-header-padding-vertical);
+}
+
+.app-currency{
+    border-width: var(--wm-space-0);
+}

package/src/styles/mobile/components/data/list/list-action-template.less

@@ -0,0 +1,6 @@
+
+.app-list-action-template {
+}
+
+.app-list-action-template-text {
+}

package/src/styles/mobile/components/data/list/list-template.less

@@ -0,0 +1,6 @@
+
+.app-list-template {
+}
+
+.app-list-template-skeleton {
+}

package/src/styles/mobile/components/data/list.less

@@ -0,0 +1,20 @@
+.app-list {
+  border-style: var(--wm-list-border-style);
+  background-color: var(--wm-list-background-color);
+  padding: var(--wm-list-padding);
+  border-radius: var(--wm-list-border-radius);
+  border-color: var(--wm-list-border-color);
+  border-width: var(--wm-list-border-width);
+}
+
+
+.app-list-template {
+    background-color: var(--wm-list-template-background-color);
+    padding: var(--wm-list-template-padding);
+    min-height: var(--wm-list-template-min-height);
+    border-radius: var(--wm-list-template-border-radius);
+    border-color: var(--wm-list-template-border-color);
+    border-style: var(--wm-list-template-border-style);
+    border-width: var(--wm-list-template-border-width);
+    box-shadow: var(--wm-list-template-box-shadow);
+}

package/src/styles/mobile/components/device/barcodescanner.less

@@ -0,0 +1,25 @@
+.app-barcodescanner {
+    background-color: var(--wm-barcodescanner-background);
+    padding: var(--wm-barcodescanner-padding);
+    min-height: var(--wm-barcodescanner-min-height);
+    border-width: var(--wm-barcodescanner-border-width);
+    border-color: var(--wm-barcodescanner-border-color);
+    border-style: var(--wm-barcodescanner-border-style);
+    border-radius: var(--wm-barcodescanner-border-radius);
+    min-width: var(--wm-barcodescanner-min-width);
+    ripple-color: var(--wm-barcodescanner-ripple-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--wm-spacer-2);
+}
+.app-barcodescanner-text {
+    color: var(--wm-barcodescanner-text-color);
+    font-size: var(--wm-barcodescanner-text-font-size);
+    padding: var(--wm-barcodescanner-text-padding);
+    line-height: var(--wm-barcodescanner-text-font-size);
+}
+.app-barcodescanner-icon {
+    color: var(--wm-barcodescanner-icon-color);
+    font-size: var(--wm-barcodescanner-icon-font-size);
+}

package/src/styles/mobile/components/device/camera.less

@@ -0,0 +1,18 @@
+
+.app-camera {
+    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);
+}
+
+.app-camera-text {
+  color: var(--wm-camera-color);
+}
+
+.app-camera-icon {
+    color: var(--wm-camera-color);
+}

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

@@ -0,0 +1,15 @@
+
+.app-alertdialog {
+}
+
+.app-alertdialog-content {
+}
+
+.app-alertdialog-actions {
+}
+
+.app-alertdialog-ok {
+}
+
+.app-alertdialog-message {
+}

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

@@ -0,0 +1,30 @@
+
+.app-confirmdialog {
+}
+
+.app-confirmdialog-content {
+}
+
+.app-confirmdialog-actions {
+}
+
+.app-confirmdialog-dialogActions.root {
+}
+
+.app-confirmdialog-ok {
+}
+
+.app-confirmdialog-okButton-text {
+}
+
+.app-confirmdialog-cancelButton.root {
+}
+
+.app-confirmdialog-cancelButton-text {
+}
+
+.app-confirmdialog-dialog-icon.icon {
+}
+
+.app-confirmdialog-message {
+}

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

@@ -0,0 +1,132 @@
+.app-dialog {
+    background-color: var(--wm-modal-background);
+    border-radius: var(--wm-modal-radius);
+    padding: var(--wm-modal-body-padding);
+    min-width: var(--wm-modal-min-width);
+}
+
+.app-dialogcontent{
+    padding: var(--wn-modal-body-padding);
+}
+
+.app-dialog-modal {
+    background-color: var(--wm-modal-dialog-overlay-background);
+
+}
+
+.btn-only-label.text {
+    color: var(--wm-color-primary);
+}
+
+.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-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-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-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 {
+    min-height: unset;
+}
+
+.app-dialog-close-btn.icon.root {
+    min-width: unset;
+}
+
+.app-dialog-close-btn.icon.icon {
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+}
+
+.app-dialog-footer {
+    padding: var(--wm-modal-footer-padding);
+    display: flex;
+    flex-direction: row;
+    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);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
+}
+
+.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);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
+}
+
+.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/dialogs/dialogactions.less

@@ -0,0 +1,3 @@
+
+.app-dialogactions {
+}

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

@@ -0,0 +1,3 @@
+
+.app-dialogcontent {
+}

package/src/styles/mobile/components/input/calendar/views.less

@@ -0,0 +1,3 @@
+
+.app-views {
+}