From 6d29755ceea8abe7c68db02280158243965f95b7 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 29 Apr 2020 10:21:03 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20warning-style=20b?=
 =?UTF-8?q?utton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/components/_button.scss | 35 +++++++++++++++++++
 .../addon/styles/rose/utilities/_button.scss  |  3 ++
 .../styles/rose/variables/color/_css.scss     |  4 +--
 .../styles/rose/variables/color/_sass.scss    |  5 +++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss
index 9e9909dd7..0fd7f871b 100644
--- a/addons/rose/addon/styles/rose/components/_button.scss
+++ b/addons/rose/addon/styles/rose/components/_button.scss
@@ -54,3 +54,38 @@
     box-shadow: none,
   )
 );
+
+@include button.button-style(
+  'warning',
+  (
+    color: var(--failure),
+    background-color: var(--subtle),
+    border-color: var(--failure),
+    box-shadow: 0px 4px 4px rgba(var(--stark-components), var(--opacity-2)),
+  ),
+  (
+    color: var(--white),
+    border-color: var(--failure-starker-1),
+    background-color: var(--failure),
+    box-shadow: (
+      0px 4px 4px rgba(var(--stark-components), var(--opacity-3)),
+      0px 4px 8px rgba(var(--stark-components), var(--opacity-4)),
+    ),
+    text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)),
+  ),
+  (
+    color: var(--white),
+    border-color: var(--ui-gray-starker-2),
+    background-color: var(--failure-starker-1),
+    box-shadow: (
+      0px 4px 4px rgba(var(--stark-components), var(--opacity-3)),
+      0px 4px 8px rgba(var(--stark-components), var(--opacity-4)),
+    ),
+    text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)),
+  ),
+  (
+    border-color: var(--ui-gray-subtler-2),
+    opacity: var(--opacity-1),
+    box-shadow: none,
+  )
+);
diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index b27db5a4e..42ca267fc 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -68,6 +68,9 @@
     @if $disabled {
       &:disabled {
         cursor: not-allowed;
+        @if map.get($disabled, 'border-color') {
+          border-color: map.get($disabled, 'border-color');
+        }
         @if map.get($disabled, 'opacity') {
           opacity: map.get($disabled, 'opacity');
         }
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index aa6afa069..efd549ed6 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -110,8 +110,8 @@
 
     --failure-subtler-2: #{color(red, 900)};
     --failure-subtler-1: #{color(red, 800)};
-    --failure: #{color(red)};
-    --failure-starker-1: #{color(red, 200)};
+    --failure: #{color(red, 400)};
+    --failure-starker-1: #{color(red, 300)};
 
     --success-subtler-2: #{color(green, 900)};
     --success-subtler-1: #{color(green, 800)};
diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss
index 0adc3c887..1b11456b1 100644
--- a/addons/rose/addon/styles/rose/variables/color/_sass.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_sass.scss
@@ -35,8 +35,10 @@ $color-values: (
     100: #ebeef2,
     200: #dce0e6,
     300: #bac1cc,
+    400: #8e96a3,
     500: map.get($colors, ui-gray),
     600: #626873,
+    700: #525761,
     800: #373a42,
     900: #1f2124,
   ),
@@ -78,6 +80,9 @@ $color-values: (
   red: (
     010: #fdfafb,
     100: #efc7cc,
+    200: #e5a2aa,
+    300: #db7d88,
+    400: #d15866,
     500: map.get($colors, red),
     800: #5b1820,
   ),