@wavemaker/rn-codegen 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/accordion.variant.less

@@ -0,0 +1,14 @@
+.app-accordion-active-header,
+.app-accordion-active-header-title,
+.app-accordion-header-collapse-icon,
+.app-accordion-active-header-badge,
+.app-accordion-active-title-icon {
+  --wm-accordion-header-border-color: var(--wm-color-primary);
+  --wm-accordion-header-background-color: var(--wm-color-primary);
+  --wm-accordion-text-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/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/button-group.variant.less

@@ -0,0 +1,7 @@
+.app-buttongroup {
+  --wm-button-group-radius: var(--wm-radius-sm);
+}
+
+.btn-group-vertical {
+  --wm-button-group-radius: var(--wm-radius-xs);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/button.variant.less

@@ -0,0 +1,314 @@
+.app-button-disabled {
+  --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);
+  --wm-btn-opacity: 0.38;
+  --wm-btn-cursor: not-allowed;
+  --wm-btn-shadow: none;
+}
+
+.btn-filled-default {
+  --wm-btn-background: var(--wm-color-surface);
+  --wm-btn-color: var(--wm-color-on-surface);
+  --wm-btn-border-color: var(--wm-color-surface-container-highest);
+}
+
+.btn-filled-primary {
+  --wm-btn-background: var(--wm-color-primary);
+  --wm-btn-color: var(--wm-color-on-primary);
+  --wm-btn-border-color: var(--wm-color-primary);
+}
+
+.btn-filled-secondary {
+  --wm-btn-background: var(--wm-color-secondary);
+  --wm-btn-color: var(--wm-color-on-secondary);
+  --wm-btn-border-color: var(--wm-color-secondary);
+}
+
+.btn-filled-tertiary {
+  --wm-btn-background: var(--wm-color-tertiary);
+  --wm-btn-color: var(--wm-color-on-tertiary);
+  --wm-btn-border-color: var(--wm-color-tertiary);
+}
+
+.btn-filled-success {
+  --wm-btn-background: var(--wm-color-success);
+  --wm-btn-color: var(--wm-color-on-success);
+  --wm-btn-border-color: var(--wm-color-success);
+}
+
+.btn-filled-info {
+  --wm-btn-background: var(--wm-color-info);
+  --wm-btn-color: var(--wm-color-on-info);
+  --wm-btn-border-color: var(--wm-color-info);
+}
+
+.btn-filled-warning {
+  --wm-btn-background: var(--wm-color-warning);
+  --wm-btn-color: var(--wm-color-on-warning);
+  --wm-btn-border-color: var(--wm-color-warning);
+}
+
+.btn-filled-danger {
+  --wm-btn-background: var(--wm-color-error);
+  --wm-btn-color: var(--wm-color-on-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-outlined-default {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-on-surface);
+  --wm-btn-border-color: var(--wm-color-surface-container-highest);
+}
+
+.btn-outlined-primary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-primary);
+  --wm-btn-border-color: var(--wm-color-primary);
+}
+
+.btn-outlined-secondary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-secondary);
+  --wm-btn-border-color: var(--wm-color-secondary);
+}
+
+.btn-outlined-tertiary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-tertiary);
+  --wm-btn-border-color: var(--wm-color-tertiary);
+}
+
+.btn-outlined-success {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-success);
+  --wm-btn-border-color: var(--wm-color-success);
+}
+
+.btn-outlined-info {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-info);
+  --wm-btn-border-color: var(--wm-color-info);
+}
+
+.btn-outlined-warning {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-warning);
+  --wm-btn-border-color: var(--wm-color-warning);
+}
+
+.btn-outlined-danger {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-outlined-error {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-text-default {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-on-surface);
+}
+
+.btn-text-primary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-primary);
+}
+
+.btn-text-secondary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-secondary);
+}
+
+.btn-text-tertiary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-tertiary);
+}
+
+.btn-text-success {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-success);
+}
+
+.btn-text-info {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-info);
+}
+
+.btn-text-warning {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-warning);
+}
+
+.btn-text-danger {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-text-error {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-standard-default {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-on-surface);
+}
+
+.btn-standard-primary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-primary);
+}
+
+.btn-standard-secondary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-secondary);
+}
+
+.btn-standard-tertiary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-tertiary);
+}
+
+.btn-standard-success {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-success);
+}
+
+.btn-standard-info {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-info);
+}
+
+.btn-standard-warning {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-warning);
+}
+
+.btn-standard-danger {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-standard-error {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding-top: var(--wm-space-2);
+  --wm-btn-padding-bottom: var(--wm-space-2);
+  --wm-btn-padding-left: var(--wm-space-3);
+  --wm-btn-padding-right: var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-icon {
+  --wm-btn-height: 40px;
+  --wm-btn-min-width: 40px;
+  --wm-btn-padding-top: var(--wm-space-0);
+  --wm-btn-padding-bottom: var(--wm-space-0);
+  --wm-btn-padding-left: var(--wm-space-0);
+  --wm-btn-padding-right: var(--wm-space-0);
+  --wm-btn-icon-size: var(--wm-icon-size-md);
+}
+
+.btn-elevated {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+}
+
+.btn-fab {
+  --wm-btn-position: absolute;
+  --wm-btn-position-bottom: 10px;
+  --wm-btn-position-right: 10px;
+  --wm-btn-height: 56px;
+  --wm-btn-min-width: 56px;
+  --wm-btn-border-radius: 16px;
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/cards.variant.less

@@ -0,0 +1,23 @@
+.card-default {
+  --wm-card-border-width: var(--wm-border-width-base);
+  --wm-card-border-style: var(--wm-border-style-base);
+  --wm-card-border-color: var(--wm-color-outline-variant);
+  --wm-card-border-radius: var(--wm-radius-md);
+  --wm-card-background: transparent;
+  --wm-card-shadow: none;
+}
+
+.card-filled {
+  --wm-card-border-width: 0;
+  --wm-card-border-style: var(--wm-border-style-base);
+  --wm-card-border-color: var(--wm-color-outline-variant);
+  --wm-card-border-radius: var(--wm-radius-md);
+  --wm-card-background: var(--wm-color-surface-bright);
+  --wm-card-shadow: none;
+}
+
+.card-elevated {
+  --wm-card-border-width: 0px;
+  --wm-card-shadow: var(--wm-elevation-shadow-1);
+  --wm-card-background: var(--wm-color-surface-container-lowest);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/carousel.variant.less

@@ -0,0 +1,4 @@
+.app-carousel-active-dot {
+  --wm-carousel-dots-background: var(--wm-color-primary-container);
+  --wm-carousel-dots-opacity: 1px;
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/checkbox.variant.less

@@ -0,0 +1,16 @@
+.app-checkbox-checkicon,
+.app-checkbox-selected-label {
+  --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);
+}
+
+.app-checkbox-disabled {
+  --wm-checkbox-opacity: 0.8;
+  --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);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/checkboxset.variant.less

@@ -0,0 +1,18 @@
+.app-checkboxset-checkicon,
+.app-checkboxset-selected-label {
+  --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);
+  --wm-checkboxset-label-font-size: var(--wm-body-large-font-size);
+  --wm-checkboxset-label-font-family: var(--wm-body-large-font-family);
+  --wm-checkboxset-label-font-margin-left: var(--wm-space-2);
+  --wm-checkboxset-label-color: var(--wm-color-on-surface-variant);
+}
+
+.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/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/chips.variant.less

@@ -0,0 +1,40 @@
+.app-chips-disabled {
+  --wm-chips-opacity: 0.38;
+  --wm-chips-pointer-events: none;
+}
+
+.app-chips-active-item,
+.app-chips-active-item-text {
+  --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);
+}
+
+.chips-filled-default {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-surface);
+  --wm-chips-color: var(--wm-color-on-surface);
+}
+
+.chips-filled-primary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-primary);
+  --wm-chips-color: var(--wm-color-on-primary);
+}
+
+.chips-filled-secondary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-secondary);
+  --wm-chips-color: var(--wm-color-on-secondary);
+}
+
+.chips-filled-tertiary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-tertiary);
+  --wm-chips-color: var(--wm-color-on-tertiary);
+}
+
+.chips-elevated {
+  --wm-chips-border-width: 0;
+  --wm-chips-shadow: var(--wm-elevation-shadow-1);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/container.variant.less

@@ -0,0 +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);
+}
+
+.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-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);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/form-controls.variant.less

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

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/icon.variant.less

@@ -0,0 +1,48 @@
+.fa-xs {
+  --wm-icon-font-size: var(--wm-icon-size-xs);
+  --wm-icon-min-width: var(--wm-icon-size-xs);
+  --wm-icon-width: var(--wm-icon-size-xs);
+  --wm-icon-height: var(--wm-icon-size-xs);
+}
+
+.fa-sm {
+  --wm-icon-font-size: var(--wm-icon-size-sm);
+  --wm-icon-min-width: var(--wm-icon-size-sm);
+  --wm-icon-width: var(--wm-icon-size-sm);
+  --wm-icon-height: var(--wm-icon-size-sm);
+}
+
+.fa-lg {
+  --wm-icon-font-size: var(--wm-icon-size-lg);
+  --wm-icon-min-width: var(--wm-icon-size-lg);
+  --wm-icon-width: var(--wm-icon-size-lg);
+  --wm-icon-height: var(--wm-icon-size-lg);
+}
+
+.fa-2x {
+  --wm-icon-font-size: var(--wm-icon-size-2x);
+  --wm-icon-min-width: var(--wm-icon-size-2x);
+  --wm-icon-width: var(--wm-icon-size-2x);
+  --wm-icon-height: var(--wm-icon-size-2x);
+}
+
+.fa-3x {
+  --wm-icon-font-size: var(--wm-icon-size-3x);
+  --wm-icon-min-width: var(--wm-icon-size-3x);
+  --wm-icon-width: var(--wm-icon-size-3x);
+  --wm-icon-height: var(--wm-icon-size-3x);
+}
+
+.fa-4x {
+  --wm-icon-font-size: var(--wm-icon-size-4x);
+  --wm-icon-min-width: var(--wm-icon-size-4x);
+  --wm-icon-width: var(--wm-icon-size-4x);
+  --wm-icon-height: var(--wm-icon-size-4x);
+}
+
+.fa-5x {
+  --wm-icon-font-size: var(--wm-icon-size-5x);
+  --wm-icon-min-width: var(--wm-icon-size-5x);
+  --wm-icon-width: var(--wm-icon-size-5x);
+  --wm-icon-height: var(--wm-icon-size-5x);
+}

package/src/templates/foundation-theme/build/android/wavemaker/design-tokens/variables/label.variant.less

@@ -0,0 +1,148 @@
+.h1 {
+  --wm-label-font-size: var(--wm-h1-font-size);
+  --wm-label-font-weight: var(--wm-h1-font-weight);
+  --wm-label-font-family: var(--wm-h1-font-family);
+}
+
+.h2 {
+  --wm-label-font-size: var(--wm-h2-font-size);
+  --wm-label-font-weight: var(--wm-h2-font-weight);
+  --wm-label-font-family: var(--wm-h2-font-family);
+}
+
+.h3 {
+  --wm-label-font-size: var(--wm-h3-font-size);
+  --wm-label-font-weight: var(--wm-h3-font-weight);
+  --wm-label-font-family: var(--wm-h3-font-family);
+}
+
+.h4 {
+  --wm-label-font-size: var(--wm-h4-font-size);
+  --wm-label-font-weight: var(--wm-h4-font-weight);
+  --wm-label-font-family: var(--wm-h4-font-family);
+}
+
+.h5 {
+  --wm-label-font-size: var(--wm-h5-font-size);
+  --wm-label-font-weight: var(--wm-h5-font-weight);
+  --wm-label-font-family: var(--wm-h5-font-family);
+}
+
+.h6 {
+  --wm-label-font-size: var(--wm-h6-font-size);
+  --wm-label-font-weight: var(--wm-h6-font-weight);
+  --wm-label-font-family: var(--wm-h6-font-family);
+}
+
+.p {
+  --wm-label-font-size: var(--wm-body-small-font-size);
+}
+
+.media-heading {
+  --wm-label-font-size: var(--wm-body-large-font-size);
+}
+
+.text-primary {
+  --wm-label-color: var(--wm-color-primary);
+}
+
+.text-secondary {
+  --wm-label-color: var(--wm-color-secondary);
+}
+
+.text-success {
+  --wm-label-color: var(--wm-color-success);
+}
+
+.text-warning {
+  --wm-label-color: var(--wm-color-warning);
+}
+
+.text-danger {
+  --wm-label-color: var(--wm-color-error);
+}
+
+.text-info {
+  --wm-label-color: var(--wm-color-info);
+}
+
+.text-muted {
+  --wm-label-color: var(--wm-color-on-surface-variant);
+}
+
+.label-primary {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-primary);
+  --wm-label-color: var(--wm-color-on-primary);
+}
+
+.label-secondary {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-secondary);
+  --wm-label-color: var(--wm-color-on-secondary);
+}
+
+.label-success {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-success);
+  --wm-label-color: var(--wm-color-on-success);
+}
+
+.label-warning {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-warning);
+  --wm-label-color: var(--wm-color-on-warning);
+}
+
+.label-danger {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-error);
+  --wm-label-color: var(--wm-color-on-error);
+}
+
+.label-info {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-info);
+  --wm-label-color: var(--wm-color-on-info);
+}
+
+.label-muted {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-on-surface-variant);
+  --wm-label-color: var(--wm-color-surface-variant);
+}