Added positive vaiant in button

diff --git a/src/app/atoms/button/Button.jsx b/src/app/atoms/button/Button.jsx
index bfe06f66320922f009eea5144ef80032a1248955..bebca86153020f139534c432750697f0171ca414 100644 (file)
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@@ -40,7 +40,7 @@ Button.defaultProps = {
 Button.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
   type: PropTypes.oneOf(['button', 'submit']),
   onClick: PropTypes.func,

diff --git a/src/app/atoms/button/Button.scss b/src/app/atoms/button/Button.scss
index 224c6348c3760371617e212e5f134a5e99a3b0ed..14265007b85ea88cc552bc86a47aaea62985648c 100644 (file)
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@@ -2,6 +2,7 @@
 
 .btn-surface,
 .btn-primary,
+.btn-positive,
 .btn-caution,
 .btn-danger {
   display: inline-flex;
@@ -67,6 +68,13 @@
   @include state.focus(var(--bs-primary-outline));
   @include state.active(var(--bg-primary-active));
 }
+.btn-positive {
+  box-shadow: var(--bs-positive-border);
+  @include color(var(--tc-positive-high), var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include state.focus(var(--bs-positive-outline));
+  @include state.active(var(--bg-positive-active));
+}
 .btn-caution {
   box-shadow: var(--bs-caution-border);
   @include color(var(--tc-caution-high), var(--ic-caution-normal));