@wavemaker/app-runtime-wm-build 12.0.0-next.45066 → 12.0.0-next.45068

app-runtime-wm-build/wmapp/styles/foundation/foundation.css

@@ -501,7 +501,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-height: 40px;
   --wm-btn-gap: var(--wm-space-2);
   --wm-btn-shadow: none;
-  --wm-btn-app-icon-size: var(--wm-icon-size-md);
   --wm-btn-state-layer-color: var(--wm-color-on-surface-variant);
   --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
   --wm-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
@@ -510,21 +509,21 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-disabled-background: var(--wm-color-on-surface-active);
   --wm-btn-disabled-border-color: var(--wm-color-on-surface-active);
   --wm-btn-disabled-opacity: 0.38;
+  --wm-btn-icon-size: var(--wm-icon-size-md);
   --wm-btn-icon-width: 40px;
   --wm-btn-icon-height: 40px;
-  --wm-btn-icon-size: var(--wm-icon-size-md);
   --wm-btn-icon-margin: var(--wm-space-1);
   --wm-btn-icon-padding: var(--wm-space-0);
   --wm-btn-icon-radius: var(--wm-radius-pill);
+  --wm-btn-icon-xs-size: var(--wm-icon-size-xs);
   --wm-btn-icon-xs-width: 24px;
   --wm-btn-icon-xs-height: 24px;
-  --wm-btn-icon-xs-size: var(--wm-icon-size-xs);
+  --wm-btn-icon-sm-size: var(--wm-icon-size-sm);
   --wm-btn-icon-sm-width: 32px;
   --wm-btn-icon-sm-height: 32px;
-  --wm-btn-icon-sm-size: var(--wm-icon-size-sm);
+  --wm-btn-icon-lg-size: var(--wm-icon-size-lg);
   --wm-btn-icon-lg-width: 56px;
   --wm-btn-icon-lg-height: 56px;
-  --wm-btn-icon-lg-size: var(--wm-icon-size-lg);
   --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
   --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
   --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
@@ -13822,11 +13821,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .btn .app-icon,
 .wm-app button .app-icon {
   padding: 0;
-  font-size: var(--wm-btn-app-icon-size);
-  min-width: var(--wm-btn-app-icon-size);
-  width: var(--wm-btn-app-icon-size);
-  height: var(--wm-btn-app-icon-size);
-  margin-left: calc(calc(var(--wm-btn-app-icon-size) / 3)* -1);
+  font-size: var(--wm-btn-icon-size);
+  min-width: var(--wm-btn-icon-size);
+  width: var(--wm-btn-icon-size);
+  height: var(--wm-btn-icon-size);
+  margin-left: calc(calc(var(--wm-btn-icon-size) / 3)* -1);
 }
 .wm-app .btn .btn-caption,
 .wm-app button .btn-caption {
@@ -13864,10 +13863,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-xs-min-width);
   --wm-btn-height: var(--wm-btn-xs-height);
   --wm-btn-gap: var(--wm-btn-xs-gap);
-  --wm-btn-app-icon-size: var(--wm-btn-xs-icon-size);
+  --wm-btn-icon-size: var(--wm-btn-icon-xs-size);
   --wm-btn-icon-width: var(--wm-btn-icon-xs-width);
   --wm-btn-icon-height: var(--wm-btn-icon-xs-height);
-  --wm-btn-icon-size: var(--wm-btn-icon-xs-size);
 }
 .wm-app .btn-sm,
 .wm-app button-sm {
@@ -13881,10 +13879,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-sm-min-width);
   --wm-btn-height: var(--wm-btn-sm-height);
   --wm-btn-gap: var(--wm-btn-sm-gap);
-  --wm-btn-app-icon-size: var(--wm-btn-sm-icon-size);
+  --wm-btn-icon-size: var(--wm-btn-icon-sm-size);
   --wm-btn-icon-width: var(--wm-btn-icon-sm-width);
   --wm-btn-icon-height: var(--wm-btn-icon-sm-height);
-  --wm-btn-icon-size: var(--wm-btn-icon-sm-size);
 }
 .wm-app .btn-lg,
 .wm-app button-lg {
@@ -13898,10 +13895,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-lg-min-width);
   --wm-btn-height: var(--wm-btn-lg-height);
   --wm-btn-gap: var(--wm-btn-lg-gap);
-  --wm-btn-app-icon-size: var(--wm-btn-lg-icon-size);
+  --wm-btn-icon-size: var(--wm-btn-icon-lg-size);
   --wm-btn-icon-width: var(--wm-btn-icon-lg-width);
   --wm-btn-icon-height: var(--wm-btn-icon-lg-height);
-  --wm-btn-icon-size: var(--wm-btn-icon-lg-size);
 }
 .wm-app .btn-block,
 .wm-app button-block {
@@ -14031,21 +14027,27 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-state-layer-color: var(--wm-btn-warning-outlined-state-layer-color);
 }
 .wm-app .btn-danger,
-.wm-app button-danger {
+.wm-app button-danger,
+.wm-app .btn-error,
+.wm-app button-error {
   --wm-btn-color: var(--wm-btn-danger-color);
   --wm-btn-background: var(--wm-btn-danger-background);
   --wm-btn-border-color: var(--wm-btn-danger-border-color);
   --wm-btn-state-layer-color: var(--wm-btn-danger-state-layer-color);
 }
 .wm-app .btn-danger.btn-outlined,
-.wm-app button-danger.btn-outlined {
+.wm-app button-danger.btn-outlined,
+.wm-app .btn-error.btn-outlined,
+.wm-app button-error.btn-outlined {
   --wm-btn-color: var(--wm-btn-danger-outlined-color);
   --wm-btn-background: var(--wm-btn-danger-outlined-background);
   --wm-btn-border-color: var(--wm-btn-danger-outlined-border-color);
   --wm-btn-state-layer-color: var(--wm-btn-danger-outlined-state-layer-color);
 }
 .wm-app .btn-text,
-.wm-app button-text {
+.wm-app button-text,
+.wm-app .btn-standard,
+.wm-app button-standard {
   --wm-btn-color: var(--wm-btn-background);
   background: none !important;
   border: none !important;
@@ -14053,7 +14055,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-state-layer-color: var(--wm-btn-background);
 }
 .wm-app .btn-text .app-icon,
-.wm-app button-text .app-icon {
+.wm-app button-text .app-icon,
+.wm-app .btn-standard .app-icon,
+.wm-app button-standard .app-icon {
   margin: 0;
 }
 .wm-app .btn-elevated,