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