Add Synthesis colors from Figma (#1069)

scss/colors/synthesis-palette.scss

@@ -0,0 +1,36 @@
+// stoplight color system
+$synth-success-green-dark: #015029;
+$synth-success-green-medium: #09914f;
+$synth-success-green-light: #d4f6e5;
+
+$synth-error-red-dark: #c71f1f;
+$synth-error-red-medium: #e03131;
+$synth-error-red-light: #fae1e1;
+
+$synth-warning-amber-dark: #fbda36;
+$synth-warning-amber-medium: #ffe356;
+$synth-warning-amber-light: #fff1ab;
+$synth-warning-amber-alternate: #f59c27;
+
+// neutrals
+$synth-alert-bg-neutral: #f4f4f4;
+$synth-div-stroke-neutral: #dedede;
+$synth-header-neutral: #fbfbfb;
+$synth-page-neutral: #fdfdfd;
+$synth-text-neutral: #1b1b1b;
+$synth-unselected-neutral: #5b5b5b;
+
+// main schema - visual hierarchy
+$synth-accent-green: #158d71;
+$synth-dark-background-selected-blue: #162c4e;
+$synth-hover-state: #eef9f6;
+$synth-indicator-stroke-green: #91cabb;
+$synth-navbar-blue: #010812;
+$synth-primary-cta-blue: #162c4e;
+$synth-selected-state-green: #c6e2db;
+
+// feedback and signifier colors
+$synth-hyperlink-color: #3f6dca;
+
+$synth-hover-blue: #e5ecff;
+$synth-header-gray-blue: #eef2f8;

scss/variables.scss

@@ -1,6 +1,40 @@
 @import './colors/palette';
+@import './colors/synthesis-palette';
 
 :export {
+  SYNTH_SUCCESS_GREEN_DARK: $synth-success-green-dark;
+  SYNTH_SUCCESS_GREEN_MEDIUM: $synth-success-green-medium;
+  SYNTH_SUCCESS_GREEN_LIGHT: $synth-success-green-light;
+
+  SYNTH_ERROR_RED_DARK: $synth-error-red-dark;
+  SYNTH_ERROR_RED_MEDIUM: $synth-error-red-medium;
+  SYNTH_ERROR_RED_LIGHT: $synth-error-red-light;
+
+  SYNTH_WARNING_AMBER_DARK: $synth-warning-amber-dark;
+  SYNTH_WARNING_AMBER_MEDIUM: $synth-warning-amber-medium;
+  SYNTH_WARNING_AMBER_LIGHT: $synth-warning-amber-light;
+  SYNTH_WARNING_AMBER_ALTERNATE: $synth-warning-amber-alternate;
+
+  SYNTH_ALERT_BG_NEUTRAL: $synth-alert-bg-neutral;
+  SYNTH_DIV_STROKE_NEUTRAL: $synth-div-stroke-neutral;
+  SYNTH_HEADER_NEUTRAL: $synth-header-neutral;
+  SYNTH_PAGE_NEUTRAL: $synth-page-neutral;
+  SYNTH_TEXT_NEUTRAL: $synth-text-neutral;
+  SYNTH_UNSELECTED_NEUTRAL: $synth-unselected-neutral;
+
+  SYNTH_ACCENT_GREEN: $synth-accent-green;
+  SYNTH_DARK_BACKGROUND_SELECTED_BLUE: $synth-dark-background-selected-blue;
+  SYNTH_HOVER_STATE: $synth-hover-state;
+  SYNTH_INDICATOR_STROKE_GREEN: $synth-indicator-stroke-green;
+  SYNTH_NAVBAR_BLUE: $synth-navbar-blue;
+  SYNTH_PRIMARY_CTA_BLUE: $synth-primary-cta-blue;
+  SYNTH_SELECTED_STATE_GREEN: $synth-selected-state-green;
+
+  SYNTH_HYPERLINK_COLOR: $synth-hyperlink-color;
+
+  SYNTH_HOVER_BLUE: $synth-hover-blue;
+  SYNTH_HEADER_GRAY_BLUE: $synth-header-gray-blue;
+
   UX_BLACK: $ux-black;
   UX_BLUE: $ux-blue;
   UX_CREAM: $ux-cream;