feat(button): support error and success color (#704)

apps/angular-test-app/src/app/components/ui-elements-demo/ui-elements-demo.component.html

@@ -77,6 +77,8 @@ <h3 class="uxg-h3">Buttons</h3>
     <button mat-button>Basic</button>
     <button mat-button color="primary">Primary</button>
     <button mat-button color="accent">Accent</button>
+    <button mat-button color="success">Success</button>
+    <button mat-button color="error">Error</button>
     <button mat-button disabled>Disabled</button>
     <a mat-button routerLink=".">Link</a>
   </div>
@@ -85,6 +87,8 @@ <h3 class="uxg-h3">Buttons</h3>
     <button mat-stroked-button>Basic</button>
     <button mat-stroked-button color="primary">Primary</button>
     <button mat-stroked-button color="accent">Accent</button>
+    <button mat-stroked-button color="success">Success</button>
+    <button mat-stroked-button color="error">Error</button>
     <button mat-stroked-button disabled>Disabled</button>
     <a mat-stroked-button routerLink=".">Link</a>
   </div>
@@ -93,6 +97,8 @@ <h3 class="uxg-h3">Buttons</h3>
     <button mat-flat-button>Basic</button>
     <button mat-flat-button color="primary">Primary</button>
     <button mat-flat-button color="accent">Accent</button>
+    <button mat-flat-button color="success">Success</button>
+    <button mat-flat-button color="error">Error</button>
     <button mat-flat-button disabled>Disabled</button>
     <a mat-flat-button routerLink=".">Link</a>
   </div>

apps/angular-test-app/src/app/components/ui-elements-demo/ui-elements-demo.component.scss

@@ -8,6 +8,15 @@
   margin-bottom: $uxg-spacing-4;
 }
 
+.button-default-test,
+.button-stroked-test,
+.button-flat-test
+ {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: $uxg-spacing-3;
+}
+
 .mat-button-base + .mat-button-base,
 .mat-icon + .mat-icon,
 .mat-card + .mat-card,

themes/angular-theme/lib/button/_button-theme.scss

@@ -5,7 +5,8 @@
 @mixin theme($theme) {
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
-  $warn: map.get($theme, warn);
+  $success: map.get($theme, success);
+  $error: map.get($theme, error);
   $foreground: map.get($theme, foreground);
 
   .mat-stroked-button {
@@ -17,19 +18,54 @@
       border-color: palette.get-color-from-palette($accent, default, 0.5);
     }
 
+    &.mat-error {
+      border-color: palette.get-color-from-palette($error, default, 0.5);
+    }
+
+    &.mat-success {
+      border-color: palette.get-color-from-palette($success, default, 0.5);
+    }
+
     &[disabled] {
       background-color: palette.get-color-from-palette($foreground, text, 0.1);
       border-color: palette.get-color-from-palette($foreground, text, 0.25);
     }
   }
 
+  .mat-flat-button {
+    &.mat-error {
+      background: palette.get-color-from-palette($error, default);
+      color: palette.get-color-from-palette($error, default-contrast);
+    }
+    &.mat-success {
+      background: palette.get-color-from-palette($success, default);
+      color: palette.get-color-from-palette($success, default-contrast);
+    }
+  }
+
+  .mat-error {
+    color: palette.get-color-from-palette($error, default);
+
+    .mat-button-focus-overlay {
+      background: palette.get-color-from-palette($error, default);
+    }
+  }
+
+  .mat-success {
+    color: palette.get-color-from-palette($success, default);
+
+    .mat-button-focus-overlay {
+      background: palette.get-color-from-palette($success, default);
+    }
+  }
+
   .mat-flat-button,
   .mat-raised-button,
   .mat-fab,
   .mat-mini-fab {
     &.mat-primary,
-    &.mat-accent,
-    &.mat-warn {
+    &.mat-accent
+      {
       & .mat-ripple-element {
         // since the use of CSS variables,
         // opacity is already set on rgba background-color.
@@ -54,8 +90,8 @@
         opacity: 0.24;
       }
 
-      &.mat-warn .mat-button-focus-overlay {
-        background: palette.get-color-from-palette($warn, default-contrast);
+      &.mat-success .mat-button-focus-overlay {
+        background: palette.get-color-from-palette($success, default-contrast);
         opacity: 0.24;
       }
     }