chore: 🤖 add warning-style button

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,
+  )
+);

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');
         }

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)};

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,
   ),