@wavemaker/rn-codegen 12.0.0-next.45752 → 12.0.0-next.47810

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

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

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

@@ -0,0 +1,363 @@
+.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);
+  --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-default {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --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-elevated-primary {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-primary);
+  --wm-btn-color: var(--wm-color-on-primary);
+  --wm-btn-border-color: var(--wm-color-primary);
+}
+
+.btn-elevated-secondary {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-secondary);
+  --wm-btn-color: var(--wm-color-on-secondary);
+  --wm-btn-border-color: var(--wm-color-secondary);
+}
+
+.btn-elevated-tertiary {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-tertiary);
+  --wm-btn-color: var(--wm-color-on-tertiary);
+  --wm-btn-border-color: var(--wm-color-tertiary);
+}
+
+.btn-elevated-success {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-success);
+  --wm-btn-color: var(--wm-color-on-success);
+  --wm-btn-border-color: var(--wm-color-success);
+}
+
+.btn-elevated-info {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-info);
+  --wm-btn-color: var(--wm-color-on-info);
+  --wm-btn-border-color: var(--wm-color-info);
+}
+
+.btn-elevated-warning {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-warning);
+  --wm-btn-color: var(--wm-color-on-warning);
+  --wm-btn-border-color: var(--wm-color-warning);
+}
+
+.btn-elevated-danger {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-background: var(--wm-color-error);
+  --wm-btn-color: var(--wm-color-on-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-fab {
+  --wm-btn-width: 56px;
+  --wm-btn-height: 56px;
+  --wm-btn-border-radius: 56px;
+  --wm-btn-icon-font-size: 24px;
+}

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

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

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

@@ -0,0 +1,9 @@
+.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);
+}
+
+.app-checkbox-disabled {
+  --wm-checkbox-label-color: var(--wm-color-on-surface-variant);
+}

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

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

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/chips.variant.less

@@ -0,0 +1,39 @@
+.app-chips-disabled {
+  --wm-chips-opacity: 0.38;
+  --wm-chips-pointer-events: none;
+}
+
+.app-chips-active-item {
+  --wm-chips-item-color: var(--wm-color-on-surface-variant);
+  --wm-chips-item-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-box-shadow: var(--wm-elevation-shadow-1);
+}

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

@@ -0,0 +1,13 @@
+.app-outlined-container {
+  --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-border-color: transparent;
+  --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/templates/foundation-theme/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/wavemaker/design-tokens/variables/label.variant.less

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

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/list.variant.less

@@ -0,0 +1,3 @@
+.app-list-selected-icon-text {
+  --wm-list-item-background: var(--wm-color-primary);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/message.variant.less

@@ -0,0 +1,29 @@
+.alert-success {
+  --wm-message-container-background: var(--wm-color-success);
+  --wm-message-container-border-color: var(--wm-color-success);
+  --wm-message-color: var(--wm-color-on-success);
+}
+
+.alert-info {
+  --wm-message-container-background: var(--wm-color-info);
+  --wm-message-container-border-color: var(--wm-color-info);
+  --wm-message-color: var(--wm-color-on-info);
+}
+
+.alert-warning {
+  --wm-message-container-background: var(--wm-color-warning);
+  --wm-message-container-border-color: var(--wm-color-warning);
+  --wm-message-color: var(--wm-color-on-warning);
+}
+
+.alert-error {
+  --wm-message-container-background: var(--wm-color-error);
+  --wm-message-container-border-color: var(--wm-color-error);
+  --wm-message-color: var(--wm-color-on-error);
+}
+
+.alert-loading {
+  --wm-message-container-background: var(--wm-color-primary);
+  --wm-message-container-border-color: var(--wm-color-primary);
+  --wm-message-color: var(--wm-color-on-primary);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/panel.variant.less

@@ -0,0 +1,47 @@
+.panel-default {
+  --wm-panel-heading-background: var(--wm-color-surface-container);
+  --wm-panel-heading-color: var(--wm-color-on-surface);
+  --wm-panel-description-color: var(--wm-color-on-surface);
+}
+
+.panel-primary {
+  --wm-panel-heading-background: var(--wm-color-primary-container);
+  --wm-panel-heading-color: var(--wm-color-primary);
+  --wm-panel-description-color: var(--wm-color-primary);
+}
+
+.panel-secondary.root {
+  --wm-panel-heading-background: var(--wm-color-secondary-container);
+  --wm-panel-heading-color: var(--wm-color-secondary);
+  --wm-panel-description-color: var(--wm-color-secondary);
+}
+
+.panel-tertiary {
+  --wm-panel-heading-background: var(--wm-color-tertiary-container);
+  --wm-panel-heading-color: var(--wm-color-tertiary);
+  --wm-panel-description-color: var(--wm-color-tertiary);
+}
+
+.panel-success {
+  --wm-panel-heading-background: var(--wm-color-success-container);
+  --wm-panel-heading-color: var(--wm-color-success);
+  --wm-panel-description-color: var(--wm-color-success);
+}
+
+.panel-info {
+  --wm-panel-heading-background: var(--wm-color-info-container);
+  --wm-panel-heading-color: var(--wm-color-info);
+  --wm-panel-description-color: var(--wm-color-info);
+}
+
+.panel-warning {
+  --wm-panel-heading-background: var(--wm-color-warning-container);
+  --wm-panel-heading-color: var(--wm-color-warning);
+  --wm-panel-description-color: var(--wm-color-warning);
+}
+
+.panel-danger {
+  --wm-panel-heading-background: var(--wm-color-error-container);
+  --wm-panel-heading-color: var(--wm-color-error);
+  --wm-panel-description-color: var(--wm-color-error);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/picture.variant.less

@@ -0,0 +1,35 @@
+.rounded-image {
+  --wm-picture-radius: var(--wm-radius-xs);
+  --wm-picture-padding-top: var(--wm-border-width-base);
+  --wm-picture-padding-bottom: var(--wm-border-width-base);
+  --wm-picture-padding-left: var(--wm-border-width-base);
+  --wm-picture-padding-right: var(--wm-border-width-base);
+  --wm-picture-border-color: transparent;
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-base);
+  --wm-picture-background: transparent;
+}
+
+.circle-image {
+  --wm-picture-radius: var(--wm-radius-circle);
+  --wm-picture-padding-top: var(--wm-border-width-base);
+  --wm-picture-padding-bottom: var(--wm-border-width-base);
+  --wm-picture-padding-left: var(--wm-border-width-base);
+  --wm-picture-padding-right: var(--wm-border-width-base);
+  --wm-picture-border-color: transparent;
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-base);
+  --wm-picture-background: transparent;
+}
+
+.thumbnail-image {
+  --wm-picture-radius: var(--wm-radius-xs);
+  --wm-picture-padding-top: var(--wm-space-1);
+  --wm-picture-padding-bottom: var(--wm-space-1);
+  --wm-picture-padding-left: var(--wm-space-1);
+  --wm-picture-padding-right: var(--wm-space-1);
+  --wm-picture-border-color: var(--wm-border-color);
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-base);
+  --wm-picture-background: var(--wm-color-surface-container-low);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/progress-bar.variant.less

@@ -0,0 +1,29 @@
+.app-progress-bar {
+  --wm-progress-bar-background-active: var(--wm-color-primary);
+  --wm-progress-bar-background-inactive: var(--wm-color-primary-container);
+  --wm-progress-bar-label-color: var(--wm-color-on-primary);
+}
+
+.progress-bar-success {
+  --wm-progress-bar-background-active: var(--wm-color-success);
+  --wm-progress-bar-background-inactive: var(--wm-color-success-container);
+  --wm-progress-bar-label-color: var(--wm-color-on-success);
+}
+
+.progress-bar-info {
+  --wm-progress-bar-background-active: var(--wm-color-info);
+  --wm-progress-bar-background-inactive: var(--wm-color-info-container);
+  --wm-progress-bar-label-color: var(--wm-color-on-info);
+}
+
+.progress-bar-warning {
+  --wm-progress-bar-background-active: var(--wm-color-warning);
+  --wm-progress-bar-background-inactive: var(--wm-color-warning-container);
+  --wm-progress-bar-label-color: var(--wm-color-on-warning);
+}
+
+.progress-bar-danger {
+  --wm-progress-bar-background-active: var(--wm-color-error);
+  --wm-progress-bar-background-inactive: var(--wm-color-error-container);
+  --wm-progress-bar-label-color: var(--wm-color-on-error);
+}