update Button to use Synthesis colors

scss/buttons.scss

@@ -18,6 +18,8 @@
   }
 }
 
+$synthesis-primary: $synth-primary-cta-blue;
+
 $primary: $ux-emerald-600;
 $danger: $ux-red;
 $warning: $ux-yellow-400;
@@ -74,6 +76,42 @@ $warning: $ux-yellow-400;
   }
 }
 
+@mixin synthesis-btn-primary {
+  $btn-primary-background: $synthesis-primary;
+  $btn-primary-border: $synthesis-primary;
+  $btn-primary-color: $ux-white;
+
+  $btn-primary-hover-background: $synth-dark-background-selected-blue;
+  $btn-primary-hover-border: $synth-dark-background-selected-blue;
+  $btn-primary-hover-color: $ux-white;
+
+  $btn-primary-active-background: $synth-dark-background-pressed-blue;
+  $btn-primary-active-border: $synth-dark-background-pressed-blue;
+  $btn-primary-active-color: $ux-white;
+
+  @include button-variant(
+    $btn-primary-background, 
+    $btn-primary-border,
+    $btn-primary-color,
+
+    $btn-primary-hover-background,
+    $btn-primary-hover-border,
+    $btn-primary-hover-color,
+
+    $btn-primary-active-background,
+    $btn-primary-active-border,
+    $btn-primary-active-color,
+  );
+
+  &:focus-visible {
+    @include btn-focus-outline;
+  }
+
+  &:active, &:focus {
+    @include btn-remove-bootstrap-focus-outline;
+  }
+}
+
 @mixin btn-outline-primary {
   $btn-outline-primary-color: $primary;
   $btn-outline-primary-color-hover: $ux-white;
@@ -111,6 +149,43 @@ $warning: $ux-yellow-400;
   }
 }
 
+@mixin synthesis-btn-outline-primary {
+  $btn-outline-primary-color: $synthesis-primary;
+  $btn-outline-primary-color-hover: $ux-white;
+
+  $btn-outline-primary-hover-background: $synth-dark-background-selected-blue;
+  $btn-outline-primary-hover-border: $synth-dark-background-selected-blue;
+  $btn-outline-primary-hover-color: $ux-white;
+
+  $btn-outline-primary-border: $synthesis-primary;
+
+  $btn-outline-primary-active-background: $synth-dark-background-pressed-blue;
+  $btn-outline-primary-active-border-color: $synth-dark-background-pressed-blue;
+
+  @include button-outline-variant(
+    $btn-outline-primary-color, 
+    $btn-outline-primary-color-hover,
+
+    $btn-outline-primary-hover-background,
+    $btn-outline-primary-hover-border,
+    $btn-outline-primary-hover-color,
+  );
+  border-color: $btn-outline-primary-border;
+
+  &:active {
+    background-color: $btn-outline-primary-active-background;
+    border-color: $btn-outline-primary-active-border-color;
+  }
+
+  &:focus-visible {
+    @include btn-focus-outline;
+  }
+
+  &:active, &:focus {
+    @include btn-remove-bootstrap-focus-outline;
+  }
+}
+
 @mixin btn-danger {
   $btn-danger-background: $danger;
   $btn-danger-border: $danger;

scss/colors.scss

@@ -2,3 +2,4 @@
 @import './colors/inputs';
 @import './colors/mod_rainbow';
 @import './colors/palette';
+@import './colors/synthesis-palette';

scss/colors/synthesis-palette.scss

@@ -23,6 +23,7 @@ $synth-unselected-neutral: #5b5b5b;
 // main schema - visual hierarchy
 $synth-accent-green: #158d71;
 $synth-dark-background-selected-blue: #162c4e;
+$synth-dark-background-pressed-blue: #010812;
 $synth-hover-state: #eef9f6;
 $synth-indicator-stroke-green: #91cabb;
 $synth-navbar-blue: #010812;

spec/__snapshots__/Storyshots.test.js.snap

@@ -9880,7 +9880,7 @@ exports[`Storyshots Components/Modal Danger Modal 1`] = `
         Cancel
       </button>
       <button
-        className="Button btn btn-danger"
+        className="Button btn btn-primary"
         disabled={false}
         type="button"
       >
@@ -10304,7 +10304,7 @@ exports[`Storyshots Components/Modal Warning Modal 1`] = `
         Cancel
       </button>
       <button
-        className="Button btn btn-warning btn-md"
+        className="Button btn btn-primary btn-md"
         disabled={false}
         type="button"
       >

src/Button/Button.scss

@@ -1,5 +1,17 @@
 @import '../../scss/theme';
 
+.Synthesized {
+  .Button {
+    &.btn-primary {
+      @include synthesis-btn-primary;
+    }
+
+    &.btn-outline-primary {
+      @include synthesis-btn-outline-primary;
+    }
+  }
+}
+
 .Button {
   @include synth-font-type-30--bold;
 

src/Dropdown/DropdownToggle.scss

@@ -4,6 +4,18 @@ $primary: $ux-emerald-600;
 $danger: $ux-red;
 $warning: $ux-yellow-400; 
 
+.Synthesized {
+  .DropdownToggle {
+    &.btn-primary {
+      @include synthesis-btn-primary;
+    }
+
+    &.btn-outline-primary {
+      @include synthesis-btn-outline-primary;
+    }
+  }
+}
+
 .DropdownToggle {
   @include synth-font-type-30--bold;
 

src/Modal/Modal.stories.jsx

@@ -166,7 +166,7 @@ export const WarningModal = () => (
       dismissButtonText="Cancel"
       onRequestClose={handleRequestClose}
     >
-      <Button size="md" variant="warning">Edit</Button>
+      <Button size="md" variant="primary">Edit</Button>
     </ModalFooter>
   </Modal>
 );
@@ -191,7 +191,7 @@ export const DangerModal = () => (
       dismissButtonText="Cancel"
       onRequestClose={handleRequestClose}
     >
-      <Button variant="danger">Delete</Button>
+      <Button variant="primary">Delete</Button>
     </ModalFooter>
   </Modal>
 );