From 919e3ce8281aa9a1915d30ff0b5180039354c67c Mon Sep 17 00:00:00 2001
From: Blake Kostner <btkostner@gmail.com>
Date: Mon, 11 Jan 2021 15:28:35 -0700
Subject: [PATCH] feat: add a danger button color (#25)

---
 src/assets/styles/main.css                 |  5 ++++
 src/components/sys-form-button.stories.mdx |  2 ++
 src/components/sys-form-button.vue         | 28 +++++++++++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 4c7842f..cbc8d76 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -14,6 +14,11 @@
   --color-light-form-button-secondary-shadow: #53888f;
   --color-light-form-button-secondary-contrast: var(--color-black, #000);
 
+  --color-light-form-button-danger: #f15d22;
+  --color-light-form-button-danger-light: #f57442;
+  --color-light-form-button-danger-shadow: #9d877e;
+  --color-light-form-button-danger-contrast: var(--color-white, #fff);
+
   --color-light-form-input-active: var(--color-orange, #faa41a);
   --color-light-form-input-background: var(--color-white, #fff);
   --color-light-form-input-border: var(--color-warm-gray, #574f4a);
diff --git a/src/components/sys-form-button.stories.mdx b/src/components/sys-form-button.stories.mdx
index 73f22aa..3acc4f7 100644
--- a/src/components/sys-form-button.stories.mdx
+++ b/src/components/sys-form-button.stories.mdx
@@ -29,6 +29,7 @@ but changes the appearance.
           <sys-form-button color="normal">normal</sys-form-button>
           <sys-form-button color="primary">primary</sys-form-button>
           <sys-form-button color="secondary">secondary</sys-form-button>
+          <sys-form-button color="danger">danger</sys-form-button>
         </div>
       `
     }}
@@ -50,6 +51,7 @@ until a user hovers, focuses, or interacts with it.
           <sys-form-button color="normal" :ghost="true">normal</sys-form-button>
           <sys-form-button color="primary" :ghost="true">primary</sys-form-button>
           <sys-form-button color="secondary" :ghost="true">secondary</sys-form-button>
+          <sys-form-button color="danger" :ghost="true">danger</sys-form-button>
         </div>
       `
     }}
diff --git a/src/components/sys-form-button.vue b/src/components/sys-form-button.vue
index 2b1f7e2..896a5f1 100644
--- a/src/components/sys-form-button.vue
+++ b/src/components/sys-form-button.vue
@@ -51,7 +51,7 @@
       color: {
         type: String,
         default: 'normal',
-        validator: (v) => ['normal', 'primary', 'secondary'].includes(v)
+        validator: (v) => ['normal', 'primary', 'secondary', 'danger'].includes(v)
       },
 
       /**
@@ -304,6 +304,32 @@
     border-color: var(--color-light-form-button-secondary);
   }
 
+  .button--danger {
+    background-color: var(--color-light-form-button-danger);
+    border-color: var(--color-light-form-button-danger);
+    color: var(--color-light-form-button-danger-contrast);
+    font-family: var(--font-family-slab);
+    text-transform: uppercase;
+  }
+
+  .button--danger:hover,
+  .button--danger:focus-within {
+    box-shadow: 1px 1px 3px var(--color-light-form-button-danger-shadow);
+  }
+
+  .button--danger.button--active,
+  .button--danger:active {
+    background-color: var(--color-light-form-button-danger-light);
+    border-color: var(--color-light-form-button-danger-light);
+    box-shadow: 1px 1px 3px var(--color-light-form-button-danger-shadow);
+  }
+
+  .button--danger.button--disabled,
+  .button--danger:disabled {
+    background-color: var(--color-light-form-button-danger);
+    border-color: var(--color-light-form-button-danger);
+  }
+
   .button--ghost:not(:hover):not(:focus):not(:focus-within):not(.button--active):not(:active):not(.button--disabled):not(:disabled) {
     background-color: transparent;
     border-color: transparent;