feat: add a danger button color (#25)

system76 · Jan 11, 2021 · 919e3ce · 919e3ce
1 parent a0ee2b9
commit 919e3ce
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;